diff --git a/packages/Webkul/Core/src/Core.php b/packages/Webkul/Core/src/Core.php
index 065e5ee71..d216e50a8 100755
--- a/packages/Webkul/Core/src/Core.php
+++ b/packages/Webkul/Core/src/Core.php
@@ -239,13 +239,7 @@ class Core
      */
     public function getChannelName($channel): string
     {
-        static $channelName;
-
-        if ($channelName) {
-            return $channelName;
-        }
-
-        return $channelName = $channel->name
+        return $channel->name
             ?? $channel->translate(app()->getLocale())->name
             ?? $channel->translate(config('app.fallback_locale'))->name;
     }
diff --git a/resources/themes/shop/views/checkout/cart/coupon.blade.php b/resources/themes/shop/views/checkout/cart/coupon.blade.php
new file mode 100644
index 000000000..090740935
--- /dev/null
+++ b/resources/themes/shop/views/checkout/cart/coupon.blade.php
@@ -0,0 +1,119 @@
+@if ($cart)
+    <script type="text/x-template" id="coupon-component-template">
+        <div class="coupon-container">    
+            <div class="discount-control">
+                <form class="coupon-form" method="post" @submit.prevent="applyCoupon">
+                    <div class="control-group" :class="[error_message ? 'has-error' : '']">
+                        <input type="text" class="control" v-model="coupon_code" name="code" placeholder="{{ __('shop::app.checkout.onepage.enter-coupon-code') }}">
+
+                        <div class="control-error">@{{ error_message }}</div>
+                    </div>
+
+                    <button class="btn btn-lg btn-black" :disabled="disable_button">{{ __('shop::app.checkout.onepage.apply-coupon') }}</button>
+                </form>
+            </div>
+
+            <div class="applied-coupon-details" v-if="applied_coupon">
+                <label>{{ __('shop::app.checkout.total.coupon-applied') }}</label>
+
+                <label class="right" style="display: inline-flex; align-items: center;">
+                    <b>@{{ applied_coupon }}</b>
+
+                    <span class="icon cross-icon" title="{{ __('shop::app.checkout.total.remove-coupon') }}" v-on:click="removeCoupon"></span>
+                </label>
+            </div>
+        </div>
+    </script>
+
+    <script>
+        Vue.component('coupon-component', {
+            template: '#coupon-component-template',
+
+            inject: ['$validator'],
+
+            data: function() {
+                return {
+                    coupon_code: '',
+
+                    applied_coupon: "{{ $cart->coupon_code }}",
+
+                    error_message: '',
+
+                    route_name: "{{ request()->route()->getName() }}",
+
+                    disable_button: false
+                }
+            },
+            
+            methods: {
+                applyCoupon: function() {
+                    var self = this;
+
+                    if (! self.coupon_code.length)
+                        return;
+
+                    self.error_message = null;
+
+                    self.disable_button = true;
+
+                    axios.post('{{ route('shop.checkout.cart.coupon.apply') }}', {code: self.coupon_code})
+                        .then(function(response) {
+                            if (response.data.success) {
+                                self.$emit('onApplyCoupon');
+
+                                self.applied_coupon = self.coupon_code;
+
+                                self.coupon_code = '';
+
+                                window.flashMessages = [{'type': 'alert-success', 'message': response.data.message}];
+
+                                self.$root.addFlashMessages();
+                                
+                                self.redirectIfCartPage();
+                            } else {
+                                self.error_message = response.data.message;
+                            }
+
+                            self.disable_button = false;
+                        })
+                        .catch(function(error) {
+                            self.error_message = error.response.data.message;
+
+                            self.disable_button = false;
+                        });
+                },
+
+                removeCoupon: function () {
+                    var self = this;
+
+                    axios.delete('{{ route('shop.checkout.coupon.remove.coupon') }}')
+                        .then(function(response) {
+                            self.$emit('onRemoveCoupon')
+
+                            self.applied_coupon = '';
+
+                            window.flashMessages = [{'type': 'alert-success', 'message': response.data.message}];
+
+                            self.$root.addFlashMessages();
+
+                            self.redirectIfCartPage();
+                        })
+                        .catch(function(error) {
+                            window.flashMessages = [{'type': 'alert-error', 'message': error.response.data.message}];
+
+                            self.$root.addFlashMessages();
+                        });
+                },
+
+                redirectIfCartPage: function() {
+                    if (this.route_name != 'shop.checkout.cart.index')
+                        return;
+
+                    setTimeout(function() {
+                        window.location.reload();
+                    }, 700);
+                }
+            }
+        });
+    </script>
+@endif
\ No newline at end of file
diff --git a/resources/themes/shop/views/checkout/cart/index.blade.php b/resources/themes/shop/views/checkout/cart/index.blade.php
new file mode 100644
index 000000000..6d7ebafb6
--- /dev/null
+++ b/resources/themes/shop/views/checkout/cart/index.blade.php
@@ -0,0 +1,272 @@
+@extends('shop::layouts.master')
+
+@section('page_title')
+    {{ __('shop::app.checkout.cart.title') }}
+@stop
+
+@section('content-wrapper')
+    <section class="cart">
+        @if ($cart)
+            <div class="title">
+                {{ __('shop::app.checkout.cart.title') }}
+            </div>
+
+            <div class="cart-content">
+                <div class="left-side">
+                    <form action="{{ route('shop.checkout.cart.update') }}" method="POST" @submit.prevent="onSubmit">
+
+                        <div class="cart-item-list" style="margin-top: 0">
+                            @csrf
+                            @foreach ($cart->items as $key => $item)
+                                @php
+                                    $productBaseImage = $item->product->getTypeInstance()->getBaseImage($item);
+
+                                    if (is_null ($item->product->url_key)) {
+                                        if (! is_null($item->product->parent)) {
+                                            $url_key = $item->product->parent->url_key;
+                                        }
+                                    } else {
+                                        $url_key = $item->product->url_key;
+                                    }
+                                @endphp
+
+                                <div class="item mt-5">
+                                    <div class="item-image" style="margin-right: 15px;">
+                                        <a href="{{ route('shop.productOrCategory.index', $url_key) }}"><img src="{{ $productBaseImage['medium_image_url'] }}" alt="" /></a>
+                                    </div>
+
+                                    <div class="item-details">
+
+                                        {!! view_render_event('bagisto.shop.checkout.cart.item.name.before', ['item' => $item]) !!}
+
+                                        <div class="item-title">
+                                            <a href="{{ route('shop.productOrCategory.index', $url_key) }}">
+                                                {{ $item->product->name }}
+                                            </a>
+                                        </div>
+
+                                        {!! view_render_event('bagisto.shop.checkout.cart.item.name.after', ['item' => $item]) !!}
+
+
+                                        {!! view_render_event('bagisto.shop.checkout.cart.item.price.before', ['item' => $item]) !!}
+
+                                        <div class="price">
+                                            {{ core()->currency($item->base_price) }}
+                                        </div>
+
+                                        {!! view_render_event('bagisto.shop.checkout.cart.item.price.after', ['item' => $item]) !!}
+
+
+                                        {!! view_render_event('bagisto.shop.checkout.cart.item.options.before', ['item' => $item]) !!}
+
+                                        @if (isset($item->additional['attributes']))
+                                            <div class="item-options">
+
+                                                @foreach ($item->additional['attributes'] as $attribute)
+                                                    <b>{{ $attribute['attribute_name'] }} : </b>{{ $attribute['option_label'] }}</br>
+                                                @endforeach
+
+                                            </div>
+                                        @endif
+
+                                        {!! view_render_event('bagisto.shop.checkout.cart.item.options.after', ['item' => $item]) !!}
+
+
+                                        {!! view_render_event('bagisto.shop.checkout.cart.item.quantity.before', ['item' => $item]) !!}
+
+                                        <div class="misc">
+                                            @if ($item->product->getTypeInstance()->showQuantityBox() === true)
+                                                <quantity-changer
+                                                    :control-name="'qty[{{$item->id}}]'"
+                                                    quantity="{{$item->quantity}}">
+                                                </quantity-changer>
+                                            @endif
+
+                                            <span class="remove">
+                                                <a href="{{ route('shop.checkout.cart.remove', $item->id) }}" onclick="removeLink('{{ __('shop::app.checkout.cart.cart-remove-action') }}')">{{ __('shop::app.checkout.cart.remove-link') }}</a></span>
+
+                                            @auth('customer')
+                                                    @php
+                                                        $showWishlist = core()->getConfigData('general.content.shop.wishlist_option') == "1" ? true : false;
+                                                    @endphp
+
+                                                    @if ($showWishlist)
+                                                        <span class="towishlist">
+                                                            @if ($item->parent_id != 'null' ||$item->parent_id != null)
+                                                                <a href="{{ route('shop.movetowishlist', $item->id) }}" onclick="removeLink('{{ __('shop::app.checkout.cart.cart-remove-action') }}')">{{ __('shop::app.checkout.cart.move-to-wishlist') }}</a>
+                                                            @else
+                                                                <a href="{{ route('shop.movetowishlist', $item->child->id) }}" onclick="removeLink('{{ __('shop::app.checkout.cart.cart-remove-action') }}')">{{ __('shop::app.checkout.cart.move-to-wishlist') }}</a>
+                                                            @endif
+                                                        </span>
+                                                    @endif
+                                            @endauth
+                                        </div>
+
+                                        {!! view_render_event('bagisto.shop.checkout.cart.item.quantity.after', ['item' => $item]) !!}
+
+                                        @if (! cart()->isItemHaveQuantity($item))
+                                            <div class="error-message mt-15">
+                                                * {{ __('shop::app.checkout.cart.quantity-error') }}
+                                            </div>
+                                        @endif
+                                    </div>
+
+                                </div>
+                            @endforeach
+                        </div>
+
+                        {!! view_render_event('bagisto.shop.checkout.cart.controls.after', ['cart' => $cart]) !!}
+
+                        <div class="misc-controls">
+                            <a href="{{ route('shop.home.index') }}" class="link">{{ __('shop::app.checkout.cart.continue-shopping') }}</a>
+
+                            <div>
+                                @if ($cart->hasProductsWithQuantityBox())
+                                <button type="submit" class="btn btn-lg btn-primary" id="update_cart_button">
+                                    {{ __('shop::app.checkout.cart.update-cart') }}
+                                </button>
+                                @endif
+
+                                @if (! cart()->hasError())
+                                    @php
+                                        $minimumOrderAmount = (float) core()->getConfigData('sales.orderSettings.minimum-order.minimum_order_amount') ?? 0;
+                                    @endphp
+
+                                    <proceed-to-checkout
+                                        href="{{ route('shop.checkout.onepage.index') }}"
+                                        add-class="btn btn-lg btn-primary"
+                                        text="{{ __('shop::app.checkout.cart.proceed-to-checkout') }}"
+                                        is-minimum-order-completed="{{ $cart->checkMinimumOrder() }}"
+                                        minimum-order-message="{{ __('shop::app.checkout.cart.minimum-order-message', ['amount' => core()->currency($minimumOrderAmount)]) }}">
+                                    </proceed-to-checkout>
+                                @endif
+                            </div>
+                        </div>
+
+                        {!! view_render_event('bagisto.shop.checkout.cart.controls.after', ['cart' => $cart]) !!}
+                    </form>
+                </div>
+
+                <div class="right-side">
+                    {!! view_render_event('bagisto.shop.checkout.cart.summary.after', ['cart' => $cart]) !!}
+
+                    @include('shop::checkout.total.summary', ['cart' => $cart])
+
+                    <coupon-component></coupon-component>
+
+                    {!! view_render_event('bagisto.shop.checkout.cart.summary.after', ['cart' => $cart]) !!}
+                </div>
+            </div>
+
+            @include ('shop::products.view.cross-sells')
+
+        @else
+
+            <div class="title">
+                {{ __('shop::app.checkout.cart.title') }}
+            </div>
+
+            <div class="cart-content">
+                <p>
+                    {{ __('shop::app.checkout.cart.empty') }}
+                </p>
+
+                <p style="display: inline-block;">
+                    <a style="display: inline-block;" href="{{ route('shop.home.index') }}" class="btn btn-lg btn-primary">{{ __('shop::app.checkout.cart.continue-shopping') }}</a>
+                </p>
+            </div>
+
+        @endif
+    </section>
+
+@endsection
+
+@push('scripts')
+    @include('shop::checkout.cart.coupon')
+
+    <script type="text/x-template" id="quantity-changer-template">
+        <div class="quantity control-group" :class="[errors.has(controlName) ? 'has-error' : '']">
+            <div class="wrap">
+                <label>{{ __('shop::app.products.quantity') }}</label>
+
+                <button type="button" class="decrease" @click="decreaseQty()">-</button>
+
+                <input :name="controlName" class="control" :value="qty" v-validate="'required|numeric|min_value:1'" data-vv-as="&quot;{{ __('shop::app.products.quantity') }}&quot;" readonly>
+
+                <button type="button" class="increase" @click="increaseQty()">+</button>
+
+                <span class="control-error" v-if="errors.has(controlName)">@{{ errors.first(controlName) }}</span>
+            </div>
+        </div>
+    </script>
+
+    <script>
+        Vue.component('quantity-changer', {
+            template: '#quantity-changer-template',
+
+            inject: ['$validator'],
+
+            props: {
+                controlName: {
+                    type: String,
+                    default: 'quantity'
+                },
+
+                quantity: {
+                    type: [Number, String],
+                    default: 1
+                }
+            },
+
+            data: function() {
+                return {
+                    qty: this.quantity
+                }
+            },
+
+            watch: {
+                quantity: function (val) {
+                    this.qty = val;
+
+                    this.$emit('onQtyUpdated', this.qty)
+                }
+            },
+
+            methods: {
+                decreaseQty: function() {
+                    if (this.qty > 1)
+                        this.qty = parseInt(this.qty) - 1;
+
+                    this.$emit('onQtyUpdated', this.qty)
+                },
+
+                increaseQty: function() {
+                    this.qty = parseInt(this.qty) + 1;
+
+                    this.$emit('onQtyUpdated', this.qty)
+                }
+            }
+        });
+
+        function removeLink(message) {
+            if (!confirm(message))
+            event.preventDefault();
+        }
+
+        function updateCartQunatity(operation, index) {
+            var quantity = document.getElementById('cart-quantity'+index).value;
+
+            if (operation == 'add') {
+                quantity = parseInt(quantity) + 1;
+            } else if (operation == 'remove') {
+                if (quantity > 1) {
+                    quantity = parseInt(quantity) - 1;
+                } else {
+                    alert('{{ __('shop::app.products.less-quantity') }}');
+                }
+            }
+            document.getElementById('cart-quantity'+index).value = quantity;
+            event.preventDefault();
+        }
+    </script>
+@endpush
\ No newline at end of file
diff --git a/resources/themes/shop/views/checkout/cart/mini-cart.blade.php b/resources/themes/shop/views/checkout/cart/mini-cart.blade.php
new file mode 100644
index 000000000..363278219
--- /dev/null
+++ b/resources/themes/shop/views/checkout/cart/mini-cart.blade.php
@@ -0,0 +1,114 @@
+<?php $cart = cart()->getCart(); ?>
+
+@if ($cart)
+    <?php $items = $cart->items; ?>
+
+    <div class="dropdown-toggle">
+        <a class="cart-link" href="{{ route('shop.checkout.cart.index') }}">
+            <span class="icon cart-icon"></span>
+        </a>
+
+        <span class="name">
+            {{ __('shop::app.header.cart') }}
+            <span class="count"> ({{ $cart->items->count() }})</span>
+        </span>
+
+        <i class="icon arrow-down-icon"></i>
+    </div>
+
+    <div class="dropdown-list" style="display: none; top: 52px; right: 0px;">
+        <div class="dropdown-container">
+            <div class="dropdown-cart">
+                <div class="dropdown-header">
+                    <p class="heading">
+                        {{ __('shop::app.checkout.cart.cart-subtotal') }} -
+
+                        {!! view_render_event('bagisto.shop.checkout.cart-mini.subtotal.before', ['cart' => $cart]) !!}
+
+                        <b>{{ core()->currency($cart->base_sub_total) }}</b>
+
+                        {!! view_render_event('bagisto.shop.checkout.cart-mini.subtotal.after', ['cart' => $cart]) !!}
+                    </p>
+                </div>
+
+                <div class="dropdown-content">
+                    @foreach ($items as $item)
+
+                        <div class="item">
+                            <div class="item-image" >
+                                @php
+                                    $images = $item->product->getTypeInstance()->getBaseImage($item);
+                                @endphp
+                                <img src="{{ $images['small_image_url'] }}"  alt=""/>
+                            </div>
+
+                            <div class="item-details">
+                                {!! view_render_event('bagisto.shop.checkout.cart-mini.item.name.before', ['item' => $item]) !!}
+
+                                <div class="item-name">{{ $item->name }}</div>
+
+                                {!! view_render_event('bagisto.shop.checkout.cart-mini.item.name.after', ['item' => $item]) !!}
+
+
+                                {!! view_render_event('bagisto.shop.checkout.cart-mini.item.options.before', ['item' => $item]) !!}
+
+                                @if (isset($item->additional['attributes']))
+                                    <div class="item-options">
+
+                                        @foreach ($item->additional['attributes'] as $attribute)
+                                            <b>{{ $attribute['attribute_name'] }} : </b>{{ $attribute['option_label'] }}</br>
+                                        @endforeach
+
+                                    </div>
+                                @endif
+
+                                {!! view_render_event('bagisto.shop.checkout.cart-mini.item.options.after', ['item' => $item]) !!}
+
+
+                                {!! view_render_event('bagisto.shop.checkout.cart-mini.item.price.before', ['item' => $item]) !!}
+
+                                <div class="item-price"><b>{{ core()->currency($item->base_total) }}</b></div>
+
+                                {!! view_render_event('bagisto.shop.checkout.cart-mini.item.price.after', ['item' => $item]) !!}
+
+
+                                {!! view_render_event('bagisto.shop.checkout.cart-mini.item.quantity.before', ['item' => $item]) !!}
+
+                                <div class="item-qty">Quantity - {{ $item->quantity }}</div>
+
+                                {!! view_render_event('bagisto.shop.checkout.cart-mini.item.quantity.after', ['item' => $item]) !!}
+                            </div>
+                        </div>
+
+                    @endforeach
+                </div>
+
+                <div class="dropdown-footer">
+                    <a href="{{ route('shop.checkout.cart.index') }}">{{ __('shop::app.minicart.view-cart') }}</a>
+
+                    @php
+                        $minimumOrderAmount = (float) core()->getConfigData('sales.orderSettings.minimum-order.minimum_order_amount') ?? 0;
+                    @endphp
+
+                    <proceed-to-checkout
+                        href="{{ route('shop.checkout.onepage.index') }}"
+                        add-class="btn btn-primary btn-lg"
+                        text="{{ __('shop::app.minicart.checkout') }}"
+                        is-minimum-order-completed="{{ $cart->checkMinimumOrder() }}"
+                        minimum-order-message="{{ __('shop::app.checkout.cart.minimum-order-message', ['amount' => core()->currency($minimumOrderAmount)]) }}"
+                        style="color: white;">
+                    </proceed-to-checkout>
+                </div>
+            </div>
+        </div>
+    </div>
+
+@else
+
+    <div class="dropdown-toggle" style="pointer-events: none;">
+        <div style="display: inline-block; cursor: pointer;">
+            <span class="icon cart-icon"></span>
+            <span class="name">{{ __('shop::app.minicart.cart') }}<span class="count"> ({{ __('shop::app.minicart.zero') }}) </span></span>
+        </div>
+    </div>
+@endif
\ No newline at end of file
diff --git a/resources/themes/shop/views/checkout/onepage.blade.php b/resources/themes/shop/views/checkout/onepage.blade.php
new file mode 100644
index 000000000..117026353
--- /dev/null
+++ b/resources/themes/shop/views/checkout/onepage.blade.php
@@ -0,0 +1,615 @@
+@extends('shop::layouts.master')
+
+@section('page_title')
+    {{ __('shop::app.checkout.onepage.title') }}
+@stop
+
+@section('content-wrapper')
+    <checkout></checkout>
+@endsection
+
+@push('scripts')
+    @include('shop::checkout.cart.coupon')
+
+    <script type="text/x-template" id="checkout-template">
+        <div id="checkout" class="checkout-process">
+            <div class="col-main">
+                <ul class="checkout-steps">
+                    <li class="active" :class="[completed_step >= 0 ? 'active' : '', completed_step > 0 ? 'completed' : '']" @click="navigateToStep(1)">
+                        <div class="decorator address-info"></div>
+                        <span>{{ __('shop::app.checkout.onepage.information') }}</span>
+                    </li>
+
+                    <div class="line mb-25"></div>
+
+                    @if ($cart->haveStockableItems())
+                        <li :class="[current_step == 2 || completed_step > 1 ? 'active' : '', completed_step > 1 ? 'completed' : '']" @click="navigateToStep(2)">
+                            <div class="decorator shipping"></div>
+                            <span>{{ __('shop::app.checkout.onepage.shipping') }}</span>
+                        </li>
+
+                        <div class="line mb-25"></div>
+                    @endif
+
+                    <li :class="[current_step == 3 || completed_step > 2 ? 'active' : '', completed_step > 2 ? 'completed' : '']" @click="navigateToStep(3)">
+                        <div class="decorator payment"></div>
+                        <span>{{ __('shop::app.checkout.onepage.payment') }}</span>
+                    </li>
+
+                    <div class="line mb-25"></div>
+
+                    <li :class="[current_step == 4 ? 'active' : '']">
+                        <div class="decorator review"></div>
+                        <span>{{ __('shop::app.checkout.onepage.review') }}</span>
+                    </li>
+                </ul>
+
+                <div class="step-content information" v-show="current_step == 1" id="address-section">
+                    @include('shop::checkout.onepage.customer-info')
+
+                    <div class="button-group">
+                        <button type="button" class="btn btn-lg btn-primary" @click="validateForm('address-form')" :disabled="disable_button" id="checkout-address-continue-button">
+                            {{ __('shop::app.checkout.onepage.continue') }}
+                        </button>
+                    </div>
+                </div>
+
+                <div class="step-content shipping" v-show="current_step == 2" id="shipping-section">
+                    <shipping-section v-if="current_step == 2" @onShippingMethodSelected="shippingMethodSelected($event)"></shipping-section>
+
+                    <div class="button-group">
+                        <button type="button" class="btn btn-lg btn-primary" @click="validateForm('shipping-form')" :disabled="disable_button" id="checkout-shipping-continue-button">
+                            {{ __('shop::app.checkout.onepage.continue') }}
+                        </button>
+
+                    </div>
+                </div>
+
+                <div class="step-content payment" v-show="current_step == 3" id="payment-section">
+                    <payment-section v-if="current_step == 3" @onPaymentMethodSelected="paymentMethodSelected($event)"></payment-section>
+
+                    <div class="button-group">
+                        <button type="button" class="btn btn-lg btn-primary" @click="validateForm('payment-form')" :disabled="disable_button" id="checkout-payment-continue-button">
+                            {{ __('shop::app.checkout.onepage.continue') }}
+                        </button>
+                    </div>
+                </div>
+
+                <div class="step-content review" v-show="current_step == 4" id="summary-section">
+                    <review-section v-if="current_step == 4" :key="reviewComponentKey">
+                        <div slot="summary-section">
+                            <summary-section :key="summeryComponentKey"></summary-section>
+
+                            <coupon-component
+                                @onApplyCoupon="getOrderSummary"
+                                @onRemoveCoupon="getOrderSummary">
+                            </coupon-component>
+                        </div>
+                    </review-section>
+
+                    <div class="button-group">
+                        <button type="button" class="btn btn-lg btn-primary" @click="placeOrder()" :disabled="disable_button" id="checkout-place-order-button" v-if="selected_payment_method.method != 'paypal_smart_button'">
+                            {{ __('shop::app.checkout.onepage.place-order') }}
+                        </button>
+
+                        <div class="paypal-button-container"></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-right" v-show="current_step != 4">
+                <summary-section :key="summeryComponentKey"></summary-section>
+            </div>
+        </div>
+    </script>
+
+    <script>
+        var shippingHtml = '';
+        var paymentHtml = '';
+        var reviewHtml = '';
+        var summaryHtml = '';
+        var customerAddress = '';
+        var shippingMethods = '';
+        var paymentMethods = '';
+
+        @auth('customer')
+            @if(auth('customer')->user()->addresses)
+                customerAddress = @json(auth('customer')->user()->addresses);
+                customerAddress.email = "{{ auth('customer')->user()->email }}";
+                customerAddress.first_name = "{{ auth('customer')->user()->first_name }}";
+                customerAddress.last_name = "{{ auth('customer')->user()->last_name }}";
+            @endif
+        @endauth
+
+        Vue.component('checkout', {
+            template: '#checkout-template',
+            inject: ['$validator'],
+
+            data: function() {
+                return {
+                    step_numbers: {
+                        'information': 1,
+                        'shipping': 2,
+                        'payment': 3,
+                        'review': 4
+                    },
+
+                    current_step: 1,
+
+                    completed_step: 0,
+
+                    address: {
+                        billing: {
+                            address1: [''],
+
+                            use_for_shipping: true,
+                        },
+
+                        shipping: {
+                            address1: ['']
+                        },
+                    },
+
+                    selected_shipping_method: '',
+
+                    selected_payment_method: '',
+
+                    disable_button: false,
+
+                    new_shipping_address: false,
+
+                    new_billing_address: false,
+
+                    allAddress: {},
+
+                    countryStates: @json(core()->groupedStatesByCountries()),
+
+                    country: @json(core()->countries()),
+
+                    summeryComponentKey: 0,
+
+                    reviewComponentKey: 0,
+
+                    is_customer_exist: 0
+                }
+            },
+
+            created: function() {
+                this.getOrderSummary();
+
+                if(! customerAddress) {
+                    this.new_shipping_address = true;
+                    this.new_billing_address = true;
+                } else {
+                    this.address.billing.first_name = this.address.shipping.first_name = customerAddress.first_name;
+                    this.address.billing.last_name = this.address.shipping.last_name = customerAddress.last_name;
+                    this.address.billing.email = this.address.shipping.email = customerAddress.email;
+
+                    if (customerAddress.length < 1) {
+                        this.new_shipping_address = true;
+                        this.new_billing_address = true;
+                    } else {
+                        this.allAddress = customerAddress;
+
+                        for (var country in this.country) {
+                            for (var code in this.allAddress) {
+                                if (this.allAddress[code].country) {
+                                    if (this.allAddress[code].country == this.country[country].code) {
+                                        this.allAddress[code]['country'] = this.country[country].name;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            },
+
+            methods: {
+                navigateToStep: function(step) {
+                    if (step <= this.completed_step) {
+                        this.current_step = step
+                        this.completed_step = step - 1;
+                    }
+                },
+
+                haveStates: function(addressType) {
+                    if (this.countryStates[this.address[addressType].country] && this.countryStates[this.address[addressType].country].length)
+                        return true;
+
+                    return false;
+                },
+
+                validateForm: async function(scope) {
+                    var this_this = this;
+
+                    await this.$validator.validateAll(scope).then(function (result) {
+                        if (result) {
+                            if (scope == 'address-form') {
+                                this_this.saveAddress();
+                            } else if (scope == 'shipping-form') {
+                                this_this.saveShipping();
+                            } else if (scope == 'payment-form') {
+                                this_this.savePayment();
+                            }
+                        }
+                    });
+                },
+
+                isCustomerExist: function() {
+                    this.$validator.attach({ name: "email", rules: "required|email" });
+
+                    var this_this = this;
+
+                    this.$validator.validate('email', this.address.billing.email)
+                        .then(function(isValid) {
+                            if (! isValid)
+                                return;
+
+                            this_this.$http.post("{{ route('customer.checkout.exist') }}", {email: this_this.address.billing.email})
+                                .then(function(response) {
+                                    this_this.is_customer_exist = response.data ? 1 : 0;
+                                })
+                                .catch(function (error) {})
+
+                        })
+                },
+
+                loginCustomer: function() {
+                    var this_this = this;
+
+                    this_this.$http.post("{{ route('customer.checkout.login') }}", {
+                            email: this_this.address.billing.email,
+                            password: this_this.address.billing.password
+                        })
+                        .then(function(response) {
+                            if (response.data.success) {
+                                window.location.href = "{{ route('shop.checkout.onepage.index') }}";
+                            } else {
+                                window.flashMessages = [{'type': 'alert-error', 'message': response.data.error }];
+
+                                this_this.$root.addFlashMessages()
+                            }
+                        })
+                        .catch(function (error) {})
+                },
+
+                getOrderSummary () {
+                    var this_this = this;
+
+                    this.$http.get("{{ route('shop.checkout.summary') }}")
+                        .then(function(response) {
+                            summaryHtml = Vue.compile(response.data.html)
+
+                            this_this.summeryComponentKey++;
+                            //this_this.reviewComponentKey++;
+                        })
+                        .catch(function (error) {})
+                },
+
+                saveAddress: async function() {
+                    var this_this = this;
+
+                    this.disable_button = true;
+
+                    if (this.allAddress.length > 0) {
+                        let address = this.allAddress.forEach(address => {
+                            if (address.id == this.address.billing.address_id) {
+                                this.address.billing.address1 = [address.address1];
+                            }
+
+                            if (address.id == this.address.shipping.address_id) {
+                                this.address.shipping.address1 = [address.address1];
+                            }
+                        });
+                    }
+
+                    this.$http.post("{{ route('shop.checkout.save-address') }}", this.address)
+                        .then(function(response) {
+                            this_this.disable_button = false;
+
+                            if (this_this.step_numbers[response.data.jump_to_section] == 2)
+                                shippingHtml = Vue.compile(response.data.html)
+                            else
+                                paymentHtml = Vue.compile(response.data.html)
+
+                            this_this.completed_step = this_this.step_numbers[response.data.jump_to_section] - 1;
+                            this_this.current_step = this_this.step_numbers[response.data.jump_to_section];
+
+                            shippingMethods = response.data.shippingMethods;
+                            paymentMethods  = response.data.paymentMethods;
+
+                            this_this.getOrderSummary();
+                        })
+                        .catch(function (error) {
+                            this_this.disable_button = false;
+
+                            this_this.handleErrorResponse(error.response, 'address-form')
+                        })
+                },
+
+                saveShipping: async function() {
+                    var this_this = this;
+
+                    this.disable_button = true;
+
+                    this.$http.post("{{ route('shop.checkout.save-shipping') }}", {'shipping_method': this.selected_shipping_method})
+                        .then(function(response) {
+                            this_this.disable_button = false;
+
+                            paymentHtml = Vue.compile(response.data.html)
+                            this_this.completed_step = this_this.step_numbers[response.data.jump_to_section] - 1;
+                            this_this.current_step = this_this.step_numbers[response.data.jump_to_section];
+
+                            paymentMethods = response.data.paymentMethods;
+
+                            this_this.getOrderSummary();
+                        })
+                        .catch(function (error) {
+                            this_this.disable_button = false;
+
+                            this_this.handleErrorResponse(error.response, 'shipping-form')
+                        })
+                },
+
+                savePayment: async function() {
+                    var this_this = this;
+
+                    this.disable_button = true;
+
+                    this.$http.post("{{ route('shop.checkout.save-payment') }}", {'payment': this.selected_payment_method})
+                    .then(function(response) {
+                        this_this.disable_button = false;
+
+                        reviewHtml = Vue.compile(response.data.html)
+                        this_this.completed_step = this_this.step_numbers[response.data.jump_to_section] - 1;
+                        this_this.current_step = this_this.step_numbers[response.data.jump_to_section];
+
+                        this_this.getOrderSummary();
+                    })
+                    .catch(function (error) {
+                        this_this.disable_button = false;
+
+                        this_this.handleErrorResponse(error.response, 'payment-form')
+                    });
+                },
+
+                placeOrder: async function() {
+                    var this_this = this;
+
+                    this.disable_button = true;
+
+                    this.$http.post("{{ route('shop.checkout.save-order') }}", {'_token': "{{ csrf_token() }}"})
+                    .then(function(response) {
+                        if (response.data.success) {
+                            if (response.data.redirect_url) {
+                                window.location.href = response.data.redirect_url;
+                            } else {
+                                window.location.href = "{{ route('shop.checkout.success') }}";
+                            }
+                        }
+                    })
+                    .catch(function (error) {
+                        this_this.disable_button = true;
+
+                        window.flashMessages = [{'type': 'alert-error', 'message': "{{ __('shop::app.common.error') }}" }];
+
+                        this_this.$root.addFlashMessages()
+                    })
+                },
+
+                handleErrorResponse: function(response, scope) {
+                    if (response.status == 422) {
+                        serverErrors = response.data.errors;
+                        this.$root.addServerErrors(scope)
+                    } else if (response.status == 403) {
+                        if (response.data.redirect_url) {
+                            window.location.href = response.data.redirect_url;
+                        }
+                    }
+                },
+
+                shippingMethodSelected: function(shippingMethod) {
+                    this.selected_shipping_method = shippingMethod;
+                },
+
+                paymentMethodSelected: function(paymentMethod) {
+                    this.selected_payment_method = paymentMethod;
+                },
+
+                newBillingAddress: function() {
+                    this.new_billing_address = true;
+                    this.address.billing.address_id = null;
+                },
+
+                newShippingAddress: function() {
+                    this.new_shipping_address = true;
+                    this.address.shipping.address_id = null;
+                },
+
+                backToSavedBillingAddress: function() {
+                    this.new_billing_address = false;
+                },
+
+                backToSavedShippingAddress: function() {
+                    this.new_shipping_address = false;
+                },
+            }
+        })
+
+        var shippingTemplateRenderFns = [];
+
+        Vue.component('shipping-section', {
+            inject: ['$validator'],
+
+            data: function() {
+                return {
+                    templateRender: null,
+
+                    selected_shipping_method: '',
+
+                    first_iteration : true,
+                }
+            },
+
+            staticRenderFns: shippingTemplateRenderFns,
+
+            mounted: function() {
+                for (method in shippingMethods) {
+                    if (this.first_iteration) {
+                        for (rate in shippingMethods[method]['rates']) {
+                            this.selected_shipping_method = shippingMethods[method]['rates'][rate]['method'];
+                            this.first_iteration = false;
+                            this.methodSelected();
+                        }
+                    }
+                }
+
+                this.templateRender = shippingHtml.render;
+                for (var i in shippingHtml.staticRenderFns) {
+                    shippingTemplateRenderFns.push(shippingHtml.staticRenderFns[i]);
+                }
+
+                eventBus.$emit('after-checkout-shipping-section-added');
+            },
+
+            render: function(h) {
+                return h('div', [
+                    (this.templateRender ?
+                        this.templateRender() :
+                        '')
+                    ]);
+            },
+
+            methods: {
+                methodSelected: function() {
+                    this.$emit('onShippingMethodSelected', this.selected_shipping_method)
+
+                    eventBus.$emit('after-shipping-method-selected', this.selected_shipping_method);
+                }
+            }
+        })
+
+        var paymentTemplateRenderFns = [];
+
+        Vue.component('payment-section', {
+            inject: ['$validator'],
+
+            data: function() {
+                return {
+                    templateRender: null,
+
+                    payment: {
+                        method: ""
+                    },
+
+                    first_iteration : true,
+                }
+            },
+
+            staticRenderFns: paymentTemplateRenderFns,
+
+            mounted: function() {
+                for (method in paymentMethods) {
+                    if (this.first_iteration) {
+                        this.payment.method = paymentMethods[method]['method'];
+                        this.first_iteration = false;
+                        this.methodSelected();
+                    }
+                }
+
+                this.templateRender = paymentHtml.render;
+                for (var i in paymentHtml.staticRenderFns) {
+                    paymentTemplateRenderFns.push(paymentHtml.staticRenderFns[i]);
+                }
+
+                eventBus.$emit('after-checkout-payment-section-added');
+            },
+
+            render: function(h) {
+                return h('div', [
+                    (this.templateRender ?
+                        this.templateRender() :
+                        '')
+                    ]);
+            },
+
+            methods: {
+                methodSelected: function() {
+                    this.$emit('onPaymentMethodSelected', this.payment);
+
+                    $('.paypal-button-container').empty();
+
+                    eventBus.$emit('after-payment-method-selected', this.payment);
+                }
+            }
+        })
+
+        var reviewTemplateRenderFns = [];
+
+        Vue.component('review-section', {
+            data: function() {
+                return {
+                    templateRender: null,
+
+                    error_message: ''
+                }
+            },
+
+            staticRenderFns: reviewTemplateRenderFns,
+
+            render: function(h) {
+                return h('div', [
+                    (this.templateRender ?
+                        this.templateRender() :
+                        '')
+                    ]);
+            },
+
+            mounted: function() {
+                this.templateRender = reviewHtml.render;
+
+                for (var i in reviewHtml.staticRenderFns) {
+                    // reviewTemplateRenderFns.push(reviewHtml.staticRenderFns[i]);
+                    reviewTemplateRenderFns[i] = reviewHtml.staticRenderFns[i];
+                }
+
+                this.$forceUpdate();
+            }
+        });
+
+
+        var summaryTemplateRenderFns = [];
+
+        Vue.component('summary-section', {
+            inject: ['$validator'],
+
+            data: function() {
+                return {
+                    templateRender: null
+                }
+            },
+
+            staticRenderFns: summaryTemplateRenderFns,
+
+            mounted: function() {
+                this.templateRender = summaryHtml.render;
+
+                for (var i in summaryHtml.staticRenderFns) {
+                    // summaryTemplateRenderFns.push(summaryHtml.staticRenderFns[i]);
+                    summaryTemplateRenderFns[i] = summaryHtml.staticRenderFns[i];
+                }
+
+                this.$forceUpdate();
+            },
+
+            render: function(h) {
+                return h('div', [
+                    (this.templateRender ?
+                        this.templateRender() :
+                        '')
+                    ]);
+            }
+        })
+    </script>
+
+@endpush
diff --git a/resources/themes/shop/views/checkout/onepage/customer-checkout.blade.php b/resources/themes/shop/views/checkout/onepage/customer-checkout.blade.php
new file mode 100644
index 000000000..4ad841c6e
--- /dev/null
+++ b/resources/themes/shop/views/checkout/onepage/customer-checkout.blade.php
@@ -0,0 +1,23 @@
+<div v-if="is_customer_exist">
+    <div class="control-group" id="password">
+        <label for="password">{{ __('shop::app.checkout.onepage.password') }}</label>
+
+        <input type="password" class="control" id="password" name="password" v-model="address.billing.password"/>
+    </div>
+
+    <div class="control-group" id="login-and-forgot-btn">
+        <div class="forgot-password-link"  style="float: right;margin-right: 503px; margin-top: 11px;">
+            <a href="{{ route('customer.forgot-password.create') }}">{{ __('shop::app.customer.login-form.forgot_pass') }}</a>
+
+            <div class="mt-10">
+                @if (Cookie::has('enable-resend') && Cookie::get('enable-resend') == true)
+                    <a href="{{ route('customer.resend.verification-email', Cookie::get('email-for-resend')) }}">{{ __('shop::app.customer.login-form.resend-verification') }}</a>
+                @endif
+            </div>
+        </div>
+
+        <button type='button' id="" class="btn btn-primary btn-lg btn-login" @click="loginCustomer">
+            {{ __('shop::app.customer.login-form.button_title') }}
+        </button>
+    </div>
+</div>
\ No newline at end of file
diff --git a/resources/themes/shop/views/checkout/onepage/customer-info.blade.php b/resources/themes/shop/views/checkout/onepage/customer-info.blade.php
new file mode 100644
index 000000000..40fbcba67
--- /dev/null
+++ b/resources/themes/shop/views/checkout/onepage/customer-info.blade.php
@@ -0,0 +1,475 @@
+<form data-vv-scope="address-form">
+
+    <div class="form-container" v-if="!this.new_billing_address">
+        <div class="form-header mb-30">
+            <span class="checkout-step-heading">{{ __('shop::app.checkout.onepage.billing-address') }}</span>
+
+            <a class="btn btn-lg btn-primary" @click = newBillingAddress()>
+                {{ __('shop::app.checkout.onepage.new-address') }}
+            </a>
+        </div>
+        <div class="address-holder">
+            <div class="address-card" v-for='(addresses, index) in this.allAddress'>
+                <div class="checkout-address-content" style="display: flex; flex-direction: row; justify-content: space-between; width: 100%;">
+                    <label class="radio-container" style="float: right; width: 10%;">
+                        <input type="radio" v-validate="'required'" id="billing[address_id]" name="billing[address_id]" :value="addresses.id" v-model="address.billing.address_id" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.billing-address') }}&quot;">
+                        <span class="checkmark"></span>
+                    </label>
+
+                    <ul class="address-card-list" style="float: right; width: 85%;">
+                        <li class="mb-5" v-if="addresses.company_name != ''">
+                            @{{ addresses.company_name }}
+                        </li>
+
+                        <li class="mb-10">
+                            <b>@{{ allAddress.first_name }} @{{ allAddress.last_name }},</b>
+                        </li>
+
+                        <li class="mb-5">
+                            @{{ addresses.address1 }},
+                        </li>
+
+                        <li class="mb-5">
+                            @{{ addresses.city }},
+                        </li>
+
+                        <li class="mb-5">
+                            @{{ addresses.state }},
+                        </li>
+
+                        <li class="mb-15">
+                            @{{ addresses.country }}  @{{ addresses.postcode }}
+                        </li>
+
+                        <li>
+                            <b>{{ __('shop::app.customer.account.address.index.contact') }}</b> : @{{ addresses.phone }}
+                        </li>
+                    </ul>
+                </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>
+        </div>
+
+        @if ($cart->haveStockableItems())
+            <div class="control-group mt-5">
+                <span class="checkbox">
+                    <input type="checkbox" id="billing[use_for_shipping]" name="billing[use_for_shipping]" v-model="address.billing.use_for_shipping"/>
+                        <label class="checkbox-view" for="billing[use_for_shipping]"></label>
+                        {{ __('shop::app.checkout.onepage.use_for_shipping') }}
+                </span>
+            </div>
+        @endif
+    </div>
+
+    <div class="form-container" v-if="this.new_billing_address">
+
+        <div class="form-header">
+            <h1>{{ __('shop::app.checkout.onepage.billing-address') }}</h1>
+
+            @auth('customer')
+                @if(count(auth('customer')->user()->addresses))
+                    <a class="btn btn-lg btn-primary" @click = backToSavedBillingAddress()>
+                        {{ __('shop::app.checkout.onepage.back') }}
+                    </a>
+                @endif
+            @endauth
+        </div>
+
+        <div class="control-group" :class="[errors.has('address-form.billing[email]') ? 'has-error' : '']">
+            <label for="billing[email]" class="required">
+                {{ __('shop::app.checkout.onepage.email') }}
+            </label>
+
+            <input type="text" v-validate="'required|email'" class="control" id="billing[email]" name="billing[email]" v-model="address.billing.email" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.email') }}&quot;" @blur="isCustomerExist"/>
+
+            <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 (! auth()->guard('customer')->check())
+            @include('shop::checkout.onepage.customer-checkout')
+        @endif
+
+        <div class="control-group" :class="[errors.has('address-form.billing[company_name]') ? 'has-error' : '']">
+            <label for="billing[company_name]">
+                {{ __('shop::app.checkout.onepage.company-name') }}
+            </label>
+
+            <input type="text" class="control" id="billing[company_name]" name="billing[company_name]" v-model="address.billing.company_name" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.company-name') }}&quot;"/>
+
+            <span class="control-error" v-if="errors.has('address-form.billing[company_name]')">
+                @{{ errors.first('address-form.billing[company_name]') }}
+            </span>
+        </div>
+
+        <div class="control-group" :class="[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" v-validate="'required'" class="control" 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="control-group" :class="[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="control-group" :class="[errors.has('address-form.billing[address1][]') ? 'has-error' : '']">
+            <label for="billing_address_0" class="required">
+                {{ __('shop::app.checkout.onepage.address1') }}
+            </label>
+
+            <input type="text" v-validate="'required'" class="control" 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="control-group" style="margin-top: -25px;">
+                @for ($i = 1; $i < core()->getConfigData('customer.settings.address.street_lines'); $i++)
+                    <input type="text" class="control" name="billing[address1][{{ $i }}]" id="billing_address_{{ $i }}" v-model="address.billing.address1[{{$i}}]">
+                @endfor
+            </div>
+        @endif
+
+        <div class="control-group" :class="[errors.has('address-form.billing[city]') ? 'has-error' : '']">
+            <label for="billing[city]" class="required">
+                {{ __('shop::app.checkout.onepage.city') }}
+            </label>
+
+            <input type="text" v-validate="'required'" class="control" id="billing[city]" name="billing[city]" 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="control-group" :class="[errors.has('address-form.billing[country]') ? 'has-error' : '']">
+            <label for="billing[country]" class="required">
+                {{ __('shop::app.checkout.onepage.country') }}
+            </label>
+
+            <select type="text" v-validate="'required'" class="control" id="billing[country]" name="billing[country]" 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="control-group" :class="[errors.has('address-form.billing[state]') ? 'has-error' : '']">
+            <label for="billing[state]" class="required">
+                {{ __('shop::app.checkout.onepage.state') }}
+            </label>
+
+            <input type="text" v-validate="'required'" class="control" id="billing[state]" name="billing[state]" v-model="address.billing.state" v-if="!haveStates('billing')" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.state') }}&quot;"/>
+
+            <select v-validate="'required'" class="control" id="billing[state]" name="billing[state]" v-model="address.billing.state" v-if="haveStates('billing')" 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="control-group" :class="[errors.has('address-form.billing[postcode]') ? 'has-error' : '']">
+            <label for="billing[postcode]" class="required">
+                {{ __('shop::app.checkout.onepage.postcode') }}
+            </label>
+
+            <input type="text" v-validate="'required'" class="control" id="billing[postcode]" 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="control-group" :class="[errors.has('address-form.billing[phone]') ? 'has-error' : '']">
+            <label for="billing[phone]" class="required">
+                {{ __('shop::app.checkout.onepage.phone') }}
+            </label>
+
+            <input type="text" v-validate="'required'" class="control" id="billing[phone]" name="billing[phone]" v-model="address.billing.phone" 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="control-group">
+                <span class="checkbox">
+                    <input type="checkbox" id="billing[use_for_shipping]" name="billing[use_for_shipping]" v-model="address.billing.use_for_shipping"/>
+                    <label class="checkbox-view" for="billing[use_for_shipping]"></label>
+                    {{ __('shop::app.checkout.onepage.use_for_shipping') }}
+                </span>
+            </div>
+        @endif
+
+        @auth('customer')
+            <div class="control-group">
+                <span class="checkbox">
+                    <input type="checkbox" id="billing[save_as_address]" name="billing[save_as_address]" v-model="address.billing.save_as_address"/>
+                    <label class="checkbox-view" for="billing[save_as_address]"></label>
+                    {{ __('shop::app.checkout.onepage.save_as_address') }}
+                </span>
+            </div>
+        @endauth
+
+    </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">
+                <span class="checkout-step-heading">{{ __('shop::app.checkout.onepage.shipping-address') }}</span>
+
+                <a class="btn btn-lg btn-primary" @click=newShippingAddress()>
+                    {{ __('shop::app.checkout.onepage.new-address') }}
+                </a>
+            </div>
+
+            <div class="address-holder">
+                <div class="address-card" v-for='(addresses, index) in this.allAddress'>
+                    <div class="checkout-address-content" style="display: flex; flex-direction: row; justify-content: space-between; width: 100%;">
+                        <label class="radio-container" style="float: right; width: 10%;">
+                            <input v-validate="'required'" type="radio" id="shipping[address_id]" name="shipping[address_id]" v-model="address.shipping.address_id" :value="addresses.id"
+                            data-vv-as="&quot;{{ __('shop::app.checkout.onepage.shipping-address') }}&quot;">
+                            <span class="checkmark"></span>
+                        </label>
+
+                        <ul class="address-card-list" style="float: right; width: 85%;">
+                            <li class="mb-5" v-if="addresses.company_name != ''">
+                                @{{ addresses.company_name }}
+                            </li>
+
+                            <li class="mb-10">
+                                <b>@{{ addresses.first_name }} @{{ addresses.last_name }},</b>
+                            </li>
+
+                            <li class="mb-5">
+                                @{{ addresses.address1 }},
+                            </li>
+
+                            <li class="mb-5">
+                                @{{ addresses.city }},
+                            </li>
+
+                            <li class="mb-5">
+                                @{{ addresses.state }},
+                            </li>
+
+                            <li class="mb-15">
+                                @{{ addresses.country }} @{{ addresses.postcode }}
+                            </li>
+
+                            <li>
+                                <b>{{ __('shop::app.customer.account.address.index.contact') }}</b> : @{{ addresses.phone }}
+                            </li>
+                        </ul>
+                    </div>
+                </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>
+        </div>
+
+        <div class="form-container" v-if="!address.billing.use_for_shipping && this.new_shipping_address">
+
+            <div class="form-header">
+                <h1>{{ __('shop::app.checkout.onepage.shipping-address') }}</h1>
+                @auth('customer')
+                    @if(count(auth('customer')->user()->addresses))
+                        <a class="btn btn-lg btn-primary" @click = backToSavedShippingAddress()>
+                            {{ __('shop::app.checkout.onepage.back') }}
+                        </a>
+                    @endif
+                @endauth
+            </div>
+
+            <div class="control-group" :class="[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;"/>
+
+                <span class="control-error" v-if="errors.has('address-form.shipping[first_name]')">
+                    @{{ errors.first('address-form.shipping[first_name]') }}
+                </span>
+            </div>
+
+            <div class="control-group" :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="control-group" :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="control-group" :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="control-group" style="margin-top: -25px;">
+                    @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="control-group" :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="control-group" :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="control-group" :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="control-group" :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="control-group" :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="control-group">
+                    <span class="checkbox">
+                        <input type="checkbox" id="shipping[save_as_address]" name="shipping[save_as_address]" v-model="address.shipping.save_as_address"/>
+                        <label class="checkbox-view" for="shipping[save_as_address]"></label>
+                        {{ __('shop::app.checkout.onepage.save_as_address') }}
+                    </span>
+                </div>
+            @endauth
+
+        </div>
+    @endif
+
+</form>
\ No newline at end of file
diff --git a/resources/themes/shop/views/checkout/onepage/payment.blade.php b/resources/themes/shop/views/checkout/onepage/payment.blade.php
new file mode 100644
index 000000000..487d31c7e
--- /dev/null
+++ b/resources/themes/shop/views/checkout/onepage/payment.blade.php
@@ -0,0 +1,51 @@
+<form data-vv-scope="payment-form">
+    <div class="form-container">
+        <div class="form-header mb-30">
+            <span class="checkout-step-heading">{{ __('shop::app.checkout.onepage.payment-methods') }}</span>
+        </div>
+
+        <div class="payment-methods">
+
+            <div class="control-group" :class="[errors.has('payment-form.payment[method]') ? 'has-error' : '']">
+
+                @foreach ($paymentMethods as $payment)
+
+                    {!! view_render_event('bagisto.shop.checkout.payment-method.before', ['payment' => $payment]) !!}
+
+                    <div class="checkout-method-group mb-20">
+                        <div class="line-one">
+                            <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>
+                            <span class="payment-method method-label">
+                                <b>{{ $payment['method_title'] }}</b>
+                            </span>
+                        </div>
+
+                        <div class="line-two mt-5">
+                            <span class="method-summary">{{ __($payment['description']) }}</span>
+                        </div>
+
+                        <?php $additionalDetails = \Webkul\Payment\Payment::getAdditionalDetails($payment['method']); ?>
+
+                        @if (! empty($additionalDetails))
+                            <div class="instructions" v-show="payment.method == '{{$payment['method']}}'">
+                                <label>{{ $additionalDetails['title'] }}</label>
+                                <p>{{ $additionalDetails['value'] }}</p>
+                            </div>
+                        @endif
+                    </div>
+
+                    {!! view_render_event('bagisto.shop.checkout.payment-method.after', ['payment' => $payment]) !!}
+
+                @endforeach
+
+                <span class="control-error" v-if="errors.has('payment-form.payment[method]')">
+                    @{{ errors.first('payment-form.payment[method]') }}
+                </span>
+
+            </div>
+        </div>
+    </div>
+</form>
\ No newline at end of file
diff --git a/resources/themes/shop/views/checkout/onepage/review.blade.php b/resources/themes/shop/views/checkout/onepage/review.blade.php
new file mode 100644
index 000000000..43950ef85
--- /dev/null
+++ b/resources/themes/shop/views/checkout/onepage/review.blade.php
@@ -0,0 +1,168 @@
+<div class="form-container">
+    <div class="form-header mb-30">
+        <span class="checkout-step-heading">{{ __('shop::app.checkout.onepage.summary') }}</span>
+    </div>
+
+    <div class="address-summary">
+        @if ($billingAddress = $cart->billing_address)
+            <div class="billing-address">
+                <div class="card-title mb-20">
+                    <b>{{ __('shop::app.checkout.onepage.billing-address') }}</b>
+                </div>
+
+                <div class="card-content">
+                    <ul>
+                        <li class="mb-10">
+                            {{ $billingAddress->company_name ?? '' }}
+                        </li>
+                        <li class="mb-10">
+                            <b>{{ $billingAddress->first_name }} {{ $billingAddress->last_name }}</b>
+                        </li>
+                        <li class="mb-10">
+                            {{ $billingAddress->address1 }},<br/> {{ $billingAddress->state }}
+                        </li>
+                        <li class="mb-10">
+                            {{ core()->country_name($billingAddress->country) }} {{ $billingAddress->postcode }}
+                        </li>
+
+                        <span class="horizontal-rule mb-15 mt-15"></span>
+
+                        <li class="mb-10">
+                            {{ __('shop::app.checkout.onepage.contact') }} : {{ $billingAddress->phone }}
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        @endif
+
+        @if ($cart->haveStockableItems() && $shippingAddress = $cart->shipping_address)
+            <div class="shipping-address">
+                <div class="card-title mb-20">
+                    <b>{{ __('shop::app.checkout.onepage.shipping-address') }}</b>
+                </div>
+
+                <div class="card-content">
+                    <ul>
+                        <li class="mb-10">
+                            {{ $shippingAddress->company_name ?? '' }}
+                        </li>
+                        <li class="mb-10">
+                            <b>{{ $shippingAddress->first_name }} {{ $shippingAddress->last_name }}</b>
+                        </li>
+                        <li class="mb-10">
+                            {{ $shippingAddress->address1 }},<br/> {{ $shippingAddress->state }}
+                        </li>
+                        <li class="mb-10">
+                            {{ core()->country_name($shippingAddress->country) }} {{ $shippingAddress->postcode }}
+                        </li>
+
+                        <span class="horizontal-rule mb-15 mt-15"></span>
+
+                        <li class="mb-10">
+                            {{ __('shop::app.checkout.onepage.contact') }} : {{ $shippingAddress->phone }}
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        @endif
+
+    </div>
+
+    <div class="cart-item-list mt-20">
+        @foreach ($cart->items as $item)
+            @php
+                $productBaseImage = $item->product->getTypeInstance()->getBaseImage($item);
+            @endphp
+
+            <div class="item mb-5" style="margin-bottom: 5px;">
+                <div class="item-image">
+                    <img src="{{ $productBaseImage['medium_image_url'] }}"  alt=""/>
+                </div>
+
+                <div class="item-details">
+
+                    {!! view_render_event('bagisto.shop.checkout.name.before', ['item' => $item]) !!}
+
+                    <div class="item-title">
+                        {{ $item->product->name }}
+                    </div>
+
+                    {!! view_render_event('bagisto.shop.checkout.name.after', ['item' => $item]) !!}
+                    {!! view_render_event('bagisto.shop.checkout.price.before', ['item' => $item]) !!}
+
+                    <div class="row">
+                        <span class="title">
+                            {{ __('shop::app.checkout.onepage.price') }}
+                        </span>
+                        <span class="value">
+                            {{ core()->currency($item->base_price) }}
+                        </span>
+                    </div>
+
+                    {!! view_render_event('bagisto.shop.checkout.price.after', ['item' => $item]) !!}
+                    {!! view_render_event('bagisto.shop.checkout.quantity.before', ['item' => $item]) !!}
+
+                    <div class="row">
+                        <span class="title">
+                            {{ __('shop::app.checkout.onepage.quantity') }}
+                        </span>
+                        <span class="value">
+                            {{ $item->quantity }}
+                        </span>
+                    </div>
+
+                    {!! view_render_event('bagisto.shop.checkout.quantity.after', ['item' => $item]) !!}
+
+                    {!! view_render_event('bagisto.shop.checkout.options.before', ['item' => $item]) !!}
+
+                    @if (isset($item->additional['attributes']))
+                        <div class="item-options">
+
+                            @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>
+        @endforeach
+    </div>
+
+    <div class="order-description mt-20">
+        <div class="pull-left" style="width: 60%; float: left;">
+            @if ($cart->haveStockableItems())
+                <div class="shipping">
+                    <div class="decorator">
+                        <i class="icon shipping-icon"></i>
+                    </div>
+
+                    <div class="text">
+                        {{ core()->currency($cart->selected_shipping_rate->base_price) }}
+
+                        <div class="info">
+                            {{ $cart->selected_shipping_rate->method_title }}
+                        </div>
+                    </div>
+                </div>
+            @endif
+
+            <div class="payment">
+                <div class="decorator">
+                    <i class="icon payment-icon"></i>
+                </div>
+
+                <div class="text">
+                    {{ core()->getConfigData('sales.paymentmethods.' . $cart->payment->method . '.title') }}
+                </div>
+            </div>
+
+        </div>
+
+        <div class="pull-right" style="width: 40%; float: left;">
+            <slot name="summary-section"></slot>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/resources/themes/shop/views/checkout/onepage/shipping.blade.php b/resources/themes/shop/views/checkout/onepage/shipping.blade.php
new file mode 100644
index 000000000..e1a6dbab8
--- /dev/null
+++ b/resources/themes/shop/views/checkout/onepage/shipping.blade.php
@@ -0,0 +1,48 @@
+<form data-vv-scope="shipping-form">
+    <div class="form-container">
+        <div class="form-header mb-30">
+            <span class="checkout-step-heading">{{ __('shop::app.checkout.onepage.shipping-method') }}</span>
+        </div>
+
+        <div class="shipping-methods">
+
+            <div class="control-group" :class="[errors.has('shipping-form.shipping_method') ? 'has-error' : '']">
+
+                @foreach ($shippingRateGroups as $rateGroup)
+                    {!! view_render_event('bagisto.shop.checkout.shipping-method.before', ['rateGroup' => $rateGroup]) !!}
+
+                    <span class="carrier-title" id="carrier-title" style="font-size:18px; font-weight: bold;">
+                        {{ $rateGroup['carrier_title'] }}
+                    </span>
+
+                    @foreach ($rateGroup['rates'] as $rate)
+                        <div class="checkout-method-group mb-20">
+                            <div class="line-one">
+                                <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>
+                                {{-- <label class="radio-view" for="{{ $rate->method }}"></label> --}}
+                                <b class="ship-rate method-label">{{ core()->currency($rate->base_price) }}</b>
+                            </div>
+
+                            <div class="line-two mt-5">
+                                <div class="method-summary">
+                                    <b>{{ $rate->method_title }}</b> - {{ __($rate->method_description) }}
+                                </div>
+                            </div>
+                        </div>
+
+                    @endforeach
+
+                    {!! view_render_event('bagisto.shop.checkout.shipping-method.after', ['rateGroup' => $rateGroup]) !!}
+
+                @endforeach
+
+                <span class="control-error" v-if="errors.has('shipping-form.shipping_method')">
+                    @{{ errors.first('shipping-form.shipping_method') }}
+                </span>
+            </div>
+        </div>
+    </div>
+</form>
\ No newline at end of file
diff --git a/resources/themes/shop/views/checkout/success.blade.php b/resources/themes/shop/views/checkout/success.blade.php
new file mode 100644
index 000000000..c403360ad
--- /dev/null
+++ b/resources/themes/shop/views/checkout/success.blade.php
@@ -0,0 +1,27 @@
+@extends('shop::layouts.master')
+
+@section('page_title')
+    {{ __('shop::app.checkout.success.title') }}
+@stop
+
+@section('content-wrapper')
+
+    <div class="order-success-content" style="min-height: 300px;">
+        <h1>{{ __('shop::app.checkout.success.thanks') }}</h1>
+
+        <p>{{ __('shop::app.checkout.success.order-id-info', ['order_id' => $order->increment_id]) }}</p>
+
+        <p>{{ __('shop::app.checkout.success.info') }}</p>
+
+        {{ view_render_event('bagisto.shop.checkout.continue-shopping.before', ['order' => $order]) }}
+
+        <div class="misc-controls">
+            <a style="display: inline-block" href="{{ route('shop.home.index') }}" class="btn btn-lg btn-primary">
+                {{ __('shop::app.checkout.cart.continue-shopping') }}
+            </a>
+        </div>
+        
+        {{ view_render_event('bagisto.shop.checkout.continue-shopping.after', ['order' => $order]) }}
+        
+    </div>
+@endsection
diff --git a/resources/themes/shop/views/checkout/total/summary.blade.php b/resources/themes/shop/views/checkout/total/summary.blade.php
new file mode 100644
index 000000000..76a6b238b
--- /dev/null
+++ b/resources/themes/shop/views/checkout/total/summary.blade.php
@@ -0,0 +1,45 @@
+<div class="order-summary">
+    <h3>{{ __('shop::app.checkout.total.order-summary') }}</h3>
+
+    <div class="item-detail">
+        <label>
+            {{ intval($cart->items_qty) }}
+            {{ __('shop::app.checkout.total.sub-total') }}
+            {{ __('shop::app.checkout.total.price') }}
+        </label>
+        <label class="right">{{ core()->currency($cart->base_sub_total) }}</label>
+    </div>
+
+    @if ($cart->selected_shipping_rate)
+        <div class="item-detail">
+            <label>{{ __('shop::app.checkout.total.delivery-charges') }}</label>
+            <label class="right">{{ core()->currency($cart->selected_shipping_rate->base_price) }}</label>
+        </div>
+    @endif
+
+    @if ($cart->base_tax_total)
+        @foreach (Webkul\Tax\Helpers\Tax::getTaxRatesWithAmount($cart, true) as $taxRate => $baseTaxAmount )
+        <div class="item-detail">
+            <label id="taxrate-{{ core()->taxRateAsIdentifier($taxRate) }}">{{ __('shop::app.checkout.total.tax') }} {{ $taxRate }} %</label>
+            <label class="right" id="basetaxamount-{{ core()->taxRateAsIdentifier($taxRate) }}">{{ core()->currency($baseTaxAmount) }}</label>
+        </div>
+        @endforeach
+    @endif
+
+    <div class="item-detail" id="discount-detail" @if ($cart->base_discount_amount && $cart->base_discount_amount > 0) style="display: block;" @else style="display: none;" @endif>
+        <label>
+            {{ __('shop::app.checkout.total.disc-amount') }}
+        </label>
+        <label class="right">
+            -{{ core()->currency($cart->base_discount_amount) }}
+        </label>
+    </div>
+
+
+    <div class="payable-amount" id="grand-total-detail">
+        <label>{{ __('shop::app.checkout.total.grand-total') }}</label>
+        <label class="right" id="grand-total-amount-detail">
+            {{ core()->currency($cart->base_grand_total) }}
+        </label>
+    </div>
+</div>
\ No newline at end of file
diff --git a/resources/themes/shop/views/cms/page.blade.php b/resources/themes/shop/views/cms/page.blade.php
new file mode 100644
index 000000000..fe29692bd
--- /dev/null
+++ b/resources/themes/shop/views/cms/page.blade.php
@@ -0,0 +1,17 @@
+@extends('shop::layouts.master')
+
+@section('page_title')
+    {{ $page->page_title }}
+@endsection
+
+@section('seo')
+    <meta name="title" content="{{ $page->meta_title }}" />
+
+    <meta name="description" content="{{ $page->meta_description }}" />
+
+    <meta name="keywords" content="{{ $page->meta_keywords }}" />
+@endsection
+
+@section('content-wrapper')
+    {!! DbView::make($page)->field('html_content')->render() !!}
+@endsection
\ No newline at end of file
diff --git a/resources/themes/shop/views/customers/account/address/country-state.blade.php b/resources/themes/shop/views/customers/account/address/country-state.blade.php
new file mode 100644
index 000000000..ba1bfb6c1
--- /dev/null
+++ b/resources/themes/shop/views/customers/account/address/country-state.blade.php
@@ -0,0 +1,74 @@
+<country-state></country-state>
+
+@push('scripts')
+
+    <script type="text/x-template" id="country-state-template">
+        <div>
+            <div class="control-group" :class="[errors.has('country') ? 'has-error' : '']">
+                <label for="country" class="required">
+                    {{ __('shop::app.customer.account.address.create.country') }}
+                </label>
+
+                <select type="text" v-validate="'required'" class="control" id="country" name="country" v-model="country" data-vv-as="&quot;{{ __('shop::app.customer.account.address.create.country') }}&quot;">
+                    <option value=""></option>
+                    @foreach (core()->countries() as $country)
+                        <option {{ $country->code === $defaultCountry ? 'selected' : '' }}  value="{{ $country->code }}">{{ $country->name }}</option>
+                    @endforeach
+                </select>
+
+                <span class="control-error" v-if="errors.has('country')">
+                    @{{ errors.first('country') }}
+                </span>
+            </div>
+
+            <div class="control-group" :class="[errors.has('state') ? 'has-error' : '']">
+                <label for="state" class="required">
+                    {{ __('shop::app.customer.account.address.create.state') }}
+                </label>
+
+                <input type="text" v-validate="'required'" class="control" id="state" name="state" v-model="state" v-if="!haveStates()" data-vv-as="&quot;{{ __('shop::app.customer.account.address.create.state') }}&quot;"/>
+                <select v-validate="'required'" class="control" id="state" name="state" v-model="state" v-if="haveStates()" data-vv-as="&quot;{{ __('shop::app.customer.account.address.create.state') }}&quot;">
+
+                    <option value="">{{ __('shop::app.customer.account.address.create.select-state') }}</option>
+
+                    <option v-for='(state, index) in countryStates[country]' :value="state.code">
+                        @{{ state.default_name }}
+                    </option>
+
+                </select>
+
+                <span class="control-error" v-if="errors.has('state')">
+                    @{{ errors.first('state') }}
+                </span>
+            </div>
+        </div>
+    </script>
+
+    <script>
+        Vue.component('country-state', {
+
+            template: '#country-state-template',
+
+            inject: ['$validator'],
+
+            data() {
+                return {
+                    country: "{{ $countryCode ?? $defaultCountry }}",
+
+                    state: "{{ $stateCode }}",
+
+                    countryStates: @json(core()->groupedStatesByCountries())
+                }
+            },
+
+            methods: {
+                haveStates() {
+                    if (this.countryStates[this.country] && this.countryStates[this.country].length)
+                        return true;
+
+                    return false;
+                },
+            }
+        });
+    </script>
+@endpush
\ No newline at end of file
diff --git a/resources/themes/shop/views/customers/account/address/create.blade.php b/resources/themes/shop/views/customers/account/address/create.blade.php
new file mode 100644
index 000000000..f7ecf22ef
--- /dev/null
+++ b/resources/themes/shop/views/customers/account/address/create.blade.php
@@ -0,0 +1,124 @@
+@extends('shop::layouts.master')
+
+@section('page_title')
+    {{ __('shop::app.customer.account.address.create.page-title') }}
+@endsection
+
+@section('content-wrapper')
+
+    <div class="account-content">
+
+        @include('shop::customers.account.partials.sidemenu')
+
+        <div class="account-layout">
+            <div class="account-head mb-15">
+                <span class="back-icon"><a href="{{ route('customer.address.index') }}"><i class="icon icon-menu-back"></i></a></span>
+                <span class="account-heading">{{ __('shop::app.customer.account.address.create.title') }}</span>
+                <span></span>
+            </div>
+
+            {!! view_render_event('bagisto.shop.customers.account.address.create.before') !!}
+
+            <form id="customer-address-form" method="post" action="{{ route('customer.address.store') }}" @submit.prevent="onSubmit">
+
+                <div class="account-table-content">
+                    @csrf
+
+                    {!! view_render_event('bagisto.shop.customers.account.address.create_form_controls.before') !!}
+
+                    <div class="control-group" :class="[errors.has('company_name') ? 'has-error' : '']">
+                        <label for="company_name">{{ __('shop::app.customer.account.address.create.company_name') }}</label>
+                        <input value="{{ old('company_name') }}" type="text" class="control" name="company_name" data-vv-as="&quot;{{ __('shop::app.customer.account.address.create.company_name') }}&quot;">
+                        <span class="control-error" v-if="errors.has('company_name')">@{{ errors.first('company_name') }}</span>
+                    </div>
+
+                    {!! view_render_event('bagisto.shop.customers.account.address.create_form_controls.company_name.after') !!}
+
+                    <div class="control-group" :class="[errors.has('first_name') ? 'has-error' : '']">
+                        <label for="first_name" class="required">{{ __('shop::app.customer.account.address.create.first_name') }}</label>
+                        <input value="{{ old('first_name') }}" type="text" class="control" name="first_name" v-validate="'required'" data-vv-as="&quot;{{ __('shop::app.customer.account.address.create.first_name') }}&quot;">
+                        <span class="control-error" v-if="errors.has('first_name')">@{{ errors.first('first_name') }}</span>
+                    </div>
+
+                    {!! view_render_event('bagisto.shop.customers.account.address.create_form_controls.first_name.after') !!}
+
+                    <div class="control-group" :class="[errors.has('last_name') ? 'has-error' : '']">
+                        <label for="last_name" class="required">{{ __('shop::app.customer.account.address.create.last_name') }}</label>
+                        <input value="{{ old('last_name') }}" type="text" class="control" name="last_name" v-validate="'required'" data-vv-as="&quot;{{ __('shop::app.customer.account.address.create.last_name') }}&quot;">
+                        <span class="control-error" v-if="errors.has('last_name')">@{{ errors.first('last_name') }}</span>
+                    </div>
+
+                    {!! view_render_event('bagisto.shop.customers.account.address.create_form_controls.last_name.after') !!}
+
+                    <div class="control-group" :class="[errors.has('vat_id') ? 'has-error' : '']">
+                        <label for="vat_id">{{ __('shop::app.customer.account.address.create.vat_id') }}
+                            <span class="help-note">{{ __('shop::app.customer.account.address.create.vat_help_note') }}</span>
+                        </label>
+                        <input type="text" class="control" name="vat_id" value="{{ old('vat_id') }}"
+                        v-validate="''" data-vv-as="&quot;{{ __('shop::app.customer.account.address.create.vat_id') }}&quot;">
+                        <span class="control-error" v-if="errors.has('vat_id')">@{{ errors.first('vat_id') }}</span>
+                    </div>
+
+                    {!! view_render_event('bagisto.shop.customers.account.address.create_form_controls.vat_id.after') !!}
+
+                    <div class="control-group" :class="[errors.has('address1[]') ? 'has-error' : '']">
+                        <label for="address1" class="required">{{ __('shop::app.customer.account.address.create.street-address') }}</label>
+                        <input type="text" class="control" name="address1[]" value="{{ old('address1') }}" id="address1" v-validate="'required'" data-vv-as="&quot;{{ __('shop::app.customer.account.address.create.street-address') }}&quot;">
+                        <span class="control-error" v-if="errors.has('address1[]')">@{{ errors.first('address1[]') }}</span>
+                    </div>
+
+                    @if (core()->getConfigData('customer.settings.address.street_lines') && core()->getConfigData('customer.settings.address.street_lines') > 1)
+                        <div class="control-group" style="margin-top: -25px;">
+                            @for ($i = 1; $i < core()->getConfigData('customer.settings.address.street_lines'); $i++)
+                                <input type="text" class="control" name="address1[{{ $i }}]" id="address_{{ $i }}">
+                            @endfor
+                        </div>
+                    @endif
+
+                    {!! view_render_event('bagisto.shop.customers.account.address.create_form_controls.street-address.after') !!}
+
+                    @include ('shop::customers.account.address.country-state', ['countryCode' => old('country'), 'stateCode' => old('state')])
+
+                    {!! view_render_event('bagisto.shop.customers.account.address.create_form_controls.country-state.after') !!}
+
+                    <div class="control-group" :class="[errors.has('city') ? 'has-error' : '']">
+                        <label for="city" class="required">{{ __('shop::app.customer.account.address.create.city') }}</label>
+                        <input value="{{ old('city') }}" type="text" class="control" name="city" v-validate="'required'" data-vv-as="&quot;{{ __('shop::app.customer.account.address.create.city') }}&quot;">
+                        <span class="control-error" v-if="errors.has('city')">@{{ errors.first('city') }}</span>
+                    </div>
+
+                    {!! view_render_event('bagisto.shop.customers.account.address.create_form_controls.city.after') !!}
+
+                    <div class="control-group" :class="[errors.has('postcode') ? 'has-error' : '']">
+                        <label for="postcode" class="required">{{ __('shop::app.customer.account.address.create.postcode') }}</label>
+                        <input value="{{ old('postcode') }}" type="text" class="control" name="postcode" v-validate="'required'" data-vv-as="&quot;{{ __('shop::app.customer.account.address.create.postcode') }}&quot;">
+                        <span class="control-error" v-if="errors.has('postcode')">@{{ errors.first('postcode') }}</span>
+                    </div>
+
+                    {!! view_render_event('bagisto.shop.customers.account.address.create_form_controls.postcode.after') !!}
+
+                    <div class="control-group" :class="[errors.has('phone') ? 'has-error' : '']">
+                        <label for="phone" class="required">{{ __('shop::app.customer.account.address.create.phone') }}</label>
+                        <input value="{{ old('phone') }}" type="text" class="control" name="phone" v-validate="'required'" data-vv-as="&quot;{{ __('shop::app.customer.account.address.create.phone') }}&quot;">
+                        <span class="control-error" v-if="errors.has('phone')">@{{ errors.first('phone') }}</span>
+                    </div>
+
+                    {!! view_render_event('bagisto.shop.customers.account.address.create_form_controls.after') !!}
+
+                    <div class="button-group">
+                        <input class="btn btn-primary btn-lg" type="submit" value="{{ __('shop::app.customer.account.address.create.submit') }}">
+                        {{-- <button class="btn btn-primary btn-lg" type="submit">
+                            {{ __('shop::app.customer.account.address.edit.submit') }}
+                        </button> --}}
+                    </div>
+
+                </div>
+
+            </form>
+
+            {!! view_render_event('bagisto.shop.customers.account.address.create.after') !!}
+
+        </div>
+    </div>
+
+@endsection
\ No newline at end of file
diff --git a/resources/themes/shop/views/customers/account/address/edit.blade.php b/resources/themes/shop/views/customers/account/address/edit.blade.php
new file mode 100644
index 000000000..aa7bcbd34
--- /dev/null
+++ b/resources/themes/shop/views/customers/account/address/edit.blade.php
@@ -0,0 +1,125 @@
+@extends('shop::layouts.master')
+
+@section('page_title')
+    {{ __('shop::app.customer.account.address.edit.page-title') }}
+@endsection
+
+@section('content-wrapper')
+
+    <div class="account-content">
+        @include('shop::customers.account.partials.sidemenu')
+
+        <div class="account-layout">
+
+            <div class="account-head mb-15">
+                <span class="back-icon"><a href="{{ route('customer.address.index') }}"><i class="icon icon-menu-back"></i></a></span>
+                <span class="account-heading">{{ __('shop::app.customer.account.address.edit.title') }}</span>
+                <span></span>
+            </div>
+
+            {!! view_render_event('bagisto.shop.customers.account.address.edit.before', ['address' => $address]) !!}
+
+            <form id="customer-address-form" method="post" action="{{ route('customer.address.update', $address->id) }}" @submit.prevent="onSubmit">
+
+                <div class="account-table-content">
+                    @method('PUT')
+                    @csrf
+
+                    {!! view_render_event('bagisto.shop.customers.account.address.edit_form_controls.before', ['address' => $address]) !!}
+
+                    <div class="control-group" :class="[errors.has('company_name') ? 'has-error' : '']">
+                        <label for="company_name">{{ __('shop::app.customer.account.address.edit.company_name') }}</label>
+                        <input type="text" value="{{ old('company_name') ?: $address->company_name }}"  class="control" name="company_name" data-vv-as="&quot;{{ __('shop::app.customer.account.address.edit.company_name') }}&quot;">
+                        <span class="control-error" v-if="errors.has('company_name')">@{{ errors.first('company_name') }}</span>
+                    </div>
+
+                    {!! view_render_event('bagisto.shop.customers.account.address.edit_form_controls.company_name.after') !!}
+
+                    <div class="control-group" :class="[errors.has('first_name') ? 'has-error' : '']">
+                        <label for="first_name" class="required">{{ __('shop::app.customer.account.address.create.first_name') }}</label>
+                        <input type="text" class="control" name="first_name" v-validate="'required'" value="{{ old('first_name') ?: $address->first_name }}" data-vv-as="&quot;{{ __('shop::app.customer.account.address.create.first_name') }}&quot;">
+                        <span class="control-error" v-if="errors.has('first_name')">@{{ errors.first('first_name') }}</span>
+                    </div>
+
+                    {!! view_render_event('bagisto.shop.customers.account.address.edit_form_controls.first_name.after') !!}
+
+                    <div class="control-group" :class="[errors.has('last_name') ? 'has-error' : '']">
+                        <label for="last_name" class="required">{{ __('shop::app.customer.account.address.create.last_name') }}</label>
+                        <input type="text" class="control" name="last_name" v-validate="'required'" value="{{ old('last_name') ?: $address->last_name }}" data-vv-as="&quot;{{ __('shop::app.customer.account.address.create.last_name') }}&quot;">
+                        <span class="control-error" v-if="errors.has('last_name')">@{{ errors.first('last_name') }}</span>
+                    </div>
+
+                    {!! view_render_event('bagisto.shop.customers.account.address.edit_form_controls.last_name.after') !!}
+
+                    <div class="control-group" :class="[errors.has('vat_id') ? 'has-error' : '']">
+                        <label for="vat_id">{{ __('shop::app.customer.account.address.create.vat_id') }}
+                            <span class="help-note">{{ __('shop::app.customer.account.address.create.vat_help_note') }}</span>
+                        </label>
+                        <input type="text" class="control" name="vat_id" value="{{ old('vat_id') ?: $address->vat_id }}"
+                        v-validate="''" data-vv-as="&quot;{{ __('shop::app.customer.account.address.create.vat_id') }}&quot;">
+                        <span class="control-error" v-if="errors.has('vat_id')">@{{ errors.first('vat_id') }}</span>
+                    </div>
+
+                    {!! view_render_event('bagisto.shop.customers.account.address.edit_form_controls.vat_id.after') !!}
+
+                    <?php $addresses = explode(PHP_EOL, $address->address1); ?>
+
+                    <div class="control-group" :class="[errors.has('address1[]') ? 'has-error' : '']">
+                        <label for="address_0" class="required">{{ __('shop::app.customer.account.address.edit.street-address') }}</label>
+                        <input type="text" class="control" name="address1[]" id="address_0" v-validate="'required'" value="{{ isset($addresses[0]) ? $addresses[0] : '' }}" data-vv-as="&quot;{{ __('shop::app.customer.account.address.create.street-address') }}&quot;">
+                        <span class="control-error" v-if="errors.has('address1[]')">@{{ errors.first('address1[]') }}</span>
+                    </div>
+
+                    @if (core()->getConfigData('customer.settings.address.street_lines') && core()->getConfigData('customer.settings.address.street_lines') > 1)
+                        <div class="control-group" style="margin-top: -25px;">
+                            @for ($i = 1; $i < core()->getConfigData('customer.settings.address.street_lines'); $i++)
+                                <input type="text" class="control" name="address1[{{ $i }}]" id="address_{{ $i }}" value="{{ isset($addresses[$i]) ? $addresses[$i] : '' }}">
+                            @endfor
+                        </div>
+                    @endif
+
+                    {!! view_render_event('bagisto.shop.customers.account.address.edit_form_controls.street-addres.after') !!}
+
+                    @include ('shop::customers.account.address.country-state', ['countryCode' => old('country') ?? $address->country, 'stateCode' => old('state') ?? $address->state])
+
+                    {!! view_render_event('bagisto.shop.customers.account.address.edit_form_controls.country-state.after') !!}
+
+                    <div class="control-group" :class="[errors.has('city') ? 'has-error' : '']">
+                        <label for="city" class="required">{{ __('shop::app.customer.account.address.create.city') }}</label>
+                        <input type="text" class="control" name="city" v-validate="'required|regex:^[a-zA-Z \-]*$'" value="{{ old('city') ?: $address->city }}" data-vv-as="&quot;{{ __('shop::app.customer.account.address.create.city') }}&quot;">
+                        <span class="control-error" v-if="errors.has('city')">@{{ errors.first('city') }}</span>
+                    </div>
+
+                    {!! view_render_event('bagisto.shop.customers.account.address.edit_form_controls.create.after') !!}
+
+                    <div class="control-group" :class="[errors.has('postcode') ? 'has-error' : '']">
+                        <label for="postcode" class="required">{{ __('shop::app.customer.account.address.create.postcode') }}</label>
+                        <input type="text" class="control" name="postcode" v-validate="'required'" value="{{ old('postcode') ?: $address->postcode }}" data-vv-as="&quot;{{ __('shop::app.customer.account.address.create.postcode') }}&quot;">
+                        <span class="control-error" v-if="errors.has('postcode')">@{{ errors.first('postcode') }}</span>
+                    </div>
+
+                    {!! view_render_event('bagisto.shop.customers.account.address.edit_form_controls.postcode.after') !!}
+
+                    <div class="control-group" :class="[errors.has('phone') ? 'has-error' : '']">
+                        <label for="phone" class="required">{{ __('shop::app.customer.account.address.create.phone') }}</label>
+                        <input type="text" class="control" name="phone" v-validate="'required'" value="{{ old('phone') ?: $address->phone }}" data-vv-as="&quot;{{ __('shop::app.customer.account.address.create.phone') }}&quot;">
+                        <span class="control-error" v-if="errors.has('phone')">@{{ errors.first('phone') }}</span>
+                    </div>
+
+                    {!! view_render_event('bagisto.shop.customers.account.address.edit_form_controls.after', ['address' => $address]) !!}
+
+                    <div class="button-group">
+                        <button class="btn btn-primary btn-lg" type="submit">
+                            {{ __('shop::app.customer.account.address.create.submit') }}
+                        </button>
+                    </div>
+                </div>
+
+            </form>
+
+            {!! view_render_event('bagisto.shop.customers.account.address.edit.after', ['address' => $address]) !!}
+
+        </div>
+    </div>
+
+@endsection
\ No newline at end of file
diff --git a/resources/themes/shop/views/customers/account/address/index.blade.php b/resources/themes/shop/views/customers/account/address/index.blade.php
new file mode 100644
index 000000000..b099f377b
--- /dev/null
+++ b/resources/themes/shop/views/customers/account/address/index.blade.php
@@ -0,0 +1,112 @@
+@extends('shop::layouts.master')
+
+@section('page_title')
+    {{ __('shop::app.customer.account.address.index.page-title') }}
+@endsection
+
+@section('content-wrapper')
+
+    <div class="account-content">
+
+        @include('shop::customers.account.partials.sidemenu')
+
+        <div class="account-layout">
+
+            <div class="account-head">
+                <span class="back-icon"><a href="{{ route('customer.profile.index') }}"><i class="icon icon-menu-back"></i></a></span>
+                <span
+                    class="account-heading">{{ __('shop::app.customer.account.address.index.title') }}</span>
+
+                @if (! $addresses->isEmpty())
+                    <span class="account-action">
+                    <a href="{{ route('customer.address.create') }}">{{ __('shop::app.customer.account.address.index.add') }}</a>
+                </span>
+                @else
+                    <span></span>
+                @endif
+                <div class="horizontal-rule"></div>
+            </div>
+
+            {!! view_render_event('bagisto.shop.customers.account.address.list.before', ['addresses' => $addresses]) !!}
+
+            <div class="account-table-content">
+                @if ($addresses->isEmpty())
+                    <div>{{ __('shop::app.customer.account.address.index.empty') }}</div>
+                    <br/>
+                    <a href="{{ route('customer.address.create') }}">{{ __('shop::app.customer.account.address.index.add') }}</a>
+                @else
+                    <div class="address-holder">
+                        @foreach ($addresses as $address)
+                            <div class="address-card">
+                                <div class="details">
+                                    <span
+                                        class="bold">{{ auth()->guard('customer')->user()->name }}</span>
+                                    <ul class="address-card-list">
+                                        <li class="mt-5">
+                                            {{ $address->company_name }}
+                                        </li>
+
+                                        <li class="mt-5">
+                                            {{ $address->first_name }}
+                                        </li>
+
+                                        <li class="mt-5">
+                                            {{ $address->last_name }}
+                                        </li>
+
+                                        <li class="mt-5">
+                                            {{ $address->address1 }},
+                                        </li>
+
+                                        <li class="mt-5">
+                                            {{ $address->city }}
+                                        </li>
+
+                                        <li class="mt-5">
+                                            {{ $address->state }}
+                                        </li>
+
+                                        <li class="mt-5">
+                                            {{ core()->country_name($address->country) }} {{ $address->postcode }}
+                                        </li>
+
+                                        <li class="mt-10">
+                                            {{ __('shop::app.customer.account.address.index.contact') }}
+                                            : {{ $address->phone }}
+                                        </li>
+                                    </ul>
+
+                                    <div class="control-links mt-20">
+                                    <span>
+                                        <a href="{{ route('customer.address.edit', $address->id) }}">
+                                            {{ __('shop::app.customer.account.address.index.edit') }}
+                                        </a>
+                                    </span>
+
+                                        <span>
+                                        <a href="{{ route('address.delete', $address->id) }}"
+                                           onclick="deleteAddress('{{ __('shop::app.customer.account.address.index.confirm-delete') }}')">
+                                            {{ __('shop::app.customer.account.address.index.delete') }}
+                                        </a>
+                                    </span>
+                                    </div>
+                                </div>
+                            </div>
+                        @endforeach
+                    </div>
+                @endif
+            </div>
+
+            {!! view_render_event('bagisto.shop.customers.account.address.list.after', ['addresses' => $addresses]) !!}
+        </div>
+    </div>
+@endsection
+
+@push('scripts')
+    <script>
+        function deleteAddress(message) {
+            if (!confirm(message))
+                event.preventDefault();
+        }
+    </script>
+@endpush
diff --git a/resources/themes/shop/views/customers/account/compare/index.blade.php b/resources/themes/shop/views/customers/account/compare/index.blade.php
new file mode 100644
index 000000000..7b6de5e66
--- /dev/null
+++ b/resources/themes/shop/views/customers/account/compare/index.blade.php
@@ -0,0 +1,29 @@
+@extends('shop::layouts.master')
+
+@include('shop::guest.compare.compare-products')
+
+@section('page_title')
+    {{ __('shop::app.customer.compare.compare_similar_items') }}
+@endsection
+
+@section('content-wrapper')
+
+    <div class="account-content">
+        @include('shop::customers.account.partials.sidemenu')
+
+        <div class="account-layout">
+            {!! view_render_event('bagisto.shop.customers.account.comparison.list.before') !!}
+
+            <div class="account-items-list">
+                <div class="account-table-content">
+                    <compare-product></compare-product>
+                </div>
+            </div>
+
+            {!! view_render_event('bagisto.shop.customers.account.comparison.list.after') !!}
+
+        </div>
+
+    </div>
+
+@endsection
diff --git a/resources/themes/shop/views/customers/account/downloadable_products/index.blade.php b/resources/themes/shop/views/customers/account/downloadable_products/index.blade.php
new file mode 100644
index 000000000..583ebe97e
--- /dev/null
+++ b/resources/themes/shop/views/customers/account/downloadable_products/index.blade.php
@@ -0,0 +1,39 @@
+@extends('shop::layouts.master')
+
+@section('page_title')
+    {{ __('shop::app.customer.account.downloadable_products.title') }}
+@endsection
+
+@section('content-wrapper')
+
+    <div class="account-content">
+        @include('shop::customers.account.partials.sidemenu')
+
+        <div class="account-layout">
+
+            <div class="account-head mb-10">
+                <span class="back-icon"><a href="{{ route('customer.profile.index') }}"><i class="icon icon-menu-back"></i></a></span>
+                <span class="account-heading">
+                    {{ __('shop::app.customer.account.downloadable_products.title') }}
+                </span>
+
+                <div class="horizontal-rule"></div>
+            </div>
+
+            {!! view_render_event('bagisto.shop.customers.account.downloadable_products.list.before') !!}
+
+            <div class="account-items-list">
+                <div class="account-table-content">
+
+                    {!! app('Webkul\Shop\DataGrids\DownloadableProductDataGrid')->render() !!}
+
+                </div>
+            </div>
+
+            {!! view_render_event('bagisto.shop.customers.account.downloadable_products.list.after') !!}
+
+        </div>
+
+    </div>
+
+@endsection
\ No newline at end of file
diff --git a/resources/themes/shop/views/customers/account/index.blade.php b/resources/themes/shop/views/customers/account/index.blade.php
new file mode 100644
index 000000000..4097e93df
--- /dev/null
+++ b/resources/themes/shop/views/customers/account/index.blade.php
@@ -0,0 +1,9 @@
+@extends('shop::layouts.master')
+
+@section('content-wrapper')
+    <div class="account-content">
+        @include('shop::customers.account.partials.sidemenu')
+        <h1>Account Index Page</h1>
+    </div>
+    
+@endsection
diff --git a/resources/themes/shop/views/customers/account/orders/index.blade.php b/resources/themes/shop/views/customers/account/orders/index.blade.php
new file mode 100644
index 000000000..6c53d4602
--- /dev/null
+++ b/resources/themes/shop/views/customers/account/orders/index.blade.php
@@ -0,0 +1,39 @@
+@extends('shop::layouts.master')
+
+@section('page_title')
+    {{ __('shop::app.customer.account.order.index.page-title') }}
+@endsection
+
+@section('content-wrapper')
+
+    <div class="account-content">
+        @include('shop::customers.account.partials.sidemenu')
+
+        <div class="account-layout">
+
+            <div class="account-head mb-10">
+                <span class="back-icon"><a href="{{ route('customer.profile.index') }}"><i class="icon icon-menu-back"></i></a></span>
+                <span class="account-heading">
+                    {{ __('shop::app.customer.account.order.index.title') }}
+                </span>
+
+                <div class="horizontal-rule"></div>
+            </div>
+
+            {!! view_render_event('bagisto.shop.customers.account.orders.list.before') !!}
+
+            <div class="account-items-list">
+                <div class="account-table-content">
+
+                    {!! app('Webkul\Shop\DataGrids\OrderDataGrid')->render() !!}
+
+                </div>
+            </div>
+
+            {!! view_render_event('bagisto.shop.customers.account.orders.list.after') !!}
+
+        </div>
+
+    </div>
+
+@endsection
\ No newline at end of file
diff --git a/resources/themes/shop/views/customers/account/orders/pdf.blade.php b/resources/themes/shop/views/customers/account/orders/pdf.blade.php
new file mode 100644
index 000000000..1826d8fe9
--- /dev/null
+++ b/resources/themes/shop/views/customers/account/orders/pdf.blade.php
@@ -0,0 +1,324 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html>
+    <head>
+        <meta http-equiv="Cache-control" content="no-cache">
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+        <style type="text/css">
+            * {
+                font-family: DejaVu Sans;
+            }
+
+            body, th, td, h5 {
+                font-size: 12px;
+                color: #000;
+            }
+
+            .container {
+                padding: 20px;
+                display: block;
+            }
+
+            .invoice-summary {
+                margin-bottom: 20px;
+            }
+
+            .table {
+                margin-top: 20px;
+            }
+
+            .table table {
+                width: 100%;
+                border-collapse: collapse;
+                text-align: left;
+                table-layout: fixed;
+            }
+
+            .table thead th {
+                font-weight: 700;
+                border-top: solid 1px #d3d3d3;
+                border-bottom: solid 1px #d3d3d3;
+                border-left: solid 1px #d3d3d3;
+                padding: 5px 10px;
+                background: #F4F4F4;
+            }
+
+            .table thead th:last-child {
+                border-right: solid 1px #d3d3d3;
+            }
+
+            .table tbody td {
+                padding: 5px 10px;
+                border-bottom: solid 1px #d3d3d3;
+                border-left: solid 1px #d3d3d3;
+                color: #3A3A3A;
+                vertical-align: middle;
+            }
+
+            .table tbody td p {
+                margin: 0;
+            }
+
+            .table tbody td:last-child {
+                border-right: solid 1px #d3d3d3;
+            }
+
+           .sale-summary {
+                margin-top: 40px;
+                float: right;
+            }
+
+            .sale-summary tr td {
+                padding: 3px 5px;
+            }
+
+            .sale-summary tr.bold {
+                font-weight: 700;
+            }
+
+            .label {
+                color: #000;
+                font-weight: bold;
+            }
+
+            .logo {
+                height: 70px;
+                width: 70px;
+            }
+
+            .merchant-details {
+                margin-bottom: 5px;
+            }
+
+            .merchant-details-title {
+                font-weight: bold;
+            }
+
+            .text-center {
+                text-align: center;
+            }
+        </style>
+    </head>
+
+    <body style="background-image: none;background-color: #fff;">
+        <div class="container">
+
+            <div class="header">
+                <div class="row">
+                    <div class="col-12">
+                        <h1 class="text-center">{{ __('admin::app.sales.invoices.invoice') }}</h1>
+                    </div>
+                </div>
+                @if (core()->getConfigData('sales.orderSettings.invoice_slip_design.logo'))
+                    <div class="image">
+                        <img class="logo" src="{{ Storage::url(core()->getConfigData('sales.orderSettings.invoice_slip_design.logo')) }}" alt=""/>
+                    </div>
+                @endif
+                <div class="merchant-details">
+                    <div><span class="merchant-details-title">{{ core()->getConfigData('sales.shipping.origin.store_name') ? core()->getConfigData('sales.shipping.origin.store_name') : '' }}</span></div>
+                    <div>{{ core()->getConfigData('sales.shipping.origin.address1') ? core()->getConfigData('sales.shipping.origin.address1') : '' }}</div>
+                    <div>
+                        <span>{{ core()->getConfigData('sales.shipping.origin.zipcode') ? core()->getConfigData('sales.shipping.origin.zipcode') : '' }}</span>
+                        <span>{{ core()->getConfigData('sales.shipping.origin.city') ? core()->getConfigData('sales.shipping.origin.city') : '' }}</span></div>
+                    <div>{{ core()->getConfigData('sales.shipping.origin.state') ? core()->getConfigData('sales.shipping.origin.state') : '' }}</div>
+                    <div>{{ core()->getConfigData('sales.shipping.origin.country') ?  core()->country_name(core()->getConfigData('sales.shipping.origin.country')) : '' }}</div>
+                </div>
+                <div class="merchant-details">
+                    @if (core()->getConfigData('sales.shipping.origin.contact'))
+                        <div><span class="merchant-details-title">{{ __('admin::app.admin.system.contact-number') }}:</span> {{ core()->getConfigData('sales.shipping.origin.contact') }}</div>
+                    @endif
+                    @if (core()->getConfigData('sales.shipping.origin.vat_number'))
+                        <div><span class="merchant-details-title">{{ __('admin::app.admin.system.vat-number') }}:</span> {{ core()->getConfigData('sales.shipping.origin.vat_number') }}</div>
+                    @endif
+                    @if (core()->getConfigData('sales.shipping.origin.bank_details'))
+                        <div><span class="merchant-details-title">{{ __('admin::app.admin.system.bank-details') }}:</span> {{ core()->getConfigData('sales.shipping.origin.bank_details') }}</div>
+                    @endif
+                </div>
+            </div>
+
+            <div class="invoice-summary">
+
+                <div class="row">
+                    <span class="label">{{ __('shop::app.customer.account.order.view.invoice-id') }} -</span>
+                    <span class="value">#{{ $invoice->id }}</span>
+                </div>
+
+                <div class="row">
+                    <span class="label">{{ __('shop::app.customer.account.order.view.order-id') }} -</span>
+                    <span class="value">#{{ $invoice->order->increment_id }}</span>
+                </div>
+
+                <div class="row">
+                    <span class="label">{{ __('shop::app.customer.account.order.view.order-date') }} -</span>
+                    <span class="value">{{ core()->formatDate($invoice->order->created_at, 'd-m-Y') }}</span>
+                </div>
+
+                <div class="table address">
+                    <table>
+                        <thead>
+                            <tr>
+                                <th style="width: 50%">{{ __('shop::app.customer.account.order.view.bill-to') }}</th>
+                                @if ($invoice->order->shipping_address)
+                                    <th>{{ __('shop::app.customer.account.order.view.ship-to') }}</th>
+                                @endif
+                            </tr>
+                        </thead>
+
+                        <tbody>
+                            <tr>
+                                <td>
+                                    <p>{{ $invoice->order->billing_address->company_name ?? '' }}</p>
+                                    <p>{{ $invoice->order->billing_address->name }}</p>
+                                    <p>{{ $invoice->order->billing_address->address1 }}</p>
+                                    <p>{{ $invoice->order->billing_address->city }}</p>
+                                    <p>{{ $invoice->order->billing_address->state }}</p>
+                                    <p>
+                                        {{ core()->country_name($invoice->order->billing_address->country) }}
+                                        {{ $invoice->order->billing_address->postcode }}
+                                    </p>
+                                    {{ __('shop::app.customer.account.order.view.contact') }} : {{ $invoice->order->billing_address->phone }}
+                                </td>
+
+                                @if ($invoice->order->shipping_address)
+                                    <td>
+                                        <p>{{ $invoice->order->shipping_address->company_name ?? '' }}</p>
+                                        <p>{{ $invoice->order->shipping_address->name }}</p>
+                                        <p>{{ $invoice->order->shipping_address->address1 }}</p>
+                                        <p>{{ $invoice->order->shipping_address->city }}</p>
+                                        <p>{{ $invoice->order->shipping_address->state }}</p>
+                                        <p>{{ core()->country_name($invoice->order->shipping_address->country) }} {{ $invoice->order->shipping_address->postcode }}</p>
+                                        {{ __('shop::app.customer.account.order.view.contact') }} : {{ $invoice->order->shipping_address->phone }}
+                                    </td>
+                                @endif
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <div class="table payment-shipment">
+                    <table>
+                        <thead>
+                            <tr>
+                                <th style="width: 50%">{{ __('shop::app.customer.account.order.view.payment-method') }}</th>
+
+                                @if ($invoice->order->shipping_address)
+                                    <th>{{ __('shop::app.customer.account.order.view.shipping-method') }}</th>
+                                @endif
+                            </tr>
+                        </thead>
+
+                        <tbody>
+                            <tr>
+                                <td>
+                                    {{ core()->getConfigData('sales.paymentmethods.' . $invoice->order->payment->method . '.title') }}
+
+                                    @php $additionalDetails = \Webkul\Payment\Payment::getAdditionalDetails($invoice->order->payment->method); @endphp
+
+                                    @if (! empty($additionalDetails))
+                                        <div>
+                                            <label class="label">{{ $additionalDetails['title'] }}:</label>
+                                            <p class="value">{{ $additionalDetails['value'] }}</p>
+                                        </div>
+                                    @endif
+                                </td>
+
+                                @if ($invoice->order->shipping_address)
+                                    <td>
+                                        {{ $invoice->order->shipping_title }}
+                                    </td>
+                                @endif
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <div class="table items">
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>{{ __('shop::app.customer.account.order.view.SKU') }}</th>
+                                <th>{{ __('shop::app.customer.account.order.view.product-name') }}</th>
+                                <th>{{ __('shop::app.customer.account.order.view.price') }}</th>
+                                <th>{{ __('shop::app.customer.account.order.view.qty') }}</th>
+                                <th>{{ __('shop::app.customer.account.order.view.subtotal') }}</th>
+                                <th>{{ __('shop::app.customer.account.order.view.tax-amount') }}</th>
+                                <th>{{ __('shop::app.customer.account.order.view.grand-total') }}</th>
+                            </tr>
+                        </thead>
+
+                        <tbody>
+
+                            @foreach ($invoice->items as $item)
+                                <tr>
+                                    <td>{{ $item->child ? $item->child->sku : $item->sku }}</td>
+
+                                    <td>
+                                        {{ $item->name }}
+
+                                        @if (isset($item->additional['attributes']))
+                                            <div class="item-options">
+
+                                                @foreach ($item->additional['attributes'] as $attribute)
+                                                    <b>{{ $attribute['attribute_name'] }} : </b>{{ $attribute['option_label'] }}</br>
+                                                @endforeach
+
+                                            </div>
+                                        @endif
+                                    </td>
+
+                                    <td>{{ core()->formatPrice($item->price, $invoice->order->order_currency_code) }}</td>
+
+                                    <td>{{ $item->qty }}</td>
+
+                                    <td>{{ core()->formatPrice($item->total, $invoice->order->order_currency_code) }}</td>
+
+                                    <td>{{ core()->formatPrice($item->tax_amount, $invoice->order->order_currency_code) }}</td>
+
+                                    <td>{{ core()->formatPrice(($item->total + $item->tax_amount), $invoice->order->order_currency_code) }}</td>
+                                </tr>
+                            @endforeach
+
+                        </tbody>
+                    </table>
+                </div>
+
+
+                <table class="sale-summary">
+                    <tr>
+                        <td>{{ __('shop::app.customer.account.order.view.subtotal') }}</td>
+                        <td>-</td>
+                        <td>{{ core()->formatPrice($invoice->sub_total, $invoice->order->order_currency_code) }}</td>
+                    </tr>
+
+                    <tr>
+                        <td>{{ __('shop::app.customer.account.order.view.shipping-handling') }}</td>
+                        <td>-</td>
+                        <td>{{ core()->formatPrice($invoice->shipping_amount, $invoice->order->order_currency_code) }}</td>
+                    </tr>
+
+                    @if ($invoice->base_discount_amount > 0)
+                        <tr>
+                            <td>{{ __('shop::app.customer.account.order.view.discount') }}</td>
+                            <td>-</td>
+                            <td>{{ core()->formatPrice($invoice->discount_amount, $invoice->order_currency_code) }}</td>
+                        </tr>
+                    @endif
+
+                    <tr>
+                        <td>{{ __('shop::app.customer.account.order.view.tax') }}</td>
+                        <td>-</td>
+                        <td>{{ core()->formatPrice($invoice->tax_amount, $invoice->order->order_currency_code) }}</td>
+                    </tr>
+
+                    <tr class="bold">
+                        <td>{{ __('shop::app.customer.account.order.view.grand-total') }}</td>
+                        <td>-</td>
+                        <td>{{ core()->formatPrice($invoice->grand_total, $invoice->order->order_currency_code) }}</td>
+                    </tr>
+                </table>
+
+            </div>
+
+        </div>
+    </body>
+</html>
diff --git a/resources/themes/shop/views/customers/account/orders/view.blade.php b/resources/themes/shop/views/customers/account/orders/view.blade.php
new file mode 100644
index 000000000..78d34d5d1
--- /dev/null
+++ b/resources/themes/shop/views/customers/account/orders/view.blade.php
@@ -0,0 +1,562 @@
+@extends('shop::layouts.master')
+
+@section('page_title')
+    {{ __('shop::app.customer.account.order.view.page-tile', ['order_id' => $order->increment_id]) }}
+@endsection
+
+@section('content-wrapper')
+
+    <div class="account-content">
+        @include('shop::customers.account.partials.sidemenu')
+
+        <div class="account-layout">
+
+            <div class="account-head">
+                <span class="back-icon"><a href="{{ route('customer.orders.index') }}"><i class="icon icon-menu-back"></i></a></span>
+
+                <span class="account-heading">
+                    {{ __('shop::app.customer.account.order.view.page-tile', ['order_id' => $order->increment_id]) }}
+                </span>
+                <span></span>
+
+
+                @if ($order->canCancel())
+                    <a href="{{ route('customer.orders.cancel', $order->id) }}" class="btn btn-lg btn-primary" v-alert:message="'{{ __('shop::app.customer.account.order.view.cancel-confirm-msg') }}'" style="float: right;">
+                        {{ __('shop::app.customer.account.order.view.cancel-btn-title') }}
+                    </a>
+                @endif
+            </div>
+
+            {!! view_render_event('bagisto.shop.customers.account.orders.view.before', ['order' => $order]) !!}
+
+            <div class="sale-container">
+
+                <tabs>
+                    <tab name="{{ __('shop::app.customer.account.order.view.info') }}" :selected="true">
+
+                        <div class="sale-section">
+                            <div class="section-content">
+                                <div class="row">
+                                    <span class="title">
+                                        {{ __('shop::app.customer.account.order.view.placed-on') }}
+                                    </span>
+
+                                    <span class="value">
+                                        {{ core()->formatDate($order->created_at, 'd M Y') }}
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="sale-section">
+                            <div class="secton-title">
+                                <span>{{ __('shop::app.customer.account.order.view.products-ordered') }}</span>
+                            </div>
+
+                            <div class="section-content">
+                                <div class="table">
+                                    <table>
+                                        <thead>
+                                            <tr>
+                                                <th>{{ __('shop::app.customer.account.order.view.SKU') }}</th>
+                                                <th>{{ __('shop::app.customer.account.order.view.product-name') }}</th>
+                                                <th>{{ __('shop::app.customer.account.order.view.price') }}</th>
+                                                <th>{{ __('shop::app.customer.account.order.view.item-status') }}</th>
+                                                <th>{{ __('shop::app.customer.account.order.view.subtotal') }}</th>
+                                                <th>{{ __('shop::app.customer.account.order.view.tax-percent') }}</th>
+                                                <th>{{ __('shop::app.customer.account.order.view.tax-amount') }}</th>
+                                                <th>{{ __('shop::app.customer.account.order.view.grand-total') }}</th>
+                                            </tr>
+                                        </thead>
+
+                                        <tbody>
+
+                                            @foreach ($order->items as $item)
+                                                <tr>
+                                                    <td data-value="{{ __('shop::app.customer.account.order.view.SKU') }}">
+                                                        {{ $item->getTypeInstance()->getOrderedItem($item)->sku }}
+                                                    </td>
+
+                                                    <td data-value="{{ __('shop::app.customer.account.order.view.product-name') }}">
+                                                        {{ $item->name }}
+
+                                                        @if (isset($item->additional['attributes']))
+                                                            <div class="item-options">
+
+                                                                @foreach ($item->additional['attributes'] as $attribute)
+                                                                    <b>{{ $attribute['attribute_name'] }} : </b>{{ $attribute['option_label'] }}</br>
+                                                                @endforeach
+
+                                                            </div>
+                                                        @endif
+                                                    </td>
+
+                                                    <td data-value="{{ __('shop::app.customer.account.order.view.price') }}">
+                                                        {{ core()->formatPrice($item->price, $order->order_currency_code) }}
+                                                    </td>
+
+                                                    <td data-value="{{ __('shop::app.customer.account.order.view.item-status') }}">
+                                                        <span class="qty-row">
+                                                            {{ __('shop::app.customer.account.order.view.item-ordered', ['qty_ordered' => $item->qty_ordered]) }}
+                                                        </span>
+
+                                                        <span class="qty-row">
+                                                            {{ $item->qty_invoiced ? __('shop::app.customer.account.order.view.item-invoice', ['qty_invoiced' => $item->qty_invoiced]) : '' }}
+                                                        </span>
+
+                                                        <span class="qty-row">
+                                                            {{ $item->qty_shipped ? __('shop::app.customer.account.order.view.item-shipped', ['qty_shipped' => $item->qty_shipped]) : '' }}
+                                                        </span>
+
+                                                        <span class="qty-row">
+                                                            {{ $item->qty_refunded ? __('shop::app.customer.account.order.view.item-refunded', ['qty_refunded' => $item->qty_refunded]) : '' }}
+                                                        </span>
+
+                                                        <span class="qty-row">
+                                                            {{ $item->qty_canceled ? __('shop::app.customer.account.order.view.item-canceled', ['qty_canceled' => $item->qty_canceled]) : '' }}
+                                                        </span>
+                                                    </td>
+
+                                                    <td data-value="{{ __('shop::app.customer.account.order.view.subtotal') }}">
+                                                        {{ core()->formatPrice($item->total, $order->order_currency_code) }}
+                                                    </td>
+
+                                                    <td data-value="{{ __('shop::app.customer.account.order.view.tax-percent') }}">
+                                                        {{ number_format($item->tax_percent, 2) }}%
+                                                    </td>
+
+                                                    <td data-value="{{ __('shop::app.customer.account.order.view.tax-amount') }}">
+                                                        {{ core()->formatPrice($item->tax_amount, $order->order_currency_code) }}
+                                                    </td>
+
+                                                    <td data-value="{{ __('shop::app.customer.account.order.view.grand-total') }}">
+                                                        {{ core()->formatPrice($item->total + $item->tax_amount - $item->discount_amount, $order->order_currency_code) }}
+                                                    </td>
+                                                </tr>
+                                            @endforeach
+                                        </tbody>
+
+                                    </table>
+                                </div>
+
+                                <div class="totals">
+                                    <table class="sale-summary">
+                                        <tbody>
+                                            <tr>
+                                                <td>{{ __('shop::app.customer.account.order.view.subtotal') }}</td>
+                                                <td>-</td>
+                                                <td>{{ core()->formatPrice($order->sub_total, $order->order_currency_code) }}</td>
+                                            </tr>
+
+                                            @if ($order->haveStockableItems())
+                                                <tr>
+                                                    <td>{{ __('shop::app.customer.account.order.view.shipping-handling') }}</td>
+                                                    <td>-</td>
+                                                    <td>{{ core()->formatPrice($order->shipping_amount, $order->order_currency_code) }}</td>
+                                                </tr>
+                                            @endif
+
+                                            @if ($order->base_discount_amount > 0)
+                                                <tr>
+                                                    <td>{{ __('shop::app.customer.account.order.view.discount') }}
+                                                        @if ($order->coupon_code)
+                                                            ({{ $order->coupon_code }})
+                                                        @endif
+                                                    </td>
+                                                    <td>-</td>
+                                                    <td>{{ core()->formatPrice($order->discount_amount, $order->order_currency_code) }}</td>
+                                                </tr>
+                                            @endif
+
+                                            <tr class="border">
+                                                <td>{{ __('shop::app.customer.account.order.view.tax') }}</td>
+                                                <td>-</td>
+                                                <td>{{ core()->formatPrice($order->tax_amount, $order->order_currency_code) }}</td>
+                                            </tr>
+
+                                            <tr class="bold">
+                                                <td>{{ __('shop::app.customer.account.order.view.grand-total') }}</td>
+                                                <td>-</td>
+                                                <td>{{ core()->formatPrice($order->grand_total, $order->order_currency_code) }}</td>
+                                            </tr>
+
+                                            <tr class="bold">
+                                                <td>{{ __('shop::app.customer.account.order.view.total-paid') }}</td>
+                                                <td>-</td>
+                                                <td>{{ core()->formatPrice($order->grand_total_invoiced, $order->order_currency_code) }}</td>
+                                            </tr>
+
+                                            <tr class="bold">
+                                                <td>{{ __('shop::app.customer.account.order.view.total-refunded') }}</td>
+                                                <td>-</td>
+                                                <td>{{ core()->formatPrice($order->grand_total_refunded, $order->order_currency_code) }}</td>
+                                            </tr>
+
+                                            <tr class="bold">
+                                                <td>{{ __('shop::app.customer.account.order.view.total-due') }}</td>
+                                                
+                                                <td>-</td>
+
+                                                @if($order->status !== 'canceled')
+                                                    <td>{{ core()->formatPrice($order->total_due, $order->order_currency_code) }}</td>
+                                                @else
+                                                    <td>{{ core()->formatPrice(0.00, $order->order_currency_code) }}</td>
+                                                @endif
+                                            </tr>
+                                        <tbody>
+                                    </table>
+                                </div>
+                            </div>
+                        </div>
+                    </tab>
+
+                    @if ($order->invoices->count())
+                        <tab name="{{ __('shop::app.customer.account.order.view.invoices') }}">
+
+                            @foreach ($order->invoices as $invoice)
+
+                                <div class="sale-section">
+                                    <div class="secton-title">
+                                        <span>{{ __('shop::app.customer.account.order.view.individual-invoice', ['invoice_id' => $invoice->id]) }}</span>
+
+                                        <a href="{{ route('customer.orders.print', $invoice->id) }}" class="pull-right">
+                                            {{ __('shop::app.customer.account.order.view.print') }}
+                                        </a>
+                                    </div>
+
+                                    <div class="section-content">
+                                        <div class="table">
+                                            <table>
+                                                <thead>
+                                                    <tr>
+                                                        <th>{{ __('shop::app.customer.account.order.view.SKU') }}</th>
+                                                        <th>{{ __('shop::app.customer.account.order.view.product-name') }}</th>
+                                                        <th>{{ __('shop::app.customer.account.order.view.price') }}</th>
+                                                        <th>{{ __('shop::app.customer.account.order.view.qty') }}</th>
+                                                        <th>{{ __('shop::app.customer.account.order.view.subtotal') }}</th>
+                                                        <th>{{ __('shop::app.customer.account.order.view.tax-amount') }}</th>
+                                                        <th>{{ __('shop::app.customer.account.order.view.grand-total') }}</th>
+                                                    </tr>
+                                                </thead>
+
+                                                <tbody>
+
+                                                    @foreach ($invoice->items as $item)
+                                                        <tr>
+                                                            <td data-value="{{ __('shop::app.customer.account.order.view.SKU') }}">
+                                                                {{ $item->getTypeInstance()->getOrderedItem($item)->sku }}
+                                                            </td>
+
+                                                            <td data-value="{{ __('shop::app.customer.account.order.view.product-name') }}">
+                                                                {{ $item->name }}
+                                                            </td>
+
+                                                            <td data-value="{{ __('shop::app.customer.account.order.view.price') }}">
+                                                                {{ core()->formatPrice($item->price, $order->order_currency_code) }}
+                                                            </td>
+
+                                                            <td data-value="{{ __('shop::app.customer.account.order.view.qty') }}">
+                                                                {{ $item->qty }}
+                                                            </td>
+
+                                                            <td data-value="{{ __('shop::app.customer.account.order.view.subtotal') }}">
+                                                                {{ core()->formatPrice($item->total, $order->order_currency_code) }}
+                                                            </td>
+
+                                                            <td data-value="{{ __('shop::app.customer.account.order.view.tax-amount') }}">
+                                                                {{ core()->formatPrice($item->tax_amount, $order->order_currency_code) }}
+                                                            </td>
+
+                                                            <td data-value="{{ __('shop::app.customer.account.order.view.grand-total') }}">
+                                                                {{ core()->formatPrice($item->total + $item->tax_amount, $order->order_currency_code) }}
+                                                            </td>
+                                                        </tr>
+                                                    @endforeach
+                                                </tbody>
+                                            </table>
+                                        </div>
+
+                                        <div class="totals">
+                                            <table class="sale-summary">
+                                                <tr>
+                                                    <td>{{ __('shop::app.customer.account.order.view.subtotal') }}</td>
+                                                    <td>-</td>
+                                                    <td>{{ core()->formatPrice($invoice->sub_total, $order->order_currency_code) }}</td>
+                                                </tr>
+
+                                                <tr>
+                                                    <td>{{ __('shop::app.customer.account.order.view.shipping-handling') }}</td>
+                                                    <td>-</td>
+                                                    <td>{{ core()->formatPrice($invoice->shipping_amount, $order->order_currency_code) }}</td>
+                                                </tr>
+
+                                                @if ($order->base_discount_amount > 0)
+                                                    <tr>
+                                                        <td>{{ __('shop::app.customer.account.order.view.discount') }}</td>
+                                                        <td>-</td>
+                                                        <td>{{ core()->formatPrice($order->discount_amount, $order->order_currency_code) }}</td>
+                                                    </tr>
+                                                @endif
+
+                                                <tr>
+                                                    <td>{{ __('shop::app.customer.account.order.view.tax') }}</td>
+                                                    <td>-</td>
+                                                    <td>{{ core()->formatPrice($invoice->tax_amount, $order->order_currency_code) }}</td>
+                                                </tr>
+
+                                                <tr class="bold">
+                                                    <td>{{ __('shop::app.customer.account.order.view.grand-total') }}</td>
+                                                    <td>-</td>
+                                                    <td>{{ core()->formatPrice($invoice->grand_total, $order->order_currency_code) }}</td>
+                                                </tr>
+                                            </table>
+                                        </div>
+                                    </div>
+                                </div>
+
+                            @endforeach
+
+                        </tab>
+                    @endif
+
+                    @if ($order->shipments->count())
+                        <tab name="{{ __('shop::app.customer.account.order.view.shipments') }}">
+
+                            @foreach ($order->shipments as $shipment)
+
+                                <div class="sale-section">
+                                    <div class="section-content">
+                                        <div class="row">
+                                            <span class="title">
+                                                {{ __('shop::app.customer.account.order.view.tracking-number') }}
+                                            </span>
+
+                                            <span class="value">
+                                                {{  $shipment->track_number }}
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="sale-section">
+                                    <div class="secton-title">
+                                        <span>{{ __('shop::app.customer.account.order.view.individual-shipment', ['shipment_id' => $shipment->id]) }}</span>
+                                    </div>
+
+                                    <div class="section-content">
+
+                                        <div class="table">
+                                            <table>
+                                                <thead>
+                                                    <tr>
+                                                        <th>{{ __('shop::app.customer.account.order.view.SKU') }}</th>
+                                                        <th>{{ __('shop::app.customer.account.order.view.product-name') }}</th>
+                                                        <th>{{ __('shop::app.customer.account.order.view.qty') }}</th>
+                                                    </tr>
+                                                </thead>
+
+                                                <tbody>
+
+                                                    @foreach ($shipment->items as $item)
+
+                                                        <tr>
+                                                            <td data-value="{{  __('shop::app.customer.account.order.view.SKU') }}">{{ $item->sku }}</td>
+                                                            <td data-value="{{  __('shop::app.customer.account.order.view.product-name') }}">{{ $item->name }}</td>
+                                                            <td data-value="{{  __('shop::app.customer.account.order.view.qty') }}">{{ $item->qty }}</td>
+                                                        </tr>
+
+                                                    @endforeach
+
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                    </div>
+                                </div>
+
+                            @endforeach
+
+                        </tab>
+                    @endif
+
+                    @if ($order->refunds->count())
+                        <tab name="{{ __('shop::app.customer.account.order.view.refunds') }}">
+
+                            @foreach ($order->refunds as $refund)
+
+                                <div class="sale-section">
+                                    <div class="secton-title">
+                                        <span>{{ __('shop::app.customer.account.order.view.individual-refund', ['refund_id' => $refund->id]) }}</span>
+                                    </div>
+
+                                    <div class="section-content">
+                                        <div class="table">
+                                            <table>
+                                                <thead>
+                                                    <tr>
+                                                        <th>{{ __('shop::app.customer.account.order.view.SKU') }}</th>
+                                                        <th>{{ __('shop::app.customer.account.order.view.product-name') }}</th>
+                                                        <th>{{ __('shop::app.customer.account.order.view.price') }}</th>
+                                                        <th>{{ __('shop::app.customer.account.order.view.qty') }}</th>
+                                                        <th>{{ __('shop::app.customer.account.order.view.subtotal') }}</th>
+                                                        <th>{{ __('shop::app.customer.account.order.view.tax-amount') }}</th>
+                                                        <th>{{ __('shop::app.customer.account.order.view.grand-total') }}</th>
+                                                    </tr>
+                                                </thead>
+
+                                                <tbody>
+
+                                                    @foreach ($refund->items as $item)
+                                                        <tr>
+                                                            <td data-value="{{ __('shop::app.customer.account.order.view.SKU') }}">{{ $item->child ? $item->child->sku : $item->sku }}</td>
+                                                            <td data-value="{{ __('shop::app.customer.account.order.view.product-name') }}">{{ $item->name }}</td>
+                                                            <td data-value="{{ __('shop::app.customer.account.order.view.price') }}">{{ core()->formatPrice($item->price, $order->order_currency_code) }}</td>
+                                                            <td data-value="{{ __('shop::app.customer.account.order.view.qty') }}">{{ $item->qty }}</td>
+                                                            <td data-value="{{ __('shop::app.customer.account.order.view.subtotal') }}">{{ core()->formatPrice($item->total, $order->order_currency_code) }}</td>
+                                                            <td data-value="{{ __('shop::app.customer.account.order.view.tax-amount') }}">{{ core()->formatPrice($item->tax_amount, $order->order_currency_code) }}</td>
+                                                            <td data-value="{{ __('shop::app.customer.account.order.view.grand-total') }}">{{ core()->formatPrice($item->total + $item->tax_amount, $order->order_currency_code) }}</td>
+                                                        </tr>
+                                                    @endforeach
+
+                                                    @if (! $refund->items->count())
+                                                        <tr>
+                                                            <td class="empty" colspan="7">{{ __('shop::app.common.no-result-found') }}</td>
+                                                        <tr>
+                                                    @endif
+                                                </tbody>
+                                            </table>
+                                        </div>
+
+                                        <div class="totals">
+                                            <table class="sale-summary">
+                                                <tr>
+                                                    <td>{{ __('shop::app.customer.account.order.view.subtotal') }}</td>
+                                                    <td>-</td>
+                                                    <td>{{ core()->formatPrice($refund->sub_total, $order->order_currency_code) }}</td>
+                                                </tr>
+
+                                                @if ($refund->shipping_amount > 0)
+                                                    <tr>
+                                                        <td>{{ __('shop::app.customer.account.order.view.shipping-handling') }}</td>
+                                                        <td>-</td>
+                                                        <td>{{ core()->formatPrice($refund->shipping_amount, $order->order_currency_code) }}</td>
+                                                    </tr>
+                                                @endif
+
+                                                @if ($refund->discount_amount > 0)
+                                                    <tr>
+                                                        <td>{{ __('shop::app.customer.account.order.view.discount') }}</td>
+                                                        <td>-</td>
+                                                        <td>{{ core()->formatPrice($order->discount_amount, $order->order_currency_code) }}</td>
+                                                    </tr>
+                                                @endif
+
+                                                @if ($refund->tax_amount > 0)
+                                                    <tr>
+                                                        <td>{{ __('shop::app.customer.account.order.view.tax') }}</td>
+                                                        <td>-</td>
+                                                        <td>{{ core()->formatPrice($refund->tax_amount, $order->order_currency_code) }}</td>
+                                                    </tr>
+                                                @endif
+
+                                                <tr>
+                                                    <td>{{ __('shop::app.customer.account.order.view.adjustment-refund') }}</td>
+                                                    <td>-</td>
+                                                    <td>{{ core()->formatPrice($refund->adjustment_refund, $order->order_currency_code) }}</td>
+                                                </tr>
+
+                                                <tr>
+                                                    <td>{{ __('shop::app.customer.account.order.view.adjustment-fee') }}</td>
+                                                    <td>-</td>
+                                                    <td>{{ core()->formatPrice($refund->adjustment_fee, $order->order_currency_code) }}</td>
+                                                </tr>
+
+                                                <tr class="bold">
+                                                    <td>{{ __('shop::app.customer.account.order.view.grand-total') }}</td>
+                                                    <td>-</td>
+                                                    <td>{{ core()->formatPrice($refund->grand_total, $order->order_currency_code) }}</td>
+                                                </tr>
+                                            </table>
+                                        </div>
+                                    </div>
+                                </div>
+
+                            @endforeach
+
+                        </tab>
+                    @endif
+                </tabs>
+
+                <div class="sale-section">
+                    <div class="section-content" style="border-bottom: 0">
+                        <div class="order-box-container">
+                            <div class="box">
+                                <div class="box-title">
+                                    {{ __('shop::app.customer.account.order.view.billing-address') }}
+                                </div>
+
+                                <div class="box-content">
+                                    @include ('admin::sales.address', ['address' => $order->billing_address])
+
+                                    {!! view_render_event('bagisto.shop.customers.account.orders.view.billing-address.after', ['order' => $order]) !!}
+                                </div>
+                            </div>
+
+                            @if ($order->shipping_address)
+                                <div class="box">
+                                    <div class="box-title">
+                                        {{ __('shop::app.customer.account.order.view.shipping-address') }}
+                                    </div>
+
+                                    <div class="box-content">
+                                        @include ('admin::sales.address', ['address' => $order->shipping_address])
+
+                                        {!! view_render_event('bagisto.shop.customers.account.orders.view.shipping-address.after', ['order' => $order]) !!}
+                                    </div>
+                                </div>
+
+                                <div class="box">
+                                    <div class="box-title">
+                                        {{ __('shop::app.customer.account.order.view.shipping-method') }}
+                                    </div>
+
+                                    <div class="box-content">
+                                        {{ $order->shipping_title }}
+
+                                        {!! view_render_event('bagisto.shop.customers.account.orders.view.shipping-method.after', ['order' => $order]) !!}
+                                    </div>
+                                </div>
+                            @endif
+
+                            <div class="box">
+                                <div class="box-title">
+                                    {{ __('shop::app.customer.account.order.view.payment-method') }}
+                                </div>
+
+                                <div class="box-content">
+                                    {{ core()->getConfigData('sales.paymentmethods.' . $order->payment->method . '.title') }}
+
+                                    @php $additionalDetails = \Webkul\Payment\Payment::getAdditionalDetails($order->payment->method); @endphp
+
+                                    @if (! empty($additionalDetails))
+                                        <div class="instructions">
+                                            <label>{{ $additionalDetails['title'] }}</label>
+                                            <p>{{ $additionalDetails['value'] }}</p>
+                                        </div>
+                                    @endif
+
+                                    {!! view_render_event('bagisto.shop.customers.account.orders.view.payment-method.after', ['order' => $order]) !!}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+
+            {!! view_render_event('bagisto.shop.customers.account.orders.view.after', ['order' => $order]) !!}
+
+        </div>
+
+    </div>
+
+@endsection
diff --git a/resources/themes/shop/views/customers/account/partials/sidemenu.blade.php b/resources/themes/shop/views/customers/account/partials/sidemenu.blade.php
new file mode 100644
index 000000000..df0d6ad1f
--- /dev/null
+++ b/resources/themes/shop/views/customers/account/partials/sidemenu.blade.php
@@ -0,0 +1,62 @@
+<div class="sidebar">
+    @foreach ($menu->items as $menuItem)
+        <div class="menu-block">
+            <div class="menu-block-title">
+                {{ trans($menuItem['name']) }}
+
+                <i class="icon icon-arrow-down right" id="down-icon"></i>
+            </div>
+
+            <div class="menu-block-content">
+                <ul class="menubar">
+                    @php
+                        $showCompare = core()->getConfigData('general.content.shop.compare_option') == "1" ? true : false;
+
+                        $showWishlist = core()->getConfigData('general.content.shop.wishlist_option') == "1" ? true : false;
+                    @endphp
+
+                    @if (! $showCompare)
+                        @php
+                            unset($menuItem['children']['compare']);
+                        @endphp
+                    @endif
+
+                    @if (! $showWishlist)
+                        @php
+                            unset($menuItem['children']['wishlist']);
+                        @endphp
+                    @endif
+
+                    @foreach ($menuItem['children'] as $subMenuItem)
+                        <li class="menu-item {{ $menu->getActive($subMenuItem) }}">
+                            <a href="{{ $subMenuItem['url'] }}">
+                                {{ trans($subMenuItem['name']) }}
+                            </a>
+
+                            <i class="icon angle-right-icon"></i>
+                        </li>
+                    @endforeach
+                </ul>
+            </div>
+        </div>
+    @endforeach
+</div>
+
+@push('scripts')
+<script>
+    $(document).ready(function() {
+        $(".icon.icon-arrow-down.right").on('click', function(e){
+            var currentElement = $(e.currentTarget);
+            if (currentElement.hasClass('icon-arrow-down')) {
+                $(this).parents('.menu-block').find('.menubar').show();
+                currentElement.removeClass('icon-arrow-down');
+                currentElement.addClass('icon-arrow-up');
+            } else {
+                $(this).parents('.menu-block').find('.menubar').hide();
+                currentElement.removeClass('icon-arrow-up');
+                currentElement.addClass('icon-arrow-down');
+            }
+        });
+    });
+</script>
+@endpush
\ No newline at end of file
diff --git a/resources/themes/shop/views/customers/account/profile/edit.blade.php b/resources/themes/shop/views/customers/account/profile/edit.blade.php
new file mode 100644
index 000000000..44e076f7a
--- /dev/null
+++ b/resources/themes/shop/views/customers/account/profile/edit.blade.php
@@ -0,0 +1,132 @@
+@extends('shop::layouts.master')
+
+@section('page_title')
+    {{ __('shop::app.customer.account.profile.edit-profile.page-title') }}
+@endsection
+
+@section('content-wrapper')
+    <div class="account-content">
+
+        @include('shop::customers.account.partials.sidemenu')
+
+        <div class="account-layout">
+
+            <div class="account-head mb-10">
+                <span class="back-icon"><a href="{{ route('customer.profile.index') }}"><i class="icon icon-menu-back"></i></a></span>
+
+                <span class="account-heading">{{ __('shop::app.customer.account.profile.edit-profile.title') }}</span>
+
+                <span></span>
+            </div>
+
+            {!! view_render_event('bagisto.shop.customers.account.profile.edit.before', ['customer' => $customer]) !!}
+
+            <form method="post" action="{{ route('customer.profile.store') }}" @submit.prevent="onSubmit">
+
+                <div class="edit-form">
+                    @csrf
+
+                    {!! view_render_event('bagisto.shop.customers.account.profile.edit_form_controls.before', ['customer' => $customer]) !!}
+
+                    <div class="control-group" :class="[errors.has('first_name') ? 'has-error' : '']">
+                        <label for="first_name" class="required">{{ __('shop::app.customer.account.profile.fname') }}</label>
+
+                        <input type="text" class="control" name="first_name" value="{{ old('first_name') ?? $customer->first_name }}" v-validate="'required'" data-vv-as="&quot;{{ __('shop::app.customer.account.profile.fname') }}&quot;">
+                        <span class="control-error" v-if="errors.has('first_name')">@{{ errors.first('first_name') }}</span>
+                    </div>
+
+                    {!! view_render_event('bagisto.shop.customers.account.profile.edit.first_name.after') !!}
+
+                    <div class="control-group" :class="[errors.has('last_name') ? 'has-error' : '']">
+                        <label for="last_name" class="required">{{ __('shop::app.customer.account.profile.lname') }}</label>
+
+                        <input type="text" class="control" name="last_name" value="{{ old('last_name') ?? $customer->last_name }}" v-validate="'required'" data-vv-as="&quot;{{ __('shop::app.customer.account.profile.lname') }}&quot;">
+                        <span class="control-error" v-if="errors.has('last_name')">@{{ errors.first('last_name') }}</span>
+                    </div>
+
+                    {!! view_render_event('bagisto.shop.customers.account.profile.edit.last_name.after') !!}
+
+                    <div class="control-group" :class="[errors.has('gender') ? 'has-error' : '']">
+                        <label for="email" class="required">{{ __('shop::app.customer.account.profile.gender') }}</label>
+
+                        <select name="gender" class="control" v-validate="'required'" data-vv-as="&quot;{{ __('shop::app.customer.account.profile.gender') }}&quot;">
+                            <option value=""  @if ($customer->gender == "") selected @endif></option>
+                            <option value="Other"  @if ($customer->gender == "Other") selected @endif>{{ __('shop::app.customer.account.profile.other') }}</option>
+                            <option value="Male"  @if ($customer->gender == "Male") selected @endif>{{ __('shop::app.customer.account.profile.male') }}</option>
+                            <option value="Female" @if ($customer->gender == "Female") selected @endif>{{ __('shop::app.customer.account.profile.female') }}</option>
+                        </select>
+                        <span class="control-error" v-if="errors.has('gender')">@{{ errors.first('gender') }}</span>
+                    </div>
+
+                    {!! view_render_event('bagisto.shop.customers.account.profile.edit.gender.after') !!}
+
+                    <div class="control-group"  :class="[errors.has('date_of_birth') ? 'has-error' : '']">
+                        <label for="date_of_birth">{{ __('shop::app.customer.account.profile.dob') }}</label>
+                        <input type="date" class="control" name="date_of_birth" value="{{ old('date_of_birth') ?? $customer->date_of_birth }}" v-validate="" data-vv-as="&quot;{{ __('shop::app.customer.account.profile.dob') }}&quot;">
+                        <span class="control-error" v-if="errors.has('date_of_birth')">@{{ errors.first('date_of_birth') }}</span>
+                    </div>
+
+                    {!! view_render_event('bagisto.shop.customers.account.profile.edit.date_of_birth.after') !!}
+
+                    <div class="control-group" :class="[errors.has('email') ? 'has-error' : '']">
+                        <label for="email" class="required">{{ __('shop::app.customer.account.profile.email') }}</label>
+                        <input type="email" class="control" name="email" value="{{ old('email') ?? $customer->email }}" v-validate="'required'" data-vv-as="&quot;{{ __('shop::app.customer.account.profile.email') }}&quot;">
+                        <span class="control-error" v-if="errors.has('email')">@{{ errors.first('email') }}</span>
+                    </div>
+
+                    {!! view_render_event('bagisto.shop.customers.account.profile.edit.email.after') !!}
+
+                    <div class="control-group" :class="[errors.has('phone') ? 'has-error' : '']">
+                        <label for="phone">{{ __('shop::app.customer.account.profile.phone') }}</label>
+                        <input type="text" class="control" name="phone" value="{{ old('phone') ?? $customer->phone }}" data-vv-as="&quot;{{ __('shop::app.customer.account.profile.phone') }}&quot;">
+                        <span class="control-error" v-if="errors.has('phone')">@{{ errors.first('phone') }}</span>
+                    </div>
+
+                    {!! view_render_event('bagisto.shop.customers.account.profile.edit.phone.after') !!}
+
+                    <div class="control-group" :class="[errors.has('oldpassword') ? 'has-error' : '']">
+                        <label for="password">{{ __('shop::app.customer.account.profile.opassword') }}</label>
+                        <input type="password" class="control" name="oldpassword" data-vv-as="&quot;{{ __('shop::app.customer.account.profile.opassword') }}&quot;" v-validate="'min:6'">
+                        <span class="control-error" v-if="errors.has('oldpassword')">@{{ errors.first('oldpassword') }}</span>
+                    </div>
+
+                    {!! view_render_event('bagisto.shop.customers.account.profile.edit.oldpassword.after') !!}
+
+                    <div class="control-group" :class="[errors.has('password') ? 'has-error' : '']">
+                        <label for="password">{{ __('shop::app.customer.account.profile.password') }}</label>
+
+                        <input type="password" id="password" class="control" name="password" ref="password" data-vv-as="&quot;{{ __('shop::app.customer.account.profile.password') }}&quot;" v-validate="'min:6'">
+                        <span class="control-error" v-if="errors.has('password')">@{{ errors.first('password') }}</span>
+                    </div>
+
+                    {!! view_render_event('bagisto.shop.customers.account.profile.edit.password.after') !!}
+
+                    <div class="control-group" :class="[errors.has('password_confirmation') ? 'has-error' : '']">
+                        <label for="password">{{ __('shop::app.customer.account.profile.cpassword') }}</label>
+
+                        <input type="password" id="password_confirmation" class="control" name="password_confirmation" data-vv-as="&quot;{{ __('shop::app.customer.account.profile.cpassword') }}&quot;" v-validate="'min:6|confirmed:password'">
+                        <span class="control-error" v-if="errors.has('password_confirmation')">@{{ errors.first('password_confirmation') }}</span>
+                    </div>
+
+                    @if (core()->getConfigData('customer.settings.newsletter.subscription'))
+                        <div class="control-group">
+                            <input type="checkbox" id="checkbox2" name="subscribed_to_news_letter"@if (isset($customer->subscription)) value="{{ $customer->subscription->is_subscribed }}" {{ $customer->subscription->is_subscribed ? 'checked' : ''}} @endif>
+                            <span>{{ __('shop::app.customer.signup-form.subscribe-to-newsletter') }}</span>
+                        </div>
+                    @endif
+
+                    {!! view_render_event('bagisto.shop.customers.account.profile.edit_form_controls.after', ['customer' => $customer]) !!}
+
+                    <div class="button-group">
+                        <input class="btn btn-primary btn-lg" type="submit" value="{{ __('shop::app.customer.account.profile.submit') }}">
+                    </div>
+                </div>
+
+            </form>
+
+            {!! view_render_event('bagisto.shop.customers.account.profile.edit.after', ['customer' => $customer]) !!}
+
+        </div>
+
+    </div>
+@endsection
diff --git a/resources/themes/shop/views/customers/account/profile/index.blade.php b/resources/themes/shop/views/customers/account/profile/index.blade.php
new file mode 100644
index 000000000..6ad256cd7
--- /dev/null
+++ b/resources/themes/shop/views/customers/account/profile/index.blade.php
@@ -0,0 +1,114 @@
+@extends('shop::layouts.master')
+
+@section('page_title')
+    {{ __('shop::app.customer.account.profile.index.title') }}
+@endsection
+
+@section('content-wrapper')
+
+<div class="account-content">
+
+    @include('shop::customers.account.partials.sidemenu')
+
+    <div class="account-layout">
+
+        <div class="account-head">
+
+            <span class="back-icon"><a href="{{ route('customer.profile.index') }}"><i class="icon icon-menu-back"></i></a></span>
+
+            <span class="account-heading">{{ __('shop::app.customer.account.profile.index.title') }}</span>
+
+            <span class="account-action">
+                <a href="{{ route('customer.profile.edit') }}">{{ __('shop::app.customer.account.profile.index.edit') }}</a>
+            </span>
+
+            <div class="horizontal-rule"></div>
+        </div>
+
+         {!! view_render_event('bagisto.shop.customers.account.profile.view.before', ['customer' => $customer]) !!}
+
+        <div class="account-table-content" style="width: 50%;">
+            <table style="color: #5E5E5E;">
+                <tbody>
+                    {!! view_render_event(
+                    'bagisto.shop.customers.account.profile.view.table.before', ['customer' => $customer])
+                    !!}
+                    <tr>
+                        <td>{{ __('shop::app.customer.account.profile.fname') }}</td>
+                        <td>{{ $customer->first_name }}</td>
+                    </tr>
+
+                    {!! view_render_event('bagisto.shop.customers.account.profile.view.table.first_name.after', ['customer' => $customer]) !!}
+
+                    <tr>
+                        <td>{{ __('shop::app.customer.account.profile.lname') }}</td>
+                        <td>{{ $customer->last_name }}</td>
+                    </tr>
+
+                    {!! view_render_event('bagisto.shop.customers.account.profile.view.table.last_name.after', ['customer' => $customer]) !!}
+
+                    <tr>
+                        <td>{{ __('shop::app.customer.account.profile.gender') }}</td>
+                        <td>{{ __($customer->gender) }}</td>
+                    </tr>
+
+                    {!! view_render_event('bagisto.shop.customers.account.profile.view.table.gender.after', ['customer' => $customer]) !!}
+
+                    <tr>
+                        <td>{{ __('shop::app.customer.account.profile.dob') }}</td>
+                        <td>{{ $customer->date_of_birth }}</td>
+                    </tr>
+
+                    {!! view_render_event('bagisto.shop.customers.account.profile.view.table.date_of_birth.after', ['customer' => $customer]) !!}
+
+                    <tr>
+                        <td>{{ __('shop::app.customer.account.profile.email') }}</td>
+                        <td>{{ $customer->email }}</td>
+                    </tr>
+                    {!! view_render_event(
+                    'bagisto.shop.customers.account.profile.view.table.after', ['customer' => $customer])
+                    !!}
+
+                    {{-- @if ($customer->subscribed_to_news_letter == 1)
+                        <tr>
+                            <td> {{ __('shop::app.footer.subscribe-newsletter') }}</td>
+                            <td>
+                                <a class="btn btn-sm btn-primary" href="{{ route('shop.unsubscribe', $customer->email) }}">{{ __('shop::app.subscription.unsubscribe') }} </a>
+                            </td>
+                        </tr>
+                    @endif --}}
+                </tbody>
+            </table>
+
+
+            <button type="submit" @click="showModal('deleteProfile')" class="btn btn-lg btn-primary mt-10">
+                {{ __('shop::app.customer.account.address.index.delete') }}
+            </button>
+
+            <form method="POST" action="{{ route('customer.profile.destroy') }}" @submit.prevent="onSubmit">
+                @csrf
+
+                <modal id="deleteProfile" :is-open="modalIds.deleteProfile">
+                    <h3 slot="header">{{ __('shop::app.customer.account.address.index.enter-password') }}</h3>
+
+                    <div slot="body">
+                        <div class="control-group" :class="[errors.has('password') ? 'has-error' : '']">
+                            <label for="password" class="required">{{ __('admin::app.users.users.password') }}</label>
+                            <input type="password" v-validate="'required|min:6|max:18'" class="control" id="password" name="password" data-vv-as="&quot;{{ __('admin::app.users.users.password') }}&quot;"/>
+                            <span class="control-error" v-if="errors.has('password')">@{{ errors.first('password') }}</span>
+                        </div>
+
+                        <div class="page-action">
+                            <button type="submit"  class="btn btn-lg btn-primary mt-10">
+                            {{ __('shop::app.customer.account.address.index.delete') }}
+                            </button>
+                        </div>
+                    </div>
+                </modal>
+            </form>
+        </div>
+
+        {!! view_render_event('bagisto.shop.customers.account.profile.view.after', ['customer' => $customer]) !!}
+    </div>
+</div>
+@endsection
diff --git a/resources/themes/shop/views/customers/account/reviews/index.blade.php b/resources/themes/shop/views/customers/account/reviews/index.blade.php
new file mode 100644
index 000000000..540a3b88d
--- /dev/null
+++ b/resources/themes/shop/views/customers/account/reviews/index.blade.php
@@ -0,0 +1,80 @@
+@extends('shop::layouts.master')
+
+@section('page_title')
+    {{ __('shop::app.customer.account.review.index.page-title') }}
+@endsection
+
+@section('content-wrapper')
+    <div class="account-content">
+        @include('shop::customers.account.partials.sidemenu')
+
+        <div class="account-layout">
+
+            <div class="account-head">
+                <span class="back-icon"><a href="{{ route('customer.profile.index') }}"><i class="icon icon-menu-back"></i></a></span>
+
+                <span class="account-heading">{{ __('shop::app.customer.account.review.index.title') }}</span>
+
+                @if (count($reviews) > 1)
+                    <div class="account-action">
+                        <a href="{{ route('customer.review.deleteall') }}">{{ __('shop::app.customer.account.wishlist.deleteall') }}</a>
+                    </div>
+                @endif
+
+                <span></span>
+                <div class="horizontal-rule"></div>
+            </div>
+
+            {!! view_render_event('bagisto.shop.customers.account.reviews.list.before', ['reviews' => $reviews]) !!}
+
+            <div class="account-items-list">
+                @if (! $reviews->isEmpty())
+                    @foreach ($reviews as $review)
+                        <div class="account-item-card mt-15 mb-15">
+                            <div class="media-info">
+                                <?php $image = productimage()->getProductBaseImage($review->product); ?>
+                                <a href="{{ route('shop.productOrCategory.index', $review->product->url_key) }}" title="{{ $review->product->name }}">
+                                    <img class="media" src="{{ $image['small_image_url'] }}" alt=""/>
+                                </a>
+
+                                <div class="info">
+                                    <div class="product-name">
+                                        <a href="{{ route('shop.productOrCategory.index', $review->product->url_key) }}" title="{{ $review->product->name }}">
+                                            {{$review->product->name}}
+                                        </a>
+                                    </div>
+
+                                    <div class="stars mt-10">
+                                        @for($i=0 ; $i < $review->rating ; $i++)
+                                            <span class="icon star-icon"></span>
+                                        @endfor
+                                    </div>
+
+                                    <div class="mt-10">
+                                        {{ $review->comment }}
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="operations">
+                                <a class="mb-50" href="{{ route('customer.review.delete', $review->id) }}"><span class="icon trash-icon"></span></a>
+                            </div>
+                        </div>
+                        <div class="horizontal-rule mb-10 mt-10"></div>
+                    @endforeach
+
+                    <div class="bottom-toolbar">
+                        {{ $reviews->links()  }}
+                    </div>
+                @else
+                    <div class="empty mt-15">
+                        {{ __('customer::app.reviews.empty') }}
+                    </div>
+                @endif
+
+            </div>
+
+            {!! view_render_event('bagisto.shop.customers.account.reviews.list.after', ['reviews' => $reviews]) !!}
+        </div>
+    </div>
+@endsection
\ No newline at end of file
diff --git a/resources/themes/shop/views/customers/account/reviews/reviews.blade.php b/resources/themes/shop/views/customers/account/reviews/reviews.blade.php
new file mode 100644
index 000000000..b97c9e3bf
--- /dev/null
+++ b/resources/themes/shop/views/customers/account/reviews/reviews.blade.php
@@ -0,0 +1,50 @@
+@extends('shop::layouts.master')
+
+@section('page_title')
+    {{ __('shop::app.customer.account.review.view.page-title') }}
+@endsection
+
+@section('content-wrapper')
+    <div class="account-content">
+        @include('shop::customers.account.partials.sidemenu')
+
+        <div class="account-layout">
+            <div class="account-head">
+                <span class="account-heading">Reviews</span>
+                <div class="horizontal-rule"></div>
+            </div>
+
+            <div class="account-items-list">
+                @if (count($reviews))
+                    @foreach ($reviews as $review)
+                    <div class="account-item-card mt-15 mb-15">
+                        <div class="media-info">
+                            <?php $image = productimage()->getGalleryImages($review->product); ?>
+                            <img class="media" src="{{ $image[0]['small_image_url'] }}" alt="" />
+
+                            <div class="info mt-20">
+                                <div class="product-name">{{$review->product->name}}</div>
+
+                                <div>
+                                    @for($i=0;$i<$review->rating;$i++)
+                                        <span class="icon star-icon"></span>
+                                    @endfor
+                                </div>
+
+                                <div>
+                                    {{ $review->comment }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="horizontal-rule mb-10 mt-10"></div>
+                    @endforeach
+                @else
+                    <div class="empty">
+                        {{ __('customer::app.reviews.empty') }}
+                    </div>
+                @endif
+            </div>
+        </div>
+    </div>
+@endsection
\ No newline at end of file
diff --git a/resources/themes/shop/views/customers/account/wishlist/wishlist.blade.php b/resources/themes/shop/views/customers/account/wishlist/wishlist.blade.php
new file mode 100644
index 000000000..092db144d
--- /dev/null
+++ b/resources/themes/shop/views/customers/account/wishlist/wishlist.blade.php
@@ -0,0 +1,92 @@
+@extends('shop::layouts.master')
+
+@section('page_title')
+    {{ __('shop::app.customer.account.wishlist.page-title') }}
+@endsection
+
+@section('content-wrapper')
+    <div class="account-content">
+        @include('shop::customers.account.partials.sidemenu')
+
+        @inject ('reviewHelper', 'Webkul\Product\Helpers\Review')
+
+        <div class="account-layout">
+
+            <div class="account-head mb-15">
+                <span class="account-heading">{{ __('shop::app.customer.account.wishlist.title') }}</span>
+
+                @if (count($items))
+                    <div class="account-action">
+                        <a href="{{ route('customer.wishlist.removeall') }}">{{ __('shop::app.customer.account.wishlist.deleteall') }}</a>
+                    </div>
+                @endif
+
+                <div class="horizontal-rule"></div>
+            </div>
+
+            {!! view_render_event('bagisto.shop.customers.account.wishlist.list.before', ['wishlist' => $items]) !!}
+
+            <div class="account-items-list">
+
+                @if ($items->count())
+                    @foreach ($items as $item)
+                        <div class="account-item-card mt-15 mb-15">
+                            <div class="media-info">
+                                @php
+                                    $image = $item->product->getTypeInstance()->getBaseImage($item);
+                                @endphp
+
+                                <img class="media" src="{{ $image['small_image_url'] }}" alt="" />
+
+                                <div class="info">
+                                    <div class="product-name">
+                                        {{ $item->product->name }}
+
+                                        @if (isset($item->additional['attributes']))
+                                            <div class="item-options">
+
+                                                @foreach ($item->additional['attributes'] as $attribute)
+                                                    <b>{{ $attribute['attribute_name'] }} : </b>{{ $attribute['option_label'] }}</br>
+                                                @endforeach
+
+                                            </div>
+                                        @endif
+                                    </div>
+
+                                    <span class="stars" style="display: inline">
+                                        @for ($i = 1; $i <= $reviewHelper->getAverageRating($item->product); $i++)
+                                            <span class="icon star-icon"></span>
+                                        @endfor
+                                    </span>
+                                </div>
+                            </div>
+
+                            <div class="operations">
+                                <a class="mb-50" href="{{ route('customer.wishlist.remove', $item->id) }}">
+                                    <span class="icon trash-icon"></span>
+                                </a>
+
+                                <a href="{{ route('customer.wishlist.move', $item->id) }}" class="btn btn-primary btn-md">
+                                    {{ __('shop::app.customer.account.wishlist.move-to-cart') }}
+                                </a>
+                            </div>
+                        </div>
+
+                        <div class="horizontal-rule mb-10 mt-10"></div>
+                    @endforeach
+
+                    <div class="bottom-toolbar">
+                        {{ $items->links()  }}
+                    </div>
+                @else
+                    <div class="empty">
+                        {{ __('customer::app.wishlist.empty') }}
+                    </div>
+                @endif
+            </div>
+
+            {!! view_render_event('bagisto.shop.customers.account.wishlist.list.after', ['wishlist' => $items]) !!}
+
+        </div>
+    </div>
+@endsection
\ No newline at end of file
diff --git a/resources/themes/shop/views/customers/session/index.blade.php b/resources/themes/shop/views/customers/session/index.blade.php
new file mode 100644
index 000000000..38bdbc9b1
--- /dev/null
+++ b/resources/themes/shop/views/customers/session/index.blade.php
@@ -0,0 +1,57 @@
+@extends('shop::layouts.master')
+
+@section('page_title')
+    {{ __('shop::app.customer.login-form.page-title') }}
+@endsection
+
+@section('content-wrapper')
+
+    <div class="auth-content">
+        <div class="sign-up-text">
+            {{ __('shop::app.customer.login-text.no_account') }} - <a href="{{ route('customer.register.index') }}">{{ __('shop::app.customer.login-text.title') }}</a>
+        </div>
+
+        {!! view_render_event('bagisto.shop.customers.login.before') !!}
+
+        <form method="POST" action="{{ route('customer.session.create') }}" @submit.prevent="onSubmit">
+            {{ csrf_field() }}
+            <div class="login-form">
+                <div class="login-text">{{ __('shop::app.customer.login-form.title') }}</div>
+
+                {!! view_render_event('bagisto.shop.customers.login_form_controls.before') !!}
+
+                <div class="control-group" :class="[errors.has('email') ? 'has-error' : '']">
+                    <label for="email" class="required">{{ __('shop::app.customer.login-form.email') }}</label>
+                    <input type="text" class="control" name="email" v-validate="'required|email'" value="{{ old('email') }}" data-vv-as="&quot;{{ __('shop::app.customer.login-form.email') }}&quot;">
+                    <span class="control-error" v-if="errors.has('email')">@{{ errors.first('email') }}</span>
+                </div>
+
+                <div class="control-group" :class="[errors.has('password') ? 'has-error' : '']">
+                    <label for="password" class="required">{{ __('shop::app.customer.login-form.password') }}</label>
+                    <input type="password" v-validate="'required|min:6'" class="control" id="password" name="password" data-vv-as="&quot;{{ __('admin::app.users.sessions.password') }}&quot;" value=""/>
+                    <span class="control-error" v-if="errors.has('password')">@{{ errors.first('password') }}</span>
+                </div>
+
+                {!! view_render_event('bagisto.shop.customers.login_form_controls.after') !!}
+
+                <div class="forgot-password-link">
+                    <a href="{{ route('customer.forgot-password.create') }}">{{ __('shop::app.customer.login-form.forgot_pass') }}</a>
+
+                    <div class="mt-10">
+                        @if (Cookie::has('enable-resend'))
+                            @if (Cookie::get('enable-resend') == true)
+                                <a href="{{ route('customer.resend.verification-email', Cookie::get('email-for-resend')) }}">{{ __('shop::app.customer.login-form.resend-verification') }}</a>
+                            @endif
+                        @endif
+                    </div>
+                </div>
+
+                <input class="btn btn-primary btn-lg" type="submit" value="{{ __('shop::app.customer.login-form.button_title') }}">
+            </div>
+        </form>
+
+        {!! view_render_event('bagisto.shop.customers.login.after') !!}
+    </div>
+
+@stop
+
diff --git a/resources/themes/shop/views/customers/signup/forgot-password.blade.php b/resources/themes/shop/views/customers/signup/forgot-password.blade.php
new file mode 100644
index 000000000..f21a32a6e
--- /dev/null
+++ b/resources/themes/shop/views/customers/signup/forgot-password.blade.php
@@ -0,0 +1,61 @@
+@extends('shop::layouts.master')
+
+@section('page_title')
+ {{ __('shop::app.customer.forgot-password.page_title') }}
+@stop
+
+@push('css')
+    <style>
+        .button-group {
+            margin-bottom: 25px;
+        }
+        .primary-back-icon {
+            vertical-align: middle;
+        }
+    </style>
+@endpush
+
+@section('content-wrapper')
+
+<div class="auth-content">
+
+    {!! view_render_event('bagisto.shop.customers.forget_password.before') !!}
+
+    <form method="post" action="{{ route('customer.forgot-password.store') }}" @submit.prevent="onSubmit">
+
+        {{ csrf_field() }}
+
+        <div class="login-form">
+
+            <div class="login-text">{{ __('shop::app.customer.forgot-password.title') }}</div>
+
+            {!! view_render_event('bagisto.shop.customers.forget_password_form_controls.before') !!}
+
+            <div class="control-group" :class="[errors.has('email') ? 'has-error' : '']">
+                <label for="email">{{ __('shop::app.customer.forgot-password.email') }}</label>
+                <input type="email" class="control" name="email" v-validate="'required|email'">
+                <span class="control-error" v-if="errors.has('email')">@{{ errors.first('email') }}</span>
+            </div>
+
+            {!! view_render_event('bagisto.shop.customers.forget_password_form_controls.before') !!}
+
+            <div class="button-group">
+                <button type="submit" class="btn btn-lg btn-primary">
+                    {{ __('shop::app.customer.forgot-password.submit') }}
+                </button>
+            </div>
+
+            <div class="control-group" style="margin-bottom: 0px;">
+                <a href="{{ route('customer.session.index') }}">
+                    <i class="icon primary-back-icon"></i>
+                    {{ __('shop::app.customer.reset-password.back-link-title') }}
+                </a>
+            </div>
+
+        </div>
+    </form>
+
+    {!! view_render_event('bagisto.shop.customers.forget_password.before') !!}
+
+</div>
+@endsection
\ No newline at end of file
diff --git a/resources/themes/shop/views/customers/signup/index.blade.php b/resources/themes/shop/views/customers/signup/index.blade.php
new file mode 100644
index 000000000..72f74bd86
--- /dev/null
+++ b/resources/themes/shop/views/customers/signup/index.blade.php
@@ -0,0 +1,97 @@
+@extends('shop::layouts.master')
+@section('page_title')
+    {{ __('shop::app.customer.signup-form.page-title') }}
+@endsection
+@section('content-wrapper')
+
+<div class="auth-content">
+
+    <div class="sign-up-text">
+        {{ __('shop::app.customer.signup-text.account_exists') }} - <a href="{{ route('customer.session.index') }}">{{ __('shop::app.customer.signup-text.title') }}</a>
+    </div>
+
+    {!! view_render_event('bagisto.shop.customers.signup.before') !!}
+
+    <form method="post" action="{{ route('customer.register.create') }}" @submit.prevent="onSubmit">
+
+        {{ csrf_field() }}
+
+        <div class="login-form">
+            <div class="login-text">{{ __('shop::app.customer.signup-form.title') }}</div>
+
+            {!! view_render_event('bagisto.shop.customers.signup_form_controls.before') !!}
+
+            <div class="control-group" :class="[errors.has('first_name') ? 'has-error' : '']">
+                <label for="first_name" class="required">{{ __('shop::app.customer.signup-form.firstname') }}</label>
+                <input type="text" class="control" name="first_name" v-validate="'required'" value="{{ old('first_name') }}" data-vv-as="&quot;{{ __('shop::app.customer.signup-form.firstname') }}&quot;">
+                <span class="control-error" v-if="errors.has('first_name')">@{{ errors.first('first_name') }}</span>
+            </div>
+
+            {!! view_render_event('bagisto.shop.customers.signup_form_controls.firstname.after') !!}
+
+            <div class="control-group" :class="[errors.has('last_name') ? 'has-error' : '']">
+                <label for="last_name" class="required">{{ __('shop::app.customer.signup-form.lastname') }}</label>
+                <input type="text" class="control" name="last_name" v-validate="'required'" value="{{ old('last_name') }}" data-vv-as="&quot;{{ __('shop::app.customer.signup-form.lastname') }}&quot;">
+                <span class="control-error" v-if="errors.has('last_name')">@{{ errors.first('last_name') }}</span>
+            </div>
+
+            {!! view_render_event('bagisto.shop.customers.signup_form_controls.lastname.after') !!}
+
+            <div class="control-group" :class="[errors.has('email') ? 'has-error' : '']">
+                <label for="email" class="required">{{ __('shop::app.customer.signup-form.email') }}</label>
+                <input type="email" class="control" name="email" v-validate="'required|email'" value="{{ old('email') }}" data-vv-as="&quot;{{ __('shop::app.customer.signup-form.email') }}&quot;">
+                <span class="control-error" v-if="errors.has('email')">@{{ errors.first('email') }}</span>
+            </div>
+
+            {!! view_render_event('bagisto.shop.customers.signup_form_controls.email.after') !!}
+
+            <div class="control-group" :class="[errors.has('password') ? 'has-error' : '']">
+                <label for="password" class="required">{{ __('shop::app.customer.signup-form.password') }}</label>
+                <input type="password" class="control" name="password" v-validate="'required|min:6'" ref="password" value="{{ old('password') }}" data-vv-as="&quot;{{ __('shop::app.customer.signup-form.password') }}&quot;">
+                <span class="control-error" v-if="errors.has('password')">@{{ errors.first('password') }}</span>
+            </div>
+
+            {!! view_render_event('bagisto.shop.customers.signup_form_controls.password.after') !!}
+
+            <div class="control-group" :class="[errors.has('password_confirmation') ? 'has-error' : '']">
+                <label for="password_confirmation" class="required">{{ __('shop::app.customer.signup-form.confirm_pass') }}</label>
+                <input type="password" class="control" name="password_confirmation"  v-validate="'required|min:6|confirmed:password'" data-vv-as="&quot;{{ __('shop::app.customer.signup-form.confirm_pass') }}&quot;">
+                <span class="control-error" v-if="errors.has('password_confirmation')">@{{ errors.first('password_confirmation') }}</span>
+            </div>
+
+            {{-- <div class="signup-confirm" :class="[errors.has('agreement') ? 'has-error' : '']">
+                <span class="checkbox">
+                    <input type="checkbox" id="checkbox2" name="agreement" v-validate="'required'">
+                    <label class="checkbox-view" for="checkbox2"></label>
+                    <span>{{ __('shop::app.customer.signup-form.agree') }}
+                        <a href="">{{ __('shop::app.customer.signup-form.terms') }}</a> & <a href="">{{ __('shop::app.customer.signup-form.conditions') }}</a> {{ __('shop::app.customer.signup-form.using') }}.
+                    </span>
+                </span>
+                <span class="control-error" v-if="errors.has('agreement')">@{{ errors.first('agreement') }}</span>
+            </div> --}}
+
+            {{-- <span class="checkbox">
+                <input type="checkbox" id="checkbox1" name="checkbox[]">
+                <label class="checkbox-view" for="checkbox1"></label>
+                Checkbox Value 1
+            </span> --}}
+
+            @if (core()->getConfigData('customer.settings.newsletter.subscription'))
+                <div class="control-group">
+                    <input type="checkbox" id="checkbox2" name="is_subscribed">
+                    <span>{{ __('shop::app.customer.signup-form.subscribe-to-newsletter') }}</span>
+                </div>
+            @endif
+
+            {!! view_render_event('bagisto.shop.customers.signup_form_controls.after') !!}
+
+            <button class="btn btn-primary btn-lg" type="submit">
+                {{ __('shop::app.customer.signup-form.button_title') }}
+            </button>
+
+        </div>
+    </form>
+
+    {!! view_render_event('bagisto.shop.customers.signup.after') !!}
+</div>
+@endsection
diff --git a/resources/themes/shop/views/customers/signup/reset-password.blade.php b/resources/themes/shop/views/customers/signup/reset-password.blade.php
new file mode 100644
index 000000000..feb0962ad
--- /dev/null
+++ b/resources/themes/shop/views/customers/signup/reset-password.blade.php
@@ -0,0 +1,52 @@
+@extends('shop::layouts.master')
+
+@section('page_title')
+ {{ __('shop::app.customer.reset-password.title') }}
+@endsection
+
+@section('content-wrapper')
+
+<div class="auth-content">
+
+    {!! view_render_event('bagisto.shop.customers.reset_password.before') !!}
+
+    <form method="post" action="{{ route('customer.reset-password.store') }}" >
+
+        {{ csrf_field() }}
+
+        <div class="login-form">
+
+            <div class="login-text">{{ __('shop::app.customer.reset-password.title') }}</div>
+
+            <input type="hidden" name="token" value="{{ old('token') ?: $token }}">
+
+            {!! view_render_event('bagisto.shop.customers.reset_password_form_controls.before') !!}
+
+            <div class="control-group" :class="[errors.has('email') ? 'has-error' : '']">
+                <label for="email">{{ __('shop::app.customer.reset-password.email') }}</label>
+                <input type="text" v-validate="'required|email'" class="control" id="email" name="email" value="{{ old('email') }}"/>
+                <span class="control-error" v-if="errors.has('email')">@{{ errors.first('email') }}</span>
+            </div>
+
+            <div class="control-group" :class="[errors.has('password') ? 'has-error' : '']">
+                <label for="password">{{ __('shop::app.customer.reset-password.password') }}</label>
+                <input type="password" class="control" name="password" v-validate="'required|min:6'" ref="password">
+                <span class="control-error" v-if="errors.has('password')">@{{ errors.first('password') }}</span>
+            </div>
+
+            <div class="control-group" :class="[errors.has('confirm_password') ? 'has-error' : '']">
+                <label for="confirm_password">{{ __('shop::app.customer.reset-password.confirm-password') }}</label>
+                <input type="password" class="control" name="password_confirmation"  v-validate="'required|min:6|confirmed:password'">
+                <span class="control-error" v-if="errors.has('confirm_password')">@{{ errors.first('confirm_password') }}</span>
+            </div>
+
+            {!! view_render_event('bagisto.shop.customers.reset_password_form_controls.before') !!}
+
+            <input class="btn btn-primary btn-lg" type="submit" value="{{ __('shop::app.customer.reset-password.submit-btn-title') }}">
+
+        </div>
+    </form>
+
+    {!! view_render_event('bagisto.shop.customers.reset_password.before') !!}
+</div>
+@endsection
\ No newline at end of file
diff --git a/resources/themes/shop/views/emails/admin/forget-password.blade.php b/resources/themes/shop/views/emails/admin/forget-password.blade.php
new file mode 100644
index 000000000..4e312d436
--- /dev/null
+++ b/resources/themes/shop/views/emails/admin/forget-password.blade.php
@@ -0,0 +1,38 @@
+@component('shop::emails.layouts.master')
+    <div style="text-align: center;">
+        <a href="{{ config('app.url') }}">
+            @if (core()->getConfigData('general.design.admin_logo.logo_image'))
+                <img src="{{ \Illuminate\Support\Facades\Storage::url(core()->getConfigData('general.design.admin_logo.logo_image')) }}" alt="{{ config('app.name') }}" style="height: 40px; width: 110px;"/>
+            @else
+                <img src="{{ asset('vendor/webkul/ui/assets/images/logo.png') }}" alt="{{ config('app.name') }}"/>
+            @endif
+        </a>
+    </div>
+
+    <div style="padding: 30px;">
+        <div style="font-size: 20px;color: #242424;line-height: 30px;margin-bottom: 34px;">
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {{ __('shop::app.mail.forget-password.dear', ['name' => $user_name]) }},
+            </p>
+
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {{ __('shop::app.mail.forget-password.info') }}
+            </p>
+
+            <p style="text-align: center;padding: 20px 0;">
+                <a href="{{ route('admin.reset-password.create', $token) }}" style="padding: 10px 20px;background: #0041FF;color: #ffffff;text-transform: uppercase;text-decoration: none; font-size: 16px">
+                    {{ __('shop::app.mail.forget-password.reset-password') }}
+                </a>
+            </p>
+
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {{ __('shop::app.mail.forget-password.final-summary') }}
+            </p>
+
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {{ __('shop::app.mail.forget-password.thanks') }}
+            </p>
+
+        </div>
+    </div>
+@endcomponent
\ No newline at end of file
diff --git a/resources/themes/shop/views/emails/admin/update-password.blade.php b/resources/themes/shop/views/emails/admin/update-password.blade.php
new file mode 100644
index 000000000..f1759daed
--- /dev/null
+++ b/resources/themes/shop/views/emails/admin/update-password.blade.php
@@ -0,0 +1,25 @@
+@component('shop::emails.layouts.master')
+    <div style="text-align: center;">
+        <a href="{{ config('app.url') }}">
+            @if (core()->getConfigData('general.design.admin_logo.logo_image'))
+                <img src="{{ \Illuminate\Support\Facades\Storage::url(core()->getConfigData('general.design.admin_logo.logo_image')) }}" alt="{{ config('app.name') }}" style="height: 40px; width: 110px;"/>
+            @else
+                <img src="{{ asset('vendor/webkul/ui/assets/images/logo.png') }}" alt="{{ config('app.name') }}"/>
+            @endif
+        </a>
+    </div>
+
+    <div style="padding: 30px;">
+        <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+            {{ __('shop::app.mail.update-password.dear', ['name' => $user->name]) }},
+        </p>
+
+        <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+            {{ __('shop::app.mail.update-password.info') }}
+        </p>
+
+        <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+            {{ __('shop::app.mail.update-password.thanks') }}
+        </p>
+    </div>
+@endcomponent
\ No newline at end of file
diff --git a/resources/themes/shop/views/emails/customer/forget-password.blade.php b/resources/themes/shop/views/emails/customer/forget-password.blade.php
new file mode 100644
index 000000000..685346631
--- /dev/null
+++ b/resources/themes/shop/views/emails/customer/forget-password.blade.php
@@ -0,0 +1,34 @@
+@component('shop::emails.layouts.master')
+    <div style="text-align: center;">
+        <a href="{{ config('app.url') }}">
+            @include ('shop::emails.layouts.logo')
+        </a>
+    </div>
+
+    <div style="padding: 30px;">
+        <div style="font-size: 20px;color: #242424;line-height: 30px;margin-bottom: 34px;">
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {{ __('shop::app.mail.forget-password.dear', ['name' => $user_name]) }},
+            </p>
+
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {{ __('shop::app.mail.forget-password.info') }}
+            </p>
+
+            <p style="text-align: center;padding: 20px 0;">
+                <a href="{{ route('customer.reset-password.create', $token) }}" style="padding: 10px 20px;background: #0041FF;color: #ffffff;text-transform: uppercase;text-decoration: none; font-size: 16px">
+                    {{ __('shop::app.mail.forget-password.reset-password') }}
+                </a>
+            </p>
+
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {{ __('shop::app.mail.forget-password.final-summary') }}
+            </p>
+
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {{ __('shop::app.mail.forget-password.thanks') }}
+            </p>
+
+        </div>
+    </div>
+@endcomponent
\ No newline at end of file
diff --git a/resources/themes/shop/views/emails/customer/new-customer.blade.php b/resources/themes/shop/views/emails/customer/new-customer.blade.php
new file mode 100644
index 000000000..8fcbfd931
--- /dev/null
+++ b/resources/themes/shop/views/emails/customer/new-customer.blade.php
@@ -0,0 +1,30 @@
+@component('shop::emails.layouts.master')
+
+    <div>
+        <div style="text-align: center;">
+            <a href="{{ config('app.url') }}">
+                @include ('shop::emails.layouts.logo')
+            </a>
+        </div>
+
+        <div  style="font-size:16px; color:#242424; font-weight:600; margin-top: 60px; margin-bottom: 15px">
+            {{ __('shop::app.mail.customer.new.dear', ['customer_name' => $customer['name']]) }},
+
+        </div>
+
+        <div>
+            {!! __('shop::app.mail.customer.new.summary') !!}
+
+        </div>
+
+        <div>
+            <b> {!! __('shop::app.mail.customer.new.username-email') !!} </b> - {{ $customer['email'] }} <br>
+            <b> {!! __('shop::app.mail.customer.new.password') !!} </b> - {{ $password}}
+        </div>
+
+        <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+            {{ __('shop::app.mail.customer.new.thanks') }}
+        </p>
+    </div>
+
+@endcomponent
\ No newline at end of file
diff --git a/resources/themes/shop/views/emails/customer/registration.blade.php b/resources/themes/shop/views/emails/customer/registration.blade.php
new file mode 100644
index 000000000..384fd29e7
--- /dev/null
+++ b/resources/themes/shop/views/emails/customer/registration.blade.php
@@ -0,0 +1,32 @@
+@component('shop::emails.layouts.master')
+
+    <div>
+        <div style="text-align: center;">
+            <a href="{{ config('app.url') }}">
+                @include ('shop::emails.layouts.logo')
+            </a>
+        </div>
+
+
+        <div style="padding: 30px;">
+            <div style="font-size: 20px;color: #242424;line-height: 30px;margin-bottom: 34px;">
+                <p style="font-weight: bold;font-size: 20px;color: #242424;line-height: 24px;">
+                    {{ __('shop::app.mail.customer.registration.dear', ['customer_name' => $data['first_name']. ' ' .$data['last_name']]) }},
+                </p>
+
+                <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                    {!! __('shop::app.mail.customer.registration.greeting') !!}
+                </p>
+            </div>
+
+            <div style="font-size: 16px;color: #5E5E5E;line-height: 30px;margin-bottom: 20px !important;">
+                {{ __('shop::app.mail.customer.registration.summary') }}
+            </div>
+
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {{ __('shop::app.mail.customer.registration.thanks') }}
+            </p>
+        </div>
+    </div>
+
+@endcomponent
\ No newline at end of file
diff --git a/resources/themes/shop/views/emails/customer/subscription-email.blade.php b/resources/themes/shop/views/emails/customer/subscription-email.blade.php
new file mode 100644
index 000000000..b7be2a8d2
--- /dev/null
+++ b/resources/themes/shop/views/emails/customer/subscription-email.blade.php
@@ -0,0 +1,26 @@
+@component('shop::emails.layouts.master')
+
+    <div>
+        <div style="text-align: center;">
+            <a href="{{ config('app.url') }}">
+                @include ('shop::emails.layouts.logo')
+            </a>
+        </div>
+
+        <div  style="font-size:16px; color:#242424; font-weight:600; margin-top: 60px; margin-bottom: 15px">
+            {!! __('shop::app.mail.customer.subscription.greeting') !!}
+        </div>
+
+        <div>
+            {!! __('shop::app.mail.customer.subscription.summary') !!}
+        </div>
+
+        <div  style="margin-top: 40px; text-align: center">
+            <a href="{{ route('shop.unsubscribe', $data['token']) }}" style="font-size: 16px;
+            color: #FFFFFF; text-align: center; background: #0031F0; padding: 10px 100px;text-decoration: none;">
+                {!! __('shop::app.mail.customer.subscription.unsubscribe') !!}
+            </a>
+        </div>
+    </div>
+
+@endcomponent
\ No newline at end of file
diff --git a/resources/themes/shop/views/emails/customer/update-password.blade.php b/resources/themes/shop/views/emails/customer/update-password.blade.php
new file mode 100644
index 000000000..4d616875f
--- /dev/null
+++ b/resources/themes/shop/views/emails/customer/update-password.blade.php
@@ -0,0 +1,21 @@
+@component('shop::emails.layouts.master')
+    <div style="text-align: center;">
+        <a href="{{ config('app.url') }}">
+            @include ('shop::emails.layouts.logo')
+        </a>
+    </div>
+
+    <div style="padding: 30px;">
+        <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+            {{ __('shop::app.mail.update-password.dear', ['name' => $user->name]) }},
+        </p>
+
+        <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+            {{ __('shop::app.mail.update-password.info') }}
+        </p>
+
+        <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+            {{ __('shop::app.mail.update-password.thanks') }}
+        </p>
+    </div>
+@endcomponent
\ No newline at end of file
diff --git a/resources/themes/shop/views/emails/customer/verification-email.blade.php b/resources/themes/shop/views/emails/customer/verification-email.blade.php
new file mode 100644
index 000000000..fda82f400
--- /dev/null
+++ b/resources/themes/shop/views/emails/customer/verification-email.blade.php
@@ -0,0 +1,26 @@
+@component('shop::emails.layouts.master')
+
+    <div>
+        <div style="text-align: center;">
+            <a href="{{ config('app.url') }}">
+                @include ('shop::emails.layouts.logo')
+            </a>
+        </div>
+
+        <div  style="font-size:16px; color:#242424; font-weight:600; margin-top: 60px; margin-bottom: 15px">
+                {!! __('shop::app.mail.customer.verification.heading') !!}
+        </div>
+
+        <div>
+            {!! __('shop::app.mail.customer.verification.summary') !!}
+        </div>
+
+        <div  style="margin-top: 40px; text-align: center">
+            <a href="{{ route('customer.verify', $data['token']) }}" style="font-size: 16px;
+            color: #FFFFFF; text-align: center; background: #0031F0; padding: 10px 100px;text-decoration: none;">
+                {!! __('shop::app.mail.customer.verification.verify') !!}
+            </a>
+        </div>
+    </div>
+
+@endcomponent
\ No newline at end of file
diff --git a/resources/themes/shop/views/emails/layouts/logo.blade.php b/resources/themes/shop/views/emails/layouts/logo.blade.php
new file mode 100644
index 000000000..2d435e7ab
--- /dev/null
+++ b/resources/themes/shop/views/emails/layouts/logo.blade.php
@@ -0,0 +1,5 @@
+@if ($logo = core()->getCurrentChannel()->logo_url)
+    <img src="{{ $logo }}" alt="{{ config('app.name') }}" style="height: 40px; width: 110px;"/>
+@else
+    <img src="{{ asset('themes/default/assets/images/logo.svg') }}" alt="{{ config('app.name') }}"/>
+@endif
\ No newline at end of file
diff --git a/resources/themes/shop/views/emails/layouts/master.blade.php b/resources/themes/shop/views/emails/layouts/master.blade.php
new file mode 100644
index 000000000..9451f8cf1
--- /dev/null
+++ b/resources/themes/shop/views/emails/layouts/master.blade.php
@@ -0,0 +1,22 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+        <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500" rel="stylesheet" type="text/css">
+    </head>
+
+    <body style="font-family: montserrat, sans-serif;">
+        <div style="max-width: 1000px; margin-left: auto; margin-right: auto;">
+            <div style="text-align: center;">
+                {{ $header ?? '' }}
+            </div>
+
+            <div>
+                {{ $slot }}
+
+                {{ $subcopy ?? '' }}
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/resources/themes/shop/views/emails/sales/new-admin-order.blade.php b/resources/themes/shop/views/emails/sales/new-admin-order.blade.php
new file mode 100644
index 000000000..6009ab0d8
--- /dev/null
+++ b/resources/themes/shop/views/emails/sales/new-admin-order.blade.php
@@ -0,0 +1,221 @@
+@component('shop::emails.layouts.master')
+    <div style="text-align: center;">
+        <a href="{{ config('app.url') }}">
+            @if (core()->getConfigData('general.design.admin_logo.logo_image'))
+                <img src="{{ \Illuminate\Support\Facades\Storage::url(core()->getConfigData('general.design.admin_logo.logo_image')) }}" alt="{{ config('app.name') }}" style="height: 40px; width: 110px;"/>
+            @else
+                <img src="{{ asset('vendor/webkul/ui/assets/images/logo.png') }}" alt="{{ config('app.name') }}"/>
+            @endif
+        </a>
+    </div>
+
+    <div style="padding: 30px;">
+        <div style="font-size: 20px;color: #242424;line-height: 30px;margin-bottom: 34px;">
+            <span style="font-weight: bold;">
+                {{ __('shop::app.mail.order.heading') }}
+            </span> <br>
+
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+            {{ __('shop::app.mail.order.dear-admin', ['admin_name' => config('mail.from.name')]) }},
+            </p>
+
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {!! __('shop::app.mail.order.greeting-admin', [
+                    'order_id' => '<a href="' . route('customer.orders.view', $order->id) . '" style="color: #0041FF; font-weight: bold;">#' . $order->increment_id . '</a>',
+                    'created_at' => $order->created_at
+                    ])
+                !!}
+            </p>
+        </div>
+
+        <div style="font-weight: bold;font-size: 20px;color: #242424;line-height: 30px;margin-bottom: 20px !important;">
+            {{ __('shop::app.mail.order.summary') }}
+        </div>
+
+        <div style="display: flex;flex-direction: row;margin-top: 20px;justify-content: space-between;margin-bottom: 40px;">
+            <div style="line-height: 25px;">
+                <div style="font-weight: bold;font-size: 16px;color: #242424;">
+                    {{ __('shop::app.mail.order.shipping-address') }}
+                </div>
+
+                <div>
+                    {{ $order->shipping_address->company_name ?? '' }}
+                </div>
+
+                <div>
+                    {{ $order->shipping_address->name }}
+                </div>
+
+                <div>
+                    {{ $order->shipping_address->address1 }}, {{ $order->shipping_address->state }}
+                </div>
+
+                <div>
+                    {{ core()->country_name($order->shipping_address->country) }} {{ $order->shipping_address->postcode }}
+                </div>
+
+                <div>---</div>
+
+                <div style="margin-bottom: 40px;">
+                    {{ __('shop::app.mail.order.contact') }} : {{ $order->shipping_address->phone }}
+                </div>
+
+                <div style="font-size: 16px;color: #242424; font-weight: bold">
+                    {{ __('shop::app.mail.order.shipping') }}
+                </div>
+
+                <div style="font-size: 16px;color: #242424;">
+                    {{ $order->shipping_title }}
+                </div>
+            </div>
+
+            <div style="line-height: 25px;">
+                <div style="font-weight: bold;font-size: 16px;color: #242424;">
+                    {{ __('shop::app.mail.order.billing-address') }}
+                </div>
+
+                <div>
+                    {{ $order->billing_address->company_name ?? '' }}
+                </div>
+
+                <div>
+                    {{ $order->billing_address->name }}
+                </div>
+
+                <div>
+                    {{ $order->billing_address->address1 }}, {{ $order->billing_address->state }}
+                </div>
+
+                <div>
+                    {{ core()->country_name($order->billing_address->country) }} {{ $order->billing_address->postcode }}
+                </div>
+
+                <div>---</div>
+
+                <div style="margin-bottom: 40px;">
+                    {{ __('shop::app.mail.order.contact') }} : {{ $order->billing_address->phone }}
+                </div>
+
+                <div style="font-size: 16px; color: #242424; font-weight: bold">
+                    {{ __('shop::app.mail.order.payment') }}
+                </div>
+
+                <div style="font-size: 16px; color: #242424;">
+                    {{ core()->getConfigData('sales.paymentmethods.' . $order->payment->method . '.title') }}
+                </div>
+
+                @php $additionalDetails = \Webkul\Payment\Payment::getAdditionalDetails($order->payment->method); @endphp
+
+                @if (! empty($additionalDetails))
+                    <div style="font-size: 16px; color: #242424;">
+                        <div>{{ $additionalDetails['title'] }}</div>
+                        <div>{{ $additionalDetails['value'] }}</div>
+                    </div>
+                @endif
+            </div>
+        </div>
+
+        <div class="section-content">
+            <div class="table mb-20">
+                <table style="overflow-x: auto; border-collapse: collapse;
+                border-spacing: 0;width: 100%">
+                    <thead>
+                        <tr style="background-color: #f2f2f2">
+                            <th style="text-align: left;padding: 8px">{{ __('shop::app.customer.account.order.view.SKU') }}</th>
+                            <th style="text-align: left;padding: 8px">{{ __('shop::app.customer.account.order.view.product-name') }}</th>
+                            <th style="text-align: left;padding: 8px">{{ __('shop::app.customer.account.order.view.price') }}</th>
+                            <th style="text-align: left;padding: 8px">{{ __('shop::app.customer.account.order.view.qty') }}</th>
+                        </tr>
+                    </thead>
+
+                    <tbody>
+                        @foreach ($order->items as $item)
+                            <tr>
+                                <td data-value="{{ __('shop::app.customer.account.order.view.SKU') }}" style="text-align: left;padding: 8px">
+                                    {{ $item->getTypeInstance()->getOrderedItem($item)->sku }}
+                                </td>
+
+                                <td data-value="{{ __('shop::app.customer.account.order.view.product-name') }}" style="text-align: left;padding: 8px">
+                                    {{ $item->name }}
+
+                                    @if (isset($item->additional['attributes']))
+                                        <div class="item-options">
+
+                                            @foreach ($item->additional['attributes'] as $attribute)
+                                                <b>{{ $attribute['attribute_name'] }} : </b>{{ $attribute['option_label'] }}</br>
+                                            @endforeach
+
+                                        </div>
+                                    @endif
+                                </td>
+
+                                <td data-value="{{ __('shop::app.customer.account.order.view.price') }}" style="text-align: left;padding: 8px">
+                                    {{ core()->formatPrice($item->price, $order->order_currency_code) }}
+                                </td>
+
+                                <td data-value="{{ __('shop::app.customer.account.order.view.qty') }}" style="text-align: left;padding: 8px">
+                                    {{ $item->qty_ordered }}
+                                </td>
+                            </tr>
+                        @endforeach
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <div style="font-size: 16px;color: #242424;line-height: 30px;float: right;width: 40%;margin-top: 20px;">
+            <div>
+                <span>{{ __('shop::app.mail.order.subtotal') }}</span>
+                <span style="float: right;">
+                    {{ core()->formatBasePrice($order->base_sub_total) }}
+                </span>
+            </div>
+
+            <div>
+                <span>{{ __('shop::app.mail.order.shipping-handling') }}</span>
+                <span style="float: right;">
+                    {{ core()->formatBasePrice($order->base_shipping_amount) }}
+                </span>
+            </div>
+
+            @foreach (Webkul\Tax\Helpers\Tax::getTaxRatesWithAmount($order, true) as $taxRate => $baseTaxAmount )
+            <div>
+                <span id="taxrate-{{ core()->taxRateAsIdentifier($taxRate) }}">{{ __('shop::app.mail.order.tax') }} {{ $taxRate }} %</span>
+                <span id="basetaxamount-{{ core()->taxRateAsIdentifier($taxRate) }}" style="float: right;">
+                    {{ core()->formatBasePrice($baseTaxAmount) }}
+                </span>
+            </div>
+            @endforeach
+
+            @if ($order->discount_amount > 0)
+                <div>
+                    <span>{{ __('shop::app.mail.order.discount') }}</span>
+                    <span style="float: right;">
+                        {{ core()->formatBasePrice($order->base_discount_amount) }}
+                    </span>
+                </div>
+            @endif
+
+            <div style="font-weight: bold">
+                <span>{{ __('shop::app.mail.order.grand-total') }}</span>
+                <span style="float: right;">
+                    {{ core()->formatBasePrice($order->base_grand_total) }}
+                </span>
+            </div>
+        </div>
+
+        <div style="width: 100%;margin-top: 65px;font-size: 16px;color: #5E5E5E;line-height: 24px;display: inline-block">
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {!!
+                    __('shop::app.mail.order.help', [
+                        'support_email' => '<a style="color:#0041FF" href="mailto:' . config('mail.admin.address') . '">' . config('mail.admin.address') . '</a>'
+                        ])
+                !!}
+            </p>
+
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {{ __('shop::app.mail.order.thanks') }}
+            </p>
+        </div>
+    </div>
+@endcomponent
diff --git a/resources/themes/shop/views/emails/sales/new-inventorysource-shipment.blade.php b/resources/themes/shop/views/emails/sales/new-inventorysource-shipment.blade.php
new file mode 100644
index 000000000..487d297ca
--- /dev/null
+++ b/resources/themes/shop/views/emails/sales/new-inventorysource-shipment.blade.php
@@ -0,0 +1,172 @@
+@component('shop::emails.layouts.master')
+    <div style="text-align: center;">
+        <a href="{{ config('app.url') }}">
+            @if (core()->getConfigData('general.design.admin_logo.logo_image'))
+                <img src="{{ \Illuminate\Support\Facades\Storage::url(core()->getConfigData('general.design.admin_logo.logo_image')) }}" alt="{{ config('app.name') }}" style="height: 40px; width: 110px;"/>
+            @else
+                <img src="{{ asset('vendor/webkul/ui/assets/images/logo.png') }}" alt="{{ config('app.name') }}"/>
+            @endif
+        </a>
+    </div>
+
+    <?php $order = $shipment->order; ?>
+    <?php $inventory = $shipment->inventory_source; ?>
+
+    <div style="padding: 30px;">
+        <div style="font-size: 20px;color: #242424;line-height: 30px;margin-bottom: 34px;">
+            <span style="font-weight: bold;">
+                {{ __('shop::app.mail.shipment.inventory-heading', ['order_id' => $order->increment_id, 'shipment_id' => $shipment->id]) }}
+            </span> <br>
+
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {{ __('shop::app.mail.order.dear', ['customer_name' => $inventory->name]) }},
+            </p>
+
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {!! __('shop::app.mail.shipment.greeting', [
+                    'order_id' => '<a href="' . route('customer.orders.view', $order->id) . '" style="color: #0041FF; font-weight: bold;">#' . $order->increment_id . '</a>',
+                    'created_at' => $order->created_at
+                    ])
+                !!}
+            </p>
+        </div>
+
+
+
+        <div style="display: flex;flex-direction: row;margin-top: 20px;justify-content: space-between;margin-bottom: 40px;">
+            <div style="line-height: 25px;">
+                <div style="font-weight: bold;font-size: 16px;color: #242424;">
+                    {{ __('shop::app.mail.order.shipping-address') }}
+                </div>
+
+                <div>
+                    {{ $order->shipping_address->company_name ?? '' }}
+                </div>
+
+                <div>
+                    {{ $order->shipping_address->name }}
+                </div>
+
+                <div>
+                    {{ $order->shipping_address->address1 }}, {{ $order->shipping_address->state }}
+                </div>
+
+                <div>
+                    {{ core()->country_name($order->shipping_address->country) }} {{ $order->shipping_address->postcode }}
+                </div>
+
+                <div>---</div>
+
+                <div style="margin-bottom: 40px;">
+                    {{ __('shop::app.mail.order.contact') }} : {{ $order->shipping_address->phone }}
+                </div>
+
+                <div style="font-weight: bold;font-size: 16px;color: #242424;">
+                    {{ __('shop::app.mail.order.shipping') }}
+                </div>
+
+                <div style="font-size: 16px;color: #242424;">
+                    <div style="font-weight: bold;">
+                        {{ $order->shipping_title }}
+                    </div>
+
+                    <div style="margin-top: 5px;">
+                        <span style="font-weight: bold;">{{ __('shop::app.mail.shipment.carrier') }} : </span>{{ $shipment->carrier_title }}
+                    </div>
+
+                    <div style="margin-top: 5px;">
+                        <span style="font-weight: bold;">{{ __('shop::app.mail.shipment.tracking-number') }} : </span>{{ $shipment->track_number }}
+                    </div>
+                </div>
+            </div>
+
+            <div style="line-height: 25px;">
+                <div style="font-weight: bold;font-size: 16px;color: #242424;">
+                    {{ __('shop::app.mail.order.billing-address') }}
+                </div>
+
+                <div>
+                    {{ $order->billing_address->company_name ?? '' }}
+                </div>
+
+                <div>
+                    {{ $order->billing_address->name }}
+                </div>
+
+                <div>
+                    {{ $order->billing_address->address1 }}, {{ $order->billing_address->state }}
+                </div>
+
+                <div>
+                    {{ core()->country_name($order->billing_address->country) }} {{ $order->billing_address->postcode }}
+                </div>
+
+                <div>---</div>
+
+                <div style="margin-bottom: 40px;">
+                    {{ __('shop::app.mail.order.contact') }} : {{ $order->billing_address->phone }}
+                </div>
+
+                <div style="font-weight: bold; font-size: 16px; color: #242424;">
+                    {{ __('shop::app.mail.order.payment') }}
+                </div>
+
+                <div style="font-weight: bold; font-size: 16px; color: #242424;">
+                    {{ core()->getConfigData('sales.paymentmethods.' . $order->payment->method . '.title') }}
+                </div>
+            </div>
+        </div>
+
+        <div class="section-content">
+            <div class="table mb-20">
+                <table style="overflow-x: auto; border-collapse: collapse;
+                border-spacing: 0;width: 100%">
+                    <thead>
+                        <tr style="background-color: #f2f2f2">
+                            <th style="text-align: left;padding: 8px">{{ __('shop::app.customer.account.order.view.SKU') }}</th>
+                            <th style="text-align: left;padding: 8px">{{ __('shop::app.customer.account.order.view.product-name') }}</th>
+                            <th style="text-align: left;padding: 8px">{{ __('shop::app.customer.account.order.view.price') }}</th>
+                            <th style="text-align: left;padding: 8px">{{ __('shop::app.customer.account.order.view.qty') }}</th>
+                        </tr>
+                    </thead>
+
+                    <tbody>
+                        @foreach ($shipment->items as $item)
+                            <tr>
+                                <td data-value="{{ __('shop::app.customer.account.order.view.SKU') }}" style="text-align: left;padding: 8px">{{ $item->sku }}</td>
+
+                                <td data-value="{{ __('shop::app.customer.account.order.view.product-name') }}" style="text-align: left;padding: 8px">
+                                    {{ $item->name }}
+
+                                    @if (isset($item->additional['attributes']))
+                                        <div class="item-options">
+
+                                            @foreach ($item->additional['attributes'] as $attribute)
+                                                <b>{{ $attribute['attribute_name'] }} : </b>{{ $attribute['option_label'] }}</br>
+                                            @endforeach
+
+                                        </div>
+                                    @endif
+                                </td>
+
+                                <td data-value="{{ __('shop::app.customer.account.order.view.price') }}" style="text-align: left;padding: 8px">{{ core()->formatPrice($item->price, $order->order_currency_code) }}</td>
+
+                                <td data-value="{{ __('shop::app.customer.account.order.view.qty') }}" style="text-align: left;padding: 8px">{{ $item->qty }}</td>
+                            </tr>
+                        @endforeach
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        {{-- <div style="margin-top: 20px;font-size: 16px;color: #5E5E5E;line-height: 24px;display: inline-block;width: 100%">
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {!!
+                    __('shop::app.mail.order.help', [
+                        'support_email' => '<a style="color:#0041FF" href="mailto:' . config('mail.from.address') . '">' . config('mail.from.address'). '</a>'
+                        ])
+                !!}
+            </p>
+        </div> --}}
+    </div>
+@endcomponent
\ No newline at end of file
diff --git a/resources/themes/shop/views/emails/sales/new-invoice.blade.php b/resources/themes/shop/views/emails/sales/new-invoice.blade.php
new file mode 100644
index 000000000..6a1b71ce5
--- /dev/null
+++ b/resources/themes/shop/views/emails/sales/new-invoice.blade.php
@@ -0,0 +1,211 @@
+@component('shop::emails.layouts.master')
+    <div style="text-align: center;">
+        <a href="{{ config('app.url') }}">
+            @include ('shop::emails.layouts.logo')
+        </a>
+    </div>
+
+    <?php $order = $invoice->order; ?>
+
+    <div style="padding: 30px;">
+        <div style="font-size: 20px;color: #242424;line-height: 30px;margin-bottom: 34px;">
+            <span style="font-weight: bold;">
+                {{ __('shop::app.mail.invoice.heading', ['order_id' => $order->increment_id, 'invoice_id' => $invoice->id]) }}
+            </span> <br>
+
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {{ __('shop::app.mail.order.dear', ['customer_name' => $order->customer_full_name]) }},
+            </p>
+
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {!! __('shop::app.mail.order.greeting', [
+                    'order_id' => '<a href="' . route('customer.orders.view', $order->id) . '" style="color: #0041FF; font-weight: bold;">#' . $order->increment_id . '</a>',
+                    'created_at' => $order->created_at
+                    ])
+                !!}
+            </p>
+        </div>
+
+        <div style="font-weight: bold;font-size: 20px;color: #242424;line-height: 30px;margin-bottom: 20px !important;">
+            {{ __('shop::app.mail.invoice.summary') }}
+        </div>
+
+        <div
+            style="display: flex;flex-direction: row;margin-top: 20px;justify-content: space-between;margin-bottom: 40px;">
+            @if ($order->shipping_address)
+                <div style="line-height: 25px;">
+                    <div style="font-weight: bold;font-size: 16px;color: #242424;">
+                        {{ __('shop::app.mail.order.shipping-address') }}
+                    </div>
+
+                    <div>
+                        {{ $order->shipping_address->company_name ?? '' }}
+                    </div>
+
+                    <div>
+                        {{ $order->shipping_address->name }}
+                    </div>
+
+                    <div>
+                        {{ $order->shipping_address->address1 }}, {{ $order->shipping_address->state }}
+                    </div>
+
+                    <div>
+                        {{ core()->country_name($order->shipping_address->country) }} {{ $order->shipping_address->postcode }}
+                    </div>
+
+                    <div>---</div>
+
+                    <div style="margin-bottom: 40px;">
+                        {{ __('shop::app.mail.order.contact') }} : {{ $order->shipping_address->phone }}
+                    </div>
+
+                    <div style="font-size: 16px;color: #242424;">
+                        {{ __('shop::app.mail.order.shipping') }}
+                    </div>
+
+                    <div style="font-weight: bold;font-size: 16px;color: #242424;">
+                        {{ $order->shipping_title }}
+                    </div>
+                </div>
+            @endif
+
+            <div style="line-height: 25px;">
+                <div style="font-weight: bold;font-size: 16px;color: #242424;">
+                    {{ __('shop::app.mail.order.billing-address') }}
+                </div>
+
+                <div>
+                    {{ $order->billing_address->company_name ?? '' }}
+                </div>
+
+                <div>
+                    {{ $order->billing_address->name }}
+                </div>
+
+                <div>
+                    {{ $order->billing_address->address1 }}, {{ $order->billing_address->state }}
+                </div>
+
+                <div>
+                    {{ core()->country_name($order->billing_address->country) }} {{ $order->billing_address->postcode }}
+                </div>
+
+                <div>---</div>
+
+                <div style="margin-bottom: 40px;">
+                    {{ __('shop::app.mail.order.contact') }} : {{ $order->billing_address->phone }}
+                </div>
+
+                <div style="font-size: 16px; color: #242424;">
+                    {{ __('shop::app.mail.order.payment') }}
+                </div>
+
+                <div style="font-weight: bold;font-size: 16px; color: #242424;">
+                    {{ core()->getConfigData('sales.paymentmethods.' . $order->payment->method . '.title') }}
+                </div>
+            </div>
+        </div>
+
+        <div class="section-content">
+            <div class="table mb-20">
+                <table style="overflow-x: auto; border-collapse: collapse;
+                border-spacing: 0;width: 100%">
+                    <thead>
+                    <tr style="background-color: #f2f2f2">
+                        <th style="text-align: left;padding: 8px">{{ __('shop::app.customer.account.order.view.product-name') }}</th>
+                        <th style="text-align: left;padding: 8px">{{ __('shop::app.customer.account.order.view.price') }}</th>
+                        <th style="text-align: left;padding: 8px">{{ __('shop::app.customer.account.order.view.qty') }}</th>
+                    </tr>
+                    </thead>
+
+                    <tbody>
+                    @foreach ($invoice->items as $item)
+                        <tr>
+                            <td data-value="{{ __('shop::app.customer.account.order.view.product-name') }}"
+                                style="text-align: left;padding: 8px">
+                                {{ $item->name }}
+
+                                @if (isset($item->additional['attributes']))
+                                    <div class="item-options">
+
+                                        @foreach ($item->additional['attributes'] as $attribute)
+                                            <b>{{ $attribute['attribute_name'] }}
+                                                : </b>{{ $attribute['option_label'] }}</br>
+                                        @endforeach
+
+                                    </div>
+                                @endif
+                            </td>
+
+                            <td data-value="{{ __('shop::app.customer.account.order.view.price') }}"
+                                style="text-align: left;padding: 8px">{{ core()->formatPrice($item->price, $order->order_currency_code) }}
+                            </td>
+
+                            <td data-value="{{ __('shop::app.customer.account.order.view.qty') }}"
+                                style="text-align: left;padding: 8px">{{ $item->qty }}</td>
+                        </tr>
+
+                    @endforeach
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <div style="font-size: 16px;color: #242424;line-height: 30px;float: right;width: 40%;margin-top: 20px;">
+            <div>
+                <span>{{ __('shop::app.mail.order.subtotal') }}</span>
+                <span style="float: right;">
+                    {{ core()->formatPrice($invoice->sub_total, $invoice->order_currency_code) }}
+                </span>
+            </div>
+
+            @if ($order->shipping_address)
+                <div>
+                    <span>{{ __('shop::app.mail.order.shipping-handling') }}</span>
+                    <span style="float: right;">
+                        {{ core()->formatPrice($invoice->shipping_amount, $invoice->order_currency_code) }}
+                    </span>
+                </div>
+            @endif
+
+            <div>
+                <span>{{ __('shop::app.mail.order.tax') }}</span>
+                <span id="taxamount" style="float: right;">
+                    {{ core()->formatPrice($invoice->tax_amount, $order->order_currency_code) }}
+                </span>
+            </div>
+
+            @if ($invoice->discount_amount > 0)
+                <div>
+                    <span>{{ __('shop::app.mail.order.discount') }}</span>
+                    <span style="float: right;">
+                        {{ core()->formatPrice($invoice->discount_amount, $invoice->order_currency_code) }}
+                    </span>
+                </div>
+            @endif
+
+            <div style="font-weight: bold">
+                <span>{{ __('shop::app.mail.order.grand-total') }}</span>
+                <span style="float: right;">
+                    {{ core()->formatPrice($invoice->grand_total, $invoice->order_currency_code) }}
+                </span>
+            </div>
+        </div>
+
+        <div
+            style="margin-top: 65px;font-size: 16px;color: #5E5E5E;line-height: 24px;display: inline-block;width: 100%">
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {!!
+                    __('shop::app.mail.order.help', [
+                        'support_email' => '<a style="color:#0041FF" href="mailto:' . config('mail.from.address') . '">' . config('mail.from.address'). '</a>'
+                        ])
+                !!}
+            </p>
+
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {{ __('shop::app.mail.order.thanks') }}
+            </p>
+        </div>
+    </div>
+@endcomponent
diff --git a/resources/themes/shop/views/emails/sales/new-order-comment.blade.php b/resources/themes/shop/views/emails/sales/new-order-comment.blade.php
new file mode 100644
index 000000000..0d8c19672
--- /dev/null
+++ b/resources/themes/shop/views/emails/sales/new-order-comment.blade.php
@@ -0,0 +1,35 @@
+@component('shop::emails.layouts.master')
+    <div style="text-align: center;">
+        <a href="{{ config('app.url') }}">
+            @include ('shop::emails.layouts.logo')
+        </a>
+    </div>
+
+    <div style="padding: 30px;">
+        <div style="font-size: 20px;color: #242424;line-height: 30px;margin-bottom: 34px;">
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {{ __('shop::app.mail.order.comment.dear', ['customer_name' => $comment->order->customer_full_name]) }},
+            </p>
+        </div>
+
+        <div style="line-height: 30px;margin-bottom: 20px !important;">
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;font-style: italic;">
+                {{ $comment->comment }}
+            </p>
+        </div>
+
+        <div style="margin-top: 20px;font-size: 16px;color: #5E5E5E;line-height: 24px;display: inline-block">
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {!!
+                    __('shop::app.mail.order.comment.help', [
+                        'support_email' => '<a style="color:#0041FF" href="mailto:' . config('mail.from.address') . '">' . config('mail.from.address'). '</a>'
+                        ])
+                !!}
+            </p>
+
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {{ __('shop::app.mail.order.comment.thanks') }}
+            </p>
+        </div>
+    </div>
+@endcomponent
diff --git a/resources/themes/shop/views/emails/sales/new-order.blade.php b/resources/themes/shop/views/emails/sales/new-order.blade.php
new file mode 100644
index 000000000..2db328e2b
--- /dev/null
+++ b/resources/themes/shop/views/emails/sales/new-order.blade.php
@@ -0,0 +1,220 @@
+@component('shop::emails.layouts.master')
+    <div style="text-align: center;">
+        <a href="{{ config('app.url') }}">
+            @include ('shop::emails.layouts.logo')
+        </a>
+    </div>
+
+    <div style="padding: 30px;">
+        <div style="font-size: 20px;color: #242424;line-height: 30px;margin-bottom: 34px;">
+            <span style="font-weight: bold;">
+                {{ __('shop::app.mail.order.heading') }}
+            </span> <br>
+
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {{ __('shop::app.mail.order.dear', ['customer_name' => $order->customer_full_name]) }},
+            </p>
+
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {!! __('shop::app.mail.order.greeting', [
+                    'order_id' => '<a href="' . route('customer.orders.view', $order->id) . '" style="color: #0041FF; font-weight: bold;">#' . $order->increment_id . '</a>',
+                    'created_at' => $order->created_at
+                    ])
+                !!}
+            </p>
+        </div>
+
+        <div style="font-weight: bold;font-size: 20px;color: #242424;line-height: 30px;margin-bottom: 20px !important;">
+            {{ __('shop::app.mail.order.summary') }}
+        </div>
+
+        <div style="display: flex;flex-direction: row;margin-top: 20px;justify-content: space-between;margin-bottom: 40px;">
+            @if ($order->shipping_address)
+                <div style="line-height: 25px;">
+                    <div style="font-weight: bold;font-size: 16px;color: #242424;">
+                        {{ __('shop::app.mail.order.shipping-address') }}
+                    </div>
+
+                    <div>
+                        {{ $order->shipping_address->company_name ?? '' }}
+                    </div>
+
+                    <div>
+                        {{ $order->shipping_address->name }}
+                    </div>
+
+                    <div>
+                        {{ $order->shipping_address->address1 }}, {{ $order->shipping_address->state }}
+                    </div>
+
+                    <div>
+                        {{ core()->country_name($order->shipping_address->country) }} {{ $order->shipping_address->postcode }}
+                    </div>
+
+                    <div>---</div>
+
+                    <div style="margin-bottom: 40px;">
+                        {{ __('shop::app.mail.order.contact') }} : {{ $order->shipping_address->phone }}
+                    </div>
+
+                    <div style="font-size: 16px;color: #242424;">
+                        {{ __('shop::app.mail.order.shipping') }}
+                    </div>
+
+                    <div style="font-weight: bold;font-size: 16px;color: #242424;">
+                        {{ $order->shipping_title }}
+                    </div>
+                </div>
+            @endif
+
+            <div style="line-height: 25px;">
+                <div style="font-weight: bold;font-size: 16px;color: #242424;">
+                    {{ __('shop::app.mail.order.billing-address') }}
+                </div>
+
+                <div>
+                    {{ $order->billing_address->company_name ?? '' }}
+                </div>
+
+                <div>
+                    {{ $order->billing_address->name }}
+                </div>
+
+                <div>
+                    {{ $order->billing_address->address1 }}, {{ $order->billing_address->state }}
+                </div>
+
+                <div>
+                    {{ core()->country_name($order->billing_address->country) }} {{ $order->billing_address->postcode }}
+                </div>
+
+                <div>---</div>
+
+                <div style="margin-bottom: 40px;">
+                    {{ __('shop::app.mail.order.contact') }} : {{ $order->billing_address->phone }}
+                </div>
+
+                <div style="font-size: 16px; color: #242424;">
+                    {{ __('shop::app.mail.order.payment') }}
+                </div>
+
+                <div style="font-weight: bold; font-size: 16px; color: #242424; margin-bottom: 20px;">
+                    {{ core()->getConfigData('sales.paymentmethods.' . $order->payment->method . '.title') }}
+                </div>
+
+                @php $additionalDetails = \Webkul\Payment\Payment::getAdditionalDetails($order->payment->method); @endphp
+
+                @if (! empty($additionalDetails))
+                    <div style="font-size: 16px; color: #242424;">
+                        <div>{{ $additionalDetails['title'] }}</div>
+                        <div>{{ $additionalDetails['value'] }}</div>
+                    </div>
+                @endif
+            </div>
+        </div>
+
+        <div class="section-content">
+            <div class="table mb-20">
+                <table style="overflow-x: auto; border-collapse: collapse;
+                border-spacing: 0;width: 100%">
+                    <thead>
+                        <tr style="background-color: #f2f2f2">
+                            <th style="text-align: left;padding: 8px">{{ __('shop::app.customer.account.order.view.SKU') }}</th>
+                            <th style="text-align: left;padding: 8px">{{ __('shop::app.customer.account.order.view.product-name') }}</th>
+                            <th style="text-align: left;padding: 8px">{{ __('shop::app.customer.account.order.view.price') }}</th>
+                            <th style="text-align: left;padding: 8px">{{ __('shop::app.customer.account.order.view.qty') }}</th>
+                        </tr>
+                    </thead>
+
+                    <tbody>
+                        @foreach ($order->items as $item)
+                            <tr>
+                                <td data-value="{{ __('shop::app.customer.account.order.view.SKU') }}" style="text-align: left;padding: 8px">{{ $item->getTypeInstance()->getOrderedItem($item)->sku }}</td>
+
+                                <td data-value="{{ __('shop::app.customer.account.order.view.product-name') }}" style="text-align: left;padding: 8px">
+                                    {{ $item->name }}
+
+                                    @if (isset($item->additional['attributes']))
+                                        <div class="item-options">
+
+                                            @foreach ($item->additional['attributes'] as $attribute)
+                                                <b>{{ $attribute['attribute_name'] }} : </b>{{ $attribute['option_label'] }}</br>
+                                            @endforeach
+
+                                        </div>
+                                    @endif
+                                </td>
+
+                                <td data-value="{{ __('shop::app.customer.account.order.view.price') }}" style="text-align: left;padding: 8px">{{ core()->formatPrice($item->price, $order->order_currency_code) }}
+                                </td>
+
+                                <td data-value="{{ __('shop::app.customer.account.order.view.qty') }}" style="text-align: left;padding: 8px">{{ $item->qty_ordered }}</td>
+                            </tr>
+                        @endforeach
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <div style="font-size: 16px;color: #242424;line-height: 30px;float: right;width: 40%;margin-top: 20px;">
+            <div>
+                <span>{{ __('shop::app.mail.order.subtotal') }}</span>
+                <span style="float: right;">
+                    {{ core()->formatPrice($order->sub_total, $order->order_currency_code) }}
+                </span>
+            </div>
+
+            @if ($order->shipping_address)
+                <div>
+                    <span>{{ __('shop::app.mail.order.shipping-handling') }}</span>
+                    <span style="float: right;">
+                        {{ core()->formatPrice($order->shipping_amount, $order->order_currency_code) }}
+                    </span>
+                </div>
+            @endif
+
+            @foreach (Webkul\Tax\Helpers\Tax::getTaxRatesWithAmount($order, false) as $taxRate => $taxAmount )
+                <div>
+                    <span id="taxrate-{{ core()->taxRateAsIdentifier($taxRate) }}">{{ __('shop::app.mail.order.tax') }} {{ $taxRate }} %</span>
+                    <span id="taxamount-{{ core()->taxRateAsIdentifier($taxRate) }}" style="float: right;">
+                        {{ core()->formatPrice($taxAmount, $order->order_currency_code) }}
+                    </span>
+                </div>
+            @endforeach
+
+            @if ($order->discount_amount > 0)
+                <div>
+                    <span>{{ __('shop::app.mail.order.discount') }}</span>
+                    <span style="float: right;">
+                        {{ core()->formatPrice($order->discount_amount, $order->order_currency_code) }}
+                    </span>
+                </div>
+            @endif
+
+            <div style="font-weight: bold">
+                <span>{{ __('shop::app.mail.order.grand-total') }}</span>
+                <span style="float: right;">
+                    {{ core()->formatPrice($order->grand_total, $order->order_currency_code) }}
+                </span>
+            </div>
+        </div>
+
+        <div style="margin-top: 65px;font-size: 16px;color: #5E5E5E;line-height: 24px;display: inline-block">
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {{ __('shop::app.mail.order.final-summary') }}
+            </p>
+
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {!!
+                    __('shop::app.mail.order.help', [
+                        'support_email' => '<a style="color:#0041FF" href="mailto:' . config('mail.from.address') . '">' . config('mail.from.address'). '</a>'
+                        ])
+                !!}
+            </p>
+
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {{ __('shop::app.mail.order.thanks') }}
+            </p>
+        </div>
+    </div>
+@endcomponent
diff --git a/resources/themes/shop/views/emails/sales/new-refund.blade.php b/resources/themes/shop/views/emails/sales/new-refund.blade.php
new file mode 100644
index 000000000..993108341
--- /dev/null
+++ b/resources/themes/shop/views/emails/sales/new-refund.blade.php
@@ -0,0 +1,230 @@
+@component('shop::emails.layouts.master')
+    <div style="text-align: center;">
+        <a href="{{ config('app.url') }}">
+            @include ('shop::emails.layouts.logo')
+        </a>
+    </div>
+
+    <?php $order = $refund->order; ?>
+
+    <div style="padding: 30px;">
+        <div style="font-size: 20px;color: #242424;line-height: 30px;margin-bottom: 34px;">
+            <span style="font-weight: bold;">
+                {{ __('shop::app.mail.refund.heading', ['order_id' => $order->increment_id, 'refund_id' => $refund->id]) }}
+            </span> <br>
+
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {{ __('shop::app.mail.order.dear', ['customer_name' => $order->customer_full_name]) }},
+            </p>
+
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {!! __('shop::app.mail.order.greeting', [
+                    'order_id' => '<a href="' . route('customer.orders.view', $order->id) . '" style="color: #0041FF; font-weight: bold;">#' . $order->increment_id . '</a>',
+                    'created_at' => $order->created_at
+                    ])
+                !!}
+            </p>
+        </div>
+
+        <div style="font-weight: bold;font-size: 20px;color: #242424;line-height: 30px;margin-bottom: 20px !important;">
+            {{ __('shop::app.mail.refund.summary') }}
+        </div>
+
+        <div style="display: flex;flex-direction: row;margin-top: 20px;justify-content: space-between;margin-bottom: 40px;">
+            @if ($order->shipping_address)
+                <div style="line-height: 25px;">
+                    <div style="font-weight: bold;font-size: 16px;color: #242424;">
+                        {{ __('shop::app.mail.order.shipping-address') }}
+                    </div>
+
+                    <div>
+                        {{ $order->shipping_address->company_name ?? '' }}
+                    </div>
+
+                    <div>
+                        {{ $order->shipping_address->name }}
+                    </div>
+
+                    <div>
+                        {{ $order->shipping_address->address1 }}, {{ $order->shipping_address->state }}
+                    </div>
+
+                    <div>
+                        {{ core()->country_name($order->shipping_address->country) }} {{ $order->shipping_address->postcode }}
+                    </div>
+
+                    <div>---</div>
+
+                    <div style="margin-bottom: 40px;">
+                        {{ __('shop::app.mail.order.contact') }} : {{ $order->shipping_address->phone }}
+                    </div>
+
+                    <div style="font-size: 16px;color: #242424;">
+                        {{ __('shop::app.mail.order.shipping') }}
+                    </div>
+
+                    <div style="font-weight: bold;font-size: 16px;color: #242424;">
+                        {{ $order->shipping_title }}
+                    </div>
+                </div>
+            @endif
+
+            <div style="line-height: 25px;">
+                <div style="font-weight: bold;font-size: 16px;color: #242424;">
+                    {{ __('shop::app.mail.order.billing-address') }}
+                </div>
+
+                <div>
+                    {{ $order->billing_address->company_name ?? '' }}
+                </div>
+
+                <div>
+                    {{ $order->billing_address->name }}
+                </div>
+
+                <div>
+                    {{ $order->billing_address->address1 }}, {{ $order->billing_address->state }}
+                </div>
+
+                <div>
+                    {{ core()->country_name($order->billing_address->country) }} {{ $order->billing_address->postcode }}
+                </div>
+
+                <div>---</div>
+
+                <div style="margin-bottom: 40px;">
+                    {{ __('shop::app.mail.order.contact') }} : {{ $order->billing_address->phone }}
+                </div>
+
+                <div style="font-size: 16px; color: #242424;">
+                    {{ __('shop::app.mail.order.payment') }}
+                </div>
+
+                <div style="font-weight: bold;font-size: 16px; color: #242424;">
+                    {{ core()->getConfigData('sales.paymentmethods.' . $order->payment->method . '.title') }}
+                </div>
+            </div>
+        </div>
+
+        <div class="section-content">
+            <div class="table mb-20">
+                <table style="overflow-x: auto; border-collapse: collapse;
+                border-spacing: 0;width: 100%">
+                    <thead>
+                        <tr style="background-color: #f2f2f2">
+                            <th style="text-align: left;padding: 8px">{{ __('shop::app.customer.account.order.view.product-name') }}</th>
+                            <th style="text-align: left;padding: 8px">{{ __('shop::app.customer.account.order.view.price') }}</th>
+                            <th style="text-align: left;padding: 8px">{{ __('shop::app.customer.account.order.view.qty') }}</th>
+                        </tr>
+                    </thead>
+
+                    <tbody>
+                        @foreach ($refund->items as $item)
+                            <tr>
+                                <td data-value="{{ __('shop::app.customer.account.order.view.product-name') }}" style="text-align: left;padding: 8px">
+                                    {{ $item->name }}
+
+                                    @if (isset($item->additional['attributes']))
+                                        <div class="item-options">
+
+                                            @foreach ($item->additional['attributes'] as $attribute)
+                                                <b>{{ $attribute['attribute_name'] }} : </b>{{ $attribute['option_label'] }}</br>
+                                            @endforeach
+
+                                        </div>
+                                    @endif
+                                </td>
+
+                                <td data-value="{{ __('shop::app.customer.account.order.view.price') }}" style="text-align: left;padding: 8px">
+                                    {{ core()->formatPrice($item->price, $order->order_currency_code) }}
+                                </td>
+
+                                <td data-value="{{ __('shop::app.customer.account.order.view.qty') }}" style="text-align: left;padding: 8px">
+                                    {{ $item->qty }}
+                                </td>
+                            </tr>
+
+                        @endforeach
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <div style="font-size: 16px;color: #242424;line-height: 30px;float: right;width: 40%;margin-top: 20px;">
+            <div>
+                <span>{{ __('shop::app.mail.order.subtotal') }}</span>
+                <span style="float: right;">
+                    {{ core()->formatPrice($refund->sub_total, $refund->order_currency_code) }}
+                </span>
+            </div>
+
+            @if ($order->shipping_address)
+                <div>
+                    <span>{{ __('shop::app.mail.order.shipping-handling') }}</span>
+                    <span style="float: right;">
+                        {{ core()->formatPrice($refund->shipping_amount, $refund->order_currency_code) }}
+                    </span>
+                </div>
+            @endif
+
+            @if ($refund->tax_amount > 0)
+                @foreach (Webkul\Tax\Helpers\Tax::getTaxRatesWithAmount($refund, false) as $taxRate => $taxAmount)
+                <div>
+                    <span>{{ __('shop::app.mail.order.tax') }}</span>
+                    <span style="float: right;">
+                        {{ core()->formatPrice($refund->tax_amount, $refund->order_currency_code) }}
+                    </span>
+                </div>
+                @endforeach
+            @endif
+
+            @if ($refund->discount_amount > 0)
+                <div>
+                    <span>{{ __('shop::app.mail.order.discount') }}</span>
+                    <span style="float: right;">
+                        {{ core()->formatPrice($refund->discount_amount, $refund->order_currency_code) }}
+                    </span>
+                </div>
+            @endif
+
+            @if ($refund->adjustment_refund > 0)
+                <div>
+                    <span>{{ __('shop::app.mail.refund.adjustment-refund') }}</span>
+                    <span style="float: right;">
+                        {{ core()->formatPrice($refund->adjustment_refund, $refund->order_currency_code) }}
+                    </span>
+                </div>
+            @endif
+
+            @if ($refund->adjustment_fee > 0)
+                <div>
+                    <span>{{ __('shop::app.mail.refund.adjustment-fee') }}</span>
+                    <span style="float: right;">
+                        {{ core()->formatPrice($refund->adjustment_fee, $refund->order_currency_code) }}
+                    </span>
+                </div>
+            @endif
+
+            <div style="font-weight: bold">
+                <span>{{ __('shop::app.mail.order.grand-total') }}</span>
+                <span style="float: right;">
+                    {{ core()->formatPrice($refund->grand_total, $refund->order_currency_code) }}
+                </span>
+            </div>
+        </div>
+
+        <div style="margin-top: 65px;font-size: 16px;color: #5E5E5E;line-height: 24px;display: inline-block;width: 100%">
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {!!
+                    __('shop::app.mail.order.help', [
+                        'support_email' => '<a style="color:#0041FF" href="mailto:' . config('mail.from.address') . '">' . config('mail.from.address'). '</a>'
+                        ])
+                !!}
+            </p>
+
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {{ __('shop::app.mail.order.thanks') }}
+            </p>
+        </div>
+    </div>
+@endcomponent
diff --git a/resources/themes/shop/views/emails/sales/new-shipment.blade.php b/resources/themes/shop/views/emails/sales/new-shipment.blade.php
new file mode 100644
index 000000000..10d93391d
--- /dev/null
+++ b/resources/themes/shop/views/emails/sales/new-shipment.blade.php
@@ -0,0 +1,174 @@
+@component('shop::emails.layouts.master')
+    <div style="text-align: center;">
+        <a href="{{ config('app.url') }}">
+            @include ('shop::emails.layouts.logo')
+        </a>
+    </div>
+
+    <?php $order = $shipment->order; ?>
+
+    <div style="padding: 30px;">
+        <div style="font-size: 20px;color: #242424;line-height: 30px;margin-bottom: 34px;">
+            <span style="font-weight: bold;">
+                {{ __('shop::app.mail.shipment.heading', ['order_id' => $order->increment_id, 'shipment_id' => $shipment->id]) }}
+            </span> <br>
+
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {{ __('shop::app.mail.order.dear', ['customer_name' => $order->customer_full_name]) }},
+            </p>
+
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {!! __('shop::app.mail.order.greeting', [
+                    'order_id' => '<a href="' . route('customer.orders.view', $order->id) . '" style="color: #0041FF; font-weight: bold;">#' . $order->increment_id . '</a>',
+                    'created_at' => $order->created_at
+                    ])
+                !!}
+            </p>
+        </div>
+
+        <div style="font-weight: bold;font-size: 20px;color: #242424;line-height: 30px;margin-bottom: 20px !important;">
+            {{ __('shop::app.mail.shipment.summary') }}
+        </div>
+
+        <div style="display: flex;flex-direction: row;margin-top: 20px;justify-content: space-between;margin-bottom: 40px;">
+            <div style="line-height: 25px;">
+                <div style="font-weight: bold;font-size: 16px;color: #242424;">
+                    {{ __('shop::app.mail.order.shipping-address') }}
+                </div>
+
+                <div>
+                    {{ $order->shipping_address->company_name ?? '' }}
+                </div>
+
+                <div>
+                    {{ $order->shipping_address->name }}
+                </div>
+
+                <div>
+                    {{ $order->shipping_address->address1 }}, {{ $order->shipping_address->state }}
+                </div>
+
+                <div>
+                    {{ core()->country_name($order->shipping_address->country) }} {{ $order->shipping_address->postcode }}
+                </div>
+
+                <div>---</div>
+
+                <div style="margin-bottom: 40px;">
+                    {{ __('shop::app.mail.order.contact') }} : {{ $order->shipping_address->phone }}
+                </div>
+
+                <div style="font-weight: bold;font-size: 16px;color: #242424;">
+                    {{ __('shop::app.mail.order.shipping') }}
+                </div>
+
+                <div style="font-size: 16px;color: #242424;">
+                    <div style="font-weight: bold;">
+                        {{ $order->shipping_title }}
+                    </div>
+
+                    <div style="margin-top: 5px;">
+                        <span style="font-weight: bold;">{{ __('shop::app.mail.shipment.carrier') }} : </span>{{ $shipment->carrier_title }}
+                    </div>
+
+                    <div style="margin-top: 5px;">
+                        <span style="font-weight: bold;">{{ __('shop::app.mail.shipment.tracking-number') }} : </span>{{ $shipment->track_number }}
+                    </div>
+                </div>
+            </div>
+
+            <div style="line-height: 25px;">
+                <div style="font-weight: bold;font-size: 16px;color: #242424;">
+                    {{ __('shop::app.mail.order.billing-address') }}
+                </div>
+
+                <div>
+                    {{ $order->billing_address->company_name ?? '' }}
+                </div>
+
+                <div>
+                    {{ $order->billing_address->name }}
+                </div>
+
+                <div>
+                    {{ $order->billing_address->address1 }}, {{ $order->billing_address->state }}
+                </div>
+
+                <div>
+                    {{ core()->country_name($order->billing_address->country) }} {{ $order->billing_address->postcode }}
+                </div>
+
+                <div>---</div>
+
+                <div style="margin-bottom: 40px;">
+                    {{ __('shop::app.mail.order.contact') }} : {{ $order->billing_address->phone }}
+                </div>
+
+                <div style="font-weight: bold; font-size: 16px; color: #242424;">
+                    {{ __('shop::app.mail.order.payment') }}
+                </div>
+
+                <div style="font-weight: bold; font-size: 16px; color: #242424;">
+                    {{ core()->getConfigData('sales.paymentmethods.' . $order->payment->method . '.title') }}
+                </div>
+            </div>
+        </div>
+
+        <div class="section-content">
+            <div class="table mb-20">
+                <table style="overflow-x: auto; border-collapse: collapse;
+                border-spacing: 0;width: 100%">
+                    <thead>
+                        <tr style="background-color: #f2f2f2">
+                            <th style="text-align: left;padding: 8px">{{ __('shop::app.customer.account.order.view.SKU') }}</th>
+                            <th style="text-align: left;padding: 8px">{{ __('shop::app.customer.account.order.view.product-name') }}</th>
+                            <th style="text-align: left;padding: 8px">{{ __('shop::app.customer.account.order.view.price') }}</th>
+                            <th style="text-align: left;padding: 8px">{{ __('shop::app.customer.account.order.view.qty') }}</th>
+                        </tr>
+                    </thead>
+
+                    <tbody>
+                        @foreach ($shipment->items as $item)
+                            <tr>
+                                <td data-value="{{ __('shop::app.customer.account.order.view.SKU') }}" style="text-align: left;padding: 8px">{{ $item->sku }}</td>
+
+                                <td data-value="{{ __('shop::app.customer.account.order.view.product-name') }}" style="text-align: left;padding: 8px">
+                                    {{ $item->name }}
+
+                                    @if (isset($item->additional['attributes']))
+                                        <div class="item-options">
+
+                                            @foreach ($item->additional['attributes'] as $attribute)
+                                                <b>{{ $attribute['attribute_name'] }} : </b>{{ $attribute['option_label'] }}</br>
+                                            @endforeach
+
+                                        </div>
+                                    @endif
+                                </td>
+
+                                <td data-value="{{ __('shop::app.customer.account.order.view.price') }}" style="text-align: left;padding: 8px">{{ core()->formatPrice($item->price, $order->order_currency_code) }}</td>
+
+                                <td data-value="{{ __('shop::app.customer.account.order.view.qty') }}" style="text-align: left;padding: 8px">{{ $item->qty }}</td>
+                            </tr>
+
+                        @endforeach
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <div style="margin-top: 20px;font-size: 16px;color: #5E5E5E;line-height: 24px;display: inline-block;width: 100%">
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {!!
+                    __('shop::app.mail.order.help', [
+                        'support_email' => '<a style="color:#0041FF" href="mailto:' . config('mail.from.address') . '">' . config('mail.from.address'). '</a>'
+                        ])
+                !!}
+            </p>
+
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {{ __('shop::app.mail.order.thanks') }}
+            </p>
+        </div>
+    </div>
+@endcomponent
\ No newline at end of file
diff --git a/resources/themes/shop/views/emails/sales/order-cancel-admin.blade.php b/resources/themes/shop/views/emails/sales/order-cancel-admin.blade.php
new file mode 100644
index 000000000..b768036de
--- /dev/null
+++ b/resources/themes/shop/views/emails/sales/order-cancel-admin.blade.php
@@ -0,0 +1,212 @@
+@component('shop::emails.layouts.master')
+    <div style="text-align: center;">
+        <a href="{{ config('app.url') }}">
+            @if (core()->getConfigData('general.design.admin_logo.logo_image'))
+                <img src="{{ \Illuminate\Support\Facades\Storage::url(core()->getConfigData('general.design.admin_logo.logo_image')) }}" alt="{{ config('app.name') }}" style="height: 40px; width: 110px;"/>
+            @else
+                <img src="{{ asset('vendor/webkul/ui/assets/images/logo.png') }}" alt="{{ config('app.name') }}"/>
+            @endif
+        </a>
+    </div>
+
+    <div style="padding: 30px;">
+        <div style="font-size: 20px;color: #242424;line-height: 30px;margin-bottom: 34px;">
+            <span style="font-weight: bold;">
+                {{ __('shop::app.mail.order.cancel.heading') }}
+            </span> <br>
+
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {{ __('shop::app.mail.order.cancel.dear', ['customer_name' => config('mail.from.name')]) }},
+            </p>
+
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {!! __('shop::app.mail.order.cancel.greeting', [
+                    'order_id' => '<a href="' . route('customer.orders.view', $order->id) . '" style="color: #0041FF; font-weight: bold;">#' . $order->increment_id . '</a>',
+                    'created_at' => $order->created_at
+                    ])
+                !!}
+            </p>
+        </div>
+
+        <div style="font-weight: bold;font-size: 20px;color: #242424;line-height: 30px;margin-bottom: 20px !important;">
+            {{ __('shop::app.mail.order.cancel.summary') }}
+        </div>
+
+        <div style="display: flex;flex-direction: row;margin-top: 20px;justify-content: space-between;margin-bottom: 40px;">
+            <div style="line-height: 25px;">
+                <div style="font-weight: bold;font-size: 16px;color: #242424;">
+                    {{ __('shop::app.mail.order.cancel.shipping-address') }}
+                </div>
+
+                <div>
+                    {{ $order->shipping_address->company_name ?? '' }}
+                </div>
+
+                <div>
+                    {{ $order->shipping_address->name }}
+                </div>
+
+                <div>
+                    {{ $order->shipping_address->address1 }}, {{ $order->shipping_address->state }}
+                </div>
+
+                <div>
+                    {{ core()->country_name($order->shipping_address->country) }} {{ $order->shipping_address->postcode }}
+                </div>
+
+                <div>---</div>
+
+                <div style="margin-bottom: 40px;">
+                    {{ __('shop::app.mail.order.cancel.contact') }} : {{ $order->shipping_address->phone }}
+                </div>
+
+                <div style="font-size: 16px;color: #242424; font-weight: bold">
+                    {{ __('shop::app.mail.order.cancel.shipping') }}
+                </div>
+
+                <div style="font-size: 16px;color: #242424;">
+                    {{ $order->shipping_title }}
+                </div>
+            </div>
+
+            <div style="line-height: 25px;">
+                <div style="font-weight: bold;font-size: 16px;color: #242424;">
+                    {{ __('shop::app.mail.order.cancel.billing-address') }}
+                </div>
+
+                <div>
+                    {{ $order->billing_address->company_name ?? '' }}
+                </div>
+
+                <div>
+                    {{ $order->billing_address->name }}
+                </div>
+
+                <div>
+                    {{ $order->billing_address->address1 }}, {{ $order->billing_address->state }}
+                </div>
+
+                <div>
+                    {{ core()->country_name($order->billing_address->country) }} {{ $order->billing_address->postcode }}
+                </div>
+
+                <div>---</div>
+
+                <div style="margin-bottom: 40px;">
+                    {{ __('shop::app.mail.order.cancel.contact') }} : {{ $order->billing_address->phone }}
+                </div>
+
+                <div style="font-size: 16px; color: #242424; font-weight: bold">
+                    {{ __('shop::app.mail.order.cancel.payment') }}
+                </div>
+
+                <div style="font-size: 16px; color: #242424;">
+                    {{ core()->getConfigData('sales.paymentmethods.' . $order->payment->method . '.title') }}
+                </div>
+            </div>
+        </div>
+
+        <div class="section-content">
+            <div class="table mb-20">
+                <table style="overflow-x: auto; border-collapse: collapse;
+                border-spacing: 0;width: 100%">
+                    <thead>
+                    <tr style="background-color: #f2f2f2">
+                        <th style="text-align: left;padding: 8px">{{ __('shop::app.customer.account.order.view.SKU') }}</th>
+                        <th style="text-align: left;padding: 8px">{{ __('shop::app.customer.account.order.view.product-name') }}</th>
+                        <th style="text-align: left;padding: 8px">{{ __('shop::app.customer.account.order.view.price') }}</th>
+                        <th style="text-align: left;padding: 8px">{{ __('shop::app.customer.account.order.view.qty') }}</th>
+                    </tr>
+                    </thead>
+
+                    <tbody>
+                    @foreach ($order->items as $item)
+                        <tr>
+                            <td data-value="{{ __('shop::app.customer.account.order.view.SKU') }}" style="text-align: left;padding: 8px">
+                                {{ $item->child ? $item->child->sku : $item->sku }}
+                            </td>
+
+                            <td data-value="{{ __('shop::app.customer.account.order.view.product-name') }}" style="text-align: left;padding: 8px">
+                                {{ $item->name }}
+
+                                @if (isset($item->additional['attributes']))
+                                    <div class="item-options">
+
+                                        @foreach ($item->additional['attributes'] as $attribute)
+                                            <b>{{ $attribute['attribute_name'] }} : </b>{{ $attribute['option_label'] }}</br>
+                                        @endforeach
+
+                                    </div>
+                                @endif
+                            </td>
+
+                            <td data-value="{{ __('shop::app.customer.account.order.view.price') }}" style="text-align: left;padding: 8px">
+                                {{ core()->formatPrice($item->price, $order->order_currency_code) }}
+                            </td>
+
+                            <td data-value="{{ __('shop::app.customer.account.order.view.qty') }}" style="text-align: left;padding: 8px">
+                                {{ $item->qty_canceled }}
+                            </td>
+                        </tr>
+                    @endforeach
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <div style="font-size: 16px;color: #242424;line-height: 30px;float: right;width: 40%;margin-top: 20px;">
+            <div>
+                <span>{{ __('shop::app.mail.order.cancel.subtotal') }}</span>
+                <span style="float: right;">
+                    {{ core()->formatPrice($order->sub_total, $order->order_currency_code) }}
+                </span>
+            </div>
+
+            <div>
+                <span>{{ __('shop::app.mail.order.cancel.shipping-handling') }}</span>
+                <span style="float: right;">
+                    {{ core()->formatPrice($order->shipping_amount, $order->order_currency_code) }}
+                </span>
+            </div>
+
+            @foreach (Webkul\Tax\Helpers\Tax::getTaxRatesWithAmount($order, false) as $taxRate => $taxAmount )
+                <div>
+                    <span id="taxrate-{{ core()->taxRateAsIdentifier($taxRate) }}">{{ __('shop::app.mail.order.cancel.tax') }} {{ $taxRate }} %</span>
+                    <span id="taxamount-{{ core()->taxRateAsIdentifier($taxRate) }}" style="float: right;">
+                    {{ core()->formatPrice($taxAmount, $order->order_currency_code) }}
+                </span>
+                </div>
+            @endforeach
+
+            @if ($order->discount_amount > 0)
+                <div>
+                    <span>{{ __('shop::app.mail.order.cancel.discount') }}</span>
+                    <span style="float: right;">
+                        {{ core()->formatPrice($order->discount_amount, $order->order_currency_code) }}
+                    </span>
+                </div>
+            @endif
+
+            <div style="font-weight: bold">
+                <span>{{ __('shop::app.mail.order.cancel.grand-total') }}</span>
+                <span style="float: right;">
+                    {{ core()->formatPrice($order->grand_total, $order->order_currency_code) }}
+                </span>
+            </div>
+        </div>
+
+        <div style="margin-top: 65px;font-size: 16px;color: #5E5E5E;line-height: 24px;display: inline-block">
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {!!
+                    __('shop::app.mail.order.cancel.help', [
+                        'support_email' => '<a style="color:#0041FF" href="mailto:' . config('mail.from.address') . '">' . config('mail.from.address'). '</a>'
+                        ])
+                !!}
+            </p>
+
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {{ __('shop::app.mail.order.cancel.thanks') }}
+            </p>
+        </div>
+    </div>
+@endcomponent
\ No newline at end of file
diff --git a/resources/themes/shop/views/emails/sales/order-cancel.blade.php b/resources/themes/shop/views/emails/sales/order-cancel.blade.php
new file mode 100644
index 000000000..494c2747c
--- /dev/null
+++ b/resources/themes/shop/views/emails/sales/order-cancel.blade.php
@@ -0,0 +1,212 @@
+@component('shop::emails.layouts.master')
+    <div style="text-align: center;">
+        <a href="{{ config('app.url') }}">
+            @include ('shop::emails.layouts.logo')
+        </a>
+    </div>
+
+    <div style="padding: 30px;">
+        <div style="font-size: 20px;color: #242424;line-height: 30px;margin-bottom: 34px;">
+            <span style="font-weight: bold;">
+                {{ __('shop::app.mail.order.cancel.heading') }}
+            </span> <br>
+
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {{ __('shop::app.mail.order.cancel.dear', ['customer_name' => $order->customer_full_name]) }},
+            </p>
+
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {!! __('shop::app.mail.order.cancel.greeting', [
+                    'order_id' => '<a href="' . route('customer.orders.view', $order->id) . '" style="color: #0041FF; font-weight: bold;">#' . $order->increment_id . '</a>',
+                    'created_at' => $order->created_at
+                    ])
+                !!}
+            </p>
+        </div>
+
+        <div style="font-weight: bold;font-size: 20px;color: #242424;line-height: 30px;margin-bottom: 20px !important;">
+            {{ __('shop::app.mail.order.cancel.summary') }}
+        </div>
+
+        <div style="display: flex;flex-direction: row;margin-top: 20px;justify-content: space-between;margin-bottom: 40px;">
+            <div style="line-height: 25px;">
+                <div style="font-weight: bold;font-size: 16px;color: #242424;">
+                    {{ __('shop::app.mail.order.cancel.shipping-address') }}
+                </div>
+
+                <div>
+                    {{ $order->shipping_address->company_name ?? '' }}
+                </div>
+
+                <div>
+                    {{ $order->shipping_address->name }}
+                </div>
+
+                <div>
+                    {{ $order->shipping_address->address1 }}, {{ $order->shipping_address->state }}
+                </div>
+
+                <div>
+                    {{ core()->country_name($order->shipping_address->country) }} {{ $order->shipping_address->postcode }}
+                </div>
+
+                <div>---</div>
+
+                <div style="margin-bottom: 40px;">
+                    {{ __('shop::app.mail.order.cancel.contact') }} : {{ $order->shipping_address->phone }}
+                </div>
+
+                <div style="font-size: 16px;color: #242424; font-weight: bold">
+                    {{ __('shop::app.mail.order.cancel.shipping') }}
+                </div>
+
+                <div style="font-size: 16px;color: #242424;">
+                    {{ $order->shipping_title }}
+                </div>
+            </div>
+
+            <div style="line-height: 25px;">
+                <div style="font-weight: bold;font-size: 16px;color: #242424;">
+                    {{ __('shop::app.mail.order.cancel.billing-address') }}
+                </div>
+
+                <div>
+                    {{ $order->billing_address->company_name ?? '' }}
+                </div>
+
+                <div>
+                    {{ $order->billing_address->name }}
+                </div>
+
+                <div>
+                    {{ $order->billing_address->address1 }}, {{ $order->billing_address->state }}
+                </div>
+
+                <div>
+                    {{ core()->country_name($order->billing_address->country) }} {{ $order->billing_address->postcode }}
+                </div>
+
+                <div>---</div>
+
+                <div style="margin-bottom: 40px;">
+                    {{ __('shop::app.mail.order.cancel.contact') }} : {{ $order->billing_address->phone }}
+                </div>
+
+                <div style="font-size: 16px; color: #242424; font-weight: bold">
+                    {{ __('shop::app.mail.order.cancel.payment') }}
+                </div>
+
+                <div style="font-size: 16px; color: #242424;">
+                    {{ core()->getConfigData('sales.paymentmethods.' . $order->payment->method . '.title') }}
+                </div>
+            </div>
+        </div>
+
+        <div class="section-content">
+            <div class="table mb-20">
+                <table style="overflow-x: auto; border-collapse: collapse;
+                border-spacing: 0;width: 100%">
+                    <thead>
+                    <tr style="background-color: #f2f2f2">
+                        <th style="text-align: left;padding: 8px">{{ __('shop::app.customer.account.order.view.SKU') }}</th>
+                        <th style="text-align: left;padding: 8px">{{ __('shop::app.customer.account.order.view.product-name') }}</th>
+                        <th style="text-align: left;padding: 8px">{{ __('shop::app.customer.account.order.view.price') }}</th>
+                        <th style="text-align: left;padding: 8px">{{ __('shop::app.customer.account.order.view.qty') }}</th>
+                    </tr>
+                    </thead>
+
+                    <tbody>
+                    @foreach ($order->items as $item)
+                        <tr>
+                            <td data-value="{{ __('shop::app.customer.account.order.view.SKU') }}" style="text-align: left;padding: 8px">
+                                {{ $item->child ? $item->child->sku : $item->sku }}
+                            </td>
+
+                            <td data-value="{{ __('shop::app.customer.account.order.view.product-name') }}" style="text-align: left;padding: 8px">
+                                {{ $item->name }}
+
+                                @if (isset($item->additional['attributes']))
+                                    <div class="item-options">
+
+                                        @foreach ($item->additional['attributes'] as $attribute)
+                                            <b>{{ $attribute['attribute_name'] }} : </b>{{ $attribute['option_label'] }}</br>
+                                        @endforeach
+
+                                    </div>
+                                @endif
+                            </td>
+
+                            <td data-value="{{ __('shop::app.customer.account.order.view.price') }}" style="text-align: left;padding: 8px">
+                                {{ core()->formatPrice($item->price, $order->order_currency_code) }}
+                            </td>
+
+                            <td data-value="{{ __('shop::app.customer.account.order.view.qty') }}" style="text-align: left;padding: 8px">
+                                {{ $item->qty_canceled }}
+                            </td>
+                        </tr>
+                    @endforeach
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <div style="font-size: 16px;color: #242424;line-height: 30px;float: right;width: 40%;margin-top: 20px;">
+            <div>
+                <span>{{ __('shop::app.mail.order.cancel.subtotal') }}</span>
+                <span style="float: right;">
+                    {{ core()->formatPrice($order->sub_total, $order->order_currency_code) }}
+                </span>
+            </div>
+
+            <div>
+                <span>{{ __('shop::app.mail.order.cancel.shipping-handling') }}</span>
+                <span style="float: right;">
+                    {{ core()->formatPrice($order->shipping_amount, $order->order_currency_code) }}
+                </span>
+            </div>
+
+            @foreach (Webkul\Tax\Helpers\Tax::getTaxRatesWithAmount($order, false) as $taxRate => $taxAmount )
+                <div>
+                    <span id="taxrate-{{ core()->taxRateAsIdentifier($taxRate) }}">{{ __('shop::app.mail.order.cancel.tax') }} {{ $taxRate }} %</span>
+                    <span id="taxamount-{{ core()->taxRateAsIdentifier($taxRate) }}" style="float: right;">
+                    {{ core()->formatPrice($taxAmount, $order->order_currency_code) }}
+                </span>
+                </div>
+            @endforeach
+
+            @if ($order->discount_amount > 0)
+                <div>
+                    <span>{{ __('shop::app.mail.order.cancel.discount') }}</span>
+                    <span style="float: right;">
+                        {{ core()->formatPrice($order->discount_amount, $order->order_currency_code) }}
+                    </span>
+                </div>
+            @endif
+
+            <div style="font-weight: bold">
+                <span>{{ __('shop::app.mail.order.cancel.grand-total') }}</span>
+                <span style="float: right;">
+                    {{ core()->formatPrice($order->grand_total, $order->order_currency_code) }}
+                </span>
+            </div>
+        </div>
+
+        <div style="margin-top: 65px;font-size: 16px;color: #5E5E5E;line-height: 24px;display: inline-block">
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {{ __('shop::app.mail.order.cancel.final-summary') }}
+            </p>
+
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {!!
+                    __('shop::app.mail.order.cancel.help', [
+                        'support_email' => '<a style="color:#0041FF" href="mailto:' . config('mail.from.address') . '">' . config('mail.from.address'). '</a>'
+                        ])
+                !!}
+            </p>
+
+            <p style="font-size: 16px;color: #5E5E5E;line-height: 24px;">
+                {{ __('shop::app.mail.order.cancel.thanks') }}
+            </p>
+        </div>
+    </div>
+@endcomponent
diff --git a/resources/themes/shop/views/error.blade.php b/resources/themes/shop/views/error.blade.php
new file mode 100644
index 000000000..d78938fdb
--- /dev/null
+++ b/resources/themes/shop/views/error.blade.php
@@ -0,0 +1,19 @@
+@extends('shop::layouts.master')
+@section('content-wrapper')
+    <div class="error-container" style="width: 100%; display: flex; justify-content: center;">
+        <div class="wrapper" style="display: flex; height: 100vh; width: 80vw;
+    justify-content: space-between; align-items: center;">
+            <div class="error-box">
+                <div class="error-title">404</div>
+                <div class="error-messgae">Page Not Found</div>
+                <div class="error-description"></div>
+                <a href="url()->to('/')">GO TO HOME</a>
+                {{-- pass the content dynamically --}}
+                Show the exception here or error message here.
+            </div>
+
+        <div class="error-graphic" style="height: 236px; width: 255px; border: 1px solid red; background-image: url('.{{ asset('images.error') }}.')">
+        </div>
+        </div>
+    </div>
+@endsection
\ No newline at end of file
diff --git a/resources/themes/shop/views/errors/401.blade.php b/resources/themes/shop/views/errors/401.blade.php
new file mode 100644
index 000000000..f12e056c3
--- /dev/null
+++ b/resources/themes/shop/views/errors/401.blade.php
@@ -0,0 +1,38 @@
+@extends('shop::layouts.master')
+
+@section('page_title')
+    {{ __('admin::app.error.401.page-title') }}
+@stop
+
+@section('content-wrapper')
+
+    <div class="error-container" style="width: 100%; display: flex; justify-content: center;">
+
+        <div class="wrapper" style="display: flex; height: 60vh; width: 100%;
+            justify-content: start; align-items: center;">
+
+            <div class="error-box"  style="width: 50%">
+
+                <div class="error-title" style="font-size: 100px;color: #5E5E5E">  {{ __('admin::app.error.401.name') }}  </div>
+
+                <div class="error-messgae" style="font-size: 24px;color: #5E5E5E; margin-top: 40px;">
+                    {{ __('admin::app.error.401.title') }}
+                </div>
+
+                <div class="error-description" style="margin-top: 20px;margin-bottom: 20px;color: #242424">
+                    {{ __('admin::app.error.401.message') }}
+                </div>
+
+                <a href="{{ route('shop.home.index') }}">
+                    {{ __('admin::app.error.go-to-home') }}
+                </a>
+
+            </div>
+
+            <div class="error-graphic icon-404" style="margin-left: 10% ;"></div>
+
+        </div>
+
+    </div>
+
+@endsection
\ No newline at end of file
diff --git a/resources/themes/shop/views/errors/403.blade.php b/resources/themes/shop/views/errors/403.blade.php
new file mode 100644
index 000000000..6d61554d5
--- /dev/null
+++ b/resources/themes/shop/views/errors/403.blade.php
@@ -0,0 +1,38 @@
+@extends('shop::layouts.master')
+
+@section('page_title')
+    {{ __('admin::app.error.403.page-title') }}
+@stop
+
+@section('content-wrapper')
+
+    <div class="error-container" style="width: 100%; display: flex; justify-content: center;">
+
+        <div class="wrapper" style="display: flex; height: 60vh; width: 100%;
+            justify-content: start; align-items: center;">
+
+            <div class="error-box"  style="width: 50%">
+
+                <div class="error-title" style="font-size: 100px;color: #5E5E5E">  {{ __('admin::app.error.403.name') }}  </div>
+
+                <div class="error-messgae" style="font-size: 24px;color: #5E5E5E; margin-top: 40px">
+                    {{ __('admin::app.error.403.title') }}
+                </div>
+
+                <div class="error-description" style="margin-top: 20px;margin-bottom: 20px;color: #242424">
+                    {{ __('admin::app.error.403.message') }}
+                </div>
+
+                <a href="{{ route('shop.home.index') }}">
+                    {{ __('admin::app.error.go-to-home') }}
+                </a>
+
+            </div>
+
+            <div class="error-graphic icon-404" style="margin-left: 10% ;"></div>
+
+        </div>
+
+    </div>
+
+@endsection
\ No newline at end of file
diff --git a/resources/themes/shop/views/errors/404.blade.php b/resources/themes/shop/views/errors/404.blade.php
new file mode 100644
index 000000000..6f34dee9c
--- /dev/null
+++ b/resources/themes/shop/views/errors/404.blade.php
@@ -0,0 +1,40 @@
+@extends('shop::layouts.master')
+
+@section('page_title')
+    {{ __('admin::app.error.404.page-title') }}
+@stop
+
+@section('content-wrapper')
+
+    <div class="error-container" style="width: 100%; display: flex; justify-content: center;">
+
+        <div class="wrapper" style="display: flex; height: 60vh; width: 100%;
+            justify-content: start; align-items: center;">
+
+            <div class="error-box"  style="width: 50%">
+
+                <div class="error-title" style="font-size: 100px;color: #5E5E5E">
+                    {{ __('admin::app.error.404.name') }}
+                </div>
+
+                <div class="error-messgae" style="font-size: 24px;color: #5E5E5E; margin-top: 40px">
+                    {{ __('admin::app.error.404.title') }}
+                </div>
+
+                <div class="error-description" style="margin-top: 20px;margin-bottom: 20px;color: #242424">
+                    {{ __('admin::app.error.404.message') }}
+                </div>
+
+                <a href="{{ route('shop.home.index') }}">
+                    {{ __('admin::app.error.go-to-home') }}
+                </a>
+
+            </div>
+
+            <div class="error-graphic icon-404" style="margin-left: 10% ;"></div>
+
+        </div>
+
+    </div>
+
+@endsection
\ No newline at end of file
diff --git a/resources/themes/shop/views/errors/500.blade.php b/resources/themes/shop/views/errors/500.blade.php
new file mode 100644
index 000000000..2ae0f5a41
--- /dev/null
+++ b/resources/themes/shop/views/errors/500.blade.php
@@ -0,0 +1,40 @@
+@extends('shop::layouts.master')
+
+@section('page_title')
+    {{ __('admin::app.error.500.page-title') }}
+@stop
+
+@section('content-wrapper')
+
+    <div class="error-container" style="width: 100%; display: flex; justify-content: center;">
+
+        <div class="wrapper" style="display: flex; height: 60vh; width: 100%;
+            justify-content: start; align-items: center;">
+
+            <div class="error-box"  style="width: 50%">
+
+                <div class="error-title" style="font-size: 100px;color: #5E5E5E">
+                    {{ __('admin::app.error.500.name') }}
+                </div>
+
+                <div class="error-messgae" style="font-size: 24px;color: #5E5E5E; margin-top: 40px">
+                    {{ __('admin::app.error.500.title') }}
+                </div>
+
+                <div class="error-description" style="margin-top: 20px;margin-bottom: 20px;color: #242424">
+                    {{ __('admin::app.error.500.message') }}
+                </div>
+
+                <a href="{{ route('shop.home.index') }}">
+                    {{ __('admin::app.error.go-to-home') }}
+                </a>
+
+            </div>
+
+            <div class="error-graphic icon-404" style="margin-left: 10% ;"></div>
+
+        </div>
+
+    </div>
+
+@endsection
\ No newline at end of file
diff --git a/resources/themes/shop/views/errors/503.blade.php b/resources/themes/shop/views/errors/503.blade.php
new file mode 100644
index 000000000..40d93e596
--- /dev/null
+++ b/resources/themes/shop/views/errors/503.blade.php
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+</head>
+<body>
+    <div class="error-container" style="width: 100%; display: flex; justify-content: center;">
+
+        <div class="wrapper" style="display: flex; height: 60vh; width: 100%;
+            justify-content: start; align-items: center;">
+
+            <div class="error-box"  style="width: 50%">
+
+                <div class="error-title" style="font-size: 100px;color: #5E5E5E">
+                    {{ __('admin::app.error.in-maitainace') }}
+                </div>
+
+                <div class="error-messgae" style="font-size: 24px;color: #5E5E5E">
+                    {{ core()->getCurrentChannel()->maintenance_mode_text ?: __('admin::app.error.right-back') }}
+                </div>
+            </div>
+
+            <div class="error-graphic icon-404" style="margin-left: 10% ;"></div>
+
+        </div>
+
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/resources/themes/shop/views/guest/compare/compare-products.blade.php b/resources/themes/shop/views/guest/compare/compare-products.blade.php
new file mode 100644
index 000000000..85fe7368a
--- /dev/null
+++ b/resources/themes/shop/views/guest/compare/compare-products.blade.php
@@ -0,0 +1,342 @@
+@php
+    $attributeRepository = app('\Webkul\Attribute\Repositories\AttributeFamilyRepository');
+    $comparableAttributes = $attributeRepository->getComparableAttributesBelongsToFamily();
+
+    $locale = request()->get('locale') ?: app()->getLocale();
+
+    $attributeOptionTranslations = DB::table('attribute_option_translations')->where('locale', $locale)->get()->toJson();
+@endphp
+
+@push('scripts')
+    <script type="text/x-template" id="compare-product-template">
+        <section class="comparison-component">
+            <h1>
+                {{ __('shop::app.customer.compare.compare_similar_items') }}
+            </h1>
+
+            <button
+                v-if="products.length > 0"
+                class="btn btn-primary btn-md {{ core()->getCurrentLocale()->direction == 'rtl' ? 'pull-left' : 'pull-right' }}"
+                @click="removeProductCompare('all')">
+                {{ __('shop::app.customer.account.wishlist.deleteall') }}
+            </button>
+
+            {!! view_render_event('bagisto.shop.customers.account.compare.view.before') !!}
+
+            <table class="compare-products">
+                <template v-if="isProductListLoaded && products.length > 0">
+                    @php
+                        $comparableAttributes = $comparableAttributes->toArray();
+
+                        array_splice($comparableAttributes, 1, 0, [[
+                            'code' => 'product_image',
+                            'admin_name' => __('velocity::app.customer.compare.product_image'),
+                        ]]);
+
+                        array_splice($comparableAttributes, 2, 0, [[
+                            'code' => 'addToCartHtml',
+                            'admin_name' => __('velocity::app.customer.compare.actions'),
+                        ]]);
+                    @endphp
+
+                    @foreach ($comparableAttributes as $attribute)
+                        <tr>
+                            <td>
+                                <span class="fs16">{{ $attribute['admin_name'] }}</span>
+                            </td>
+
+                            <td :key="`title-${index}`" v-for="(product, index) in products">
+                                @switch ($attribute['code'])
+                                    @case('name')
+                                        <a :href="`${baseUrl}/${product.url_key}`" class="unset remove-decoration active-hover">
+                                            <h3 class="fw6 fs18 mt-0" v-text="product['{{ $attribute['code'] }}']"></h3>
+                                        </a>
+                                        @break
+
+                                    @case('product_image')
+                                        <a :href="`${baseUrl}/${product.url_key}`" class="unset">
+                                            <img
+                                                class="image-wrapper"
+                                                :src="product['{{ $attribute['code'] }}']"
+                                                :onerror="`this.src='${baseUrl}/vendor/webkul/ui/assets/images/product/large-product-placeholder.png'`" alt="" />
+                                        </a>
+                                        @break
+
+                                    @case('price')
+                                        <span v-html="product['priceHTML']"></span>
+                                        @break
+
+                                    @case('addToCartHtml')
+                                        <div class="action">
+                                            <div v-html="addToCartHtml"></div>
+
+                                            <span class="icon white-cross-sm-icon remove-product" @click="removeProductCompare(product.id)"></span>
+                                        </div>
+                                        @break
+
+                                    @case('color')
+                                        <span v-html="product.color_label" class="fs16"></span>
+                                        @break
+
+                                    @case('size')
+                                        <span v-html="product.size_label" class="fs16"></span>
+                                        @break
+
+                                    @case('description')
+                                        <span v-html="product.description" class="desc"></span>
+                                        @break
+
+                                    @default
+                                        @switch ($attribute['type'])
+                                            @case('boolean')
+                                                <span
+                                                    v-text="product.product['{{ $attribute['code'] }}']
+                                                            ? '{{ __('velocity::app.shop.general.yes') }}'
+                                                            : '{{ __('velocity::app.shop.general.no') }}'"
+                                                ></span>
+                                                @break;
+
+                                            @case('checkbox')
+                                                <span v-if="product.product['{{ $attribute['code'] }}']" v-html="getAttributeOptions(product['{{ $attribute['code'] }}'] ? product : product.product['{{ $attribute['code'] }}'] ? product.product : null, '{{ $attribute['code'] }}', 'multiple')" class="fs16"></span>
+                                                <span v-else class="fs16">__</span>
+                                                @break;
+
+                                            @case('select')
+                                                <span v-if="product.product['{{ $attribute['code'] }}']" v-html="getAttributeOptions(product['{{ $attribute['code'] }}'] ? product : product.product['{{ $attribute['code'] }}'] ? product.product : null, '{{ $attribute['code'] }}', 'single')" class="fs16"></span>
+                                                <span v-else class="fs16">__</span>
+                                                @break;
+
+                                            @case ('file')
+                                            @case ('image')
+                                                <a :href="`${baseUrl}/${product.url_key}`" class="unset">
+                                                    <img
+                                                        class="image-wrapper"
+                                                        :src="'storage/' + product.product['{{ $attribute['code'] }}']"
+                                                        :onerror="`this.src='${baseUrl}/vendor/webkul/ui/assets/images/product/large-product-placeholder.png'`" alt="" />
+                                                </a>
+                                                @break;
+                                            @default
+                                                <span v-html="product['{{ $attribute['code'] }}'] ? product['{{ $attribute['code'] }}'] : product.product['{{ $attribute['code'] }}'] ? product.product['{{ $attribute['code'] }}'] : '__'" class="fs16"></span>
+                                                @break;
+                                        @endswitch
+
+                                        @break
+
+                                @endswitch
+                            </td>
+                        </tr>
+                    @endforeach
+                </template>
+
+                <span v-else-if="isProductListLoaded && products.length == 0">
+                    {{ __('shop::app.customer.compare.empty-text') }}
+                </span>
+            </table>
+
+            {!! view_render_event('bagisto.shop.customers.account.compare.view.after') !!}
+        </section>
+    </script>
+
+    <script>
+        Vue.component('compare-product', {
+            template: '#compare-product-template',
+
+            data: function () {
+                return {
+                    'products': [],
+                    'isProductListLoaded': false,
+                    'baseUrl': "{{ url()->to('/') }}",
+                    'attributeOptions': JSON.parse(@json($attributeOptionTranslations)),
+                    'isCustomer': '{{ auth()->guard('customer')->user() ? "true" : "false" }}' == "true",
+                }
+            },
+
+            mounted: function () {
+                this.getComparedProducts();
+            },
+
+            methods: {
+                'getComparedProducts': function () {
+                    let items = '';
+                    let url = `${this.baseUrl}/${this.isCustomer ? 'comparison' : 'detailed-products'}`;
+
+                    let data = {
+                        params: {'data': true}
+                    }
+
+                    if (! this.isCustomer) {
+                        items = this.getStorageValue('compared_product');
+                        items = items ? items.join('&') : '';
+
+                        data = {
+                            params: {
+                                items
+                            }
+                        };
+                    }
+
+                    if (this.isCustomer || (! this.isCustomer && items != "")) {
+                        this.$http.get(url, data)
+                        .then(response => {
+                            this.isProductListLoaded = true;
+
+                            if (response.data.products.length > 2) {
+                                $('.comparison-component').css('overflow-x', 'scroll');
+                            }
+
+                            this.products = response.data.products;
+                        })
+                        .catch(error => {
+                            this.isProductListLoaded = true;
+                            console.log("{{ __('shop::app.common.error') }}");
+                        });
+                    } else {
+                        this.isProductListLoaded = true;
+                    }
+
+                },
+
+                'removeProductCompare': function (productId) {
+                    if (this.isCustomer) {
+                        this.$http.delete(`${this.baseUrl}/comparison?productId=${productId}`)
+                        .then(response => {
+                            if (productId == 'all') {
+                                this.$set(this, 'products', this.products.filter(product => false));
+                            } else {
+                                this.$set(this, 'products', this.products.filter(product => product.id != productId));
+                            }
+
+                            window.flashMessages = [{'type': 'alert-success', 'message': response.data.message }];
+
+                            this.$root.addFlashMessages();
+                        })
+                        .catch(error => {
+                            console.log("{{ __('shop::app.common.error') }}");
+                        });
+                    } else {
+                        let existingItems = this.getStorageValue('compared_product');
+
+                        if (productId == "all") {
+                            updatedItems = [];
+                            this.$set(this, 'products', []);
+                            window.flashMessages = [{'type': 'alert-success', 'message': '{{ __('shop::app.customer.compare.removed-all') }}' }];
+                        } else {
+                            updatedItems = existingItems.filter(item => item != productId);
+                            this.$set(this, 'products', this.products.filter(product => product.id != productId));
+                            window.flashMessages = [{'type': 'alert-success', 'message': '{{ __('shop::app.customer.compare.removed') }}' }];
+                        }
+
+                        this.setStorageValue('compared_product', updatedItems);
+
+                        this.$root.addFlashMessages();
+                    }
+
+                    this.updateCompareCount();
+                },
+
+                'getDynamicHTML': function (input) {
+                    var _staticRenderFns;
+                    const { render, staticRenderFns } = Vue.compile(input);
+
+                    if (this.$options.staticRenderFns.length > 0) {
+                        _staticRenderFns = this.$options.staticRenderFns;
+                    } else {
+                        _staticRenderFns = this.$options.staticRenderFns = staticRenderFns;
+                    }
+
+                    try {
+                        var output = render.call(this, this.$createElement);
+                    } catch (exception) {
+                        console.log(this.__('error.something_went_wrong'));
+                    }
+
+                    this.$options.staticRenderFns = _staticRenderFns;
+
+                    return output;
+                },
+
+                'isMobile': function () {
+                    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
+                    return true
+                    } else {
+                    return false
+                    }
+                },
+
+                'getStorageValue': function (key) {
+                    let value = window.localStorage.getItem(key);
+
+                    if (value) {
+                        value = JSON.parse(value);
+                    }
+
+                    return value;
+                },
+
+                'setStorageValue': function (key, value) {
+                    window.localStorage.setItem(key, JSON.stringify(value));
+
+                    return true;
+                },
+
+                'getAttributeOptions': function (productDetails, attributeValues, type) {
+                    var attributeOptions = '__';
+
+                    if (productDetails && attributeValues) {
+                        var attributeItems;
+
+                        if (type == "multiple") {
+                            attributeItems = productDetails[attributeValues].split(',');
+                        } else if (type == "single") {
+                            attributeItems = productDetails[attributeValues];
+                        }
+
+                        attributeOptions = this.attributeOptions.filter(option => {
+                            if (type == "multiple") {
+                                if (attributeItems.indexOf(option.attribute_option_id.toString()) > -1) {
+                                    return true;
+                                }
+                            } else if (type == "single") {
+                                if (attributeItems == option.attribute_option_id.toString()) {
+                                    return true;
+                                }
+                            }
+
+                            return false;
+                        });
+
+                        attributeOptions = attributeOptions.map(option => {
+                            return option.label;
+                        });
+
+                        attributeOptions = attributeOptions.join(', ');
+                    }
+
+                    return attributeOptions;
+                },
+
+                'updateCompareCount': function () {
+                    if (this.isCustomer == "true" || this.isCustomer == true) {
+                        this.$http.get(`${this.baseUrl}/items-count`)
+                        .then(response => {
+                            $('#compare-items-count').html(response.data.compareProductsCount);
+                        })
+                        .catch(exception => {
+                            window.flashMessages = [{
+                                'type': `alert-error`,
+                                'message': "{{ __('shop::app.common.error') }}"
+                            }];
+
+                            this.$root.addFlashMessages();
+                        });
+                    } else {
+                        let comparedItems = JSON.parse(localStorage.getItem('compared_product'));
+                        comparedItemsCount = comparedItems ? comparedItems.length : 0;
+
+                        $('#compare-items-count').html(comparedItemsCount);
+                    }
+                }
+            }
+        });
+    </script>
+@endpush
\ No newline at end of file
diff --git a/resources/themes/shop/views/guest/compare/index.blade.php b/resources/themes/shop/views/guest/compare/index.blade.php
new file mode 100644
index 000000000..08cd183db
--- /dev/null
+++ b/resources/themes/shop/views/guest/compare/index.blade.php
@@ -0,0 +1,11 @@
+@extends('shop::layouts.master')
+
+@include('shop::guest.compare.compare-products')
+
+@section('page_title')
+    {{ __('shop::app.customer.compare.compare_similar_items') }}
+@endsection
+
+@section('content-wrapper')
+    <compare-product></compare-product>
+@endsection
\ No newline at end of file
diff --git a/resources/themes/shop/views/guest/wishlist/index.blade.php b/resources/themes/shop/views/guest/wishlist/index.blade.php
new file mode 100644
index 000000000..be3b6a35b
--- /dev/null
+++ b/resources/themes/shop/views/guest/wishlist/index.blade.php
@@ -0,0 +1,3 @@
+<script>
+    window.location.href = window.location.href.replace('/guest-wishlist', '');
+</script>
\ No newline at end of file
diff --git a/resources/themes/shop/views/home/featured-products.blade.php b/resources/themes/shop/views/home/featured-products.blade.php
new file mode 100644
index 000000000..654a02043
--- /dev/null
+++ b/resources/themes/shop/views/home/featured-products.blade.php
@@ -0,0 +1,27 @@
+@if (count(app('Webkul\Product\Repositories\ProductRepository')->getFeaturedProducts()))
+    <section class="featured-products">
+
+        <div class="featured-heading">
+            {{ __('shop::app.home.featured-products') }}<br/>
+
+            <span class="featured-seperator" style="color: #d7dfe2;">_____</span>
+        </div>
+
+        <div class="featured-grid product-grid-4">
+
+            @foreach (app('Webkul\Product\Repositories\ProductRepository')->getFeaturedProducts() as $productFlat)
+
+                @if (core()->getConfigData('catalog.products.homepage.out_of_stock_items'))
+                    @include ('shop::products.list.card', ['product' => $productFlat])
+                @else
+                    @if ($productFlat->isSaleable())
+                        @include ('shop::products.list.card', ['product' => $productFlat])
+                    @endif
+                @endif
+
+            @endforeach
+
+        </div>
+
+    </section>
+@endif
\ No newline at end of file
diff --git a/resources/themes/shop/views/home/index.blade.php b/resources/themes/shop/views/home/index.blade.php
new file mode 100644
index 000000000..b3021bcf3
--- /dev/null
+++ b/resources/themes/shop/views/home/index.blade.php
@@ -0,0 +1,53 @@
+@extends('shop::layouts.master')
+
+@php
+    $channel = core()->getCurrentChannel();
+
+    $homeSEO = $channel->home_seo;
+
+    if (isset($homeSEO)) {
+        $homeSEO = json_decode($channel->home_seo);
+
+        $metaTitle = $homeSEO->meta_title;
+
+        $metaDescription = $homeSEO->meta_description;
+
+        $metaKeywords = $homeSEO->meta_keywords;
+    }
+@endphp
+
+@section('page_title')
+    {{ isset($metaTitle) ? $metaTitle : "" }}
+@endsection
+
+@section('head')
+
+    @if (isset($homeSEO))
+        @isset($metaTitle)
+            <meta name="title" content="{{ $metaTitle }}" />
+        @endisset
+
+        @isset($metaDescription)
+            <meta name="description" content="{{ $metaDescription }}" />
+        @endisset
+
+        @isset($metaKeywords)
+            <meta name="keywords" content="{{ $metaKeywords }}" />
+        @endisset
+    @endif
+@endsection
+
+@section('content-wrapper')
+    {!! view_render_event('bagisto.shop.home.content.before') !!}
+
+    @if (! is_null($channel->home_page_content))
+        {!! DbView::make($channel)->field('home_page_content')->with(['sliderData' => $sliderData])->render() !!}
+    @else
+        @include('shop::home.slider', ['sliderData' => $sliderData])
+        @include('shop::home.featured-products')
+        @include('shop::home.new-products')
+    @endif
+
+    {{ view_render_event('bagisto.shop.home.content.after') }}
+
+@endsection
diff --git a/resources/themes/shop/views/home/new-products.blade.php b/resources/themes/shop/views/home/new-products.blade.php
new file mode 100644
index 000000000..5a31b168c
--- /dev/null
+++ b/resources/themes/shop/views/home/new-products.blade.php
@@ -0,0 +1,27 @@
+@if (count(app('Webkul\Product\Repositories\ProductRepository')->getNewProducts()))
+    <section class="featured-products">
+
+        <div class="featured-heading">
+            {{ __('shop::app.home.new-products') }}<br/>
+
+            <span class="featured-seperator" style="color: #d7dfe2;">_____</span>
+        </div>
+
+        <div class="product-grid-4">
+
+            @foreach (app('Webkul\Product\Repositories\ProductRepository')->getNewProducts() as $productFlat)
+
+                @if (core()->getConfigData('catalog.products.homepage.out_of_stock_items'))
+                    @include ('shop::products.list.card', ['product' => $productFlat])
+                @else
+                    @if ($productFlat->isSaleable())
+                        @include ('shop::products.list.card', ['product' => $productFlat])
+                    @endif
+                @endif
+
+            @endforeach
+
+        </div>
+
+    </section>
+@endif
diff --git a/resources/themes/shop/views/home/news-updates.blade.php b/resources/themes/shop/views/home/news-updates.blade.php
new file mode 100644
index 000000000..4cb478208
--- /dev/null
+++ b/resources/themes/shop/views/home/news-updates.blade.php
@@ -0,0 +1,15 @@
+<section class="news-update">
+    <div class="news-update-grid">
+        <div class="block1">
+            <img src="vendor/webkul/shop/assets/images/1.png" alt="" />
+        </div>
+        <div class="block2">
+            <div class="sub-block1">
+                <img src="vendor/webkul/shop/assets/images/2.png" alt="" />
+            </div>
+            <div class="sub-block2">
+                <img src="vendor/webkul/shop/assets/images/3.png" alt="" />
+            </div>
+        </div>
+    </div>
+</section>
diff --git a/resources/themes/shop/views/home/slider.blade.php b/resources/themes/shop/views/home/slider.blade.php
new file mode 100644
index 000000000..40af4726f
--- /dev/null
+++ b/resources/themes/shop/views/home/slider.blade.php
@@ -0,0 +1,5 @@
+@if (count($sliderData))
+    <section class="slider-block">
+        <image-slider :slides='@json($sliderData)' public_path="{{ url()->to('/') }}"></image-slider>
+    </section>
+@endif
\ No newline at end of file
diff --git a/resources/themes/shop/views/index.blade.php b/resources/themes/shop/views/index.blade.php
new file mode 100644
index 000000000..5d0687bbe
--- /dev/null
+++ b/resources/themes/shop/views/index.blade.php
@@ -0,0 +1,13 @@
+@inject('rateHelper' , 'Webkul\Shipping\Helper\Rate')
+<div>
+    @foreach ($rateHelper->collectRates() as $key=>$count)
+        <div class="shipping-method">
+            <input type="radio" name="price"> ${{ core()->currency($count) }}  <span> {{ $key }} </span>
+        </div>
+    @endforeach
+</div>
+<style>
+    span {
+        margin-left: 10px;
+    }
+</style>
\ No newline at end of file
diff --git a/resources/themes/shop/views/layouts/footer/footer.blade.php b/resources/themes/shop/views/layouts/footer/footer.blade.php
new file mode 100644
index 000000000..493d12e3f
--- /dev/null
+++ b/resources/themes/shop/views/layouts/footer/footer.blade.php
@@ -0,0 +1,91 @@
+<div class="footer">
+    <div class="footer-content">
+        <div class="footer-list-container">
+
+            <?php
+                $categories = [];
+
+                foreach (app('Webkul\Category\Repositories\CategoryRepository')->getVisibleCategoryTree(core()->getCurrentChannel()->root_category_id) as $category){
+                    if ($category->slug)
+                        array_push($categories, $category);
+                }
+            ?>
+
+            @if (count($categories))
+                <div class="list-container">
+                    <span class="list-heading">Categories</span>
+
+                    <ul class="list-group">
+                        @foreach ($categories as $key => $category)
+                            <li>
+                                <a href="{{ route('shop.productOrCategory.index', $category->slug) }}">{{ $category->name }}</a>
+                            </li>
+                        @endforeach
+                    </ul>
+                </div>
+            @endif
+
+            {!! DbView::make(core()->getCurrentChannel())->field('footer_content')->render() !!}
+
+            <div class="list-container">
+                @if(core()->getConfigData('customer.settings.newsletter.subscription'))
+                    <label class="list-heading" for="subscribe-field">{{ __('shop::app.footer.subscribe-newsletter') }}</label>
+                    <div class="form-container">
+                        <form action="{{ route('shop.subscribe') }}">
+                            <div class="control-group" :class="[errors.has('subscriber_email') ? 'has-error' : '']">
+                                <input type="email" id="subscribe-field" class="control subscribe-field" name="subscriber_email" placeholder="Email Address" required><br/>
+
+                                <button class="btn btn-md btn-primary">{{ __('shop::app.subscription.subscribe') }}</button>
+                            </div>
+                        </form>
+                    </div>
+                @endif
+
+                <?php
+                    $term = request()->input('term');
+
+                    if (! is_null($term)) {
+                        $serachQuery = 'term='.request()->input('term');
+                    }
+                ?>
+
+                <label class="list-heading" for="locale-switcher">{{ __('shop::app.footer.locale') }}</label>
+                <div class="form-container">
+                    <div class="control-group">
+                        <select class="control locale-switcher" id="locale-switcher" onchange="window.location.href = this.value" @if (count(core()->getCurrentChannel()->locales) == 1) disabled="disabled" @endif>
+
+                            @foreach (core()->getCurrentChannel()->locales as $locale)
+                                @if (isset($serachQuery))
+                                    <option value="?{{ $serachQuery }}&locale={{ $locale->code }}" {{ $locale->code == app()->getLocale() ? 'selected' : '' }}>{{ $locale->name }}</option>
+                                @else
+                                    <option value="?locale={{ $locale->code }}" {{ $locale->code == app()->getLocale() ? 'selected' : '' }}>{{ $locale->name }}</option>
+                                @endif
+                            @endforeach
+
+                        </select>
+                    </div>
+                </div>
+
+                <div class="currency">
+                    <label class="list-heading" for="currency-switcher">{{ __('shop::app.footer.currency') }}</label>
+                    <div class="form-container">
+                        <div class="control-group">
+                            <select class="control locale-switcher" id="currency-switcher" onchange="window.location.href = this.value">
+
+                                @foreach (core()->getCurrentChannel()->currencies as $currency)
+                                    @if (isset($serachQuery))
+                                        <option value="?{{ $serachQuery }}&currency={{ $currency->code }}" {{ $currency->code == core()->getCurrentCurrencyCode() ? 'selected' : '' }}>{{ $currency->code }}</option>
+                                    @else
+                                        <option value="?currency={{ $currency->code }}" {{ $currency->code == core()->getCurrentCurrencyCode() ? 'selected' : '' }}>{{ $currency->code }}</option>
+                                    @endif
+                                @endforeach
+
+                            </select>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/resources/themes/shop/views/layouts/header/index.blade.php b/resources/themes/shop/views/layouts/header/index.blade.php
new file mode 100644
index 000000000..333b2899e
--- /dev/null
+++ b/resources/themes/shop/views/layouts/header/index.blade.php
@@ -0,0 +1,415 @@
+<?php
+    $term = request()->input('term');
+    $image_search = request()->input('image-search');
+
+    if (! is_null($term)) {
+        $serachQuery = 'term='.request()->input('term');
+    }
+?>
+
+<div class="header" id="header">
+    <div class="header-top">
+        <div class="left-content">
+            <ul class="logo-container">
+                <li>
+                    <a href="{{ route('shop.home.index') }}" aria-label="Logo">
+                        @if ($logo = core()->getCurrentChannel()->logo_url)
+                            <img class="logo" src="{{ $logo }}" alt="" />
+                        @else
+                            <img class="logo" src="{{ bagisto_asset('images/logo.svg') }}" alt="" />
+                        @endif
+                    </a>
+                </li>
+            </ul>
+
+            <ul class="search-container">
+                <li class="search-group">
+                    <form role="search" action="{{ route('shop.search.index') }}" method="GET" style="display: inherit;">
+                        <label for="search-bar" style="position: absolute; z-index: -1;">Search</label>
+                        <input
+                            required
+                            name="term"
+                            type="search"
+                            value="{{ ! $image_search ? $term : '' }}"
+                            class="search-field"
+                            id="search-bar"
+                            placeholder="{{ __('shop::app.header.search-text') }}"
+                        >
+
+                        <image-search-component></image-search-component>
+
+                        <div class="search-icon-wrapper">
+
+                            <button class="" class="background: none;" aria-label="Search">
+                                <i class="icon icon-search"></i>
+                            </button>
+                        </div>
+                    </form>
+                </li>
+            </ul>
+        </div>
+
+        <div class="right-content">
+
+            <span class="search-box"><span class="icon icon-search" id="search"></span></span>
+
+            <ul class="right-content-menu">
+
+                {!! view_render_event('bagisto.shop.layout.header.comppare-item.before') !!}
+
+                @php
+                    $showCompare = core()->getConfigData('general.content.shop.compare_option') == "1" ? true : false
+                @endphp
+
+                @if ($showCompare)
+                    <li class="compare-dropdown-container">
+                        <a
+                            @auth('customer')
+                                href="{{ route('velocity.customer.product.compare') }}"
+                            @endauth
+
+                            @guest('customer')
+                                href="{{ route('velocity.product.compare') }}"
+                            @endguest
+                            style="color: #242424;"
+                            >
+
+                            <i class="icon compare-icon"></i>
+                            <span class="name">
+                                {{ __('shop::app.customer.compare.text') }}
+                                <span class="count">(<span id="compare-items-count"></span>)<span class="count">
+                            </span>
+                        </a>
+                    </li>
+                @endif
+
+                {!! view_render_event('bagisto.shop.layout.header.compare-item.after') !!}
+
+                {!! view_render_event('bagisto.shop.layout.header.currency-item.before') !!}
+
+                @if (core()->getCurrentChannel()->currencies->count() > 1)
+                    <li class="currency-switcher">
+                        <span class="dropdown-toggle">
+                            {{ core()->getCurrentCurrencyCode() }}
+
+                            <i class="icon arrow-down-icon"></i>
+                        </span>
+
+                        <ul class="dropdown-list currency">
+                            @foreach (core()->getCurrentChannel()->currencies as $currency)
+                                <li>
+                                    @if (isset($serachQuery))
+                                        <a href="?{{ $serachQuery }}&currency={{ $currency->code }}">{{ $currency->code }}</a>
+                                    @else
+                                        <a href="?currency={{ $currency->code }}">{{ $currency->code }}</a>
+                                    @endif
+                                </li>
+                            @endforeach
+                        </ul>
+                    </li>
+                @endif
+
+                {!! view_render_event('bagisto.shop.layout.header.currency-item.after') !!}
+
+
+                {!! view_render_event('bagisto.shop.layout.header.account-item.before') !!}
+
+                <li>
+                    <span class="dropdown-toggle">
+                        <i class="icon account-icon"></i>
+
+                        <span class="name">{{ __('shop::app.header.account') }}</span>
+
+                        <i class="icon arrow-down-icon"></i>
+                    </span>
+
+                    @guest('customer')
+                        <ul class="dropdown-list account guest">
+                            <li>
+                                <div>
+                                    <label style="color: #9e9e9e; font-weight: 700; text-transform: uppercase; font-size: 15px;">
+                                        {{ __('shop::app.header.title') }}
+                                    </label>
+                                </div>
+
+                                <div style="margin-top: 5px;">
+                                    <span style="font-size: 12px;">{{ __('shop::app.header.dropdown-text') }}</span>
+                                </div>
+
+                                <div style="margin-top: 15px;">
+                                    <a class="btn btn-primary btn-md" href="{{ route('customer.session.index') }}" style="color: #ffffff">
+                                        {{ __('shop::app.header.sign-in') }}
+                                    </a>
+
+                                    <a class="btn btn-primary btn-md" href="{{ route('customer.register.index') }}" style="float: right; color: #ffffff">
+                                        {{ __('shop::app.header.sign-up') }}
+                                    </a>
+                                </div>
+                            </li>
+                        </ul>
+                    @endguest
+
+                    @auth('customer')
+                        @php
+                           $showWishlist = core()->getConfigData('general.content.shop.wishlist_option') == "1" ? true : false;
+                        @endphp
+
+                        <ul class="dropdown-list account customer">
+                            <li>
+                                <div>
+                                    <label style="color: #9e9e9e; font-weight: 700; text-transform: uppercase; font-size: 15px;">
+                                        {{ auth()->guard('customer')->user()->first_name }}
+                                    </label>
+                                </div>
+
+                                <ul>
+                                    <li>
+                                        <a href="{{ route('customer.profile.index') }}">{{ __('shop::app.header.profile') }}</a>
+                                    </li>
+
+                                    @if ($showWishlist)
+                                        <li>
+                                            <a href="{{ route('customer.wishlist.index') }}">{{ __('shop::app.header.wishlist') }}</a>
+                                        </li>
+                                    @endif
+
+                                    <li>
+                                        <a href="{{ route('shop.checkout.cart.index') }}">{{ __('shop::app.header.cart') }}</a>
+                                    </li>
+
+                                    <li>
+                                        <a href="{{ route('customer.session.destroy') }}">{{ __('shop::app.header.logout') }}</a>
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+                    @endauth
+                </li>
+
+                {!! view_render_event('bagisto.shop.layout.header.account-item.after') !!}
+
+
+                {!! view_render_event('bagisto.shop.layout.header.cart-item.before') !!}
+
+                <li class="cart-dropdown-container">
+
+                    @include('shop::checkout.cart.mini-cart')
+
+                </li>
+
+                {!! view_render_event('bagisto.shop.layout.header.cart-item.after') !!}
+
+            </ul>
+
+            <span class="menu-box" ><span class="icon icon-menu" id="hammenu"></span>
+        </div>
+    </div>
+
+    <div class="header-bottom" id="header-bottom">
+        @include('shop::layouts.header.nav-menu.navmenu')
+    </div>
+
+    <div class="search-responsive mt-10" id="search-responsive">
+        <form role="search" action="{{ route('shop.search.index') }}" method="GET" style="display: inherit;">
+            <div class="search-content">
+                <button style="background: none; border: none; padding: 0px;">
+                    <i class="icon icon-search"></i>
+                </button>
+
+                <image-search-component></image-search-component>
+
+                <input type="search" name="term" class="search">
+                <i class="icon icon-menu-back right"></i>
+            </div>
+        </form>
+    </div>
+</div>
+
+@push('scripts')
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs" defer></script>
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet" defer></script>
+
+    <script type="text/x-template" id="image-search-component-template">
+        <div v-if="image_search_status">
+            <label class="image-search-container" :for="'image-search-container-' + _uid">
+                <i class="icon camera-icon"></i>
+
+                <input type="file" :id="'image-search-container-' + _uid" ref="image_search_input" v-on:change="uploadImage()"/>
+
+                <img :id="'uploaded-image-url-' +  + _uid" :src="uploaded_image_url" alt="" width="20" height="20" />
+            </label>
+        </div>
+    </script>
+
+    <script>
+
+        Vue.component('image-search-component', {
+
+            template: '#image-search-component-template',
+
+            data: function() {
+                return {
+                    uploaded_image_url: '',
+                    image_search_status: "{{core()->getConfigData('general.content.shop.image_search') == '1' ? 'true' : 'false'}}" == 'true'
+                }
+            },
+
+            methods: {
+                uploadImage: function() {
+                    var imageInput = this.$refs.image_search_input;
+
+                    if (imageInput.files && imageInput.files[0]) {
+                        if (imageInput.files[0].type.includes('image/')) {
+                            var self = this;
+
+                            if (imageInput.files[0].size <= 2000000) {
+                                self.$root.showLoader();
+
+                                var formData = new FormData();
+
+                                formData.append('image', imageInput.files[0]);
+
+                                axios.post("{{ route('shop.image.search.upload') }}", formData, {headers: {'Content-Type': 'multipart/form-data'}})
+                                    .then(function(response) {
+                                        self.uploaded_image_url = response.data;
+
+                                        var net;
+
+                                        async function app() {
+                                            var analysedResult = [];
+
+                                            var queryString = '';
+
+                                            net = await mobilenet.load();
+
+                                            const imgElement = document.getElementById('uploaded-image-url-' +  + self._uid);
+
+                                            try {
+                                                const result = await net.classify(imgElement);
+
+                                                result.forEach(function(value) {
+                                                    queryString = value.className.split(',');
+
+                                                    if (queryString.length > 1) {
+                                                        analysedResult = analysedResult.concat(queryString)
+                                                    } else {
+                                                        analysedResult.push(queryString[0])
+                                                    }
+                                                });
+                                            } catch (error) {
+                                                self.$root.hideLoader();
+
+                                                window.flashMessages = [
+                                                    {
+                                                        'type': 'alert-error',
+                                                        'message': "{{ __('shop::app.common.error') }}"
+                                                    }
+                                                ];
+
+                                                self.$root.addFlashMessages();
+                                            };
+
+                                            localStorage.searched_image_url = self.uploaded_image_url;
+
+                                            queryString = localStorage.searched_terms = analysedResult.join('_');
+
+                                            self.$root.hideLoader();
+
+                                            window.location.href = "{{ route('shop.search.index') }}" + '?term=' + queryString + '&image-search=1';
+                                        }
+
+                                        app();
+                                    })
+                                    .catch(function(error) {
+                                        self.$root.hideLoader();
+
+                                        window.flashMessages = [
+                                            {
+                                                'type': 'alert-error',
+                                                'message': "{{ __('shop::app.common.error') }}"
+                                            }
+                                        ];
+
+                                        self.$root.addFlashMessages();
+                                    });
+                            } else {
+
+                                imageInput.value = '';
+
+                                        window.flashMessages = [
+                                            {
+                                                'type': 'alert-error',
+                                                'message': "{{ __('shop::app.common.image-upload-limit') }}"
+                                            }
+                                        ];
+
+                                self.$root.addFlashMessages();
+
+                            }
+                        } else {
+                            imageInput.value = '';
+
+                            alert('Only images (.jpeg, .jpg, .png, ..) are allowed.');
+                        }
+                    }
+                }
+            }
+        });
+
+    </script>
+
+    <script>
+        $(document).ready(function() {
+
+            $('body').delegate('#search, .icon-menu-close, .icon.icon-menu', 'click', function(e) {
+                toggleDropdown(e);
+            });
+
+            @auth('customer')
+                @php
+                    $compareCount = app('Webkul\Velocity\Repositories\VelocityCustomerCompareProductRepository')
+                        ->count([
+                            'customer_id' => auth()->guard('customer')->user()->id,
+                        ]);
+                @endphp
+
+                let comparedItems = JSON.parse(localStorage.getItem('compared_product'));
+                $('#compare-items-count').html({{ $compareCount }});
+            @endauth
+
+            @guest('customer')
+                let comparedItems = JSON.parse(localStorage.getItem('compared_product'));
+                $('#compare-items-count').html(comparedItems ? comparedItems.length : 0);
+            @endguest
+
+            function toggleDropdown(e) {
+                var currentElement = $(e.currentTarget);
+
+                if (currentElement.hasClass('icon-search')) {
+                    currentElement.removeClass('icon-search');
+                    currentElement.addClass('icon-menu-close');
+                    $('#hammenu').removeClass('icon-menu-close');
+                    $('#hammenu').addClass('icon-menu');
+                    $("#search-responsive").css("display", "block");
+                    $("#header-bottom").css("display", "none");
+                } else if (currentElement.hasClass('icon-menu')) {
+                    currentElement.removeClass('icon-menu');
+                    currentElement.addClass('icon-menu-close');
+                    $('#search').removeClass('icon-menu-close');
+                    $('#search').addClass('icon-search');
+                    $("#search-responsive").css("display", "none");
+                    $("#header-bottom").css("display", "block");
+                } else {
+                    currentElement.removeClass('icon-menu-close');
+                    $("#search-responsive").css("display", "none");
+                    $("#header-bottom").css("display", "none");
+                    if (currentElement.attr("id") == 'search') {
+                        currentElement.addClass('icon-search');
+                    } else {
+                        currentElement.addClass('icon-menu');
+                    }
+                }
+            }
+        });
+    </script>
+@endpush
\ No newline at end of file
diff --git a/resources/themes/shop/views/layouts/header/nav-menu/navmenu.blade.php b/resources/themes/shop/views/layouts/header/nav-menu/navmenu.blade.php
new file mode 100644
index 000000000..0e9e3085a
--- /dev/null
+++ b/resources/themes/shop/views/layouts/header/nav-menu/navmenu.blade.php
@@ -0,0 +1,138 @@
+{!! view_render_event('bagisto.shop.layout.header.category.before') !!}
+
+<?php
+
+$categories = [];
+
+foreach (app('Webkul\Category\Repositories\CategoryRepository')->getVisibleCategoryTree(core()->getCurrentChannel()->root_category_id) as $category) {
+    if ($category->slug) {
+        array_push($categories, $category);
+    }
+}
+
+?>
+
+<category-nav categories='@json($categories)' url="{{url()->to('/')}}"></category-nav>
+
+{!! view_render_event('bagisto.shop.layout.header.category.after') !!}
+
+
+@push('scripts')
+
+
+<script type="text/x-template" id="category-nav-template">
+
+    <ul class="nav">
+        <category-item
+            v-for="(item, index) in items"
+            :key="index"
+            :url="url"
+            :item="item"
+            :parent="index">
+        </category-item>
+    </ul>
+
+</script>
+
+<script>
+    Vue.component('category-nav', {
+
+        template: '#category-nav-template',
+
+        props: {
+            categories: {
+                type: [Array, String, Object],
+                required: false,
+                default: (function () {
+                    return [];
+                })
+            },
+
+            url: String
+        },
+
+        data: function(){
+            return {
+                items_count:0
+            };
+        },
+
+        computed: {
+            items: function() {
+                return JSON.parse(this.categories)
+            }
+        },
+    });
+</script>
+
+<script type="text/x-template" id="category-item-template">
+    <li>
+        <a :href="url+'/'+this.item['translations'][0].url_path">
+            @{{ name }}&emsp;
+            <i class="icon dropdown-right-icon" v-if="haveChildren && item.parent_id != null"></i>
+        </a>
+
+        <i :class="[show ? 'icon icon-arrow-down mt-15' : 'icon dropdown-right-icon left mt-15']"
+        v-if="haveChildren"  @click="showOrHide"></i>
+
+        <ul v-if="haveChildren && show">
+            <category-item
+                v-for="(child, index) in item.children"
+                :key="index"
+                :url="url"
+                :item="child">
+            </category-item>
+        </ul>
+    </li>
+</script>
+
+<script>
+    Vue.component('category-item', {
+
+        template: '#category-item-template',
+
+        props: {
+            item:  Object,
+            url: String,
+        },
+
+        data: function() {
+            return {
+                items_count:0,
+                show: false,
+            };
+        },
+
+        mounted: function() {
+            if(window.innerWidth > 770){
+                this.show = true;
+            }
+        },
+
+        computed: {
+            haveChildren: function() {
+                return this.item.children.length ? true : false;
+            },
+
+            name: function() {
+                if (this.item.translations && this.item.translations.length) {
+                    this.item.translations.forEach(function(translation) {
+                        if (translation.locale == document.documentElement.lang)
+                            return translation.name;
+                    });
+                }
+
+                return this.item.name;
+            }
+        },
+
+        methods: {
+            showOrHide: function() {
+                this.show = !this.show;
+            }
+        }
+    });
+</script>
+
+
+@endpush
\ No newline at end of file
diff --git a/resources/themes/shop/views/layouts/master.blade.php b/resources/themes/shop/views/layouts/master.blade.php
new file mode 100644
index 000000000..83f6c798b
--- /dev/null
+++ b/resources/themes/shop/views/layouts/master.blade.php
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html lang="{{ app()->getLocale() }}">
+
+<head>
+
+    <title>@yield('page_title')</title>
+
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+    <meta http-equiv="content-language" content="{{ app()->getLocale() }}">
+    <link rel="stylesheet" href="{{ asset('vendor/webkul/ui/assets/css/ui.css') }}">
+
+    <link rel="stylesheet" href="{{ bagisto_asset('css/shop.css') }}">
+
+    @if ($favicon = core()->getCurrentChannel()->favicon_url)
+        <link rel="icon" sizes="16x16" href="{{ $favicon }}" />
+    @else
+        <link rel="icon" sizes="16x16" href="{{ bagisto_asset('images/favicon.ico') }}" />
+    @endif
+
+    @yield('head')
+
+    @section('seo')
+        @if (! request()->is('/'))
+            <meta name="description" content="{{ core()->getCurrentChannel()->description }}"/>
+        @endif
+    @show
+
+    @stack('css')
+
+    {!! view_render_event('bagisto.shop.layout.head') !!}
+
+    <style>
+        {!! core()->getConfigData('general.content.custom_scripts.custom_css') !!}
+    </style>
+
+</head>
+
+
+<body @if (core()->getCurrentLocale() && core()->getCurrentLocale()->direction == 'rtl') class="rtl" @endif style="scroll-behavior: smooth;">
+
+    {!! view_render_event('bagisto.shop.layout.body.before') !!}
+
+    <div id="app">
+        <flash-wrapper ref='flashes'></flash-wrapper>
+
+        <div class="main-container-wrapper">
+
+            {!! view_render_event('bagisto.shop.layout.header.before') !!}
+
+            @include('shop::layouts.header.index')
+
+            {!! view_render_event('bagisto.shop.layout.header.after') !!}
+
+            @yield('slider')
+
+            <main class="content-container">
+
+                {!! view_render_event('bagisto.shop.layout.content.before') !!}
+
+                @yield('content-wrapper')
+
+                {!! view_render_event('bagisto.shop.layout.content.after') !!}
+
+            </main>
+
+        </div>
+
+        {!! view_render_event('bagisto.shop.layout.footer.before') !!}
+
+        @include('shop::layouts.footer.footer')
+
+        {!! view_render_event('bagisto.shop.layout.footer.after') !!}
+
+        @if (core()->getConfigData('general.content.footer.footer_toggle'))
+            <div class="footer">
+                <p style="text-align: center;">
+                    @if (core()->getConfigData('general.content.footer.footer_content'))
+                        {{ core()->getConfigData('general.content.footer.footer_content') }}
+                    @else
+                        {!! trans('admin::app.footer.copy-right') !!}
+                    @endif
+                </p>
+            </div>
+        @endif
+
+        <overlay-loader :is-open="show_loader"></overlay-loader>
+    </div>
+
+    <script type="text/javascript">
+        window.flashMessages = [];
+
+        @if ($success = session('success'))
+            window.flashMessages = [{'type': 'alert-success', 'message': "{{ $success }}" }];
+        @elseif ($warning = session('warning'))
+            window.flashMessages = [{'type': 'alert-warning', 'message': "{{ $warning }}" }];
+        @elseif ($error = session('error'))
+            window.flashMessages = [{'type': 'alert-error', 'message': "{{ $error }}" }];
+        @elseif ($info = session('info'))
+            window.flashMessages = [{'type': 'alert-info', 'message': "{{ $info }}" }];
+        @endif
+
+        window.serverErrors = [];
+
+        @if (isset($errors))
+            @if (count($errors))
+                window.serverErrors = @json($errors->getMessages());
+            @endif
+        @endif
+    </script>
+
+    <script type="text/javascript" src="{{ bagisto_asset('js/shop.js') }}"></script>
+    <script type="text/javascript" src="{{ asset('vendor/webkul/ui/assets/js/ui.js') }}"></script>
+
+    @stack('scripts')
+
+    {!! view_render_event('bagisto.shop.layout.body.after') !!}
+
+    <div class="modal-overlay"></div>
+
+    <script>
+        {!! core()->getConfigData('general.content.custom_scripts.custom_javascript') !!}
+    </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/resources/themes/shop/views/partials/pagination.blade.php b/resources/themes/shop/views/partials/pagination.blade.php
new file mode 100644
index 000000000..7350ddb24
--- /dev/null
+++ b/resources/themes/shop/views/partials/pagination.blade.php
@@ -0,0 +1,50 @@
+@if ($paginator->hasPages())
+    <div class="pagination shop mt-50">
+        {{-- Previous Page Link --}}
+        @if ($paginator->onFirstPage())
+            <a class="page-item previous">
+                <i class="icon angle-left-icon"></i>
+            </a>
+        @else
+            <a data-page="{{ urldecode($paginator->previousPageUrl()) }}" href="{{ urldecode($paginator->previousPageUrl()) }}" id="previous" class="page-item previous">
+                <i class="icon angle-left-icon"></i>
+            </a>
+        @endif
+
+        {{-- Pagination Elements --}}
+        @foreach ($elements as $element)
+            {{-- "Three Dots" Separator --}}
+            @if (is_string($element))
+                <a class="page-item disabled" aria-disabled="true">
+                    {{ $element }}
+                </a>
+            @endif
+
+            {{-- Array Of Links --}}
+            @if (is_array($element))
+                @foreach ($element as $page => $url)
+                    @if ($page == $paginator->currentPage())
+                        <a class="page-item active">
+                            {{ $page }}
+                        </a>
+                    @else
+                        <a class="page-item as" href="{{ urldecode($url) }}">
+                            {{ $page }}
+                        </a>
+                    @endif
+                @endforeach
+            @endif
+        @endforeach
+
+        {{-- Next Page Link --}}
+        @if ($paginator->hasMorePages())
+            <a href="{{ urldecode($paginator->nextPageUrl()) }}" data-page="{{ urldecode($paginator->nextPageUrl()) }}" id="next" class="page-item next">
+                <i class="icon angle-right-icon"></i>
+            </a>
+        @else
+            <a class="page-item next">
+                <i class="icon angle-right-icon"></i>
+            </a>
+        @endif
+    </div>
+@endif
diff --git a/resources/themes/shop/views/products/add-buttons.blade.php b/resources/themes/shop/views/products/add-buttons.blade.php
new file mode 100644
index 000000000..2c4bcfa76
--- /dev/null
+++ b/resources/themes/shop/views/products/add-buttons.blade.php
@@ -0,0 +1,26 @@
+@inject ('toolbarHelper', 'Webkul\Product\Helpers\Toolbar')
+
+@php
+    $showCompare = core()->getConfigData('general.content.shop.compare_option') == "1" ? true : false;
+
+    $showWishlist = core()->getConfigData('general.content.shop.wishlist_option') == "1" ? true : false;
+@endphp
+
+<div class="{{ $toolbarHelper->isModeActive('grid') ? 'cart-wish-wrap' : 'default-wrap' }}">
+    <form action="{{ route('cart.add', $product->product_id) }}" method="POST">
+        @csrf
+        <input type="hidden" name="product_id" value="{{ $product->product_id }}">
+        <input type="hidden" name="quantity" value="1">
+        <button class="btn btn-lg btn-primary addtocart" {{ $product->isSaleable() ? '' : 'disabled' }}>{{ ($product->type == 'booking') ?  __('shop::app.products.book-now') :  __('shop::app.products.add-to-cart') }}</button>
+    </form>
+
+    @if ($showWishlist)
+        @include('shop::products.wishlist')
+    @endif
+
+    @if ($showCompare)
+        @include('shop::products.compare', [
+            'productId' => $product->id
+        ])
+    @endif
+</div>
\ No newline at end of file
diff --git a/resources/themes/shop/views/products/add-to-cart.blade.php b/resources/themes/shop/views/products/add-to-cart.blade.php
new file mode 100644
index 000000000..6887730ee
--- /dev/null
+++ b/resources/themes/shop/views/products/add-to-cart.blade.php
@@ -0,0 +1,12 @@
+{!! view_render_event('bagisto.shop.products.add_to_cart.before', ['product' => $product]) !!}
+
+@php
+    $width = (core()->getConfigData('catalog.products.storefront.buy_now_button_display') == 1) ? '49' : '95';
+@endphp
+
+<button type="submit" class="btn btn-lg btn-primary addtocart" {{ ! $product->isSaleable() ? 'disabled' : '' }}
+style="width: <?php echo $width.'%';?>;">
+    {{ ($product->type == 'booking') ?  __('shop::app.products.book-now') :  __('shop::app.products.add-to-cart') }}
+</button>
+
+{!! view_render_event('bagisto.shop.products.add_to_cart.after', ['product' => $product]) !!}
\ No newline at end of file
diff --git a/resources/themes/shop/views/products/add-to.blade.php b/resources/themes/shop/views/products/add-to.blade.php
new file mode 100644
index 000000000..88af2a27d
--- /dev/null
+++ b/resources/themes/shop/views/products/add-to.blade.php
@@ -0,0 +1,9 @@
+{!! view_render_event('bagisto.shop.products.add_to.before', ['product' => $product]) !!}
+
+<div class="cart-fav-seg">
+    @include ('shop::products.add-to-cart', ['product' => $product])
+
+    @include('shop::products.wishlist')
+</div>
+
+{!! view_render_event('bagisto.shop.products.add_to.after', ['product' => $product]) !!}
\ No newline at end of file
diff --git a/resources/themes/shop/views/products/buy-now.blade.php b/resources/themes/shop/views/products/buy-now.blade.php
new file mode 100644
index 000000000..74bba5273
--- /dev/null
+++ b/resources/themes/shop/views/products/buy-now.blade.php
@@ -0,0 +1,7 @@
+{!! view_render_event('bagisto.shop.products.buy_now.before', ['product' => $product]) !!}
+
+<button type="submit" class="btn btn-lg btn-primary buynow" {{ ! $product->isSaleable(1) ? 'disabled' : '' }}>
+    {{ __('shop::app.products.buy-now') }}
+</button>
+
+{!! view_render_event('bagisto.shop.products.buy_now.after', ['product' => $product]) !!}
\ No newline at end of file
diff --git a/resources/themes/shop/views/products/compare.blade.php b/resources/themes/shop/views/products/compare.blade.php
new file mode 100644
index 000000000..6e371e981
--- /dev/null
+++ b/resources/themes/shop/views/products/compare.blade.php
@@ -0,0 +1,129 @@
+<compare-component product-id="{{ $productId }}"></compare-component>
+
+@push('scripts')
+
+    <script type="text/x-template" id="compare-component-template">
+        <a
+            class="unset text-right"
+            title="{{  __('shop::app.customer.compare.add-tooltip') }}"
+            @click="addProductToCompare"
+            style="cursor: pointer">
+            <img src="{{ asset('themes/default/assets/images/compare_arrows.png') }}" alt="" />
+        </a>
+    </script>
+
+    <script>
+        Vue.component('compare-component', {
+            props: ['productId'],
+
+            template: '#compare-component-template',
+
+            data: function () {
+                return {
+                    'baseUrl': "{{ url()->to('/') }}",
+                    'customer': '{{ auth()->guard('customer')->user() ? "true" : "false" }}' == "true",
+                }
+            },
+
+            methods: {
+                'addProductToCompare': function () {
+                    if (this.customer == "true" || this.customer == true) {
+                        this.$http.put(
+                            `${this.baseUrl}/comparison`, {
+                                productId: this.productId,
+                            }
+                        ).then(response => {
+                            window.flashMessages = [{
+                                'type': `alert-${response.data.status}`,
+                                'message': response.data.message
+                            }];
+
+                            this.$root.addFlashMessages()
+                        }).catch(error => {
+                            window.flashMessages = [{
+                                'type': `alert-danger`,
+                                'message': "{{ __('shop::app.common.error') }}"
+                            }];
+
+                            this.$root.addFlashMessages()
+                        });
+                    } else {
+                        let updatedItems = [this.productId];
+                        let existingItems = this.getStorageValue('compared_product');
+
+                        if (existingItems) {
+                            if (existingItems.indexOf(this.productId) == -1) {
+                                updatedItems = existingItems.concat(updatedItems);
+
+                                this.setStorageValue('compared_product', updatedItems);
+
+                                window.flashMessages = [{
+                                    'type': `alert-success`,
+                                    'message': "{{ __('shop::app.customer.compare.added') }}"
+                                }];
+
+                                this.$root.addFlashMessages()
+                            } else {
+                                window.flashMessages = [{
+                                    'type': `alert-success`,
+                                    'message': "{{ __('shop::app.customer.compare.already_added') }}"
+                                }];
+
+                                this.$root.addFlashMessages()
+                            }
+                        } else {
+                            this.setStorageValue('compared_product', updatedItems);
+
+                            window.flashMessages = [{
+                                'type': `alert-success`,
+                                'message': "{{ __('shop::app.customer.compare.added') }}"
+                            }];
+
+                                this.$root.addFlashMessages()
+                        }
+                    }
+
+                    this.updateCompareCount();
+                },
+
+                'getStorageValue': function (key) {
+                    let value = window.localStorage.getItem(key);
+
+                    if (value) {
+                        value = JSON.parse(value);
+                    }
+
+                    return value;
+                },
+
+                'setStorageValue': function (key, value) {
+                    window.localStorage.setItem(key, JSON.stringify(value));
+
+                    return true;
+                },
+
+                'updateCompareCount': function () {
+                    if (this.customer == "true" || this.customer == true) {
+                        this.$http.get(`${this.baseUrl}/items-count`)
+                        .then(response => {
+                            $('#compare-items-count').html(response.data.compareProductsCount);
+                        })
+                        .catch(exception => {
+                            window.flashMessages = [{
+                                'type': `alert-error`,
+                                'message': "{{ __('shop::app.common.error') }}"
+                            }];
+
+                            this.$root.addFlashMessages();
+                        });
+                    } else {
+                        let comparedItems = JSON.parse(localStorage.getItem('compared_product'));
+                        comparedItemsCount = comparedItems ? comparedItems.length : 0;
+
+                        $('#compare-items-count').html(comparedItemsCount);
+                    }
+                }
+            }
+        });
+    </script>
+@endpush
\ No newline at end of file
diff --git a/resources/themes/shop/views/products/index.blade.php b/resources/themes/shop/views/products/index.blade.php
new file mode 100644
index 000000000..cd950fb94
--- /dev/null
+++ b/resources/themes/shop/views/products/index.blade.php
@@ -0,0 +1,135 @@
+@extends('shop::layouts.master')
+
+@section('page_title')
+    {{ trim($category->meta_title) != "" ? $category->meta_title : $category->name }}
+@stop
+
+@section('seo')
+    <meta name="description" content="{{ trim($category->meta_description) != "" ? $category->meta_description : \Illuminate\Support\Str::limit(strip_tags($category->description), 120, '') }}"/>
+
+    <meta name="keywords" content="{{ $category->meta_keywords }}"/>
+
+    @if (core()->getConfigData('catalog.rich_snippets.categories.enable'))
+        <script type="application/ld+json">
+            {!! app('Webkul\Product\Helpers\SEO')->getCategoryJsonLd($category) !!}
+        </script>
+    @endif
+@stop
+
+@section('content-wrapper')
+    @inject ('productRepository', 'Webkul\Product\Repositories\ProductRepository')
+
+    <div class="main">
+        {!! view_render_event('bagisto.shop.products.index.before', ['category' => $category]) !!}
+
+        <div class="category-container">
+
+            @if (in_array($category->display_mode, [null, 'products_only', 'products_and_description']))
+                @include ('shop::products.list.layered-navigation')
+            @endif
+
+            <div class="category-block" @if ($category->display_mode == 'description_only') style="width: 100%" @endif>
+                <div class="hero-image mb-35">
+                    @if (!is_null($category->image))
+                        <img class="logo" src="{{ $category->image_url }}" alt="" />
+                    @endif
+                </div>
+
+                @if (in_array($category->display_mode, [null, 'description_only', 'products_and_description']))
+                    @if ($category->description)
+                        <div class="category-description">
+                            {!! $category->description !!}
+                        </div>
+                    @endif
+                @endif
+
+                @if (in_array($category->display_mode, [null, 'products_only', 'products_and_description']))
+                    <?php $products = $productRepository->getAll($category->id); ?>
+
+                    @include ('shop::products.list.toolbar')
+
+                    @if ($products->count())
+
+                        @inject ('toolbarHelper', 'Webkul\Product\Helpers\Toolbar')
+
+                        @if ($toolbarHelper->getCurrentMode() == 'grid')
+                            <div class="product-grid-3">
+                                @foreach ($products as $productFlat)
+
+                                    @include ('shop::products.list.card', ['product' => $productFlat])
+
+                                @endforeach
+                            </div>
+                        @else
+                            <div class="product-list">
+                                @foreach ($products as $productFlat)
+
+                                    @include ('shop::products.list.card', ['product' => $productFlat])
+
+                                @endforeach
+                            </div>
+                        @endif
+
+                        {!! view_render_event('bagisto.shop.products.index.pagination.before', ['category' => $category]) !!}
+
+                        <div class="bottom-toolbar">
+                            {{ $products->appends(request()->input())->links() }}
+                        </div>
+
+                        {!! view_render_event('bagisto.shop.products.index.pagination.after', ['category' => $category]) !!}
+
+                    @else
+
+                        <div class="product-list empty">
+                            <h2>{{ __('shop::app.products.whoops') }}</h2>
+
+                            <p>
+                                {{ __('shop::app.products.empty') }}
+                            </p>
+                        </div>
+
+                    @endif
+                @endif
+            </div>
+        </div>
+
+        {!! view_render_event('bagisto.shop.products.index.after', ['category' => $category]) !!}
+    </div>
+@stop
+
+@push('scripts')
+    <script>
+        $(document).ready(function() {
+            $('.responsive-layred-filter').css('display','none');
+            $(".sort-icon, .filter-icon").on('click', function(e){
+                var currentElement = $(e.currentTarget);
+                if (currentElement.hasClass('sort-icon')) {
+                    currentElement.removeClass('sort-icon');
+                    currentElement.addClass('icon-menu-close-adj');
+                    currentElement.next().removeClass();
+                    currentElement.next().addClass('icon filter-icon');
+                    $('.responsive-layred-filter').css('display','none');
+                    $('.pager').css('display','flex');
+                    $('.pager').css('justify-content','space-between');
+                } else if (currentElement.hasClass('filter-icon')) {
+                    currentElement.removeClass('filter-icon');
+                    currentElement.addClass('icon-menu-close-adj');
+                    currentElement.prev().removeClass();
+                    currentElement.prev().addClass('icon sort-icon');
+                    $('.pager').css('display','none');
+                    $('.responsive-layred-filter').css('display','block');
+                    $('.responsive-layred-filter').css('margin-top','10px');
+                } else {
+                    currentElement.removeClass('icon-menu-close-adj');
+                    $('.responsive-layred-filter').css('display','none');
+                    $('.pager').css('display','none');
+                    if ($(this).index() == 0) {
+                        currentElement.addClass('sort-icon');
+                    } else {
+                        currentElement.addClass('filter-icon');
+                    }
+                }
+            });
+        });
+    </script>
+@endpush
\ No newline at end of file
diff --git a/resources/themes/shop/views/products/list/card.blade.php b/resources/themes/shop/views/products/list/card.blade.php
new file mode 100644
index 000000000..3acde17f7
--- /dev/null
+++ b/resources/themes/shop/views/products/list/card.blade.php
@@ -0,0 +1,36 @@
+{!! view_render_event('bagisto.shop.products.list.card.before', ['product' => $product]) !!}
+
+<div class="product-card">
+
+    <?php $productBaseImage = productimage()->getProductBaseImage($product); ?>
+
+    @if ($product->new)
+        <div class="sticker new">
+            {{ __('shop::app.products.new') }}
+        </div>
+    @endif
+
+    <div class="product-image">
+        <a href="{{ route('shop.productOrCategory.index', $product->url_key) }}" title="{{ $product->name }}">
+            <img src="{{ $productBaseImage['medium_image_url'] }}" onerror="this.src='{{ asset('vendor/webkul/ui/assets/images/product/meduim-product-placeholder.png') }}'" alt="" height="500"/>
+        </a>
+    </div>
+
+    <div class="product-information">
+
+        <div class="product-name">
+            <a href="{{ route('shop.productOrCategory.index', $product->url_key) }}" title="{{ $product->name }}">
+                <span>
+                    {{ $product->name }}
+                </span>
+            </a>
+        </div>
+
+        @include ('shop::products.price', ['product' => $product])
+
+        @include('shop::products.add-buttons', ['product' => $product])
+    </div>
+
+</div>
+
+{!! view_render_event('bagisto.shop.products.list.card.after', ['product' => $product]) !!}
\ No newline at end of file
diff --git a/resources/themes/shop/views/products/list/layered-navigation.blade.php b/resources/themes/shop/views/products/list/layered-navigation.blade.php
new file mode 100644
index 000000000..96ebd303c
--- /dev/null
+++ b/resources/themes/shop/views/products/list/layered-navigation.blade.php
@@ -0,0 +1,219 @@
+@inject ('attributeRepository', 'Webkul\Attribute\Repositories\AttributeRepository')
+
+@inject ('productFlatRepository', 'Webkul\Product\Repositories\ProductFlatRepository')
+
+@inject ('productRepository', 'Webkul\Product\Repositories\ProductRepository')
+
+<?php
+    $filterAttributes = $attributes = [];
+    $maxPrice = 0;
+
+    if (isset($category)) {
+        $filterAttributes = $productFlatRepository->getProductsRelatedFilterableAttributes($category);
+
+        $maxPrice = core()->convertPrice($productFlatRepository->getCategoryProductMaximumPrice($category));
+    }
+
+    if (! count($filterAttributes) > 0) {
+        $filterAttributes = $attributeRepository->getFilterAttributes();
+    }
+?>
+
+<div class="layered-filter-wrapper">
+
+    {!! view_render_event('bagisto.shop.products.list.layered-nagigation.before') !!}
+
+    <layered-navigation></layered-navigation>
+
+    {!! view_render_event('bagisto.shop.products.list.layered-nagigation.after') !!}
+
+</div>
+
+@push('scripts')
+    <script type="text/x-template" id="layered-navigation-template">
+        <div>
+
+            <div class="filter-title">
+                {{ __('shop::app.products.layered-nav-title') }}
+            </div>
+
+            <div class="filter-content">
+
+                <div class="filter-attributes">
+
+                    <filter-attribute-item v-for='(attribute, index) in attributes' :attribute="attribute" :key="index" :index="index" @onFilterAdded="addFilters(attribute.code, $event)" :appliedFilterValues="appliedFilters[attribute.code]">
+                    </filter-attribute-item>
+
+                </div>
+            </div>
+        </div>
+    </script>
+
+    <script type="text/x-template" id="filter-attribute-item-template">
+        <div class="filter-attributes-item" :class="[active ? 'active' : '']">
+
+            <div class="filter-attributes-title" @click="active = !active">
+                @{{ attribute.name ? attribute.name : attribute.admin_name }}
+
+                <div class="pull-right">
+                    <span class="remove-filter-link" v-if="appliedFilters.length" @click.stop="clearFilters()">
+                        {{ __('shop::app.products.remove-filter-link-title') }}
+                    </span>
+
+                    <i class="icon" :class="[active ? 'arrow-up-icon' : 'arrow-down-icon']"></i>
+                </div>
+            </div>
+
+            <div class="filter-attributes-content">
+
+                <ol class="items" v-if="attribute.type != 'price'">
+                    <li class="item" v-for='(option, index) in attribute.options'>
+
+                        <span class="checkbox">
+                            <input type="checkbox" :id="option.id" v-bind:value="option.id" v-model="appliedFilters" @change="addFilter($event)"/>
+                            <label class="checkbox-view" :for="option.id"></label>
+                            @{{ option.label ? option.label : option.admin_name }}
+                        </span>
+
+                    </li>
+                </ol>
+
+                <div class="price-range-wrapper" v-if="attribute.type == 'price'">
+                    <vue-slider
+                        ref="slider"
+                        v-model="sliderConfig.value"
+                        :process-style="sliderConfig.processStyle"
+                        :tooltip-style="sliderConfig.tooltipStyle"
+                        :max="sliderConfig.max"
+                        :lazy="true"
+                        @change="priceRangeUpdated($event)"
+                    ></vue-slider>
+                </div>
+
+            </div>
+
+        </div>
+    </script>
+
+    <script>
+        Vue.component('layered-navigation', {
+
+            template: '#layered-navigation-template',
+
+            data: function() {
+                return {
+                    attributes: @json($filterAttributes),
+
+                    appliedFilters: {}
+                }
+            },
+
+            created: function () {
+                var urlParams = new URLSearchParams(window.location.search);
+
+                var this_this = this;
+
+                urlParams.forEach(function (value, index) {
+                    this_this.appliedFilters[index] = value.split(',');
+                });
+            },
+
+            methods: {
+                addFilters: function (attributeCode, filters) {
+                    if (filters.length) {
+                        this.appliedFilters[attributeCode] = filters;
+                    } else {
+                        delete this.appliedFilters[attributeCode];
+                    }
+
+                    this.applyFilter()
+                },
+
+                applyFilter: function () {
+                    var params = [];
+
+                    for(key in this.appliedFilters) {
+                        if (key != 'page') {
+                            params.push(key + '=' + this.appliedFilters[key].join(','))
+                        }
+                    }
+
+                    window.location.href = "?" + params.join('&');
+                }
+            }
+        });
+
+        Vue.component('filter-attribute-item', {
+
+            template: '#filter-attribute-item-template',
+
+            props: ['index', 'attribute', 'appliedFilterValues'],
+
+            data: function() {
+                let maxPrice  = @json($maxPrice);
+
+                maxPrice = maxPrice ? ((parseInt(maxPrice) !== 0 || maxPrice) ? parseInt(maxPrice) : 500) : 500;
+
+                return {
+                    appliedFilters: [],
+
+                    active: false,
+
+                    sliderConfig: {
+                        value: [
+                            0,
+                            0
+                        ],
+                        max: maxPrice,
+                        processStyle: {
+                            "backgroundColor": "#FF6472"
+                        },
+                        tooltipStyle: {
+                            "backgroundColor": "#FF6472",
+                            "borderColor": "#FF6472"
+                        }
+                    }
+                }
+            },
+
+            created: function () {
+                if (!this.index)
+                    this.active = true;
+
+                if (this.appliedFilterValues && this.appliedFilterValues.length) {
+                    this.appliedFilters = this.appliedFilterValues;
+
+                    if (this.attribute.type == 'price') {
+                        this.sliderConfig.value = this.appliedFilterValues;
+                    }
+
+                    this.active = true;
+                }
+            },
+
+            methods: {
+                addFilter: function (e) {
+                    this.$emit('onFilterAdded', this.appliedFilters)
+                },
+
+                priceRangeUpdated: function (value) {
+                    this.appliedFilters = value;
+
+                    this.$emit('onFilterAdded', this.appliedFilters)
+                },
+
+                clearFilters: function () {
+                    if (this.attribute.type == 'price') {
+                        this.sliderConfig.value = [0, 0];
+                    }
+
+                    this.appliedFilters = [];
+
+                    this.$emit('onFilterAdded', this.appliedFilters)
+                }
+            }
+
+        });
+
+    </script>
+@endpush
diff --git a/resources/themes/shop/views/products/list/toolbar.blade.php b/resources/themes/shop/views/products/list/toolbar.blade.php
new file mode 100644
index 000000000..44042ae84
--- /dev/null
+++ b/resources/themes/shop/views/products/list/toolbar.blade.php
@@ -0,0 +1,83 @@
+@inject ('toolbarHelper', 'Webkul\Product\Helpers\Toolbar')
+
+{!! view_render_event('bagisto.shop.products.list.toolbar.before') !!}
+
+<div class="top-toolbar mb-35">
+
+    <div class="page-info">
+        <span>
+            {{ __('shop::app.products.pager-info', ['showing' => $products->firstItem() . '-' . $products->lastItem(), 'total' => $products->total()]) }}
+        </span>
+
+        <span class="sort-filter">
+            <i class="icon sort-icon" id="sort" ></i>
+            <i class="icon filter-icon" id="filter"></i>
+        </span>
+    </div>
+
+    <div class="pager">
+
+        <div class="view-mode">
+            @if ($toolbarHelper->isModeActive('grid'))
+                <span class="grid-view">
+                    <i class="icon grid-view-icon"></i>
+                </span>
+            @else
+                <a href="{{ $toolbarHelper->getModeUrl('grid') }}" class="grid-view" aria-label="Grid">
+                    <i class="icon grid-view-icon"></i>
+                </a>
+            @endif
+
+            @if ($toolbarHelper->isModeActive('list'))
+                <span class="list-view">
+                    <i class="icon list-view-icon"></i>
+                </span>
+            @else
+                <a href="{{ $toolbarHelper->getModeUrl('list') }}" class="list-view" aria-label="list">
+                    <i class="icon list-view-icon"></i>
+                </a>
+            @endif
+        </div>
+
+        <div class="sorter">
+            <label for="sort-by-toolbar">{{ __('shop::app.products.sort-by') }}</label>
+
+            <select onchange="window.location.href = this.value" id="sort-by-toolbar">
+
+                @foreach ($toolbarHelper->getAvailableOrders() as $key => $order)
+
+                    <option value="{{ $toolbarHelper->getOrderUrl($key) }}" {{ $toolbarHelper->isOrderCurrent($key) ? 'selected' : '' }}>
+                        {{ __('shop::app.products.' . $order) }}
+                    </option>
+
+                @endforeach
+
+            </select>
+        </div>
+
+        <div class="limiter">
+            <label for="show-toolbar">{{ __('shop::app.products.show') }}</label>
+
+            <select onchange="window.location.href = this.value" id="show-toolbar">
+
+                @foreach ($toolbarHelper->getAvailableLimits() as $limit)
+
+                    <option value="{{ $toolbarHelper->getLimitUrl($limit) }}" {{ $toolbarHelper->isLimitCurrent($limit) ? 'selected' : '' }}>
+                        {{ $limit }}
+                    </option>
+
+                @endforeach
+
+            </select>
+        </div>
+
+    </div>
+
+</div>
+
+{!! view_render_event('bagisto.shop.products.list.toolbar.after') !!}
+
+
+<div class="responsive-layred-filter mb-20">
+    <layered-navigation></layered-navigation>
+</div>
\ No newline at end of file
diff --git a/resources/themes/shop/views/products/price.blade.php b/resources/themes/shop/views/products/price.blade.php
new file mode 100644
index 000000000..bed2c056d
--- /dev/null
+++ b/resources/themes/shop/views/products/price.blade.php
@@ -0,0 +1,7 @@
+{!! view_render_event('bagisto.shop.products.price.before', ['product' => $product]) !!}
+
+<div class="product-price">
+    {!! $product->getTypeInstance()->getPriceHtml() !!}
+</div>
+
+{!! view_render_event('bagisto.shop.products.price.after', ['product' => $product]) !!}
\ No newline at end of file
diff --git a/resources/themes/shop/views/products/review.blade.php b/resources/themes/shop/views/products/review.blade.php
new file mode 100644
index 000000000..5c9491b1f
--- /dev/null
+++ b/resources/themes/shop/views/products/review.blade.php
@@ -0,0 +1,28 @@
+@inject ('reviewHelper', 'Webkul\Product\Helpers\Review')
+
+{!! view_render_event('bagisto.shop.products.review.before', ['product' => $product]) !!}
+
+@if ($total = $reviewHelper->getTotalReviews($product))
+    <div class="product-ratings mb-10">
+        <span class="stars">
+            @for ($i = 1; $i <= 5; $i++)
+              @if($i <= round($reviewHelper->getAverageRating($product)))
+              <span class="icon star-icon"></span>
+              @else
+              <span class="icon star-icon-blank"></span>
+              @endif
+            @endfor
+        </span>
+
+        <div class="total-reviews">
+            {{
+                __('shop::app.products.total-rating', [
+                        'total_rating' => $reviewHelper->getAverageRating($product),
+                        'total_reviews' => $total,
+                    ])
+            }}
+        </div>
+    </div>
+@endif
+
+{!! view_render_event('bagisto.shop.products.review.after', ['product' => $product]) !!}
diff --git a/resources/themes/shop/views/products/reviews/create.blade.php b/resources/themes/shop/views/products/reviews/create.blade.php
new file mode 100644
index 000000000..53f8de210
--- /dev/null
+++ b/resources/themes/shop/views/products/reviews/create.blade.php
@@ -0,0 +1,117 @@
+@extends('shop::layouts.master')
+
+@section('page_title')
+    {{ __('shop::app.reviews.add-review-page-title') }} - {{ $product->name }}
+@endsection
+
+@section('content-wrapper')
+
+    <section class="review">
+
+        <div class="review-layouter mb-20">
+            <div class="product-info">
+
+                <?php $productBaseImage = productimage()->getProductBaseImage($product); ?>
+
+                <div class="product-image">
+                    <a href="{{ route('shop.productOrCategory.index', $product->url_key) }}" title="{{ $product->name }}">
+                        <img src="{{ $productBaseImage['medium_image_url'] }}" alt="" />
+                    </a>
+                </div>
+
+                <div class="product-name mt-20">
+                    <a href="{{ route('shop.productOrCategory.index', $product->url_key) }}" title="{{ $product->name }}">
+                        <span>{{ $product->name }}</span>
+                    </a>
+                </div>
+
+                @include('shop::products.price')
+
+            </div>
+
+            <div class="review-form">
+                <form method="POST" action="{{ route('shop.reviews.store', $product->product_id ) }}" @submit.prevent="onSubmit">
+                    @csrf
+
+                    <div class="heading mt-10 mb-25">
+                        <span>{{ __('shop::app.reviews.write-review') }}</span>
+                    </div>
+
+                    <div class="control-group" :class="[errors.has('rating') ? 'has-error' : '']">
+                        <label for="title" class="required">
+                            {{ __('admin::app.customers.reviews.rating') }}
+                        </label>
+
+                        <div class="stars">
+                            <span class="star star-5" for="star-5" onclick="calculateRating(id)" id="1"></span>
+                            <span class="star star-4" for="star-4" onclick="calculateRating(id)" id="2"></span>
+                            <span class="star star-3" for="star-3" onclick="calculateRating(id)" id="3"></span>
+                            <span class="star star-2" for="star-2" onclick="calculateRating(id)" id="4"></span>
+                            <span class="star star-1" for="star-1" onclick="calculateRating(id)" id="5"></span>
+                        </div>
+
+                        <input type="hidden" id="rating" name="rating" v-validate="'required'">
+
+                        <div class="control-error" v-if="errors.has('rating')">@{{ errors.first('rating') }}</div>
+                    </div>
+
+                    <div class="control-group" :class="[errors.has('title') ? 'has-error' : '']">
+                        <label for="title" class="required">
+                            {{ __('shop::app.reviews.title') }}
+                        </label>
+                        <input  type="text" class="control" name="title" v-validate="'required'" value="{{ old('title') }}">
+                        <span class="control-error" v-if="errors.has('title')">@{{ errors.first('title') }}</span>
+                    </div>
+
+                    @if (core()->getConfigData('catalog.products.review.guest_review') && ! auth()->guard('customer')->user())
+                        <div class="control-group" :class="[errors.has('name') ? 'has-error' : '']">
+                            <label for="title" class="required">
+                                {{ __('shop::app.reviews.name') }}
+                            </label>
+                            <input  type="text" class="control" name="name" v-validate="'required'" value="{{ old('name') }}">
+                            <span class="control-error" v-if="errors.has('name')">@{{ errors.first('name') }}</span>
+                        </div>
+                    @endif
+
+                    <div class="control-group" :class="[errors.has('comment') ? 'has-error' : '']">
+                        <label for="comment" class="required">
+                            {{ __('admin::app.customers.reviews.comment') }}
+                        </label>
+                        <textarea type="text" class="control" name="comment" v-validate="'required'" value="{{ old('comment') }}">
+                        </textarea>
+                        <span class="control-error" v-if="errors.has('comment')">@{{ errors.first('comment') }}</span>
+                    </div>
+
+                    <button type="submit" class="btn btn-lg btn-primary">
+                        {{ __('shop::app.reviews.submit') }}
+                    </button>
+
+                </form>
+            </div>
+        </div>
+
+    </section>
+
+@endsection
+
+
+@push('scripts')
+
+    <script>
+
+        function calculateRating(id) {
+            var a = document.getElementById(id);
+            document.getElementById("rating").value = id;
+
+            for (let i=1 ; i <= 5 ; i++) {
+                if (id >= i) {
+                    document.getElementById(i).style.color="#242424";
+                } else {
+                    document.getElementById(i).style.color="#d4d4d4";
+                }
+            }
+        }
+
+    </script>
+
+@endpush
diff --git a/resources/themes/shop/views/products/reviews/index.blade.php b/resources/themes/shop/views/products/reviews/index.blade.php
new file mode 100644
index 000000000..45ae15a7a
--- /dev/null
+++ b/resources/themes/shop/views/products/reviews/index.blade.php
@@ -0,0 +1,163 @@
+@extends('shop::layouts.master')
+
+@section('page_title')
+    {{ __('shop::app.reviews.product-review-page-title') }} - {{ $product->name }}
+@endsection
+
+@section('content-wrapper')
+
+    <section class="review">
+
+        <div class="review-layouter">
+            @inject ('reviewHelper', 'Webkul\Product\Helpers\Review')
+
+            <?php $productBaseImage = productimage()->getProductBaseImage($product); ?>
+
+            <div class="product-info">
+                <div class="product-image">
+                    <a href="{{ route('shop.productOrCategory.index', $product->url_key) }}" title="{{ $product->name }}">
+                        <img src="{{ $productBaseImage['medium_image_url'] }}" alt="" />
+                    </a>
+                </div>
+
+                <div class="product-name mt-20">
+                    <a href="{{ route('shop.productOrCategory.index', $product->url_key) }}" title="{{ $product->name }}">
+                        <span>{{ $product->name }}</span>
+                    </a>
+                </div>
+
+                <div class="product-price mt-10">
+                    @if ($product->getTypeInstance()->haveSpecialPrice())
+                        <span class="pro-price">{{ core()->currency($product->getTypeInstance()->getSpecialPrice()) }}</span>
+                    @else
+                        <span class="pro-price">{{ core()->currency($product->getTypeInstance()->getMinimalPrice()) }}</span>
+                    @endif
+                </div>
+            </div>
+
+            <div class="review-form">
+                <div class="heading mt-10">
+                    <span> {{ __('shop::app.reviews.rating-reviews') }} </span>
+
+                    @if (core()->getConfigData('catalog.products.review.guest_review') || auth()->guard('customer')->check())
+                        <a href="{{ route('shop.reviews.create', $product->url_key) }}" class="btn btn-lg btn-primary right">
+                            {{ __('shop::app.products.write-review-btn') }}
+                        </a>
+                    @endif
+                </div>
+
+                <div class="ratings-reviews mt-35">
+                    <div class="left-side">
+                        <span class="rate">
+                            {{ $reviewHelper->getAverageRating($product) }}
+                        </span>
+
+                        <span class="stars">
+                            @for ($i = 1; $i <= 5; $i++)
+
+                              @if($i <= round($reviewHelper->getAverageRating($product)))
+                                <span class="icon star-icon"></span>
+                              @else
+                                <span class="icon star-icon-blank"></span>
+                              @endif
+
+                            @endfor
+                        </span>
+
+                        <div class="total-reviews mt-5">
+                            {{ __('shop::app.reviews.ratingreviews', [
+                                'rating' => $reviewHelper->getAverageRating($product),
+                                'review' => $reviewHelper->getTotalReviews($product)])
+                            }}
+                        </div>
+                    </div>
+
+                    <div class="right-side">
+
+                        @foreach ($reviewHelper->getPercentageRating($product) as $key => $count)
+                            <div class="rater 5star">
+                                <div class="rate-number" id={{ $key }}{{ __('shop::app.reviews.id-star')  }}></div>
+                                <div class="star-name">{{ __('shop::app.reviews.star') }}</div>
+                                <div class="line-bar">
+                                    <div class="line-value" id="{{ $key }}"></div>
+                                </div>
+                                <div class="percentage">
+                                    <span>
+                                        {{ __('shop::app.reviews.percentage', ['percentage' => $count]) }}
+                                    </span>
+                                </div>
+                            </div>
+                            <br/>
+                        @endforeach
+
+                    </div>
+                </div>
+
+                <div class="rating-reviews">
+                    <div class="reviews">
+
+                        @foreach ($reviewHelper->getReviews($product)->paginate(10) as $review)
+                            <div class="review">
+                                <div class="title">
+                                    {{ $review->title }}
+                                </div>
+
+                                <span class="stars">
+                                    @for ($i = 1; $i <= 5; $i++)
+
+                                      @if($i <= $review->rating)
+                                        <span class="icon star-icon"></span>
+                                      @else
+                                        <span class="icon star-icon-blank"></span>
+                                      @endif
+
+                                    @endfor
+                                </span>
+
+                                <div class="message">
+                                    {{ $review->comment }}
+                                </div>
+
+                                <div class="reviewer-details">
+                                    <span class="by">
+                                        {{ __('shop::app.products.by', ['name' => $review->name]) }},
+                                    </span>
+
+                                    <span class="when">
+                                        {{ core()->formatDate($review->created_at, 'F d, Y') }}
+                                    </span>
+                                </div>
+                            </div>
+                        @endforeach
+
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </section>
+
+@endsection
+
+@push('scripts')
+
+    <script>
+
+        window.onload = (function() {
+            var percentage = {};
+            <?php foreach ($reviewHelper->getPercentageRating($product) as $key => $count) { ?>
+
+                percentage = <?php echo "'$count';"; ?>
+                id = <?php echo "'$key';"; ?>
+                idNumber = id + 'star';
+
+                document.getElementById(id).style.width = percentage + "%";
+                document.getElementById(id).style.height = 4 + "px";
+                document.getElementById(idNumber).innerHTML = id ;
+
+            <?php } ?>
+        })();
+
+    </script>
+
+@endpush
diff --git a/resources/themes/shop/views/products/sharelinks.blade.php b/resources/themes/shop/views/products/sharelinks.blade.php
new file mode 100644
index 000000000..fd0807215
--- /dev/null
+++ b/resources/themes/shop/views/products/sharelinks.blade.php
@@ -0,0 +1 @@
+<span class="icon share-icon"></span>
diff --git a/resources/themes/shop/views/products/view.blade.php b/resources/themes/shop/views/products/view.blade.php
new file mode 100644
index 000000000..946da0a51
--- /dev/null
+++ b/resources/themes/shop/views/products/view.blade.php
@@ -0,0 +1,299 @@
+@extends('shop::layouts.master')
+
+@section('page_title')
+    {{ trim($product->meta_title) != "" ? $product->meta_title : $product->name }}
+@stop
+
+@section('seo')
+    <meta name="description" content="{{ trim($product->meta_description) != "" ? $product->meta_description : \Illuminate\Support\Str::limit(strip_tags($product->description), 120, '') }}"/>
+
+    <meta name="keywords" content="{{ $product->meta_keywords }}"/>
+
+    @if (core()->getConfigData('catalog.rich_snippets.products.enable'))
+        <script type="application/ld+json">
+            {{ app('Webkul\Product\Helpers\SEO')->getProductJsonLd($product) }}
+        </script>
+    @endif
+
+    <?php $productBaseImage = productimage()->getProductBaseImage($product); ?>
+
+    <meta name="twitter:card" content="summary_large_image" />
+
+    <meta name="twitter:title" content="{{ $product->name }}" />
+
+    <meta name="twitter:description" content="{!! htmlspecialchars(trim(strip_tags($product->description))) !!}" />
+
+    <meta name="twitter:image:alt" content="" />
+
+    <meta name="twitter:image" content="{{ $productBaseImage['medium_image_url'] }}" />
+
+    <meta property="og:type" content="og:product" />
+
+    <meta property="og:title" content="{{ $product->name }}" />
+
+    <meta property="og:image" content="{{ $productBaseImage['medium_image_url'] }}" />
+
+    <meta property="og:description" content="{!! htmlspecialchars(trim(strip_tags($product->description))) !!}" />
+
+    <meta property="og:url" content="{{ route('shop.productOrCategory.index', $product->url_key) }}" />
+@stop
+
+@section('content-wrapper')
+
+    {!! view_render_event('bagisto.shop.products.view.before', ['product' => $product]) !!}
+
+    <section class="product-detail">
+
+        <div class="layouter">
+            <product-view>
+                <div class="form-container">
+                    @csrf()
+
+                    <input type="hidden" name="product_id" value="{{ $product->product_id }}">
+
+                    @include ('shop::products.view.gallery')
+
+                    <div class="details">
+
+                        <div class="product-heading">
+                            <span>{{ $product->name }}</span>
+                        </div>
+
+                        @include ('shop::products.review', ['product' => $product])
+
+                        @include ('shop::products.price', ['product' => $product])
+
+                        @if (count($product->getTypeInstance()->getCustomerGroupPricingOffers()) > 0)
+                            <div class="regular-price">
+                                @foreach ($product->getTypeInstance()->getCustomerGroupPricingOffers() as $offers)
+                                    <p> {{ $offers }} </p>
+                                @endforeach
+                            </div>
+                        @endif
+
+                        @include ('shop::products.view.stock', ['product' => $product])
+
+                        {!! view_render_event('bagisto.shop.products.view.short_description.before', ['product' => $product]) !!}
+
+                        <div class="description">
+                            {!! $product->short_description !!}
+                        </div>
+
+                        {!! view_render_event('bagisto.shop.products.view.short_description.after', ['product' => $product]) !!}
+
+
+                        {!! view_render_event('bagisto.shop.products.view.quantity.before', ['product' => $product]) !!}
+
+                        @if ($product->getTypeInstance()->showQuantityBox())
+                            <quantity-changer></quantity-changer>
+                        @else
+                            <input type="hidden" name="quantity" value="1">
+                        @endif
+
+                        {!! view_render_event('bagisto.shop.products.view.quantity.after', ['product' => $product]) !!}
+
+                        @include ('shop::products.view.configurable-options')
+
+                        @include ('shop::products.view.downloadable')
+
+                        @include ('shop::products.view.grouped-products')
+
+                        @include ('shop::products.view.bundle-options')
+
+                        {!! view_render_event('bagisto.shop.products.view.description.before', ['product' => $product]) !!}
+
+                        <accordian :title="'{{ __('shop::app.products.description') }}'" :active="true">
+                            <div slot="header">
+                                {{ __('shop::app.products.description') }}
+                                <i class="icon expand-icon right"></i>
+                            </div>
+
+                            <div slot="body">
+                                <div class="full-description">
+                                    {!! $product->description !!}
+                                </div>
+                            </div>
+                        </accordian>
+
+                        {!! view_render_event('bagisto.shop.products.view.description.after', ['product' => $product]) !!}
+
+                        @include ('shop::products.view.attributes')
+
+                        @include ('shop::products.view.reviews')
+                    </div>
+                </div>
+            </product-view>
+        </div>
+
+        @include ('shop::products.view.related-products')
+
+        @include ('shop::products.view.up-sells')
+
+    </section>
+
+    {!! view_render_event('bagisto.shop.products.view.after', ['product' => $product]) !!}
+@endsection
+
+@push('scripts')
+
+    <script type="text/x-template" id="product-view-template">
+        <form method="POST" id="product-form" action="{{ route('cart.add', $product->product_id) }}" @click="onSubmit($event)">
+
+            <input type="hidden" name="is_buy_now" v-model="is_buy_now">
+
+            <slot></slot>
+
+        </form>
+    </script>
+
+    <script type="text/x-template" id="quantity-changer-template">
+        <div class="quantity control-group" :class="[errors.has(controlName) ? 'has-error' : '']">
+            <label class="required">{{ __('shop::app.products.quantity') }}</label>
+            <span class="quantity-container">
+                <button type="button" class="decrease" @click="decreaseQty()">-</button>
+
+                <input :name="controlName" class="control" :value="qty" :v-validate="validations" data-vv-as="&quot;{{ __('shop::app.products.quantity') }}&quot;" readonly>
+
+                <button type="button" class="increase" @click="increaseQty()">+</button>
+
+                <span class="control-error" v-if="errors.has(controlName)">@{{ errors.first(controlName) }}</span>
+            </span>
+        </div>
+    </script>
+
+    <script>
+
+        Vue.component('product-view', {
+
+            template: '#product-view-template',
+
+            inject: ['$validator'],
+
+            data: function() {
+                return {
+                    is_buy_now: 0,
+                }
+            },
+
+            methods: {
+                onSubmit: function(e) {
+                    if (e.target.getAttribute('type') != 'submit')
+                        return;
+
+                    e.preventDefault();
+
+                    var this_this = this;
+
+                    this.$validator.validateAll().then(function (result) {
+                        if (result) {
+                            this_this.is_buy_now = e.target.classList.contains('buynow') ? 1 : 0;
+
+                            setTimeout(function() {
+                                document.getElementById('product-form').submit();
+                            }, 0);
+                        }
+                    });
+                }
+            }
+        });
+
+        Vue.component('quantity-changer', {
+            template: '#quantity-changer-template',
+
+            inject: ['$validator'],
+
+            props: {
+                controlName: {
+                    type: String,
+                    default: 'quantity'
+                },
+
+                quantity: {
+                    type: [Number, String],
+                    default: 1
+                },
+
+                minQuantity: {
+                    type: [Number, String],
+                    default: 1
+                },
+
+                validations: {
+                    type: String,
+                    default: 'required|numeric|min_value:1'
+                }
+            },
+
+            data: function() {
+                return {
+                    qty: this.quantity
+                }
+            },
+
+            watch: {
+                quantity: function (val) {
+                    this.qty = val;
+
+                    this.$emit('onQtyUpdated', this.qty)
+                }
+            },
+
+            methods: {
+                decreaseQty: function() {
+                    if (this.qty > this.minQuantity)
+                        this.qty = parseInt(this.qty) - 1;
+
+                    this.$emit('onQtyUpdated', this.qty)
+                },
+
+                increaseQty: function() {
+                    this.qty = parseInt(this.qty) + 1;
+
+                    this.$emit('onQtyUpdated', this.qty)
+                }
+            }
+        });
+
+        $(document).ready(function() {
+            var addTOButton = document.getElementsByClassName('add-to-buttons')[0];
+            document.getElementById('loader').style.display="none";
+            addTOButton.style.display="flex";
+        });
+
+        window.onload = function() {
+            var thumbList = document.getElementsByClassName('thumb-list')[0];
+            var thumbFrame = document.getElementsByClassName('thumb-frame');
+            var productHeroImage = document.getElementsByClassName('product-hero-image')[0];
+
+            if (thumbList && productHeroImage) {
+
+                for(let i=0; i < thumbFrame.length ; i++) {
+                    thumbFrame[i].style.height = (productHeroImage.offsetHeight/4) + "px";
+                    thumbFrame[i].style.width = (productHeroImage.offsetHeight/4)+ "px";
+                }
+
+                if (screen.width > 720) {
+                    thumbList.style.width = (productHeroImage.offsetHeight/4) + "px";
+                    thumbList.style.minWidth = (productHeroImage.offsetHeight/4) + "px";
+                    thumbList.style.height = productHeroImage.offsetHeight + "px";
+                }
+            }
+
+            window.onresize = function() {
+                if (thumbList && productHeroImage) {
+
+                    for(let i=0; i < thumbFrame.length; i++) {
+                        thumbFrame[i].style.height = (productHeroImage.offsetHeight/4) + "px";
+                        thumbFrame[i].style.width = (productHeroImage.offsetHeight/4)+ "px";
+                    }
+
+                    if (screen.width > 720) {
+                        thumbList.style.width = (productHeroImage.offsetHeight/4) + "px";
+                        thumbList.style.minWidth = (productHeroImage.offsetHeight/4) + "px";
+                        thumbList.style.height = productHeroImage.offsetHeight + "px";
+                    }
+                }
+            }
+        };
+    </script>
+@endpush
diff --git a/resources/themes/shop/views/products/view/attributes.blade.php b/resources/themes/shop/views/products/view/attributes.blade.php
new file mode 100644
index 000000000..e64fb55fb
--- /dev/null
+++ b/resources/themes/shop/views/products/view/attributes.blade.php
@@ -0,0 +1,45 @@
+@inject ('productViewHelper', 'Webkul\Product\Helpers\View')
+
+{!! view_render_event('bagisto.shop.products.view.attributes.before', ['product' => $product]) !!}
+
+@if ($customAttributeValues = $productViewHelper->getAdditionalData($product))
+    <accordian :title="'{{ __('shop::app.products.specification') }}'" :active="false">
+        <div slot="header">
+            {{ __('shop::app.products.specification') }}
+            <i class="icon expand-icon right"></i>
+        </div>
+
+        <div slot="body">
+            <table class="full-specifications">
+
+                @foreach ($customAttributeValues as $attribute)
+                    <tr>
+                        @if ($attribute['label'])
+                            <td>{{ $attribute['label'] }}</td>
+                        @else
+                            <td>{{ $attribute['admin_name'] }}</td>
+                        @endif
+                        @if ($attribute['type'] == 'file' && $attribute['value'])
+                            <td>
+                                <a  href="{{ route('shop.product.file.download', [$product->product_id, $attribute['id']])}}">
+                                    <i class="icon sort-down-icon download"></i>
+                                </a>
+                            </td>
+                        @elseif ($attribute['type'] == 'image' && $attribute['value'])
+                            <td>
+                                <a href="{{ route('shop.product.file.download', [$product->product_id, $attribute['id']])}}">
+                                    <img src="{{ Storage::url($attribute['value']) }}" style="height: 20px; width: 20px;" alt=""/>
+                                </a>
+                            </td>
+                        @else
+                            <td>{{ $attribute['value'] }}</td>
+                        @endif
+                    </tr>
+                @endforeach
+
+            </table>
+        </div>
+    </accordian>
+@endif
+
+{!! view_render_event('bagisto.shop.products.view.attributes.after', ['product' => $product]) !!}
\ No newline at end of file
diff --git a/resources/themes/shop/views/products/view/bundle-options.blade.php b/resources/themes/shop/views/products/view/bundle-options.blade.php
new file mode 100644
index 000000000..12ca3e667
--- /dev/null
+++ b/resources/themes/shop/views/products/view/bundle-options.blade.php
@@ -0,0 +1,236 @@
+@if ($product->type == 'bundle')
+
+    {!! view_render_event('bagisto.shop.products.view.bundle-options.before', ['product' => $product]) !!}
+
+    <bundle-option-list></bundle-option-list>
+
+    {!! view_render_event('bagisto.shop.products.view.bundle-options.after', ['product' => $product]) !!}
+
+    @push('scripts')
+        <script type="text/x-template" id="bundle-option-list-template">
+            <div class="bundle-options-wrapper">
+                <div class="bundle-option-list">
+                    <h3>{{ __('shop::app.products.customize-options') }}</h3>
+
+                    <bundle-option-item
+                        v-for="(option, index) in options"
+                        :option="option"
+                        :key="index"
+                        :index="index"
+                        @onProductSelected="productSelected(option, $event)">
+                    </bundle-option-item>
+                </div>
+
+                <div class="bundle-summary">
+                    <h3>{{ __('shop::app.products.your-customization') }}</h3>
+
+                    <quantity-changer></quantity-changer>
+
+                    <div class="control-group">
+                        <label>{{ __('shop::app.products.total-amount') }}</label>
+
+                        <div class="bundle-price">
+                            @{{ formated_total_price | currency(currency_options) }}
+                        </div>
+                    </div>
+
+                    <ul class="bundle-items">
+                        <li v-for="(option, index) in options">
+                            @{{ option.label }}
+
+                            <div class="selected-products">
+                                <div v-for="(product, index1) in option.products" v-if="product.is_default">
+                                    @{{ product.qty + ' x ' + product.name }}
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </script>
+
+        <script type="text/x-template" id="bundle-option-item-template">
+            <div class="bundle-option-item">
+                <div class="control-group" :class="[errors.has('bundle_options[' + option.id + '][]') ? 'has-error' : '']">
+                    <label :class="[option.is_required ? 'required' : '']">@{{ option.label }}</label>
+
+                    <div v-if="option.type == 'select'">
+                        <select class="control" :name="'bundle_options[' + option.id + '][]'" v-model="selected_product" v-validate="option.is_required ? 'required' : ''" :data-vv-as="option.label + '&quot;'">
+                            <option value="">{{ __('shop::app.products.choose-selection') }}</option>
+                            <option v-for="(product, index2) in option.products" :value="product.id">
+                                @{{ product.name + ' + ' + product.price.final_price.formated_price }}
+                            </option>
+                        </select>
+                    </div>
+
+                    <div v-if="option.type == 'radio'">
+                        <span class="radio" v-if="! option.is_required">
+                            <input type="radio" :name="'bundle_options[' + option.id + '][]'" v-model="selected_product" value="0" :id="'bundle_options[' + option.id + '][]'">
+                            <label class="radio-view" :for="'bundle_options[' + option.id + '][]'"></label>
+
+                            {{ __('shop::app.products.none') }}
+                        </span>
+
+                        <span class="radio" v-for="(product, index2) in option.products">
+                            <input type="radio" :name="'bundle_options[' + option.id + '][]'" v-model="selected_product" v-validate="option.is_required ? 'required' : ''" :data-vv-as="'&quot;' + option.label + '&quot;'" :value="product.id" :id="'bundle_options[' + option.id + '][]'">
+                            <label class="radio-view" :for="'bundle_options[' + option.id + '][]'"></label>
+
+                            @{{ product.name }}
+
+                            <span class="price">
+                                + @{{ product.price.final_price.formated_price }}
+                            </span>
+                        </span>
+                    </div>
+
+                    <div v-if="option.type == 'checkbox'">
+                        <span class="checkbox" v-for="(product, index2) in option.products">
+                            <input type="checkbox" :name="'bundle_options[' + option.id + '][]'" :value="product.id" v-model="selected_product" v-validate="option.is_required ? 'required' : ''" :data-vv-as="'&quot;' + option.label + '&quot;'" :id="'bundle_options[' + option.id + '][]'">
+                            <label class="checkbox-view" :for="'bundle_options[' + option.id + '][]'"></label>
+
+                            @{{ product.name }}
+
+                            <span class="price">
+                                + @{{ product.price.final_price.formated_price }}
+                            </span>
+                        </span>
+                    </div>
+
+                    <div v-if="option.type == 'multiselect'">
+                        <select class="control" :name="'bundle_options[' + option.id + '][]'" v-model="selected_product" v-validate="option.is_required ? 'required' : ''" :data-vv-as="'&quot;' + option.label + '&quot;'" multiple>
+                            <option value="0" v-if="! option.is_required">{{ __('shop::app.products.none') }}</option>
+                            <option v-for="(product, index2) in option.products" :value="product.id">
+                                @{{ product.name + ' + ' + product.price.final_price.formated_price }}
+                            </option>
+                        </select>
+                    </div>
+
+                    <span class="control-error" v-if="errors.has('bundle_options[' + option.id + '][]')">
+                        @{{ errors.first('bundle_options[' + option.id + '][]') }}
+                    </span>
+                </div>
+
+                <div v-if="option.type == 'select' || option.type == 'radio'">
+                    <quantity-changer
+                        :control-name="'bundle_option_qty[' + option.id + ']'"
+                        :validations="parseInt(selected_product) ? 'required|numeric|min_value:1' : ''"
+                        :quantity="product_qty"
+                        @onQtyUpdated="qtyUpdated($event)">
+                    </quantity-changer>
+                </div>
+            </div>
+        </script>
+
+        <script>
+            Vue.component('bundle-option-list', {
+
+                template: '#bundle-option-list-template',
+
+                inject: ['$validator'],
+
+                data: function() {
+                    return {
+                        config: @json(app('Webkul\Product\Helpers\BundleOption')->getBundleConfig($product)),
+
+                        options: [],
+
+                        currency_options: @json(core()->getAccountJsSymbols())
+                    }
+                },
+
+                computed: {
+                    formated_total_price: function() {
+                        var total = 0;
+
+                        for (var key in this.options) {
+                            for (var key1 in this.options[key].products) {
+                                if (! this.options[key].products[key1].is_default)
+                                    continue;
+
+                                total += this.options[key].products[key1].qty * this.options[key].products[key1].price.final_price.price;
+                            }
+                        }
+
+                        return total;
+                    }
+                },
+
+                created: function() {
+                    for (var key in this.config.options) {
+                        this.options.push(this.config.options[key])
+                    }
+                },
+
+                methods: {
+                    productSelected: function(option, value) {
+                        var selectedProductIds = Array.isArray(value) ? value : [value];
+
+                        for (var key in option.products) {
+                            option.products[key].is_default = selectedProductIds.indexOf(option.products[key].id) > -1 ? 1 : 0;
+                        }
+                    }
+                }
+            });
+
+            Vue.component('bundle-option-item', {
+                template: '#bundle-option-item-template',
+
+                props: ['index', 'option'],
+
+                inject: ['$validator'],
+
+                data: function() {
+                    return {
+                        selected_product: (this.option.type == 'checkbox' || this.option.type == 'multiselect')  ? [] : null,
+
+                        qty_validations: ''
+                    }
+                },
+
+                computed: {
+                    product_qty: function() {
+                        var self = this;
+                        self.qty = 0;
+
+                        self.option.products.forEach(function(product, key){
+                            if (self.selected_product == product.id)
+                                self.qty =  self.option.products[key].qty;
+                        });
+
+                        return self.qty;
+                    }
+                },
+
+                watch: {
+                    selected_product: function (value) {
+                        this.qty_validations = this.selected_product ? 'required|numeric|min_value:1' : '';
+
+                        this.$emit('onProductSelected', value)
+                    }
+                },
+
+                created: function() {
+                    for (var key1 in this.option.products) {
+                        if (! this.option.products[key1].is_default)
+                            continue;
+
+                        if (this.option.type == 'checkbox' || this.option.type == 'multiselect') {
+                            this.selected_product.push(this.option.products[key1].id)
+                        } else {
+                            this.selected_product = this.option.products[key1].id
+                        }
+                    }
+                },
+
+                methods: {
+                    qtyUpdated: function(qty) {
+                        if (! this.option.products[this.selected_product])
+                            return;
+
+                        this.option.products[this.selected_product].qty = qty;
+                    }
+                }
+            });
+        </script>
+    @endpush
+@endif
\ No newline at end of file
diff --git a/resources/themes/shop/views/products/view/configurable-options.blade.php b/resources/themes/shop/views/products/view/configurable-options.blade.php
new file mode 100644
index 000000000..10c05b6cc
--- /dev/null
+++ b/resources/themes/shop/views/products/view/configurable-options.blade.php
@@ -0,0 +1,333 @@
+@if (Webkul\Product\Helpers\ProductType::hasVariants($product->type))
+
+    @inject ('configurableOptionHelper', 'Webkul\Product\Helpers\ConfigurableOption')
+
+    {!! view_render_event('bagisto.shop.products.view.configurable-options.before', ['product' => $product]) !!}
+
+    <product-options></product-options>
+
+    {!! view_render_event('bagisto.shop.products.view.configurable-options.after', ['product' => $product]) !!}
+
+    @push('scripts')
+
+        <script type="text/x-template" id="product-options-template">
+            <div class="attributes">
+
+                <input type="hidden" id="selected_configurable_option" name="selected_configurable_option" :value="selectedProductId">
+
+                <div v-for='(attribute, index) in childAttributes' class="attribute control-group" :class="[errors.has('super_attribute[' + attribute.id + ']') ? 'has-error' : '']">
+                    <label class="required">@{{ attribute.label }}</label>
+
+                    <span v-if="! attribute.swatch_type || attribute.swatch_type == '' || attribute.swatch_type == 'dropdown'">
+                        <select
+                            class="control"
+                            v-validate="'required'"
+                            :name="['super_attribute[' + attribute.id + ']']"
+                            :disabled="attribute.disabled"
+                            @change="configure(attribute, $event.target.value)"
+                            :id="['attribute_' + attribute.id]"
+                            :data-vv-as="'&quot;' + attribute.label + '&quot;'">
+
+                            <option v-for='(option, index) in attribute.options' :value="option.id">@{{ option.label }}</option>
+
+                        </select>
+                    </span>
+
+                    <span class="swatch-container" v-else>
+                        <label class="swatch"
+                            v-for='(option, index) in attribute.options'
+                            v-if="option.id"
+                            :data-id="option.id"
+                            :for="['attribute_' + attribute.id + '_option_' + option.id]">
+
+                            <input type="radio"
+                                v-validate="'required'"
+                                :name="['super_attribute[' + attribute.id + ']']"
+                                :id="['attribute_' + attribute.id + '_option_' + option.id]"
+                                :value="option.id"
+                                :data-vv-as="'&quot;' + attribute.label + '&quot;'"
+                                @change="configure(attribute, $event.target.value)"/>
+
+                            <span v-if="attribute.swatch_type == 'color'" :style="{ background: option.swatch_value }"></span>
+
+                            <img v-if="attribute.swatch_type == 'image'" :src="option.swatch_value" :title="option.label" alt="" />
+
+                            <span v-if="attribute.swatch_type == 'text'">
+                                @{{ option.label }}
+                            </span>
+
+                        </label>
+
+                        <span v-if="! attribute.options.length" class="no-options">{{ __('shop::app.products.select-above-options') }}</span>
+                    </span>
+
+                    <span class="control-error" v-if="errors.has('super_attribute[' + attribute.id + ']')">
+                        @{{ errors.first('super_attribute[' + attribute.id + ']') }}
+                    </span>
+                </div>
+
+            </div>
+        </script>
+
+        <?php $config = $configurableOptionHelper->getConfigurationConfig($product) ?>
+
+        <script>
+
+            Vue.component('product-options', {
+
+                template: '#product-options-template',
+
+                inject: ['$validator'],
+
+                data: function() {
+                    return {
+                        config: @json($config),
+
+                        childAttributes: [],
+
+                        selectedProductId: '',
+
+                        simpleProduct: null,
+
+                        galleryImages: []
+                    }
+                },
+
+                created: function() {
+                    this.galleryImages = galleryImages.slice(0)
+
+                    var config = @json($config);
+
+                    var childAttributes = this.childAttributes,
+                        attributes = config.attributes.slice(),
+                        index = attributes.length,
+                        attribute;
+
+                    while (index--) {
+                        attribute = attributes[index];
+
+                        attribute.options = [];
+
+                        if (index) {
+                            attribute.disabled = true;
+                        } else {
+                            this.fillSelect(attribute);
+                        }
+
+                        attribute = Object.assign(attribute, {
+                            childAttributes: childAttributes.slice(),
+                            prevAttribute: attributes[index - 1],
+                            nextAttribute: attributes[index + 1]
+                        });
+
+                        childAttributes.unshift(attribute);
+                    }
+                },
+
+                methods: {
+                    configure: function(attribute, value) {
+                        this.simpleProduct = this.getSelectedProductId(attribute, value);
+
+                        if (value) {
+                            attribute.selectedIndex = this.getSelectedIndex(attribute, value);
+
+                            if (attribute.nextAttribute) {
+                                attribute.nextAttribute.disabled = false;
+
+                                this.fillSelect(attribute.nextAttribute);
+
+                                this.resetChildren(attribute.nextAttribute);
+                            } else {
+                                this.selectedProductId = this.simpleProduct;
+                            }
+                        } else {
+                            attribute.selectedIndex = 0;
+
+                            this.resetChildren(attribute);
+
+                            this.clearSelect(attribute.nextAttribute)
+                        }
+
+                        this.reloadPrice();
+                        this.changeProductImages();
+                        this.changeStock(this.simpleProduct);
+                    },
+
+                    getSelectedIndex: function(attribute, value) {
+                        var selectedIndex = 0;
+
+                        attribute.options.forEach(function(option, index) {
+                            if (option.id == value) {
+                                selectedIndex = index;
+                            }
+                        })
+
+                        return selectedIndex;
+                    },
+
+                    getSelectedProductId: function(attribute, value) {
+                        var options = attribute.options,
+                            matchedOptions;
+
+                        matchedOptions = options.filter(function (option) {
+                            return option.id == value;
+                        });
+
+                        if (matchedOptions[0] != undefined && matchedOptions[0].allowedProducts != undefined) {
+                            return matchedOptions[0].allowedProducts[0];
+                        }
+
+                        return undefined;
+                    },
+
+                    fillSelect: function(attribute) {
+                        var options = this.getAttributeOptions(attribute.id),
+                            prevOption,
+                            index = 1,
+                            allowedProducts,
+                            i,
+                            j;
+
+                        this.clearSelect(attribute)
+
+                        attribute.options = [{'id': '', 'label': this.config.chooseText, 'products': []}];
+
+                        if (attribute.prevAttribute) {
+                            prevOption = attribute.prevAttribute.options[attribute.prevAttribute.selectedIndex];
+                        }
+
+                        if (options) {
+                            for (i = 0; i < options.length; i++) {
+                                allowedProducts = [];
+
+                                if (prevOption) {
+                                    for (j = 0; j < options[i].products.length; j++) {
+                                        if (prevOption.allowedProducts && prevOption.allowedProducts.indexOf(options[i].products[j]) > -1) {
+                                            allowedProducts.push(options[i].products[j]);
+                                        }
+                                    }
+                                } else {
+                                    allowedProducts = options[i].products.slice(0);
+                                }
+
+                                if (allowedProducts.length > 0) {
+                                    options[i].allowedProducts = allowedProducts;
+
+                                    attribute.options[index] = options[i];
+
+                                    index++;
+                                }
+                            }
+                        }
+                    },
+
+                    resetChildren: function(attribute) {
+                        if (attribute.childAttributes) {
+                            attribute.childAttributes.forEach(function (set) {
+                                set.selectedIndex = 0;
+                                set.disabled = true;
+                            });
+                        }
+                    },
+
+                    clearSelect: function (attribute) {
+                        if (! attribute)
+                            return;
+
+                        if (! attribute.swatch_type || attribute.swatch_type == '' || attribute.swatch_type == 'dropdown') {
+                            var element = document.getElementById("attribute_" + attribute.id);
+
+                            if (element) {
+                                element.selectedIndex = "0";
+                            }
+                        } else {
+                            var elements = document.getElementsByName('super_attribute[' + attribute.id + ']');
+
+                            var this_this = this;
+
+                            elements.forEach(function(element) {
+                                element.checked = false;
+                            })
+                        }
+                    },
+
+                    getAttributeOptions: function (attributeId) {
+                        var this_this = this,
+                            options;
+
+                        this.config.attributes.forEach(function(attribute, index) {
+                            if (attribute.id == attributeId) {
+                                options = attribute.options;
+                            }
+                        })
+
+                        return options;
+                    },
+
+                    reloadPrice: function () {
+                        var selectedOptionCount = 0;
+
+                        this.childAttributes.forEach(function(attribute) {
+                            if (attribute.selectedIndex) {
+                                selectedOptionCount++;
+                            }
+                        });
+
+                        var priceLabelElement = document.querySelector('.price-label');
+                        var priceElement = document.querySelector('.final-price');
+                        var regularPriceElement = document.querySelector('.regular-price');
+
+                        if (this.childAttributes.length == selectedOptionCount) {
+                            priceLabelElement.style.display = 'none';
+
+                            priceElement.innerHTML = this.config.variant_prices[this.simpleProduct].final_price.formated_price;
+
+                            if (regularPriceElement) {
+                                regularPriceElement.innerHTML = this.config.variant_prices[this.simpleProduct].regular_price.formated_price;
+                            }
+
+                            eventBus.$emit('configurable-variant-selected-event', this.simpleProduct)
+                        } else {
+                            priceLabelElement.style.display = 'inline-block';
+
+                            priceElement.innerHTML = this.config.regular_price.formated_price;
+
+                            eventBus.$emit('configurable-variant-selected-event', 0)
+                        }
+                    },
+
+                    changeProductImages: function () {
+                        galleryImages.splice(0, galleryImages.length)
+
+                        this.galleryImages.forEach(function(image) {
+                            galleryImages.push(image)
+                        });
+
+                        if (this.simpleProduct) {
+                            this.config.variant_images[this.simpleProduct].forEach(function(image) {
+                                galleryImages.unshift(image)
+                            });
+
+                            this.config.variant_videos[this.simpleProduct].forEach(function(video) {
+                                galleryImages.unshift(video)
+                            });
+                        }
+                    },
+
+                    changeStock: function (productId) {
+                        var inStockElement = document.querySelector('.stock-status');
+
+                        if (productId) {
+                            inStockElement.style.display= "block";
+                        } else {
+                            inStockElement.style.display= "none";
+                        }
+                    },
+                }
+
+            });
+
+        </script>
+    @endpush
+
+@endif
\ No newline at end of file
diff --git a/resources/themes/shop/views/products/view/cross-sells.blade.php b/resources/themes/shop/views/products/view/cross-sells.blade.php
new file mode 100644
index 000000000..f7b3e03b8
--- /dev/null
+++ b/resources/themes/shop/views/products/view/cross-sells.blade.php
@@ -0,0 +1,36 @@
+@foreach ($cart->items as $item)
+    <?php
+        $product = $item->product;
+
+        if ($product->cross_sells()->count()) {
+            $products[] = $product;
+            $products = array_unique($products);
+        }
+    ?>
+@endforeach
+
+@if (isset($products))
+
+    <div class="attached-products-wrapper mt-50">
+
+        <div class="title">
+            {{ __('shop::app.products.cross-sell-title') }}
+             <span class="border-bottom"></span>
+        </div>
+
+        <div class="product-grid-4">
+            @foreach($products as $product)
+
+                @foreach ($product->cross_sells()->paginate(2) as $cross_sell_product)
+
+                    @include ('shop::products.list.card', ['product' => $cross_sell_product])
+
+                @endforeach
+
+            @endforeach
+
+        </div>
+
+    </div>
+
+@endif
\ No newline at end of file
diff --git a/resources/themes/shop/views/products/view/downloadable.blade.php b/resources/themes/shop/views/products/view/downloadable.blade.php
new file mode 100644
index 000000000..7f41196f7
--- /dev/null
+++ b/resources/themes/shop/views/products/view/downloadable.blade.php
@@ -0,0 +1,50 @@
+@if ($product->type == 'downloadable')
+    {!! view_render_event('bagisto.shop.products.view.downloadable.before', ['product' => $product]) !!}
+
+    <div class="downloadable-container">
+        
+        @if ($product->downloadable_samples->count())
+            <div class="sample-list">
+                <h3>{{ __('shop::app.products.samples') }}</h3>
+
+                <ul>
+                    @foreach ($product->downloadable_samples as $sample)
+                        <li>
+                            <a href="{{ route('shop.downloadable.download_sample', ['type' => 'sample', 'id' => $sample->id]) }}" target="_blank">
+                                {{ $sample->title }}
+                            </a>
+                        </li>
+                    @endforeach
+                </ul>
+            </div>
+        @endif
+
+        @if ($product->downloadable_links->count())
+            <div class="link-list control-group" :class="[errors.has('links[]') ? 'has-error' : '']">
+                <h3>{{ __('shop::app.products.links') }}</h3>
+
+                <ul>
+                    @foreach ($product->downloadable_links as $link)
+                        <li>
+                            <span class="checkbox">
+                                <input type="checkbox" name="links[]" v-validate="'required'" value="{{ $link->id }}" id="{{ $link->id }}" data-vv-as="&quot;{{ __('shop::app.products.links') }}&quot;"/>
+                                <label class="checkbox-view" for="{{ $link->id }}"></label>
+                                {{ $link->title . ' + ' . core()->currency($link->price) }}
+                            </span>
+
+                            @if ($link->sample_file || $link->sample_url)
+                                <a href="{{ route('shop.downloadable.download_sample', ['type' => 'link', 'id' => $link->id]) }}" target="_blank">
+                                    {{ __('shop::app.products.sample') }}
+                                </a>
+                            @endif
+                        </li>
+                    @endforeach
+                </ul>
+
+                <span class="control-error" v-if="errors.has('links[]')">@{{ errors.first('links[]') }}</span>
+            </div>
+        @endif
+    </div>
+
+    {!! view_render_event('bagisto.shop.products.view.downloadable.before', ['product' => $product]) !!}
+@endif
\ No newline at end of file
diff --git a/resources/themes/shop/views/products/view/gallery.blade.php b/resources/themes/shop/views/products/view/gallery.blade.php
new file mode 100644
index 000000000..39a5c0c0b
--- /dev/null
+++ b/resources/themes/shop/views/products/view/gallery.blade.php
@@ -0,0 +1,219 @@
+@inject ('wishListHelper', 'Webkul\Customer\Helpers\Wishlist')
+
+<?php
+    $images = productimage()->getGalleryImages($product);
+
+    $videos = productvideo()->getVideos($product);
+
+    $images = array_merge($images, $videos);
+?>
+
+
+{!! view_render_event('bagisto.shop.products.view.gallery.before', ['product' => $product]) !!}
+
+<div class="product-image-group">
+
+    <div class="cp-spinner cp-round" id="loader">
+    </div>
+
+    <product-gallery></product-gallery>
+
+    @include ('shop::products.view.product-add')
+
+</div>
+
+{!! view_render_event('bagisto.shop.products.view.gallery.after', ['product' => $product]) !!}
+
+@push('scripts')
+
+    <script type="text/x-template" id="product-gallery-template">
+        <div>
+
+            <ul class="thumb-list">
+                <li class="gallery-control top" @click="moveThumbs('top')" v-if="(thumbs.length > 4) && this.is_move.up">
+                    <span class="overlay"></span>
+                    <i class="icon arrow-up-white-icon"></i>
+                </li>
+
+                <li class="thumb-frame" v-for='(thumb, index) in thumbs' @mouseover="changeImage(thumb)" :class="[thumb.large_image_url == currentLargeImageUrl ? 'active' : '']" id="thumb-frame">
+                    <video v-if="thumb.type == 'video'" width="100%" height="100%" onclick="this.paused ? this.play() : this.pause();">
+                        <source :src="thumb.video_url" type="video/mp4">
+                        {{ __('admin::app.catalog.products.not-support-video') }}
+                    </video>
+
+                    <img v-else  :src="thumb.small_image_url" alt=""/>
+                </li>
+
+                <li class="gallery-control bottom" @click="moveThumbs('bottom')" v-if="(thumbs.length > 4) && this.is_move.down">
+                    <span class="overlay"></span>
+                    <i class="icon arrow-down-white-icon"></i>
+                </li>
+            </ul>
+
+            <div class="product-hero-image" id="product-hero-image">
+                <video :key="currentVideoUrl" v-if="currentType == 'video'" width="100%" height="100%" controls>
+                    <source :src="currentVideoUrl" :data-image="currentOriginalImageUrl"  type="video/mp4">
+                        {{ __('admin::app.catalog.products.not-support-video') }}
+                </video>
+
+                <img v-else :src="currentLargeImageUrl" id="pro-img" :data-image="currentOriginalImageUrl" alt=""/>
+
+                @auth('customer')
+                    @php
+                        $showWishlist = core()->getConfigData('general.content.shop.wishlist_option') == "1" ? true : false;
+                    @endphp
+
+                    @if ($showWishlist)
+                        <a @if ($wishListHelper->getWishlistProduct($product)) class="add-to-wishlist already" @else class="add-to-wishlist" @endif href="{{ route('customer.wishlist.add', $product->product_id) }}">
+                        </a>
+                    @endif
+                @endauth
+            </div>
+
+        </div>
+    </script>
+
+    <script>
+        var galleryImages = @json($images);
+
+        Vue.component('product-gallery', {
+
+            template: '#product-gallery-template',
+
+            data: function() {
+                return {
+                    images: galleryImages,
+
+                    thumbs: [],
+
+                    currentLargeImageUrl: '',
+
+                    currentOriginalImageUrl: '',
+
+                    currentVideoUrl: '',
+
+                    currentType: '',
+
+                    counter: {
+                        up: 0,
+                        down: 0,
+                    },
+
+                    is_move: {
+                        up: true,
+                        down: true,
+                    }
+                }
+            },
+
+            watch: {
+                'images': function(newVal, oldVal) {
+                    this.changeImage(this.images[0])
+
+                    this.prepareThumbs()
+                }
+            },
+
+            created: function() {
+                this.changeImage(this.images[0])
+
+                this.prepareThumbs()
+            },
+
+            methods: {
+                prepareThumbs: function() {
+                    var this_this = this;
+
+                    this_this.thumbs = [];
+
+                    this.images.forEach(function(image) {
+                        this_this.thumbs.push(image);
+                    });
+                },
+
+                changeImage: function(image) {
+                    this.currentType = image.type;
+
+                    if (image.type == 'video') {
+                        this.currentVideoUrl = image.video_url;
+
+                        this.currentLargeImageUrl = image.large_image_url = image.video_url;
+                    } else {
+                        this.currentLargeImageUrl = image.large_image_url;
+
+                        this.currentOriginalImageUrl = image.original_image_url;
+                    }
+
+                    if ($(window).width() > 580 && image.original_image_url) {
+                        $('img#pro-img').data('zoom-image', image.original_image_url).ezPlus();
+                    }
+                },
+
+                moveThumbs: function(direction) {
+                    let len = this.thumbs.length;
+
+                    if (direction === "top") {
+                        const moveThumb = this.thumbs.splice(len - 1, 1);
+
+                        this.thumbs = [moveThumb[0]].concat((this.thumbs));
+
+                        this.counter.up = this.counter.up+1;
+
+                        this.counter.down = this.counter.down-1;
+
+                    } else {
+                        const moveThumb = this.thumbs.splice(0, 1);
+
+                        this.thumbs = [].concat((this.thumbs), [moveThumb[0]]);
+
+                        this.counter.down = this.counter.down+1;
+
+                        this.counter.up = this.counter.up-1;
+                    }
+
+                    if ((len-4) == this.counter.down) {
+                        this.is_move.down = false;
+                    } else {
+                        this.is_move.down = true;
+                    }
+
+                    if ((len-4) == this.counter.up) {
+                        this.is_move.up = false;
+                    } else {
+                        this.is_move.up = true;
+                    }
+                },
+            }
+        });
+
+    </script>
+
+    <script>
+        $(document).ready(function() {
+            if ($(window).width() > 580) {
+                $('img#pro-img').data('zoom-image', $('img#pro-img').data('image')).ezPlus();
+            }
+
+            var wishlist = "{{ $wishListHelper->getWishlistProduct($product) ? 'true' : 'false' }}";
+
+            $(document).mousemove(function(event) {
+                if ($('.add-to-wishlist').length || wishlist != 0) {
+                    if (event.pageX > $('.add-to-wishlist').offset().left && event.pageX < $('.add-to-wishlist').offset().left+32 && event.pageY > $('.add-to-wishlist').offset().top && event.pageY < $('.add-to-wishlist').offset().top+32) {
+
+                        $(".zoomContainer").addClass("show-wishlist");
+
+                    } else {
+                        $(".zoomContainer").removeClass("show-wishlist");
+                    }
+                };
+
+                if ($("body").hasClass("rtl")) {
+                    $(".zoomWindow").addClass("zoom-image-direction");
+                } else {
+                    $(".zoomWindow").removeClass("zoom-image-direction");
+                }
+            });
+        })
+    </script>
+
+@endpush
\ No newline at end of file
diff --git a/resources/themes/shop/views/products/view/grouped-products.blade.php b/resources/themes/shop/views/products/view/grouped-products.blade.php
new file mode 100644
index 000000000..1f2b36dcc
--- /dev/null
+++ b/resources/themes/shop/views/products/view/grouped-products.blade.php
@@ -0,0 +1,38 @@
+@if ($product->type == 'grouped')
+    {!! view_render_event('bagisto.shop.products.view.grouped_products.before', ['product' => $product]) !!}
+
+    <div class="grouped-product-container">
+        @if ($product->grouped_products->count())
+            <div class="grouped-product-list">
+                <ul>
+                    <li>
+                        <span>{{ __('shop::app.products.name') }}</span>
+                        <span>{{ __('shop::app.products.qty') }}</span>
+                    </li>
+                    @foreach ($product->grouped_products as $groupedProduct)
+                        @if($groupedProduct->associated_product->getTypeInstance()->isSaleable())
+                            <li>
+                                <span class="name">
+                                    {{ $groupedProduct->associated_product->name }}
+
+                                    @include ('shop::products.price', ['product' => $groupedProduct->associated_product])
+                                </span>
+
+                                <span class="qty">
+                                    <quantity-changer
+                                        :control-name="'qty[{{$groupedProduct->associated_product_id}}]'"
+                                        :validations="'required|numeric|min_value:0'"
+                                        quantity="{{ $groupedProduct->qty }}"
+                                        min-quantity="0">
+                                    </quantity-changer>
+                                </span>
+                            </li>
+                        @endif
+                    @endforeach
+                </ul>
+            </div>
+        @endif
+    </div>
+
+    {!! view_render_event('bagisto.shop.products.view.grouped_products.before', ['product' => $product]) !!}
+@endif
\ No newline at end of file
diff --git a/resources/themes/shop/views/products/view/product-add.blade.php b/resources/themes/shop/views/products/view/product-add.blade.php
new file mode 100644
index 000000000..cb621c137
--- /dev/null
+++ b/resources/themes/shop/views/products/view/product-add.blade.php
@@ -0,0 +1,11 @@
+{!! view_render_event('bagisto.shop.products.view.product-add.before', ['product' => $product]) !!}
+
+<div class="add-to-buttons">
+    @include ('shop::products.add-to-cart', ['product' => $product])
+
+    @if (core()->getConfigData('catalog.products.storefront.buy_now_button_display'))
+        @include ('shop::products.buy-now')                                      
+    @endif
+</div>
+
+{!! view_render_event('bagisto.shop.products.view.product-add.after', ['product' => $product]) !!}
\ No newline at end of file
diff --git a/resources/themes/shop/views/products/view/related-products.blade.php b/resources/themes/shop/views/products/view/related-products.blade.php
new file mode 100644
index 000000000..722b4bf05
--- /dev/null
+++ b/resources/themes/shop/views/products/view/related-products.blade.php
@@ -0,0 +1,24 @@
+<?php
+    $relatedProducts = $product->related_products()->get();
+?>
+
+@if ($relatedProducts->count())
+    <div class="attached-products-wrapper">
+
+        <div class="title">
+            {{ __('shop::app.products.related-product-title') }}
+            <span class="border-bottom"></span>
+        </div>
+
+        <div class="product-grid-4">
+
+            @foreach ($relatedProducts as $related_product)
+
+                @include ('shop::products.list.card', ['product' => $related_product])
+
+            @endforeach
+
+        </div>
+
+    </div>
+@endif
\ No newline at end of file
diff --git a/resources/themes/shop/views/products/view/reviews.blade.php b/resources/themes/shop/views/products/view/reviews.blade.php
new file mode 100644
index 000000000..fbd627628
--- /dev/null
+++ b/resources/themes/shop/views/products/view/reviews.blade.php
@@ -0,0 +1,98 @@
+@inject ('reviewHelper', 'Webkul\Product\Helpers\Review')
+
+{!! view_render_event('bagisto.shop.products.view.reviews.after', ['product' => $product]) !!}
+
+@if ($total = $reviewHelper->getTotalReviews($product))
+    <div class="rating-reviews">
+        <div class="rating-header">
+            {{ __('shop::app.products.reviews-title') }}
+        </div>
+
+        <div class="overall">
+            <div class="review-info">
+
+                <span class="number">
+                    {{ $reviewHelper->getAverageRating($product) }}
+                </span>
+
+                <span class="stars">
+                    @for ($i = 1; $i <= 5; $i++)
+
+                      @if($i <= round($reviewHelper->getAverageRating($product)))
+                        <span class="icon star-icon"></span>
+                      @else
+                        <span class="icon star-icon-blank"></span>
+                      @endif
+
+                    @endfor
+                </span>
+
+                <div class="total-reviews">
+                    {{ __('shop::app.products.total-reviews', ['total' => $total]) }}
+                </div>
+
+            </div>
+
+            @if (core()->getConfigData('catalog.products.review.guest_review') || auth()->guard('customer')->check())
+                <a href="{{ route('shop.reviews.create', $product->url_key) }}" class="btn btn-lg btn-primary">
+                    {{ __('shop::app.products.write-review-btn') }}
+                </a>
+            @endif
+
+        </div>
+
+        <div class="reviews">
+
+            @foreach ($reviewHelper->getReviews($product)->paginate(10) as $review)
+                <div class="review">
+                    <div class="title">
+                        {{ $review->title }}
+                    </div>
+
+                    <span class="stars">
+                        @for ($i = 1; $i <= 5; $i++)
+
+                          @if($i <= $review->rating)
+                            <span class="icon star-icon"></span>
+                          @else
+                            <span class="icon star-icon-blank"></span>
+                          @endif
+
+                        @endfor
+                    </span>
+
+                    <div class="message">
+                        {{ $review->comment }}
+                    </div>
+
+                    <div class="reviewer-details">
+                        <span class="by">
+                            {{ __('shop::app.products.by', ['name' => $review->name]) }},
+                        </span>
+
+                        <span class="when">
+                            {{ core()->formatDate($review->created_at, 'F d, Y') }}
+                        </span>
+                    </div>
+                </div>
+            @endforeach
+
+            <a href="{{ route('shop.reviews.index', $product->url_key) }}" class="view-all">
+                {{ __('shop::app.products.view-all') }}
+            </a>
+
+        </div>
+    </div>
+@else
+    @if (core()->getConfigData('catalog.products.review.guest_review') || auth()->guard('customer')->check())
+        <div class="rating-reviews">
+            <div class="rating-header">
+                <a href="{{ route('shop.reviews.create', $product->url_key) }}" class="btn btn-lg btn-primary">
+                    {{ __('shop::app.products.write-review-btn') }}
+                </a>
+            </div>
+        </div>
+    @endif
+@endif
+
+{!! view_render_event('bagisto.shop.products.view.reviews.after', ['product' => $product]) !!}
diff --git a/resources/themes/shop/views/products/view/stock.blade.php b/resources/themes/shop/views/products/view/stock.blade.php
new file mode 100644
index 000000000..391462011
--- /dev/null
+++ b/resources/themes/shop/views/products/view/stock.blade.php
@@ -0,0 +1,13 @@
+{!! view_render_event('bagisto.shop.products.view.stock.before', ['product' => $product]) !!}
+
+<div class="stock-status {{! $product->haveSufficientQuantity(1) ? '' : 'active' }}">
+    @if ( $product->haveSufficientQuantity(1) === true )
+        {{ __('shop::app.products.in-stock') }}
+    @elseif ( $product->haveSufficientQuantity(1) > 0 )
+        {{ __('shop::app.products.available-for-order') }}
+    @else
+        {{ __('shop::app.products.out-of-stock') }}
+    @endif
+</div>
+
+{!! view_render_event('bagisto.shop.products.view.stock.after', ['product' => $product]) !!}
\ No newline at end of file
diff --git a/resources/themes/shop/views/products/view/up-sells.blade.php b/resources/themes/shop/views/products/view/up-sells.blade.php
new file mode 100644
index 000000000..0f85e80e2
--- /dev/null
+++ b/resources/themes/shop/views/products/view/up-sells.blade.php
@@ -0,0 +1,28 @@
+{!! view_render_event('bagisto.shop.products.view.up-sells.after', ['product' => $product]) !!}
+
+<?php
+    $productUpSells = $product->up_sells()->get();
+?>
+
+@if ($productUpSells->count())
+    <div class="attached-products-wrapper">
+
+        <div class="title">
+            {{ __('shop::app.products.up-sell-title') }}
+            <span class="border-bottom"></span>
+        </div>
+
+        <div class="product-grid-4">
+
+            @foreach ($productUpSells as $up_sell_product)
+
+                @include ('shop::products.list.card', ['product' => $up_sell_product])
+
+            @endforeach
+
+        </div>
+
+    </div>
+@endif
+
+{!! view_render_event('bagisto.shop.products.view.up-sells.after', ['product' => $product]) !!}
\ No newline at end of file
diff --git a/resources/themes/shop/views/products/wishlist.blade.php b/resources/themes/shop/views/products/wishlist.blade.php
new file mode 100644
index 000000000..a91b33d2c
--- /dev/null
+++ b/resources/themes/shop/views/products/wishlist.blade.php
@@ -0,0 +1,21 @@
+@inject ('wishListHelper', 'Webkul\Customer\Helpers\Wishlist')
+
+@auth('customer')
+    {!! view_render_event('bagisto.shop.products.wishlist.before') !!}
+
+    <a
+        @if ($wishListHelper->getWishlistProduct($product))
+            class="add-to-wishlist already"
+            title="{{ __('shop::app.customer.account.wishlist.remove-wishlist-text') }}"
+        @else
+            class="add-to-wishlist"
+            title="{{ __('shop::app.customer.account.wishlist.add-wishlist-text') }}"
+        @endif
+        id="wishlist-changer"
+        style="margin-right: 15px;"
+        href="{{ route('customer.wishlist.add', $product->product_id) }}">
+        <span class="icon wishlist-icon"></span>
+    </a>
+
+    {!! view_render_event('bagisto.shop.products.wishlist.after') !!}
+@endauth
diff --git a/resources/themes/shop/views/search/search.blade.php b/resources/themes/shop/views/search/search.blade.php
new file mode 100644
index 000000000..1f6543788
--- /dev/null
+++ b/resources/themes/shop/views/search/search.blade.php
@@ -0,0 +1,87 @@
+@extends('shop::layouts.master')
+
+@section('page_title')
+    {{ __('shop::app.search.page-title') }}
+@endsection
+
+@section('content-wrapper')
+    @if (request('image-search'))
+        <image-search-result-component></image-search-result-component>
+    @endif
+
+    @if (! $results)
+        {{  __('shop::app.search.no-results') }}
+    @endif
+
+    @if ($results)
+        <div class="main mb-30" style="min-height: 27vh;">
+            @if ($results->isEmpty())
+                <div class="search-result-status">
+                    <h2>{{ __('shop::app.products.whoops') }}</h2>
+                    <span>{{ __('shop::app.search.no-results') }}</span>
+                </div>
+            @else
+                <div class="search-result-status mb-20">
+                    <span>
+                        <b>{{ $results->total() }} </b>
+
+                        {{ ($results->total() == 1) ? __('shop::app.search.found-result') : __('shop::app.search.found-results') }}
+                    </span>
+                </div>
+
+                <div class="product-grid-4">
+                    @foreach ($results as $productFlat)
+
+                        @include('shop::products.list.card', ['product' => $productFlat->product])
+
+                    @endforeach
+                </div>
+
+                @include('ui::datagrid.pagination')
+            @endif
+        </div>
+    @endif
+@endsection
+
+@push('scripts')
+
+    <script type="text/x-template" id="image-search-result-component-template">
+        <div class="image-search-result">
+            <div class="searched-image">
+                <img :src="searched_image_url" alt=""/>
+            </div>
+
+            <div class="searched-terms">
+                <h3>{{ __('shop::app.search.analysed-keywords') }}</h3>
+
+                <div class="term-list">
+                    <a v-for="term in searched_terms" :href="'{{ route('shop.search.index') }}?term=' + term">
+                        @{{ term }}
+                    </a>
+                </div>
+            </div>
+        </div>
+    </script>
+
+    <script>
+        Vue.component('image-search-result-component', {
+
+            template: '#image-search-result-component-template',
+
+            data: function() {
+                return {
+                    searched_image_url: localStorage.searched_image_url,
+
+                    searched_terms: []
+                }
+            },
+
+            created: function() {
+                if (localStorage.searched_terms && localStorage.searched_terms != '') {
+                    this.searched_terms = localStorage.searched_terms.split('_');
+                }
+            }
+        });
+    </script>
+
+@endpush
\ No newline at end of file
diff --git a/resources/themes/velocity/views/UI/header.blade.php b/resources/themes/velocity/views/UI/header.blade.php
new file mode 100644
index 000000000..86dede849
--- /dev/null
+++ b/resources/themes/velocity/views/UI/header.blade.php
@@ -0,0 +1,575 @@
+@push('scripts')
+    <script type="text/x-template" id="content-header-template">
+        <header class="row velocity-divide-page vc-header header-shadow active">
+            <div class="vc-small-screen container">
+                <div class="row">
+                    <div class="col-6">
+                        <div v-if="hamburger" class="nav-container scrollable">
+                            <div class="wrapper" v-if="this.rootCategories">
+                                <div class="greeting drawer-section fw6">
+                                    <i class="material-icons">perm_identity</i>
+                                    <span>
+                                        @guest('customer')
+                                            <a class="unset" href="{{ route('customer.session.index') }}">
+                                            {{ __('velocity::app.responsive.header.greeting', ['customer' => 'Guest']) }}
+                                            </a>
+                                        @endguest
+
+                                        @auth('customer')
+                                            <a class="unset" href="{{ route('customer.profile.index') }}">
+                                                {{ __('velocity::app.responsive.header.greeting', ['customer' => auth()->guard('customer')->user()->first_name]) }}
+                                            </a>
+                                        @endauth
+
+                                        <i
+                                            @click="closeDrawer()"
+                                            class="material-icons float-right text-dark">
+                                            cancel
+                                        </i>
+                                    </span>
+                                </div>
+
+                                @php
+                                    $currency = $locale = null;
+
+                                    $currentLocale = app()->getLocale();
+                                    $currentCurrency = core()->getCurrentCurrencyCode();
+
+                                    $allLocales = core()->getCurrentChannel()->locales;
+                                    $allCurrency = core()->getCurrentChannel()->currencies;
+                                @endphp
+
+                                @foreach ($allLocales as $appLocale)
+                                    @if ($appLocale->code == $currentLocale)
+                                        @php
+                                            $locale = $appLocale;
+                                        @endphp
+                                    @endif
+                                @endforeach
+
+                                @foreach ($allCurrency as $appCurrency)
+                                    @if ($appCurrency->code == $currentCurrency)
+                                        @php
+                                            $currency = $appCurrency;
+                                        @endphp
+                                    @endif
+                                @endforeach
+
+                                <ul type="none" class="velocity-content" v-if="headerContent.length > 0">
+                                    <li :key="index" v-for="(content, index) in headerContent">
+                                        <a
+                                            class="unset"
+                                            v-text="content.title"
+                                            :href="`${$root.baseUrl}/${content.page_link}`">
+                                        </a>
+                                    </li>
+                                </ul>
+
+                                <ul type="none" class="category-wrapper" v-if="rootCategoriesCollection.length > 0">
+                                    <li v-for="(category, index) in rootCategoriesCollection">
+                                        <a class="unset" :href="`${$root.baseUrl}/${category.slug}`">
+                                            <div class="category-logo">
+                                                <img
+                                                    class="category-icon"
+                                                    v-if="category.category_icon_path"
+                                                    :src="`${$root.baseUrl}/storage/${category.category_icon_path}`" alt="" width="20" height="20" />
+                                            </div>
+                                            <span v-text="category.name"></span>
+                                        </a>
+
+                                        <i class="rango-arrow-right" @click="toggleSubcategories(index, $event)"></i>
+                                    </li>
+                                </ul>
+
+                                @auth('customer')
+                                    <ul type="none" class="vc-customer-options">
+                                        <li>
+                                            <a href="{{ route('customer.profile.index') }}" class="unset">
+                                                <i class="icon profile text-down-3"></i>
+                                                <span>{{ __('shop::app.header.profile') }}</span>
+                                            </a>
+                                        </li>
+
+                                        <li>
+                                            <a href="{{ route('customer.address.index') }}" class="unset">
+                                                <i class="icon address text-down-3"></i>
+                                                <span>{{ __('velocity::app.shop.general.addresses') }}</span>
+                                            </a>
+                                        </li>
+
+                                        <li>
+                                            <a href="{{ route('customer.reviews.index') }}" class="unset">
+                                                <i class="icon reviews text-down-3"></i>
+                                                <span>{{ __('velocity::app.shop.general.reviews') }}</span>
+                                            </a>
+                                        </li>
+
+                                        @if (core()->getConfigData('general.content.shop.wishlist_option'))
+                                            <li>
+                                                <a href="{{ route('customer.wishlist.index') }}" class="unset">
+                                                    <i class="icon wishlist text-down-3"></i>
+                                                    <span>{{ __('shop::app.header.wishlist') }}</span>
+                                                </a>
+                                            </li>
+                                        @endif
+
+                                        @if (core()->getConfigData('general.content.shop.compare_option'))
+                                            <li>
+                                                <a href="{{ route('velocity.customer.product.compare') }}" class="unset">
+                                                    <i class="icon compare text-down-3"></i>
+                                                    <span>{{ __('shop::app.customer.compare.text') }}</span>
+                                                </a>
+                                            </li>
+                                        @endif
+
+                                        <li>
+                                            <a href="{{ route('customer.orders.index') }}" class="unset">
+                                                <i class="icon orders text-down-3"></i>
+                                                <span>{{ __('velocity::app.shop.general.orders') }}</span>
+                                            </a>
+                                        </li>
+
+                                        <li>
+                                            <a href="{{ route('customer.downloadable_products.index') }}" class="unset">
+                                                <i class="icon downloadables text-down-3"></i>
+                                                <span>{{ __('velocity::app.shop.general.downloadables') }}</span>
+                                            </a>
+                                        </li>
+                                    </ul>
+                                @endauth
+
+                                <ul type="none" class="meta-wrapper">
+                                    <li>
+                                        @if ($locale)
+                                            <div class="language-logo-wrapper">
+                                                @if ($locale->locale_image)
+                                                    <img
+                                                        class="language-logo"
+                                                        src="{{ asset('/storage/' . $locale->locale_image) }}" alt="" />
+                                                @elseif ($locale->code == "en")
+                                                    <img
+                                                        class="language-logo"
+                                                        src="{{ asset('/themes/velocity/assets/images/flags/en.png') }}" alt="" />
+                                                @endif
+                                            </div>
+                                            <span>{{ $locale->name }}</span>
+                                        @endif
+
+                                        <i
+                                            class="rango-arrow-right"
+                                            @click="toggleMetaInfo('languages')">
+                                        </i>
+                                    </li>
+
+                                    <li>
+                                        <span>{{ $currency->code }}</span>
+
+                                        <i
+                                            class="rango-arrow-right"
+                                            @click="toggleMetaInfo('currencies')">
+                                        </i>
+                                    </li>
+
+                                    <li>
+                                        @auth('customer')
+                                            <a
+                                                class="unset"
+                                                href="{{ route('customer.session.destroy') }}">
+                                                <span>{{ __('shop::app.header.logout') }}</span>
+                                            </a>
+                                        @endauth
+
+                                        @guest('customer')
+                                            <a
+                                                class="unset"
+                                                href="{{ route('customer.session.create') }}">
+                                                <span>{{ __('shop::app.customer.login-form.title') }}</span>
+                                            </a>
+                                        @endguest
+                                    </li>
+
+                                    <li>
+                                        @guest('customer')
+                                            <a
+                                                class="unset"
+                                                href="{{ route('customer.register.index') }}">
+                                                <span>{{ __('shop::app.header.sign-up') }}</span>
+                                            </a>
+                                        @endguest
+                                    </li>
+                                </ul>
+                            </div>
+
+                            <div class="wrapper" v-else-if="subCategory">
+                                <div class="drawer-section">
+                                    <i class="rango-arrow-left fs24 text-down-4" @click="toggleSubcategories('root')"></i>
+
+                                    <h4 class="display-inbl">@{{ subCategory.name }}</h4>
+
+                                    <i class="material-icons float-right text-dark" @click="closeDrawer()">
+                                        cancel
+                                    </i>
+                                </div>
+
+                                <ul type="none">
+                                    <li
+                                        :key="index"
+                                        v-for="(nestedSubCategory, index) in subCategory.children">
+
+                                        <a
+                                            class="unset"
+                                            :href="`${$root.baseUrl}/${subCategory.slug}/${nestedSubCategory.slug}`">
+
+                                            <div class="category-logo">
+                                                <img
+                                                    class="category-icon"
+                                                    v-if="nestedSubCategory.category_icon_path"
+                                                    :src="`${$root.baseUrl}/storage/${nestedSubCategory.category_icon_path}`" alt="" width="20" height="20" />
+                                            </div>
+                                            <span>@{{ nestedSubCategory.name }}</span>
+                                        </a>
+
+                                        <ul
+                                            type="none"
+                                            class="nested-category"
+                                            v-if="nestedSubCategory.children && nestedSubCategory.children.length > 0">
+
+                                            <li
+                                                :key="`index-${Math.random()}`"
+                                                v-for="(thirdLevelCategory, index) in nestedSubCategory.children">
+                                                <a
+                                                    class="unset"
+                                                    :href="`${$root.baseUrl}/${subCategory.slug}/${nestedSubCategory.slug}/${thirdLevelCategory.slug}`">
+
+                                                    <div class="category-logo">
+                                                        <img
+                                                            class="category-icon"
+                                                            v-if="thirdLevelCategory.category_icon_path"
+                                                            :src="`${$root.baseUrl}/storage/${thirdLevelCategory.category_icon_path}`" alt="" width="20" height="20" />
+                                                    </div>
+                                                    <span>@{{ thirdLevelCategory.name }}</span>
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </li>
+                                </ul>
+                            </div>
+
+                            <div class="wrapper" v-else-if="languages">
+                                <div class="drawer-section">
+                                    <i class="rango-arrow-left fs24 text-down-4" @click="toggleMetaInfo('languages')"></i>
+                                    <h4 class="display-inbl">{{ __('velocity::app.responsive.header.languages') }}</h4>
+                                    <i class="material-icons float-right text-dark" @click="closeDrawer()">cancel</i>
+                                </div>
+
+                                <ul type="none">
+                                    @foreach ($allLocales as $locale)
+                                        <li>
+                                            <a
+                                                class="unset"
+                                                @if (isset($serachQuery))
+                                                    href="?{{ $serachQuery }}&locale={{ $locale->code }}"
+                                                @else
+                                                    href="?locale={{ $locale->code }}"
+                                                @endif>
+
+                                                @if( $locale->code == 'en')
+                                                    <div class="category-logo">
+                                                        <img
+                                                        class="category-icon"
+                                                        src="{{ asset('/themes/velocity/assets/images/flags/en.png') }}" alt="" width="20" height="20" />
+                                                    </div>
+                                                @else
+
+                                                    <div class="category-logo">
+                                                        <img
+                                                        class="category-icon"
+                                                        src="{{ asset('/storage/' . $locale->locale_image) }}" alt="" width="20" height="20" />
+                                                    </div>
+                                                @endif
+
+                                                <span>
+                                                    {{ isset($serachQuery) ? $locale->title : $locale->name }}
+                                                </span>
+                                            </a>
+                                        </li>
+                                    @endforeach
+                                </ul>
+                            </div>
+
+                            <div class="wrapper" v-else-if="currencies">
+                                <div class="drawer-section">
+                                    <i class="rango-arrow-left fs24 text-down-4" @click="toggleMetaInfo('currencies')"></i>
+                                    <h4 class="display-inbl">{{ __('velocity::app.shop.general.currencies') }}</h4>
+                                    <i class="material-icons float-right text-dark" @click="closeDrawer()">cancel</i>
+                                </div>
+
+                                <ul type="none">
+                                    @foreach ($allCurrency as $currency)
+                                        <li>
+                                            @if (isset($serachQuery))
+                                                <a
+                                                    class="unset"
+                                                    href="?{{ $serachQuery }}&locale={{ $currency->code }}">
+                                                    <span>{{ $currency->code }}</span>
+                                                </a>
+                                            @else
+                                                <a
+                                                    class="unset"
+                                                    href="?currency={{ $currency->code }}">
+                                                    <span>{{ $currency->code }}</span>
+                                                </a>
+                                            @endif
+                                        </li>
+                                    @endforeach
+                                </ul>
+                            </div>
+                        </div>
+
+                        <div class="hamburger-wrapper" @click="toggleHamburger">
+                            <i class="rango-toggle hamburger"></i>
+                        </div>
+
+                        <logo-component></logo-component>
+                    </div>
+
+                    @php
+                        $showCompare = core()->getConfigData('general.content.shop.compare_option') == "1" ? true : false;
+                        $showWishlist = core()->getConfigData('general.content.shop.wishlist_option') == "1" ? true : false;
+                    @endphp
+
+                    <div class="right-vc-header col-6">
+                        @if ($showCompare)
+                            <a
+                                class="compare-btn unset"
+                                @auth('customer')
+                                    href="{{ route('velocity.customer.product.compare') }}"
+                                @endauth
+
+                                @guest('customer')
+                                    href="{{ route('velocity.product.compare') }}"
+                                @endguest
+                                >
+
+                                <div class="badge-container" v-if="compareCount > 0">
+                                    <span class="badge" v-text="compareCount"></span>
+                                </div>
+                                <i class="material-icons">compare_arrows</i>
+                            </a>
+                        @endif
+
+                        @if ($showWishlist)
+                            <a class="wishlist-btn unset" :href="`{{ route('customer.wishlist.index') }}`">
+                                <div class="badge-container" v-if="wishlistCount > 0">
+                                    <span class="badge" v-text="wishlistCount"></span>
+                                </div>
+                                <i class="material-icons">favorite_border</i>
+                            </a>
+                        @endif
+
+                        <a class="unset cursor-pointer" @click="openSearchBar">
+                            <i class="material-icons">search</i>
+                        </a>
+
+                        <a href="{{ route('shop.checkout.cart.index') }}" class="unset">
+                            <div class="badge-wrapper">
+                                <span class="badge">@{{ cartItemsCount }}</span>
+                            </div>
+                            <i class="material-icons text-down-3">shopping_cart</i>
+                        </a>
+                    </div>
+
+                    <searchbar-component v-if="isSearchbar"></searchbar-component>
+                </div>
+            </div>
+
+            <div
+               id="main-category"
+                @mouseout="toggleSidebar('0', $event, 'mouseout')"
+                @mouseover="toggleSidebar('0', $event, 'mouseover')"
+                :class="`main-category fs16 unselectable fw6 ${($root.sharedRootCategories.length > 0) ? 'cursor-pointer' : 'cursor-not-allowed'} left`">
+
+                <i class="rango-view-list text-down-4 align-vertical-top fs18">
+                </i>
+                <span
+                    class="pl5"
+                    v-text="heading"
+                    @mouseover="toggleSidebar('0', $event, 'mouseover')">
+                </span>
+            </div>
+
+            <div class="content-list right">
+                <ul type="none" class="no-margin">
+                    <li v-for="(content, index) in headerContent" :key="index">
+                        <a
+                            v-text="content.title"
+                            :href="`${$root.baseUrl}/${content['page_link']}`"
+                            v-if="(content['content_type'] == 'link' || content['content_type'] == 'category')"
+                            :target="content['link_target'] ? '_blank' : '_self'">
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </header>
+    </script>
+@endpush
+
+@php
+    $cart = cart()->getCart();
+
+    $cartItemsCount = trans('shop::app.minicart.zero');
+
+    if ($cart) {
+        $cartItemsCount = $cart->items->count();
+    }
+@endphp
+
+@push('scripts')
+    <script type="text/javascript">
+        (() => {
+            Vue.component('content-header', {
+                template: '#content-header-template',
+                props: [
+                    'heading',
+                    'headerContent',
+                    'categoryCount',
+                ],
+
+                data: function () {
+                    return {
+                        'compareCount': 0,
+                        'wishlistCount': 0,
+                        'languages': false,
+                        'hamburger': false,
+                        'currencies': false,
+                        'subCategory': null,
+                        'isSearchbar': false,
+                        'rootCategories': true,
+                        'cartItemsCount': '{{ $cartItemsCount }}',
+                        'rootCategoriesCollection': this.$root.sharedRootCategories,
+                        'isCustomer': '{{ auth()->guard('customer')->user() ? "true" : "false" }}' == "true",
+                    }
+                },
+
+                watch: {
+                    hamburger: function (value) {
+                        if (value) {
+                            document.body.classList.add('open-hamburger');
+                        } else {
+                            document.body.classList.remove('open-hamburger');
+                        }
+                    },
+
+                    '$root.headerItemsCount': function () {
+                        this.updateHeaderItemsCount();
+                    },
+
+                    '$root.miniCartKey': function () {
+                        this.getMiniCartDetails();
+                    },
+
+                    '$root.sharedRootCategories': function (categories) {
+                        this.formatCategories(categories);
+                    }
+                },
+
+                created: function () {
+                    this.getMiniCartDetails();
+                    this.updateHeaderItemsCount();
+                },
+
+                methods: {
+                    openSearchBar: function () {
+                        this.isSearchbar = !this.isSearchbar;
+
+                        let footer = $('.footer');
+                        let homeContent = $('#home-right-bar-container');
+
+                        if (this.isSearchbar) {
+                            footer[0].style.opacity = '.3';
+                            homeContent[0].style.opacity = '.3';
+                        } else {
+                            footer[0].style.opacity = '1';
+                            homeContent[0].style.opacity = '1';
+                        }
+                    },
+
+                    toggleHamburger: function () {
+                        this.hamburger = !this.hamburger;
+                    },
+
+                    closeDrawer: function() {
+                        $('.nav-container').hide();
+
+                        this.toggleHamburger();
+                        this.rootCategories = true;
+                    },
+
+                    toggleSubcategories: function (index, event) {
+                        if (index == "root") {
+                            this.rootCategories = true;
+                            this.subCategory = false;
+                        } else {
+                            event.preventDefault();
+
+                            let categories = this.$root.sharedRootCategories;
+                            this.rootCategories = false;
+                            this.subCategory = categories[index];
+                        }
+                    },
+
+                    toggleMetaInfo: function (metaKey) {
+                        this.rootCategories = ! this.rootCategories;
+
+                        this[metaKey] = !this[metaKey];
+                    },
+
+                    updateHeaderItemsCount: function () {
+                        if (! this.isCustomer) {
+                            let comparedItems = this.getStorageValue('compared_product');
+
+                            if (comparedItems) {
+                                this.compareCount = comparedItems.length;
+                            }
+                        } else {
+                            this.$http.get(`${this.$root.baseUrl}/items-count`)
+                                .then(response => {
+                                    this.compareCount = response.data.compareProductsCount;
+                                    this.wishlistCount = response.data.wishlistedProductsCount;
+                                })
+                                .catch(exception => {
+                                    console.log(this.__('error.something_went_wrong'));
+                                });
+                        }
+                    },
+
+                    getMiniCartDetails: function () {
+                        this.$http.get(`${this.$root.baseUrl}/mini-cart`)
+                        .then(response => {
+                            if (response.data.status) {
+                                this.cartItemsCount = response.data.mini_cart.cart_items.length;
+                            }
+                        })
+                        .catch(exception => {
+                            console.log(this.__('error.something_went_wrong'));
+                        });
+                    },
+
+                    formatCategories: function (categories) {
+                        let slicedCategories = categories;
+                        let categoryCount = this.categoryCount ? this.categoryCount : 9;
+
+                        if (
+                            slicedCategories
+                            && slicedCategories.length > categoryCount
+                        ) {
+                            slicedCategories = categories.slice(0, categoryCount);
+                        }
+
+                        this.rootCategoriesCollection = slicedCategories;
+                    },
+                },
+            });
+        })()
+    </script>
+@endpush
\ No newline at end of file
diff --git a/resources/themes/velocity/views/UI/particals.blade.php b/resources/themes/velocity/views/UI/particals.blade.php
new file mode 100644
index 000000000..ba03388ed
--- /dev/null
+++ b/resources/themes/velocity/views/UI/particals.blade.php
@@ -0,0 +1,475 @@
+@push('scripts')
+    <script type="text/x-template" id="cart-btn-template">
+        <button
+            type="button"
+            id="mini-cart"
+            @click="toggleMiniCart"
+            :class="`btn btn-link disable-box-shadow ${itemCount == 0 ? 'cursor-not-allowed' : ''}`">
+
+            <div class="mini-cart-content">
+                <i class="material-icons-outlined text-down-3">shopping_cart</i>
+                <span class="badge" v-text="itemCount" v-if="itemCount != 0"></span>
+                <span class="fs18 fw6 cart-text">{{ __('velocity::app.minicart.cart') }}</span>
+            </div>
+            <div class="down-arrow-container">
+                <span class="rango-arrow-down"></span>
+            </div>
+        </button>
+    </script>
+
+    <script type="text/x-template" id="close-btn-template">
+        <button type="button" class="close disable-box-shadow">
+            <span class="white-text fs20" @click="togglePopup">×</span>
+        </button>
+    </script>
+
+    <script type="text/x-template" id="quantity-changer-template">
+        <div :class="`quantity control-group ${errors.has(controlName) ? 'has-error' : ''}`">
+            <label class="required" for="quantity-changer">{{ __('shop::app.products.quantity') }}</label>
+            <button type="button" class="decrease" @click="decreaseQty()">-</button>
+
+            <input
+                :value="qty"
+                class="control"
+                :name="controlName"
+                :v-validate="validations"
+                id="quantity-changer"
+                data-vv-as="&quot;{{ __('shop::app.products.quantity') }}&quot;"
+                readonly />
+
+            <button type="button" class="increase" @click="increaseQty()">+</button>
+
+            <span class="control-error" v-if="errors.has(controlName)">@{{ errors.first(controlName) }}</span>
+        </div>
+    </script>
+@endpush
+
+@include('velocity::UI.header')
+
+@push('scripts')
+    <script type="text/x-template" id="logo-template">
+        <a
+            :class="`left ${addClass}`"
+            href="{{ route('shop.home.index') }}"
+            aria-label="Logo">
+
+            @if ($logo = core()->getCurrentChannel()->logo_url)
+                <img class="logo" src="{{ $logo }}" alt="" width="200" height="50" />
+            @else
+                <img class="logo" src="{{ asset('themes/velocity/assets/images/logo-text.png') }}" alt="" width="200" height="50" />
+            @endif
+        </a>
+    </script>
+
+    <script type="text/x-template" id="searchbar-template">
+        <div class="right searchbar">
+            <div class="row">
+                <div class="col-lg-5 col-md-12">
+                    <div class="input-group">
+                        <form
+                            method="GET"
+                            role="search"
+                            id="search-form"
+                            action="{{ route('velocity.search.index') }}">
+
+                            <div
+                                class="btn-toolbar full-width"
+                                role="toolbar">
+
+                                <div class="btn-group full-width force-center">
+                                    <div class="selectdiv">
+                                        <select class="form-control fs13 styled-select" name="category" @change="focusInput($event)" aria-label="Category">
+                                            <option value="">
+                                                {{ __('velocity::app.header.all-categories') }}
+                                            </option>
+
+                                            <template v-for="(category, index) in $root.sharedRootCategories">
+                                                <option
+                                                    :key="index"
+                                                    selected="selected"
+                                                    :value="category.id"
+                                                    v-if="(category.id == searchedQuery.category)">
+                                                    @{{ category.name }}
+                                                </option>
+
+                                                <option :key="index" :value="category.id" v-else>
+                                                    @{{ category.name }}
+                                                </option>
+                                            </template>
+                                        </select>
+
+                                        <div class="select-icon-container">
+                                            <span class="select-icon rango-arrow-down"></span>
+                                        </div>
+                                    </div>
+
+                                    <input
+                                        required
+                                        name="term"
+                                        type="search"
+                                        class="form-control"
+                                        placeholder="{{ __('velocity::app.header.search-text') }}"
+                                        aria-label="Search"
+                                        v-model:value="inputVal" />
+
+                                    <image-search-component></image-search-component>
+
+                                    <button class="btn" type="button" id="header-search-icon" aria-label="Search" @click="submitForm">
+                                        <i class="fs16 fw6 rango-search"></i>
+                                    </button>
+                                </div>
+                            </div>
+
+                        </form>
+                    </div>
+                </div>
+
+                <div class="col-lg-7 col-md-12 vc-full-screen">
+                    <div class="left-wrapper">
+                        @php
+                            $showWishlist = core()->getConfigData('general.content.shop.wishlist_option') == "1" ? true : false;
+
+                            $showCompare = core()->getConfigData('general.content.shop.compare_option') == "1" ? true : false;
+                        @endphp
+
+                        {!! view_render_event('bagisto.shop.layout.header.wishlist.before') !!}
+                            @if($showWishlist)
+                                <a class="wishlist-btn unset" :href="`{{ route('customer.wishlist.index') }}`">
+                                    <i class="material-icons">favorite_border</i>
+                                    <div class="badge-container" v-if="wishlistCount > 0">
+                                        <span class="badge" v-text="wishlistCount"></span>
+                                    </div>
+                                    <span>{{ __('shop::app.layouts.wishlist') }}</span>
+                                </a>
+                            @endif
+                        {!! view_render_event('bagisto.shop.layout.header.wishlist.after') !!}
+
+                        {!! view_render_event('bagisto.shop.layout.header.compare.before') !!}
+                            @if ($showCompare)
+                                <a
+                                    class="compare-btn unset"
+                                    @auth('customer')
+                                        href="{{ route('velocity.customer.product.compare') }}"
+                                    @endauth
+
+                                    @guest('customer')
+                                        href="{{ route('velocity.product.compare') }}"
+                                    @endguest
+                                    >
+
+                                    <i class="material-icons">compare_arrows</i>
+                                    <div class="badge-container" v-if="compareCount > 0">
+                                        <span class="badge" v-text="compareCount"></span>
+                                    </div>
+                                    <span>{{ __('velocity::app.customer.compare.text') }}</span>
+                                </a>
+                            @endif
+                        {!! view_render_event('bagisto.shop.layout.header.compare.after') !!}
+
+                        {!! view_render_event('bagisto.shop.layout.header.cart-item.before') !!}
+                            @include('shop::checkout.cart.mini-cart')
+                        {!! view_render_event('bagisto.shop.layout.header.cart-item.after') !!}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </script>
+
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet"></script>
+
+    <script type="text/x-template" id="image-search-component-template">
+        <div class="d-inline-block image-search-container" v-if="image_search_status">
+            <label for="image-search-container">
+                <i class="icon camera-icon"></i>
+
+                <input
+                    type="file"
+                    class="d-none"
+                    ref="image_search_input"
+                    id="image-search-container"
+                    v-on:change="uploadImage()" />
+
+                <img
+                    class="d-none"
+                    id="uploaded-image-url"
+                    :src="uploadedImageUrl" alt="" width="20" height="20" />
+            </label>
+        </div>
+    </script>
+
+    <script type="text/javascript">
+        (() => {
+            Vue.component('cart-btn', {
+                template: '#cart-btn-template',
+
+                props: ['itemCount'],
+
+                methods: {
+                    toggleMiniCart: function () {
+                        let modal = $('#cart-modal-content')[0];
+                        if (modal)
+                            modal.classList.toggle('hide');
+
+                        let accountModal = $('.account-modal')[0];
+                        if (accountModal)
+                            accountModal.classList.add('hide');
+
+                        event.stopPropagation();
+                    }
+                }
+            });
+
+            Vue.component('close-btn', {
+                template: '#close-btn-template',
+
+                methods: {
+                    togglePopup: function () {
+                        $('#cart-modal-content').hide();
+                    }
+                }
+            });
+
+            Vue.component('quantity-changer', {
+                template: '#quantity-changer-template',
+                inject: ['$validator'],
+                props: {
+                    controlName: {
+                        type: String,
+                        default: 'quantity'
+                    },
+
+                    quantity: {
+                        type: [Number, String],
+                        default: 1
+                    },
+
+                    minQuantity: {
+                        type: [Number, String],
+                        default: 1
+                    },
+
+                    validations: {
+                        type: String,
+                        default: 'required|numeric|min_value:1'
+                    }
+                },
+
+                data: function() {
+                    return {
+                        qty: this.quantity
+                    }
+                },
+
+                watch: {
+                    quantity: function (val) {
+                        this.qty = val;
+
+                        this.$emit('onQtyUpdated', this.qty)
+                    }
+                },
+
+                methods: {
+                    decreaseQty: function() {
+                        if (this.qty > this.minQuantity)
+                            this.qty = parseInt(this.qty) - 1;
+
+                        this.$emit('onQtyUpdated', this.qty)
+                    },
+
+                    increaseQty: function() {
+                        this.qty = parseInt(this.qty) + 1;
+
+                        this.$emit('onQtyUpdated', this.qty)
+                    }
+                }
+            });
+
+            Vue.component('logo-component', {
+                template: '#logo-template',
+                props: ['addClass'],
+            });
+
+            Vue.component('searchbar-component', {
+                template: '#searchbar-template',
+
+                data: function () {
+                    return {
+                        inputVal: '',
+                        compareCount: 0,
+                        wishlistCount: 0,
+                        searchedQuery: [],
+                        isCustomer: '{{ auth()->guard('customer')->user() ? "true" : "false" }}' == "true",
+                    }
+                },
+
+                watch: {
+                    '$root.headerItemsCount': function () {
+                        this.updateHeaderItemsCount();
+                    }
+                },
+
+                created: function () {
+                    let searchedItem = window.location.search.replace("?", "");
+                    searchedItem = searchedItem.split('&');
+
+                    let updatedSearchedCollection = {};
+
+                    searchedItem.forEach(item => {
+                        let splitedItem = item.split('=');
+                        updatedSearchedCollection[splitedItem[0]] = decodeURI(splitedItem[1]);
+                    });
+
+                    if (updatedSearchedCollection['image-search'] == 1) {
+                        updatedSearchedCollection.term = '';
+                    }
+
+                    this.searchedQuery = updatedSearchedCollection;
+
+                    if (this.searchedQuery.term) {
+                        this.inputVal = decodeURIComponent(this.searchedQuery.term.split('+').join(' '));
+                    }
+
+                    this.updateHeaderItemsCount();
+                },
+
+                methods: {
+                    'focusInput': function (event) {
+                        $(event.target.parentElement.parentElement).find('input').focus();
+                    },
+
+                    'submitForm': function () {
+                        if (this.inputVal !== '') {
+                            $('input[name=term]').val(this.inputVal);
+                            $('#search-form').submit();
+                        }
+                    },
+
+                    'updateHeaderItemsCount': function () {
+                        if (! this.isCustomer) {
+                            let comparedItems = this.getStorageValue('compared_product');
+
+                            if (comparedItems) {
+                                this.compareCount = comparedItems.length;
+                            }
+                        } else {
+                            this.$http.get(`${this.$root.baseUrl}/items-count`)
+                                .then(response => {
+                                    this.compareCount = response.data.compareProductsCount;
+                                    this.wishlistCount = response.data.wishlistedProductsCount;
+                                })
+                                .catch(exception => {
+                                    console.log(this.__('error.something_went_wrong'));
+                                });
+                        }
+                    }
+                }
+            });
+
+            Vue.component('image-search-component', {
+                template: '#image-search-component-template',
+                data: function() {
+                    return {
+                        uploadedImageUrl: '',
+                        image_search_status: "{{core()->getConfigData('general.content.shop.image_search') == '1' ? 'true' : 'false'}}" == 'true'
+                    }
+                },
+
+                methods: {
+                    uploadImage: function() {
+                        var imageInput = this.$refs.image_search_input;
+
+                        if (imageInput.files && imageInput.files[0]) {
+                            if (imageInput.files[0].type.includes('image/')) {
+                                if (imageInput.files[0].size <= 2000000) {
+                                    this.$root.showLoader();
+
+                                    var formData = new FormData();
+
+                                    formData.append('image', imageInput.files[0]);
+
+                                    axios.post(
+                                        "{{ route('shop.image.search.upload') }}",
+                                        formData,
+                                        {
+                                            headers: {
+                                                'Content-Type': 'multipart/form-data'
+                                            }
+                                        }
+                                    ).then(response => {
+                                        var net;
+                                        var self = this;
+                                        this.uploadedImageUrl = response.data;
+
+
+                                        async function app() {
+                                            var analysedResult = [];
+
+                                            var queryString = '';
+
+                                            net = await mobilenet.load();
+
+                                            const imgElement = document.getElementById('uploaded-image-url');
+
+                                            try {
+                                                const result = await net.classify(imgElement);
+
+                                                result.forEach(function(value) {
+                                                    queryString = value.className.split(',');
+
+                                                    if (queryString.length > 1) {
+                                                        analysedResult = analysedResult.concat(queryString)
+                                                    } else {
+                                                        analysedResult.push(queryString[0])
+                                                    }
+                                                });
+                                            } catch (error) {
+                                                self.$root.hideLoader();
+
+                                                window.showAlert(
+                                                    `alert-danger`,
+                                                    this.__('shop.general.alert.error'),
+                                                    "{{ __('shop::app.common.error') }}"
+                                                );
+                                            }
+
+                                            localStorage.searchedImageUrl = self.uploadedImageUrl;
+
+                                            queryString = localStorage.searched_terms = analysedResult.join('_');
+
+                                            self.$root.hideLoader();
+
+                                            window.location.href = "{{ route('shop.search.index') }}" + '?term=' + queryString + '&image-search=1';
+                                        }
+
+                                        app();
+                                    }).catch(() => {
+                                        this.$root.hideLoader();
+
+                                        window.showAlert(
+                                            `alert-danger`,
+                                            this.__('shop.general.alert.error'),
+                                            "{{ __('shop::app.common.error') }}"
+                                        );
+                                    });
+                                } else {
+                                        imageInput.value = '';
+
+                                        window.showAlert(
+                                            `alert-danger`,
+                                            this.__('shop.general.alert.error'),
+                                            "{{ __('shop::app.common.image-upload-limit') }}"
+                                        );
+                                }
+                            } else {
+                                imageInput.value = '';
+
+                                alert('Only images (.jpeg, .jpg, .png, ..) are allowed.');
+                            }
+                        }
+                    }
+                }
+            });
+        })()
+    </script>
+@endpush
\ No newline at end of file
diff --git a/resources/themes/velocity/views/checkout/cart/coupon.blade.php b/resources/themes/velocity/views/checkout/cart/coupon.blade.php
new file mode 100644
index 000000000..6d4ad411d
--- /dev/null
+++ b/resources/themes/velocity/views/checkout/cart/coupon.blade.php
@@ -0,0 +1,117 @@
+@if ($cart)
+    <script type="text/x-template" id="coupon-component-template">
+        <div class="coupon-container">
+            <div class="discount-control">
+                <form class="custom-form" method="post" @submit.prevent="applyCoupon">
+                    <div class="control-group" :class="[error_message ? 'has-error' : '']">
+                        <input
+                            type="text"
+                            name="code"
+                            class="control"
+                            v-model="coupon_code"
+                            placeholder="{{ __('shop::app.checkout.onepage.enter-coupon-code') }}" />
+
+                        <div class="control-error">@{{ error_message }}</div>
+                    </div>
+
+                    <button class="theme-btn light" :disabled="disable_button">{{ __('shop::app.checkout.onepage.apply-coupon') }}</button>
+                </form>
+            </div>
+
+            <div class="applied-coupon-details" v-if="applied_coupon">
+                <label>{{ __('shop::app.checkout.total.coupon-applied') }}</label>
+
+                <label class="right" style="display: inline-flex; align-items: center;">
+                    <b>@{{ applied_coupon }}</b>
+
+                    <i class="rango-close fs18" title="{{ __('shop::app.checkout.total.remove-coupon') }}" v-on:click="removeCoupon"></i>
+                </label>
+            </div>
+        </div>
+    </script>
+
+    <script>
+        Vue.component('coupon-component', {
+            template: '#coupon-component-template',
+
+            inject: ['$validator'],
+
+            data: function() {
+                return {
+                    coupon_code: '',
+                    error_message: '',
+                    applied_coupon: "{{ $cart->coupon_code }}",
+                    route_name: "{{ request()->route()->getName() }}",
+                    disable_button: ("{{ $cart->coupon_code }}" == "" ? false : true),
+                }
+            },
+
+            methods: {
+                applyCoupon: function() {
+                    if (! this.coupon_code.length)
+                        return;
+
+                    this.error_message = null;
+                    this.disable_button = true;
+
+                    let code = this.coupon_code;
+                    axios.post(
+                        '{{ route('shop.checkout.cart.coupon.apply') }}', {code}
+                    ).then(response => {
+                        if (response.data.success) {
+                            this.$emit('onApplyCoupon');
+                            this.applied_coupon = this.coupon_code;
+                            this.coupon_code = '';
+
+                            window.flashMessages = [{'type': 'alert-success', 'message': response.data.message}];
+
+                            this.$root.addFlashMessages();
+
+                            this.redirectIfCartPage();
+                        } else {
+                            this.error_message = response.data.message;
+                        }
+
+                        this.disable_button = false;
+                    }).catch(error => {
+                        this.error_message = error.response.data.message;
+
+                        this.disable_button = false;
+                    });
+                },
+
+                removeCoupon: function () {
+                    var self = this;
+
+                    axios.delete('{{ route('shop.checkout.coupon.remove.coupon') }}')
+                    .then(function(response) {
+                        self.$emit('onRemoveCoupon')
+
+                        self.applied_coupon = '';
+                        self.disable_button = false;
+
+                        window.flashMessages = [{'type': 'alert-success', 'message': response.data.message}];
+
+                        self.$root.addFlashMessages();
+
+                        self.redirectIfCartPage();
+                    })
+                    .catch(function(error) {
+                        window.flashMessages = [{'type': 'alert-error', 'message': error.response.data.message}];
+
+                        self.$root.addFlashMessages();
+                    });
+                },
+
+                redirectIfCartPage: function() {
+                    if (this.route_name != 'shop.checkout.cart.index')
+                        return;
+
+                    setTimeout(function() {
+                        window.location.reload();
+                    }, 700);
+                }
+            }
+        });
+    </script>
+@endif
\ No newline at end of file
diff --git a/resources/themes/velocity/views/checkout/cart/index.blade.php b/resources/themes/velocity/views/checkout/cart/index.blade.php
new file mode 100644
index 000000000..f8ed0ca57
--- /dev/null
+++ b/resources/themes/velocity/views/checkout/cart/index.blade.php
@@ -0,0 +1,311 @@
+@inject ('reviewHelper', 'Webkul\Product\Helpers\Review')
+
+@extends('shop::layouts.master')
+
+@section('page_title')
+    {{ __('shop::app.checkout.cart.title') }}
+@stop
+
+@section('content-wrapper')
+    <cart-component></cart-component>
+@endsection
+
+@push('css')
+    <style type="text/css">
+        .quantity {
+            width: unset;
+            float: right;
+        }
+
+        .alert-wishlist {
+            display: inline-block;
+            position: relative;
+            top: -2px;
+        }
+    </style>
+@endpush
+
+@push('scripts')
+    @include('shop::checkout.cart.coupon')
+
+    <script type="text/x-template" id="cart-template">
+        <div class="container">
+            <section class="cart-details row no-margin col-12">
+                <h2 class="fw6 col-12">{{ __('shop::app.checkout.cart.title') }}</h2>
+
+                @if ($cart)
+                    <div class="cart-details-header col-lg-6 col-md-12">
+                        <div class="row cart-header col-12 no-padding">
+                            <span class="col-8 fw6 fs16 pr0">
+                                {{ __('velocity::app.checkout.items') }}
+                            </span>
+
+                            <span class="col-2 fw6 fs16 no-padding text-right">
+                                {{ __('velocity::app.checkout.qty') }}
+                            </span>
+
+                            <span class="col-2 fw6 fs16 text-right pr0">
+                                {{ __('velocity::app.checkout.subtotal') }}
+                            </span>
+                        </div>
+
+                        <div class="cart-content col-12">
+                            <form
+                                method="POST"
+                                @submit.prevent="onSubmit"
+                                action="{{ route('shop.checkout.cart.update') }}">
+
+                                <div class="cart-item-list">
+                                    @csrf
+
+                                    @foreach ($cart->items as $key => $item)
+
+                                        @php
+                                            $productBaseImage = $item->product->getTypeInstance()->getBaseImage($item);
+                                            $product = $item->product;
+
+                                            $productPrice = $product->getTypeInstance()->getProductPrices();
+
+                                            if (is_null ($product->url_key)) {
+                                                if (! is_null($product->parent)) {
+                                                    $url_key = $product->parent->url_key;
+                                                }
+                                            } else {
+                                                $url_key = $product->url_key;
+                                            }
+
+                                        @endphp
+
+                                        <div class="row col-12" v-if="!isMobileDevice">
+                                            <a
+                                                title="{{ $product->name }}"
+                                                class="product-image-container col-2"
+                                                href="{{ route('shop.productOrCategory.index', $url_key) }}">
+
+                                                <img
+                                                    class="card-img-top"
+                                                    alt="{{ $product->name }}"
+                                                    src="{{ $productBaseImage['large_image_url'] }}"
+                                                    :onerror="`this.src='${this.$root.baseUrl}/vendor/webkul/ui/assets/images/product/large-product-placeholder.png'`">
+                                            </a>
+
+                                            <div class="product-details-content col-6 pr0">
+                                                <div class="row item-title no-margin">
+                                                    <a
+                                                        href="{{ route('shop.productOrCategory.index', $url_key) }}"
+                                                        title="{{ $product->name }}"
+                                                        class="unset col-12 no-padding">
+
+                                                        <span class="fs20 fw6 link-color">{{ $product->name }}</span>
+                                                    </a>
+                                                </div>
+
+                                                @if (isset($item->additional['attributes']))
+                                                    @foreach ($item->additional['attributes'] as $attribute)
+                                                        <div class="row col-12 no-padding no-margin display-block">
+                                                            <label class="no-margin">
+                                                                {{ $attribute['attribute_name'] }} :
+                                                            </label>
+                                                            <span>
+                                                                {{ $attribute['option_label'] }}
+                                                            </span>
+                                                        </div>
+                                                    @endforeach
+                                                @endif
+
+                                                <div class="row col-12 no-padding no-margin">
+                                                    <div class="product-price">
+                                                        <span>{{ core()->currency($item->base_price) }}</span>
+                                                    </div>
+                                                </div>
+
+                                                @php
+                                                    $moveToWishlist = trans('shop::app.checkout.cart.move-to-wishlist');
+
+                                                    $showWishlist = core()->getConfigData('general.content.shop.wishlist_option') == "1" ? true : false;
+                                                @endphp
+
+                                                <div class="no-padding col-12 cursor-pointer fs16">
+                                                    @auth('customer')
+                                                        @if ($showWishlist)
+                                                            @if ($item->parent_id != 'null' ||$item->parent_id != null)
+                                                                <div @click="removeLink('{{ __('shop::app.checkout.cart.cart-remove-action') }}')" class="alert-wishlist">
+                                                                    @include('shop::products.wishlist', [
+                                                                        'route' => route('shop.movetowishlist', $item->id),
+                                                                        'text' => "<span class='align-vertical-super'>$moveToWishlist</span>"
+                                                                    ])
+                                                                </div>
+                                                            @else
+                                                                <div @click="removeLink('{{ __('shop::app.checkout.cart.cart-remove-action') }}')" class="alert-wishlist">
+                                                                    @include('shop::products.wishlist', [
+                                                                        'route' => route('shop.movetowishlist', $item->child->id),
+                                                                        'text' => "<span class='align-vertical-super'>$moveToWishlist</span>"
+                                                                    ])
+                                                                </div>
+                                                            @endif
+                                                        @endif
+                                                    @endauth
+
+                                                    <div class="d-inline-block">
+                                                        <a
+                                                            class="unset
+                                                                @auth('customer')
+                                                                    ml10
+                                                                @endauth
+                                                            "
+                                                            href="{{ route('shop.checkout.cart.remove', ['id' => $item->id]) }}"
+                                                            @click="removeLink('{{ __('shop::app.checkout.cart.cart-remove-action') }}')">
+
+                                                            <span class="rango-delete fs24"></span>
+                                                            <span class="align-vertical-super">{{ __('shop::app.checkout.cart.remove') }}</span>
+                                                        </a>
+                                                    </div>
+                                                </div>
+                                            </div>
+
+                                            <div class="product-quantity col-3 no-padding">
+                                                <quantity-changer
+                                                    :control-name="'qty[{{$item->id}}]'"
+                                                    quantity="{{ $item->quantity }}">
+                                                </quantity-changer>
+                                            </div>
+
+                                            <div class="product-price fs18 col-1">
+                                                <span class="card-current-price fw6 mr10">
+                                                    {{ core()->currency( $item->base_total) }}
+                                                </span>
+                                            </div>
+
+                                            @if (! cart()->isItemHaveQuantity($item))
+                                                <div class="control-error mt-4 fs16 fw6">
+                                                    * {{ __('shop::app.checkout.cart.quantity-error') }}
+                                                </div>
+                                            @endif
+                                        </div>
+
+                                        <div class="row col-12" v-else>
+                                            <a
+                                                title="{{ $product->name }}"
+                                                class="product-image-container col-2"
+                                                href="{{ route('shop.productOrCategory.index', $url_key) }}">
+
+                                                <img
+                                                    src="{{ $productBaseImage['medium_image_url'] }}"
+                                                    class="card-img-top"
+                                                    alt="{{ $product->name }}">
+                                            </a>
+
+                                            <div class="col-10 pr0 item-title">
+                                                <a
+                                                    href="{{ route('shop.productOrCategory.index', $url_key) }}"
+                                                    title="{{ $product->name }}"
+                                                    class="unset col-12 no-padding">
+
+                                                    <span class="fs20 fw6 link-color">{{ $product->name }}</span>
+                                                </a>
+
+                                                @if (isset($item->additional['attributes']))
+                                                    <div class="row col-12 no-padding no-margin">
+
+                                                        @foreach ($item->additional['attributes'] as $attribute)
+                                                            <b>{{ $attribute['attribute_name'] }} : </b>{{ $attribute['option_label'] }}</br>
+                                                        @endforeach
+
+                                                    </div>
+                                                @endif
+
+                                                <div class="col-12 no-padding">
+                                                    @include ('shop::products.price', ['product' => $product])
+                                                </div>
+
+                                                <div class="row col-12 remove-padding-margin actions">
+                                                    <div class="product-quantity col-lg-4 col-6 no-padding">
+                                                        <quantity-changer
+                                                            :control-name="'qty[{{$item->id}}]'"
+                                                            quantity="{{ $item->quantity }}">
+                                                        </quantity-changer>
+                                                    </div>
+
+                                                    <div class="col-4 cursor-pointer text-down-4">
+                                                        <a href="{{ route('shop.checkout.cart.remove', ['id' => $item->id]) }}" class="unset">
+                                                            <i class="material-icons fs24">delete</i>
+                                                        </a>
+                                                    </div>
+                                                </div>
+                                            </div>
+
+                                        </div>
+
+                                    @endforeach
+                                </div>
+
+                                {!! view_render_event('bagisto.shop.checkout.cart.controls.after', ['cart' => $cart]) !!}
+                                    <a
+                                        class="col-12 link-color remove-decoration fs16 no-padding"
+                                        href="{{ route('shop.home.index') }}">
+                                        {{ __('shop::app.checkout.cart.continue-shopping') }}
+                                    </a>
+
+                                    <button
+                                        type="submit"
+                                        class="theme-btn light mr15 float-right unset">
+
+                                        {{ __('shop::app.checkout.cart.update-cart') }}
+                                    </button>
+                                {!! view_render_event('bagisto.shop.checkout.cart.controls.after', ['cart' => $cart]) !!}
+                            </form>
+                        </div>
+
+                        @include ('shop::products.view.cross-sells')
+                    </div>
+                @endif
+
+                {!! view_render_event('bagisto.shop.checkout.cart.summary.after', ['cart' => $cart]) !!}
+
+                    @if ($cart)
+                        <div class="col-lg-4 col-md-12 offset-lg-2 row order-summary-container">
+                            @include('shop::checkout.total.summary', ['cart' => $cart])
+
+                            <coupon-component></coupon-component>
+                        </div>
+                    @else
+                        <div class="fs16 col-12 empty-cart-message">
+                            {{ __('shop::app.checkout.cart.empty') }}
+                        </div>
+
+                        <a
+                            class="fs16 mt15 col-12 remove-decoration continue-shopping"
+                            href="{{ route('shop.home.index') }}">
+
+                            <button type="button" class="theme-btn remove-decoration">
+                                {{ __('shop::app.checkout.cart.continue-shopping') }}
+                            </button>
+                        </a>
+                    @endif
+
+                {!! view_render_event('bagisto.shop.checkout.cart.summary.after', ['cart' => $cart]) !!}
+
+            </section>
+        </div>
+    </script>
+
+    <script type="text/javascript" id="cart-template">
+        (() => {
+            Vue.component('cart-component', {
+                template: '#cart-template',
+                data: function () {
+                    return {
+                        isMobileDevice: this.isMobile(),
+                    }
+                },
+
+                methods: {
+                    removeLink(message) {
+                        if (! confirm(message))
+                            event.preventDefault();
+                    }
+                }
+            })
+        })()
+    </script>
+@endpush
\ No newline at end of file
diff --git a/resources/themes/velocity/views/checkout/cart/mini-cart.blade.php b/resources/themes/velocity/views/checkout/cart/mini-cart.blade.php
new file mode 100644
index 000000000..df0db3e4b
--- /dev/null
+++ b/resources/themes/velocity/views/checkout/cart/mini-cart.blade.php
@@ -0,0 +1,10 @@
+<div class="mini-cart-container">
+    <mini-cart
+        view-cart="{{ route('shop.checkout.cart.index') }}"
+        cart-text="{{ __('shop::app.minicart.view-cart') }}"
+        checkout-text="{{ __('shop::app.minicart.checkout') }}"
+        checkout-url="{{ route('shop.checkout.onepage.index') }}"
+        subtotal-text="{{ __('shop::app.checkout.cart.cart-subtotal') }}"
+        check-minimum-order-url="{{ route('shop.checkout.check-minimum-order') }}">
+    </mini-cart>
+</div>
\ No newline at end of file
diff --git a/resources/themes/velocity/views/checkout/onepage.blade.php b/resources/themes/velocity/views/checkout/onepage.blade.php
new file mode 100644
index 000000000..0e2f0e847
--- /dev/null
+++ b/resources/themes/velocity/views/checkout/onepage.blade.php
@@ -0,0 +1,762 @@
+@extends('shop::layouts.master')
+
+@section('page_title')
+    {{ __('shop::app.checkout.onepage.title') }}
+@stop
+
+@section('content-wrapper')
+    <checkout></checkout>
+@endsection
+
+@push('scripts')
+    @include('shop::checkout.cart.coupon')
+
+    <script type="text/x-template" id="checkout-template">
+        <div class="container">
+            <div id="checkout" class="checkout-process row offset-lg-1 col-lg-11 col-md-12">
+
+                <h1 class="col-12">{{ __('velocity::app.checkout.checkout') }}</h1>
+
+                <div class="col-lg-7 col-md-12">
+                    <div class="step-content information" id="address-section">
+                        @include('shop::checkout.onepage.customer-info')
+                    </div>
+
+                    <div
+                        class="step-content shipping"
+                        id="shipping-section"
+                        v-if="showShippingSection">
+
+                        <shipping-section @onShippingMethodSelected="shippingMethodSelected($event)">
+                        </shipping-section>
+                    </div>
+
+                    <div
+                        class="step-content payment"
+                        v-if="showPaymentSection"
+                        id="payment-section">
+
+                        <payment-section @onPaymentMethodSelected="paymentMethodSelected($event)">
+                        </payment-section>
+
+                        <coupon-component
+                            @onApplyCoupon="getOrderSummary"
+                            @onRemoveCoupon="getOrderSummary">
+                        </coupon-component>
+                    </div>
+
+                    <div
+                        class="step-content review"
+                        v-if="showSummarySection"
+                        id="summary-section">
+
+                        <review-section :key="reviewComponentKey">
+                            <div slot="summary-section">
+                                <summary-section
+                                    discount="1"
+                                    :key="summeryComponentKey"
+                                    @onApplyCoupon="getOrderSummary"
+                                    @onRemoveCoupon="getOrderSummary"
+                                ></summary-section>
+                            </div>
+
+                            <div slot="place-order-btn">
+                                <div class="mb20">
+                                    <button
+                                        type="button"
+                                        class="theme-btn"
+                                        @click="placeOrder()"
+                                        :disabled="!isPlaceOrderEnabled"
+                                        v-if="selected_payment_method.method != 'paypal_smart_button'"
+                                        id="checkout-place-order-button">
+                                        {{ __('shop::app.checkout.onepage.place-order') }}
+                                    </button>
+                                </div>
+                            </div>
+                        </review-section>
+                    </div>
+                </div>
+
+                <div class="col-lg-4 col-md-12 offset-lg-1 order-summary-container top pt0">
+                    <summary-section :key="summeryComponentKey"></summary-section>
+
+                    <div class="paypal-button-container mt10"></div>
+                </div>
+            </div>
+        </div>
+    </script>
+
+    <script type="text/javascript">
+        (() => {
+            var reviewHtml = '';
+            var paymentHtml = '';
+            var summaryHtml = '';
+            var shippingHtml = '';
+            var paymentMethods = '';
+            var customerAddress = '';
+            var shippingMethods = '';
+
+            var reviewTemplateRenderFns = [];
+            var paymentTemplateRenderFns = [];
+            var summaryTemplateRenderFns = [];
+            var shippingTemplateRenderFns = [];
+
+            @auth('customer')
+                @if(auth('customer')->user()->addresses)
+                    customerAddress = @json(auth('customer')->user()->addresses);
+                    customerAddress.email = "{{ auth('customer')->user()->email }}";
+                    customerAddress.first_name = "{{ auth('customer')->user()->first_name }}";
+                    customerAddress.last_name = "{{ auth('customer')->user()->last_name }}";
+                @endif
+            @endauth
+
+            Vue.component('checkout', {
+                template: '#checkout-template',
+                inject: ['$validator'],
+
+                data: function () {
+                    return {
+                        allAddress: {},
+                        current_step: 1,
+                        completed_step: 0,
+                        isCheckPayment: true,
+                        is_customer_exist: 0,
+                        disable_button: false,
+                        reviewComponentKey: 0,
+                        summeryComponentKey: 0,
+                        showPaymentSection: false,
+                        showSummarySection: false,
+                        isPlaceOrderEnabled: false,
+                        new_billing_address: false,
+                        showShippingSection: false,
+                        new_shipping_address: false,
+                        selected_payment_method: '',
+                        selected_shipping_method: '',
+                        countries: [],
+                        countryStates: [],
+
+                        step_numbers: {
+                            'information': 1,
+                            'shipping': 2,
+                            'payment': 3,
+                            'review': 4
+                        },
+
+                        address: {
+                            billing: {
+                                address1: [''],
+                                save_as_address: false,
+                                use_for_shipping: true,
+                            },
+
+                            shipping: {
+                                address1: ['']
+                            },
+                        },
+                    }
+                },
+
+                created: function () {
+                    this.fetchCountries();
+
+                    this.fetchCountryStates();
+
+                    this.getOrderSummary();
+
+                    if (! customerAddress) {
+                        this.new_shipping_address = true;
+                        this.new_billing_address = true;
+                    } else {
+                        this.address.billing.first_name = this.address.shipping.first_name = customerAddress.first_name;
+                        this.address.billing.last_name = this.address.shipping.last_name = customerAddress.last_name;
+                        this.address.billing.email = this.address.shipping.email = customerAddress.email;
+
+                        if (customerAddress.length < 1) {
+                            this.new_shipping_address = true;
+                            this.new_billing_address = true;
+                        } else {
+                            this.allAddress = customerAddress;
+
+                            for (let country in this.countries) {
+                                for (let code in this.allAddress) {
+                                    if (this.allAddress[code].country) {
+                                        if (this.allAddress[code].country == this.countries[country].code) {
+                                            this.allAddress[code]['country'] = this.countries[country].name;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                },
+
+                methods: {
+                    navigateToStep: function (step) {
+                        if (step <= this.completed_step) {
+                            this.current_step = step
+                            this.completed_step = step - 1;
+                        }
+                    },
+
+                    fetchCountries: function () {
+                        let countriesEndPoint = `${this.$root.baseUrl}/api/countries?pagination=0`;
+
+                        this.$http.get(countriesEndPoint)
+                            .then(response => {
+                                this.countries = response.data.data;
+                            })
+                            .catch(function (error) {});
+                    },
+
+                    fetchCountryStates: function () {
+                        let countryStateEndPoint = `${this.$root.baseUrl}/api/country-states?pagination=0`;
+
+                        this.$http.get(countryStateEndPoint)
+                            .then(response => {
+                                this.countryStates = response.data.data;
+                            })
+                            .catch(function (error) {});
+                    },
+
+                    haveStates: function (addressType) {
+                        if (this.countryStates[this.address[addressType].country] && this.countryStates[this.address[addressType].country].length)
+                            return true;
+
+                        return false;
+                    },
+
+                    validateForm: async function (scope) {
+                        var isManualValidationFail = false;
+
+                        if (scope == 'address-form') {
+                            isManualValidationFail = this.validateAddressForm();
+                        }
+
+                        if (! isManualValidationFail) {
+                            await this.$validator.validateAll(scope)
+                            .then(result => {
+                                if (result) {
+                                    switch (scope) {
+                                        case 'address-form':
+                                            /* loader will activate only when save as address is clicked */
+                                            if (this.address.billing.save_as_address) {
+                                                this.$root.showLoader();
+                                            }
+
+                                            /* this is outside because save as address also calling for
+                                               saving the address in the order only */
+                                            this.saveAddress();
+                                            break;
+
+                                        case 'shipping-form':
+                                            if (this.showShippingSection) {
+                                                this.$root.showLoader();
+                                                this.saveShipping();
+                                                break;
+                                            }
+
+                                        case 'payment-form':
+                                            this.$root.showLoader();
+                                            this.savePayment();
+
+                                            this.isPlaceOrderEnabled = ! this.validateAddressForm();
+                                            break;
+
+                                        default:
+                                            break;
+                                    }
+
+                                } else {
+                                    this.isPlaceOrderEnabled = false;
+                                }
+                            });
+                        } else {
+                            this.isPlaceOrderEnabled = false;
+                        }
+                    },
+
+                    validateAddressForm: function () {
+                        var isManualValidationFail = false;
+
+                        let form = $(document).find('form[data-vv-scope=address-form]');
+
+                        // validate that if all the field contains some value
+                        if (form) {
+                            form.find(':input').each((index, element) => {
+                                let value = $(element).val();
+                                let elementId = element.id;
+
+                                if (value == ""
+                                    && element.id != 'sign-btn'
+                                    && element.id != 'billing[company_name]'
+                                    && element.id != 'shipping[company_name]'
+                                ) {
+                                    // check for multiple line address
+                                    if (elementId.match('billing_address_')
+                                        || elementId.match('shipping_address_')
+                                    ) {
+                                        // only first line address is required
+                                        if (elementId == 'billing_address_0'
+                                            || elementId == 'shipping_address_0'
+                                        ) {
+                                            isManualValidationFail = true;
+                                        }
+                                    } else {
+                                        isManualValidationFail = true;
+                                    }
+                                }
+                            });
+                        }
+
+                        // validate that if customer wants to use different shipping address
+                        if (! this.address.billing.use_for_shipping) {
+                            if (! this.address.shipping.address_id && ! this.new_shipping_address) {
+                                isManualValidationFail = true;
+                            }
+                        }
+
+                        return isManualValidationFail;
+                    },
+
+                    isCustomerExist: function() {
+                        this.$validator.attach('address-form.billing[email]', 'required|email');
+
+                        this.$validator.validate('address-form.billing[email]', this.address.billing.email)
+                        .then(isValid => {
+                            if (! isValid)
+                                return;
+
+                            this.$http.post("{{ route('customer.checkout.exist') }}", {email: this.address.billing.email})
+                            .then(response => {
+                                this.is_customer_exist = response.data ? 1 : 0;
+                                console.log(this.is_customer_exist);
+
+                                if (response.data)
+                                    this.$root.hideLoader();
+                            })
+                            .catch(function (error) {})
+                        })
+                        .catch(error => {})
+                    },
+
+                    loginCustomer: function () {
+                        this.$http.post("{{ route('customer.checkout.login') }}", {
+                                email: this.address.billing.email,
+                                password: this.address.billing.password
+                            })
+                            .then(response => {
+                                if (response.data.success) {
+                                    window.location.href = "{{ route('shop.checkout.onepage.index') }}";
+                                } else {
+                                    window.showAlert(`alert-danger`, this.__('shop.general.alert.danger'), response.data.error);
+                                }
+                            })
+                            .catch(function (error) {})
+                    },
+
+                    getOrderSummary: function () {
+                        this.$http.get("{{ route('shop.checkout.summary') }}")
+                            .then(response => {
+                                summaryHtml = Vue.compile(response.data.html)
+
+                                this.summeryComponentKey++;
+                                this.reviewComponentKey++;
+                            })
+                            .catch(function (error) {})
+                    },
+
+                    saveAddress: async function () {
+                        this.disable_button = true;
+
+                        if (this.allAddress.length > 0) {
+                            let address = this.allAddress.forEach(address => {
+                                if (address.id == this.address.billing.address_id) {
+                                    this.address.billing.address1 = [address.address1];
+
+                                    if (address.email) {
+                                        this.address.billing.email = address.email;
+                                    }
+
+                                    if (address.first_name) {
+                                        this.address.billing.first_name = address.first_name;
+                                    }
+
+                                    if (address.last_name) {
+                                        this.address.billing.last_name = address.last_name;
+                                    }
+                                }
+
+                                if (address.id == this.address.shipping.address_id) {
+                                    this.address.shipping.address1 = [address.address1];
+
+                                    if (address.email) {
+                                        this.address.shipping.email = address.email;
+                                    }
+
+                                    if (address.first_name) {
+                                        this.address.shipping.first_name = address.first_name;
+                                    }
+
+                                    if (address.last_name) {
+                                        this.address.shipping.last_name = address.last_name;
+                                    }
+                                }
+                            });
+                        }
+
+                        this.$http.post("{{ route('shop.checkout.save-address') }}", this.address)
+                            .then(response => {
+                                this.disable_button = false;
+                                this.isPlaceOrderEnabled = true;
+
+                                if (this.step_numbers[response.data.jump_to_section] == 2) {
+                                    this.showShippingSection = true;
+                                    shippingHtml = Vue.compile(response.data.html);
+                                } else {
+                                    paymentHtml = Vue.compile(response.data.html)
+                                }
+
+                                this.completed_step = this.step_numbers[response.data.jump_to_section] + 1;
+                                this.current_step = this.step_numbers[response.data.jump_to_section];
+
+                                if (response.data.jump_to_section == "payment") {
+                                    this.showPaymentSection = true;
+                                    paymentMethods  = response.data.paymentMethods;
+                                }
+
+                                shippingMethods = response.data.shippingMethods;
+
+                                this.getOrderSummary();
+
+                                this.$root.hideLoader();
+                            })
+                            .catch(error => {
+                                this.disable_button = false;
+                                this.$root.hideLoader();
+
+                                this.handleErrorResponse(error.response, 'address-form')
+                            })
+                    },
+
+                    saveShipping: async function () {
+                        this.disable_button = true;
+
+                        this.$http.post("{{ route('shop.checkout.save-shipping') }}", {'shipping_method': this.selected_shipping_method})
+                            .then(response => {
+                                this.$root.hideLoader();
+                                this.disable_button = false;
+                                this.showPaymentSection = true;
+
+                                paymentHtml = Vue.compile(response.data.html)
+
+                                this.completed_step = this.step_numbers[response.data.jump_to_section] + 1;
+
+                                this.current_step = this.step_numbers[response.data.jump_to_section];
+
+                                paymentMethods = response.data.paymentMethods;
+
+                                if (this.selected_payment_method) {
+                                    this.savePayment();
+                                }
+
+                                this.getOrderSummary();
+                            })
+                            .catch(error => {
+                                this.disable_button = false;
+                                this.$root.hideLoader();
+                                this.handleErrorResponse(error.response, 'shipping-form')
+                            })
+                    },
+
+                    savePayment: async function () {
+                        this.disable_button = true;
+
+                        if (this.isCheckPayment) {
+                            this.isCheckPayment = false;
+
+                            this.$http.post("{{ route('shop.checkout.save-payment') }}", {'payment': this.selected_payment_method})
+                            .then(response => {
+                                this.isCheckPayment = true;
+                                this.disable_button = false;
+
+                                this.showSummarySection = true;
+                                this.$root.hideLoader();
+
+                                reviewHtml = Vue.compile(response.data.html)
+                                this.completed_step = this.step_numbers[response.data.jump_to_section] + 1;
+                                this.current_step = this.step_numbers[response.data.jump_to_section];
+
+                                document.body.style.cursor = 'auto';
+
+                                this.getOrderSummary();
+                            })
+                            .catch(error => {
+                                this.disable_button = false;
+                                this.$root.hideLoader();
+                                this.handleErrorResponse(error.response, 'payment-form')
+                            });
+                        }
+                    },
+
+                    placeOrder: async function () {
+                        if (this.isPlaceOrderEnabled) {
+                            this.disable_button = false;
+                            this.isPlaceOrderEnabled = false;
+
+                            this.$root.showLoader();
+
+                            this.$http.post("{{ route('shop.checkout.save-order') }}", {'_token': "{{ csrf_token() }}"})
+                            .then(response => {
+                                if (response.data.success) {
+                                    if (response.data.redirect_url) {
+                                        this.$root.hideLoader();
+                                        window.location.href = response.data.redirect_url;
+                                    } else {
+                                        this.$root.hideLoader();
+                                        window.location.href = "{{ route('shop.checkout.success') }}";
+                                    }
+                                }
+                            })
+                            .catch(error => {
+                                this.disable_button = true;
+                                this.$root.hideLoader();
+
+                                window.showAlert(`alert-danger`, this.__('shop.general.alert.danger'), "{{ __('shop::app.common.error') }}");
+                            })
+                        } else {
+                            this.disable_button = true;
+                        }
+                    },
+
+                    handleErrorResponse: function (response, scope) {
+                        if (response.status == 422) {
+                            serverErrors = response.data.errors;
+                            this.$root.addServerErrors(scope)
+                        } else if (response.status == 403) {
+                            if (response.data.redirect_url) {
+                                window.location.href = response.data.redirect_url;
+                            }
+                        }
+                    },
+
+                    shippingMethodSelected: function (shippingMethod) {
+                        this.selected_shipping_method = shippingMethod;
+                    },
+
+                    paymentMethodSelected: function (paymentMethod) {
+                        this.selected_payment_method = paymentMethod;
+                    },
+
+                    newBillingAddress: function () {
+                        this.new_billing_address = true;
+                        this.isPlaceOrderEnabled = false;
+                        this.address.billing.address_id = null;
+                    },
+
+                    newShippingAddress: function () {
+                        this.new_shipping_address = true;
+                        this.isPlaceOrderEnabled = false;
+                        this.address.shipping.address_id = null;
+                    },
+
+                    backToSavedBillingAddress: function () {
+                        this.new_billing_address = false;
+                        this.validateFormAfterAction()
+                    },
+
+                    backToSavedShippingAddress: function () {
+                        this.new_shipping_address = false;
+                        this.validateFormAfterAction()
+                    },
+
+                    validateFormAfterAction: function () {
+                        setTimeout(() => {
+                            this.validateForm('address-form');
+                        }, 0);
+                    }
+                }
+            });
+
+            Vue.component('shipping-section', {
+                inject: ['$validator'],
+
+                data: function () {
+                    return {
+                        templateRender: null,
+
+                        selected_shipping_method: '',
+
+                        first_iteration : true,
+                    }
+                },
+
+                staticRenderFns: shippingTemplateRenderFns,
+
+                mounted: function () {
+                    this.templateRender = shippingHtml.render;
+
+                    for (var i in shippingHtml.staticRenderFns) {
+                        shippingTemplateRenderFns.push(shippingHtml.staticRenderFns[i]);
+                    }
+
+                    eventBus.$emit('after-checkout-shipping-section-added');
+                },
+
+                render: function (h) {
+                    return h('div', [
+                        (this.templateRender ?
+                            this.templateRender() :
+                            '')
+                        ]);
+                },
+
+                methods: {
+                    methodSelected: function () {
+                        this.$parent.validateForm('shipping-form');
+
+                        this.$emit('onShippingMethodSelected', this.selected_shipping_method)
+
+                        eventBus.$emit('after-shipping-method-selected', this.selected_shipping_method);
+                    }
+                }
+            })
+
+            Vue.component('payment-section', {
+                inject: ['$validator'],
+
+                data: function () {
+                    return {
+                        templateRender: null,
+
+                        payment: {
+                            method: ""
+                        },
+
+                        first_iteration : true,
+                    }
+                },
+
+                staticRenderFns: paymentTemplateRenderFns,
+
+                mounted: function () {
+                    this.templateRender = paymentHtml.render;
+
+                    for (var i in paymentHtml.staticRenderFns) {
+                        paymentTemplateRenderFns.push(paymentHtml.staticRenderFns[i]);
+                    }
+
+                    eventBus.$emit('after-checkout-payment-section-added');
+                },
+
+                render: function (h) {
+                    return h('div', [
+                        (this.templateRender ?
+                            this.templateRender() :
+                            '')
+                        ]);
+                },
+
+                methods: {
+                    methodSelected: function () {
+                        this.$parent.validateForm('payment-form');
+
+                        this.$emit('onPaymentMethodSelected', this.payment)
+
+                        eventBus.$emit('after-payment-method-selected', this.payment);
+                    }
+                }
+            })
+
+            Vue.component('review-section', {
+                data: function () {
+                    return {
+                        error_message: '',
+                        templateRender: null,
+                    }
+                },
+
+                staticRenderFns: reviewTemplateRenderFns,
+
+                render: function (h) {
+                    return h(
+                        'div', [
+                            this.templateRender ? this.templateRender() : ''
+                        ]
+                    );
+                },
+
+                mounted: function () {
+                    this.templateRender = reviewHtml.render;
+
+                    for (var i in reviewHtml.staticRenderFns) {
+                        reviewTemplateRenderFns[i] = reviewHtml.staticRenderFns[i];
+                    }
+
+                    this.$forceUpdate();
+                }
+            });
+
+            Vue.component('summary-section', {
+                inject: ['$validator'],
+
+                staticRenderFns: summaryTemplateRenderFns,
+
+                props: {
+                    discount: {
+                        default: 0,
+                        type: [String, Number],
+                    }
+                },
+
+                data: function () {
+                    return {
+                        changeCount: 0,
+                        coupon_code: null,
+                        error_message: null,
+                        templateRender: null,
+                        couponChanged: false,
+                    }
+                },
+
+                mounted: function () {
+                    this.templateRender = summaryHtml.render;
+
+                    for (var i in summaryHtml.staticRenderFns) {
+                        summaryTemplateRenderFns[i] = summaryHtml.staticRenderFns[i];
+                    }
+
+                    this.$forceUpdate();
+                },
+
+                render: function (h) {
+                    return h('div', [
+                        (this.templateRender ?
+                            this.templateRender() :
+                            '')
+                        ]);
+                },
+
+                methods: {
+                    onSubmit: function () {
+                        var this_this = this;
+                        const emptyCouponErrorText = "Please enter a coupon code";
+                    },
+
+                    changeCoupon: function () {
+                        if (this.couponChanged == true && this.changeCount == 0) {
+                            this.changeCount++;
+
+                            this.error_message = null;
+
+                            this.couponChanged = false;
+                        } else {
+                            this.changeCount = 0;
+                        }
+                    },
+                }
+            });
+
+        })()
+    </script>
+
+@endpush
diff --git a/resources/themes/velocity/views/checkout/onepage/customer-checkout.blade.php b/resources/themes/velocity/views/checkout/onepage/customer-checkout.blade.php
new file mode 100644
index 000000000..89c9a00aa
--- /dev/null
+++ b/resources/themes/velocity/views/checkout/onepage/customer-checkout.blade.php
@@ -0,0 +1,24 @@
+<div class="col-12 form-field" id="password" v-if="is_customer_exist">
+    <label for="password">{{ __('shop::app.checkout.onepage.password') }}</label>
+
+    <input
+        id="password"
+        type="password"
+        class="control"
+        name="password"
+        v-model="address.billing.password" />
+
+    <div class="forgot-password-link mt-4 mb-4">
+        <a href="{{ route('customer.forgot-password.create') }}">{{ __('shop::app.customer.login-form.forgot_pass') }}</a>
+
+        <div class="mt-10">
+            @if (Cookie::has('enable-resend') && Cookie::get('enable-resend') == true)
+                <a href="{{ route('customer.resend.verification-email', Cookie::get('email-for-resend')) }}">{{ __('shop::app.customer.login-form.resend-verification') }}</a>
+            @endif
+        </div>
+    </div>
+
+    <button type='button' id="" class="theme-btn" @click="loginCustomer">
+        {{ __('shop::app.customer.login-form.button_title') }}
+    </button>
+</div>
\ No newline at end of file
diff --git a/resources/themes/velocity/views/checkout/onepage/customer-info.blade.php b/resources/themes/velocity/views/checkout/onepage/customer-info.blade.php
new file mode 100644
index 000000000..5d1790cda
--- /dev/null
+++ b/resources/themes/velocity/views/checkout/onepage/customer-info.blade.php
@@ -0,0 +1,243 @@
+<form data-vv-scope="address-form" class="custom-form">
+    <div class="form-container" v-if="!this.new_billing_address">
+        <accordian
+            :active="true"
+            :title="'{{ __('shop::app.checkout.onepage.billing-address') }}'">
+
+            <div class="form-header mb-30" slot="header">
+                <h3 class="fw6 display-inbl">
+                    {{ __('shop::app.checkout.onepage.billing-address') }}
+                </h3>
+                <i class="rango-arrow"></i>
+            </div>
+
+            <div slot="body">
+                <div class="address-container row full-width no-margin">
+                    <div
+                        :key="index"
+                        class="col-lg-6 col-md-12 address-holder pl0"
+                        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">
+                                        @{{ addresses.first_name }} @{{ addresses.last_name }},
+                                    </h5>
+
+                                    <ul type="none">
+                                        <li>@{{ addresses.address1 }},</li>
+                                        <li>@{{ addresses.postcode }} @{{ addresses.city }},</li>
+                                        <li>@{{ addresses.state }},</li>
+                                        <li>@{{ addresses.country }}</li>
+                                        <li>
+                                            {{ __('shop::app.customer.account.address.index.contact') }} : @{{ addresses.phone }}
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-lg-6 col-md-12 address-holder pl0">
+                        <div class="card">
+                            <div
+                                @click="validateFormAfterAction"
+                                class="card-body add-address-button">
+                                <div class="cursor-pointer" @click="newBillingAddress()">
+                                    <i class="material-icons">
+                                        add_circle_outline
+                                    </i>
+                                    <span>{{ __('shop::app.checkout.onepage.new-address') }}</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div :class="`col-12 mt15 has-error ${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"
+                                id="billing[use_for_shipping]"
+                                name="billing[use_for_shipping]"
+                                @change="validateFormAfterAction"
+                                v-model="address.billing.use_for_shipping" />
+
+                            <span>
+                                {{ __('shop::app.checkout.onepage.use_for_shipping') }}
+                            </span>
+                        </span>
+                    </div>
+                @endif
+            </div>
+        </accordian>
+    </div>
+
+    <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.billing-address') }}
+                </h3>
+
+                <i class="rango-arrow"></i>
+            </div>
+
+
+            <div class="col-12 no-padding" slot="body">
+                @auth('customer')
+                    @if(count(auth('customer')->user()->addresses))
+                        <a
+                            class="theme-btn light float-right text-up-14"
+                            @click="backToSavedBillingAddress()">
+
+                            {{ __('shop::app.checkout.onepage.back') }}
+                        </a>
+                    @endif
+                @endauth
+
+                @include('shop::checkout.onepage.customer-new-form', [
+                    'billing' => true
+                ])
+            </div>
+        </accordian>
+    </div>
+
+    @if ($cart->haveStockableItems())
+        <div
+            class="form-container"
+            v-if="!address.billing.use_for_shipping && !this.new_shipping_address">
+
+            <accordian
+                :active="true"
+                :title="'{{ __('shop::app.checkout.onepage.shipping-address') }}'">
+
+                <div class="form-header mb-30" slot="header">
+                    <h3 class="fw6 display-inbl">
+                        {{ __('shop::app.checkout.onepage.shipping-address') }}
+                    </h3>
+                    <i class="rango-arrow"></i>
+                </div>
+
+                <div class="address-container row mb30 remove-padding-margin" slot="body">
+                    <div
+                        class="col-lg-6 address-holder pl0"
+                        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"
+                                        name="shipping[address_id]"
+                                        v-model="address.shipping.address_id"
+                                        @change="validateForm('address-form')"
+                                        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">
+                                        @{{ addresses.first_name }} @{{ addresses.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 class="col-lg-6 address-holder pl0">
+                        <div class="card">
+                            <div
+                                @click="validateFormAfterAction"
+                                class="card-body add-address-button">
+                                <div class="cursor-pointer" @click="newShippingAddress()">
+                                    <i class="material-icons">
+                                        add_circle_outline
+                                    </i>
+                                    <span>{{ __('shop::app.checkout.onepage.new-address') }}</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div :class="`col-12 mt15 has-error pl0 ${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
+                :active="true"
+                :title="'{{ __('shop::app.checkout.onepage.shipping-address') }}'">
+
+                <div class="form-header" slot="header">
+                    <h3 class="fw6 display-inbl">
+                        {{ __('shop::app.checkout.onepage.shipping-address') }}
+                    </h3>
+                    <i class="rango-arrow"></i>
+                </div>
+
+                <div class="col-12 no-padding" slot="body">
+                    @auth('customer')
+                        @if(count(auth('customer')->user()->addresses))
+                            <a
+                                class="theme-btn light float-right text-up-14"
+                                @click="backToSavedShippingAddress()">
+
+                                {{ __('shop::app.checkout.onepage.back') }}
+                            </a>
+                        @endif
+                    @endauth
+
+                    @include('shop::checkout.onepage.customer-new-form', [
+                        'shipping' => true
+                    ])
+                </div>
+            </accordian>
+        </div>
+    @endif
+</form>
diff --git a/resources/themes/velocity/views/checkout/onepage/customer-new-form.blade.php b/resources/themes/velocity/views/checkout/onepage/customer-new-form.blade.php
new file mode 100644
index 000000000..92732accc
--- /dev/null
+++ b/resources/themes/velocity/views/checkout/onepage/customer-new-form.blade.php
@@ -0,0 +1,541 @@
+@php
+    $isCustomer = auth()->guard('customer')->check();
+@endphp
+
+    @if (isset($shipping) && $shipping)
+        <div :class="`col-12 form-field mb30 ${errors.has('address-form.shipping[first_name]') ? 'has-error' : ''}`">
+            <label for="shipping[first_name]" class="mandatory" style="width: unset;">
+                {{ __('shop::app.checkout.onepage.first-name') }}
+            </label>
+
+            <input
+                type="text"
+                class="control"
+                v-validate="'required'"
+                id="shipping[first_name]"
+                name="shipping[first_name]"
+                v-model="address.shipping.first_name"
+                @change="validateForm('address-form')"
+                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="`col-12 form-field ${errors.has('address-form.shipping[last_name]') ? 'has-error' : ''}`">
+            <label for="shipping[last_name]" class="mandatory">
+                {{ __('shop::app.checkout.onepage.last-name') }}
+            </label>
+
+            <input
+                type="text"
+                class="control"
+                v-validate="'required'"
+                id="shipping[last_name]"
+                name="shipping[last_name]"
+                v-model="address.shipping.last_name"
+                @change="validateForm('address-form')"
+                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="`col-12 form-field ${errors.has('address-form.shipping[email]') ? 'has-error' : ''}`">
+            <label for="shipping[email]" class="mandatory">
+                {{ __('shop::app.checkout.onepage.email') }}
+            </label>
+
+            <input
+                type="text"
+                class="control"
+                id="shipping[email]"
+                name="shipping[email]"
+                v-validate="'required|email'"
+                v-model="address.shipping.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.shipping[email]')">
+                @{{ errors.first('address-form.shipping[email]') }}
+            </span>
+        </div>
+
+        <div :class="`col-12 form-field ${errors.has('address-form.shipping[address1][]') ? 'has-error' : ''}`" style="margin-bottom: 0;">
+            <label for="shipping_address_0" class="mandatory">
+                {{ __('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]"
+                @change="validateForm('address-form')"
+                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
+        )
+            @for ($i = 1; $i < core()->getConfigData('customer.settings.address.street_lines'); $i++)
+                <div class="col-12 form-field" style="margin-top: 10px; margin-bottom: 0">
+                    <input
+                        type="text"
+                        class="control"
+                        id="shipping_address_{{ $i }}"
+                        name="shipping[address1][{{ $i }}]"
+                        @change="validateForm('address-form')"
+                        v-model="address.shipping.address1[{{$i}}]" />
+                </div>
+            @endfor
+        @endif
+
+        <div :class="`col-12 form-field ${errors.has('address-form.shipping[city]') ? 'has-error' : ''}`" style="margin-top: 15px;">
+            <label for="shipping[city]" class="mandatory">
+                {{ __('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"
+                @change="validateForm('address-form')"
+                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="`col-12 form-field ${errors.has('address-form.shipping[country]') ? 'has-error' : ''}`">
+            <label for="shipping[country]" class="mandatory">
+                {{ __('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"
+                @change="validateForm('address-form')"
+                data-vv-as="&quot;{{ __('shop::app.checkout.onepage.country') }}&quot;">
+
+                <option value=""></option>
+
+                <option v-for='(country, index) in countries' :value="country.code">
+                    @{{ country.name }}
+                </option>
+            </select>
+
+            <div class="select-icon-container">
+                <i class="select-icon rango-arrow-down"></i>
+            </div>
+
+            <span class="control-error" v-if="errors.has('address-form.shipping[country]')">
+                @{{ errors.first('address-form.shipping[country]') }}
+            </span>
+        </div>
+
+
+        <div :class="`col-12 form-field ${errors.has('address-form.shipping[state]') ? 'has-error' : ''}`">
+            <label for="shipping[state]" class="mandatory">
+                {{ __('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"
+                @change="validateForm('address-form')"
+                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"
+                @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.shipping.country]' :value="state.code">
+                    @{{ state.default_name }}
+                </option>
+            </select>
+
+            <div class="select-icon-container" v-if="haveStates('shipping')">
+                <i class="select-icon rango-arrow-down"></i>
+            </div>
+
+            <span class="control-error" v-if="errors.has('address-form.shipping[state]')">
+                @{{ errors.first('address-form.shipping[state]') }}
+            </span>
+        </div>
+
+        <div :class="`col-12 form-field ${errors.has('address-form.shipping[postcode]') ? 'has-error' : ''}`">
+            <label for="shipping[postcode]" class="mandatory">
+                {{ __('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"
+                @keyup="validateForm('address-form')"
+                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="`col-12 form-field ${errors.has('address-form.shipping[phone]') ? 'has-error' : ''}`">
+            <label for="shipping[phone]" class="mandatory">
+                {{ __('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"
+                @change="validateForm('address-form')"
+                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"
+                        id="shipping[save_as_address]"
+                        name="shipping[save_as_address]"
+                        @change="validateForm('address-form')"
+                        v-model="address.shipping.save_as_address"/>
+
+                    <span>
+                        {{ __('shop::app.checkout.onepage.save_as_address') }}
+                    </span>
+                </span>
+            </div>
+        @endauth
+
+    @elseif (isset($billing) && $billing)
+        <div :class="`col-12 form-field ${errors.has('address-form.billing[company_name]') ? 'has-error' : ''}`">
+            <label for="billing[company_name]">
+                {{ __('shop::app.checkout.onepage.company-name') }}
+            </label>
+
+            <input
+                type="text"
+                class="control"
+                id="billing[company_name]"
+                name="billing[company_name]"
+                v-model="address.billing.company_name"
+                @change="validateForm('address-form')"
+                data-vv-as="&quot;{{ __('shop::app.checkout.onepage.company-name') }}&quot;" />
+
+            <span class="control-error" v-if="errors.has('address-form.billing[company_name]')">
+                @{{ errors.first('address-form.billing[company_name]') }}
+            </span>
+        </div>
+
+        <div :class="`col-12 form-field ${errors.has('address-form.billing[first_name]') ? 'has-error' : ''}`">
+            <label for="billing[first_name]" class="mandatory">
+                {{ __('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"
+                @change="validateForm('address-form')"
+                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="`col-12 form-field ${errors.has('address-form.billing[last_name]') ? 'has-error' : ''}`">
+            <label for="billing[last_name]" class="mandatory">
+                {{ __('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"
+                @change="validateForm('address-form')"
+                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="`col-12 form-field ${errors.has('address-form.billing[email]') ? 'has-error' : ''}`">
+            <label for="billing[email]" class="mandatory">
+                {{ __('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="`col-12 form-field ${errors.has('address-form.billing[address1][]') ? 'has-error' : ''}`" style="margin-bottom: 0;">
+            <label for="billing_address_0" class="mandatory">
+                {{ __('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]"
+                @change="validateForm('address-form')"
+                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
+        )
+            @for ($i = 1; $i < core()->getConfigData('customer.settings.address.street_lines'); $i++)
+                <div class="col-12 form-field" style="margin-top: 10px; margin-bottom: 0">
+                        <input
+                            type="text"
+                            class="control"
+                            id="billing_address_{{ $i }}"
+                            name="billing[address1][{{ $i }}]"
+                            v-model="address.billing.address1[{{$i}}]" />
+                </div>
+            @endfor
+        @endif
+
+        <div :class="`col-12 form-field ${errors.has('address-form.billing[city]') ? 'has-error' : ''}`" style="margin-top: 15px;">
+            <label for="billing[city]" class="mandatory">
+                {{ __('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"
+                @change="validateForm('address-form')"
+                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="`col-12 form-field ${errors.has('address-form.billing[country]') ? 'has-error' : ''}`">
+            <label for="billing[country]" class="mandatory">
+                {{ __('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"
+                @change="validateForm('address-form')"
+                data-vv-as="&quot;{{ __('shop::app.checkout.onepage.country') }}&quot;">
+
+                <option value=""></option>
+
+                <option v-for='(country, index) in countries' :value="country.code">
+                    @{{ country.name }}
+                </option>
+            </select>
+
+            <div class="select-icon-container">
+                <i class="select-icon rango-arrow-down"></i>
+            </div>
+
+            <span class="control-error" v-if="errors.has('address-form.billing[country]')">
+                @{{ errors.first('address-form.billing[country]') }}
+            </span>
+        </div>
+
+        <div :class="`col-12 form-field ${errors.has('address-form.billing[state]') ? 'has-error' : ''}`">
+            <label for="billing[state]" class="mandatory">
+                {{ __('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"
+                @change="validateForm('address-form')"
+                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>
+            <div class="select-icon-container" v-if="haveStates('billing')">
+                <i class="select-icon rango-arrow-down"></i>
+            </div>
+
+            <span class="control-error" v-if="errors.has('address-form.billing[state]')">
+                @{{ errors.first('address-form.billing[state]') }}
+            </span>
+        </div>
+
+        <div :class="`col-12 form-field ${errors.has('address-form.billing[postcode]') ? 'has-error' : ''}`">
+            <label for="billing[postcode]" class="mandatory">
+                {{ __('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"
+                @change="validateForm('address-form')"
+                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="`col-12 form-field ${errors.has('address-form.billing[phone]') ? 'has-error' : ''}`">
+            <label for="billing[phone]" class="mandatory">
+                {{ __('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
+                        type="checkbox"
+                        id="billing[use_for_shipping]"
+                        name="billing[use_for_shipping]"
+                        v-model="address.billing.use_for_shipping"
+                        @change="setTimeout(() => validateForm('address-form'), 0)" />
+
+                    <span>
+                        {{ __('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
+                        type="checkbox"
+                        id="billing[save_as_address]"
+                        name="billing[save_as_address]"
+                        @change="validateForm('address-form')"
+                        v-model="address.billing.save_as_address"/>
+
+                    <span>
+                        {{ __('shop::app.checkout.onepage.save_as_address') }}
+                    </span>
+                </span>
+            </div>
+        @endauth
+    @endif
\ No newline at end of file
diff --git a/resources/themes/velocity/views/checkout/onepage/payment.blade.php b/resources/themes/velocity/views/checkout/onepage/payment.blade.php
new file mode 100644
index 000000000..be0f4af35
--- /dev/null
+++ b/resources/themes/velocity/views/checkout/onepage/payment.blade.php
@@ -0,0 +1,67 @@
+<form data-vv-scope="payment-form" class="payment-form">
+    <div class="form-container">
+        <accordian :title="'{{ __('shop::app.checkout.payment-methods') }}'" :active="true">
+            <div class="form-header mb-30" slot="header">
+                
+                <h3 class="fw6 display-inbl">
+                   {{ __('shop::app.checkout.onepage.payment-methods') }}
+                </h3>
+
+                <i class="rango-arrow"></i>
+            </div>
+
+            <div class="payment-methods" slot="body">
+                @foreach ($paymentMethods as $payment)
+
+                    {!! view_render_event('bagisto.shop.checkout.payment-method.before', ['payment' => $payment]) !!}
+
+                    <div class="row col-12">
+                        <div>
+                            <label class="radio-container" style="position: absolute;">
+                                <input
+                                    type="radio"
+                                    name="payment[method]"
+                                    v-validate="'required'"
+                                    v-model="payment.method"
+                                    @change="methodSelected()"
+                                    id="{{ $payment['method'] }}"
+                                    value="{{ $payment['method'] }}"
+                                    data-vv-as="&quot;{{ __('shop::app.checkout.onepage.payment-method') }}&quot;" />
+
+                                <span class="checkmark"></span>
+                            </label>
+                        </div>
+
+                        <div class="pl40">
+                            <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>
+
+                            <?php $additionalDetails = \Webkul\Payment\Payment::getAdditionalDetails($payment['method']); ?>
+
+                            @if (! empty($additionalDetails))
+                                <div class="instructions" v-show="payment.method == '{{$payment['method']}}'">
+                                    <label>{{ $additionalDetails['title'] }}</label>
+                                    <p>{{ $additionalDetails['value'] }}</p>
+                                </div>
+                            @endif
+                        </div>
+                    </div>
+
+                    {!! view_render_event('bagisto.shop.checkout.payment-method.after', ['payment' => $payment]) !!}
+
+                @endforeach
+
+                <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/resources/themes/velocity/views/checkout/onepage/review.blade.php b/resources/themes/velocity/views/checkout/onepage/review.blade.php
new file mode 100644
index 000000000..c4a089206
--- /dev/null
+++ b/resources/themes/velocity/views/checkout/onepage/review.blade.php
@@ -0,0 +1,176 @@
+<div class="form-container review-checkout-conainer">
+    <accordian :title="'{{ __('shop::app.checkout.onepage.summary') }}'" :active="true">
+        <div class="form-header mb-30" slot="header">
+            <h3 class="fw6 display-inbl">
+                {{ __('shop::app.checkout.onepage.summary') }}
+            </h3>
+            <i class="rango-arrow"></i>
+        </div>
+
+        <div slot="body">
+            <div class="address-summary row">
+                @if ($billingAddress = $cart->billing_address)
+                    <div class="billing-address col-lg-6 col-md-12">
+                        <div class="card-title mb-20">
+                            <b>{{ __('shop::app.checkout.onepage.billing-address') }}</b>
+                        </div>
+
+                        <div class="card-content">
+                            <ul type="none">
+                                <li>
+                                    {{ $billingAddress->company_name ?? '' }}
+                                </li><br />
+                                <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->company_name ?? '' }}
+                                </li><br/>
+                                <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'] }}" alt="" />
+                        </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>
+
+                            <div class="row col-12">
+                                <b>{{ core()->currency($item->base_total) }}</b>
+                            </div>
+
+                            {!! view_render_event('bagisto.shop.checkout.options.before', ['item' => $item]) !!}
+
+                                @if (isset($item->additional['attributes']))
+                                    <div class="item-options">
+
+                                        @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>
+                @endforeach
+            </div>
+
+            <div class="order-description row fs16 cart-details">
+                <div class="col-lg-4 col-md-12">
+                    @if ($cart->haveStockableItems())
+                        <div class="shipping mb20">
+                            <div class="decorator">
+                                <i class="icon shipping-icon"></i>
+                            </div>
+
+                            <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-lg-6 col-md-12 order-summary-container bottom pt0 offset-lg-2">
+                    <slot name="summary-section"></slot>
+                </div>
+            </div>
+        </div>
+    </accordian>
+</div>
\ No newline at end of file
diff --git a/resources/themes/velocity/views/checkout/onepage/shipping.blade.php b/resources/themes/velocity/views/checkout/onepage/shipping.blade.php
new file mode 100644
index 000000000..044e8bd91
--- /dev/null
+++ b/resources/themes/velocity/views/checkout/onepage/shipping.blade.php
@@ -0,0 +1,60 @@
+<form data-vv-scope="shipping-form" class="shipping-form">
+    <div class="form-container">
+        <accordian :title="'{{ __('shop::app.checkout.onepage.shipping-method') }}'" :active="true">
+            <div class="form-header" slot="header">
+                <h3 class="fw6 display-inbl">
+                 {{ __('shop::app.checkout.onepage.shipping-method') }}
+                </h3>
+                <i class="rango-arrow"></i>
+            </div>
+
+            <div :class="`shipping-methods ${errors.has('shipping-form.shipping_method') ? 'has-error' : ''}`" slot="body">
+
+                @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
+                                            type="radio"
+                                            v-validate="'required'"
+                                            name="shipping_method"
+                                            id="{{ $rate->method }}"
+                                            value="{{ $rate->method }}"
+                                            @change="methodSelected()"
+                                            v-model="selected_shipping_method"
+                                            data-vv-as="&quot;{{ __('shop::app.checkout.onepage.shipping-method') }}&quot;" />
+
+                                        <span class="checkmark"></span>
+                                    </label>
+                                </div>
+
+                                <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>
+
+                        @endforeach
+
+                    {!! view_render_event('bagisto.shop.checkout.shipping-method.after', ['rateGroup' => $rateGroup]) !!}
+
+                @endforeach
+
+                <span
+                    class="control-error"
+                    v-if="errors.has('shipping-form.shipping_method')">
+
+                    @{{ errors.first('shipping-form.shipping_method') }}
+                </span>
+            </div>
+        </accordian>
+    </div>
+</form>
\ No newline at end of file
diff --git a/resources/themes/velocity/views/checkout/success.blade.php b/resources/themes/velocity/views/checkout/success.blade.php
new file mode 100644
index 000000000..d67def693
--- /dev/null
+++ b/resources/themes/velocity/views/checkout/success.blade.php
@@ -0,0 +1,32 @@
+@extends('shop::layouts.master')
+
+@section('page_title')
+    {{ __('shop::app.checkout.success.title') }}
+@stop
+
+@section('content-wrapper')
+    <div class="container">
+        <div class="order-success-content row col-12 offset-1">
+            <h1 class="row col-12">{{ __('shop::app.checkout.success.thanks') }}</h1>
+
+            <p class="row col-12">
+                {{ __('shop::app.checkout.success.order-id-info', ['order_id' => $order->increment_id]) }}
+            </p>
+
+            <p class="row col-12">
+                {{ __('shop::app.checkout.success.info') }}
+            </p>
+
+            {{ view_render_event('bagisto.shop.checkout.continue-shopping.before', ['order' => $order]) }}
+
+            <div class="mt15 row-col-12">
+                <a href="{{ route('shop.home.index') }}" class="theme-btn remove-decoration">
+                    {{ __('shop::app.checkout.cart.continue-shopping') }}
+                </a>
+            </div>
+
+            {{ view_render_event('bagisto.shop.checkout.continue-shopping.after', ['order' => $order]) }}
+
+        </div>
+    </div>
+@endsection
diff --git a/resources/themes/velocity/views/checkout/total/summary.blade.php b/resources/themes/velocity/views/checkout/total/summary.blade.php
new file mode 100644
index 000000000..5153fbbe2
--- /dev/null
+++ b/resources/themes/velocity/views/checkout/total/summary.blade.php
@@ -0,0 +1,60 @@
+<div class="order-summary fs16">
+    <h3 class="fw6">{{ __('velocity::app.checkout.cart.cart-summary') }}</h3>
+
+    <div class="row">
+        <span class="col-8">{{ __('velocity::app.checkout.sub-total') }}</span>
+        <span class="col-4 text-right">{{ core()->currency($cart->base_sub_total) }}</span>
+    </div>
+
+    @if ($cart->selected_shipping_rate)
+        <div class="row">
+            <span class="col-8">{{ __('shop::app.checkout.total.delivery-charges') }}</span>
+            <span class="col-4 text-right">{{ core()->currency($cart->selected_shipping_rate->base_price) }}</span>
+        </div>
+    @endif
+
+    @if ($cart->base_tax_total)
+        @foreach (Webkul\Tax\Helpers\Tax::getTaxRatesWithAmount($cart, true) as $taxRate => $baseTaxAmount )
+            <div class="row">
+                <span class="col-8" id="taxrate-{{ core()->taxRateAsIdentifier($taxRate) }}">{{ __('shop::app.checkout.total.tax') }} {{ $taxRate }} %</span>
+                <span class="col-4 text-right" id="basetaxamount-{{ core()->taxRateAsIdentifier($taxRate) }}">{{ core()->currency($baseTaxAmount) }}</span>
+            </div>
+        @endforeach
+    @endif
+
+    @if (
+        $cart->base_discount_amount
+        && $cart->base_discount_amount > 0
+    )
+        <div
+            id="discount-detail"
+            class="row">
+
+            <span class="col-8">{{ __('shop::app.checkout.total.disc-amount') }}</span>
+            <span class="col-4 text-right">
+                -{{ core()->currency($cart->base_discount_amount) }}
+            </span>
+        </div>
+    @endif
+
+    <div class="payable-amount row" id="grand-total-detail">
+        <span class="col-8">{{ __('shop::app.checkout.total.grand-total') }}</span>
+        <span class="col-4 text-right fw6" id="grand-total-amount-detail">
+            {{ core()->currency($cart->base_grand_total) }}
+        </span>
+    </div>
+
+    <div class="row">
+        @php
+            $minimumOrderAmount = (float) core()->getConfigData('sales.orderSettings.minimum-order.minimum_order_amount') ?? 0;
+        @endphp
+
+        <proceed-to-checkout
+            href="{{ route('shop.checkout.onepage.index') }}"
+            add-class="theme-btn text-uppercase col-12 remove-decoration fw6 text-center"
+            text="{{ __('velocity::app.checkout.proceed') }}"
+            is-minimum-order-completed="{{ $cart->checkMinimumOrder() }}"
+            minimum-order-message="{{ __('shop::app.checkout.cart.minimum-order-message', ['amount' => core()->currency($minimumOrderAmount)]) }}">
+        </proceed-to-checkout>
+    </div>
+</div>
\ No newline at end of file
diff --git a/resources/themes/velocity/views/cms/page.blade.php b/resources/themes/velocity/views/cms/page.blade.php
new file mode 100644
index 000000000..088b3a453
--- /dev/null
+++ b/resources/themes/velocity/views/cms/page.blade.php
@@ -0,0 +1,25 @@
+@extends('shop::layouts.master')
+
+@section('page_title')
+    {{ $page->page_title }}
+@endsection
+
+@section('head')
+    @isset($page->meta_title)
+        <meta name="title" content="{{ $page->meta_title }}" />
+    @endisset
+
+    @isset($page->meta_description)
+        <meta name="description" content="{{ $page->meta_description }}" />
+    @endisset
+
+    @isset($page->meta_keywords)
+        <meta name="keywords" content="{{ $page->meta_keywords }}" />
+    @endisset
+@endsection
+
+@section('content-wrapper')
+    <div class="cms-page-container cart-details row offset-1">
+        {!! DbView::make($page)->field('html_content')->render() !!}
+    </div>
+@endsection
\ No newline at end of file
diff --git a/resources/themes/velocity/views/customers/account/address/country-state.blade.php b/resources/themes/velocity/views/customers/account/address/country-state.blade.php
new file mode 100644
index 000000000..6776aa123
--- /dev/null
+++ b/resources/themes/velocity/views/customers/account/address/country-state.blade.php
@@ -0,0 +1,98 @@
+<country-state></country-state>
+
+@push('scripts')
+
+    <script type="text/x-template" id="country-state-template">
+        <div>
+            <div class="control-group" :class="[errors.has('country') ? 'has-error' : '']">
+                <label for="country" class="mandatory">
+                    {{ __('shop::app.customer.account.address.create.country') }}
+                </label>
+
+                <select type="text" v-validate="'required'" class="control styled-select" id="country" name="country" v-model="country" data-vv-as="&quot;{{ __('shop::app.customer.account.address.create.country') }}&quot;">
+                    <option value=""></option>
+                    @foreach (core()->countries() as $country)
+                        <option {{ $country->code === $defaultCountry ? 'selected' : '' }}  value="{{ $country->code }}">{{ $country->name }}</option>
+                    @endforeach
+                </select>
+
+                <div class="select-icon-container">
+                    <span class="select-icon rango-arrow-down"></span>
+                </div>
+
+                <span class="control-error" v-if="errors.has('country')">
+                    @{{ errors.first('country') }}
+                </span>
+            </div>
+
+            <div class="control-group" :class="[errors.has('state') ? 'has-error' : '']">
+                <label for="state" class="mandatory">
+                    {{ __('shop::app.customer.account.address.create.state') }}
+                </label>
+
+                <input
+                    id="state"
+                    type="text"
+                    name="state"
+                    v-model="state"
+                    class="control"
+                    v-if="!haveStates()"
+                    v-validate="'required'"
+                    data-vv-as="&quot;{{ __('shop::app.customer.account.address.create.state') }}&quot;" />
+
+                <template v-if="haveStates()">
+                    <select
+                        id="state"
+                        name="state"
+                        v-model="state"
+                        class="styled-select"
+                        v-validate="'required'"
+                        data-vv-as="&quot;{{ __('shop::app.customer.account.address.create.state') }}&quot;">
+
+                        <option value="">{{ __('shop::app.customer.account.address.create.select-state') }}</option>
+
+                        <option v-for='(state, index) in countryStates[country]' :value="state.code">
+                            @{{ state.default_name }}
+                        </option>
+                    </select>
+
+                    <div class="select-icon-container">
+                        <span class="select-icon rango-arrow-down"></span>
+                    </div>
+                </template>
+
+                <span class="control-error" v-if="errors.has('state')">
+                    @{{ errors.first('state') }}
+                </span>
+            </div>
+        </div>
+    </script>
+
+    <script>
+        Vue.component('country-state', {
+
+            template: '#country-state-template',
+
+            inject: ['$validator'],
+
+            data() {
+                return {
+                    country: "{{ $countryCode ?? $defaultCountry }}",
+
+                    state: "{{ $stateCode }}",
+
+                    countryStates: @json(core()->groupedStatesByCountries())
+                }
+            },
+
+            methods: {
+                haveStates() {
+                    if (this.countryStates[this.country] && this.countryStates[this.country].length)
+                        return true;
+
+                    return false;
+                },
+            }
+        });
+    </script>
+@endpush
\ No newline at end of file
diff --git a/resources/themes/velocity/views/customers/account/address/create.blade.php b/resources/themes/velocity/views/customers/account/address/create.blade.php
new file mode 100644
index 000000000..f4843b1e4
--- /dev/null
+++ b/resources/themes/velocity/views/customers/account/address/create.blade.php
@@ -0,0 +1,114 @@
+@extends('shop::customers.account.index')
+
+@section('page_title')
+    {{ __('shop::app.customer.account.address.create.page-title') }}
+@endsection
+
+@section('page-detail-wrapper')
+    <div class="account-head mb-15">
+        <span class="back-icon"><a href="{{ route('customer.account.index') }}"><i class="icon icon-menu-back"></i></a></span>
+        <span class="account-heading">{{ __('shop::app.customer.account.address.create.title') }}</span>
+        <span></span>
+    </div>
+
+    {!! view_render_event('bagisto.shop.customers.account.address.create.before') !!}
+
+        <form method="post" action="{{ route('customer.address.store') }}" @submit.prevent="onSubmit">
+
+            <div class="account-table-content">
+                @csrf
+
+                {!! view_render_event('bagisto.shop.customers.account.address.create_form_controls.before') !!}
+
+                <div class="control-group" :class="[errors.has('company_name') ? 'has-error' : '']">
+                    <label for="company_name">{{ __('shop::app.customer.account.address.create.company_name') }}</label>
+                    <input type="text" class="control" name="company_name" value="{{ old('company_name') }}" data-vv-as="&quot;{{ __('shop::app.customer.account.address.create.company_name') }}&quot;">
+                    <span class="control-error" v-if="errors.has('company_name')">@{{ errors.first('company_name') }}</span>
+                </div>
+
+                {!! view_render_event('bagisto.shop.customers.account.address.create_form_controls.company_name.after') !!}
+
+                <div class="control-group" :class="[errors.has('first_name') ? 'has-error' : '']">
+                    <label for="first_name" class="mandatory">{{ __('shop::app.customer.account.address.create.first_name') }}</label>
+                    <input type="text" class="control" name="first_name" value="{{ old('first_name') }}" v-validate="'required'" data-vv-as="&quot;{{ __('shop::app.customer.account.address.create.first_name') }}&quot;">
+                    <span class="control-error" v-if="errors.has('first_name')">@{{ errors.first('first_name') }}</span>
+                </div>
+
+                {!! view_render_event('bagisto.shop.customers.account.address.create_form_controls.first_name.after') !!}
+
+                <div class="control-group" :class="[errors.has('last_name') ? 'has-error' : '']">
+                    <label for="last_name" class="mandatory">{{ __('shop::app.customer.account.address.create.last_name') }}</label>
+                    <input type="text" class="control" name="last_name" value="{{ old('last_name') }}" v-validate="'required'" data-vv-as="&quot;{{ __('shop::app.customer.account.address.create.last_name') }}&quot;">
+                    <span class="control-error" v-if="errors.has('last_name')">@{{ errors.first('last_name') }}</span>
+                </div>
+
+                {!! view_render_event('bagisto.shop.customers.account.address.create_form_controls.last_name.after') !!}
+
+                <div class="control-group" :class="[errors.has('vat_id') ? 'has-error' : '']">
+                    <label for="vat_id">{{ __('shop::app.customer.account.address.create.vat_id') }}
+                        <span class="help-note">{{ __('shop::app.customer.account.address.create.vat_help_note') }}</span>
+                    </label>
+                    <input type="text" class="control" name="vat_id" value="{{ old('vat_id') }}" v-validate="" data-vv-as="&quot;{{ __('shop::app.customer.account.address.create.vat_id') }}&quot;">
+                    <span class="control-error" v-if="errors.has('vat_id')">@{{ errors.first('vat_id') }}</span>
+                </div>
+
+                {!! view_render_event('bagisto.shop.customers.account.address.create_form_controls.vat_id.after') !!}
+
+                @php
+                    $addresses = explode(PHP_EOL, (old('address1') ?? ''));
+                @endphp
+
+                <div class="control-group" :class="[errors.has('address1[]') ? 'has-error' : '']">
+                    <label for="address_0" class="mandatory">{{ __('shop::app.customer.account.address.create.street-address') }}</label>
+                    <input type="text" class="control" name="address1[]" id="address_0" value="{{ $addresses[0] ?: '' }}" v-validate="'required'" data-vv-as="&quot;{{ __('shop::app.customer.account.address.create.street-address') }}&quot;">
+                    <span class="control-error" v-if="errors.has('address1[]')">@{{ errors.first('address1[]') }}</span>
+                </div>
+
+                @if (core()->getConfigData('customer.settings.address.street_lines') && core()->getConfigData('customer.settings.address.street_lines') > 1)
+                    @for ($i = 1; $i < core()->getConfigData('customer.settings.address.street_lines'); $i++)
+                        <div class="control-group" style="margin-top: -25px;">
+                            <input type="text" class="control" name="address1[{{ $i }}]" id="address_{{ $i }}" value="{{ $addresses[$i] ?? '' }}">
+                        </div>
+                    @endfor
+                @endif
+
+                {!! view_render_event('bagisto.shop.customers.account.address.create_form_controls.street-address.after') !!}
+
+                @include ('shop::customers.account.address.country-state', ['countryCode' => old('country'), 'stateCode' => old('state')])
+
+                {!! view_render_event('bagisto.shop.customers.account.address.create_form_controls.country-state.after') !!}
+
+                <div class="control-group" :class="[errors.has('city') ? 'has-error' : '']">
+                    <label for="city" class="mandatory">{{ __('shop::app.customer.account.address.create.city') }}</label>
+                    <input type="text" class="control" name="city" value="{{ old('city') }}" v-validate="'required'" data-vv-as="&quot;{{ __('shop::app.customer.account.address.create.city') }}&quot;">
+                    <span class="control-error" v-if="errors.has('city')">@{{ errors.first('city') }}</span>
+                </div>
+
+                {!! view_render_event('bagisto.shop.customers.account.address.create_form_controls.city.after') !!}
+
+                <div class="control-group" :class="[errors.has('postcode') ? 'has-error' : '']">
+                    <label for="postcode" class="mandatory">{{ __('shop::app.customer.account.address.create.postcode') }}</label>
+                    <input type="text" class="control" name="postcode" value="{{ old('postcode') }}" v-validate="'required'" data-vv-as="&quot;{{ __('shop::app.customer.account.address.create.postcode') }}&quot;">
+                    <span class="control-error" v-if="errors.has('postcode')">@{{ errors.first('postcode') }}</span>
+                </div>
+
+                {!! view_render_event('bagisto.shop.customers.account.address.create_form_controls.postcode.after') !!}
+
+                <div class="control-group" :class="[errors.has('phone') ? 'has-error' : '']">
+                    <label for="phone" class="mandatory">{{ __('shop::app.customer.account.address.create.phone') }}</label>
+                    <input type="text" class="control" name="phone" value="{{ old('phone') }}" v-validate="'required'" data-vv-as="&quot;{{ __('shop::app.customer.account.address.create.phone') }}&quot;">
+                    <span class="control-error" v-if="errors.has('phone')">@{{ errors.first('phone') }}</span>
+                </div>
+
+                {!! view_render_event('bagisto.shop.customers.account.address.create_form_controls.after') !!}
+
+                <div class="button-group">
+                    <button class="theme-btn" type="submit">
+                        {{ __('shop::app.customer.account.address.create.submit') }}
+                    </button>
+                </div>
+            </div>
+        </form>
+
+    {!! view_render_event('bagisto.shop.customers.account.address.create.after') !!}
+@endsection
\ No newline at end of file
diff --git a/resources/themes/velocity/views/customers/account/address/edit.blade.php b/resources/themes/velocity/views/customers/account/address/edit.blade.php
new file mode 100644
index 000000000..e4c168e26
--- /dev/null
+++ b/resources/themes/velocity/views/customers/account/address/edit.blade.php
@@ -0,0 +1,114 @@
+@extends('shop::customers.account.index')
+
+@section('page_title')
+    {{ __('shop::app.customer.account.address.edit.page-title') }}
+@endsection
+
+@section('page-detail-wrapper')
+    <div class="account-head mb-15">
+        <span class="back-icon"><a href="{{ route('customer.account.index') }}"><i class="icon icon-menu-back"></i></a></span>
+        <span class="account-heading">{{ __('shop::app.customer.account.address.edit.title') }}</span>
+        <span></span>
+    </div>
+
+    {!! view_render_event('bagisto.shop.customers.account.address.edit.before', ['address' => $address]) !!}
+
+    <form method="post" action="{{ route('customer.address.update', $address->id) }}" @submit.prevent="onSubmit">
+
+        <div class="account-table-content">
+            @method('PUT')
+            @csrf
+
+            {!! view_render_event('bagisto.shop.customers.account.address.edit_form_controls.before', ['address' => $address]) !!}
+
+            <?php $addresses = explode(PHP_EOL, (old('address1') ?? $address->address1)); ?>
+
+            <div class="control-group" :class="[errors.has('company_name') ? 'has-error' : '']">
+                <label for="company_name">{{ __('shop::app.customer.account.address.edit.company_name') }}</label>
+                <input type="text"  class="control" name="company_name" value="{{ old('company_name') ?? $address->company_name }}" data-vv-as="&quot;{{ __('shop::app.customer.account.address.edit.company_name') }}&quot;">
+                <span class="control-error" v-if="errors.has('company_name')">@{{ errors.first('company_name') }}</span>
+            </div>
+
+            {!! view_render_event('bagisto.shop.customers.account.address.edit_form_controls.company_name.after') !!}
+
+            <div class="control-group" :class="[errors.has('first_name') ? 'has-error' : '']">
+                <label for="first_name" class="mandatory">{{ __('shop::app.customer.account.address.create.first_name') }}</label>
+                <input type="text" class="control" name="first_name" value="{{ old('first_name') ?? $address->first_name }}" v-validate="'required'" data-vv-as="&quot;{{ __('shop::app.customer.account.address.create.first_name') }}&quot;">
+                <span class="control-error" v-if="errors.has('first_name')">@{{ errors.first('first_name') }}</span>
+            </div>
+
+            {!! view_render_event('bagisto.shop.customers.account.address.edit_form_controls.first_name.after') !!}
+
+            <div class="control-group" :class="[errors.has('last_name') ? 'has-error' : '']">
+                <label for="last_name" class="mandatory">{{ __('shop::app.customer.account.address.create.last_name') }}</label>
+                <input type="text" class="control" name="last_name" value="{{ old('last_name') ?? $address->last_name }}" v-validate="'required'" data-vv-as="&quot;{{ __('shop::app.customer.account.address.create.last_name') }}&quot;">
+                <span class="control-error" v-if="errors.has('last_name')">@{{ errors.first('last_name') }}</span>
+            </div>
+
+            {!! view_render_event('bagisto.shop.customers.account.address.edit_form_controls.last_name.after') !!}
+
+            <div class="control-group" :class="[errors.has('vat_id') ? 'has-error' : '']">
+                <label for="vat_id">{{ __('shop::app.customer.account.address.create.vat_id') }}
+                    <span class="help-note">{{ __('shop::app.customer.account.address.create.vat_help_note') }}</span>
+                </label>
+                <input type="text" class="control" name="vat_id" value="{{ old('vat_id') ?? $address->vat_id }}" v-validate="" data-vv-as="&quot;{{ __('shop::app.customer.account.address.create.vat_id') }}&quot;">
+                <span class="control-error" v-if="errors.has('vat_id')">@{{ errors.first('vat_id') }}</span>
+            </div>
+
+            {!! view_render_event('bagisto.shop.customers.account.address.edit_form_controls.vat_id.after') !!}
+
+            <div class="control-group" :class="[errors.has('address1[]') ? 'has-error' : '']">
+                <label for="address_0" class="mandatory">{{ __('shop::app.customer.account.address.edit.street-address') }}</label>
+                <input type="text" class="control" name="address1[]" value="{{ isset($addresses[0]) ? $addresses[0] : '' }}" id="address_0" v-validate="'required'" data-vv-as="&quot;{{ __('shop::app.customer.account.address.create.street-address') }}&quot;">
+                <span class="control-error" v-if="errors.has('address1[]')">@{{ errors.first('address1[]') }}</span>
+            </div>
+
+            @if (core()->getConfigData('customer.settings.address.street_lines') && core()->getConfigData('customer.settings.address.street_lines') > 1)
+                @for ($i = 1; $i < core()->getConfigData('customer.settings.address.street_lines'); $i++)
+                    <div class="control-group" style="margin-top: -25px;">
+                        <input type="text" class="control" name="address1[{{ $i }}]" id="address_{{ $i }}" value="{{ $addresses[$i] ?? '' }}">
+                    </div>
+                @endfor
+            @endif
+
+            {!! view_render_event('bagisto.shop.customers.account.address.edit_form_controls.street-addres.after') !!}
+
+            @include ('shop::customers.account.address.country-state', ['countryCode' => old('country') ?? $address->country, 'stateCode' => old('state') ?? $address->state])
+
+            {!! view_render_event('bagisto.shop.customers.account.address.edit_form_controls.country-state.after') !!}
+
+            <div class="control-group" :class="[errors.has('city') ? 'has-error' : '']">
+                <label for="city" class="mandatory">{{ __('shop::app.customer.account.address.create.city') }}</label>
+                <input type="text" class="control" name="city" value="{{ old('city') ?? $address->city }}" v-validate="'required|regex:^[a-zA-Z \-]*$'" data-vv-as="&quot;{{ __('shop::app.customer.account.address.create.city') }}&quot;">
+                <span class="control-error" v-if="errors.has('city')">@{{ errors.first('city') }}</span>
+            </div>
+
+            {!! view_render_event('bagisto.shop.customers.account.address.edit_form_controls.create.after') !!}
+
+            <div class="control-group" :class="[errors.has('postcode') ? 'has-error' : '']">
+                <label for="postcode" class="mandatory">{{ __('shop::app.customer.account.address.create.postcode') }}</label>
+                <input type="text" class="control" name="postcode" value="{{ old('postcode') ?? $address->postcode }}" v-validate="'required'" data-vv-as="&quot;{{ __('shop::app.customer.account.address.create.postcode') }}&quot;">
+                <span class="control-error" v-if="errors.has('postcode')">@{{ errors.first('postcode') }}</span>
+            </div>
+
+            {!! view_render_event('bagisto.shop.customers.account.address.edit_form_controls.postcode.after') !!}
+
+            <div class="control-group" :class="[errors.has('phone') ? 'has-error' : '']">
+                <label for="phone" class="mandatory">{{ __('shop::app.customer.account.address.create.phone') }}</label>
+                <input type="text" class="control" name="phone" value="{{ old('phone') ?? $address->phone }}" v-validate="'required'" data-vv-as="&quot;{{ __('shop::app.customer.account.address.create.phone') }}&quot;">
+                <span class="control-error" v-if="errors.has('phone')">@{{ errors.first('phone') }}</span>
+            </div>
+
+            {!! view_render_event('bagisto.shop.customers.account.address.edit_form_controls.after', ['address' => $address]) !!}
+
+            <div class="button-group">
+                <button class="theme-btn" type="submit">
+                    {{ __('shop::app.customer.account.address.create.submit') }}
+                </button>
+            </div>
+        </div>
+
+    </form>
+
+    {!! view_render_event('bagisto.shop.customers.account.address.edit.after', ['address' => $address]) !!}
+@endsection
\ No newline at end of file
diff --git a/resources/themes/velocity/views/customers/account/address/index.blade.php b/resources/themes/velocity/views/customers/account/address/index.blade.php
new file mode 100644
index 000000000..243272120
--- /dev/null
+++ b/resources/themes/velocity/views/customers/account/address/index.blade.php
@@ -0,0 +1,99 @@
+@extends('shop::customers.account.index')
+
+@section('page_title')
+    {{ __('shop::app.customer.account.address.index.page-title') }}
+@endsection
+
+@section('page-detail-wrapper')
+    @if ($addresses->isEmpty())
+
+        <a href="{{ route('customer.address.create') }}" class="theme-btn light unset address-button">
+
+            {{ __('shop::app.customer.account.address.index.add') }}
+        </a>
+    @endif
+
+    <div class="account-head">
+        <span class="back-icon"><a href="{{ route('customer.account.index') }}"><i class="icon icon-menu-back"></i></a></span>
+        <span class="account-heading">{{ __('shop::app.customer.account.address.index.title') }}</span>
+
+        @if (! $addresses->isEmpty())
+            <span class="account-action">
+                <a href="{{ route('customer.address.create') }}" class="theme-btn light unset float-right">
+                    {{ __('shop::app.customer.account.address.index.add') }}
+                </a>
+            </span>
+        @endif
+
+        <div class="horizontal-rule"></div>
+    </div>
+
+    {!! view_render_event('bagisto.shop.customers.account.address.list.before', ['addresses' => $addresses]) !!}
+
+        <div class="account-table-content">
+            @if ($addresses->isEmpty())
+                <div>{{ __('shop::app.customer.account.address.index.empty') }}</div>
+            @else
+                <div class="address-holder col-12 no-padding">
+                    @foreach ($addresses as $address)
+                        <div class="col-lg-4 col-md-12">
+                            <div class="card">
+                                <div class="card-body">
+                                    <h5 class="card-title fw6">{{ $address->first_name }} {{ $address->last_name }}</h5>
+
+                                    <ul type="none">
+                                        {{-- <li>{{ $address->company_name }}</li> --}}
+                                        <li>{{ $address->address1 }},</li>
+                                        <li>{{ $address->city }},</li>
+                                        <li>{{ $address->state }},</li>
+                                        <li>{{ core()->country_name($address->country) }} {{ $address->postcode }}</li>
+                                        <li>
+                                            {{ __('shop::app.customer.account.address.index.contact') }} : {{$address->phone }}
+                                        </li>
+                                    </ul>
+
+                                    <a class="card-link" href="{{ route('customer.address.edit', $address->id) }}">
+                                        {{ __('shop::app.customer.account.address.index.edit') }}
+                                    </a>
+
+                                    <a
+                                        class="card-link"
+                                        href="{{ route('address.delete', $address->id) }}"
+                                        onclick="deleteAddress('{{ __('shop::app.customer.account.address.index.confirm-delete') }}')">
+
+                                        {{ __('shop::app.customer.account.address.index.delete') }}
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    @endforeach
+                </div>
+            @endif
+        </div>
+
+    {!! view_render_event('bagisto.shop.customers.account.address.list.after', ['addresses' => $addresses]) !!}
+@endsection
+
+@push('scripts')
+    <script>
+        function deleteAddress(message) {
+            if (!confirm(message))
+            event.preventDefault();
+        }
+    </script>
+@endpush
+
+@if ($addresses->isEmpty())
+    <style>
+        a#add-address-button {
+            position: absolute;
+            margin-top: 92px;
+        }
+
+        .address-button {
+            position: absolute;
+            z-index: 1 !important;
+            margin-top: 110px !important;
+        }
+    </style>
+@endif
diff --git a/resources/themes/velocity/views/customers/account/compare/index.blade.php b/resources/themes/velocity/views/customers/account/compare/index.blade.php
new file mode 100644
index 000000000..8c669d10e
--- /dev/null
+++ b/resources/themes/velocity/views/customers/account/compare/index.blade.php
@@ -0,0 +1,19 @@
+@extends('shop::customers.account.index')
+
+@include('velocity::guest.compare.compare-products')
+
+@section('page_title')
+    {{ __('velocity::app.customer.compare.compare_similar_items') }}
+@endsection
+
+@push('css')
+    <style>
+        .compare-products .col, .compare-products .col-2 {
+            max-width: 25%;
+        }
+    </style>
+@endpush
+
+@section('page-detail-wrapper')
+    <compare-product></compare-product>
+@endsection
diff --git a/resources/themes/velocity/views/customers/account/downloadable_products/index.blade.php b/resources/themes/velocity/views/customers/account/downloadable_products/index.blade.php
new file mode 100644
index 000000000..659886d1e
--- /dev/null
+++ b/resources/themes/velocity/views/customers/account/downloadable_products/index.blade.php
@@ -0,0 +1,28 @@
+@extends('shop::customers.account.index')
+
+@section('page_title')
+    {{ __('shop::app.customer.account.downloadable_products.title') }}
+@endsection
+
+@section('page-detail-wrapper')
+    <div class="account-head mb-10">
+        <span class="back-icon"><a href="{{ route('customer.account.index') }}"><i class="icon icon-menu-back"></i></a></span>
+        <span class="account-heading">
+            {{ __('shop::app.customer.account.downloadable_products.title') }}
+        </span>
+
+        <div class="horizontal-rule"></div>
+    </div>
+
+    {!! view_render_event('bagisto.shop.customers.account.downloadable_products.list.before') !!}
+
+        <div class="account-items-list">
+            <div class="account-table-content">
+
+                {!! app('Webkul\Shop\DataGrids\DownloadableProductDataGrid')->render() !!}
+
+            </div>
+        </div>
+
+    {!! view_render_event('bagisto.shop.customers.account.downloadable_products.list.after') !!}
+@endsection
\ No newline at end of file
diff --git a/resources/themes/velocity/views/customers/account/index.blade.php b/resources/themes/velocity/views/customers/account/index.blade.php
new file mode 100644
index 000000000..7e7f0cb69
--- /dev/null
+++ b/resources/themes/velocity/views/customers/account/index.blade.php
@@ -0,0 +1,46 @@
+@extends('shop::layouts.master')
+
+@section('content-wrapper')
+    <div class="account-content row no-margin velocity-divide-page">
+        <div class="sidebar left">
+            @include('shop::customers.account.partials.sidemenu')
+        </div>
+
+        <div class="account-layout right mt10">
+            @yield('page-detail-wrapper')
+        </div>
+    </div>
+@endsection
+
+@push('scripts')
+    <script>
+        $(document).ready(function() {
+            window.updateHeight = () => {
+                setTimeout(() => {
+                    let sidebarHeight = $('.customer-sidebar').css('height');
+                    let contentHeight = $('.account-layout').css('height');
+
+                    sidebarHeight = parseInt(sidebarHeight.substring(0, sidebarHeight.length - 2));
+                    contentHeight = parseInt(contentHeight.substring(0, contentHeight.length - 2));
+
+                    let height = sidebarHeight > contentHeight ? sidebarHeight : contentHeight;
+                    height = (height + 30)+ "px";
+
+                    $('.account-content').css('height', height);
+                }, 0);
+            }
+
+            window.updateHeight();
+
+            $('input, select').change(() => {
+                window.updateHeight();
+            });
+
+            $('button').click(() => {
+                window.updateHeight();
+            });
+
+            $('.accordian-header').click(window.updateHeight);
+        });
+    </script>
+@endpush
diff --git a/resources/themes/velocity/views/customers/account/orders/index.blade.php b/resources/themes/velocity/views/customers/account/orders/index.blade.php
new file mode 100644
index 000000000..e283ab63b
--- /dev/null
+++ b/resources/themes/velocity/views/customers/account/orders/index.blade.php
@@ -0,0 +1,31 @@
+@extends('shop::customers.account.index')
+
+@section('page_title')
+    {{ __('shop::app.customer.account.order.index.page-title') }}
+@endsection
+
+@section('page-detail-wrapper')
+    <div class="account-head mb-10">
+        <span class="back-icon">
+            <a href="{{ route('customer.account.index') }}">
+                <i class="icon icon-menu-back"></i>
+            </a>
+        </span>
+
+        <span class="account-heading">
+            {{ __('shop::app.customer.account.order.index.title') }}
+        </span>
+    </div>
+
+    {!! view_render_event('bagisto.shop.customers.account.orders.list.before') !!}
+
+        <div class="account-items-list">
+            <div class="account-table-content">
+
+                {!! app('Webkul\Shop\DataGrids\OrderDataGrid')->render() !!}
+
+            </div>
+        </div>
+
+    {!! view_render_event('bagisto.shop.customers.account.orders.list.after') !!}
+@endsection
\ No newline at end of file
diff --git a/resources/themes/velocity/views/customers/account/orders/view.blade.php b/resources/themes/velocity/views/customers/account/orders/view.blade.php
new file mode 100644
index 000000000..fd64e3675
--- /dev/null
+++ b/resources/themes/velocity/views/customers/account/orders/view.blade.php
@@ -0,0 +1,582 @@
+@extends('shop::customers.account.index')
+
+@section('page_title')
+    {{ __('shop::app.customer.account.order.view.page-tile', ['order_id' => $order->increment_id]) }}
+@endsection
+
+@push('css')
+    <style type="text/css">
+        .account-content .account-layout .account-head {
+            margin-bottom: 0px;
+        }
+        .sale-summary .dash-icon {
+            margin-right: 30px;
+            float: right;
+        }
+    </style>
+@endpush
+
+@section('page-detail-wrapper')
+    <div class="account-content">
+        <div class="account-layout">
+            <div class="account-head">
+                <span class="back-icon"><a href="{{ route('customer.account.index') }}"><i class="icon icon-menu-back"></i></a></span>
+                <span class="account-heading">
+                    {{ __('shop::app.customer.account.order.view.page-tile', ['order_id' => $order->increment_id]) }}
+                </span>
+                <span></span>
+
+                @if ($order->canCancel())
+                    <span class="account-action">
+                        <a href="{{ route('customer.orders.cancel', $order->id) }}" class="theme-btn light unset float-right" v-alert:message="'{{ __('shop::app.customer.account.order.view.cancel-confirm-msg') }}'" style="float: right">
+                            {{ __('shop::app.customer.account.order.view.cancel-btn-title') }}
+                        </a>
+                    </span>
+                @endif
+            </div>
+
+            {!! view_render_event('bagisto.shop.customers.account.orders.view.before', ['order' => $order]) !!}
+
+            <div class="sale-container">
+                <tabs>
+                    <tab name="{{ __('shop::app.customer.account.order.view.info') }}" :selected="true">
+
+                        <div class="sale-section">
+                            <div class="section-content">
+                                <div class="row col-12">
+                                    <label class="mr20">
+                                        {{ __('shop::app.customer.account.order.view.placed-on') }}
+                                    </label>
+
+                                    <span class="value">
+                                        {{ core()->formatDate($order->created_at, 'd M Y') }}
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="sale-section">
+                            <div class="section-title">
+                                <span>{{ __('shop::app.customer.account.order.view.products-ordered') }}</span>
+                            </div>
+
+                            <div class="section-content">
+                                <div class="table">
+                                    <table>
+                                        <thead>
+                                            <tr>
+                                                <th>{{ __('shop::app.customer.account.order.view.SKU') }}</th>
+                                                <th>{{ __('shop::app.customer.account.order.view.product-name') }}</th>
+                                                <th>{{ __('shop::app.customer.account.order.view.price') }}</th>
+                                                <th>{{ __('shop::app.customer.account.order.view.item-status') }}</th>
+                                                <th>{{ __('shop::app.customer.account.order.view.subtotal') }}</th>
+                                                <th>{{ __('shop::app.customer.account.order.view.tax-percent') }}</th>
+                                                <th>{{ __('shop::app.customer.account.order.view.tax-amount') }}</th>
+                                                <th>{{ __('shop::app.customer.account.order.view.grand-total') }}</th>
+                                            </tr>
+                                        </thead>
+
+                                        <tbody>
+                                            @foreach ($order->items as $item)
+                                                <tr>
+                                                    <td data-value="{{ __('shop::app.customer.account.order.view.SKU') }}">
+                                                        {{ $item->getTypeInstance()->getOrderedItem($item)->sku }}
+                                                    </td>
+
+                                                    <td data-value="{{ __('shop::app.customer.account.order.view.product-name') }}">
+                                                        {{ $item->name }}
+
+                                                        @if (isset($item->additional['attributes']))
+                                                            <div class="item-options">
+
+                                                                @foreach ($item->additional['attributes'] as $attribute)
+                                                                    <b>{{ $attribute['attribute_name'] }} : </b>{{ $attribute['option_label'] }}</br>
+                                                                @endforeach
+
+                                                            </div>
+                                                        @endif
+                                                    </td>
+
+                                                    <td data-value="{{ __('shop::app.customer.account.order.view.price') }}">
+                                                        {{ core()->formatPrice($item->price, $order->order_currency_code) }}
+                                                    </td>
+
+                                                    <td data-value="{{ __('shop::app.customer.account.order.view.item-status') }}">
+                                                        <span class="qty-row">
+                                                            {{ __('shop::app.customer.account.order.view.item-ordered', ['qty_ordered' => $item->qty_ordered]) }}
+                                                        </span>
+
+                                                        <span class="qty-row">
+                                                            {{ $item->qty_invoiced ? __('shop::app.customer.account.order.view.item-invoice', ['qty_invoiced' => $item->qty_invoiced]) : '' }}
+                                                        </span>
+
+                                                        <span class="qty-row">
+                                                            {{ $item->qty_shipped ? __('shop::app.customer.account.order.view.item-shipped', ['qty_shipped' => $item->qty_shipped]) : '' }}
+                                                        </span>
+
+                                                        <span class="qty-row">
+                                                            {{ $item->qty_refunded ? __('shop::app.customer.account.order.view.item-refunded', ['qty_refunded' => $item->qty_refunded]) : '' }}
+                                                        </span>
+
+                                                        <span class="qty-row">
+                                                            {{ $item->qty_canceled ? __('shop::app.customer.account.order.view.item-canceled', ['qty_canceled' => $item->qty_canceled]) : '' }}
+                                                        </span>
+                                                    </td>
+
+                                                    <td data-value="{{ __('shop::app.customer.account.order.view.subtotal') }}">
+                                                        {{ core()->formatPrice($item->total, $order->order_currency_code) }}
+                                                    </td>
+
+                                                    <td data-value="{{ __('shop::app.customer.account.order.view.tax-percent') }}">
+                                                        {{ number_format($item->tax_percent, 2) }}%
+                                                    </td>
+
+                                                    <td data-value="{{ __('shop::app.customer.account.order.view.tax-amount') }}">
+                                                        {{ core()->formatPrice($item->tax_amount, $order->order_currency_code) }}
+                                                    </td>
+
+                                                    <td data-value="{{ __('shop::app.customer.account.order.view.grand-total') }}">
+                                                        {{ core()->formatPrice($item->total + $item->tax_amount - $item->discount_amount, $order->order_currency_code) }}
+                                                    </td>
+                                                </tr>
+                                            @endforeach
+                                        </tbody>
+
+                                    </table>
+                                </div>
+
+                                <div class="totals">
+                                    <table class="sale-summary">
+                                        <tbody>
+                                            <tr>
+                                                <td>{{ __('shop::app.customer.account.order.view.subtotal') }}
+                                                    <span class="dash-icon">-</span>
+                                                </td>
+                                                <td>{{ core()->formatPrice($order->sub_total, $order->order_currency_code) }}</td>
+                                            </tr>
+
+                                            @if ($order->haveStockableItems())
+                                                <tr>
+                                                    <td>{{ __('shop::app.customer.account.order.view.shipping-handling') }}
+                                                        <span class="dash-icon">-</span>
+                                                    </td>
+                                                    <td>{{ core()->formatPrice($order->shipping_amount, $order->order_currency_code) }}</td>
+                                                </tr>
+                                            @endif
+
+                                            @if ($order->base_discount_amount > 0)
+                                                <tr>
+                                                    <td>{{ __('shop::app.customer.account.order.view.discount') }}
+                                                        @if ($order->coupon_code)
+                                                            ({{ $order->coupon_code }})
+                                                        @endif
+                                                        <span class="dash-icon">-</span>
+                                                    </td>
+                                                    <td>{{ core()->formatPrice($order->discount_amount, $order->order_currency_code) }}</td>
+                                                </tr>
+                                            @endif
+
+                                            <tr class="border-bottom">
+                                                <td>{{ __('shop::app.customer.account.order.view.tax') }}
+                                                    <span class="dash-icon">-</span>
+                                                </td>
+                                                <td>{{ core()->formatPrice($order->tax_amount, $order->order_currency_code) }}</td>
+                                            </tr>
+
+                                            <tr class="fw6">
+                                                <td>{{ __('shop::app.customer.account.order.view.grand-total') }}
+                                                    <span class="dash-icon">-</span>
+                                                </td>
+                                                <td>{{ core()->formatPrice($order->grand_total, $order->order_currency_code) }}</td>
+                                            </tr>
+
+                                            <tr class="fw6">
+                                                <td>{{ __('shop::app.customer.account.order.view.total-paid') }}
+                                                    <span class="dash-icon">-</span>
+                                                </td>
+                                                <td>{{ core()->formatPrice($order->grand_total_invoiced, $order->order_currency_code) }}</td>
+                                            </tr>
+
+                                            <tr class="fw6">
+                                                <td>{{ __('shop::app.customer.account.order.view.total-refunded') }}
+                                                    <span class="dash-icon">-</span>
+                                                </td>
+                                                <td>{{ core()->formatPrice($order->grand_total_refunded, $order->order_currency_code) }}</td>
+                                            </tr>
+
+                                            <tr class="fw6">
+                                                <td>{{ __('shop::app.customer.account.order.view.total-due') }}
+                                                    <span class="dash-icon">-</span>
+                                                </td>
+
+                                                @if($order->status !== 'canceled')
+                                                    <td>{{ core()->formatPrice($order->total_due, $order->order_currency_code) }}</td>
+                                                @else
+                                                    <td>{{ core()->formatPrice(0.00, $order->order_currency_code) }}</td>
+                                                @endif
+                                            </tr>
+                                        <tbody>
+                                    </table>
+                                </div>
+                            </div>
+                        </div>
+                    </tab>
+
+                    @if ($order->invoices->count())
+                        <tab name="{{ __('shop::app.customer.account.order.view.invoices') }}">
+
+                            @foreach ($order->invoices as $invoice)
+
+                                <div class="sale-section">
+                                    <div class="section-title">
+                                        <span>{{ __('shop::app.customer.account.order.view.individual-invoice', ['invoice_id' => $invoice->id]) }}</span>
+
+                                        <a href="{{ route('customer.orders.print', $invoice->id) }}" class="float-right">
+                                            {{ __('shop::app.customer.account.order.view.print') }}
+                                        </a>
+                                    </div>
+
+                                    <div class="section-content">
+                                        <div class="table">
+                                            <table>
+                                                <thead>
+                                                    <tr>
+                                                        <th>{{ __('shop::app.customer.account.order.view.SKU') }}</th>
+                                                        <th>{{ __('shop::app.customer.account.order.view.product-name') }}</th>
+                                                        <th>{{ __('shop::app.customer.account.order.view.price') }}</th>
+                                                        <th>{{ __('shop::app.customer.account.order.view.qty') }}</th>
+                                                        <th>{{ __('shop::app.customer.account.order.view.subtotal') }}</th>
+                                                        <th>{{ __('shop::app.customer.account.order.view.tax-amount') }}</th>
+                                                        <th>{{ __('shop::app.customer.account.order.view.grand-total') }}</th>
+                                                    </tr>
+                                                </thead>
+
+                                                <tbody>
+
+                                                    @foreach ($invoice->items as $item)
+                                                        <tr>
+                                                            <td data-value="{{ __('shop::app.customer.account.order.view.SKU') }}">
+                                                                {{ $item->getTypeInstance()->getOrderedItem($item)->sku }}
+                                                            </td>
+
+                                                            <td data-value="{{ __('shop::app.customer.account.order.view.product-name') }}">
+                                                                {{ $item->name }}
+                                                            </td>
+
+                                                            <td data-value="{{ __('shop::app.customer.account.order.view.price') }}">
+                                                                {{ core()->formatPrice($item->price, $order->order_currency_code) }}
+                                                            </td>
+
+                                                            <td data-value="{{ __('shop::app.customer.account.order.view.qty') }}">
+                                                                {{ $item->qty }}
+                                                            </td>
+
+                                                            <td data-value="{{ __('shop::app.customer.account.order.view.subtotal') }}">
+                                                                {{ core()->formatPrice($item->total, $order->order_currency_code) }}
+                                                            </td>
+
+                                                            <td data-value="{{ __('shop::app.customer.account.order.view.tax-amount') }}">
+                                                                {{ core()->formatPrice($item->tax_amount, $order->order_currency_code) }}
+                                                            </td>
+
+                                                            <td data-value="{{ __('shop::app.customer.account.order.view.grand-total') }}">
+                                                                {{ core()->formatPrice($item->total + $item->tax_amount, $order->order_currency_code) }}
+                                                            </td>
+                                                        </tr>
+                                                    @endforeach
+                                                </tbody>
+                                            </table>
+                                        </div>
+
+                                        <div class="totals">
+                                            <table class="sale-summary">
+                                                <tr>
+                                                    <td>{{ __('shop::app.customer.account.order.view.subtotal') }}
+                                                        <span class="dash-icon">-</span>
+                                                    </td>
+                                                    <td>{{ core()->formatPrice($invoice->sub_total, $order->order_currency_code) }}</td>
+                                                </tr>
+
+                                                <tr>
+                                                    <td>{{ __('shop::app.customer.account.order.view.shipping-handling') }}
+                                                        <span class="dash-icon">-</span>
+                                                    </td>
+                                                    <td>{{ core()->formatPrice($invoice->shipping_amount, $order->order_currency_code) }}</td>
+                                                </tr>
+
+                                                @if ($order->base_discount_amount > 0)
+                                                    <tr>
+                                                        <td>{{ __('shop::app.customer.account.order.view.discount') }}
+                                                            <span class="dash-icon">-</span>
+                                                        </td>
+                                                        <td>{{ core()->formatPrice($order->discount_amount, $order->order_currency_code) }}</td>
+                                                    </tr>
+                                                @endif
+
+                                                <tr>
+                                                    <td>{{ __('shop::app.customer.account.order.view.tax') }}
+                                                        <span class="dash-icon">-</span>
+                                                    </td>
+                                                    <td>{{ core()->formatPrice($invoice->tax_amount, $order->order_currency_code) }}</td>
+                                                </tr>
+
+                                                <tr class="fw6">
+                                                    <td>{{ __('shop::app.customer.account.order.view.grand-total') }}
+                                                        <span class="dash-icon">-</span>
+                                                    </td>
+                                                    <td>{{ core()->formatPrice($invoice->grand_total, $order->order_currency_code) }}</td>
+                                                </tr>
+                                            </table>
+                                        </div>
+                                    </div>
+                                </div>
+
+                            @endforeach
+
+                        </tab>
+                    @endif
+
+                    @if ($order->shipments->count())
+                        <tab name="{{ __('shop::app.customer.account.order.view.shipments') }}">
+
+                            @foreach ($order->shipments as $shipment)
+
+                                <div class="sale-section">
+                                    <div class="section-content">
+                                        <div class="row col-12">
+                                            <label class="mr20">
+                                            {{ __('shop::app.customer.account.order.view.tracking-number') }}
+                                            </label>
+
+                                            <span class="value">
+                                                {{  $shipment->track_number }}
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="sale-section">
+                                    <div class="section-title">
+                                        <span>{{ __('shop::app.customer.account.order.view.individual-shipment', ['shipment_id' => $shipment->id]) }}</span>
+                                    </div>
+
+                                    <div class="section-content">
+
+                                        <div class="table">
+                                            <table>
+                                                <thead>
+                                                    <tr>
+                                                        <th>{{ __('shop::app.customer.account.order.view.SKU') }}</th>
+                                                        <th>{{ __('shop::app.customer.account.order.view.product-name') }}</th>
+                                                        <th>{{ __('shop::app.customer.account.order.view.qty') }}</th>
+                                                    </tr>
+                                                </thead>
+
+                                                <tbody>
+
+                                                    @foreach ($shipment->items as $item)
+
+                                                        <tr>
+                                                            <td data-value="{{  __('shop::app.customer.account.order.view.SKU') }}">{{ $item->sku }}</td>
+                                                            <td data-value="{{  __('shop::app.customer.account.order.view.product-name') }}">{{ $item->name }}</td>
+                                                            <td data-value="{{  __('shop::app.customer.account.order.view.qty') }}">{{ $item->qty }}</td>
+                                                        </tr>
+
+                                                    @endforeach
+
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                    </div>
+                                </div>
+
+                            @endforeach
+
+                        </tab>
+                    @endif
+
+                    @if ($order->refunds->count())
+                        <tab name="{{ __('shop::app.customer.account.order.view.refunds') }}">
+
+                            @foreach ($order->refunds as $refund)
+
+                                <div class="sale-section">
+                                    <div class="section-title">
+                                        <span>{{ __('shop::app.customer.account.order.view.individual-refund', ['refund_id' => $refund->id]) }}</span>
+                                    </div>
+
+                                    <div class="section-content">
+                                        <div class="table">
+                                            <table>
+                                                <thead>
+                                                    <tr>
+                                                        <th>{{ __('shop::app.customer.account.order.view.SKU') }}</th>
+                                                        <th>{{ __('shop::app.customer.account.order.view.product-name') }}</th>
+                                                        <th>{{ __('shop::app.customer.account.order.view.price') }}</th>
+                                                        <th>{{ __('shop::app.customer.account.order.view.qty') }}</th>
+                                                        <th>{{ __('shop::app.customer.account.order.view.subtotal') }}</th>
+                                                        <th>{{ __('shop::app.customer.account.order.view.tax-amount') }}</th>
+                                                        <th>{{ __('shop::app.customer.account.order.view.grand-total') }}</th>
+                                                    </tr>
+                                                </thead>
+
+                                                <tbody>
+
+                                                    @foreach ($refund->items as $item)
+                                                        <tr>
+                                                            <td data-value="{{ __('shop::app.customer.account.order.view.SKU') }}">{{ $item->child ? $item->child->sku : $item->sku }}</td>
+                                                            <td data-value="{{ __('shop::app.customer.account.order.view.product-name') }}">{{ $item->name }}</td>
+                                                            <td data-value="{{ __('shop::app.customer.account.order.view.price') }}">{{ core()->formatPrice($item->price, $order->order_currency_code) }}</td>
+                                                            <td data-value="{{ __('shop::app.customer.account.order.view.qty') }}">{{ $item->qty }}</td>
+                                                            <td data-value="{{ __('shop::app.customer.account.order.view.subtotal') }}">{{ core()->formatPrice($item->total, $order->order_currency_code) }}</td>
+                                                            <td data-value="{{ __('shop::app.customer.account.order.view.tax-amount') }}">{{ core()->formatPrice($item->tax_amount, $order->order_currency_code) }}</td>
+                                                            <td data-value="{{ __('shop::app.customer.account.order.view.grand-total') }}">{{ core()->formatPrice($item->total + $item->tax_amount, $order->order_currency_code) }}</td>
+                                                        </tr>
+                                                    @endforeach
+
+                                                    @if (! $refund->items->count())
+                                                        <tr>
+                                                            <td class="empty" colspan="7">{{ __('shop::app.common.no-result-found') }}</td>
+                                                        <tr>
+                                                    @endif
+                                                </tbody>
+                                            </table>
+                                        </div>
+
+                                        <div class="totals">
+                                            <table class="sale-summary">
+                                                <tr>
+                                                    <td>{{ __('shop::app.customer.account.order.view.subtotal') }}
+                                                        <span class="dash-icon">-</span>
+                                                    </td>
+                                                    <td>{{ core()->formatPrice($refund->sub_total, $order->order_currency_code) }}</td>
+                                                </tr>
+
+                                                @if ($refund->shipping_amount > 0)
+                                                    <tr>
+                                                        <td>{{ __('shop::app.customer.account.order.view.shipping-handling') }}
+                                                            <span class="dash-icon">-</span>
+                                                        </td>
+                                                        <td>{{ core()->formatPrice($refund->shipping_amount, $order->order_currency_code) }}</td>
+                                                    </tr>
+                                                @endif
+
+                                                @if ($refund->discount_amount > 0)
+                                                    <tr>
+                                                        <td>{{ __('shop::app.customer.account.order.view.discount') }}
+                                                            <span class="dash-icon">-</span>
+                                                        </td>
+                                                        <td>{{ core()->formatPrice($order->discount_amount, $order->order_currency_code) }}</td>
+                                                    </tr>
+                                                @endif
+
+                                                @if ($refund->tax_amount > 0)
+                                                    <tr>
+                                                        <td>{{ __('shop::app.customer.account.order.view.tax') }}
+                                                            <span class="dash-icon">-</span>
+                                                        </td>
+                                                        <td>{{ core()->formatPrice($refund->tax_amount, $order->order_currency_code) }}</td>
+                                                    </tr>
+                                                @endif
+
+                                                <tr>
+                                                    <td>{{ __('shop::app.customer.account.order.view.adjustment-refund') }}
+                                                        <span class="dash-icon">-</span>
+                                                    </td>
+                                                    <td>{{ core()->formatPrice($refund->adjustment_refund, $order->order_currency_code) }}</td>
+                                                </tr>
+
+                                                <tr>
+                                                    <td>{{ __('shop::app.customer.account.order.view.adjustment-fee') }}
+                                                        <span class="dash-icon">-</span>
+                                                    </td>
+                                                    <td>{{ core()->formatPrice($refund->adjustment_fee, $order->order_currency_code) }}</td>
+                                                </tr>
+
+                                                <tr class="fw6">
+                                                    <td>{{ __('shop::app.customer.account.order.view.grand-total') }}
+                                                        <span class="dash-icon">-</span>
+                                                    </td>
+                                                    <td>{{ core()->formatPrice($refund->grand_total, $order->order_currency_code) }}</td>
+                                                </tr>
+                                            </table>
+                                        </div>
+                                    </div>
+                                </div>
+
+                            @endforeach
+
+                        </tab>
+                    @endif
+                </tabs>
+
+                <div class="sale-section">
+                    <div class="section-content" style="border-bottom: 0">
+                        <div class="order-box-container">
+                            <div class="box">
+                                <div class="box-title">
+                                    {{ __('shop::app.customer.account.order.view.billing-address') }}
+                                </div>
+
+                                <div class="box-content">
+                                    @include ('admin::sales.address', ['address' => $order->billing_address])
+
+                                    {!! view_render_event('bagisto.shop.customers.account.orders.view.billing-address.after', ['order' => $order]) !!}
+                                </div>
+                            </div>
+
+                            @if ($order->shipping_address)
+                                <div class="box">
+                                    <div class="box-title">
+                                        {{ __('shop::app.customer.account.order.view.shipping-address') }}
+                                    </div>
+
+                                    <div class="box-content">
+                                        @include ('admin::sales.address', ['address' => $order->shipping_address])
+
+                                        {!! view_render_event('bagisto.shop.customers.account.orders.view.shipping-address.after', ['order' => $order]) !!}
+                                    </div>
+                                </div>
+
+                                <div class="box">
+                                    <div class="box-title">
+                                        {{ __('shop::app.customer.account.order.view.shipping-method') }}
+                                    </div>
+
+                                    <div class="box-content">
+                                        {{ $order->shipping_title }}
+
+                                        {!! view_render_event('bagisto.shop.customers.account.orders.view.shipping-method.after', ['order' => $order]) !!}
+                                    </div>
+                                </div>
+                            @endif
+
+                            <div class="box">
+                                <div class="box-title">
+                                    {{ __('shop::app.customer.account.order.view.payment-method') }}
+                                </div>
+
+                                <div class="box-content">
+                                    {{ core()->getConfigData('sales.paymentmethods.' . $order->payment->method . '.title') }}
+
+                                    @php $additionalDetails = \Webkul\Payment\Payment::getAdditionalDetails($order->payment->method); @endphp
+
+                                    @if (! empty($additionalDetails))
+                                        <div class="instructions">
+                                            <label>{{ $additionalDetails['title'] }}</label>
+                                            <p>{{ $additionalDetails['value'] }}</p>
+                                        </div>
+                                    @endif
+
+                                    {!! view_render_event('bagisto.shop.customers.account.orders.view.payment-method.after', ['order' => $order]) !!}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {!! view_render_event('bagisto.shop.customers.account.orders.view.after', ['order' => $order]) !!}
+        </div>
+    </div>
+@endsection
\ No newline at end of file
diff --git a/resources/themes/velocity/views/customers/account/partials/sidemenu.blade.php b/resources/themes/velocity/views/customers/account/partials/sidemenu.blade.php
new file mode 100644
index 000000000..d0bab2b38
--- /dev/null
+++ b/resources/themes/velocity/views/customers/account/partials/sidemenu.blade.php
@@ -0,0 +1,74 @@
+<div class="customer-sidebar row no-margin no-padding">
+    <div class="account-details col-12">
+        <div class="customer-name col-12 text-uppercase">
+            {{ substr(auth('customer')->user()->first_name, 0, 1) }}
+        </div>
+        <div class="col-12 customer-name-text text-capitalize text-break">{{ auth('customer')->user()->first_name . ' ' . auth('customer')->user()->last_name}}</div>
+        <div class="customer-email col-12 text-break">{{ auth('customer')->user()->email }}</div>
+    </div>
+
+    @foreach ($menu->items as $menuItem)
+        <ul type="none" class="navigation">
+            {{-- rearrange menu items --}}
+            @php
+                $subMenuCollection = [];
+
+                $showCompare = core()->getConfigData('general.content.shop.compare_option') == "1" ? true : false;
+
+                $showWishlist = core()->getConfigData('general.content.shop.wishlist_option') == "1" ? true : false;
+
+                try {
+                    $subMenuCollection['profile'] = $menuItem['children']['profile'];
+                    $subMenuCollection['orders'] = $menuItem['children']['orders'];
+                    $subMenuCollection['downloadables'] = $menuItem['children']['downloadables'];
+
+                    if ($showWishlist) {
+                        $subMenuCollection['wishlist'] = $menuItem['children']['wishlist'];
+                    }
+
+                    if ($showCompare) {
+                        $subMenuCollection['compare'] = $menuItem['children']['compare'];
+                    }
+
+                    $subMenuCollection['reviews'] = $menuItem['children']['reviews'];
+                    $subMenuCollection['address'] = $menuItem['children']['address'];
+
+                    unset(
+                        $menuItem['children']['profile'],
+                        $menuItem['children']['orders'],
+                        $menuItem['children']['downloadables'],
+                        $menuItem['children']['wishlist'],
+                        $menuItem['children']['compare'],
+                        $menuItem['children']['reviews'],
+                        $menuItem['children']['address']
+                    );
+
+                    foreach ($menuItem['children'] as $key => $remainingChildren) {
+                        $subMenuCollection[$key] = $remainingChildren;
+                    }
+                } catch (\Exception $exception) {
+                    $subMenuCollection = $menuItem['children'];
+                }
+            @endphp
+
+            @foreach ($subMenuCollection as $index => $subMenuItem)
+                <li class="{{ $menu->getActive($subMenuItem) }}" title="{{ trans($subMenuItem['name']) }}">
+                    <a class="unset fw6 full-width" href="{{ $subMenuItem['url'] }}">
+                        <i class="icon {{ $index }} text-down-3"></i>
+                        <span>{{ trans($subMenuItem['name']) }}<span>
+                        <i class="rango-arrow-right float-right text-down-3"></i>
+                    </a>
+                </li>
+            @endforeach
+        </ul>
+    @endforeach
+</div>
+
+@push('css')
+    <style type="text/css">
+        .main-content-wrapper {
+            margin-bottom: 0px;
+            min-height: 100vh;
+        }
+    </style>
+@endpush
\ No newline at end of file
diff --git a/resources/themes/velocity/views/customers/account/profile/edit.blade.php b/resources/themes/velocity/views/customers/account/profile/edit.blade.php
new file mode 100644
index 000000000..14c70dd45
--- /dev/null
+++ b/resources/themes/velocity/views/customers/account/profile/edit.blade.php
@@ -0,0 +1,212 @@
+@extends('shop::customers.account.index')
+
+@section('page_title')
+    {{ __('shop::app.customer.account.profile.index.title') }}
+@endsection
+
+@section('page-detail-wrapper')
+    <div class="account-head mb-15">
+        <span class="back-icon"><a href="{{ route('customer.account.index') }}"><i class="icon icon-menu-back"></i></a></span>
+        <span class="account-heading">{{ __('shop::app.customer.account.profile.index.title') }}</span>
+        <span></span>
+    </div>
+
+    {!! view_render_event('bagisto.shop.customers.account.profile.edit.before', ['customer' => $customer]) !!}
+
+    <form
+        method="POST"
+        @submit.prevent="onSubmit"
+        action="{{ route('customer.profile.store') }}">
+
+        <div class="account-table-content">
+            @csrf
+
+            {!! view_render_event('bagisto.shop.customers.account.profile.edit_form_controls.before', ['customer' => $customer]) !!}
+
+            <div :class="`row ${errors.has('first_name') ? 'has-error' : ''}`">
+                <label class="col-12 mandatory">
+                    {{ __('shop::app.customer.account.profile.fname') }}
+                </label>
+
+                <div class="col-12">
+                    <input value="{{ $customer->first_name }}" name="first_name" type="text" v-validate="'required'" />
+                    <span class="control-error" v-if="errors.has('first_name')">@{{ errors.first('first_name') }}</span>
+                </div>
+            </div>
+
+            {!! view_render_event('bagisto.shop.customers.account.profile.edit.first_name.after', ['customer' => $customer]) !!}
+
+            <div class="row">
+                <label class="col-12">
+                    {{ __('shop::app.customer.account.profile.lname') }}
+                </label>
+
+                <div class="col-12">
+                    <input value="{{ $customer->last_name }}" name="last_name" type="text" />
+                </div>
+            </div>
+
+            {!! view_render_event('bagisto.shop.customers.account.profile.edit.last_name.after', ['customer' => $customer]) !!}
+
+            <div :class="`row ${errors.has('gender') ? 'has-error' : ''}`">
+                <label class="col-12 mandatory">
+                    {{ __('shop::app.customer.account.profile.gender') }}
+                </label>
+
+                <div class="col-12">
+                    <select
+                        name="gender"
+                        v-validate="'required'"
+                        class="control styled-select"
+                        data-vv-as="&quot;{{ __('shop::app.customer.account.profile.gender') }}&quot;">
+
+                        <option value=""  @if ($customer->gender == "") selected @endif></option>
+                        <option
+                            value="Other"
+                            @if ($customer->gender == "Other")
+                                selected="selected"
+                            @endif>
+                            {{ __('velocity::app.shop.gender.other') }}
+                        </option>
+
+                        <option
+                            value="Male"
+                            @if ($customer->gender == "Male")
+                                selected="selected"
+                            @endif>
+                            {{ __('velocity::app.shop.gender.male') }}
+                        </option>
+
+                        <option
+                            value="Female"
+                            @if ($customer->gender == "Female")
+                                selected="selected"
+                            @endif>
+                            {{ __('velocity::app.shop.gender.female') }}
+                        </option>
+                    </select>
+
+                    <div class="select-icon-container">
+                        <span class="select-icon rango-arrow-down"></span>
+                    </div>
+
+                    <span class="control-error" v-if="errors.has('gender')">@{{ errors.first('gender') }}</span>
+                </div>
+            </div>
+
+            {!! view_render_event('bagisto.shop.customers.account.profile.edit.gender.after', ['customer' => $customer]) !!}
+
+            <div :class="`row ${errors.has('date_of_birth') ? 'has-error' : ''}`">
+                <label class="col-12">
+                    {{ __('shop::app.customer.account.profile.dob') }}
+                </label>
+
+                <div class="col-12">
+                    <input
+                        type="date"
+                        name="date_of_birth"
+                        placeholder="dd/mm/yyyy"
+                        value="{{ old('date_of_birth') ?? $customer->date_of_birth }}"
+                        v-validate="" data-vv-as="&quot;{{ __('shop::app.customer.account.profile.dob') }}&quot;" />
+
+                        <span class="control-error" v-if="errors.has('date_of_birth')">
+                            @{{ errors.first('date_of_birth') }}
+                        </span>
+                </div>
+            </div>
+
+            {!! view_render_event('bagisto.shop.customers.account.profile.edit.date_of_birth.after', ['customer' => $customer]) !!}
+
+            <div class="row">
+                <label class="col-12 mandatory">
+                    {{ __('shop::app.customer.account.profile.email') }}
+                </label>
+
+                <div class="col-12">
+                    <input value="{{ $customer->email }}" name="email" type="text" v-validate="'required'" />
+                    <span class="control-error" v-if="errors.has('email')">@{{ errors.first('email') }}</span>
+                </div>
+            </div>
+
+            {!! view_render_event('bagisto.shop.customers.account.profile.edit.email.after', ['customer' => $customer]) !!}
+
+            <div class="row">
+                <label class="col-12">
+                    {{ __('shop::app.customer.account.profile.phone') }}
+                </label>
+
+                <div class="col-12">
+                    <input value="{{ old('phone') ?? $customer->phone }}" name="phone" type="text"/>
+                    <span class="control-error" v-if="errors.has('phone')">@{{ errors.first('phone') }}</span>
+                </div>
+            </div>
+
+            {!! view_render_event('bagisto.shop.customers.account.profile.edit.phone.after', ['customer' => $customer]) !!}
+
+            <div class="row">
+                <label class="col-12">
+                    {{ __('velocity::app.shop.general.enter-current-password') }}
+                </label>
+
+                <div :class="`col-12 ${errors.has('oldpassword') ? 'has-error' : ''}`">
+                    <input value="" name="oldpassword" type="password" />
+                </div>
+            </div>
+
+            {!! view_render_event('bagisto.shop.customers.account.profile.edit.oldpassword.after', ['customer' => $customer]) !!}
+
+            <div class="row">
+                <label class="col-12">
+                    {{ __('velocity::app.shop.general.new-password') }}
+                </label>
+
+                <div :class="`col-12 ${errors.has('password') ? 'has-error' : ''}`">
+                    <input
+                        value=""
+                        name="password"
+                        ref="password"
+                        type="password"
+                        v-validate="'min:6|max:18'" />
+
+                    <span class="control-error" v-if="errors.has('password')">
+                        @{{ errors.first('password') }}
+                    </span>
+                </div>
+            </div>
+
+            {!! view_render_event('bagisto.shop.customers.account.profile.edit.password.after', ['customer' => $customer]) !!}
+
+            <div class="row">
+                <label class="col-12">
+                    {{ __('velocity::app.shop.general.confirm-new-password') }}
+                </label>
+
+                <div :class="`col-12 ${errors.has('password_confirmation') ? 'has-error' : ''}`">
+                    <input value="" name="password_confirmation" type="password"
+                    v-validate="'min:6|confirmed:password'" data-vv-as="confirm password" />
+
+                    <span class="control-error" v-if="errors.has('password_confirmation')">
+                        @{{ errors.first('password_confirmation') }}
+                    </span>
+                </div>
+            </div>
+
+            @if (core()->getConfigData('customer.settings.newsletter.subscription'))
+                <div class="control-group">
+                    <input type="checkbox" id="checkbox2" name="subscribed_to_news_letter" @if (isset($customer->subscription)) value="{{ $customer->subscription->is_subscribed }}" {{ $customer->subscription->is_subscribed ? 'checked' : ''}} @endif  style="width: auto;">
+                    <span>{{ __('shop::app.customer.signup-form.subscribe-to-newsletter') }}</span>
+                </div>
+            @endif
+
+            {!! view_render_event('bagisto.shop.customers.account.profile.edit_form_controls.after', ['customer' => $customer]) !!}
+
+            <button
+                type="submit"
+                class="theme-btn mb20">
+                {{ __('velocity::app.shop.general.update') }}
+            </button>
+        </div>
+    </form>
+
+    {!! view_render_event('bagisto.shop.customers.account.profile.edit.after', ['customer' => $customer]) !!}
+@endsection
\ No newline at end of file
diff --git a/resources/themes/velocity/views/customers/account/profile/index.blade.php b/resources/themes/velocity/views/customers/account/profile/index.blade.php
new file mode 100644
index 000000000..10d9a2c1b
--- /dev/null
+++ b/resources/themes/velocity/views/customers/account/profile/index.blade.php
@@ -0,0 +1,116 @@
+@extends('shop::customers.account.index')
+
+@section('page_title')
+    {{ __('shop::app.customer.account.profile.index.title') }}
+@endsection
+
+@push('css')
+    <style>
+        .account-head {
+            height: 50px;
+        }
+    </style>
+@endpush
+
+
+@section('page-detail-wrapper')
+    <div class="account-head mb-0">
+        <span class="back-icon">
+            <a href="{{ route('customer.account.index') }}">
+                <i class="icon icon-menu-back"></i>
+            </a>
+        </span>
+        <span class="account-heading">
+            {{ __('shop::app.customer.account.profile.index.title') }}
+        </span>
+
+        <span class="account-action">
+            <a href="{{ route('customer.profile.edit') }}" class="theme-btn light unset float-right">
+                {{ __('shop::app.customer.account.profile.index.edit') }}
+            </a>
+        </span>
+    </div>
+
+    {!! view_render_event('bagisto.shop.customers.account.profile.view.before', ['customer' => $customer]) !!}
+
+    <div class="account-table-content profile-page-content">
+        <div class="table">
+            <table>
+                <tbody>
+                    {!! view_render_event(
+                    'bagisto.shop.customers.account.profile.view.table.before', ['customer' => $customer])
+                    !!}
+
+                    <tr>
+                        <td>{{ __('shop::app.customer.account.profile.fname') }}</td>
+                        <td>{{ $customer->first_name }}</td>
+                    </tr>
+
+                    {!! view_render_event('bagisto.shop.customers.account.profile.view.table.first_name.after', ['customer' => $customer]) !!}
+
+                    <tr>
+                        <td>{{ __('shop::app.customer.account.profile.lname') }}</td>
+                        <td>{{ $customer->last_name }}</td>
+                    </tr>
+
+                    {!! view_render_event('bagisto.shop.customers.account.profile.view.table.last_name.after', ['customer' => $customer]) !!}
+
+                    <tr>
+                        <td>{{ __('shop::app.customer.account.profile.gender') }}</td>
+                        <td>{{ $customer->gender ?? '-' }}</td>
+                    </tr>
+
+                    {!! view_render_event('bagisto.shop.customers.account.profile.view.table.gender.after', ['customer' => $customer]) !!}
+
+                    <tr>
+                        <td>{{ __('shop::app.customer.account.profile.dob') }}</td>
+                        <td>{{ $customer->date_of_birth ?? '-' }}</td>
+                    </tr>
+
+                    {!! view_render_event('bagisto.shop.customers.account.profile.view.table.date_of_birth.after', ['customer' => $customer]) !!}
+
+                    <tr>
+                        <td>{{ __('shop::app.customer.account.profile.email') }}</td>
+                        <td>{{ $customer->email }}</td>
+                    </tr>
+
+                    {!! view_render_event(
+                    'bagisto.shop.customers.account.profile.view.table.after', ['customer' => $customer])
+                    !!}
+                </tbody>
+            </table>
+        </div>
+
+        <button
+            type="submit"
+            class="theme-btn mb20" @click="showModal('deleteProfile')" >
+            {{ __('shop::app.customer.account.address.index.delete') }}
+        </button>
+
+        <form method="POST" action="{{ route('customer.profile.destroy') }}" @submit.prevent="onSubmit">
+            @csrf
+
+            <modal id="deleteProfile" :is-open="modalIds.deleteProfile">
+                <h3 slot="header">{{ __('shop::app.customer.account.address.index.enter-password') }}
+                </h3>
+                <i class="rango-close"></i>
+
+                <div slot="body">
+                    <div class="control-group" :class="[errors.has('password') ? 'has-error' : '']">
+                        <label for="password" class="required">{{ __('admin::app.users.users.password') }}</label>
+                        <input type="password" v-validate="'required|min:6|max:18'" class="control" id="password" name="password" data-vv-as="&quot;{{ __('admin::app.users.users.password') }}&quot;"/>
+                        <span class="control-error" v-if="errors.has('password')">@{{ errors.first('password') }}</span>
+                    </div>
+
+                    <div class="page-action">
+                        <button type="submit"  class="theme-btn mb20">
+                        {{ __('shop::app.customer.account.address.index.delete') }}
+                        </button>
+                    </div>
+                </div>
+            </modal>
+        </form>
+    </div>
+
+    {!! view_render_event('bagisto.shop.customers.account.profile.view.after', ['customer' => $customer]) !!}
+@endsection
\ No newline at end of file
diff --git a/resources/themes/velocity/views/customers/account/reviews/index.blade.php b/resources/themes/velocity/views/customers/account/reviews/index.blade.php
new file mode 100644
index 000000000..9affd9951
--- /dev/null
+++ b/resources/themes/velocity/views/customers/account/reviews/index.blade.php
@@ -0,0 +1,118 @@
+@extends('shop::customers.account.index')
+
+@section('page_title')
+    {{ __('shop::app.customer.account.review.index.page-title') }}
+@endsection
+
+@section('page-detail-wrapper')
+    <div class="reviews-head mb20">
+        <span class="back-icon">
+            <a href="{{ route('customer.account.index') }}">
+                <i class="icon icon-menu-back"></i>
+            </a>
+        </span>
+
+        <span class="account-heading">{{ __('shop::app.customer.account.review.index.title') }}</span>
+
+        @if (count($reviews) > 1)
+            <div class="account-action float-right">
+                <a href="{{ route('customer.review.deleteall') }}" class="theme-btn light unset">
+                    {{ __('shop::app.customer.account.wishlist.deleteall') }}
+                </a>
+            </div>
+        @endif
+    </div>
+
+    {!! view_render_event('bagisto.shop.customers.account.reviews.list.before', ['reviews' => $reviews]) !!}
+
+    <div class="reviews-container">
+        @if (! $reviews->isEmpty())
+            @foreach ($reviews as $review)
+                <div class="row col-12 fs16">
+                    <div class="col-12 row">
+                        @php
+                            $image = productimage()->getProductBaseImage($review->product);
+                        @endphp
+
+                        <a
+                            href="{{ url()->to('/').'/'.$review->product->url_key }}"
+                            title="{{ $review->product->name }}"
+                            class="col-2 max-sm-img-dimention no-padding">
+                            <img class="media" src="{{ $image['small_image_url'] }}" alt=""/>
+                        </a>
+
+                        <div class="col-8">
+                            <div class="product-name">
+                                <a
+                                    class="remove-decoration"
+                                    href="{{ url()->to('/').'/'.$review->product->url_key }}"
+                                    title="{{ $review->product->name }}">
+                                    {{$review->product->name}}
+                                </a>
+                            </div>
+
+                            <star-ratings ratings="{{ $review->rating }}"></star-ratings>
+
+                            <h5 class="fw6">{{ $review->title }}</h5>
+
+                            <p>{{ $review->comment }}</p>
+                        </div>
+
+                        <div class="col-2">
+                            <a class="unset" href="{{ route('customer.review.delete', $review->id) }}">
+                                <span class="rango-delete fs24"></span>
+                                <span class="align-vertical-top">{{ __('shop::app.checkout.cart.remove') }}</span>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            @endforeach
+
+            <div class="bottom-toolbar">
+                {{ $reviews->links()  }}
+            </div>
+            {{-- <load-more-btn></load-more-btn> --}}
+        @else
+            <div class="fs16">
+                {{ __('customer::app.reviews.empty') }}
+            </div>
+        @endif
+
+    </div>
+
+    {!! view_render_event('bagisto.shop.customers.account.reviews.list.after', ['reviews' => $reviews]) !!}
+@endsection
+
+@push('scripts')
+    <script type="text/x-template" id="load-more-template">
+        <div class="col-12 row justify-content-center">
+            <button type="button" class="theme-btn light" @click="loadNextPage">Load More</button>
+        </div>
+    </script>
+
+    <script type="text/javascript">
+        (() => {
+            Vue.component('load-more-btn', {
+                template: '#load-more-template',
+
+                methods: {
+                    'loadNextPage': function () {
+                        let splitedParamsObject = {};
+
+                        let searchedString = window.location.search;
+                        searchedString = searchedString.replace('?', '');
+
+                        let splitedParams = searchedString.split('&');
+
+                        splitedParams.forEach(value => {
+                            let splitedValue = value.split('=');
+                            splitedParamsObject[splitedValue[0]] = splitedValue[1];
+                        });
+
+                        splitedParamsObject[page]
+                    }
+                }
+            })
+        })()
+    </script>
+@endpush
\ No newline at end of file
diff --git a/resources/themes/velocity/views/customers/account/wishlist/wishlist.blade.php b/resources/themes/velocity/views/customers/account/wishlist/wishlist.blade.php
new file mode 100644
index 000000000..aa8bf2f6c
--- /dev/null
+++ b/resources/themes/velocity/views/customers/account/wishlist/wishlist.blade.php
@@ -0,0 +1,63 @@
+@inject ('toolbarHelper', 'Webkul\Product\Helpers\Toolbar')
+
+@extends('shop::customers.account.index')
+
+@section('page_title')
+    {{ __('shop::app.customer.account.wishlist.page-title') }}
+@endsection
+
+@section('page-detail-wrapper')
+    <div class="account-head">
+        <span class="account-heading">{{ __('shop::app.customer.account.wishlist.title') }}</span>
+
+        @if (count($items))
+            <div class="account-action float-right">
+                <a
+                    class="remove-decoration theme-btn light"
+                    href="{{ route('customer.wishlist.removeall') }}">
+                    {{ __('shop::app.customer.account.wishlist.deleteall') }}
+                </a>
+            </div>
+        @endif
+    </div>
+
+    {!! view_render_event('bagisto.shop.customers.account.wishlist.list.before', ['wishlist' => $items]) !!}
+
+    <div class="wishlist-container">
+
+        @if ($items->count())
+            @foreach ($items as $item)
+                @php
+                    $currentMode = $toolbarHelper->getCurrentMode();
+                    $moveToCartText = __('shop::app.customer.account.wishlist.move-to-cart');
+                @endphp
+
+                @include ('shop::products.list.card', [
+                    'list'                 => true,
+                    'checkmode'            => true,
+                    'moveToCart'           => true,
+                    'wishlistMoveRoute'    => route('customer.wishlist.move', $item->id),
+                    'addToCartForm'        => true,
+                    'removeWishlist'       => true,
+                    'reloadPage'           => true,
+                    'itemId'               => $item->id,
+                    'item'                 => $item,
+                    'product'              => $item->product,
+                    'additionalAttributes' => true,
+                    'btnText'              => $moveToCartText,
+                    'addToCartBtnClass'    => 'small-padding',
+                ])
+            @endforeach
+
+            <div>
+                {{ $items->links()  }}
+            </div>
+        @else
+            <div class="empty">
+                {{ __('customer::app.wishlist.empty') }}
+            </div>
+        @endif
+    </div>
+
+    {!! view_render_event('bagisto.shop.customers.account.wishlist.list.after', ['wishlist' => $items]) !!}
+@endsection
diff --git a/resources/themes/velocity/views/customers/session/index.blade.php b/resources/themes/velocity/views/customers/session/index.blade.php
new file mode 100644
index 000000000..9242d3077
--- /dev/null
+++ b/resources/themes/velocity/views/customers/session/index.blade.php
@@ -0,0 +1,105 @@
+@extends('shop::layouts.master')
+
+@section('page_title')
+    {{ __('shop::app.customer.login-form.page-title') }}
+@endsection
+
+@section('content-wrapper')
+    <div class="auth-content form-container">
+
+        {!! view_render_event('bagisto.shop.customers.login.before') !!}
+
+            <div class="container">
+                <div class="col-lg-10 col-md-12 offset-lg-1">
+                    <div class="heading">
+                        <h2 class="fs24 fw6">
+                            {{ __('velocity::app.customer.login-form.customer-login')}}
+                        </h2>
+
+                        <a href="{{ route('customer.register.index') }}" class="btn-new-customer">
+                            <button type="button" class="theme-btn light">
+                                {{ __('velocity::app.customer.login-form.sign-up')}}
+                            </button>
+                        </a>
+                    </div>
+
+                    <div class="body col-12">
+                        <div class="form-header">
+                            <h3 class="fw6">
+                                {{ __('velocity::app.customer.login-form.registered-user')}}
+                            </h3>
+
+                            <p class="fs16">
+                                {{ __('velocity::app.customer.login-form.form-login-text')}}
+                            </p>
+                        </div>
+
+                        <form
+                            method="POST"
+                            action="{{ route('customer.session.create') }}"
+                            @submit.prevent="onSubmit">
+
+                            {{ csrf_field() }}
+
+                            {!! view_render_event('bagisto.shop.customers.login_form_controls.before') !!}
+
+                            <div class="form-group" :class="[errors.has('email') ? 'has-error' : '']">
+                                <label for="email" class="mandatory label-style">
+                                    {{ __('shop::app.customer.login-form.email') }}
+                                </label>
+
+                                <input
+                                    type="text"
+                                    class="form-style"
+                                    name="email"
+                                    v-validate="'required|email'"
+                                    value="{{ old('email') }}"
+                                    data-vv-as="&quot;{{ __('shop::app.customer.login-form.email') }}&quot;" />
+
+                                <span class="control-error" v-if="errors.has('email')">
+                                    @{{ errors.first('email') }}
+                                </span>
+                            </div>
+
+                            <div class="form-group" :class="[errors.has('password') ? 'has-error' : '']">
+                                <label for="password" class="mandatory label-style">
+                                    {{ __('shop::app.customer.login-form.password') }}
+                                </label>
+
+                                <input
+                                    type="password"
+                                    class="form-style"
+                                    name="password"
+                                    v-validate="'required'"
+                                    value="{{ old('password') }}"
+                                    data-vv-as="&quot;{{ __('shop::app.customer.login-form.password') }}&quot;" />
+
+                                <span class="control-error" v-if="errors.has('password')">
+                                    @{{ errors.first('password') }}
+                                </span>
+
+                                <a href="{{ route('customer.forgot-password.create') }}" class="float-right">
+                                    {{ __('shop::app.customer.login-form.forgot_pass') }}
+                                </a>
+
+                                <div class="mt10">
+                                    @if (Cookie::has('enable-resend'))
+                                        @if (Cookie::get('enable-resend') == true)
+                                            <a href="{{ route('customer.resend.verification-email', Cookie::get('email-for-resend')) }}">{{ __('shop::app.customer.login-form.resend-verification') }}</a>
+                                        @endif
+                                    @endif
+                                </div>
+                            </div>
+
+                            {!! view_render_event('bagisto.shop.customers.login_form_controls.after') !!}
+
+                            <input class="theme-btn" type="submit" value="{{ __('shop::app.customer.login-form.button_title') }}">
+
+                        </form>
+                    </div>
+                </div>
+            </div>
+
+        {!! view_render_event('bagisto.shop.customers.login.after') !!}
+    </div>
+@endsection
diff --git a/resources/themes/velocity/views/customers/signup/forgot-password.blade.php b/resources/themes/velocity/views/customers/signup/forgot-password.blade.php
new file mode 100644
index 000000000..bf4e8c14e
--- /dev/null
+++ b/resources/themes/velocity/views/customers/signup/forgot-password.blade.php
@@ -0,0 +1,71 @@
+@extends('shop::layouts.master')
+
+@section('page_title')
+    {{ __('shop::app.customer.forgot-password.page_title') }}
+@endsection
+
+@section('content-wrapper')
+    <div class="auth-content form-container">
+        <div class="container">
+            <div class="col-lg-10 col-md-12 offset-lg-1">
+                <div class="heading">
+                    <h2 class="fs24 fw6">
+                        {{ __('velocity::app.customer.forget-password.forgot-password')}}
+                    </h2>
+
+                    <a href="{{ route('customer.session.index') }}" class="btn-new-customer">
+                        <button type="button" class="theme-btn light">
+                            {{  __('velocity::app.customer.signup-form.login') }}
+                        </button>
+                    </a>
+                </div>
+
+                <div class="body col-12">
+                    <h3 class="fw6">
+                        {{ __('velocity::app.customer.forget-password.recover-password')}}
+                    </h3>
+
+                    <p class="fs16">
+                        {{ __('velocity::app.customer.forget-password.recover-password-text')}}
+                    </p>
+
+                    {!! view_render_event('bagisto.shop.customers.forget_password.before') !!}
+
+                    <form
+                        method="post"
+                        action="{{ route('customer.forgot-password.store') }}"
+                        @submit.prevent="onSubmit">
+
+                        {{ csrf_field() }}
+
+                        {!! view_render_event('bagisto.shop.customers.forget_password_form_controls.before') !!}
+
+                        <div class="control-group" :class="[errors.has('email') ? 'has-error' : '']">
+                            <label for="email" class="mandatory label-style">
+                                {{ __('shop::app.customer.forgot-password.email') }}
+                            </label>
+
+                            <input
+                                type="email"
+                                name="email"
+                                class="form-style"
+                                v-validate="'required|email'" />
+
+                            <span class="control-error" v-if="errors.has('email')">
+                                @{{ errors.first('email') }}
+                            </span>
+                        </div>
+
+                        {!! view_render_event('bagisto.shop.customers.forget_password_form_controls.after') !!}
+
+                        <button class="theme-btn" type="submit">
+                            {{ __('shop::app.customer.forgot-password.submit') }}
+                        </button>
+                    </form>
+
+                    {!! view_render_event('bagisto.shop.customers.forget_password.after') !!}
+                </div>
+            </div>
+        </div>
+    </div>
+@endsection
diff --git a/resources/themes/velocity/views/customers/signup/index.blade.php b/resources/themes/velocity/views/customers/signup/index.blade.php
new file mode 100644
index 000000000..bc5dfbd1b
--- /dev/null
+++ b/resources/themes/velocity/views/customers/signup/index.blade.php
@@ -0,0 +1,160 @@
+@extends('shop::layouts.master')
+
+@section('page_title')
+    {{ __('shop::app.customer.signup-form.page-title') }}
+@endsection
+
+@section('content-wrapper')
+    <div class="auth-content form-container">
+        <div class="container">
+            <div class="col-lg-10 col-md-12 offset-lg-1">
+                <div class="heading">
+                    <h2 class="fs24 fw6">
+                        {{ __('velocity::app.customer.signup-form.user-registration')}}
+                    </h2>
+
+                    <a href="{{ route('customer.session.index') }}" class="btn-new-customer">
+                        <button type="button" class="theme-btn light">
+                            {{ __('velocity::app.customer.signup-form.login')}}
+                        </button>
+                    </a>
+                </div>
+
+                <div class="body col-12">
+                    <h3 class="fw6">
+                        {{ __('velocity::app.customer.signup-form.become-user')}}
+                    </h3>
+
+                    <p class="fs16">
+                        {{ __('velocity::app.customer.signup-form.form-sginup-text')}}
+                    </p>
+
+                    {!! view_render_event('bagisto.shop.customers.signup.before') !!}
+
+                    <form
+                        method="post"
+                        action="{{ route('customer.register.create') }}"
+                        @submit.prevent="onSubmit">
+
+                        {{ csrf_field() }}
+
+                        {!! view_render_event('bagisto.shop.customers.signup_form_controls.before') !!}
+
+                        <div class="control-group" :class="[errors.has('first_name') ? 'has-error' : '']">
+                            <label for="first_name" class="required label-style">
+                                {{ __('shop::app.customer.signup-form.firstname') }}
+                            </label>
+
+                            <input
+                                type="text"
+                                class="form-style"
+                                name="first_name"
+                                v-validate="'required'"
+                                value="{{ old('first_name') }}"
+                                data-vv-as="&quot;{{ __('shop::app.customer.signup-form.firstname') }}&quot;" />
+
+                            <span class="control-error" v-if="errors.has('first_name')">
+                                @{{ errors.first('first_name') }}
+                            </span>
+                        </div>
+
+                        {!! view_render_event('bagisto.shop.customers.signup_form_controls.firstname.after') !!}
+
+                        <div class="control-group" :class="[errors.has('last_name') ? 'has-error' : '']">
+                            <label for="last_name" class="required label-style">
+                                {{ __('shop::app.customer.signup-form.lastname') }}
+                            </label>
+
+                            <input
+                                type="text"
+                                class="form-style"
+                                name="last_name"
+                                v-validate="'required'"
+                                value="{{ old('last_name') }}"
+                                data-vv-as="&quot;{{ __('shop::app.customer.signup-form.lastname') }}&quot;" />
+
+                            <span class="control-error" v-if="errors.has('last_name')">
+                                @{{ errors.first('last_name') }}
+                            </span>
+                        </div>
+
+                        {!! view_render_event('bagisto.shop.customers.signup_form_controls.lastname.after') !!}
+
+                        <div class="control-group" :class="[errors.has('email') ? 'has-error' : '']">
+                            <label for="email" class="required label-style">
+                                {{ __('shop::app.customer.signup-form.email') }}
+                            </label>
+
+                            <input
+                                type="email"
+                                class="form-style"
+                                name="email"
+                                v-validate="'required|email'"
+                                value="{{ old('email') }}"
+                                data-vv-as="&quot;{{ __('shop::app.customer.signup-form.email') }}&quot;" />
+
+                            <span class="control-error" v-if="errors.has('email')">
+                                @{{ errors.first('email') }}
+                            </span>
+                        </div>
+
+                        {!! view_render_event('bagisto.shop.customers.signup_form_controls.email.after') !!}
+
+                        <div class="control-group" :class="[errors.has('password') ? 'has-error' : '']">
+                            <label for="password" class="required label-style">
+                                {{ __('shop::app.customer.signup-form.password') }}
+                            </label>
+
+                            <input
+                                type="password"
+                                class="form-style"
+                                name="password"
+                                v-validate="'required|min:6'"
+                                ref="password"
+                                value="{{ old('password') }}"
+                                data-vv-as="&quot;{{ __('shop::app.customer.signup-form.password') }}&quot;" />
+
+                            <span class="control-error" v-if="errors.has('password')">
+                                @{{ errors.first('password') }}
+                            </span>
+                        </div>
+
+                        {!! view_render_event('bagisto.shop.customers.signup_form_controls.password.after') !!}
+
+                        <div class="control-group" :class="[errors.has('password_confirmation') ? 'has-error' : '']">
+                            <label for="password_confirmation" class="required label-style">
+                                {{ __('shop::app.customer.signup-form.confirm_pass') }}
+                            </label>
+
+                            <input
+                                type="password"
+                                class="form-style"
+                                name="password_confirmation"
+                                v-validate="'required|min:6|confirmed:password'"
+                                data-vv-as="&quot;{{ __('shop::app.customer.signup-form.confirm_pass') }}&quot;" />
+
+                            <span class="control-error" v-if="errors.has('password_confirmation')">
+                                @{{ errors.first('password_confirmation') }}
+                            </span>
+                        </div>
+
+                        @if (core()->getConfigData('customer.settings.newsletter.subscription'))
+                            <div class="control-group">
+                                <input type="checkbox" id="checkbox2" name="is_subscribed">
+                                <span>{{ __('shop::app.customer.signup-form.subscribe-to-newsletter') }}</span>
+                            </div>
+                        @endif
+
+                        {!! view_render_event('bagisto.shop.customers.signup_form_controls.after') !!}
+
+                        <button class="theme-btn" type="submit">
+                            {{ __('shop::app.customer.signup-form.title') }}
+                        </button>
+                    </form>
+
+                    {!! view_render_event('bagisto.shop.customers.signup.after') !!}
+                </div>
+            </div>
+        </div>
+    </div>
+@endsection
diff --git a/resources/themes/velocity/views/customers/signup/reset-password.blade.php b/resources/themes/velocity/views/customers/signup/reset-password.blade.php
new file mode 100644
index 000000000..db4a7b74d
--- /dev/null
+++ b/resources/themes/velocity/views/customers/signup/reset-password.blade.php
@@ -0,0 +1,101 @@
+@extends('shop::layouts.master')
+
+@section('page_title')
+ {{ __('shop::app.customer.reset-password.title') }}
+@endsection
+
+@section('content-wrapper')
+
+<div class="auth-content">
+    {!! view_render_event('bagisto.shop.customers.reset_password.before') !!}
+        <div class="auth-content form-container">
+            <div class="container">
+                <div class="col-lg-10 col-md-12 offset-lg-1">
+                    <div class="heading">
+                        <h2 class="fs24 fw6">
+                            {{ __('shop::app.customer.reset-password.title')}}
+                        </h2>
+                    </div>
+
+                    <div class="body col-12">
+
+                        {!! view_render_event('bagisto.shop.customers.forget_password.before') !!}
+
+                        <form
+                            method="POST"
+                            @submit.prevent="onSubmit"
+                            action="{{ route('customer.reset-password.store') }}">
+
+                            {{ csrf_field() }}
+
+                            <input type="hidden" name="token" value="{{ $token }}">
+
+                            {!! view_render_event('bagisto.shop.customers.forget_password_form_controls.before') !!}
+
+                            <div :class="`form-group ${errors.has('email') ? 'has-error' : ''}`">
+                                <label for="email" class="required label-style mandatory">
+                                    {{ __('shop::app.customer.reset-password.email') }}
+                                </label>
+
+                                <input
+                                    id="email"
+                                    type="text"
+                                    name="email"
+                                    class="form-style"
+                                    value="{{ old('email') }}"
+                                    v-validate="'required|email'" />
+
+                                <span class="control-error" v-if="errors.has('email')">
+                                    @{{ errors.first('email') }}
+                                </span>
+                            </div>
+
+                            <div :class="`form-group ${errors.has('password') ? 'has-error' : ''}`">
+                                <label for="password" class="required label-style mandatory">
+                                    {{ __('shop::app.customer.reset-password.password') }}
+                                </label>
+
+                                <input
+                                    ref="password"
+                                    class="form-style"
+                                    name="password"
+                                    type="password"
+                                    v-validate="'required|min:6'" />
+
+                                <span class="control-error" v-if="errors.has('password')">
+                                    @{{ errors.first('password') }}
+                                </span>
+                            </div>
+
+                            <div :class="`form-group ${errors.has('confirm_password') ? 'has-error' : ''}`">
+                                <label for="confirm_password" class="required label-style mandatory">
+                                    {{ __('shop::app.customer.reset-password.confirm-password') }}
+                                </label>
+
+                                <input
+                                    type="password"
+                                    class="form-style"
+                                    name="password_confirmation"
+                                    v-validate="'required|min:6|confirmed:password'" />
+
+                                <span class="control-error" v-if="errors.has('confirm_password')">
+                                    @{{ errors.first('confirm_password') }}
+                                </span>
+                            </div>
+
+                            {!! view_render_event('bagisto.shop.customers.forget_password_form_controls.after') !!}
+
+                            <button class="theme-btn" type="submit">
+                                {{ __('shop::app.customer.reset-password.submit-btn-title') }}
+                            </button>
+                        </form>
+
+
+                        {!! view_render_event('bagisto.shop.customers.forget_password.after') !!}
+                    </div>
+                </div>
+            </div>
+        </div>
+    {!! view_render_event('bagisto.shop.customers.reset_password.before') !!}
+</div>
+@endsection
\ No newline at end of file
diff --git a/resources/themes/velocity/views/errors/404.blade.php b/resources/themes/velocity/views/errors/404.blade.php
new file mode 100644
index 000000000..456cb893d
--- /dev/null
+++ b/resources/themes/velocity/views/errors/404.blade.php
@@ -0,0 +1,54 @@
+@extends('shop::layouts.master')
+
+@section('page_title')
+    {{ __('admin::app.error.404.page-title') }}
+@stop
+
+@section('body-header')
+@endsection
+
+@section('full-content-wrapper')
+    <div class="error-page row text-center">
+        <div class="col-6">
+            <div
+                class="col-12 bg-image broken-image"
+            ></div>
+
+            <div class="col-12 fs24">
+                {{ __('velocity::app.error.page-lost-short') }}
+            </div>
+
+            <p class="col-12 fs20">
+                {{ __('velocity::app.error.page-lost-description') }}
+            </p>
+        </div>
+
+        <div class="col-6">
+            <div class="row">
+
+                @if ($logo = core()->getCurrentChannel()->logo_url)
+                    <div
+                        class="col-12 velocity-icon bg-image"
+                        style="background-image: url('{{ $logo }}')"
+                    ></div>
+                @else
+                    <div class="col-12 velocity-icon bg-image"></div>
+                @endif
+            </div>
+
+            <a class="row remove-decoration" href="{{ route('shop.home.index') }}">
+                <div class="col-12">
+                    <span class="custom-circle">></span>
+                </div>
+
+                <span class="col-12 fs16">
+                    {{ __('velocity::app.error.go-to-home') }}
+                </span>
+            </a>
+        </div>
+    </div>
+
+@endsection
+
+@section('footer')
+@show
diff --git a/resources/themes/velocity/views/guest/compare/compare-products.blade.php b/resources/themes/velocity/views/guest/compare/compare-products.blade.php
new file mode 100644
index 000000000..296dae42f
--- /dev/null
+++ b/resources/themes/velocity/views/guest/compare/compare-products.blade.php
@@ -0,0 +1,332 @@
+@php
+    $attributeRepository = app('\Webkul\Attribute\Repositories\AttributeFamilyRepository');
+    $comparableAttributes = $attributeRepository->getComparableAttributesBelongsToFamily();
+
+    $locale = request()->get('locale') ?: app()->getLocale();
+
+    $attributeOptionTranslations = app('\Webkul\Attribute\Repositories\AttributeOptionTranslationRepository')->where('locale', $locale)->get()->toJson();
+@endphp
+
+@push('scripts')
+    <script type="text/x-template" id="compare-product-template">
+        <section class="cart-details row no-margin col-12">
+            <h2 class="fw6 col-6">
+                {{ __('velocity::app.customer.compare.compare_similar_items') }}
+            </h2>
+
+            <div class="col-6" v-if="products.length > 0">
+                <button
+                    class="theme-btn light float-right"
+                    @click="removeProductCompare('all')">
+                    {{ __('shop::app.customer.account.wishlist.deleteall') }}
+                </button>
+            </div>
+
+            {!! view_render_event('bagisto.shop.customers.account.compare.view.before') !!}
+
+            <table class="row compare-products">
+                <shimmer-component v-if="!isProductListLoaded && !isMobile()"></shimmer-component>
+
+                <template v-else-if="isProductListLoaded && products.length > 0">
+                    @php
+                        $comparableAttributes = $comparableAttributes->toArray();
+
+                        array_splice($comparableAttributes, 1, 0, [[
+                            'code' => 'product_image',
+                            'admin_name' => __('velocity::app.customer.compare.product_image'),
+                        ]]);
+
+                        array_splice($comparableAttributes, 2, 0, [[
+                            'code' => 'addToCartHtml',
+                            'admin_name' => __('velocity::app.customer.compare.actions'),
+                        ]]);
+                    @endphp
+
+                    @foreach ($comparableAttributes as $attribute)
+                        <tr>
+                            <td>
+                                <span class="fs16">{{ isset($attribute['name']) ? $attribute['name'] : $attribute['admin_name'] }}</span>
+                            </td>
+
+                            <td :key="`title-${index}`" v-for="(product, index) in products">
+                                @switch ($attribute['code'])
+                                    @case('name')
+                                        <a :href="`${$root.baseUrl}/${product.url_key}`" class="unset remove-decoration active-hover">
+                                            <h2 class="fw6 fs18" v-text="product['{{ $attribute['code'] }}']"></h2>
+                                        </a>
+                                        @break
+
+                                    @case('product_image')
+                                        <a :href="`${$root.baseUrl}/${product.url_key}`" class="unset">
+                                            <img
+                                                class="image-wrapper"
+                                                :src="product['{{ $attribute['code'] }}']"
+                                                onload="window.updateHeight ? window.updateHeight() : ''"
+                                                :onerror="`this.src='${$root.baseUrl}/vendor/webkul/ui/assets/images/product/large-product-placeholder.png'`"
+                                                alt=""/>
+                                        </a>
+                                        @break
+
+                                    @case('price')
+                                        <span v-html="product['priceHTML']"></span>
+                                        @break
+
+                                    @case('addToCartHtml')
+                                        <div class="action">
+                                            <vnode-injector :nodes="getDynamicHTML(product.addToCartHtml)"></vnode-injector>
+
+                                            <i
+                                                class="material-icons cross fs16"
+                                                @click="removeProductCompare(product.id)">
+
+                                                close
+                                            </i>
+                                        </div>
+                                        @break
+
+                                    @case('color')
+                                        <span v-html="product.color_label" class="fs16"></span>
+                                        @break
+
+                                    @case('size')
+                                        <span v-html="product.size_label" class="fs16"></span>
+                                        @break
+
+                                    @case('description')
+                                        <span v-html="product.description"></span>
+                                        @break
+
+                                    @default
+                                        @switch ($attribute['type'])
+                                            @case('boolean')
+                                                <span
+                                                    v-text="product.product['{{ $attribute['code'] }}']
+                                                            ? '{{ __('velocity::app.shop.general.yes') }}'
+                                                            : '{{ __('velocity::app.shop.general.no') }}'"
+                                                ></span>
+                                                @break;
+
+                                            @case('checkbox')
+                                                <span v-if="product.product['{{ $attribute['code'] }}']" v-html="getAttributeOptions(product['{{ $attribute['code'] }}'] ? product : product.product['{{ $attribute['code'] }}'] ? product.product : null, '{{ $attribute['code'] }}', 'multiple')" class="fs16"></span>
+                                                <span v-else class="fs16">__</span>
+                                                @break;
+
+                                            @case('select')
+                                                <span v-if="product.product['{{ $attribute['code'] }}']" v-html="getAttributeOptions(product['{{ $attribute['code'] }}'] ? product : product.product['{{ $attribute['code'] }}'] ? product.product : null, '{{ $attribute['code'] }}', 'single')" class="fs16"></span>
+                                                <span v-else class="fs16">__</span>
+                                                @break;
+
+                                            @case ('file')
+                                            @case ('image')
+                                                <a :href="`${$root.baseUrl}/${product.url_key}`" class="unset">
+                                                    <img
+                                                        class="image-wrapper"
+                                                        onload="window.updateHeight ? window.updateHeight() : ''"
+                                                        :src="'storage/' + product.product['{{ $attribute['code'] }}']"
+                                                        :onerror="`this.src='${$root.baseUrl}/vendor/webkul/ui/assets/images/product/large-product-placeholder.png'`"
+                                                        alt=""/>
+                                                </a>
+                                                @break;
+
+                                            @default
+                                                <span v-html="product['{{ $attribute['code'] }}'] ? product['{{ $attribute['code'] }}'] : product.product['{{ $attribute['code'] }}'] ? product.product['{{ $attribute['code'] }}'] : '__'" class="fs16"></span>
+                                                @break;
+                                        @endswitch
+
+                                        @break
+
+                                @endswitch
+                            </td>
+                        </tr>
+                    @endforeach
+                </template>
+
+                <span v-else-if="isProductListLoaded && products.length == 0" class="col-12">
+                    @{{ __('customer.compare.empty-text') }}
+                </span>
+            </table>
+
+            {!! view_render_event('bagisto.shop.customers.account.compare.view.after') !!}
+        </section>
+    </script>
+
+    <script>
+        Vue.component('compare-product', {
+            template: '#compare-product-template',
+
+            data: function () {
+                return {
+                    'products': [],
+                    'isProductListLoaded': false,
+                    'attributeOptions': JSON.parse(@json($attributeOptionTranslations)),
+                    'isCustomer': '{{ auth()->guard('customer')->user() ? "true" : "false" }}' == "true",
+                }
+            },
+
+            mounted: function () {
+                this.getComparedProducts();
+
+                this.activateSlider();
+            },
+
+            methods: {
+                'getComparedProducts': function () {
+                    let items = '';
+                    let url = `${this.$root.baseUrl}/${this.isCustomer ? 'comparison' : 'detailed-products'}`;
+
+                    let data = {
+                        params: {'data': true}
+                    }
+
+                    if (! this.isCustomer) {
+                        items = this.getStorageValue('compared_product');
+                        items = items ? items.join('&') : '';
+
+                        data = {
+                            params: {
+                                items
+                            }
+                        };
+                    }
+
+                    if (this.isCustomer || (! this.isCustomer && items != "")) {
+                        this.$http.get(url, data)
+                        .then(response => {
+                            this.isProductListLoaded = true;
+
+                            this.products = response.data.products;
+                        })
+                        .catch(error => {
+                            this.isProductListLoaded = true;
+                            console.log(this.__('error.something_went_wrong'));
+                        });
+                    } else {
+                        this.isProductListLoaded = true;
+                    }
+
+                },
+
+                'removeProductCompare': function (productId) {
+                    if (this.isCustomer) {
+                        this.$http.delete(`${this.$root.baseUrl}/comparison?productId=${productId}`)
+                        .then(response => {
+                            if (productId == 'all') {
+                                this.$set(this, 'products', this.products.filter(product => false));
+                            } else {
+                                this.$set(this, 'products', this.products.filter(product => product.id != productId));
+                            }
+
+                            window.showAlert(`alert-${response.data.status}`, response.data.label, response.data.message);
+                        })
+                        .catch(error => {
+                            console.log(this.__('error.something_went_wrong'));
+                        });
+                    } else {
+                        let existingItems = this.getStorageValue('compared_product');
+
+                        if (productId == "all") {
+                            updatedItems = [];
+                            this.$set(this, 'products', []);
+
+                            window.showAlert(
+                                `alert-success`,
+                                this.__('shop.general.alert.success'),
+                                `${this.__('customer.compare.removed-all')}`
+                            );
+                        } else {
+                            updatedItems = existingItems.filter(item => item != productId);
+                            this.$set(this, 'products', this.products.filter(product => product.id != productId));
+
+                            window.showAlert(
+                                `alert-success`,
+                                this.__('shop.general.alert.success'),
+                                `${this.__('customer.compare.removed')}`
+                            );
+                        }
+
+                        this.setStorageValue('compared_product', updatedItems);
+                    }
+
+                    this.$root.headerItemsCount++;
+                },
+
+                'getAttributeOptions': function (productDetails, attributeValues, type) {
+                    var attributeOptions = '__';
+
+                    if (productDetails && attributeValues) {
+                        var attributeItems;
+
+                        if (type == "multiple") {
+                            attributeItems = productDetails[attributeValues].split(',');
+                        } else if (type == "single") {
+                            attributeItems = productDetails[attributeValues];
+                        }
+
+                        attributeOptions = this.attributeOptions.filter(option => {
+                            if (type == "multiple") {
+                                if (attributeItems.indexOf(option.attribute_option_id.toString()) > -1) {
+                                    return true;
+                                }
+                            } else if (type == "single") {
+                                if (attributeItems == option.attribute_option_id.toString()) {
+                                    return true;
+                                }
+                            }
+
+                            return false;
+                        });
+
+                        attributeOptions = attributeOptions.map(option => {
+                            return option.label;
+                        });
+
+                        attributeOptions = attributeOptions.join(', ');
+                    }
+
+                    return attributeOptions;
+                },
+
+                activateSlider: function () {
+                    /* main slider */
+                    const slider = document.querySelector('.compare-products');
+
+                    let startX;
+                    let scrollLeft;
+
+                    /* check for mouse down */
+                    let isMouseDown = false;
+
+                    slider.addEventListener('mousedown', (e) => {
+                        isMouseDown = true;
+                        slider.classList.add('active');
+
+                        startX = e.pageX - slider.offsetLeft;
+                        scrollLeft = slider.scrollLeft;
+                    });
+
+                    slider.addEventListener('mouseleave', () => {
+                        isMouseDown = false;
+                        slider.classList.remove('active');
+                    });
+
+                    slider.addEventListener('mouseup', () => {
+                        isMouseDown = false;
+                        slider.classList.remove('active');
+                    });
+
+                    slider.addEventListener('mousemove', (e) => {
+                        if (! isMouseDown) {
+                            return;
+                        }
+
+                        e.preventDefault();
+
+                        const x = e.pageX - slider.offsetLeft;
+                        const walk = (x - startX) * 3;
+                        slider.scrollLeft = scrollLeft - walk;
+                    });
+                }
+            }
+        });
+    </script>
+@endpush
\ No newline at end of file
diff --git a/resources/themes/velocity/views/guest/compare/index.blade.php b/resources/themes/velocity/views/guest/compare/index.blade.php
new file mode 100644
index 000000000..78b233fee
--- /dev/null
+++ b/resources/themes/velocity/views/guest/compare/index.blade.php
@@ -0,0 +1,11 @@
+@extends('shop::layouts.master')
+
+@include('shop::guest.compare.compare-products')
+
+@section('page_title')
+    {{ __('velocity::app.customer.compare.compare_similar_items') }}
+@endsection
+
+@section('content-wrapper')
+    <compare-product></compare-product>
+@endsection
\ No newline at end of file
diff --git a/resources/themes/velocity/views/guest/wishlist/index.blade.php b/resources/themes/velocity/views/guest/wishlist/index.blade.php
new file mode 100644
index 000000000..4ca8b61e4
--- /dev/null
+++ b/resources/themes/velocity/views/guest/wishlist/index.blade.php
@@ -0,0 +1,13 @@
+@extends('shop::layouts.master')
+
+@section('page_title')
+    {{ __('shop::app.customer.account.wishlist.page-title') }}
+@endsection
+
+@section('content-wrapper')
+    @push('scripts')
+        <script>
+            window.location = '{{ route('customer.wishlist.index') }}';
+        </script>
+    @endpush
+@endsection
\ No newline at end of file
diff --git a/resources/themes/velocity/views/home/advertisements/advertisement-four.blade.php b/resources/themes/velocity/views/home/advertisements/advertisement-four.blade.php
new file mode 100644
index 000000000..690b19f69
--- /dev/null
+++ b/resources/themes/velocity/views/home/advertisements/advertisement-four.blade.php
@@ -0,0 +1,73 @@
+@php
+    $isRendered = false;
+    $advertisementFour = null;
+@endphp
+
+@if ($velocityMetaData && $velocityMetaData->advertisement)
+    @php
+        $advertisement = json_decode($velocityMetaData->advertisement, true);
+        
+        if (isset($advertisement[4]) && is_array($advertisement[4])) {
+            $advertisementFour = array_values(array_filter($advertisement[4]));
+        }
+    @endphp
+
+    @if ($advertisementFour)
+        @php
+            $isRendered = true;
+        @endphp
+
+        <div class="container-fluid advertisement-four-container">
+            <div class="row">
+                @if ( isset($advertisementFour[0]))
+                    <a @if (isset($one)) href="{{ $one }}" @endif class="col-lg-4 col-12 no-padding" aria-label="Advertisement">
+                        <img class="col-12 lazyload" data-src="{{ asset('/storage/' . $advertisementFour[0]) }}" alt="" />
+                    </a>
+                @endif
+
+                <div class="col-lg-4 col-12 offers-ct-panel">
+                    @if ( isset($advertisementFour[1]))
+                        <a @if (isset($two)) href="{{ $two }}" @endif class="row col-12 remove-padding-margin" aria-label="Advertisement">
+                            <img class="col-12 offers-ct-top lazyload" data-src="{{ asset('/storage/' . $advertisementFour[1]) }}" alt="" />
+                        </a>
+                    @endif
+
+                    @if ( isset($advertisementFour[2]))
+                        <a @if (isset($three)) href="{{ $three }}" @endif class="row col-12 remove-padding-margin" aria-label="Advertisement">
+                            <img class="col-12 offers-ct-bottom lazyload" data-src="{{ asset('/storage/' . $advertisementFour[2]) }}" alt="" />
+                        </a>
+                    @endif
+                </div>
+
+                @if ( isset($advertisementFour[3]))
+                    <a @if (isset($four)) href="{{ $four }}" @endif class="col-lg-4 col-12 no-padding" aria-label="Advertisement">
+                        <img class="col-12 lazyload" data-src="{{ asset('/storage/' . $advertisementFour[3]) }}" alt="" />
+                    </a>
+                @endif
+            </div>
+        </div>
+    @endif
+@endif
+
+@if (! $isRendered)
+    <div class="container-fluid advertisement-four-container">
+        <div class="row">
+            <a @if (isset($one)) href="{{ $one }}" @endif class="col-lg-4 col-12 no-padding" aria-label="Advertisement">
+                <img class="col-12 lazyload" data-src="{{ asset('/themes/velocity/assets/images/big-sale-banner.webp') }}" alt="" />
+            </a>
+
+            <div class="col-lg-4 col-12 offers-ct-panel">
+                <a @if (isset($two)) href="{{ $two }}" @endif class="row col-12 remove-padding-margin" aria-label="Advertisement">
+                    <img class="col-12 offers-ct-top lazyload" data-src="{{ asset('/themes/velocity/assets/images/seasons.webp') }}" alt="" />
+                </a>
+                <a @if (isset($three)) href="{{ $three }}" @endif class="row col-12 remove-padding-margin" aria-label="Advertisement">
+                    <img class="col-12 offers-ct-bottom lazyload" data-src="{{ asset('/themes/velocity/assets/images/deals.webp') }}" alt="" />
+                </a>
+            </div>
+
+            <a @if (isset($four)) href="{{ $four }}" @endif class="col-lg-4 col-12 no-padding" aria-label="Advertisement">
+                <img class="col-12 lazyload" data-src="{{ asset('/themes/velocity/assets/images/kids.webp') }}" alt="" />
+            </a>
+        </div>
+    </div>
+@endif
\ No newline at end of file
diff --git a/resources/themes/velocity/views/home/advertisements/advertisement-one.blade.php b/resources/themes/velocity/views/home/advertisements/advertisement-one.blade.php
new file mode 100644
index 000000000..ee81fb7ab
--- /dev/null
+++ b/resources/themes/velocity/views/home/advertisements/advertisement-one.blade.php
@@ -0,0 +1,73 @@
+@php
+    $isRendered = false;
+    $advertisementOne = null;
+@endphp
+
+@if ($velocityMetaData && $velocityMetaData->advertisement)
+    @php
+        $advertisement = json_decode($velocityMetaData->advertisement, true);
+        if (isset($advertisement[1])) {
+            $advertisementOne = $advertisement[1];
+        }
+    @endphp
+
+    @if ($advertisementOne)
+        @php
+            $isRendered = true;
+        @endphp
+
+        <div class="container-fluid advertisement-one">
+            <div class="row">
+            <div
+                class="col offers-lt-panel bg-image"
+                style="background-image: url('{{ asset('/storage/' . $advertisementOne['image_1']) }}')">
+            </div>
+
+                <div class="col offers-ct-panel">
+
+                    <div class="row pb10">
+                        <div
+                            class="col-12 offers-ct-top"
+                            style="background-image: url('{{ asset('/storage/' . $advertisementOne['image_2']) }}')">
+                        </div>
+                    </div>
+
+                    <div class="row">
+                        <div
+                            class="col-12 offers-ct-bottom"
+                            style="background-image: url('{{ asset('/storage/' . $advertisementOne['image_3']) }}')">
+                        </div>
+                    </div>
+
+                </div>
+
+                <div
+                    class="col offers-rt-panel"
+                    style="background-image: url('{{ asset('/storage/' . $advertisementOne['image_4']) }}')">
+                </div>
+            </div>
+        </div>
+    @endif
+@endif
+
+@if (! $isRendered)
+    <div class="container-fluid advertisement-one">
+        <div class="row">
+            <div class="col offers-lt-panel bg-image"></div>
+
+            <div class="col offers-ct-panel">
+
+                <div class="row pb10">
+                    <div class="col-12 offers-ct-top"></div>
+                </div>
+
+                <div class="row">
+                    <div class="col-12 offers-ct-bottom"></div>
+                </div>
+
+            </div>
+
+            <div class="col offers-rt-panel"></div>
+        </div>
+    </div>
+@endif
\ No newline at end of file
diff --git a/resources/themes/velocity/views/home/advertisements/advertisement-three.blade.php b/resources/themes/velocity/views/home/advertisements/advertisement-three.blade.php
new file mode 100644
index 000000000..964ad2989
--- /dev/null
+++ b/resources/themes/velocity/views/home/advertisements/advertisement-three.blade.php
@@ -0,0 +1,62 @@
+@php
+    $isRendered = false;
+    $advertisementThree = null;
+@endphp
+
+@if ($velocityMetaData && $velocityMetaData->advertisement)
+    @php
+        $advertisement = json_decode($velocityMetaData->advertisement, true);
+        
+        if (isset($advertisement[3]) && is_array($advertisement[3])) {
+            $advertisementThree = array_values(array_filter($advertisement[3]));
+        }
+    @endphp
+
+    @if ($advertisementThree)
+        @php
+            $isRendered = true;
+        @endphp
+
+        <div class="container-fluid advertisement-three-container">
+            <div class="row">
+                @if ( isset($advertisementThree[0]))
+                    <a @if (isset($one)) href="{{ $one }}" @endif class="col-lg-6 col-md-12 no-padding">
+                        <img data-src="{{ asset('/storage/' . $advertisementThree[0]) }}" class="full-width lazyload" alt="" />
+                    </a>
+                @endif
+
+                <div class="col-lg-6 col-md-12 second-panel">
+                    @if ( isset($advertisementThree[1]))
+                        <a @if (isset($two)) href="{{ $two }}" @endif class="row top-container">
+                            <img data-src="{{ asset('/storage/' . $advertisementThree[1]) }}" class="col-12 pr0 lazyload" alt="" />
+                        </a>
+                    @endif
+                    @if ( isset($advertisementThree[2]))
+                        <a @if (isset($three)) href="{{ $three }}" @endif class="row bottom-container">
+                            <img data-src="{{ asset('/storage/' . $advertisementThree[2]) }}" class="col-12 pr0 lazyload" alt="" />
+                        </a>
+                    @endif
+                </div>
+            </div>
+        </div>
+    @endif
+@endif
+
+@if (! $isRendered)
+    <div class="container-fluid advertisement-three-container">
+        <div class="row">
+            <a @if (isset($one)) href="{{ $one }}" @endif class="col-lg-6 col-md-12 no-padding">
+                <img data-src="{{ asset('/themes/velocity/assets/images/headphones.webp') }}" class="full-width lazyload" alt="" />
+            </a>
+
+            <div class="col-lg-6 col-md-12 second-panel">
+                <a @if (isset($two)) href="{{ $two }}" @endif class="row top-container">
+                    <img data-src="{{ asset('/themes/velocity/assets/images/watch.webp') }}" class="col-12 pr0 lazyload" alt="" />
+                </a>
+                <a @if (isset($three)) href="{{ $three }}" @endif class="row bottom-container">
+                    <img data-src="{{ asset('/themes/velocity/assets/images/kids-2.webp') }}" class="col-12 pr0 lazyload" alt="" />
+                </a>
+            </div>
+        </div>
+    </div>
+@endif
\ No newline at end of file
diff --git a/resources/themes/velocity/views/home/advertisements/advertisement-two.blade.php b/resources/themes/velocity/views/home/advertisements/advertisement-two.blade.php
new file mode 100644
index 000000000..fbb88d695
--- /dev/null
+++ b/resources/themes/velocity/views/home/advertisements/advertisement-two.blade.php
@@ -0,0 +1,50 @@
+@php
+    $isRendered = false;
+    $advertisementTwo = null;
+@endphp
+
+@if ($velocityMetaData && $velocityMetaData->advertisement)
+    @php
+        $advertisement = json_decode($velocityMetaData->advertisement, true);
+        
+        if (isset($advertisement[2]) && is_array($advertisement[2])) {
+            $advertisementTwo = array_values(array_filter($advertisement[2]));
+        }
+    @endphp
+
+    @if ($advertisementTwo)
+        @php
+            $isRendered = true;
+        @endphp
+
+        <div class="container-fluid advertisement-two-container">
+            <div class="row">
+                @if ( isset($advertisementTwo[0]))
+                    <a class="col-lg-9 col-md-12 no-padding">
+                        <img data-src="{{ asset('/storage/' . $advertisementTwo[0]) }}" class="lazyload" alt="" />
+                    </a>
+                @endif
+                
+                @if ( isset($advertisementTwo[1]))
+                    <a class="col-lg-3 col-md-12 pr0">
+                        <img data-src="{{ asset('/storage/' . $advertisementTwo[1]) }}" class="lazyload" alt="" />
+                    </a>
+                @endif
+            </div>
+        </div>
+    @endif
+@endif
+
+@if (! $isRendered)
+    <div class="container-fluid advertisement-two-container">
+        <div class="row">
+            <a class="col-lg-9 col-md-12 no-padding">
+                <img data-src="{{ asset('/themes/velocity/assets/images/toster.webp') }}" class="lazyload" alt="" />
+            </a>
+
+            <a class="col-lg-3 col-md-12 pr0">
+                <img data-src="{{ asset('/themes/velocity/assets/images/trimmer.webp') }}" class="lazyload" alt="" />
+            </a>
+        </div>
+    </div>
+@endif
\ No newline at end of file
diff --git a/resources/themes/velocity/views/home/category-with-custom-option.blade.php b/resources/themes/velocity/views/home/category-with-custom-option.blade.php
new file mode 100644
index 000000000..71f8e7cb2
--- /dev/null
+++ b/resources/themes/velocity/views/home/category-with-custom-option.blade.php
@@ -0,0 +1,166 @@
+@php
+    $categoryRepository = app('Webkul\Category\Repositories\CategoryRepository');
+
+    $category[0] = $categoryRepository->findByPath($category[0]);
+    $category[1] = $categoryRepository->findByPath($category[1]);
+    $category[2] = $categoryRepository->findByPath($category[2]);
+    $category[3] = $categoryRepository->findByPath($category[3]);
+@endphp
+
+<div class="container-fluid category-with-custom-options">
+    <div class="row">
+        <div class="col pr15">
+            <img data-src="{{ asset ('/storage/' . $category['2']->image) }}" class="lazyload" alt="" />
+        </div>
+
+        <div class="col">
+            <div class="card-arrow-container">
+                <div class="card-arrow card-arrow-rt"></div>
+            </div>
+
+            <div class="categories-collection">
+                <div class="category-text-content">
+                    <h2 class="text-uppercase">
+                        <a href="{{ $category[0]->slug }}" class="remove-decoration normal-white-text">
+                            {{ $category[0]->name }}
+                        </a>
+                    </h2>
+                    <ul type="none" class="fs14">
+                        @foreach ($category[0]->children as $subCategory)
+                            <li>
+                                <a href="{{ $category[0]->slug . '/' . $subCategory->slug }}" class="remove-decoration normal-white-text">
+                                    {{ $subCategory->name }}
+                                </a>
+                            </li>
+                        @endforeach
+                    </ul>
+                </div>
+            </div>
+        </div>
+
+        <div class="col pr15">
+            <img data-src="{{ asset ('/storage/' . $category['0']->image) }}" class="lazyload" alt=""/>
+        </div>
+
+        <div class="col">
+            <div class="card-arrow-container">
+                <div class="card-arrow card-arrow-bt"></div>
+            </div>
+
+            <div class="categories-collection">
+                <div class="category-text-content">
+                    <h2 class="text-uppercase">
+                        <a href="{{ $category[1]->slug }}" class="remove-decoration normal-white-text">
+                            {{ $category[1]->name }}
+                        </a>
+                    </h2>
+                    <ul type="none" class="fs14">
+                        @foreach ($category[1]->children as $subCategory)
+                            <li>
+                                <a href="{{ $category[1]->slug . '/' . $subCategory->slug }}" class="remove-decoration normal-white-text">
+                                    {{ $subCategory->name }}
+                                </a>
+                            </li>
+                        @endforeach
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col mr15">
+            <div class="card-arrow-container">
+                <div class="card-arrow card-arrow-tp"></div>
+            </div>
+
+            <div class="categories-collection">
+                <div class="category-text-content">
+                    <h2 class="text-uppercase">
+                        <a href="{{ $category[2]->slug }}" class="remove-decoration normal-white-text">
+                            {{ $category[2]->name }}
+                        </a>
+                    </h2>
+                    <ul type="none" class="fs14">
+                        @foreach ($category[2]->children as $subCategory)
+                            <li>
+                                <a href="{{ $category[2]->slug . '/' . $subCategory->slug }}" class="remove-decoration normal-white-text">
+                                    {{ $subCategory->name }}
+                                </a>
+                            </li>
+                        @endforeach
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div class="col mt15">
+            <img data-src="{{ asset ('/storage/' . $category['3']->image) }}" class="lazyload" alt="" />
+        </div>
+
+        <div class="col mt15 mr15">
+            <div class="card-arrow-container">
+                <div class="card-arrow card-arrow-lt"></div>
+            </div>
+
+            <div class="categories-collection">
+                <div class="category-text-content">
+                    <h2 class="text-uppercase">
+                        <a href="{{ $category[3]->slug }}" class="remove-decoration normal-white-text">
+                            {{ $category[3]->name }}
+                        </a>
+                    </h2>
+                    <ul type="none" class="fs14">
+                        @foreach ($category[3]->children as $subCategory)
+                            <li>
+                                <a href="{{ $category[3]->slug . '/' . $subCategory->slug }}" class="remove-decoration normal-white-text">
+                                    {{ $subCategory->name }}
+                                </a>
+                            </li>
+                        @endforeach
+                    </ul>
+                </div>
+            </div>
+        </div>
+
+        <div class="col">
+            <img data-src="{{ asset ('/storage/' . $category['1']->image) }}" class="lazyload" alt="" />
+        </div>
+
+    </div>
+</div>
+
+<div class="container-fluid category-with-custom-options vc-small-screen">
+    @foreach ($category as $categoryItem)
+        <div class="smart-category-container">
+            <div class="col-12">
+                <img data-src="{{ asset ('/storage/' . $categoryItem->image) }}" class="lazyload" alt="" />
+            </div>
+
+            <div class="col-12">
+                <div class="card-arrow-container">
+                    <div class="card-arrow card-arrow-tp"></div>
+                </div>
+
+                <div class="categories-collection">
+                    <div class="category-text-content">
+                        <h2 class="text-uppercase">
+                            <a href="{{ $categoryItem->slug }}" class="remove-decoration normal-white-text">
+                                {{ $categoryItem->name }}
+                            </a>
+                        </h2>
+                        <ul type="none" class="fs14">
+                            @foreach ($categoryItem->children as $subCategory)
+                                <li>
+                                    <a href="{{ $categoryItem->slug . '/' . $subCategory->slug }}" class="remove-decoration normal-white-text">
+                                        {{ $subCategory->name }}
+                                    </a>
+                                </li>
+                            @endforeach
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    @endforeach
+</div>
+
diff --git a/resources/themes/velocity/views/home/category.blade.php b/resources/themes/velocity/views/home/category.blade.php
new file mode 100644
index 000000000..760a46bad
--- /dev/null
+++ b/resources/themes/velocity/views/home/category.blade.php
@@ -0,0 +1,5 @@
+<product-collections
+    product-title="{{ __('shop::app.home.featured-products') }}"
+    product-route="{{ route('velocity.category.details', ['category-slug' => $category]) }}"
+    locale-direction="{{ core()->getCurrentLocale()->direction == 'rtl' ? 'rtl' : 'ltr' }}">
+</product-collections>
\ No newline at end of file
diff --git a/resources/themes/velocity/views/home/customer-reviews.blade.php b/resources/themes/velocity/views/home/customer-reviews.blade.php
new file mode 100644
index 000000000..954cb8d16
--- /dev/null
+++ b/resources/themes/velocity/views/home/customer-reviews.blade.php
@@ -0,0 +1,82 @@
+@php
+    $reviews = app('Webkul\Velocity\Helpers\Helper')->getShopRecentReviews(4);
+    $reviewCount = count($reviews);
+@endphp
+
+<div class="container-fluid reviews-container">
+    @if ($reviewCount)
+        <card-list-header
+            heading="{{ __('velocity::app.home.customer-reviews') }}"
+        ></card-list-header>
+
+        <div class="row">
+            @foreach ($reviews as $key => $review)
+                <div class="col-lg-3 col-md-12 review-wrapper">
+                    <div class="card no-padding">
+                        <div class="review-info">
+                            <div class="customer-info">
+                                <div class="align-vertical-top">
+                                    <span class="customer-name fs20 display-inbl">
+                                        {{ strtoupper(substr( $review['name'], 0, 1 )) }}
+                                    </span>
+                                </div>
+
+                                <div>
+                                    <h3 class="fs20 fw6 no-margin display-block">
+                                        {{ $review['name'] }}
+                                    </h3>
+
+                                    <div class="product-info fs16">
+                                        <span>{{ __('velocity::app.products.reviewed') }}- <a class="remove-decoration link-color" href="{{ route('shop.productOrCategory.index', $review->product->url_key) }}">{{$review->product->name}}</a></span>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="star-ratings fs16">
+                                <star-ratings :ratings="{{ $review['rating'] }}"></star-ratings>
+                            </div>
+
+                            <div class="review-description">
+                                <p class="review-content fs16">{{ $review['comment'] }}</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            @endforeach
+        </div>
+    @endif
+</div>
+
+@push('scripts')
+    <script type="text/javascript">
+        (() => {
+            $('.carousel-showmanymoveone .item').each(() => {
+                var itemToClone = $(this);
+                var i;
+                for (i = 1; i < 4; i++ ) {
+                    itemToClone = itemToClone.next();
+
+                    // wrap around if at end of item collection
+                    if (!itemToClone.length) {
+                        itemToClone = $(this).siblings(':first');
+                    }
+
+                    // grab item, clone, add marker class, add to collection
+                    itemToClone.children(':first-child').clone()
+                        .addClass("cloneditem-"+(i))
+                        .appendTo($(this));
+                }
+            });
+
+            $(document).on('click', '.rango-arrow-left', () => {
+                $('.prev-slider').click();
+            });
+
+            $(document).on('click', '.rango-arrow-right', () => {
+                $('.next-slider').click();
+            });
+
+        })();
+    </script>
+
+@endpush
\ No newline at end of file
diff --git a/resources/themes/velocity/views/home/featured-products.blade.php b/resources/themes/velocity/views/home/featured-products.blade.php
new file mode 100644
index 000000000..d7a1cd137
--- /dev/null
+++ b/resources/themes/velocity/views/home/featured-products.blade.php
@@ -0,0 +1,13 @@
+@php
+    $count = core()->getConfigData('catalog.products.homepage.no_of_featured_product_homepage');
+    $count = $count ? $count : 10;
+    $direction = core()->getCurrentLocale()->direction == 'rtl' ? 'rtl' : 'ltr';
+@endphp
+
+<product-collections
+    product-id="fearured-products-carousel"
+    product-title="{{ __('shop::app.home.featured-products') }}"
+    product-route="{{ route('velocity.category.details', ['category-slug' => 'featured-products', 'count' => $count]) }}"
+    locale-direction="{{ $direction }}"
+    count="{{ (int) $count }}">
+</product-collections>
\ No newline at end of file
diff --git a/resources/themes/velocity/views/home/helper/product-large-cart-view.blade.php b/resources/themes/velocity/views/home/helper/product-large-cart-view.blade.php
new file mode 100644
index 000000000..0da129418
--- /dev/null
+++ b/resources/themes/velocity/views/home/helper/product-large-cart-view.blade.php
@@ -0,0 +1,67 @@
+@foreach ($products as $product)
+    <div class="col-2 lg-card-container">
+        <div class="card padding-10">
+
+            {{-- sale-button --}}
+            @if ($product['actual-price'] > $product['selling-price'])
+                <button type="button" class="sale-btn card-sale-btn fw6">Sale</button>
+            @endif
+
+            {{-- product image --}}
+            <div class="card-product-image-container">
+                <div
+                    class="background-image-group"
+                    style="background-image: url({{ $product['product-image'] }} );">
+                </div>
+            </div>
+
+            <div class="card-bottom-container">
+
+                <div class="card-body no-padding">
+                    <span class="fs16 hide-text">{{ $product['productName'] }}</span>
+                    <div class="fs18 card-price-container">
+
+                        <span class="card-current-price fw6 mr10">
+                            {{ $product['currency-icon'] }}{{ $product['selling-price'] }}
+                        </span>
+
+                        @if ($product['actual-price'] > $product['selling-price'])
+                            <span class="card-actual-price mr10">
+                                {{ $product['currency-icon'] }}{{ $product['actual-price'] }}
+                            </span>
+
+                            <span class="card-discount">
+                                {{ (($product['actual-price'] - $product['selling-price']) * 100) / $product['actual-price'] }}%
+                            </span>
+                        @endif
+                    </div>
+                </div>
+
+                @if ($product['review-count'])
+                    <div class="star-rating mt10">
+                        <span class="rango-star-fill"></span>
+                        <span class="rango-star-fill"></span>
+                        <span class="rango-star-fill"></span>
+                        <span class="rango-star"></span>
+                        <span class="rango-star"></span>
+                        <span>{{ $product['review-count'] }} reviews</span>
+                    </div>
+                @else
+                    <div class="mt10">
+                        <span class="fs14">Be the first to write a review</span>
+                    </div>
+                @endif
+
+                <div class="button-row mt10 card-bottom-container">
+                    <button class="btn btn-add-to-cart">
+                        <span class="rango-cart-1 fs20"></span>
+                        <span class="fs14 align-vertical-top fw6">ADD TO CART</span>
+                    </button>
+                    {{-- <span class="rango-exchange fs24"></span> --}}
+                    <span class="rango-heart"></span>
+                </div>
+
+            </div>
+        </div>
+    </div>
+@endforeach
\ No newline at end of file
diff --git a/resources/themes/velocity/views/home/helper/product-small-cart-view.blade.php b/resources/themes/velocity/views/home/helper/product-small-cart-view.blade.php
new file mode 100644
index 000000000..6212c2895
--- /dev/null
+++ b/resources/themes/velocity/views/home/helper/product-small-cart-view.blade.php
@@ -0,0 +1,28 @@
+
+@foreach ($products as $product)
+    <div class="small-card-container">
+
+        <div class="col-4 product-image-container mr15">
+            <div class="product-image" style="background-image: url({{ $product['product-image'] }})"></div>
+        </div>
+
+        <div class="col-8 no-padding card-body">
+            <div class="no-padding">
+                <span class="fs16">{{ $product['productName'] }}</span>
+
+                <span class="fs18 card-current-price fw6">
+                    {{ $product['currency-icon'] }}{{ $product['selling-price'] }}
+                </span>
+
+                <div class="star-rating mt10">
+                    <span class="rango-star-fill"></span>
+                    <span class="rango-star-fill"></span>
+                    <span class="rango-star-fill"></span>
+                    <span class="rango-star"></span>
+                    <span class="rango-star"></span>
+                </div>
+            </div>
+
+        </div>
+    </div>
+@endforeach
diff --git a/resources/themes/velocity/views/home/hot-categories.blade.php b/resources/themes/velocity/views/home/hot-categories.blade.php
new file mode 100644
index 000000000..79de54d30
--- /dev/null
+++ b/resources/themes/velocity/views/home/hot-categories.blade.php
@@ -0,0 +1,10 @@
+<div class="container-fluid hot-categories-container">
+    <card-list-header heading="{{ __('velocity::app.home.hot-categories') }}">
+    </card-list-header>
+
+    <div class="row">
+        @foreach ($category as $slug)
+            <hot-category slug="{{ $slug }}"></hot-category>
+        @endforeach
+    </div>
+</div>
\ No newline at end of file
diff --git a/resources/themes/velocity/views/home/index.blade.php b/resources/themes/velocity/views/home/index.blade.php
new file mode 100644
index 000000000..fda9c1b70
--- /dev/null
+++ b/resources/themes/velocity/views/home/index.blade.php
@@ -0,0 +1,74 @@
+@extends('shop::layouts.master')
+
+@inject ('productRatingHelper', 'Webkul\Product\Helpers\Review')
+
+@php
+    $channel = core()->getCurrentChannel();
+
+    $homeSEO = $channel->home_seo;
+
+    if (isset($homeSEO)) {
+        $homeSEO = json_decode($channel->home_seo);
+
+        $metaTitle = $homeSEO->meta_title;
+
+        $metaDescription = $homeSEO->meta_description;
+
+        $metaKeywords = $homeSEO->meta_keywords;
+    }
+@endphp
+
+@section('page_title')
+    {{ isset($metaTitle) ? $metaTitle : "" }}
+@endsection
+
+@section('head')
+
+    @if (isset($homeSEO))
+        @isset($metaTitle)
+            <meta name="title" content="{{ $metaTitle }}" />
+        @endisset
+
+        @isset($metaDescription)
+            <meta name="description" content="{{ $metaDescription }}" />
+        @endisset
+
+        @isset($metaKeywords)
+            <meta name="keywords" content="{{ $metaKeywords }}" />
+        @endisset
+    @endif
+@endsection
+
+@push('css')
+    <style type="text/css">
+        .product-price span:first-child, .product-price span:last-child {
+            font-size: 18px;
+            font-weight: 600;
+        }
+    </style>
+@endpush
+
+@section('content-wrapper')
+    @include('shop::home.slider')
+@endsection
+
+@section('full-content-wrapper')
+
+    <div class="full-content-wrapper">
+        {!! view_render_event('bagisto.shop.home.content.before') !!}
+
+            @if ($velocityMetaData)
+                {!! DbView::make($velocityMetaData)->field('home_page_content')->render() !!}
+            @else
+                @include('shop::home.advertisements.advertisement-four')
+                @include('shop::home.featured-products')
+                @include('shop::home.advertisements.advertisement-three')
+                @include('shop::home.new-products')
+                @include('shop::home.advertisements.advertisement-two')
+            @endif
+
+        {{ view_render_event('bagisto.shop.home.content.after') }}
+    </div>
+
+@endsection
+
diff --git a/resources/themes/velocity/views/home/new-products.blade.php b/resources/themes/velocity/views/home/new-products.blade.php
new file mode 100644
index 000000000..c90525b94
--- /dev/null
+++ b/resources/themes/velocity/views/home/new-products.blade.php
@@ -0,0 +1,20 @@
+@php
+    $count = core()->getConfigData('catalog.products.homepage.no_of_new_product_homepage');
+    $count = $count ? $count : 10;
+    $direction = core()->getCurrentLocale()->direction == 'rtl' ? 'rtl' : 'ltr';
+@endphp
+
+{!! view_render_event('bagisto.shop.new-products.before') !!}
+
+<product-collections
+    count="{{ (int) $count }}"
+    product-id="new-products-carousel"
+    product-title="{{ __('shop::app.home.new-products') }}"
+    product-route="{{ route('velocity.category.details', ['category-slug' => 'new-products', 'count' => $count]) }}"
+    locale-direction="{{ $direction }}"
+    show-recently-viewed="{{ (Boolean) $showRecentlyViewed }}"
+    recently-viewed-title="{{ __('velocity::app.products.recently-viewed') }}"
+    no-data-text="{{ __('velocity::app.products.not-available') }}">
+</product-collections>
+
+{!! view_render_event('bagisto.shop.new-products.after') !!}
diff --git a/resources/themes/velocity/views/home/popular-categories.blade.php b/resources/themes/velocity/views/home/popular-categories.blade.php
new file mode 100644
index 000000000..82b5feb91
--- /dev/null
+++ b/resources/themes/velocity/views/home/popular-categories.blade.php
@@ -0,0 +1,10 @@
+<div class="container-fluid popular-categories-container">
+    <card-list-header heading="{{ __('velocity::app.home.popular-categories') }}">
+    </card-list-header>
+
+    <div class="row">
+        @foreach ($category as $slug)
+            <popular-category slug="{{ $slug }}"></popular-category>
+        @endforeach
+    </div>
+</div>
diff --git a/resources/themes/velocity/views/home/product-policy.blade.php b/resources/themes/velocity/views/home/product-policy.blade.php
new file mode 100644
index 000000000..d5bab81b0
--- /dev/null
+++ b/resources/themes/velocity/views/home/product-policy.blade.php
@@ -0,0 +1,5 @@
+<div class="container-fluid product-policy-container no-padding">
+    <div class="row">
+        {!! $velocityMetaData->product_policy !!}
+    </div>
+</div>
diff --git a/resources/themes/velocity/views/home/slider.blade.php b/resources/themes/velocity/views/home/slider.blade.php
new file mode 100644
index 000000000..bad23e2cd
--- /dev/null
+++ b/resources/themes/velocity/views/home/slider.blade.php
@@ -0,0 +1,69 @@
+@php
+    $direction = core()->getCurrentLocale()->direction;
+@endphp
+
+@if ($velocityMetaData && $velocityMetaData->slider)
+    <slider-component direction="{{ $direction }}"></slider-component>
+@endif
+
+@push('scripts')
+    <script type="text/x-template" id="slider-template">
+        <div class="slides-container {{ $direction }}">
+            <carousel-component
+                loop="true"
+                timeout="5000"
+                autoplay="true"
+                slides-per-page="1"
+                navigation-enabled="hide"
+                :locale-direction="direction"
+                :slides-count="{{ ! empty($sliderData) ? sizeof($sliderData) : 1 }}">
+
+                @if (! empty($sliderData))
+                    @foreach ($sliderData as $index => $slider)
+
+                    @php
+                        $textContent = str_replace("\r\n", '', $slider['content']);
+                    @endphp
+                        <slide slot="slide-{{ $index }}" title=" ">
+                            <a @if($slider['slider_path']) href="{{ $slider['slider_path'] }}" @endif>
+                                <img
+                                    class="col-12 no-padding banner-icon"
+                                    src="{{ url()->to('/') . '/storage/' . $slider['path'] }}"
+                                    alt="" width="1298" height="450" />
+
+                                <div class="show-content" v-html="'{{ $textContent }}'">
+                                </div>
+                            </a>
+                        </slide>
+
+                    @endforeach
+                @else
+                    <slide slot="slide-0">
+                        <img
+                            loading="lazy"
+                            class="col-12 no-padding banner-icon"
+                            src="{{ asset('/themes/velocity/assets/images/banner.webp') }}"
+                            alt=""/>
+                    </slide>
+                @endif
+
+            </carousel-component>
+        </div>
+    </script>
+
+    <script type='text/javascript'>
+        (() => {
+            Vue.component('slider-component', {
+                template: '#slider-template',
+                props: ['direction'],
+
+                mounted: function () {
+                    let banners = this.$el.querySelectorAll('img');
+                    banners.forEach(banner => {
+                        banner.style.display = 'block';
+                    });
+                }
+            })
+        })()
+    </script>
+@endpush
\ No newline at end of file
diff --git a/resources/themes/velocity/views/layouts/footer/copy-right.blade.php b/resources/themes/velocity/views/layouts/footer/copy-right.blade.php
new file mode 100644
index 000000000..432017c80
--- /dev/null
+++ b/resources/themes/velocity/views/layouts/footer/copy-right.blade.php
@@ -0,0 +1,9 @@
+<div class="footer-copy-right">
+    <span>
+        @if (core()->getConfigData('general.content.footer.footer_content'))
+            {!! core()->getConfigData('general.content.footer.footer_content') !!}
+        @else
+            {!! trans('admin::app.footer.copy-right') !!}
+        @endif
+    </span>
+</div>
diff --git a/resources/themes/velocity/views/layouts/footer/footer-links.blade.php b/resources/themes/velocity/views/layouts/footer/footer-links.blade.php
new file mode 100644
index 000000000..0dcdd540d
--- /dev/null
+++ b/resources/themes/velocity/views/layouts/footer/footer-links.blade.php
@@ -0,0 +1,6 @@
+<div class="row footer-statics col-12 no-margin">
+    @include('velocity::layouts.footer.footer-links.footer-left')
+    @include('velocity::layouts.footer.footer-links.footer-middle')
+    @include('velocity::layouts.footer.footer-links.footer-right')
+</div>
+
diff --git a/resources/themes/velocity/views/layouts/footer/footer-links/footer-left.blade.php b/resources/themes/velocity/views/layouts/footer/footer-links/footer-left.blade.php
new file mode 100644
index 000000000..213b15a26
--- /dev/null
+++ b/resources/themes/velocity/views/layouts/footer/footer-links/footer-left.blade.php
@@ -0,0 +1,22 @@
+<div class="col-lg-4 col-md-12 col-sm-12 software-description">
+    <div class="logo">
+        <a href="{{ route('shop.home.index') }}" aria-label="Logo">
+            @if ($logo = core()->getCurrentChannel()->logo_url)
+                <img
+                    src="{{ $logo }}"
+                    class="logo full-img" alt="" width="200" height="50" />
+            @else
+                <img
+                    src="{{ asset('themes/velocity/assets/images/static/logo-text-white.png') }}"
+                    class="logo full-img" alt="" width="200" height="50" />
+            @endif
+
+        </a>
+    </div>
+
+    @if ($velocityMetaData)
+        {!! $velocityMetaData->footer_left_content !!}
+    @else
+        {!! __('velocity::app.admin.meta-data.footer-left-raw-content') !!}
+    @endif
+</div>
\ No newline at end of file
diff --git a/resources/themes/velocity/views/layouts/footer/footer-links/footer-middle.blade.php b/resources/themes/velocity/views/layouts/footer/footer-links/footer-middle.blade.php
new file mode 100644
index 000000000..1fa2db348
--- /dev/null
+++ b/resources/themes/velocity/views/layouts/footer/footer-links/footer-middle.blade.php
@@ -0,0 +1,57 @@
+<div class="col-lg-4 col-md-12 col-sm-12 footer-ct-content">
+	<div class="row">
+
+        @if ($velocityMetaData)
+            {!! DbView::make($velocityMetaData)->field('footer_middle_content')->render() !!}
+        @else
+            <div class="col-lg-6 col-md-12 col-sm-12 no-padding">
+                <ul type="none">
+                    <li>
+                        <a href="https://webkul.com/about-us/company-profile/">
+                            {{ __('velocity::app.admin.meta-data.footer-middle.about-us') }}
+                        </a>
+                    </li>
+                    <li>
+                        <a href="https://webkul.com/about-us/company-profile/">
+                            {{ __('velocity::app.admin.meta-data.footer-middle.customer-service') }}
+                        </a>
+                    </li>
+                    <li>
+                        <a href="https://webkul.com/about-us/company-profile/">
+                            {{ __('velocity::app.admin.meta-data.footer-middle.whats-new') }}
+                        </a>
+                    </li>
+                    <li>
+                        <a href="https://webkul.com/about-us/company-profile/">
+                            {{ __('velocity::app.admin.meta-data.footer-middle.contact-us') }}
+                        </a>
+                    </li>
+                </ul>
+            </div>
+            <div class="col-lg-6 col-md-12 col-sm-12 no-padding">
+                <ul type="none">
+                    <li>
+                        <a href="https://webkul.com/about-us/company-profile/">
+                        {{ __('velocity::app.admin.meta-data.footer-middle.order-and-returns') }}
+                        </a>
+                    </li>
+                    <li>
+                        <a href="https://webkul.com/about-us/company-profile/">
+                            {{ __('velocity::app.admin.meta-data.footer-middle.payment-policy') }}
+                        </a>
+                    </li>
+                    <li>
+                        <a href="https://webkul.com/about-us/company-profile/">
+                            {{ __('velocity::app.admin.meta-data.footer-middle.shipping-policy') }}
+                        </a>
+                    </li>
+                    <li>
+                        <a href="https://webkul.com/about-us/company-profile/">
+                            {{ __('velocity::app.admin.meta-data.footer-middle.privacy-and-cookies-policy') }}
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        @endif
+	</div>
+</div>
\ No newline at end of file
diff --git a/resources/themes/velocity/views/layouts/footer/footer-links/footer-right.blade.php b/resources/themes/velocity/views/layouts/footer/footer-links/footer-right.blade.php
new file mode 100644
index 000000000..4c81267b6
--- /dev/null
+++ b/resources/themes/velocity/views/layouts/footer/footer-links/footer-right.blade.php
@@ -0,0 +1,29 @@
+<div class="col-lg-4 col-md-12 col-sm-12 footer-rt-content">
+    <div class="row">
+        <div class="mb5 col-12">
+            <h3>{{ __('velocity::app.home.payment-methods') }}</h3>
+        </div>
+
+        <div class="payment-methods col-12">
+            @foreach(\Webkul\Payment\Facades\Payment::getPaymentMethods() as $method)
+                <div class="method-sticker">
+                    {{ $method['method_title'] }}
+                </div>
+            @endforeach
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="mb5 col-12">
+            <h3>{{ __('velocity::app.home.shipping-methods') }}</h3>
+        </div>
+
+        <div class="shipping-methods col-12">
+            @foreach(\Webkul\Shipping\Facades\Shipping::getShippingMethods() as $method)
+                <div class="method-sticker">
+                    {{ $method['method_title'] }}
+                </div>
+            @endforeach
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/resources/themes/velocity/views/layouts/footer/footer-logo.blade.php b/resources/themes/velocity/views/layouts/footer/footer-logo.blade.php
new file mode 100644
index 000000000..dbac17c65
--- /dev/null
+++ b/resources/themes/velocity/views/layouts/footer/footer-logo.blade.php
@@ -0,0 +1,5 @@
+<a href="{{ route('shop.home.index') }}">
+    <img
+        src="{{ asset('themes/velocity/assets/images/static/logo-text-white.png') }}"
+        class="logo full-img" alt="" width="200" height="50" />
+</a>
\ No newline at end of file
diff --git a/resources/themes/velocity/views/layouts/footer/index.blade.php b/resources/themes/velocity/views/layouts/footer/index.blade.php
new file mode 100644
index 000000000..71eebfb6e
--- /dev/null
+++ b/resources/themes/velocity/views/layouts/footer/index.blade.php
@@ -0,0 +1,17 @@
+<div class="footer">
+    <div class="footer-content">
+
+        @include('shop::layouts.footer.newsletter-subscription')
+        @include('shop::layouts.footer.footer-links')
+
+        {{-- @if ($categories)
+            @include('shop::layouts.footer.top-brands')
+        @endif --}}
+
+        @if (core()->getConfigData('general.content.footer.footer_toggle'))
+            @include('shop::layouts.footer.copy-right')
+        @endif
+    </div>
+</div>
+
+
diff --git a/resources/themes/velocity/views/layouts/footer/newsletter-subscription.blade.php b/resources/themes/velocity/views/layouts/footer/newsletter-subscription.blade.php
new file mode 100644
index 000000000..6658c3459
--- /dev/null
+++ b/resources/themes/velocity/views/layouts/footer/newsletter-subscription.blade.php
@@ -0,0 +1,37 @@
+@if (
+    $velocityMetaData
+    && $velocityMetaData->subscription_bar_content
+    || core()->getConfigData('customer.settings.newsletter.subscription')
+)
+    <div class="newsletter-subscription">
+        <div class="newsletter-wrapper row col-12">
+            @if ($velocityMetaData && $velocityMetaData->subscription_bar_content)
+                {!! $velocityMetaData->subscription_bar_content !!}
+            @endif
+
+            @if (core()->getConfigData('customer.settings.newsletter.subscription'))
+                <div class="subscribe-newsletter col-lg-6">
+                    <div class="form-container">
+                        <form action="{{ route('shop.subscribe') }}">
+                            <div class="subscriber-form-div">
+                                <div class="control-group">
+                                    <input
+                                        type="email"
+                                        name="subscriber_email"
+                                        class="control subscribe-field"
+                                        placeholder="{{ __('velocity::app.customer.login-form.your-email-address') }}"
+                                        aria-label="Newsletter"
+                                        required />
+
+                                    <button class="theme-btn subscribe-btn fw6">
+                                        {{ __('shop::app.subscription.subscribe') }}
+                                    </button>
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            @endif
+        </div>
+    </div>
+@endif
diff --git a/resources/themes/velocity/views/layouts/footer/top-brands.blade.php b/resources/themes/velocity/views/layouts/footer/top-brands.blade.php
new file mode 100644
index 000000000..650ed3cf0
--- /dev/null
+++ b/resources/themes/velocity/views/layouts/footer/top-brands.blade.php
@@ -0,0 +1,33 @@
+@php
+    $brandname = app('Webkul\Velocity\Helpers\Helper');
+    $topBrandsCollection = $brandname->getBrandsWithCategories();
+@endphp
+
+@if (! empty($topBrandsCollection))
+    <div class="top-brands">
+        <div class="top-brands-body">
+                @if ($topBrandsCollection)
+                    <div class="top-brands-header">
+                        <h2>{{ __('velocity::app.shop.general.top-brands') }}</h2>
+                    </div>
+
+                    <ul class="list-group">
+                        @foreach($topBrandsCollection as $categoryName => $brandsCollection)
+                            <li class="row col-12">
+                                <label class="mr10">{{ $categoryName }} : </label>
+
+                                <span>
+                                    @foreach ($brandsCollection as $brandIndex => $brand )
+                                        {{$brand}}
+                                        @if ($brandIndex + 1 !== sizeof($brandsCollection))
+                                            |
+                                        @endif
+                                    @endforeach
+                                </span>
+                            </li>
+                        @endforeach
+                    </ul>
+                @endif
+        </div>
+    </div>
+@endif
\ No newline at end of file
diff --git a/resources/themes/velocity/views/layouts/header/index.blade.php b/resources/themes/velocity/views/layouts/header/index.blade.php
new file mode 100644
index 000000000..fe58600d6
--- /dev/null
+++ b/resources/themes/velocity/views/layouts/header/index.blade.php
@@ -0,0 +1,22 @@
+<header class="sticky-header">
+    <div class="row remove-padding-margin velocity-divide-page">
+        <logo-component add-class="navbar-brand"></logo-component>
+        <searchbar-component></searchbar-component>
+    </div>
+</header>
+
+@push('scripts')
+    <script type="text/javascript">
+        (() => {
+            document.addEventListener('scroll', e => {
+                scrollPosition = Math.round(window.scrollY);
+
+                if (scrollPosition > 50){
+                    document.querySelector('header').classList.add('header-shadow');
+                } else {
+                    document.querySelector('header').classList.remove('header-shadow');
+                }
+            });
+        })()
+    </script>
+@endpush
diff --git a/resources/themes/velocity/views/layouts/master.blade.php b/resources/themes/velocity/views/layouts/master.blade.php
new file mode 100644
index 000000000..1897dd941
--- /dev/null
+++ b/resources/themes/velocity/views/layouts/master.blade.php
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html lang="{{ app()->getLocale() }}">
+
+    <head>
+        {{-- title --}}
+        <title>@yield('page_title')</title>
+
+        {{-- meta data --}}
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="csrf-token" content="{{ csrf_token() }}">
+        <meta http-equiv="content-language" content="{{ app()->getLocale() }}">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+        {!! view_render_event('bagisto.shop.layout.head') !!}
+
+        {{-- for extra head data --}}
+        @yield('head')
+
+        {{-- seo meta data --}}
+        @section('seo')
+            <meta name="description" content="{{ core()->getCurrentChannel()->description }}"/>
+        @show
+
+        {{-- fav icon --}}
+        @if ($favicon = core()->getCurrentChannel()->favicon_url)
+            <link rel="icon" sizes="16x16" href="{{ $favicon }}" />
+        @else
+            <link rel="icon" sizes="16x16" href="{{ asset('/themes/velocity/assets/images/static/v-icon.png') }}" />
+        @endif
+
+        {{-- all styles --}}
+        @include('shop::layouts.styles')
+    </head>
+
+    <body @if (core()->getCurrentLocale() && core()->getCurrentLocale()->direction == 'rtl') class="rtl" @endif>
+        {!! view_render_event('bagisto.shop.layout.body.before') !!}
+
+        @include('shop::UI.particals')
+
+        {{-- main app --}}
+        <div id="app">
+            <product-quick-view v-if="$root.quickView"></product-quick-view>
+
+            <div class="main-container-wrapper">
+
+                @section('body-header')
+                    @include('shop::layouts.top-nav.index')
+
+                    {!! view_render_event('bagisto.shop.layout.header.before') !!}
+
+                        @include('shop::layouts.header.index')
+
+                    {!! view_render_event('bagisto.shop.layout.header.after') !!}
+
+                    <div class="main-content-wrapper col-12 no-padding">
+                        @php
+                            $velocityContent = app('Webkul\Velocity\Repositories\ContentRepository')->getAllContents();
+                        @endphp
+
+                        <content-header
+                            url="{{ url()->to('/') }}"
+                            :header-content="{{ json_encode($velocityContent) }}"
+                            heading= "{{ __('velocity::app.menu-navbar.text-category') }}"
+                            category-count="{{ $velocityMetaData ? $velocityMetaData->sidebar_category_count : 10 }}"
+                        ></content-header>
+
+                        <div class="">
+                            <div class="row col-12 remove-padding-margin">
+                                <sidebar-component
+                                    main-sidebar=true
+                                    id="sidebar-level-0"
+                                    url="{{ url()->to('/') }}"
+                                    category-count="{{ $velocityMetaData ? $velocityMetaData->sidebar_category_count : 10 }}"
+                                    add-class="category-list-container pt10">
+                                </sidebar-component>
+
+                                <div
+                                    class="col-12 no-padding content" id="home-right-bar-container">
+
+                                    <div class="container-right row no-margin col-12 no-padding">
+
+                                        {!! view_render_event('bagisto.shop.layout.content.before') !!}
+
+                                        @yield('content-wrapper')
+
+                                        {!! view_render_event('bagisto.shop.layout.content.after') !!}
+                                    </div>
+
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                @show
+
+                <div class="container">
+
+                    {!! view_render_event('bagisto.shop.layout.full-content.before') !!}
+
+                        @yield('full-content-wrapper')
+
+                    {!! view_render_event('bagisto.shop.layout.full-content.after') !!}
+
+                </div>
+            </div>
+
+            <div class="modal-parent" id="loader" style="top: 0" v-show="showPageLoader">
+                <overlay-loader :is-open="true"></overlay-loader>
+            </div>
+        </div>
+
+        {{-- footer --}}
+        @section('footer')
+            {!! view_render_event('bagisto.shop.layout.footer.before') !!}
+
+                @include('shop::layouts.footer.index')
+
+            {!! view_render_event('bagisto.shop.layout.footer.after') !!}
+        @show
+
+        {!! view_render_event('bagisto.shop.layout.body.after') !!}
+
+        <div id="alert-container"></div>
+
+        {{-- all scripts --}}
+        @include('shop::layouts.scripts')
+    </body>
+</html>
diff --git a/resources/themes/velocity/views/layouts/scripts.blade.php b/resources/themes/velocity/views/layouts/scripts.blade.php
new file mode 100644
index 000000000..56d645a15
--- /dev/null
+++ b/resources/themes/velocity/views/layouts/scripts.blade.php
@@ -0,0 +1,72 @@
+<script
+    type="text/javascript"
+    baseUrl="{{ url()->to('/') }}"
+    src="{{ asset('themes/velocity/assets/js/velocity.js') }}">
+</script>
+
+<script
+    type="text/javascript"
+    src="{{ asset('vendor/webkul/ui/assets/js/ui.js') }}">
+</script>
+
+<script
+    type="text/javascript"
+    src="{{ asset('themes/velocity/assets/js/jquery.ez-plus.js') }}">
+</script>
+
+<script type="text/javascript">
+    (() => {
+        window.showAlert = (messageType, messageLabel, message) => {
+            if (messageType && message !== '') {
+                let alertId = Math.floor(Math.random() * 1000);
+
+                let html = `<div class="alert ${messageType} alert-dismissible" id="${alertId}">
+                    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
+                    <strong>${messageLabel ? messageLabel + '!' : ''} </strong> ${message}.
+                </div>`;
+
+                $('#alert-container').append(html).ready(() => {
+                    window.setTimeout(() => {
+                        $(`#alert-container #${alertId}`).remove();
+                    }, 5000);
+                });
+            }
+        }
+
+        let messageType = '';
+        let messageLabel = '';
+
+        @if ($message = session('success'))
+            messageType = 'alert-success';
+            messageLabel = "{{ __('velocity::app.shop.general.alert.success') }}";
+        @elseif ($message = session('warning'))
+            messageType = 'alert-warning';
+            messageLabel = "{{ __('velocity::app.shop.general.alert.warning') }}";
+        @elseif ($message = session('error'))
+            messageType = 'alert-danger';
+            messageLabel = "{{ __('velocity::app.shop.general.alert.error') }}";
+        @elseif ($message = session('info'))
+            messageType = 'alert-info';
+            messageLabel = "{{ __('velocity::app.shop.general.alert.info') }}";
+        @endif
+
+        if (messageType && '{{ $message }}' !== '') {
+            window.showAlert(messageType, messageLabel, '{{ $message }}');
+        }
+
+        window.serverErrors = [];
+        @if (isset($errors))
+            @if (count($errors))
+                window.serverErrors = @json($errors->getMessages());
+            @endif
+        @endif
+
+        window._translations = @json(app('Webkul\Velocity\Helpers\Helper')->jsonTranslations());
+    })();
+</script>
+
+@stack('scripts')
+
+<script>
+    {!! core()->getConfigData('general.content.custom_scripts.custom_javascript') !!}
+</script>
\ No newline at end of file
diff --git a/resources/themes/velocity/views/layouts/styles.blade.php b/resources/themes/velocity/views/layouts/styles.blade.php
new file mode 100644
index 000000000..e69b0004f
--- /dev/null
+++ b/resources/themes/velocity/views/layouts/styles.blade.php
@@ -0,0 +1,13 @@
+<link rel="stylesheet" href="{{ asset('themes/velocity/assets/css/bootstrap.min.css') }}" />
+
+@if (core()->getCurrentLocale() && core()->getCurrentLocale()->direction == 'rtl')
+    <link href="{{ asset('themes/velocity/assets/css/bootstrap-flipped.css') }}" rel="stylesheet">
+@endif
+
+<link rel="stylesheet" href="{{ asset('themes/velocity/assets/css/velocity.css') }}" />
+
+@stack('css')
+
+<style>
+    {!! core()->getConfigData('general.content.custom_scripts.custom_css') !!}
+</style>
\ No newline at end of file
diff --git a/resources/themes/velocity/views/layouts/top-nav/index.blade.php b/resources/themes/velocity/views/layouts/top-nav/index.blade.php
new file mode 100644
index 000000000..fcb3493a6
--- /dev/null
+++ b/resources/themes/velocity/views/layouts/top-nav/index.blade.php
@@ -0,0 +1,9 @@
+<nav class="row" id="top">
+    <div class="col-sm-6">
+        @include('velocity::layouts.top-nav.locale-currency')
+    </div>
+
+    <div class="col-sm-6">
+        @include('velocity::layouts.top-nav.login-section')
+    </div>
+</nav>
\ No newline at end of file
diff --git a/resources/themes/velocity/views/layouts/top-nav/locale-currency.blade.php b/resources/themes/velocity/views/layouts/top-nav/locale-currency.blade.php
new file mode 100644
index 000000000..fd7ebd6d7
--- /dev/null
+++ b/resources/themes/velocity/views/layouts/top-nav/locale-currency.blade.php
@@ -0,0 +1,104 @@
+@php
+    $searchQuery = request()->input();
+
+    if ($searchQuery && ! empty($searchQuery)) {
+        $searchQuery = implode('&', array_map(
+            function ($v, $k) {
+                if (is_array($v)) {
+                    if (is_array($v)) {
+                        $key = array_keys($v)[0];
+
+                        return $k. "[$key]=" . implode('&' . $k . '[]=', $v);
+                    } else {
+                        return $k. '[]=' . implode('&' . $k . '[]=', $v);
+                    }
+                } else {
+                    return $k . '=' . $v;
+                }
+            },
+            $searchQuery,
+            array_keys($searchQuery)
+        ));
+    } else {
+        $searchQuery = false;
+    }
+@endphp
+
+{!! view_render_event('bagisto.shop.layout.header.locale.before') !!}
+    <div class="d-inline-block">
+        <div class="dropdown">
+            @php
+                $localeImage = null;
+            @endphp
+
+            @foreach (core()->getCurrentChannel()->locales as $locale)
+                @if ($locale->code == app()->getLocale())
+                    @php
+                        $localeImage = $locale->locale_image;
+                    @endphp
+                @endif
+            @endforeach
+
+            <div class="locale-icon">
+                @if ($localeImage)
+                    <img src="{{ asset('/storage/' . $localeImage) }}" onerror="this.src = '{{ asset($localeImage) }}'" alt="" width="20" height="20" />
+                @elseif (app()->getLocale() == 'en')
+                    <img src="{{ asset('/themes/velocity/assets/images/flags/en.png') }}" alt="" width="20" height="20" />
+                @endif
+            </div>
+
+            <select
+                class="btn btn-link dropdown-toggle control locale-switcher styled-select"
+                onchange="window.location.href = this.value"
+                aria-label="Locale"
+                @if (count(core()->getCurrentChannel()->locales) == 1)
+                    disabled="disabled"
+                @endif>
+
+                @foreach (core()->getCurrentChannel()->locales as $locale)
+                    @if (isset($searchQuery) && $searchQuery)
+                        <option
+                            value="?{{ $searchQuery }}&locale={{ $locale->code }}"
+                            {{ $locale->code == app()->getLocale() ? 'selected' : '' }}>
+                            {{ $locale->name }}
+                        </option>
+                    @else
+                        <option value="?locale={{ $locale->code }}" {{ $locale->code == app()->getLocale() ? 'selected' : '' }}>{{ $locale->name }}</option>
+                    @endif
+                @endforeach
+            </select>
+
+            <div class="select-icon-container">
+                <span class="select-icon rango-arrow-down"></span>
+            </div>
+        </div>
+    </div>
+
+{!! view_render_event('bagisto.shop.layout.header.locale.after') !!}
+
+{!! view_render_event('bagisto.shop.layout.header.currency-item.before') !!}
+
+    @if (core()->getCurrentChannel()->currencies->count() > 1)
+        <div class="d-inline-block">
+            <div class="dropdown">
+               <select
+                    class="btn btn-link dropdown-toggle control locale-switcher styled-select"
+                    onchange="window.location.href = this.value" aria-label="Locale">
+                    @foreach (core()->getCurrentChannel()->currencies as $currency)
+                        @if (isset($searchQuery) && $searchQuery)
+                            <option value="?{{ $searchQuery }}&currency={{ $currency->code }}" {{ $currency->code == core()->getCurrentCurrencyCode() ? 'selected' : '' }}>{{ $currency->code }}</option>
+                        @else
+                            <option value="?currency={{ $currency->code }}" {{ $currency->code == core()->getCurrentCurrencyCode() ? 'selected' : '' }}>{{ $currency->code }}</option>
+                        @endif
+                    @endforeach
+
+                </select>
+
+                <div class="select-icon-container">
+                    <span class="select-icon rango-arrow-down"></span>
+                </div>
+            </div>
+        </div>
+    @endif
+
+{!! view_render_event('bagisto.shop.layout.header.currency-item.after') !!}
diff --git a/resources/themes/velocity/views/layouts/top-nav/login-section.blade.php b/resources/themes/velocity/views/layouts/top-nav/login-section.blade.php
new file mode 100644
index 000000000..1ee8cde56
--- /dev/null
+++ b/resources/themes/velocity/views/layouts/top-nav/login-section.blade.php
@@ -0,0 +1,134 @@
+{!! view_render_event('bagisto.shop.layout.header.account-item.before') !!}
+    <login-header></login-header>
+{!! view_render_event('bagisto.shop.layout.header.account-item.after') !!}
+
+@push('scripts')
+    <script type="text/x-template" id="login-header-template">
+        <div class="dropdown">
+            <div id="account">
+                <div class="d-inline-block welcome-content" @click="togglePopup">
+                    <i class="material-icons align-vertical-top">perm_identity</i>
+                    <span class="text-center">
+                        @guest('customer')
+                            {{ __('velocity::app.header.welcome-message', ['customer_name' => trans('velocity::app.header.guest')]) }}!
+                        @endguest
+
+                        @auth('customer')
+                            {{ __('velocity::app.header.welcome-message', ['customer_name' => auth()->guard('customer')->user()->first_name]) }}
+                        @endauth
+                    </span>
+                    <span class="select-icon rango-arrow-down"></span>
+                </div>
+            </div>
+
+            <div class="account-modal sensitive-modal hide mt5">
+                @guest('customer')
+                    <div class="modal-content">
+                        <!-- header -->
+                        <div class="modal-header no-border pb0">
+                            <label class="fs18 grey">{{ __('shop::app.header.title') }}</label>
+
+                            <button type="button" class="close disable-box-shadow" data-dismiss="modal" aria-label="Close">
+                                <span aria-hidden="true" class="white-text fs20" @click="togglePopup">×</span>
+                            </button>
+                        </div>
+
+                        <!-- body -->
+                        <div class="pl10 fs14">
+                            <p>{{ __('shop::app.header.dropdown-text') }}</p>
+                        </div>
+
+                        <!-- footer -->
+                        <div class="modal-footer">
+                            <div>
+                                <a href="{{ route('customer.session.index') }}">
+                                    <button
+                                        type="button"
+                                        class="theme-btn fs14 fw6">
+
+                                        {{ __('shop::app.header.sign-in') }}
+                                    </button>
+                                </a>
+                            </div>
+
+                            <div>
+                                <a href="{{ route('customer.register.index') }}">
+                                    <button
+                                        type="button"
+                                        class="theme-btn fs14 fw6">
+                                        {{ __('shop::app.header.sign-up') }}
+                                    </button>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                @endguest
+
+                @auth('customer')
+                    <div class="modal-content customer-options">
+                        <div class="customer-session">
+                            <label class="">
+                                {{ auth()->guard('customer')->user()->first_name }}
+                            </label>
+                        </div>
+
+                        <ul type="none">
+                            <li>
+                                <a href="{{ route('customer.profile.index') }}" class="unset">{{ __('shop::app.header.profile') }}</a>
+                            </li>
+
+                            <li>
+                                <a href="{{ route('customer.orders.index') }}" class="unset">{{ __('velocity::app.shop.general.orders') }}</a>
+                            </li>
+
+                            @php
+                                $showCompare = core()->getConfigData('general.content.shop.compare_option') == "1" ? true : false;
+
+                                $showWishlist = core()->getConfigData('general.content.shop.wishlist_option') == "1" ? true : false;
+                            @endphp
+
+                            @if ($showWishlist)
+                                <li>
+                                    <a href="{{ route('customer.wishlist.index') }}" class="unset">{{ __('shop::app.header.wishlist') }}</a>
+                                </li>
+                            @endif
+
+                            @if ($showCompare)
+                                <li>
+                                    <a href="{{ route('velocity.customer.product.compare') }}" class="unset">{{ __('velocity::app.customer.compare.text') }}</a>
+                                </li>
+                            @endif
+
+                            <li>
+                                <a href="{{ route('customer.session.destroy') }}" class="unset">{{ __('shop::app.header.logout') }}</a>
+                            </li>
+                        </ul>
+                    </div>
+                @endauth
+            </div>
+        </div>
+    </script>
+
+    <script type="text/javascript">
+
+        Vue.component('login-header', {
+            template: '#login-header-template',
+
+            methods: {
+                togglePopup: function (event) {
+                    let accountModal = this.$el.querySelector('.account-modal');
+                    let modal = $('#cart-modal-content')[0];
+
+                    if (modal)
+                        modal.classList.add('hide');
+
+                    accountModal.classList.toggle('hide');
+
+                    event.stopPropagation();
+                }
+            }
+        })
+
+    </script>
+@endpush
+
diff --git a/resources/themes/velocity/views/products/add-to-cart.blade.php b/resources/themes/velocity/views/products/add-to-cart.blade.php
new file mode 100644
index 000000000..2ef856f65
--- /dev/null
+++ b/resources/themes/velocity/views/products/add-to-cart.blade.php
@@ -0,0 +1,80 @@
+{!! view_render_event('bagisto.shop.products.add_to_cart.before', ['product' => $product]) !!}
+
+    <div class="mx-0 no-padding">
+        @if (isset($showCompare) && $showCompare)
+            <compare-component
+                @auth('customer')
+                    customer="true"
+                @endif
+
+                @guest('customer')
+                    customer="false"
+                @endif
+
+                slug="{{ $product->url_key }}"
+                product-id="{{ $product->id }}"
+                add-tooltip="{{ __('velocity::app.customer.compare.add-tooltip') }}"
+            ></compare-component>
+        @endif
+
+        @if (! (isset($showWishlist) && !$showWishlist) && core()->getConfigData('general.content.shop.wishlist_option'))
+            @include('shop::products.wishlist', [
+                'addClass' => $addWishlistClass ?? ''
+            ])
+        @endif
+
+        <div class="add-to-cart-btn pl0">
+            @if (isset($form) && !$form)
+                <button
+                    type="submit"
+                    {{ ! $product->isSaleable() ? 'disabled' : '' }}
+                    class="theme-btn {{ $addToCartBtnClass ?? '' }}">
+
+                    @if (! (isset($showCartIcon) && !$showCartIcon))
+                        <i class="material-icons text-down-3">shopping_cart</i>
+                    @endif
+
+                    {{ ($product->type == 'booking') ?  __('shop::app.products.book-now') :  __('shop::app.products.add-to-cart') }}
+                </button>
+            @elseif(isset($addToCartForm) && !$addToCartForm)
+                <form
+                    method="POST"
+                    action="{{ route('cart.add', $product->product_id) }}">
+
+                    @csrf
+
+                    <input type="hidden" name="product_id" value="{{ $product->product_id }}">
+                    <input type="hidden" name="quantity" value="1">
+                    <button
+                        type="submit"
+                        {{ ! $product->isSaleable() ? 'disabled' : '' }}
+                        class="btn btn-add-to-cart {{ $addToCartBtnClass ?? '' }}">
+
+                        @if (! (isset($showCartIcon) && !$showCartIcon))
+                            <i class="material-icons text-down-3">shopping_cart</i>
+                        @endif
+
+                        <span class="fs14 fw6 text-uppercase text-up-4">
+                            {{ ($product->type == 'booking') ?  __('shop::app.products.book-now') : $btnText ?? __('shop::app.products.add-to-cart') }}
+                        </span>
+                    </button>
+                </form>
+            @else
+                <add-to-cart
+                    form="true"
+                    csrf-token='{{ csrf_token() }}'
+                    product-flat-id="{{ $product->id }}"
+                    product-id="{{ $product->product_id }}"
+                    reload-page="{{ $reloadPage ?? false }}"
+                    move-to-cart="{{ $moveToCart ?? false }}"
+                    wishlist-move-route="{{ $wishlistMoveRoute ?? false }}"
+                    add-class-to-btn="{{ $addToCartBtnClass ?? '' }}"
+                    is-enable={{ ! $product->isSaleable() ? 'false' : 'true' }}
+                    show-cart-icon={{ ! (isset($showCartIcon) && ! $showCartIcon) }}
+                    btn-text="{{ (! isset($moveToCart) && $product->type == 'booking') ?  __('shop::app.products.book-now') : $btnText ?? __('shop::app.products.add-to-cart') }}">
+                </add-to-cart>
+            @endif
+        </div>
+    </div>
+
+{!! view_render_event('bagisto.shop.products.add_to_cart.after', ['product' => $product]) !!}
\ No newline at end of file
diff --git a/resources/themes/velocity/views/products/buy-now.blade.php b/resources/themes/velocity/views/products/buy-now.blade.php
new file mode 100644
index 000000000..8bc1844b8
--- /dev/null
+++ b/resources/themes/velocity/views/products/buy-now.blade.php
@@ -0,0 +1,7 @@
+{!! view_render_event('bagisto.shop.products.buy_now.before', ['product' => $product]) !!}
+
+<button type="submit" class="theme-btn text-center buynow" {{ ! $product->isSaleable(1) ? 'disabled' : '' }}>
+    {{ __('shop::app.products.buy-now') }}
+</button>
+
+{!! view_render_event('bagisto.shop.products.buy_now.after', ['product' => $product]) !!}
\ No newline at end of file
diff --git a/resources/themes/velocity/views/products/index.blade.php b/resources/themes/velocity/views/products/index.blade.php
new file mode 100644
index 000000000..aaf5877c6
--- /dev/null
+++ b/resources/themes/velocity/views/products/index.blade.php
@@ -0,0 +1,176 @@
+@inject ('toolbarHelper', 'Webkul\Product\Helpers\Toolbar')
+@inject ('productRepository', 'Webkul\Product\Repositories\ProductRepository')
+
+@extends('shop::layouts.master')
+
+@section('page_title')
+    {{ trim($category->meta_title) != "" ? $category->meta_title : $category->name }}
+@stop
+
+@section('seo')
+    <meta name="description" content="{{ $category->meta_description }}" />
+    <meta name="keywords" content="{{ $category->meta_keywords }}" />
+
+    @if (core()->getConfigData('catalog.rich_snippets.categories.enable'))
+        <script type="application/ld+json">
+            {!! app('Webkul\Product\Helpers\SEO')->getCategoryJsonLd($category) !!}
+        </script>
+    @endif
+@stop
+
+@push('css')
+    <style type="text/css">
+        .product-price span:first-child, .product-price span:last-child {
+            font-size: 18px;
+            font-weight: 600;
+        }
+
+        @media only screen and (max-width: 992px) {
+            .main-content-wrapper .vc-header {
+                box-shadow: unset;
+            }
+        }
+    </style>
+@endpush
+
+@php
+    $isProductsDisplayMode = in_array(
+        $category->display_mode, [
+            null,
+            'products_only',
+            'products_and_description'
+        ]
+    );
+
+    $isDescriptionDisplayMode = in_array(
+        $category->display_mode, [
+            null,
+            'description_only',
+            'products_and_description'
+        ]
+    );
+@endphp
+
+@section('content-wrapper')
+    <category-component></category-component>
+@stop
+
+@push('scripts')
+    <script type="text/x-template" id="category-template">
+        <section class="row col-12 velocity-divide-page category-page-wrapper">
+            {!! view_render_event('bagisto.shop.productOrCategory.index.before', ['category' => $category]) !!}
+
+            @if (in_array($category->display_mode, [null, 'products_only', 'products_and_description']))
+                @include ('shop::products.list.layered-navigation')
+            @endif
+
+            <div class="category-container right">
+                <div class="row remove-padding-margin">
+                    <div class="pl0 col-12">
+                        <h2 class="fw6 mb10">{{ $category->name }}</h2>
+
+                        @if ($isDescriptionDisplayMode)
+                            @if ($category->description)
+                                <div class="category-description">
+                                    {!! $category->description !!}
+                                </div>
+                            @endif
+                        @endif
+                    </div>
+
+                    <div class="col-12 no-padding">
+                        <div class="hero-image">
+                            @if (!is_null($category->image))
+                                <img class="logo" src="{{ $category->image_url }}" alt="" width="20" height="20" />
+                            @endif
+                        </div>
+                    </div>
+                </div>
+
+                @if ($isProductsDisplayMode)
+                    <div class="filters-container">
+                        <template v-if="products.length >= 0">
+                            @include ('shop::products.list.toolbar')
+                        </template>
+                    </div>
+
+                    <div
+                        class="category-block"
+                        @if ($category->display_mode == 'description_only')
+                            style="width: 100%"
+                        @endif>
+
+                        <shimmer-component v-if="isLoading" shimmer-count="4"></shimmer-component>
+
+                        <template v-else-if="products.length > 0">
+                            @if ($toolbarHelper->getCurrentMode() == 'grid')
+                                <div class="row col-12 remove-padding-margin">
+                                    <product-card
+                                        :key="index"
+                                        :product="product"
+                                        v-for="(product, index) in products">
+                                    </product-card>
+                                </div>
+                            @else
+                                <div class="product-list">
+                                    <product-card
+                                        list=true
+                                        :key="index"
+                                        :product="product"
+                                        v-for="(product, index) in products">
+                                    </product-card>
+                                </div>
+                            @endif
+
+                            {!! view_render_event('bagisto.shop.productOrCategory.index.pagination.before', ['category' => $category]) !!}
+
+                            <div class="bottom-toolbar" v-html="paginationHTML"></div>
+
+                            {!! view_render_event('bagisto.shop.productOrCategory.index.pagination.after', ['category' => $category]) !!}
+                        </template>
+
+                        <div class="product-list empty" v-else>
+                            <h2>{{ __('shop::app.products.whoops') }}</h2>
+                            <p>{{ __('shop::app.products.empty') }}</p>
+                        </div>
+                    </div>
+                @endif
+            </div>
+
+            {!! view_render_event('bagisto.shop.productOrCategory.index.after', ['category' => $category]) !!}
+        </section>
+    </script>
+
+    <script>
+        Vue.component('category-component', {
+            template: '#category-template',
+
+            data: function () {
+                return {
+                    'products': [],
+                    'isLoading': true,
+                    'paginationHTML': '',
+                }
+            },
+
+            created: function () {
+                this.getCategoryProducts();
+            },
+
+            methods: {
+                'getCategoryProducts': function () {
+                    this.$http.get(`${this.$root.baseUrl}/category-products/{{ $category->id }}${window.location.search}`)
+                    .then(response => {
+                        this.isLoading = false;
+                        this.products = response.data.products;
+                        this.paginationHTML = response.data.paginationHTML;
+                    })
+                    .catch(error => {
+                        this.isLoading = false;
+                        console.log(this.__('error.something_went_wrong'));
+                    })
+                }
+            }
+        })
+    </script>
+@endpush
\ No newline at end of file
diff --git a/resources/themes/velocity/views/products/list/card.blade.php b/resources/themes/velocity/views/products/list/card.blade.php
new file mode 100644
index 000000000..7f43fd6ed
--- /dev/null
+++ b/resources/themes/velocity/views/products/list/card.blade.php
@@ -0,0 +1,198 @@
+@inject ('reviewHelper', 'Webkul\Product\Helpers\Review')
+@inject ('toolbarHelper', 'Webkul\Product\Helpers\Toolbar')
+
+@push('css')
+    <style type="text/css">
+        .list-card .wishlist-icon i {
+            padding-left: 10px;
+        }
+
+        .product-price span:first-child, .product-price span:last-child {
+            font-size: 18px;
+            font-weight: 600;
+        }
+    </style>
+@endpush
+
+@php
+    if (isset($checkmode) && $checkmode && $toolbarHelper->getCurrentMode() == "list") {
+        $list = true;
+    }
+
+    if (isset($item)) {
+        $productBaseImage = productimage()->getProductImage($item);
+    } else {
+        $productBaseImage = productimage()->getProductBaseImage($product);
+    }
+
+    $totalReviews = $reviewHelper->getTotalReviews($product);
+    $avgRatings = ceil($reviewHelper->getAverageRating($product));
+
+    $galleryImages = productimage()->getGalleryImages($product);
+    $priceHTML = view('shop::products.price', ['product' => $product])->render();
+
+    $product->__set('priceHTML', $priceHTML);
+    $product->__set('avgRating', $avgRatings);
+    $product->__set('totalReviews', $totalReviews);
+    $product->__set('galleryImages', $galleryImages);
+    $product->__set('shortDescription', $product->short_description);
+    $product->__set('firstReviewText', trans('velocity::app.products.be-first-review'));
+    $product->__set('addToCartHtml', view('shop::products.add-to-cart', [
+        'product'           => $product,
+        'addWishlistClass'  => ! (isset($list) && $list) ? '' : '',
+
+        'showCompare'       => core()->getConfigData('general.content.shop.compare_option') == "1"
+                                ? true : false,
+
+        'btnText'           => null,
+        'moveToCart'        => null,
+        'addToCartBtnClass' => '',
+    ])->render());
+
+@endphp
+
+{!! view_render_event('bagisto.shop.products.list.card.before', ['product' => $product]) !!}
+    @if (isset($list) && $list)
+        <div class="col-12 lg-card-container list-card product-card row">
+            <div class="product-image">
+                <a
+                    title="{{ $product->name }}"
+                    href="{{ route('shop.productOrCategory.index', $product->url_key) }}">
+
+                    <img
+                        src="{{ $productBaseImage['medium_image_url'] }}"
+                        :onerror="`this.src='${this.$root.baseUrl}/vendor/webkul/ui/assets/images/product/large-product-placeholder.png'`" alt="" />
+                    <div class="quick-view-in-list">
+                        <product-quick-view-btn :quick-view-details="{{ json_encode($product) }}"></product-quick-view-btn>
+                    </div>
+                </a>
+            </div>
+
+            <div class="product-information">
+                <div>
+                    <div class="product-name">
+                        <a
+                            href="{{ route('shop.productOrCategory.index', $product->url_key) }}"
+                            title="{{ $product->name }}" class="unset">
+
+                            <span class="fs16">{{ $product->name }}</span>
+                        </a>
+
+                        @if (isset($additionalAttributes) && $additionalAttributes)
+                            @if (isset($item->additional['attributes']))
+                                <div class="item-options">
+
+                                    @foreach ($item->additional['attributes'] as $attribute)
+                                        <b>{{ $attribute['attribute_name'] }} : </b>{{ $attribute['option_label'] }}</br>
+                                    @endforeach
+
+                                </div>
+                            @endif
+                        @endif
+                    </div>
+
+                    <div class="product-price">
+                        @include ('shop::products.price', ['product' => $product])
+                    </div>
+
+                    @if( $totalReviews )
+                        <div class="product-rating">
+                            <star-ratings ratings="{{ $avgRatings }}"></star-ratings>
+                            <span>{{ $totalReviews }} Ratings</span>
+                        </div>
+                    @endif
+
+                    <div class="cart-wish-wrap mt5">
+                        @include ('shop::products.add-to-cart', [
+                            'addWishlistClass'  => 'pl10',
+                            'product'           => $product,
+                            'addToCartBtnClass' => 'medium-padding',
+                            'showCompare'       => core()->getConfigData('general.content.shop.compare_option') == "1"
+                                                   ? true : false,
+                        ])
+                    </div>
+                </div>
+            </div>
+        </div>
+    @else
+        <div class="card grid-card product-card-new">
+            <a
+                href="{{ route('shop.productOrCategory.index', $product->url_key) }}"
+                title="{{ $product->name }}"
+                class="product-image-container">
+
+                <img
+                    loading="lazy"
+                    class="card-img-top"
+                    alt="{{ $product->name }}"
+                    src="{{ $productBaseImage['large_image_url'] }}"
+                    :onerror="`this.src='${this.$root.baseUrl}/vendor/webkul/ui/assets/images/product/large-product-placeholder.png'`" />
+
+                    {{-- <product-quick-view-btn :quick-view-details="product"></product-quick-view-btn> --}}
+                    <product-quick-view-btn :quick-view-details="{{ json_encode($product) }}"></product-quick-view-btn>
+            </a>
+
+            @if ($product->new)
+                <div class="sticker new">
+                   {{ __('shop::app.products.new') }}
+                </div>
+            @endif
+
+            <div class="card-body">
+                <div class="product-name col-12 no-padding">
+                    <a
+                        href="{{ route('shop.productOrCategory.index', $product->url_key) }}"
+                        title="{{ $product->name }}"
+                        class="unset">
+
+                        <span class="fs16">{{ $product->name }}</span>
+
+                        @if (isset($additionalAttributes) && $additionalAttributes)
+                            @if (isset($item->additional['attributes']))
+                                <div class="item-options">
+
+                                    @foreach ($item->additional['attributes'] as $attribute)
+                                        <b>{{ $attribute['attribute_name'] }} : </b>{{ $attribute['option_label'] }}</br>
+                                    @endforeach
+
+                                </div>
+                            @endif
+                        @endif
+                    </a>
+                </div>
+
+                <div class="product-price fs16">
+                    @include ('shop::products.price', ['product' => $product])
+                </div>
+
+                @if ($totalReviews)
+                    <div class="product-rating col-12 no-padding">
+                        <star-ratings ratings="{{ $avgRatings }}"></star-ratings>
+                        <span class="align-top">
+                            {{ __('velocity::app.products.ratings', ['totalRatings' => $totalReviews ]) }}
+                        </span>
+                    </div>
+                @else
+                    <div class="product-rating col-12 no-padding">
+                        <span class="fs14">{{ __('velocity::app.products.be-first-review') }}</span>
+                    </div>
+                @endif
+
+                <div class="cart-wish-wrap no-padding ml0">
+                    @include ('shop::products.add-to-cart', [
+                        'product'           => $product,
+                        'btnText'           => $btnText ?? null,
+                        'moveToCart'        => $moveToCart ?? null,
+                        'wishlistMoveRoute' => $wishlistMoveRoute ?? null,
+                        'reloadPage'        => $reloadPage ?? null,
+                        'addToCartForm'     => $addToCartForm ?? false,
+                        'addToCartBtnClass' => $addToCartBtnClass ?? '',
+                        'showCompare'       => core()->getConfigData('general.content.shop.compare_option') == "1"
+                                                ? true : false,
+                    ])
+                </div>
+            </div>
+        </div>
+    @endif
+
+{!! view_render_event('bagisto.shop.products.list.card.after', ['product' => $product]) !!}
diff --git a/resources/themes/velocity/views/products/list/layered-navigation.blade.php b/resources/themes/velocity/views/products/list/layered-navigation.blade.php
new file mode 100644
index 000000000..137ad209d
--- /dev/null
+++ b/resources/themes/velocity/views/products/list/layered-navigation.blade.php
@@ -0,0 +1,257 @@
+@inject ('productRepository', 'Webkul\Product\Repositories\ProductRepository')
+@inject ('attributeRepository', 'Webkul\Attribute\Repositories\AttributeRepository')
+@inject ('productFlatRepository', 'Webkul\Product\Repositories\ProductFlatRepository')
+
+<?php
+    $filterAttributes = $attributes = [];
+    $maxPrice = 0;
+
+    if (isset($category)) {
+        $filterAttributes = $productFlatRepository->getProductsRelatedFilterableAttributes($category);
+
+        $maxPrice = core()->convertPrice($productFlatRepository->getCategoryProductMaximumPrice($category));
+    }
+
+    if (! count($filterAttributes) > 0) {
+        $filterAttributes = $attributeRepository->getFilterAttributes();
+    }
+?>
+
+<div class="layered-filter-wrapper left">
+
+    {!! view_render_event('bagisto.shop.products.list.layered-nagigation.before') !!}
+
+        <layered-navigation></layered-navigation>
+
+    {!! view_render_event('bagisto.shop.products.list.layered-nagigation.after') !!}
+
+</div>
+
+@push('scripts')
+    <script type="text/x-template" id="layered-navigation-template">
+        <div v-if="attributes.length > 0">
+
+            <h5 class="filter-title fw6 mb20">
+                {{ __('shop::app.products.layered-nav-title') }}
+            </h5>
+
+            <div class="filter-content">
+                <div class="filter-attributes">
+                    <filter-attribute-item
+                        :key="index"
+                        :index="index"
+                        :attribute="attribute"
+                        v-for='(attribute, index) in attributes'
+                        @onFilterAdded="addFilters(attribute.code, $event)"
+                        :appliedFilterValues="appliedFilters[attribute.code]">
+                    </filter-attribute-item>
+
+                </div>
+            </div>
+        </div>
+    </script>
+
+    <script type="text/x-template" id="filter-attribute-item-template">
+        <div :class="`cursor-pointer filter-attributes-item ${active ? 'active' : ''}`">
+            <div class="filter-attributes-title" @click="active = !active">
+                <h6 class="fw6 display-inbl">@{{ attribute.name ? attribute.name : attribute.admin_name }}</h6>
+
+                <div class="float-right display-table">
+                    <span class="link-color cursor-pointer" v-if="appliedFilters.length" @click.stop="clearFilters()">
+                        {{ __('shop::app.products.remove-filter-link-title') }}
+                    </span>
+
+                    <i :class="`icon fs16 cell ${active ? 'rango-arrow-up' : 'rango-arrow-down'}`"></i>
+                </div>
+            </div>
+
+            <div class="filter-attributes-content">
+                <ul type="none" class="items ml15" v-if="attribute.type != 'price'">
+                    <li
+                        class="item"
+                        v-for='(option, index) in attribute.options'>
+
+                        <div
+                            class="checkbox"
+                            @click="optionClicked(option.id, $event)">
+                            <input
+                                type="checkbox"
+                                :id="option.id"
+                                v-bind:value="option.id"
+                                v-model="appliedFilters"
+                                @change="addFilter($event)" />
+                            <span>@{{ option.label ? option.label : option.admin_name }}</span>
+                        </div>
+                    </li>
+                </ul>
+
+                <div class="price-range-wrapper" v-if="attribute.type == 'price'">
+                    <vue-slider
+                        ref="slider"
+                        v-model="sliderConfig.value"
+                        :process-style="sliderConfig.processStyle"
+                        :tooltip-style="sliderConfig.tooltipStyle"
+                        :max="sliderConfig.max"
+                        :lazy="true"
+                        @change="priceRangeUpdated($event)"
+                    ></vue-slider>
+
+                    <div class="filter-input row col-12 no-padding">
+                        <input
+                            type="text"
+                            disabled
+                            name="price_from"
+                            :value="sliderConfig.priceFrom"
+                            id="price_from" />
+
+                        <label class="col text-center" for="to">{{ __('shop::app.products.filter-to') }}</label>
+                        <input
+                        type="text"
+                        disabled
+                        name="price_to"
+                        :value="sliderConfig.priceTo"
+                        id="price_to">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </script>
+
+    <script>
+        Vue.component('layered-navigation', {
+            template: '#layered-navigation-template',
+            data: function() {
+                return {
+                    appliedFilters: {},
+                    attributes: @json($filterAttributes),
+                }
+            },
+
+            created: function () {
+                let urlParams = new URLSearchParams(window.location.search);
+
+                urlParams.forEach((value, index) => {
+                    this.appliedFilters[index] = value.split(',');
+                });
+            },
+
+            methods: {
+                addFilters: function (attributeCode, filters) {
+                    if (filters.length) {
+                        this.appliedFilters[attributeCode] = filters;
+                    } else {
+                        delete this.appliedFilters[attributeCode];
+                    }
+
+                    this.applyFilter();
+                },
+
+                applyFilter: function () {
+                    var params = [];
+
+                    for (key in this.appliedFilters) {
+                        if (key != 'page') {
+                            params.push(key + '=' + this.appliedFilters[key].join(','))
+                        }
+                    }
+
+                    window.location.href = "?" + params.join('&');
+                },
+            }
+        });
+
+        Vue.component('filter-attribute-item', {
+            template: '#filter-attribute-item-template',
+            props: [
+                'index',
+                'attribute',
+                'addFilters',
+                'appliedFilterValues',
+            ],
+
+            data: function() {
+                let maxPrice  = @json($maxPrice);
+
+                maxPrice = maxPrice ? ((parseInt(maxPrice) !== 0 || maxPrice) ? parseInt(maxPrice) : 500) : 500;
+
+                return {
+                    active: false,
+                    appliedFilters: [],
+                    sliderConfig: {
+                        max: maxPrice,
+                        value: [ 0, 0 ],
+
+                        processStyle: {
+                            "backgroundColor": "#FF6472"
+                        },
+
+                        tooltipStyle: {
+                            "borderColor": "#FF6472",
+                            "backgroundColor": "#FF6472",
+                        },
+
+                        priceTo: 0,
+                        priceFrom: 0,
+                    }
+                }
+            },
+
+            created: function () {
+                if (!this.index)
+                    this.active = false;
+
+                if (this.appliedFilterValues && this.appliedFilterValues.length) {
+                    this.appliedFilters = this.appliedFilterValues;
+                    if (this.attribute.type == 'price') {
+                        this.sliderConfig.value = this.appliedFilterValues;
+                        this.sliderConfig.priceFrom = this.appliedFilterValues[0];
+                        this.sliderConfig.priceTo = this.appliedFilterValues[1];
+                    }
+
+                    this.active = true;
+                }
+            },
+
+            methods: {
+                addFilter: function (e) {
+                    this.$emit('onFilterAdded', this.appliedFilters)
+                },
+
+                priceRangeUpdated: function (value) {
+                    this.appliedFilters = value;
+                    this.$emit('onFilterAdded', this.appliedFilters)
+                },
+
+                clearFilters: function () {
+                    if (this.attribute.type == 'price') {
+                        this.sliderConfig.value = [0, 0];
+                    }
+
+                    this.appliedFilters = [];
+
+                    this.$emit('onFilterAdded', this.appliedFilters)
+                },
+
+                optionClicked: function (id, {target}) {
+                    let checkbox = $(`#${id}`);
+                    if (checkbox && checkbox.length > 0 && target.type != "checkbox") {
+                        checkbox = checkbox[0];
+                        checkbox.checked = !checkbox.checked;
+
+                        if (checkbox.checked) {
+                            this.appliedFilters.push(id);
+                        } else {
+                            let idPosition = this.appliedFilters.indexOf(id);
+                            if (idPosition == -1)
+                                idPosition = this.appliedFilters.indexOf(id.toString());
+
+                            this.appliedFilters.splice(idPosition, 1);
+                        }
+
+                        this.addFilter(event);
+                    }
+                }
+            }
+        });
+    </script>
+@endpush
\ No newline at end of file
diff --git a/resources/themes/velocity/views/products/list/recently-viewed.blade.php b/resources/themes/velocity/views/products/list/recently-viewed.blade.php
new file mode 100644
index 000000000..8c1ea1606
--- /dev/null
+++ b/resources/themes/velocity/views/products/list/recently-viewed.blade.php
@@ -0,0 +1,11 @@
+@php
+    $direction = core()->getCurrentLocale()->direction;
+@endphp
+
+<recently-viewed
+    title="{{ __('velocity::app.products.recently-viewed') }}"
+    no-data-text="{{ __('velocity::app.products.not-available') }}"
+    add-class="{{ isset($addClass) ? $addClass . " $direction": '' }}"
+    quantity="{{ isset($quantity) ? $quantity : null }}"
+    add-class-wrapper="{{ isset($addClassWrapper) ? $addClassWrapper : '' }}">
+</recently-viewed>
diff --git a/resources/themes/velocity/views/products/list/toolbar.blade.php b/resources/themes/velocity/views/products/list/toolbar.blade.php
new file mode 100644
index 000000000..080c7007c
--- /dev/null
+++ b/resources/themes/velocity/views/products/list/toolbar.blade.php
@@ -0,0 +1,162 @@
+@inject ('toolbarHelper', 'Webkul\Product\Helpers\Toolbar')
+
+{!! view_render_event('bagisto.shop.products.list.toolbar.before') !!}
+    <toolbar-component></toolbar-component>
+{!! view_render_event('bagisto.shop.products.list.toolbar.after') !!}
+
+@push('scripts')
+    <script type="text/x-template" id="toolbar-template">
+        <div class="toolbar-wrapper" v-if='!isMobile()'>
+            <div class="view-mode">
+                @php
+                  $viewOption = $toolbarHelper->getViewOption();
+                @endphp
+
+                <div class="rango-view-grid-container {{ $viewOption === 'grid' ? 'active' : '' }}">
+                    <a href="{{ $toolbarHelper->getModeUrl('grid') }}" class="grid-view unset" aria-label="Grid">
+                        <span class="rango-view-grid fs24"></span>
+                    </a>
+                </div>
+                <div class="rango-view-list-container {{ $viewOption === 'list' ? 'active' : '' }}" aria-label="List">
+                    <a
+                        href="{{ $toolbarHelper->getModeUrl('list') }}"
+                        class="list-view unset">
+                        <span class="rango-view-list fs24"></span>
+                    </a>
+                </div>
+            </div>
+
+            <div class="sorter">
+                <label>{{ __('shop::app.products.sort-by') }}</label>
+
+                <select class="selective-div border-normal styled-select" onchange="window.location.href = this.value" aria-label="Sort By">
+                    @foreach ($toolbarHelper->getAvailableOrders() as $key => $order)
+                        <option value="{{ $toolbarHelper->getOrderUrl($key) }}" {{ $toolbarHelper->isOrderCurrent($key) ? 'selected' : '' }}>
+                            {{ __('shop::app.products.' . $order) }}
+                        </option>
+                    @endforeach
+                </select>
+
+                <div class="select-icon-container">
+                    <span class="select-icon rango-arrow-down"></span>
+                </div>
+            </div>
+
+            <div class="limiter">
+                <label>{{ __('shop::app.products.show') }}</label>
+
+                <select class="selective-div border-normal styled-select" onchange="window.location.href = this.value" style="width: 57px;" aria-label="Show">
+
+                    @foreach ($toolbarHelper->getAvailableLimits() as $limit)
+
+                        <option value="{{ $toolbarHelper->getLimitUrl($limit) }}" {{ $toolbarHelper->isLimitCurrent($limit) ? 'selected' : '' }}>
+                            {{ $limit }}
+                        </option>
+
+                    @endforeach
+
+                </select>
+
+                <div class="select-icon-container">
+                    <span class="select-icon rango-arrow-down"></span>
+                </div>
+            </div>
+        </div>
+
+        <div class="toolbar-wrapper row col-12 remove-padding-margin" v-else>
+            <div
+                v-if="layeredNavigation"
+                class="nav-container scrollable"
+                style="
+                    z-index: 1000;
+                    color: black;
+                    position: relative;
+                ">
+                <div class="header drawer-section">
+                    <i class="material-icons" @click="toggleLayeredNavigation">keyboard_backspace</i>
+
+                    <span class="fs24 fw6">
+                        {{ __('velocity::app.shop.general.filter') }}
+                    </span>
+                    <span class="float-right link-color" @click="toggleLayeredNavigation">
+                        {{ __('velocity::app.responsive.header.done') }}
+                    </span>
+                </div>
+
+                @if (request()->route()->getName() != 'velocity.search.index')
+                    @include ('shop::products.list.layered-navigation')
+                @endif
+            </div>
+
+            <div class="col-4" @click="toggleLayeredNavigation({event: $event, actionType: 'open'})">
+                <a class="unset">
+                    <i class="material-icons">filter_list</i>
+                    <span>{{ __('velocity::app.shop.general.filter') }}</span>
+                </a>
+            </div>
+
+            <div class="col-4">
+                <div class="sorter" id="sort-by">
+                    <i class="material-icons">sort_by_alpha</i>
+
+                    <select class="selective-div no-border" onchange="window.location.href = this.value">
+                        @foreach ($toolbarHelper->getAvailableOrders() as $key => $order)
+                            <option value="{{ $toolbarHelper->getOrderUrl($key) }}" {{ $toolbarHelper->isOrderCurrent($key) ? 'selected' : '' }}>
+                                {{ __('shop::app.products.' . $order) }}
+                            </option>
+                        @endforeach
+                    </select>
+                </div>
+            </div>
+
+            <div class="col-4">
+                @php
+                    $isList = $toolbarHelper->isModeActive('list');
+                @endphp
+
+                <a
+                    class="unset"
+                    href="{{
+                        $isList
+                        ? $toolbarHelper->getModeUrl('grid')
+                        : $toolbarHelper->getModeUrl('list')
+                    }}">
+
+                    <i class="material-icons">
+                        @if ($isList) list @else view_module @endif
+                    </i>
+                    <span>{{ __('velocity::app.shop.general.view') }}</span>
+                </a>
+            </div>
+        </div>
+    </script>
+
+    <script type="text/javascript">
+        (() => {
+            Vue.component('toolbar-component', {
+                template: '#toolbar-template',
+                data: function () {
+                    return {
+                        'layeredNavigation': false,
+                    }
+                },
+
+                watch: {
+                    layeredNavigation: function (value) {
+                        if (value) {
+                            document.body.classList.add('open-hamburger');
+                        } else {
+                            document.body.classList.remove('open-hamburger');
+                        }
+                    }
+                },
+
+                methods: {
+                    toggleLayeredNavigation: function ({event, actionType}) {
+                        this.layeredNavigation = !this.layeredNavigation;
+                    },
+                }
+            })
+        })()
+    </script>
+@endpush
diff --git a/resources/themes/velocity/views/products/price.blade.php b/resources/themes/velocity/views/products/price.blade.php
new file mode 100644
index 000000000..bed2c056d
--- /dev/null
+++ b/resources/themes/velocity/views/products/price.blade.php
@@ -0,0 +1,7 @@
+{!! view_render_event('bagisto.shop.products.price.before', ['product' => $product]) !!}
+
+<div class="product-price">
+    {!! $product->getTypeInstance()->getPriceHtml() !!}
+</div>
+
+{!! view_render_event('bagisto.shop.products.price.after', ['product' => $product]) !!}
\ No newline at end of file
diff --git a/resources/themes/velocity/views/products/reviews/create.blade.php b/resources/themes/velocity/views/products/reviews/create.blade.php
new file mode 100644
index 000000000..d52609fdc
--- /dev/null
+++ b/resources/themes/velocity/views/products/reviews/create.blade.php
@@ -0,0 +1,99 @@
+@extends('shop::layouts.master')
+
+@section('page_title')
+    {{ __('shop::app.reviews.add-review-page-title') }} - {{ $product->name }}
+@endsection
+
+@section('content-wrapper')
+
+    <div class="container">
+        <section class="row review-page-container">
+            @include ('shop::products.view.small-view', ['product' => $product])
+
+            <div class="col-lg-6 col-md-12">
+                <div class="row customer-rating col-12 remove-padding-margin">
+                    <h2 class="full-width">
+                        {{ __('shop::app.reviews.write-review') }}
+                    </h2>
+
+                    <form
+                        method="POST"
+                        class="review-form"
+                        @submit.prevent="onSubmit"
+                        action="{{ route('shop.reviews.store', $product->product_id ) }}">
+
+                        @csrf
+
+                        <div :class="`${errors.has('rating') ? 'has-error' : ''}`">
+                            <label for="title" class="required">
+                                {{ __('admin::app.customers.reviews.rating') }}
+                            </label>
+                            <star-ratings ratings="5" size="24" editable="true"></star-ratings>
+                            <span :class="`control-error ${errors.has('rating') ? '' : 'hide'}`" v-if="errors.has('rating')">
+                                @{{ errors.first('rating') }}
+                            </span>
+                        </div>
+
+                        <div :class="`${errors.has('title') ? 'has-error' : ''}`">
+                            <label for="title" class="required">
+                                {{ __('shop::app.reviews.title') }}
+                            </label>
+                            <input
+                                type="text"
+                                name="title"
+                                class="control"
+                                v-validate="'required'"
+                                value="{{ old('title') }}" />
+
+                            <span :class="`control-error ${errors.has('title') ? '' : 'hide'}`">
+                                @{{ errors.first('title') }}
+                            </span>
+                        </div>
+
+                        @if (core()->getConfigData('catalog.products.review.guest_review') && ! auth()->guard('customer')->user())
+                            <div :class="`${errors.has('name') ? 'has-error' : ''}`">
+                                <label for="title" class="required">
+                                    {{ __('shop::app.reviews.name') }}
+                                </label>
+                                <input  type="text" class="control" name="name" v-validate="'required'" value="{{ old('name') }}">
+                                <span :class="`control-error ${errors.has('name') ? '' : 'hide'}`">
+                                    @{{ errors.first('name') }}
+                                </span>
+                            </div>
+                        @endif
+
+                        <div :class="`${errors.has('comment') ? 'has-error' : ''}`">
+                            <label for="comment" class="required">
+                                {{ __('admin::app.customers.reviews.comment') }}
+                            </label>
+                            <textarea
+                                type="text"
+                                class="control"
+                                name="comment"
+                                v-validate="'required'"
+                                value="{{ old('comment') }}">
+                            </textarea>
+                            <span :class="`control-error ${errors.has('comment') ? '' : 'hide'}`">
+                                @{{ errors.first('comment') }}
+                            </span>
+                        </div>
+
+                        <div class="submit-btn">
+                            <button
+                                type="submit"
+                                class="theme-btn fs16">
+                                {{ __('velocity::app.products.submit-review') }}
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+            @if ($showRecentlyViewed)
+                @include ('shop::products.list.recently-viewed', [
+                    'addClass' => 'col-lg-3 col-md-12'
+                ])
+            @endif
+        </section>
+    </div>
+
+@endsection
diff --git a/resources/themes/velocity/views/products/reviews/index.blade.php b/resources/themes/velocity/views/products/reviews/index.blade.php
new file mode 100644
index 000000000..4f002a904
--- /dev/null
+++ b/resources/themes/velocity/views/products/reviews/index.blade.php
@@ -0,0 +1,41 @@
+@extends('shop::layouts.master')
+
+@section('page_title')
+    {{ __('shop::app.reviews.product-review-page-title') }}
+@endsection
+
+@php
+    $ratings = [
+        '', '', '', ''
+    ];
+
+    $ratings = [
+        10, 30, 20, 15, 25
+    ];
+
+    $totalReviews = 25;
+    $totalRatings = array_sum($ratings);
+
+@endphp
+
+@push('css')
+    <style>
+        .reviews {
+            display: none !important;
+        }
+    </style>
+@endpush
+
+@section('content-wrapper')
+    <div class="container">
+        <div class="row review-page-container">
+            @include ('shop::products.view.small-view', ['product' => $product])
+
+            <div class="col-lg-7 col-md-12 fs16">
+                <h2 class="full-width mb30">Rating and Reviews</h2>
+
+                @include ('shop::products.view.reviews')
+            </div>
+        </div>
+    </div>
+@endsection
\ No newline at end of file
diff --git a/resources/themes/velocity/views/products/view.blade.php b/resources/themes/velocity/views/products/view.blade.php
new file mode 100644
index 000000000..943b0a54a
--- /dev/null
+++ b/resources/themes/velocity/views/products/view.blade.php
@@ -0,0 +1,344 @@
+@extends('shop::layouts.master')
+
+@inject ('reviewHelper', 'Webkul\Product\Helpers\Review')
+@inject ('customHelper', 'Webkul\Velocity\Helpers\Helper')
+
+@php
+    $total = $reviewHelper->getTotalReviews($product);
+
+    $avgRatings = $reviewHelper->getAverageRating($product);
+    $avgStarRating = round($avgRatings);
+
+    $productImages = [];
+    $images = productimage()->getGalleryImages($product);
+
+    foreach ($images as $key => $image) {
+        array_push($productImages, $image['medium_image_url']);
+    }
+@endphp
+
+@section('page_title')
+    {{ trim($product->meta_title) != "" ? $product->meta_title : $product->name }}
+@stop
+
+@section('seo')
+    <meta name="description" content="{{ trim($product->meta_description) != "" ? $product->meta_description : \Illuminate\Support\Str::limit(strip_tags($product->description), 120, '') }}"/>
+
+    <meta name="keywords" content="{{ $product->meta_keywords }}"/>
+
+    @if (core()->getConfigData('catalog.rich_snippets.products.enable'))
+        <script type="application/ld+json">
+            {!! app('Webkul\Product\Helpers\SEO')->getProductJsonLd($product) !!}
+        </script>
+    @endif
+
+    <?php $productBaseImage = productimage()->getProductBaseImage($product, $images); ?>
+
+    <meta name="twitter:card" content="summary_large_image" />
+
+    <meta name="twitter:title" content="{{ $product->name }}" />
+
+    <meta name="twitter:description" content="{{ $product->description }}" />
+
+    <meta name="twitter:image:alt" content="" />
+
+    <meta name="twitter:image" content="{{ $productBaseImage['medium_image_url'] }}" />
+
+    <meta property="og:type" content="og:product" />
+
+    <meta property="og:title" content="{{ $product->name }}" />
+
+    <meta property="og:image" content="{{ $productBaseImage['medium_image_url'] }}" />
+
+    <meta property="og:description" content="{{ $product->description }}" />
+
+    <meta property="og:url" content="{{ route('shop.productOrCategory.index', $product->url_key) }}" />
+@stop
+
+@push('css')
+    <style type="text/css">
+        .related-products {
+            width: 100%;
+        }
+
+        .recently-viewed {
+            margin-top: 20px;
+        }
+
+        .store-meta-images > .recently-viewed:first-child {
+            margin-top: 0px;
+        }
+
+        .main-content-wrapper {
+            margin-bottom: 0px;
+        }
+
+        .buynow {
+            height: 40px;
+            text-transform: uppercase;
+        }
+    </style>
+@endpush
+
+@section('full-content-wrapper')
+    {!! view_render_event('bagisto.shop.products.view.before', ['product' => $product]) !!}
+        <div class="row no-margin">
+            <section class="col-12 product-detail">
+                <div class="layouter">
+                    <product-view>
+                        <div class="form-container">
+                            @csrf()
+
+                            <input type="hidden" name="product_id" value="{{ $product->product_id }}">
+
+                            <div class="row">
+                                {{-- product-gallery --}}
+                                <div class="left col-lg-5 col-md-6">
+                                    @include ('shop::products.view.gallery')
+                                </div>
+
+                                {{-- right-section --}}
+                                <div class="right col-lg-7 col-md-6">
+                                    {{-- product-info-section --}}
+                                    <div class="row info">
+                                        <h2 class="col-12">{{ $product->name }}</h2>
+
+                                        @if ($total)
+                                            <div class="reviews col-lg-12">
+                                                <star-ratings
+                                                    push-class="mr5"
+                                                    :ratings="{{ $avgStarRating }}"
+                                                ></star-ratings>
+
+                                                <div class="reviews">
+                                                    <span>
+                                                        {{ __('shop::app.reviews.ratingreviews', [
+                                                            'rating' => $avgRatings,
+                                                            'review' => $total])
+                                                        }}
+                                                    </span>
+                                                </div>
+                                            </div>
+                                        @endif
+
+                                        @include ('shop::products.view.stock', ['product' => $product])
+
+                                        <div class="col-12 price">
+                                            @include ('shop::products.price', ['product' => $product])
+                                        </div>
+
+                                        @if (count($product->getTypeInstance()->getCustomerGroupPricingOffers()) > 0)
+                                            <div class="col-12">
+                                                @foreach ($product->getTypeInstance()->getCustomerGroupPricingOffers() as $offers)
+                                                    {{ $offers }} </br>
+                                                @endforeach
+                                            </div>
+                                        @endif
+
+                                        <div class="product-actions">
+                                            @if (core()->getConfigData('catalog.products.storefront.buy_now_button_display'))
+                                                @include ('shop::products.buy-now', [
+                                                    'product' => $product,
+                                                ])
+                                            @endif
+
+                                            @include ('shop::products.add-to-cart', [
+                                                'form' => false,
+                                                'product' => $product,
+                                                'showCartIcon' => false,
+                                                'showCompare' => core()->getConfigData('general.content.shop.compare_option') == "1"
+                                                                ? true : false,
+                                            ])
+                                        </div>
+                                    </div>
+
+                                    {!! view_render_event('bagisto.shop.products.view.short_description.before', ['product' => $product]) !!}
+
+                                    @if ($product->short_description)
+                                        <div class="description">
+                                            <h3 class="col-lg-12">{{ __('velocity::app.products.short-description') }}</h3>
+
+                                            {!! $product->short_description !!}
+                                        </div>
+                                    @endif
+
+                                    {!! view_render_event('bagisto.shop.products.view.short_description.after', ['product' => $product]) !!}
+
+
+                                    {!! view_render_event('bagisto.shop.products.view.quantity.before', ['product' => $product]) !!}
+
+                                    @if ($product->getTypeInstance()->showQuantityBox())
+                                        <div>
+                                            <quantity-changer></quantity-changer>
+                                        </div>
+                                    @else
+                                        <input type="hidden" name="quantity" value="1">
+                                    @endif
+
+                                    {!! view_render_event('bagisto.shop.products.view.quantity.after', ['product' => $product]) !!}
+
+                                    @include ('shop::products.view.configurable-options')
+
+                                    @include ('shop::products.view.downloadable')
+
+                                    @include ('shop::products.view.grouped-products')
+
+                                    @include ('shop::products.view.bundle-options')
+
+                                    @include ('shop::products.view.attributes', [
+                                        'active' => true
+                                    ])
+
+                                    {{-- product long description --}}
+                                    @include ('shop::products.view.description')
+
+                                    {{-- reviews count --}}
+                                    @include ('shop::products.view.reviews', ['accordian' => true])
+                                </div>
+                            </div>
+                        </div>
+                    </product-view>
+                </div>
+            </section>
+
+            <div class="related-products">
+                @include('shop::products.view.related-products')
+                @include('shop::products.view.up-sells')
+            </div>
+
+            <div class="store-meta-images col-3">
+                @if(
+                    isset($velocityMetaData['product_view_images'])
+                    && $velocityMetaData['product_view_images']
+                )
+                    @foreach (json_decode($velocityMetaData['product_view_images'], true) as $image)
+                        @if ($image && $image !== '')
+                            <img src="{{ url()->to('/') }}/storage/{{ $image }}" alt=""/>
+                        @endif
+                    @endforeach
+                @endif
+            </div>
+        </div>
+    {!! view_render_event('bagisto.shop.products.view.after', ['product' => $product]) !!}
+@endsection
+
+@push('scripts')
+    <script type='text/javascript' src='https://unpkg.com/spritespin@4.1.0/release/spritespin.js'></script>
+
+    <script type="text/x-template" id="product-view-template">
+        <form
+            method="POST"
+            id="product-form"
+            @click="onSubmit($event)"
+            action="{{ route('cart.add', $product->product_id) }}">
+
+            <input type="hidden" name="is_buy_now" v-model="is_buy_now">
+
+            <slot v-if="slot"></slot>
+
+            <div v-else>
+                <div class="spritespin"></div>
+            </div>
+
+        </form>
+    </script>
+
+    <script>
+        Vue.component('product-view', {
+            inject: ['$validator'],
+            template: '#product-view-template',
+            data: function () {
+                return {
+                    slot: true,
+                    is_buy_now: 0,
+                }
+            },
+
+            mounted: function () {
+                let currentProductId = '{{ $product->url_key }}';
+                let existingViewed = window.localStorage.getItem('recentlyViewed');
+
+                if (! existingViewed) {
+                    existingViewed = [];
+                } else {
+                    existingViewed = JSON.parse(existingViewed);
+                }
+
+                if (existingViewed.indexOf(currentProductId) == -1) {
+                    existingViewed.push(currentProductId);
+
+                    if (existingViewed.length > 3)
+                        existingViewed = existingViewed.slice(Math.max(existingViewed.length - 4, 1));
+
+                    window.localStorage.setItem('recentlyViewed', JSON.stringify(existingViewed));
+                } else {
+                    var uniqueNames = [];
+
+                    $.each(existingViewed, function(i, el){
+                        if ($.inArray(el, uniqueNames) === -1) uniqueNames.push(el);
+                    });
+
+                    uniqueNames.push(currentProductId);
+
+                    uniqueNames.splice(uniqueNames.indexOf(currentProductId), 1);
+
+                    window.localStorage.setItem('recentlyViewed', JSON.stringify(uniqueNames));
+                }
+            },
+
+            methods: {
+                onSubmit: function(event) {
+                    if (event.target.getAttribute('type') != 'submit')
+                        return;
+
+                    event.preventDefault();
+
+                    this.$validator.validateAll().then(result => {
+                        if (result) {
+                            this.is_buy_now = event.target.classList.contains('buynow') ? 1 : 0;
+
+                            setTimeout(function() {
+                                document.getElementById('product-form').submit();
+                            }, 0);
+                        }
+                    });
+                },
+            }
+        });
+
+        window.onload = function() {
+            var thumbList = document.getElementsByClassName('thumb-list')[0];
+            var thumbFrame = document.getElementsByClassName('thumb-frame');
+            var productHeroImage = document.getElementsByClassName('product-hero-image')[0];
+
+            if (thumbList && productHeroImage) {
+                for (let i=0; i < thumbFrame.length ; i++) {
+                    thumbFrame[i].style.height = (productHeroImage.offsetHeight/4) + "px";
+                    thumbFrame[i].style.width = (productHeroImage.offsetHeight/4)+ "px";
+                }
+
+                if (screen.width > 720) {
+                    thumbList.style.width = (productHeroImage.offsetHeight/4) + "px";
+                    thumbList.style.minWidth = (productHeroImage.offsetHeight/4) + "px";
+                    thumbList.style.height = productHeroImage.offsetHeight + "px";
+                }
+            }
+
+            window.onresize = function() {
+                if (thumbList && productHeroImage) {
+
+                    for(let i=0; i < thumbFrame.length; i++) {
+                        thumbFrame[i].style.height = (productHeroImage.offsetHeight/4) + "px";
+                        thumbFrame[i].style.width = (productHeroImage.offsetHeight/4)+ "px";
+                    }
+
+                    if (screen.width > 720) {
+                        thumbList.style.width = (productHeroImage.offsetHeight/4) + "px";
+                        thumbList.style.minWidth = (productHeroImage.offsetHeight/4) + "px";
+                        thumbList.style.height = productHeroImage.offsetHeight + "px";
+                    }
+                }
+            }
+        };
+    </script>
+@endpush
\ No newline at end of file
diff --git a/resources/themes/velocity/views/products/view/attributes.blade.php b/resources/themes/velocity/views/products/view/attributes.blade.php
new file mode 100644
index 000000000..d66e74f28
--- /dev/null
+++ b/resources/themes/velocity/views/products/view/attributes.blade.php
@@ -0,0 +1,50 @@
+@inject ('productViewHelper', 'Webkul\Product\Helpers\View')
+
+{!! view_render_event('bagisto.shop.products.view.attributes.before', ['product' => $product]) !!}
+    @php
+        $customAttributeValues = $productViewHelper->getAdditionalData($product);
+    @endphp
+
+    @if ($customAttributeValues)
+        <accordian :title="'{{ __('shop::app.products.specification') }}'" :active="'{{ $active }}' == true ? true : false">
+            <div slot="header">
+                <h3 class="no-margin display-inbl">
+                    {{ __('velocity::app.products.more-infomation') }}
+                </h3>
+                <i class="rango-arrow"></i>
+            </div>
+
+            <div slot="body">
+                <table class="full-specifications">
+
+                    @foreach ($customAttributeValues as $attribute)
+                        <tr>
+                            @if ($attribute['label'])
+                                <td class='fw6'>{{ $attribute['label'] }}</td>
+                            @else
+                                <td>{{ $attribute['admin_name'] }}</td>
+                            @endif
+
+                            @if ($attribute['type'] == 'file' && $attribute['value'])
+                                <td>
+                                    <a  href="{{ route('shop.product.file.download', [$product->product_id, $attribute['id']])}}" style="color:black;">
+                                        <i class="icon rango-download-1"></i>
+                                    </a>
+                                </td>
+                            @elseif ($attribute['type'] == 'image' && $attribute['value'])
+                                <td>
+                                    <a href="{{ route('shop.product.file.download', [$product->product_id, $attribute['id']])}}">
+                                        <img src="{{ Storage::url($attribute['value']) }}" style="height: 20px; width: 20px;" alt=""/>
+                                    </a>
+                                </td>
+                            @else
+                                <td>{{ $attribute['value'] }}</td>
+                            @endif
+                        </tr>
+                    @endforeach
+                </table>
+            </div>
+        </accordian>
+    @endif
+
+{!! view_render_event('bagisto.shop.products.view.attributes.after', ['product' => $product]) !!}
\ No newline at end of file
diff --git a/resources/themes/velocity/views/products/view/bundle-options.blade.php b/resources/themes/velocity/views/products/view/bundle-options.blade.php
new file mode 100644
index 000000000..1dfefed08
--- /dev/null
+++ b/resources/themes/velocity/views/products/view/bundle-options.blade.php
@@ -0,0 +1,249 @@
+@if ($product->type == 'bundle')
+    @push('css')
+        <style type="text/css">
+            .bundle-options-wrapper .bundle-option-list {
+                border: unset;
+            }
+            .bundle-option-item .radio input {
+                top: 4px;
+            }
+        </style>
+    @endpush
+
+    {!! view_render_event('bagisto.shop.products.view.bundle-options.before', ['product' => $product]) !!}
+
+    <bundle-option-list></bundle-option-list>
+
+    {!! view_render_event('bagisto.shop.products.view.bundle-options.after', ['product' => $product]) !!}
+
+    @push('scripts')
+        <script type="text/x-template" id="bundle-option-list-template">
+            <div class="bundle-options-wrapper">
+                <div class="bundle-option-list">
+                    <h3>{{ __('shop::app.products.customize-options') }}</h3>
+
+                    <bundle-option-item
+                        v-for="(option, index) in options"
+                        :option="option"
+                        :key="index"
+                        :index="index"
+                        @onProductSelected="productSelected(option, $event)">
+                    </bundle-option-item>
+                </div>
+
+                <div class="bundle-summary">
+                    <h3 class="mb10">{{ __('shop::app.products.your-customization') }}</h3>
+
+                    <quantity-changer></quantity-changer>
+
+                    <div class="control-group">
+                        <label>{{ __('shop::app.products.total-amount') }}</label>
+
+                        <div class="bundle-price no-margin">
+                            @{{ formated_total_price | currency(currency_options) }}
+                        </div>
+                    </div>
+
+                    <ul type="none" class="bundle-items">
+                        <li v-for="(option, index) in options">
+                            @{{ option.label }}
+
+                            <div class="selected-products">
+                                <div v-for="(product, index1) in option.products" v-if="product.is_default">
+                                    @{{ product.qty + ' x ' + product.name }}
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </script>
+
+        <script type="text/x-template" id="bundle-option-item-template">
+            <div class="bundle-option-item">
+                <div :class="`control-group custom-form mb10 ${errors.has('bundle_options[' + option.id + '][]') ? 'has-error' : ''}`">
+                    <label :class="[option.is_required ? 'required' : '']">@{{ option.label }}</label>
+
+                    <div v-if="option.type == 'select'">
+                        <select class="control styled-select" :name="'bundle_options[' + option.id + '][]'" v-model="selected_product" v-validate="option.is_required ? 'required' : ''" :data-vv-as="option.label + '&quot;'">
+                            <option value="">{{ __('shop::app.products.choose-selection') }}</option>
+                            <option v-for="(product, index2) in option.products" :value="product.id">
+                                @{{ product.name + ' + ' + product.price.final_price.formated_price }}
+                            </option>
+                        </select>
+                    </div>
+
+                    <div v-if="option.type == 'radio'">
+                        <span class="radio col-12 ml5" v-if="! option.is_required">
+                            <input
+                                type="radio"
+                                :name="'bundle_options[' + option.id + '][]'"
+                                v-model="selected_product"
+                                value="0" />
+
+                            <label class="radio-view no-padding" :for="'bundle_options[' + option.id + '][]'"></label>
+                            {{ __('shop::app.products.none') }}
+                        </span>
+
+                        <span class="radio col-12 ml5" v-for="(product, index2) in option.products">
+                            <input
+                                type="radio"
+                                :name="'bundle_options[' + option.id + '][]'"
+                                v-model="selected_product"
+                                v-validate="option.is_required ? 'required' : ''"
+                                :data-vv-as="'&quot;' + option.label + '&quot;'"
+                                :value="product.id" />
+
+                            @{{ product.name }}
+
+                            <span class="price">
+                                + @{{ product.price.final_price.formated_price }}
+                            </span>
+                        </span>
+                    </div>
+
+                    <div v-if="option.type == 'checkbox'">
+                        <span class="checkbox col-12 ml5" v-for="(product, index2) in option.products">
+                            <input type="checkbox" :name="'bundle_options[' + option.id + '][]'" :value="product.id" v-model="selected_product" v-validate="option.is_required ? 'required' : ''" :data-vv-as="'&quot;' + option.label + '&quot;'" :id="'bundle_options[' + option.id + '][]'">
+
+                            @{{ product.name }}
+
+                            <span class="price">
+                                + @{{ product.price.final_price.formated_price }}
+                            </span>
+                        </span>
+                    </div>
+
+                    <div v-if="option.type == 'multiselect'">
+                        <select class="control styled-select" :name="'bundle_options[' + option.id + '][]'" v-model="selected_product" v-validate="option.is_required ? 'required' : ''" :data-vv-as="'&quot;' + option.label + '&quot;'" multiple>
+                            <option v-for="(product, index2) in option.products" :value="product.id">
+                                @{{ product.name + ' + ' + product.price.final_price.formated_price }}
+                            </option>
+                        </select>
+                    </div>
+
+                    <span class="control-error" v-if="errors.has('bundle_options[' + option.id + '][]')">
+                        @{{ errors.first('bundle_options[' + option.id + '][]') }}
+                    </span>
+                </div>
+
+                <div v-if="option.type == 'select' || option.type == 'radio'">
+                    <quantity-changer
+                        :control-name="'bundle_option_qty[' + option.id + ']'"
+                        :validations="parseInt(selected_product) ? 'required|numeric|min_value:1' : ''"
+                        :quantity="product_qty"
+                        @onQtyUpdated="qtyUpdated($event)">
+                    </quantity-changer>
+                </div>
+            </div>
+        </script>
+
+        <script type="text/javascript">
+            Vue.component('bundle-option-list', {
+                template: '#bundle-option-list-template',
+                inject: ['$validator'],
+
+                data: function() {
+                    return {
+                        options: [],
+                        currency_options: @json(core()->getAccountJsSymbols()),
+                        config: @json(app('Webkul\Product\Helpers\BundleOption')->getBundleConfig($product)),
+                    }
+                },
+
+                computed: {
+                    formated_total_price: function() {
+                        var total = 0;
+
+                        for (var key in this.options) {
+                            for (var key1 in this.options[key].products) {
+                                if (! this.options[key].products[key1].is_default)
+                                    continue;
+
+                                total += this.options[key].products[key1].qty * this.options[key].products[key1].price.final_price.price;
+                            }
+                        }
+
+                        return total;
+                    }
+                },
+
+                created: function() {
+                    for (var key in this.config.options) {
+                        this.options.push(this.config.options[key])
+                    }
+                },
+
+                methods: {
+                    productSelected: function(option, value) {
+                        var selectedProductIds = Array.isArray(value) ? value : [value];
+
+                        for (var key in option.products) {
+                            option.products[key].is_default = selectedProductIds.indexOf(option.products[key].id) > -1 ? 1 : 0;
+                        }
+                    }
+                }
+            });
+
+            Vue.component('bundle-option-item', {
+                template: '#bundle-option-item-template',
+
+                props: ['index', 'option'],
+
+                inject: ['$validator'],
+
+                data: function() {
+                    return {
+                        selected_product: (this.option.type == 'checkbox' || this.option.type == 'multiselect')  ? [] : null,
+
+                        qty_validations: ''
+                    }
+                },
+
+                computed: {
+                    product_qty: function() {
+                        var self = this;
+                        self.qty = 0;
+
+                        self.option.products.forEach(function(product, key){
+                            if (self.selected_product == product.id)
+                                self.qty =  self.option.products[key].qty;
+                        });
+
+                        return self.qty;
+                    }
+                },
+
+                watch: {
+                    selected_product: function (value) {
+                        this.qty_validations = this.selected_product ? 'required|numeric|min_value:1' : '';
+
+                        this.$emit('onProductSelected', value)
+                    }
+                },
+
+                created: function() {
+                    for (var key1 in this.option.products) {
+                        if (! this.option.products[key1].is_default)
+                            continue;
+
+                        if (this.option.type == 'checkbox' || this.option.type == 'multiselect') {
+                            this.selected_product.push(this.option.products[key1].id)
+                        } else {
+                            this.selected_product = this.option.products[key1].id
+                        }
+                    }
+                },
+
+                methods: {
+                    qtyUpdated: function(qty) {
+                        if (! this.option.products[this.selected_product])
+                            return;
+
+                        this.option.products[this.selected_product].qty = qty;
+                    }
+                }
+            });
+        </script>
+    @endpush
+@endif
\ No newline at end of file
diff --git a/resources/themes/velocity/views/products/view/configurable-options.blade.php b/resources/themes/velocity/views/products/view/configurable-options.blade.php
new file mode 100644
index 000000000..b9f3874f8
--- /dev/null
+++ b/resources/themes/velocity/views/products/view/configurable-options.blade.php
@@ -0,0 +1,353 @@
+@if (Webkul\Product\Helpers\ProductType::hasVariants($product->type))
+
+    @inject ('configurableOptionHelper', 'Webkul\Product\Helpers\ConfigurableOption')
+
+    @php
+        $config = $configurableOptionHelper->getConfigurationConfig($product);
+        $galleryImages = productimage()->getGalleryImages($product);
+    @endphp
+
+    {!! view_render_event('bagisto.shop.products.view.configurable-options.before', ['product' => $product]) !!}
+
+        <product-options></product-options>
+
+    {!! view_render_event('bagisto.shop.products.view.configurable-options.after', ['product' => $product]) !!}
+
+    @push('scripts')
+        <script type="text/x-template" id="product-options-template">
+            <div class="attributes" v-if="childAttributes.length > 0">
+                <input
+                    type="hidden"
+                    :value="selectedProductId"
+                    id="selected_configurable_option"
+                    name="selected_configurable_option" />
+
+                <div
+                    :key="index"
+                    v-for='(attribute, index) in childAttributes'
+                    :class="`attribute control-group ${errors.has('super_attribute[' + attribute.id + ']') ? 'has-error' : ''}
+                    `">
+                    <label class="required">@{{ attribute.label }}</label>
+
+                    <span
+                        class="custom-form"
+                        v-if="
+                            ! attribute.swatch_type
+                            || attribute.swatch_type == ''
+                            || attribute.swatch_type == 'dropdown'
+                        ">
+
+                        <select
+                            v-validate="'required'"
+                            class="control styled-select"
+                            :disabled="attribute.disabled"
+                            :id="['attribute_' + attribute.id]"
+                            :name="['super_attribute[' + attribute.id + ']']"
+                            @change="configure(attribute, $event.target.value, $event)"
+                            :data-vv-as="'&quot;' + attribute.label + '&quot;'">
+
+                            <option
+                                :value="option.id"
+                                v-for='(option, index) in attribute.options'>
+                                @{{ option.label }}
+                            </option>
+
+                        </select>
+                        <div class="select-icon-container">
+                            <span class="select-icon rango-arrow-down"></span>
+                        </div>
+                    </span>
+
+                    <span class="swatch-container" v-else>
+                        <label class="swatch"
+                            v-for='(option, index) in attribute.options'
+                            v-if="option.id"
+                            :data-id="option.id"
+                            :for="['attribute_' + attribute.id + '_option_' + option.id]">
+
+                            <input
+                                type="radio"
+                                :value="option.id"
+                                v-validate="'required'"
+                                :name="['super_attribute[' + attribute.id + ']']"
+                                :id="['attribute_' + attribute.id + '_option_' + option.id]"
+                                :data-vv-as="'&quot;' + attribute.label + '&quot;'"
+                                @change="configure(attribute, $event.target.value)"/>
+
+                            <span v-if="attribute.swatch_type == 'color'" :style="{ background: option.swatch_value }"></span>
+
+                            <img v-if="attribute.swatch_type == 'image'" :src="option.swatch_value" :title="option.label" alt="" />
+
+                            <span v-if="attribute.swatch_type == 'text'">
+                                @{{ option.label }}
+                            </span>
+
+                        </label>
+
+                        <span v-if="! attribute.options.length" class="no-options">{{ __('shop::app.products.select-above-options') }}</span>
+                    </span>
+
+                    <span class="control-error" v-if="errors.has('super_attribute[' + attribute.id + ']')">
+                        @{{ errors.first('super_attribute[' + attribute.id + ']') }}
+                    </span>
+                </div>
+
+            </div>
+        </script>
+
+        <script type="text/javascript">
+            (() => {
+                var galleryImages = @json($galleryImages);
+
+                Vue.component('product-options', {
+                    template: '#product-options-template',
+                    inject: ['$validator'],
+                    data: function() {
+                        return {
+                            galleryImages: [],
+                            simpleProduct: null,
+                            childAttributes: [],
+                            selectedProductId: '',
+                            config: @json($config),
+                        }
+                    },
+
+                    created: function() {
+                        var config = @json($config);
+
+                        var childAttributes = this.childAttributes,
+                            attributes = config.attributes.slice(),
+                            index = attributes.length,
+                            attribute;
+
+                        while (index--) {
+                            attribute = attributes[index];
+
+                            attribute.options = [];
+
+                            if (index) {
+                                attribute.disabled = true;
+                            } else {
+                                this.fillSelect(attribute);
+                            }
+
+                            attribute = Object.assign(attribute, {
+                                childAttributes: childAttributes.slice(),
+                                prevAttribute: attributes[index - 1],
+                                nextAttribute: attributes[index + 1]
+                            });
+
+                            childAttributes.unshift(attribute);
+                        }
+                    },
+
+                    methods: {
+                        configure: function(attribute, value, event) {
+                            this.simpleProduct = this.getSelectedProductId(attribute, value);
+
+                            if (value) {
+                                attribute.selectedIndex = this.getSelectedIndex(attribute, value);
+
+                                if (attribute.nextAttribute) {
+                                    attribute.nextAttribute.disabled = false;
+
+                                    this.fillSelect(attribute.nextAttribute);
+                                    this.resetChildren(attribute.nextAttribute);
+                                } else {
+                                    this.selectedProductId = this.simpleProduct;
+                                }
+                            } else {
+                                attribute.selectedIndex = 0;
+                                this.resetChildren(attribute);
+                                this.clearSelect(attribute.nextAttribute)
+                            }
+
+                            this.reloadPrice();
+                            this.changeProductImages();
+                            this.changeStock(this.simpleProduct);
+                        },
+
+                        getSelectedIndex: function(attribute, value) {
+                            var selectedIndex = 0;
+
+                            attribute.options.forEach(function(option, index) {
+                                if (option.id == value) {
+                                    selectedIndex = index;
+                                }
+                            })
+
+                            return selectedIndex;
+                        },
+
+                        getSelectedProductId: function(attribute, value) {
+                            var options = attribute.options,
+                                matchedOptions;
+
+                            matchedOptions = options.filter(function (option) {
+                                return option.id == value;
+                            });
+
+                            if (matchedOptions[0] != undefined && matchedOptions[0].allowedProducts != undefined) {
+                                return matchedOptions[0].allowedProducts[0];
+                            }
+
+                            return undefined;
+                        },
+
+                        fillSelect: function(attribute) {
+                            var options = this.getAttributeOptions(attribute.id);
+                            var prevOption;
+                            var index = 1;
+                            var allowedProducts;
+                            var i;
+                            var j;
+
+                            this.clearSelect(attribute)
+
+                            attribute.options = [{'id': '', 'label': this.config.chooseText, 'products': []}];
+
+                            if (attribute.prevAttribute) {
+                                prevOption = attribute.prevAttribute.options[attribute.prevAttribute.selectedIndex];
+                            }
+
+                            if (options) {
+                                for (i = 0; i < options.length; i++) {
+                                    allowedProducts = [];
+
+                                    if (prevOption) {
+                                        for (j = 0; j < options[i].products.length; j++) {
+                                            if (prevOption.allowedProducts && prevOption.allowedProducts.indexOf(options[i].products[j]) > -1) {
+                                                allowedProducts.push(options[i].products[j]);
+                                            }
+                                        }
+                                    } else {
+                                        allowedProducts = options[i].products.slice(0);
+                                    }
+
+                                    if (allowedProducts.length > 0) {
+                                        options[i].allowedProducts = allowedProducts;
+
+                                        attribute.options[index] = options[i];
+
+                                        index++;
+                                    }
+                                }
+                            }
+                        },
+
+                        resetChildren: function(attribute) {
+                            if (attribute.childAttributes) {
+                                attribute.childAttributes.forEach(function (set) {
+                                    set.selectedIndex = 0;
+                                    set.disabled = true;
+                                });
+                            }
+                        },
+
+                        clearSelect: function (attribute) {
+                            if (! attribute)
+                                return;
+
+                            if (! attribute.swatch_type
+                                || attribute.swatch_type == ''
+                                || attribute.swatch_type == 'dropdown'
+                            ) {
+                                var element = document.getElementById(`attribute_${attribute.id}`);
+
+                                if (element) {
+                                    element.selectedIndex = "0";
+                                }
+                            } else {
+                                var elements = document.getElementsByName(`super_attribute[${attribute.id}]`);
+
+                                elements.forEach(function(element) {
+                                    element.checked = false;
+                                })
+                            }
+                        },
+
+                        getAttributeOptions: function (attributeId) {
+                            var options;
+
+                            this.config.attributes.forEach(function(attribute, index) {
+                                if (attribute.id == attributeId) {
+                                    options = attribute.options;
+                                }
+                            })
+
+                            return options;
+                        },
+
+                        reloadPrice: function () {
+                            var selectedOptionCount = 0;
+
+                            this.childAttributes.forEach(function(attribute) {
+                                if (attribute.selectedIndex) {
+                                    selectedOptionCount++;
+                                }
+                            });
+
+                            var priceLabelElement = document.querySelector('.price-label');
+                            var priceElement = document.querySelector('.final-price');
+                            var regularPriceElement = document.querySelector('.regular-price');
+
+                            if (this.childAttributes.length == selectedOptionCount) {
+                                priceLabelElement.style.display = 'none';
+
+                                priceElement.innerHTML = this.config.variant_prices[this.simpleProduct].final_price.formated_price;
+
+                                if (regularPriceElement) {
+                                    regularPriceElement.innerHTML = this.config.variant_prices[this.simpleProduct].regular_price.formated_price;
+                                }
+
+                                eventBus.$emit('configurable-variant-selected-event', this.simpleProduct)
+                            } else {
+                                priceLabelElement.style.display = 'inline-block';
+
+                                priceElement.innerHTML = this.config.regular_price.formated_price;
+
+                                eventBus.$emit('configurable-variant-selected-event', 0)
+                            }
+                        },
+
+                        changeProductImages: function () {
+                            galleryImages.splice(0, galleryImages.length)
+
+                            this.galleryImages.forEach(function(image) {
+                                galleryImages.push(image)
+                            });
+
+                            if (this.simpleProduct) {
+                                this.config.variant_images[this.simpleProduct].forEach(function(image) {
+                                    galleryImages.unshift(image)
+                                });
+
+                                this.config.variant_videos[this.simpleProduct].forEach(function(video) {
+                                    galleryImages.unshift(video)
+                                });
+                            }
+
+                            galleryImages.forEach(function(image){
+                                if (image.type == 'video') {
+                                    image.small_image_url = image.medium_image_url = image.large_image_url = image.original_image_url= image.video_url;
+                                }
+                            });
+
+                            eventBus.$emit('configurable-variant-update-images-event', galleryImages);
+                        },
+
+                        changeStock: function (productId) {
+                            var inStockElement = document.querySelector('.disable-box-shadow');
+
+                            if (productId) {
+                                inStockElement.style.display= "block";
+                            } else {
+                                inStockElement.style.display= "none";
+                            }
+                        },
+                    }
+                });
+            })()
+        </script>
+    @endpush
+@endif
\ No newline at end of file
diff --git a/resources/themes/velocity/views/products/view/cross-sells.blade.php b/resources/themes/velocity/views/products/view/cross-sells.blade.php
new file mode 100644
index 000000000..f095c431b
--- /dev/null
+++ b/resources/themes/velocity/views/products/view/cross-sells.blade.php
@@ -0,0 +1,61 @@
+@foreach ($cart->items as $item)
+    <?php
+        $product = $item->product;
+
+        if ($product->cross_sells()->count()) {
+            $products[] = $product;
+            $products = array_unique($products);
+        }
+    ?>
+@endforeach
+
+@if (isset($products))
+
+    <card-list-header
+        heading="{{ __('shop::app.products.cross-sell-title') }}"
+        view-all="false"
+        row-class="pt20"
+    ></card-list-header>
+
+    <div class="carousel-products vc-full-screen">
+        <carousel-component
+            slides-per-page="6"
+            navigation-enabled="hide"
+            pagination-enabled="hide"
+            id="upsell-products-carousel"
+            :slides-count="{{ $product->cross_sells()->count() }}">
+            
+            @foreach($products as $product)
+                @foreach ($product->cross_sells()->paginate(2) as $index => $crossSellProduct)
+                    <slide slot="slide-{{ $index }}">
+                        @include ('shop::products.list.card', [
+                            'product' => $crossSellProduct,
+                            'addToCartBtnClass' => 'small-padding',
+                        ])
+                    </slide>
+                @endforeach
+            @endforeach
+        </carousel-component>
+    </div>
+
+    <div class="carousel-products vc-small-screen">
+        <carousel-component
+            :slides-count="{{ $product->cross_sells()->count() }}"
+            slides-per-page="2"
+            id="upsell-products-carousel"
+            navigation-enabled="hide"
+            pagination-enabled="hide">
+
+            @foreach($products as $product)
+                @foreach ($product->cross_sells()->paginate(2) as $index => $crossSellProduct)
+                    <slide slot="slide-{{ $index }}">
+                        @include ('shop::products.list.card', [
+                            'product' => $crossSellProduct,
+                            'addToCartBtnClass' => 'small-padding',
+                        ])
+                    </slide>
+                @endforeach
+            @endforeach
+        </carousel-component>
+    </div>
+@endif
\ No newline at end of file
diff --git a/resources/themes/velocity/views/products/view/description.blade.php b/resources/themes/velocity/views/products/view/description.blade.php
new file mode 100644
index 000000000..ab76a8a0b
--- /dev/null
+++ b/resources/themes/velocity/views/products/view/description.blade.php
@@ -0,0 +1,19 @@
+{!! view_render_event('bagisto.shop.products.view.description.before', ['product' => $product]) !!}
+
+    <accordian :title="'{{ __('shop::app.products.description') }}'" :active="true">
+        <div slot="header">
+            <h3 class="no-margin display-inbl">
+                {{ __('velocity::app.products.details') }}
+            </h3>
+
+            <i class="rango-arrow"></i>
+        </div>
+
+        <div slot="body">
+            <div class="full-description">
+                {!! $product->description !!}
+            </div>
+        </div>
+    </accordian>
+
+{!! view_render_event('bagisto.shop.products.view.description.after', ['product' => $product]) !!}
\ No newline at end of file
diff --git a/resources/themes/velocity/views/products/view/downloadable.blade.php b/resources/themes/velocity/views/products/view/downloadable.blade.php
new file mode 100644
index 000000000..ba76b7af4
--- /dev/null
+++ b/resources/themes/velocity/views/products/view/downloadable.blade.php
@@ -0,0 +1,64 @@
+@if ($product->type == 'downloadable')
+    {!! view_render_event('bagisto.shop.products.view.downloadable.before', ['product' => $product]) !!}
+
+    <div class="downloadable-container">
+
+        @if ($product->downloadable_samples->count())
+            <div class="sample-list">
+                <h3>{{ __('shop::app.products.samples') }}</h3>
+
+                <ul type="none">
+                    @foreach ($product->downloadable_samples as $sample)
+                        <li>
+                            <a class="remove-decoration" href="{{ route('shop.downloadable.download_sample', ['type' => 'sample', 'id' => $sample->id]) }}" target="_blank">
+                                {{ $sample->title }}
+                            </a>
+                        </li>
+                    @endforeach
+                </ul>
+            </div>
+        @endif
+
+        @if ($product->downloadable_links->count())
+            <div class=" link-list control-group" :class="[errors.has('links[]') ? 'has-error' : '']">
+                <h3>{{ __('shop::app.products.links') }}</h3>
+
+                <ul type="none" class="mt15">
+                    @foreach ($product->downloadable_links as $link)
+                        <li>
+                            <div class="checkbox col-12 ml10">
+                                <input
+                                    name="links[]"
+                                    type="checkbox"
+                                    id="{{ $link->id }}"
+                                    v-validate="'required'"
+                                    value="{{ $link->id }}"
+                                    data-vv-as="&quot;{{ __('shop::app.products.links') }}&quot;" />
+
+                                <span>{{ $link->title . ' + ' . core()->currency($link->price) }}</span>
+
+                                @if ($link->sample_file || $link->sample_url)
+                                    <a
+                                        target="_blank"
+                                        class="remove-decoration"
+                                        href="{{ route('shop.downloadable.download_sample', [
+                                            'type' => 'link',
+                                            'id' => $link->id
+                                        ]) }}">
+
+                                        {{ __('shop::app.products.sample') }}
+                                    </a>
+                            </div>
+
+                            @endif
+                        </li>
+                    @endforeach
+                </ul>
+
+                <span class="control-error" v-if="errors.has('links[]')">@{{ errors.first('links[]') }}</span>
+            </div>
+        @endif
+    </div>
+
+    {!! view_render_event('bagisto.shop.products.view.downloadable.before', ['product' => $product]) !!}
+@endif
\ No newline at end of file
diff --git a/resources/themes/velocity/views/products/view/gallery.blade.php b/resources/themes/velocity/views/products/view/gallery.blade.php
new file mode 100644
index 000000000..ed9788a7a
--- /dev/null
+++ b/resources/themes/velocity/views/products/view/gallery.blade.php
@@ -0,0 +1,177 @@
+@inject ('wishListHelper', 'Webkul\Customer\Helpers\Wishlist')
+
+@php
+    $images = productimage()->getGalleryImages($product);
+    $videos = productvideo()->getVideos($product);
+
+    $videoData = $imageData = [];
+
+    foreach ($videos as $key => $video) {
+        $videoData[$key]['type'] = $video['type'];
+        $videoData[$key]['large_image_url'] = $videoData[$key]['small_image_url']= $videoData[$key]['medium_image_url']= $videoData[$key]['original_image_url'] = $video['video_url'];
+    }
+
+    foreach ($images as $key => $image) {
+        $imageData[$key]['type'] = '';
+        $imageData[$key]['large_image_url']    = $image['large_image_url'];
+        $imageData[$key]['small_image_url']    = $image['small_image_url'];
+        $imageData[$key]['medium_image_url']   = $image['medium_image_url'];
+        $imageData[$key]['original_image_url'] = $image['original_image_url'];
+    }
+
+    $images = array_merge($imageData, $videoData);
+@endphp
+
+{!! view_render_event('bagisto.shop.products.view.gallery.before', ['product' => $product]) !!}
+
+    <div class="product-image-group">
+        <div class="row col-12">
+            <magnify-image src="{{ $images[0]['large_image_url'] }}" type="{{ $images[0]['type'] }}">
+            </magnify-image>
+        </div>
+
+        <div class="row col-12">
+            <product-gallery></product-gallery>
+        </div>
+
+    </div>
+
+{!! view_render_event('bagisto.shop.products.view.gallery.after', ['product' => $product]) !!}
+
+<script type="text/x-template" id="product-gallery-template">
+    <ul class="thumb-list col-12 row ltr" type="none">
+        <li class="arrow left" @click="scroll('prev')" v-if="thumbs.length > 4">
+            <i class="rango-arrow-left fs24"></i>
+        </li>
+
+        <carousel-component
+            slides-per-page="4"
+            :id="galleryCarouselId"
+            pagination-enabled="hide"
+            navigation-enabled="hide"
+            add-class="product-gallery"
+            :slides-count="thumbs.length">
+
+            <slide :slot="`slide-${index}`" v-for="(thumb, index) in thumbs">
+                <li
+                    @mouseover="changeImage({
+                        largeImageUrl: thumb.large_image_url,
+                        originalImageUrl: thumb.original_image_url,
+                        currentType: thumb.type
+                    })"
+                    :class="`thumb-frame ${index + 1 == 4 ? '' : 'mr5'} ${thumb.large_image_url == currentLargeImageUrl ? 'active' : ''}`"
+                    >
+
+                    <video v-if="thumb.type == 'video'" width="110" height="110" controls>
+                        <source :src="thumb.small_image_url" type="video/mp4">
+                        {{ __('admin::app.catalog.products.not-support-video') }}
+                    </video>
+
+                    <div v-else
+                        class="bg-image"
+                        :style="`background-image: url(${thumb.small_image_url})`">
+                    </div>
+                </li>
+            </slide>
+        </carousel-component>
+
+        <li class="arrow right" @click="scroll('next')" v-if="thumbs.length > 4">
+            <i class="rango-arrow-right fs24"></i>
+        </li>
+    </ul>
+</script>
+
+@push('scripts')
+    <script type="text/javascript">
+        (() => {
+            var galleryImages = @json($images);
+
+            Vue.component('product-gallery', {
+                template: '#product-gallery-template',
+                data: function() {
+                    return {
+                        images: galleryImages,
+                        thumbs: [],
+                        galleryCarouselId: 'product-gallery-carousel',
+                        currentLargeImageUrl: '',
+                        currentOriginalImageUrl: '',
+                        currentType: '',
+                        counter: {
+                            up: 0,
+                            down: 0,
+                        }
+                    }
+                },
+
+                watch: {
+                    'images': function(newVal, oldVal) {
+                        if (this.images[0]) {
+                            this.changeImage({
+                                largeImageUrl: this.images[0]['large_image_url'],
+                                originalImageUrl: this.images[0]['original_image_url'],
+                                currentType: this.images[0]['type']
+                            })
+                        }
+
+                        this.prepareThumbs()
+                    }
+                },
+
+                created: function() {
+                    this.changeImage({
+                        largeImageUrl: this.images[0]['large_image_url'],
+                        originalImageUrl: this.images[0]['original_image_url'],
+                        currentType: this.images[0]['type']
+                    });
+
+                    eventBus.$on('configurable-variant-update-images-event', this.updateImages);
+
+                    this.prepareThumbs();
+                },
+
+                methods: {
+                    updateImages: function (galleryImages) {
+                        this.images = galleryImages;
+                    },
+
+                    prepareThumbs: function() {
+                        this.thumbs = [];
+
+                        this.images.forEach(image => {
+                            this.thumbs.push(image);
+                        });
+                    },
+
+                    changeImage: function({largeImageUrl, originalImageUrl, currentType}) {
+                        this.currentLargeImageUrl = largeImageUrl;
+
+                        this.currentOriginalImageUrl = originalImageUrl;
+
+                        this.currentType = currentType;
+
+                        this.$root.$emit('changeMagnifiedImage', {
+                            smallImageUrl: this.currentOriginalImageUrl,
+                            largeImageUrl: this.currentLargeImageUrl,
+                            currentType  : this.currentType
+                        });
+
+                        let productImage = $('.vc-small-product-image');
+                        if (productImage && productImage[0]) {
+                            productImage = productImage[0];
+
+                            productImage.src = this.currentOriginalImageUrl;
+                        }
+                    },
+
+                    scroll: function (navigateTo) {
+                        let navigation = $(`#${this.galleryCarouselId} .VueCarousel-navigation .VueCarousel-navigation-${navigateTo}`);
+
+                        if (navigation && (navigation = navigation[0])) {
+                            navigation.click();
+                        }
+                    },
+                }
+            });
+        })()
+    </script>
+@endpush
\ No newline at end of file
diff --git a/resources/themes/velocity/views/products/view/grouped-products.blade.php b/resources/themes/velocity/views/products/view/grouped-products.blade.php
new file mode 100644
index 000000000..06ca41b48
--- /dev/null
+++ b/resources/themes/velocity/views/products/view/grouped-products.blade.php
@@ -0,0 +1,38 @@
+@if ($product->type == 'grouped')
+    {!! view_render_event('bagisto.shop.products.view.grouped_products.before', ['product' => $product]) !!}
+
+    <div class="grouped-product-container">
+        @if ($product->grouped_products->count())
+            <div class="grouped-product-list">
+                <ul type="none">
+                    <li>
+                        <span>{{ __('shop::app.products.name') }}</span>
+                        <span>{{ __('shop::app.products.qty') }}</span>
+                    </li>
+                    @foreach ($product->grouped_products as $groupedProduct)
+                        @if($groupedProduct->associated_product->getTypeInstance()->isSaleable())
+                            <li>
+                                <span class="name">
+                                    {{ $groupedProduct->associated_product->name }}
+
+                                    @include ('shop::products.price', ['product' => $groupedProduct->associated_product])
+                                </span>
+
+                                <span class="qty">
+                                    <quantity-changer
+                                        :control-name="'qty[{{$groupedProduct->associated_product_id}}]'"
+                                        :validations="'required|numeric|min_value:0'"
+                                        quantity="{{ $groupedProduct->qty }}"
+                                        min-quantity="0">
+                                    </quantity-changer>
+                                </span>
+                            </li>
+                        @endif
+                    @endforeach
+                </ul>
+            </div>
+        @endif
+    </div>
+
+    {!! view_render_event('bagisto.shop.products.view.grouped_products.before', ['product' => $product]) !!}
+@endif
\ No newline at end of file
diff --git a/resources/themes/velocity/views/products/view/related-products.blade.php b/resources/themes/velocity/views/products/view/related-products.blade.php
new file mode 100644
index 000000000..af9fd1759
--- /dev/null
+++ b/resources/themes/velocity/views/products/view/related-products.blade.php
@@ -0,0 +1,49 @@
+<?php
+    $relatedProducts = $product->related_products()->get();
+?>
+
+@if ($relatedProducts->count())
+    <card-list-header
+        heading="{{ __('shop::app.products.related-product-title') }}"
+        view-all="false"
+        row-class="pt20"
+    ></card-list-header>
+
+    <div class="carousel-products vc-full-screen">
+        <carousel-component
+            slides-per-page="6"
+            navigation-enabled="hide"
+            pagination-enabled="hide"
+            id="related-products-carousel"
+            :slides-count="{{ sizeof($relatedProducts) }}">
+
+            @foreach ($relatedProducts as $index => $relatedProduct)
+                <slide slot="slide-{{ $index }}">
+                    @include ('shop::products.list.card', [
+                        'product' => $relatedProduct,
+                        'addToCartBtnClass' => 'small-padding',
+                    ])
+                </slide>
+            @endforeach
+        </carousel-component>
+    </div>
+
+    <div class="carousel-products vc-small-screen">
+        <carousel-component
+            :slides-count="{{ sizeof($relatedProducts) }}"
+            slides-per-page="2"
+            id="related-products-carousel"
+            navigation-enabled="hide"
+            pagination-enabled="hide">
+
+            @foreach ($relatedProducts as $index => $relatedProduct)
+                <slide slot="slide-{{ $index }}">
+                    @include ('shop::products.list.card', [
+                        'product' => $relatedProduct,
+                        'addToCartBtnClass' => 'small-padding',
+                    ])
+                </slide>
+            @endforeach
+        </carousel-component>
+    </div>
+@endif
\ No newline at end of file
diff --git a/resources/themes/velocity/views/products/view/reviews.blade.php b/resources/themes/velocity/views/products/view/reviews.blade.php
new file mode 100644
index 000000000..b45d02b57
--- /dev/null
+++ b/resources/themes/velocity/views/products/view/reviews.blade.php
@@ -0,0 +1,208 @@
+@inject ('reviewHelper', 'Webkul\Product\Helpers\Review')
+@inject ('customHelper', 'Webkul\Velocity\Helpers\Helper')
+
+@php
+    $reviews = $reviewHelper->getReviews($product)->paginate(10);
+
+    if (! isset($total)) {
+        $total = $reviewHelper->getTotalReviews($product);
+        $avgRatings = $reviewHelper->getAverageRating($product);
+        $avgStarRating = round($avgRatings);
+    }
+
+    $percentageRatings = $reviewHelper->getPercentageRating($product);
+@endphp
+
+{!! view_render_event('bagisto.shop.products.review.before', ['product' => $product]) !!}
+
+    @if ($total)
+        @if (isset($accordian) && $accordian)
+            <accordian :active="true">
+                {{-- customer ratings --}}
+                <div slot="header" class="col-lg-12 no-padding">
+                    <h3 class="display-inbl">
+                        {{ __('velocity::app.products.customer-rating') }}
+                    </h3>
+
+                    <i class="rango-arrow"></i>
+                </div>
+
+                <div class="row customer-rating" slot="body">
+                    <div class="row full-width text-center mb30">
+                        <div class="col-lg-12 col-xl-6">
+                            <h4 class="col-lg-12 fs16">{{ $avgRatings }} {{ __('shop::app.reviews.star') }}</h4>
+
+                            <star-ratings
+                                :size="24"
+                                :ratings="{{ $avgStarRating }}"
+                            ></star-ratings>
+
+                            <span class="fs16 fw6 display-block">
+                                {{ __('shop::app.reviews.ratingreviews', [
+                                    'rating' => $avgRatings,
+                                    'review' => $total])
+                                }}
+                            </span>
+
+                            @if (core()->getConfigData('catalog.products.review.guest_review') || auth()->guard('customer')->check())
+                                <a href="{{ route('shop.reviews.create', ['slug' => $product->url_key ]) }}">
+                                    <button type="button" class="theme-btn light">{{ __('velocity::app.products.write-your-review') }}</button>
+                                </a>
+                            @endif
+                        </div>
+
+                        <div class="col-lg-12 col-xl-6">
+
+                            @for ($i = 5; $i >= 1; $i--)
+
+                                <div class="row">
+                                    <span class="col-3 no-padding fs16 fw6">{{ $i }} {{ __('shop::app.reviews.star') }}</span>
+
+                                    <div class="col-7 rating-bar" title="{{ $percentageRatings[$i] }}%">
+                                        <div style="width: {{ $percentageRatings[$i] }}%"></div>
+                                    </div>
+
+                                    <span class="col-2 no-padding fs16">{{ $percentageRatings[$i] }} %</span>
+                                </div>
+                            @endfor
+
+                        </div>
+                    </div>
+                </div>
+            </accordian>
+        @else
+            <div class="row customer-rating">
+                <div class="row full-width text-center mb30">
+                    <div class="col-lg-12 col-xl-6">
+                        <h3 class="col-lg-12">{{ $avgRatings }} {{ __('shop::app.reviews.star') }}</h3>
+
+                        <star-ratings
+                            :size="24"
+                            :ratings="{{ $avgStarRating }}"
+                        ></star-ratings>
+
+                        <span class="fs16 display-block">
+                            {{ __('shop::app.reviews.ratingreviews', [
+                                'rating' => $avgRatings,
+                                'review' => $total])
+                            }}
+                        </span>
+
+                        @if (core()->getConfigData('catalog.products.review.guest_review') || auth()->guard('customer')->check())
+                            <a href="{{ route('shop.reviews.create', ['slug' => $product->url_key ]) }}">
+                                <button type="button" class="theme-btn light">{{ __('velocity::app.products.write-your-review') }}</button>
+                            </a>
+                        @endif
+                    </div>
+
+                    <div class="col-lg-12 col-xl-6">
+
+                        @for ($i = 5; $i >= 1; $i--)
+
+                            <div class="row">
+                                <span class="col-3 no-padding fs16 fw6">{{ $i }} Star</span>
+
+                                <div class="col-7 rating-bar" title="{{ $percentageRatings[$i] }}%">
+                                    <div style="width: {{ $percentageRatings[$i] }}%"></div>
+                                </div>
+
+                                <span class="col-2 no-padding fs16">{{ $percentageRatings[$i] }} %</span>
+                            </div>
+                        @endfor
+
+                    </div>
+                </div>
+            </div>
+        @endif
+
+        @if (isset($accordian) && $accordian)
+            <accordian :title="'{{ __('shop::app.products.total-reviews') }}'" :active="true">
+                {{-- customer reviews --}}
+                <div slot="header" class="col-lg-12 no-padding">
+                    <h3 class="display-inbl">
+                        {{ __('velocity::app.products.reviews-title') }}
+                    </h3>
+
+                    <i class="rango-arrow"></i>
+                </div>
+
+                <div class="customer-reviews" slot="body">
+                    @foreach ($reviews as $review)
+                        <div class="row">
+                            <h4 class="col-lg-12 fs18">{{ $review->title }}</h4>
+
+                            <star-ratings
+                                :ratings="{{ $review->rating }}"
+                                push-class="mr10 fs16 col-lg-12"
+                            ></star-ratings>
+
+                            <div class="review-description col-lg-12">
+                                <span>{{ $review->comment }}</span>
+                            </div>
+
+                            <div class="col-lg-12 mt5">
+                                <span>{{ __('velocity::app.products.review-by') }} -</span>
+
+                                <span class="fs16 fw6">
+                                    {{ $review->name }},
+                                </span>
+
+                                <span>{{ core()->formatDate($review->created_at, 'F d, Y') }}
+                                </span>
+                            </div>
+                        </div>
+                    @endforeach
+
+                    <a
+                        href="{{ route('shop.reviews.index', ['slug' => $product->url_key ]) }}"
+                        class="mb20 link-color"
+                    >{{ __('velocity::app.products.view-all-reviews') }}</a>
+                </div>
+            </accordian>
+        @else
+            <h3 class="display-inbl mb20 col-lg-12 no-padding">
+                {{ __('velocity::app.products.reviews-title') }}
+            </h3>
+
+            <div class="customer-reviews">
+                @foreach ($reviews as $review)
+                    <div class="row">
+                        <h4 class="col-lg-12 fs18">{{ $review->title }}</h4>
+
+                        <star-ratings
+                            :ratings="{{ $review->rating }}"
+                            push-class="mr10 fs16 col-lg-12"
+                        ></star-ratings>
+
+                        <div class="review-description col-lg-12">
+                            <span>{{ $review->comment }}</span>
+                        </div>
+
+                        <div class="col-lg-12 mt5">
+                            @if ("{{ $review->name }}")
+                                <span>{{ __('velocity::app.products.review-by') }} -</span>
+
+                                <label>
+                                    {{ $review->name }},
+                                </label>
+                            @endif
+
+                            <span>{{ core()->formatDate($review->created_at, 'F d, Y') }}
+                            </span>
+                        </div>
+                    </div>
+                @endforeach
+            </div>
+        @endif
+
+    @else
+        @if (core()->getConfigData('catalog.products.review.guest_review') || auth()->guard('customer')->check())
+            <div class="customer-rating" style="border: none">
+                <a href="{{ route('shop.reviews.create', ['slug' => $product->url_key ]) }}">
+                    <button type="button" class="theme-btn light">{{ __('velocity::app.products.write-your-review') }}</button>
+                </a>
+            </div>
+        @endif
+    @endif
+
+{!! view_render_event('bagisto.shop.products.review.after', ['product' => $product]) !!}
\ No newline at end of file
diff --git a/resources/themes/velocity/views/products/view/small-view.blade.php b/resources/themes/velocity/views/products/view/small-view.blade.php
new file mode 100644
index 000000000..26a7aa7a6
--- /dev/null
+++ b/resources/themes/velocity/views/products/view/small-view.blade.php
@@ -0,0 +1,13 @@
+@php
+    $productBaseImage = productimage()->getProductBaseImage($product);
+@endphp
+
+<div class="col-lg-3 col-md-12">
+    <a class="row" href="{{ route('shop.productOrCategory.index', $product->url_key) }}">
+        <img src="{{ $productBaseImage['medium_image_url'] }}" class="col-12" alt="" />
+    </a>
+
+    <a class="row pt15 unset" href="{{ route('shop.productOrCategory.index', $product->url_key) }}">
+        <h2 class="col-12 fw6 link-color">{{ $product->name }}</h2>
+    </a>
+</div>
\ No newline at end of file
diff --git a/resources/themes/velocity/views/products/view/stock.blade.php b/resources/themes/velocity/views/products/view/stock.blade.php
new file mode 100644
index 000000000..bb694f6b4
--- /dev/null
+++ b/resources/themes/velocity/views/products/view/stock.blade.php
@@ -0,0 +1,17 @@
+{!! view_render_event('bagisto.shop.products.view.stock.before', ['product' => $product]) !!}
+
+<div class="col-12 availability">
+    <button
+        type="button"
+        class="{{! $product->haveSufficientQuantity(1) ? '' : 'active' }} disable-box-shadow">
+            @if ( $product->haveSufficientQuantity(1) === true )
+                {{ __('shop::app.products.in-stock') }}
+            @elseif ( $product->haveSufficientQuantity(1) > 0 )
+                {{ __('shop::app.products.available-for-order') }}
+            @else
+                {{ __('shop::app.products.out-of-stock') }}
+            @endif
+    </button>
+</div>
+
+{!! view_render_event('bagisto.shop.products.view.stock.after', ['product' => $product]) !!}
\ No newline at end of file
diff --git a/resources/themes/velocity/views/products/view/up-sells.blade.php b/resources/themes/velocity/views/products/view/up-sells.blade.php
new file mode 100644
index 000000000..ec527b146
--- /dev/null
+++ b/resources/themes/velocity/views/products/view/up-sells.blade.php
@@ -0,0 +1,49 @@
+<?php
+    $productUpSells = $product->up_sells()->get();
+?>
+
+@if ($productUpSells->count())
+    <card-list-header
+        heading="{{ __('shop::app.products.up-sell-title') }}"
+        view-all="false"
+        row-class="pt20"
+    ></card-list-header>
+
+    <div class="carousel-products vc-full-screen">
+        <carousel-component
+            slides-per-page="6"
+            navigation-enabled="hide"
+            pagination-enabled="hide"
+            id="upsell-products-carousel"
+            :slides-count="{{ sizeof($productUpSells) }}">
+
+            @foreach ($productUpSells as $index => $upSellProduct)
+                <slide slot="slide-{{ $index }}">
+                    @include ('shop::products.list.card', [
+                        'product' => $upSellProduct,
+                        'addToCartBtnClass' => 'small-padding',
+                    ])
+                </slide>
+            @endforeach
+        </carousel-component>
+    </div>
+
+    <div class="carousel-products vc-small-screen">
+        <carousel-component
+            :slides-count="{{ sizeof($productUpSells) }}"
+            slides-per-page="2"
+            id="upsell-products-carousel"
+            navigation-enabled="hide"
+            pagination-enabled="hide">
+
+            @foreach ($productUpSells as $index => $upSellProduct)
+                <slide slot="slide-{{ $index }}">
+                    @include ('shop::products.list.card', [
+                        'product' => $upSellProduct,
+                        'addToCartBtnClass' => 'small-padding',
+                    ])
+                </slide>
+            @endforeach
+        </carousel-component>
+    </div>
+@endif
\ No newline at end of file
diff --git a/resources/themes/velocity/views/products/wishlist.blade.php b/resources/themes/velocity/views/products/wishlist.blade.php
new file mode 100644
index 000000000..66573a0a1
--- /dev/null
+++ b/resources/themes/velocity/views/products/wishlist.blade.php
@@ -0,0 +1,39 @@
+@inject ('wishListHelper', 'Webkul\Customer\Helpers\Wishlist')
+
+{!! view_render_event('bagisto.shop.products.wishlist.before') !!}
+
+    @auth('customer')
+        @php
+            /* search wishlist on the basis of product's id so that wishlist id can be catched */
+            $wishlist = $wishListHelper->getWishlistProduct($product);
+
+            /* link making */
+            $href = isset($route) ? $route : ($wishlist ? route('customer.wishlist.remove', $wishlist->id) : route('customer.wishlist.add', $product->product_id));
+
+            /* title */
+            $title = $wishlist ? __('velocity::app.shop.wishlist.remove-wishlist-text') : __('velocity::app.shop.wishlist.add-wishlist-text');
+        @endphp
+
+        <a
+            class="unset wishlist-icon {{ $addWishlistClass ?? '' }} text-right"
+            href="{{ $href }}"
+            title="{{ $title }}">
+
+            <wishlist-component active="{{ $wishlist ? false : true }}"></wishlist-component>
+
+            @if (isset($text))
+                {!! $text !!}
+            @endif
+        </a>
+    @endauth
+
+    @guest('customer')
+        <a
+            class="unset wishlist-icon {{ $addWishlistClass ?? '' }} text-right"
+            href="{{ route('customer.wishlist.add', $product->product_id) }}"
+            title="{{ __('velocity::app.shop.wishlist.add-wishlist-text') }}">
+            <wishlist-component active="false"></wishlist-component>
+        </a>
+    @endauth
+
+{!! view_render_event('bagisto.shop.products.wishlist.after') !!}
\ No newline at end of file
diff --git a/resources/themes/velocity/views/search/search.blade.php b/resources/themes/velocity/views/search/search.blade.php
new file mode 100644
index 000000000..962f820e1
--- /dev/null
+++ b/resources/themes/velocity/views/search/search.blade.php
@@ -0,0 +1,155 @@
+@inject ('toolbarHelper', 'Webkul\Product\Helpers\Toolbar')
+
+@extends('shop::layouts.master')
+
+@section('page_title')
+    {{ __('shop::app.search.page-title') }}
+@endsection
+
+@push('css')
+    <style type="text/css">
+        .category-container {
+            min-height: unset;
+        }
+
+        .toolbar-wrapper .col-4:first-child {
+            display: none !important;
+        }
+
+        .toolbar-wrapper .col-4:last-child {
+            right: 0;
+            position: absolute;
+        }
+
+
+        @media only screen and (max-width: 992px) {
+            .main-content-wrapper .vc-header {
+                box-shadow: unset;
+            }
+
+             .toolbar-wrapper .col-4:last-child {
+                left: 175px;
+            }
+
+            .toolbar-wrapper .sorter {
+                left: 35px;
+                position: relative;
+            }
+
+            .quick-view-btn-container,
+            .rango-zoom-plus,
+            .quick-view-in-list {
+                display: none;
+            }
+
+        }
+    </style>
+@endpush
+
+@section('content-wrapper')
+    <div class="container category-page-wrapper">
+        <search-component></search-component>
+    </div>
+@endsection
+
+@push('scripts')
+    <script type="text/x-template" id="image-search-result-component-template">
+        <div class="image-search-result">
+            <div class="searched-image">
+                <img :src="searchedImageUrl" alt=""/>
+            </div>
+
+            <div class="searched-terms">
+                <h3 class="fw6 fs20 mb-4">
+                    {{ __('shop::app.search.analysed-keywords') }}
+                </h3>
+
+                <div class="term-list">
+                    <a v-for="term in searched_terms" :href="'{{ route('shop.search.index') }}?term=' + term.slug">
+                        @{{ term.name }}
+                    </a>
+                </div>
+            </div>
+        </div>
+    </script>
+
+    <script type="text/x-template" id="seach-component-template">
+        <section class="search-container row category-container">
+            @if (request('image-search'))
+                <image-search-result-component></image-search-result-component>
+            @endif
+
+            @if ($results && $results->count())
+                <div class="filters-container col-12" style="
+                    margin-top: 20px;
+                    padding-left: 0px !important;
+                    padding-bottom: 10px !important;
+                ">
+                    @include ('shop::products.list.toolbar')
+                </div>
+            @endif
+
+            @if (! $results)
+                <h2 class="fw6 col-12">{{ __('shop::app.search.no-results') }}</h2>
+            @else
+                @if ($results->isEmpty())
+                    <h2 class="fw6 col-12">{{ __('shop::app.products.whoops') }}</h2>
+                    <span class="col-12">{{ __('shop::app.search.no-results') }}</span>
+                @else
+                    @if ($results->total() == 1)
+                        <h5 class="fw6 col-12 mb20">
+                            {{ $results->total() }} {{ __('shop::app.search.found-result') }}
+                        </h5>
+                    @else
+                        <h2 class="fw6 col-12 mb20">
+                            {{ $results->total() }} {{ __('shop::app.search.found-results') }}
+                        </h2>
+                    @endif
+
+                    @foreach ($results as $productFlat)
+                        @if ($toolbarHelper->getCurrentMode() == 'grid')
+                            @include('shop::products.list.card', ['product' => $productFlat->product])
+                        @else
+                            @include('shop::products.list.card', [
+                                'list' => true,
+                                'product' => $productFlat->product
+                            ])
+                        @endif
+                    @endforeach
+
+                    @include('ui::datagrid.pagination')
+                @endif
+            @endif
+        </section>
+    </script>
+
+    <script>
+        Vue.component('search-component', {
+            template: '#seach-component-template',
+        });
+
+        Vue.component('image-search-result-component', {
+            template: '#image-search-result-component-template',
+
+            data: function() {
+                return {
+                    searched_terms: [],
+                    searchedImageUrl: localStorage.searchedImageUrl,
+                }
+            },
+
+            created: function() {
+                if (localStorage.searched_terms && localStorage.searched_terms != '') {
+                    this.searched_terms = localStorage.searched_terms.split('_');
+
+                    this.searched_terms = this.searched_terms.map(term => {
+                        return {
+                            name: term,
+                            slug: term.split(' ').join('+'),
+                        }
+                    });
+                }
+            }
+        });
+    </script>
+@endpush
\ No newline at end of file