diff --git a/packages/Webkul/Velocity/publishable/assets/css/velocity.css b/packages/Webkul/Velocity/publishable/assets/css/velocity.css
index d586df90e..640d0bf2f 100644
--- a/packages/Webkul/Velocity/publishable/assets/css/velocity.css
+++ b/packages/Webkul/Velocity/publishable/assets/css/velocity.css
@@ -1713,6 +1713,18 @@
   position: relative;
 }
 
+#address-section .form-header h3 {
+  margin-bottom: 20px;
+}
+
+.attached-products-wrapper {
+  margin-top: 20px;
+}
+
+#related-products-carousel #product-card-new:first-child {
+  margin-left: 0px !important;
+}
+
 /* @author Shubham Mehrotra */
 body {
   overflow-x: hidden;
diff --git a/packages/Webkul/Velocity/publishable/assets/js/velocity.js b/packages/Webkul/Velocity/publishable/assets/js/velocity.js
index 5267f98c5..d9d2d9d5a 100644
--- a/packages/Webkul/Velocity/publishable/assets/js/velocity.js
+++ b/packages/Webkul/Velocity/publishable/assets/js/velocity.js
@@ -1121,12 +1121,12 @@ $(document).ready(function () {
 
                 if (categoryListContainer) {
                     categoryListContainer.classList.toggle('hide');
+                }
 
-                    if (rightBarContainer.className.search('col-10') > -1) {
-                        rightBarContainer.className = rightBarContainer.className.replace('col-10', 'col-12');
-                    } else {
-                        rightBarContainer.className = rightBarContainer.className.replace('col-12', 'col-10');
-                    }
+                if (rightBarContainer.className.search('col-10') > -1) {
+                    rightBarContainer.className = rightBarContainer.className.replace('col-10', 'col-12');
+                } else {
+                    rightBarContainer.className = rightBarContainer.className.replace('col-12', 'col-10');
                 }
             },
 
diff --git a/packages/Webkul/Velocity/src/Resources/assets/js/UI/components/card-header.vue b/packages/Webkul/Velocity/src/Resources/assets/js/UI/components/card-header.vue
index fd756986e..daae2ca71 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/js/UI/components/card-header.vue
+++ b/packages/Webkul/Velocity/src/Resources/assets/js/UI/components/card-header.vue
@@ -14,8 +14,8 @@
                         :key="index"
                         @click="switchTab"
                         class="col-lg-2 no-padding"
-                        v-for="(tab, index) in tabs.slice(0, 3)"
-                    >
+                        v-for="(tab, index) in tabs.slice(0, 3)">
+
                         <h2 class="fs14 fw6 cursor-pointer tab" :class="index == 0 ? 'active' : ''">{{ tab }}</h2>
                     </div>
                 </template>
diff --git a/packages/Webkul/Velocity/src/Resources/assets/js/app.js b/packages/Webkul/Velocity/src/Resources/assets/js/app.js
index fc990079d..043f2cf56 100755
--- a/packages/Webkul/Velocity/src/Resources/assets/js/app.js
+++ b/packages/Webkul/Velocity/src/Resources/assets/js/app.js
@@ -44,12 +44,12 @@ $(document).ready(function () {
 
                 if (categoryListContainer) {
                     categoryListContainer.classList.toggle('hide');
+                }
 
-                    if (rightBarContainer.className.search('col-10') > -1) {
-                        rightBarContainer.className = rightBarContainer.className.replace('col-10', 'col-12');
-                    } else {
-                        rightBarContainer.className = rightBarContainer.className.replace('col-12', 'col-10');
-                    }
+                if (rightBarContainer.className.search('col-10') > -1) {
+                    rightBarContainer.className = rightBarContainer.className.replace('col-10', 'col-12');
+                } else {
+                    rightBarContainer.className = rightBarContainer.className.replace('col-12', 'col-10');
                 }
             },
 
diff --git a/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss b/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss
index b9606fc13..455806a40 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss
@@ -999,4 +999,22 @@
 .slides-container {
     top: -70px;
     position: relative;
+}
+
+#address-section {
+    .form-header {
+        h3 {
+            margin-bottom: 20px;
+        }
+    }
+}
+
+.attached-products-wrapper {
+    margin-top: 20px;
+}
+
+#related-products-carousel {
+    #product-card-new:first-child {
+        margin-left: 0px !important;
+    }
 }
\ No newline at end of file
diff --git a/packages/Webkul/Velocity/src/Resources/views/checkout/onepage/customer-new-form.blade.php b/packages/Webkul/Velocity/src/Resources/views/checkout/onepage/customer-new-form.blade.php
index eb3576ac8..a4c4680cb 100644
--- a/packages/Webkul/Velocity/src/Resources/views/checkout/onepage/customer-new-form.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/checkout/onepage/customer-new-form.blade.php
@@ -1,3 +1,7 @@
+@php
+    $isCustomer = auth()->guard('customer')->check();
+@endphp
+
 @if (isset($shipping) && $shipping)
     <div class="row col-12" :class="[errors.has('address-form.shipping[first_name]') ? 'has-error' : '']">
         <label for="shipping[first_name]" class="required">
@@ -153,12 +157,21 @@
 
 @elseif (isset($billing) && $billing)
 
-    <div class="row col-12" :class="[errors.has('address-form.billing[email]') ? 'has-error' : '']">
+    <div :class="`row col-12 ${errors.has('address-form.billing[email]') ? 'has-error' : ''}`">
+
         <label for="billing[email]" class="required">
             {{ __('shop::app.checkout.onepage.email') }}
         </label>
 
-        <input type="text" 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"/>
+        <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]') }}
@@ -166,40 +179,61 @@
     </div>
 
     {{--  for customer login checkout   --}}
-    @if (! auth()->guard('customer')->check())
+    @if (! $isCustomer)
         @include('shop::checkout.onepage.customer-checkout')
     @endif
 
-    <div class="row col-12" :class="[errors.has('address-form.billing[first_name]') ? 'has-error' : '']">
+    <div :class="`row col-12 ${errors.has('address-form.billing[first_name]') ? 'has-error' : ''}`">
         <label for="billing[first_name]" class="required">
             {{ __('shop::app.checkout.onepage.first-name') }}
         </label>
 
-        <input type="text" 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;"/>
+        <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="row col-12" :class="[errors.has('address-form.billing[last_name]') ? 'has-error' : '']">
+    <div :class="`row col-12 ${errors.has('address-form.billing[last_name]') ? 'has-error' : ''}`">
         <label for="billing[last_name]" class="required">
             {{ __('shop::app.checkout.onepage.last-name') }}
         </label>
 
-        <input type="text" v-validate="'required'" class="control" id="billing[last_name]" name="billing[last_name]" v-model="address.billing.last_name" data-vv-as="&quot;{{ __('shop::app.checkout.onepage.last-name') }}&quot;"/>
+        <input
+            type="text"
+            v-validate="'required'"
+            class="control"
+            id="billing[last_name]"
+            name="billing[last_name]"
+            v-model="address.billing.last_name"
+            data-vv-as="&quot;{{ __('shop::app.checkout.onepage.last-name') }}&quot;" />
 
         <span class="control-error" v-if="errors.has('address-form.billing[last_name]')">
             @{{ errors.first('address-form.billing[last_name]') }}
         </span>
     </div>
 
-    <div class="row col-12" :class="[errors.has('address-form.billing[address1][]') ? 'has-error' : '']">
+    <div :class="`row col-12 ${errors.has('address-form.billing[address1][]') ? 'has-error' : ''}`">
         <label for="billing_address_0" class="required">
             {{ __('shop::app.checkout.onepage.address1') }}
         </label>
 
-        <input type="text" 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;"/>
+        <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][]') }}
@@ -214,24 +248,38 @@
         </div>
     @endif
 
-    <div class="row col-12" :class="[errors.has('address-form.billing[city]') ? 'has-error' : '']">
+    <div :class="`row col-12 ${errors.has('address-form.billing[city]') ? 'has-error' : ''}`">
         <label for="billing[city]" class="required">
             {{ __('shop::app.checkout.onepage.city') }}
         </label>
 
-        <input type="text" 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;"/>
+        <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="row col-12" :class="[errors.has('address-form.billing[state]') ? 'has-error' : '']">
+    <div :class="`row col-12 ${errors.has('address-form.billing[state]') ? 'has-error' : ''}`">
         <label for="billing[state]" class="required">
             {{ __('shop::app.checkout.onepage.state') }}
         </label>
 
-        <input type="text" 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;"/>
+        <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;">
 
@@ -248,24 +296,39 @@
         </span>
     </div>
 
-    <div class="row col-12" :class="[errors.has('address-form.billing[postcode]') ? 'has-error' : '']">
+    <div :class="`row col-12 ${errors.has('address-form.billing[postcode]') ? 'has-error' : ''}`">
         <label for="billing[postcode]" class="required">
             {{ __('shop::app.checkout.onepage.postcode') }}
         </label>
 
-        <input type="text" 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;"/>
+        <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="row col-12" :class="[errors.has('address-form.billing[country]') ? 'has-error' : '']">
+    <div :class="`row col-12 ${errors.has('address-form.billing[country]') ? 'has-error' : ''}`">
         <label for="billing[country]" class="required">
             {{ __('shop::app.checkout.onepage.country') }}
         </label>
 
-        <select type="text" 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;">
+        <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)
@@ -280,12 +343,19 @@
         </span>
     </div>
 
-    <div class="row col-12" :class="[errors.has('address-form.billing[phone]') ? 'has-error' : '']">
+    <div :class="`row col-12 ${errors.has('address-form.billing[phone]') ? 'has-error' : ''}`">
         <label for="billing[phone]" class="required">
             {{ __('shop::app.checkout.onepage.phone') }}
         </label>
 
-        <input type="text" 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;"/>
+        <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]') }}
@@ -323,5 +393,10 @@
                 </span>
             </span>
         </div>
+        @php
+        @endphp
     @endauth
+
+    @guest('customer')
+    @endguest
 @endif
diff --git a/packages/Webkul/Velocity/src/Resources/views/home/index.blade.php b/packages/Webkul/Velocity/src/Resources/views/home/index.blade.php
index 8627e6734..86a720379 100644
--- a/packages/Webkul/Velocity/src/Resources/views/home/index.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/home/index.blade.php
@@ -43,7 +43,7 @@
 
     {!! view_render_event('bagisto.shop.home.content.before') !!}
 
-    {!! DbView::make($channel)->field('home_page_content')->with(['sliderData' => []])->render() !!}
+    {!! DbView::make($channel)->field('home_page_content')->with(['sliderData' => $sliderData])->render() !!}
 
     {{ view_render_event('bagisto.shop.home.content.after') }}
 
diff --git a/packages/Webkul/Velocity/src/Resources/views/products/view.blade.php b/packages/Webkul/Velocity/src/Resources/views/products/view.blade.php
index ab1bcab6b..5b22af8cd 100644
--- a/packages/Webkul/Velocity/src/Resources/views/products/view.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/products/view.blade.php
@@ -8,6 +8,8 @@
 
     $avgRatings = $reviewHelper->getAverageRating($product);
     $avgStarRating = ceil($avgRatings);
+
+    $showRecentlyViewed = false;
 @endphp
 
 @section('page_title')
@@ -23,101 +25,106 @@
 
     {!! view_render_event('bagisto.shop.products.view.before', ['product' => $product]) !!}
 
-    <section class="col-9 product-detail">
+    @if ($showRecentlyViewed)
+        <section class="col-7 offset-1 product-detail">
+    @else
+        <section class="col-10 offset-1 product-detail">
+    @endif
+            <div class="layouter">
+                <product-view>
+                    <div class="form-container">
+                        @csrf()
 
-        <div class="layouter">
-            <product-view>
-                <div class="form-container">
-                    @csrf()
+                        <input type="hidden" name="product_id" value="{{ $product->product_id }}">
 
-                    <input type="hidden" name="product_id" value="{{ $product->product_id }}">
+                        {{-- product-gallery --}}
+                        <div class="left col-lg-5">
+                            @include ('shop::products.view.gallery')
+                        </div>
 
-                    {{-- product-gallery --}}
-                    <div class="left col-lg-5">
-                        @include ('shop::products.view.gallery')
-                    </div>
+                        {{-- right-section --}}
+                        <div class="right col-lg-7 scrollable">
+                            {{-- product-info-section --}}
+                            <div class="row info">
+                                <h2 class="col-lg-12">{{ $product->name }}</h2>
 
-                    {{-- right-section --}}
-                    <div class="right col-lg-7 scrollable">
-                        {{-- product-info-section --}}
-                        <div class="row info">
-                            <h2 class="col-lg-12">{{ $product->name }}</h2>
+                                @if ($total)
+                                    <div class="reviews col-lg-12">
+                                        <star-ratings
+                                            :ratings="{{ $avgStarRating }}"
+                                            push-class="mr5"
+                                        ></star-ratings>
 
-                            @if ($total)
-                                <div class="reviews col-lg-12">
-                                    <star-ratings
-                                        :ratings="{{ $avgStarRating }}"
-                                        push-class="mr5"
-                                    ></star-ratings>
-
-                                    <div class="reviews">
-                                        <span>{{ $avgRatings }} Ratings and {{ $total }} Reviews</span>
+                                        <div class="reviews">
+                                            <span>{{ $avgRatings }} Ratings and {{ $total }} Reviews</span>
+                                        </div>
                                     </div>
+                                @endif
+
+                                @include ('shop::products.view.stock', ['product' => $product])
+
+                                <div class="col-12 price">
+                                    @include ('shop::products.price', ['product' => $product])
                                 </div>
-                            @endif
 
-                            @include ('shop::products.view.stock', ['product' => $product])
-
-                            <div class="col-12 price">
-                                @include ('shop::products.price', ['product' => $product])
+                                @include ('shop::products.add-to-cart', [
+                                    'product' => $product,
+                                    'showCartIcon' => false
+                                ])
                             </div>
 
-                            @include ('shop::products.add-to-cart', [
-                                'product' => $product,
-                                'showCartIcon' => false
+                            {!! view_render_event('bagisto.shop.products.view.short_description.before', ['product' => $product]) !!}
+
+                            <div class="description">
+                                <h3 class="col-lg-12">{{ __('velocity::app.products.short-description') }}</h3>
+
+                                {!! $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')
+
+                            @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>
-
-                        {!! view_render_event('bagisto.shop.products.view.short_description.before', ['product' => $product]) !!}
-
-                        <div class="description">
-                            <h3 class="col-lg-12">{{ __('velocity::app.products.short-description') }}</h3>
-
-                            {!! $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')
-
-                        @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>
-            </product-view>
-        </div>
+                </product-view>
+            </div>
 
-        @include ('shop::products.view.related-products')
+            @include ('shop::products.view.related-products')
 
-        @include ('shop::products.view.up-sells')
+            @include ('shop::products.view.up-sells')
 
     </section>
 
-    @include ('shop::products.list.recently-viewed')
+    @if ($showRecentlyViewed)
+        @include ('shop::products.list.recently-viewed')
+    @endif
 
     {!! view_render_event('bagisto.shop.products.view.after', ['product' => $product]) !!}
 @endsection
diff --git a/packages/Webkul/Velocity/src/Resources/views/products/view/related-products.blade.php b/packages/Webkul/Velocity/src/Resources/views/products/view/related-products.blade.php
new file mode 100644
index 000000000..7570fbef6
--- /dev/null
+++ b/packages/Webkul/Velocity/src/Resources/views/products/view/related-products.blade.php
@@ -0,0 +1,29 @@
+<?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>
+
+    <carousel-component
+        :slides-count="{{ sizeof($relatedProducts) }}"
+        slides-per-page="6"
+        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])
+            </slide>
+
+        @endforeach
+
+    </carousel-component>
+
+@endif
\ No newline at end of file