From 835bbbbf9d39f982a31b62841486fa032129e924 Mon Sep 17 00:00:00 2001
From: "shubhammehrotra.symfony@webkul.com"
 <shubhammehrotra.symfony@webkul.com>
Date: Wed, 8 Jan 2020 17:24:24 +0530
Subject: [PATCH 1/2] updates

---
 database/seeds/DatabaseSeeder.php             |   4 +-
 .../publishable/assets/css/velocity.css       | 131 ++++++++++--------
 .../src/Resources/assets/sass/app.scss        |  62 ++++-----
 .../Resources/assets/sass/components/app.scss |   2 +
 .../assets/sass/components/footer.scss        |  21 ++-
 .../assets/sass/components/home.scss          |   4 +-
 .../assets/sass/components/media.scss         |  42 ++++++
 .../Resources/views/UI/particals.blade.php    |   4 +-
 .../account/partials/sidemenu.blade.php       |   1 +
 .../signup/forgot-password.blade.php          |  89 ++++++------
 .../views/customers/signup/index.blade.php    |   1 -
 .../footer/footer-links/footer-left.blade.php |   2 +-
 .../footer-links/footer-middle.blade.php      |   6 +-
 .../footer-links/footer-right.blade.php       |  14 +-
 .../views/layouts/footer/index.blade.php      |   1 -
 .../footer/newsletter-subscription.blade.php  |  51 +++----
 .../views/layouts/header/index.blade.php      |   3 +-
 17 files changed, 254 insertions(+), 184 deletions(-)
 create mode 100644 packages/Webkul/Velocity/src/Resources/assets/sass/components/media.scss

diff --git a/database/seeds/DatabaseSeeder.php b/database/seeds/DatabaseSeeder.php
index 4ba37fd10..4b94fd2d1 100755
--- a/database/seeds/DatabaseSeeder.php
+++ b/database/seeds/DatabaseSeeder.php
@@ -1,8 +1,8 @@
 <?php
 
 use Illuminate\Database\Seeder;
+use Webkul\Velocity\Database\Seeders\VelocityMetaDataSeeder;
 use Webkul\Admin\Database\Seeders\DatabaseSeeder as BagistoDatabaseSeeder;
-use Webkul\Velocity\Database\Seeders\DatabaseSeeder as VelocityDatabaseSeeder;
 
 class DatabaseSeeder extends Seeder
 {
@@ -14,6 +14,6 @@ class DatabaseSeeder extends Seeder
     public function run()
     {
         $this->call(BagistoDatabaseSeeder::class);
-        $this->call(VelocityDatabaseSeeder::class);
+        $this->call(VelocityMetaDataSeeder::class);
     }
 }
diff --git a/packages/Webkul/Velocity/publishable/assets/css/velocity.css b/packages/Webkul/Velocity/publishable/assets/css/velocity.css
index 9044abc29..b78ee354d 100644
--- a/packages/Webkul/Velocity/publishable/assets/css/velocity.css
+++ b/packages/Webkul/Velocity/publishable/assets/css/velocity.css
@@ -7,31 +7,11 @@
   background-image: url("../images/Icon-Velocity.svg");
 }
 
-.router-link-active .velocity-icon,
-.active .velocity-icon {
+.router-link-active .velocity-icon, .active .velocity-icon {
   background-image: url("../images/Icon-Velocity-Active.svg");
 }
 
-.router-link-active.velocity-icon,
-.active.velocity-icon {
-  background-image: url("../images/Icon-Velocity-Active.svg");
-}
-
-.velocity-icon {
-  width: 60px;
-  height: 55px;
-  display: inline-block;
-  background-size: cover;
-  background-image: url("../images/Icon-Velocity.svg");
-}
-
-.router-link-active .velocity-icon,
-.active .velocity-icon {
-  background-image: url("../images/Icon-Velocity-Active.svg");
-}
-
-.router-link-active.velocity-icon,
-.active.velocity-icon {
+.router-link-active.velocity-icon, .active.velocity-icon {
   background-image: url("../images/Icon-Velocity-Active.svg");
 }
 
@@ -700,6 +680,22 @@
   content: "\E99F";
 }
 
+.velocity-icon {
+  width: 60px;
+  height: 55px;
+  display: inline-block;
+  background-size: cover;
+  background-image: url("../images/Icon-Velocity.svg");
+}
+
+.router-link-active .velocity-icon, .active .velocity-icon {
+  background-image: url("../images/Icon-Velocity-Active.svg");
+}
+
+.router-link-active.velocity-icon, .active.velocity-icon {
+  background-image: url("../images/Icon-Velocity-Active.svg");
+}
+
 .qty-btn {
   height: 36px;
   display: inline-block;
@@ -1191,6 +1187,7 @@
 }
 
 .customer-options {
+  top: 40px;
   float: right;
   padding: 20px;
   height: 150px;
@@ -1206,6 +1203,7 @@
 
 .customer-options li {
   padding: 3px 0;
+  height: unset !important;
 }
 
 .customer-options a {
@@ -2632,8 +2630,6 @@ header #search-form > *:focus {
   height: 100%;
   padding: 20px;
   border: none;
-  box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.14);
-  -webkit-box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.14);
 }
 
 .hot-categories-container .hot-category-wrapper .velocity-divide-page .left {
@@ -2955,22 +2951,25 @@ body::after {
 
 .footer .footer-content .newsletter-subscription .newsletter-wrapper input.subscribe-field {
   width: 300px;
-  height: 38px;
   border: none;
+  height: 38px;
   font-size: 18px;
+  max-width: 250px;
   padding: 10px 20px;
   color: rgba(0, 0, 0, 0.83);
 }
 
 .footer .footer-content .newsletter-subscription .newsletter-wrapper button.subscribe-btn {
-  left: -1px;
+  left: -2px;
   height: 38px;
   font-size: 18px;
+  max-width: 110px;
   line-height: 10px;
   position: relative;
 }
 
 .footer .footer-content .newsletter-subscription .newsletter-wrapper .social-icons {
+  height: 100%;
   padding: 20px 0;
   color: #FFFFFF;
 }
@@ -2993,7 +2992,7 @@ body::after {
 }
 
 .footer .footer-content .newsletter-subscription .newsletter-wrapper .subscribe-newsletter {
-  padding: 30px 0;
+  padding: 25px 0 30px 0;
 }
 
 .footer .footer-content > .row {
@@ -3013,7 +3012,15 @@ body::after {
   line-height: 2.5rem;
 }
 
-.footer .footer-content > .row .footer-ct-content > div li a {
+.footer .footer-content > .row .footer-ct-content > div ul {
+  margin-bottom: 0px;
+}
+
+.footer .footer-content > .row .footer-ct-content > div ul li {
+  margin-bottom: 5px;
+}
+
+.footer .footer-content > .row .footer-ct-content > div ul li a {
   color: rgba(255, 255, 255, 0.83);
 }
 
@@ -4005,6 +4012,21 @@ button[disabled] {
   vertical-align: middle;
 }
 
+@media only screen and (max-width: 1100px) {
+  .footer .footer-content .newsletter-subscription .newsletter-wrapper .social-icons {
+    width: 100%;
+    padding: 5px 0;
+  }
+  .footer .footer-content .newsletter-subscription .newsletter-wrapper .subscribe-newsletter {
+    width: 100%;
+    padding: 10px 0;
+    text-align: center;
+  }
+  .footer .footer-content .footer-statics > div:not(:last-child) {
+    margin-bottom: 30px;
+  }
+}
+
 /*!
  * Bootstrap v3.4.1 (https://getbootstrap.com/)
  * Copyright 2011-2019 Twitter, Inc.
@@ -12173,15 +12195,23 @@ body {
 
 #top #account .select-icon {
   top: 0px;
-  left: -3px;
+  left: 0px;
+  padding-left: 5px;
 }
 
 #top #account .welcome-content {
-  width: 150px;
+  float: right;
+  display: table;
+  min-width: 150px;
   cursor: pointer;
   text-align: right;
 }
 
+#top #account .welcome-content * {
+  display: table-cell;
+  vertical-align: middle;
+}
+
 #top #account + .account-modal {
   height: 135px;
 }
@@ -12194,16 +12224,6 @@ body {
   height: 100%;
 }
 
-#top > div:last-child .welcome-content {
-  float: right;
-  display: table;
-}
-
-#top > div:last-child .welcome-content * {
-  display: table-cell;
-  vertical-align: middle;
-}
-
 .dropdown-menu {
   border-top: 3px solid #269c77;
   border-radius: 0px;
@@ -12315,11 +12335,15 @@ header .logo {
 }
 
 header #search-form {
-  height: 35px;
+  height: 40px;
   margin: 5px 0px;
   background: #FFFFFF;
 }
 
+header #search-form * {
+  height: 100%;
+}
+
 header #search-form .btn-group, header #search-form .quantity {
   max-width: 550px;
 }
@@ -12330,7 +12354,7 @@ header #search-form .btn-group .selectdiv, header #search-form .quantity .select
 
 header #search-form .btn-group .selectdiv:before, header #search-form .quantity .selectdiv:before {
   top: 13px;
-  left: 100px;
+  left: 108px;
   z-index: 10;
   font-size: 16px;
   content: "\E906";
@@ -12366,11 +12390,6 @@ header #search-form input {
   border-left: 1px solid #CCCCCC;
 }
 
-header #search-form .btn, header #search-form .quantity button, .quantity header #search-form button,
-header #search-form .quantity input, .quantity header #search-form input {
-  height: 40px;
-}
-
 header #search-form .btn:hover, header #search-form .quantity button:hover, .quantity header #search-form button:hover,
 header #search-form .quantity input:hover, .quantity header #search-form input:hover {
   text-decoration: none;
@@ -12643,15 +12662,15 @@ header .dropdown-menu-large .dropdown-footer .checkout-link {
 }
 
 #nav-menu .secondary-navbar li a {
-  padding: 5px 20px 5px 5px;
-  font-family: SourceSansPro-Semibold;
-  font-size: 16px;
-  color: #FFFFFF;
-  letter-spacing: 0;
   display: block;
-  position: relative;
-  text-decoration: none;
   cursor: pointer;
+  font-size: 16px;
+  font-weight: 600;
+  letter-spacing: 0;
+  position: relative;
+  color: #FFFFFF;
+  text-decoration: none;
+  padding: 5px 20px 5px 5px;
 }
 
 .viewed-products .viewed-products-listing {
@@ -12780,10 +12799,6 @@ i.within-circle {
   height: 50px;
 }
 
-.mb60 {
-  margin-bottom: 60px;
-}
-
 .center_div {
   margin: 0 auto;
   width: 80%;
diff --git a/packages/Webkul/Velocity/src/Resources/assets/sass/app.scss b/packages/Webkul/Velocity/src/Resources/assets/sass/app.scss
index 7424949cf..f9c511bf3 100755
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/app.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/app.scss
@@ -1,13 +1,14 @@
-@import "icons";
-@import "variables";
-@import "mixins";
 @import "rango";
+@import "icons";
+@import "mixins";
+@import "variables";
 @import "components/UI";
 @import "components/app";
 @import "components/home";
 @import "components/footer";
 @import "components/shared";
 @import "components/product-view";
+@import "components/media";
 
 @import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
 
@@ -179,15 +180,24 @@ body {
 
         .select-icon {
             top: 0px;
-            left: -3px;
+            left: 0px;
+            padding-left: 5px;
         }
 
         .welcome-content {
             @extend .unselectable;
 
-            width: 150px;
+
+            float: right;
+            display: table;
+            min-width: 150px;
             cursor: pointer;
             text-align: right;
+
+            * {
+                display: table-cell;
+                vertical-align: middle;
+            }
         }
 
         + .account-modal {
@@ -201,16 +211,6 @@ body {
         * {
             height: 100%;
         }
-
-        .welcome-content {
-            float: right;
-            display: table;
-
-            * {
-                display: table-cell;
-                vertical-align: middle;
-            }
-        }
     }
 }
 
@@ -330,10 +330,14 @@ header {
     }
 
     #search-form {
-        height: 35px;
+        height: 40px;
         margin: 5px 0px;
         background: $white-color;
 
+        * {
+            height: 100%;
+        }
+
         .btn-group {
             max-width: 550px;
 
@@ -345,7 +349,7 @@ header {
 
             .selectdiv:before {
                 top: 13px;
-                left: 100px;
+                left: 108px;
                 z-index: 10;
                 font-size: 16px;
                 content: "\E906";
@@ -385,8 +389,6 @@ header {
         }
 
         .btn {
-            height: 40px;
-
             &:hover {
                 text-decoration: none;
             }
@@ -631,10 +633,6 @@ header {
                     left: 283px;
                     width: 250px;
                     height: 350px;
-
-                    .child-category {
-
-                    }
                 }
             }
         }
@@ -656,15 +654,15 @@ header {
             float: left;
 
             a {
-                padding: 5px 20px 5px 5px;
-                font-family: SourceSansPro-Semibold;
-                font-size: 16px;
-                color: #FFFFFF;
-                letter-spacing: 0;
                 display: block;
-                position: relative;
-                text-decoration: none;
                 cursor: pointer;
+                font-size: 16px;
+                font-weight: 600;
+                letter-spacing: 0;
+                position: relative;
+                color: $white-color;
+                text-decoration: none;
+                padding: 5px 20px 5px 5px;
             }
         }
     }
@@ -795,10 +793,6 @@ i.within-circle {
     height: 50px;
 }
 
-.mb60 {
-    margin-bottom: 60px;
-}
-
 .center_div {
     margin: 0 auto;
     width: 80%/* value of your choice which suits your alignment */
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 2c279458d..87473c5a8 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss
@@ -405,6 +405,7 @@
 }
 
 .customer-options{
+    top: 40px;
     float: right;
     padding: 20px;
     height: 150px;
@@ -422,6 +423,7 @@
 
     li {
         padding: 3px 0;
+        height: unset !important;
     }
 
     a {
diff --git a/packages/Webkul/Velocity/src/Resources/assets/sass/components/footer.scss b/packages/Webkul/Velocity/src/Resources/assets/sass/components/footer.scss
index 0063dd0c6..eff6f5e61 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/footer.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/footer.scss
@@ -19,22 +19,25 @@
 
                 input.subscribe-field {
                     width: 300px;
-                    height: 38px;
                     border: none;
+                    height: 38px;
                     font-size: 18px;
+                    max-width: 250px;
                     padding: 10px 20px;
                     color: rgba(0,0,0,0.83);
                 }
 
                 button.subscribe-btn {
-                    left: -1px;
+                    left: -2px;
                     height: 38px;
                     font-size: 18px;
+                    max-width: 110px;
                     line-height: 10px;
                     position: relative;
                 }
 
                 .social-icons {
+                    height: 100%;
                     padding: 20px 0;
                     color: $light-color;
 
@@ -57,7 +60,7 @@
                 }
 
                 .subscribe-newsletter {
-                    padding: 30px 0;
+                    padding: 25px 0 30px 0;
                 }
             }
         }
@@ -78,8 +81,16 @@
                     font-size: 14px;
                     line-height: 2.5rem;
 
-                    li a {
-                        color: rgba(255,255,255,0.83);
+                    ul {
+                        margin-bottom: 0px;
+
+                        li {
+                            margin-bottom: 5px;
+
+                            a {
+                                color: rgba(255,255,255,0.83);
+                            }
+                        }
                     }
                 }
             }
diff --git a/packages/Webkul/Velocity/src/Resources/assets/sass/components/home.scss b/packages/Webkul/Velocity/src/Resources/assets/sass/components/home.scss
index 5f5d49705..c683fd89e 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/home.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/home.scss
@@ -358,8 +358,8 @@ header #search-form > *:focus {
             height: 100%;
             padding: 20px;
             border: none;
-            box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.14);
-            -webkit-box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.14);
+            // box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.14);
+            // -webkit-box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.14);
         }
 
         .velocity-divide-page {
diff --git a/packages/Webkul/Velocity/src/Resources/assets/sass/components/media.scss b/packages/Webkul/Velocity/src/Resources/assets/sass/components/media.scss
new file mode 100644
index 000000000..dae628f2d
--- /dev/null
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/media.scss
@@ -0,0 +1,42 @@
+@media only screen and (max-width: 1100px) {
+    .footer {
+        .footer-content {
+            .newsletter-subscription {
+                .newsletter-wrapper {
+                    .social-icons {
+                        width: 100%;
+                        padding: 5px 0;
+                    }
+
+                    .subscribe-newsletter {
+                        width: 100%;
+                        padding: 10px 0;
+                        text-align: center;
+                    }
+                }
+            }
+
+            .footer-statics {
+                > div:not(:last-child) {
+                    margin-bottom: 30px;
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 992px) {
+
+}
+
+@media only screen and (max-width: 768px) {
+    // body {
+    //     display: none;
+    // }
+}
+
+@media only screen and (max-width: 576px) {
+    // body {
+    //     display: block;
+    // }
+}
\ No newline at end of file
diff --git a/packages/Webkul/Velocity/src/Resources/views/UI/particals.blade.php b/packages/Webkul/Velocity/src/Resources/views/UI/particals.blade.php
index f3ff627e9..9153db099 100644
--- a/packages/Webkul/Velocity/src/Resources/views/UI/particals.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/UI/particals.blade.php
@@ -27,10 +27,10 @@
 
 <script type="text/x-template" id="cart-btn-template">
     <button
-        :class="`btn btn-link disable-box-shadow ${parseInt(itemCount) ? 'dropdown-icon-custom' : ''}`"
         type="button"
         id="mini-cart"
-        @click="toggleMiniCart">
+        @click="toggleMiniCart"
+        class="btn btn-link disable-box-shadow">
 
         <div class="mini-cart-content">
             <i class="rango-cart-1 fs24 text-down-3"></i>
diff --git a/packages/Webkul/Velocity/src/Resources/views/customers/account/partials/sidemenu.blade.php b/packages/Webkul/Velocity/src/Resources/views/customers/account/partials/sidemenu.blade.php
index f24800412..d29810044 100644
--- a/packages/Webkul/Velocity/src/Resources/views/customers/account/partials/sidemenu.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/customers/account/partials/sidemenu.blade.php
@@ -14,6 +14,7 @@
                     <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 pull-right text-down-3"></i>
                     </a>
                 </li>
             @endforeach
diff --git a/packages/Webkul/Velocity/src/Resources/views/customers/signup/forgot-password.blade.php b/packages/Webkul/Velocity/src/Resources/views/customers/signup/forgot-password.blade.php
index 89ec6ac47..0dad7c68a 100755
--- a/packages/Webkul/Velocity/src/Resources/views/customers/signup/forgot-password.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/customers/signup/forgot-password.blade.php
@@ -1,58 +1,69 @@
 @extends('shop::layouts.master')
 
 @section('page_title')
- {{ __('shop::app.customer.forgot-password.page_title') }}
-@stop
+    {{ __('shop::app.customer.forgot-password.page_title') }}
+@endsection
 
 @section('content-wrapper')
-<div class="auth-content">
-    <div class="container">
-        <div class="login-text">   
-            <h2 style="font-weight:bold;" class="fs24">
-                {{ __('velocity::app.customer.forget-password.forgot-password')}}
-                <div style="" class="w3-card-login"><a href="{{ route('customer.session.index') }}" class="btn-new-customer-login">{{ __('velocity::app.customer.signup-form.login')}}</a></div>
-            </h2>
-        </div>
-        <div class="mb60" style="height:260px;width:575px;border:1px solid #E5E5E5;margin: 0 auto;margin-bottom:44px;">
-            <div style="margin: 45px;">
+    <div class="auth-content form-container">
+        <div class="container">
+            <div class="heading">
+                <h2 class="fs24 fw6">
+                    {{ __('velocity::app.customer.forget-password.forgot-password')}}
+                </h2>
 
-                <p class="fs16" style="font-weight:bold">
+                <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">
+                <h3 class="fw6">
                     {{ __('velocity::app.customer.forget-password.recover-password')}}
-                </p>
+                </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">
-            
+                <form
+                    method="post"
+                    action="{{ route('customer.register.create') }}"
+                    @submit.prevent="onSubmit">
+
                     {{ csrf_field() }}
-            
-                    <div class="login-form">
-                        
-                        {!! 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="label-style">{{ __('shop::app.customer.forgot-password.email') }}</label>
-                            <input type="email" class="form-control" name="email" v-validate="'required|email'">
-                            <span class="control-error" v-if="errors.has('email')">@{{ errors.first('email') }}</span>
-                        </div>
-                        <br>
-            
-                        {!! view_render_event('bagisto.shop.customers.forget_password_form_controls.before') !!}
-            
-                        <div class="button-group">
-                            <button type="submit" class="btn btn-dark-green">
-                                {{ __('shop::app.customer.forgot-password.submit') }}
-                            </button>
-                        </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" class="required label-style">
+                            {{ __('shop::app.customer.forgot-password.email') }}
+                        </label>
+
+                        <input
+                            type="email"
+                            class="form-style"
+                            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.after') !!}
+
+                    <button class="theme-btn" type="submit">
+                        {{ __('shop::app.customer.forgot-password.submit') }}
+                    </button>
                 </form>
-            
-                {!! view_render_event('bagisto.shop.customers.forget_password.before') !!}
+
+                {!! view_render_event('bagisto.shop.customers.forget_password.after') !!}
             </div>
         </div>
     </div>
-</div>
-@endsection
\ No newline at end of file
+@endsection
diff --git a/packages/Webkul/Velocity/src/Resources/views/customers/signup/index.blade.php b/packages/Webkul/Velocity/src/Resources/views/customers/signup/index.blade.php
index a9d0f85ff..82a9c793c 100755
--- a/packages/Webkul/Velocity/src/Resources/views/customers/signup/index.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/customers/signup/index.blade.php
@@ -7,7 +7,6 @@
 @section('content-wrapper')
     <div class="auth-content form-container">
         <div class="container">
-
             <div class="heading">
                 <h2 class="fs24 fw6">
                     {{ __('velocity::app.customer.signup-form.user-registration')}}
diff --git a/packages/Webkul/Velocity/src/Resources/views/layouts/footer/footer-links/footer-left.blade.php b/packages/Webkul/Velocity/src/Resources/views/layouts/footer/footer-links/footer-left.blade.php
index e359e673a..0b2eece3b 100644
--- a/packages/Webkul/Velocity/src/Resources/views/layouts/footer/footer-links/footer-left.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/layouts/footer/footer-links/footer-left.blade.php
@@ -1,4 +1,4 @@
-<div class="col-4 software-description">
+<div class="col-lg-4 col-md-12 col-sm-12 software-description">
     <div class="logo">
         <a href="{{ route('shop.home.index') }}">
             @if ($logo = core()->getCurrentChannel()->logo_url)
diff --git a/packages/Webkul/Velocity/src/Resources/views/layouts/footer/footer-links/footer-middle.blade.php b/packages/Webkul/Velocity/src/Resources/views/layouts/footer/footer-links/footer-middle.blade.php
index 92fb19050..88447a6e6 100644
--- a/packages/Webkul/Velocity/src/Resources/views/layouts/footer/footer-links/footer-middle.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/layouts/footer/footer-links/footer-middle.blade.php
@@ -1 +1,5 @@
-{!! $velocityMetaData->footer_middle_content !!}
+<div class="col-lg-4 col-md-12 col-sm-12 footer-ct-content">
+	<div class="row">
+        {!! $velocityMetaData->footer_middle_content !!}
+	</div>
+</div>
diff --git a/packages/Webkul/Velocity/src/Resources/views/layouts/footer/footer-links/footer-right.blade.php b/packages/Webkul/Velocity/src/Resources/views/layouts/footer/footer-links/footer-right.blade.php
index 026016174..1706a45d6 100644
--- a/packages/Webkul/Velocity/src/Resources/views/layouts/footer/footer-links/footer-right.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/layouts/footer/footer-links/footer-right.blade.php
@@ -20,14 +20,13 @@
     }
 @endphp
 
-<div class="col-4 footer-rt-content">
-
+<div class="col-lg-4 col-md-12 col-sm-12 footer-rt-content">
     <div class="row">
-        <div class="mb5">
+        <div class="mb5 col-12">
             <h3>{{ __('velocity::app.home.payment-methods') }}</h3>
         </div>
 
-        <div class="payment-methods">
+        <div class="payment-methods col-12">
             @foreach($activePayments as $paymentMethod)
                 <div class="method-sticker">
                     {{ $paymentMethod}}
@@ -37,11 +36,11 @@
     </div>
 
     <div class="row">
-        <div class="mb5">
-            <h3>{{ __('velocity::app.home.payment-methods') }}</h3>
+        <div class="mb5 col-12">
+            <h3>{{ __('velocity::app.home.shipping-methods') }}</h3>
         </div>
 
-        <div class="shipping-methods">
+        <div class="shipping-methods col-12">
             @foreach($activeShippings as $shippingMethod)
                 <div class="method-sticker">
                     {{ $shippingMethod}}
@@ -49,5 +48,4 @@
             @endforeach
         </div>
     </div>
-
 </div>
\ No newline at end of file
diff --git a/packages/Webkul/Velocity/src/Resources/views/layouts/footer/index.blade.php b/packages/Webkul/Velocity/src/Resources/views/layouts/footer/index.blade.php
index 3dd89c3dc..da6a2bc45 100644
--- a/packages/Webkul/Velocity/src/Resources/views/layouts/footer/index.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/layouts/footer/index.blade.php
@@ -2,7 +2,6 @@
     <div class="footer-content">
 
         @include('shop::layouts.footer.newsletter-subscription')
-
         @include('shop::layouts.footer.footer-links')
 
         @if ($categories)
diff --git a/packages/Webkul/Velocity/src/Resources/views/layouts/footer/newsletter-subscription.blade.php b/packages/Webkul/Velocity/src/Resources/views/layouts/footer/newsletter-subscription.blade.php
index 14bcd73b4..656666785 100644
--- a/packages/Webkul/Velocity/src/Resources/views/layouts/footer/newsletter-subscription.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/layouts/footer/newsletter-subscription.blade.php
@@ -3,38 +3,33 @@
     || core()->getConfigData('customer.settings.newsletter.subscription')
 )
     <div class="newsletter-subscription">
-        <div class="newsletter-wrapper">
-                @if ($velocityMetaData->subscription_bar_content)
-                    {!! $velocityMetaData->subscription_bar_content !!}
-                @endif
+        <div class="newsletter-wrapper row">
+            @if ($velocityMetaData->subscription_bar_content)
+                {!! $velocityMetaData->subscription_bar_content !!}
+            @endif
 
-                @if (core()->getConfigData('customer.settings.newsletter.subscription'))
-                    <div class="subscribe-newsletter">
+            @if (core()->getConfigData('customer.settings.newsletter.subscription'))
+                <div class="subscribe-newsletter">
+                    <div class="form-container">
+                        <form action="{{ route('shop.subscribe') }}">
+                            <div class="subscriber-form-div">
+                                <div :class="`control-group ${errors.has('subscriber_email') ? 'has-error' : ''}`">
+                                    <input
+                                        type="email"
+                                        name="subscriber_email"
+                                        class="control subscribe-field"
+                                        placeholder="{{ __('velocity::app.customer.login-form.your-email-address') }}"
+                                        required />
 
-                            <div class="form-container">
-
-                                <form action="{{ route('shop.subscribe') }}">
-                                    <div class="subscriber-form-div">
-                                        <div
-                                            :class="`control-group ${errors.has('subscriber_email') ? 'has-error' : ''}`">
-
-                                            <input
-                                                type="email"
-                                                class="control subscribe-field"
-                                                name="subscriber_email"
-                                                placeholder="{{ __('velocity::app.customer.login-form.your-email-address') }}"
-                                                required />
-
-                                            <button class="theme-btn subscribe-btn fw6">
-                                                {{ __('shop::app.subscription.subscribe') }}
-                                            </button>
-
-                                        </div>
-                                    </div>
-                                </form>
+                                    <button class="theme-btn subscribe-btn fw6">
+                                        {{ __('shop::app.subscription.subscribe') }}
+                                    </button>
+                                </div>
                             </div>
+                        </form>
                     </div>
-                @endif
+                </div>
+            @endif
         </div>
     </div>
 @endif
diff --git a/packages/Webkul/Velocity/src/Resources/views/layouts/header/index.blade.php b/packages/Webkul/Velocity/src/Resources/views/layouts/header/index.blade.php
index 3ef1e8e4b..dce965982 100644
--- a/packages/Webkul/Velocity/src/Resources/views/layouts/header/index.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/layouts/header/index.blade.php
@@ -9,12 +9,11 @@
         </a>
 
         <div class="row no-margin right">
-            <div class="col-8 no-padding">
+            <div class="col-8 no-padding input-group">
                 <form
                     method="GET"
                     role="search"
                     id="search-form"
-                    class="input-group"
                     action="{{ route('shop.search.index') }}">
 
                     <div

From ca34d5873ab60dd05bd00a0e36cac65a43b0f090 Mon Sep 17 00:00:00 2001
From: "shubhammehrotra.symfony@webkul.com"
 <shubhammehrotra.symfony@webkul.com>
Date: Fri, 10 Jan 2020 18:01:23 +0530
Subject: [PATCH 2/2] updates

---
 .../publishable/assets/css/velocity.css       | 215 +++++++++------
 .../publishable/assets/js/velocity.js         |  25 +-
 ...01_10_122226_update_velocity_meta_data.php |  32 +++
 .../Seeders/VelocityMetaDataSeeder.php        |   4 +-
 .../Admin/ConfigurationController.php         |  30 ++-
 .../Controllers/Shop/SearchController.php     |  54 ----
 .../Http/Controllers/Shop/ShopController.php  |  95 +++++++
 .../Webkul/Velocity/src/Http/admin-routes.php |   6 -
 .../Webkul/Velocity/src/Http/front-routes.php |  14 +
 .../src/Providers/VelocityServiceProvider.php |   3 +-
 .../assets/js/UI/components/carousel.vue      |   7 +-
 .../assets/js/UI/components/sidebar.vue       |  10 +-
 .../src/Resources/assets/sass/_variables.scss |   1 +
 .../src/Resources/assets/sass/admin.scss      |   6 -
 .../src/Resources/assets/sass/app.scss        |  17 +-
 .../Resources/assets/sass/components/UI.scss  |   8 +-
 .../Resources/assets/sass/components/app.scss |  71 ++++-
 .../assets/sass/components/home.scss          |  82 +-----
 .../assets/sass/components/media.scss         |   1 +
 .../assets/sass/components/product-view.scss  |  14 +
 .../assets/sass/components/shared.scss        |  19 ++
 .../Velocity/src/Resources/lang/en/app.php    |   3 +-
 .../Resources/views/UI/particals.blade.php    |  19 +-
 .../views/admin/meta-info/meta-data.blade.php |   8 +
 .../views/checkout/cart/mini-cart.blade.php   |   2 +-
 .../views/checkout/onepage.blade.php          |  24 --
 .../views/customers/session/index.blade.php   | 165 ++++++------
 .../signup/forgot-password.blade.php          |  88 ++++---
 .../views/customers/signup/index.blade.php    | 212 +++++++--------
 .../advertisement-two.blade.php               |   8 +-
 .../Resources/views/home/category.blade.php   |   4 +-
 .../views/home/featured-products.blade.php    |   6 +-
 .../views/home/new-products.blade.php         |  19 +-
 .../views/layouts/footer/index.blade.php      |   3 +-
 .../footer/newsletter-subscription.blade.php  |   2 +-
 .../layouts/top-nav/login-section.blade.php   |   8 +-
 .../views/products/list/card.blade.php        |   2 +-
 .../products/list/recently-viewed.blade.php   | 115 ++++++---
 .../views/products/reviews/create.blade.php   |   2 +-
 .../Resources/views/products/view.blade.php   | 244 ++++++++++--------
 .../views/products/view/reviews.blade.php     |  10 +-
 .../views/products/wishlist.blade.php         |  42 +--
 42 files changed, 1020 insertions(+), 680 deletions(-)
 create mode 100644 packages/Webkul/Velocity/src/Database/Migrations/2020_01_10_122226_update_velocity_meta_data.php
 delete mode 100644 packages/Webkul/Velocity/src/Http/Controllers/Shop/SearchController.php
 create mode 100644 packages/Webkul/Velocity/src/Http/Controllers/Shop/ShopController.php
 create mode 100644 packages/Webkul/Velocity/src/Http/front-routes.php

diff --git a/packages/Webkul/Velocity/publishable/assets/css/velocity.css b/packages/Webkul/Velocity/publishable/assets/css/velocity.css
index b78ee354d..d7baffcc9 100644
--- a/packages/Webkul/Velocity/publishable/assets/css/velocity.css
+++ b/packages/Webkul/Velocity/publishable/assets/css/velocity.css
@@ -724,9 +724,9 @@
 }
 
 .btn-add-to-cart {
-  padding: 8px;
-  color: #fff !important;
+  padding: 8px !important;
   border-radius: 0px !important;
+  color: #FFFFFF !important;
   border-color: #26A37C !important;
   background-color: #26A37C !important;
 }
@@ -1285,7 +1285,7 @@
   top: 44px;
   z-index: 100;
   width: 350px;
-  left: -230px;
+  left: -265px;
   position: absolute;
 }
 
@@ -1296,6 +1296,14 @@
   position: relative;
 }
 
+#cart-modal-content .mini-cart-container {
+  height: 100%;
+  font-size: 14px;
+  max-height: 200px;
+  overflow-y: scroll;
+  padding: 10px 15px 0 20px;
+}
+
 #cart-modal-content .small-card-container {
   margin: 0;
   width: 100%;
@@ -1356,6 +1364,7 @@
 .cart-details .cart-details-header .cart-header {
   max-height: 45px;
   margin-bottom: 20px;
+  padding-bottom: 20px !important;
   border-bottom: 2px solid #E5E5E5;
 }
 
@@ -1805,6 +1814,9 @@
 
 .order-summary-container {
   padding-top: 25px;
+  height: -webkit-max-content;
+  height: -moz-max-content;
+  height: max-content;
   max-width: 500px !important;
 }
 
@@ -1892,6 +1904,7 @@
 }
 
 .product-price .regular-price {
+  font-weight: 500;
   margin-right: 10px;
   text-decoration: line-through;
 }
@@ -1911,6 +1924,8 @@
 .method-sticker {
   font-size: 13px;
   padding: 4px 8px;
+  margin-right: 3px;
+  margin-bottom: 3px;
   text-align: center;
   border-radius: 1px;
   display: inline-block;
@@ -1919,13 +1934,10 @@
 }
 
 .sidebar {
+  z-index: 1000000;
   width: 230px;
 }
 
-.sidebar .category-content {
-  margin-bottom: 10px;
-}
-
 .sidebar .category-content .category-title {
   top: -1px;
   font-weight: 600;
@@ -1959,8 +1971,53 @@
   display: none;
 }
 
+.category-list-container {
+  z-index: 10;
+  padding: 0px !important;
+  background: #FFFFFF;
+  position: absolute !important;
+  -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+}
+
+.category-list-container .category {
+  width: 100%;
+  line-height: 2.5rem;
+  display: inline-block;
+}
+
+.category-list-container .category span {
+  top: -4px;
+  position: relative;
+}
+
+.category-list-container li {
+  padding: 7px 0 5px 15px;
+}
+
+.category-list-container li:hover {
+  background: #ECECEC;
+}
+
+.category-list-container .sub-categories {
+  top: 0px;
+  left: 100%;
+  z-index: 100;
+  padding-top: 10px;
+  position: absolute;
+  background: #FFFFFF;
+  border-left: 1px solid #CCCCCC;
+  -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+}
+
+.category-list-container .sub-categories li:nth-last-of-type(1) {
+  margin-bottom: 10px;
+}
+
 #sidebar-level-0 {
   display: none;
+  z-index: 100000;
   border-top: 1px solid #CCCCCC;
 }
 
@@ -2259,6 +2316,10 @@
           box-shadow: none;
 }
 
+.slides-container .VueCarousel-pagination .VueCarousel-dot {
+  padding: 5px !important;
+}
+
 .slides-container .VueCarousel-dot--active {
   background-color: #26A37C !important;
 }
@@ -2309,65 +2370,6 @@ body .container-margin {
   margin: auto 20px;
 }
 
-.account-modal {
-  right: 10px;
-  z-index: 100;
-  width: 350px !important;
-  position: absolute !important;
-}
-
-.account-modal .theme-btn, .account-modal .cart-details .continue-shopping-btn, .cart-details .account-modal .continue-shopping-btn, .account-modal .account-content .account-layout .bottom-toolbar .pagination .page-item, .account-content .account-layout .bottom-toolbar .pagination .account-modal .page-item {
-  padding: .5rem .9rem;
-}
-
-.account-modal .modal-footer .text-left {
-  padding-left: 5px;
-}
-
-.category-list-container {
-  z-index: 10;
-  padding: 0px !important;
-  background: #FFFFFF;
-  position: absolute !important;
-  -webkit-box-shadow: inset -1px 0 0 0 #ECECEC;
-          box-shadow: inset -1px 0 0 0 #ECECEC;
-}
-
-.category-list-container .category {
-  width: 100%;
-  line-height: 2.5rem;
-  display: inline-block;
-}
-
-.category-list-container .category span {
-  top: -4px;
-  position: relative;
-}
-
-.category-list-container li {
-  padding: 7px 0 5px 15px;
-}
-
-.category-list-container li:hover {
-  background: #ECECEC;
-}
-
-.category-list-container .sub-category-container {
-  position: relative;
-}
-
-.category-list-container .sub-categories {
-  top: -40px;
-  left: 100%;
-  z-index: 100;
-  padding-top: 10px;
-  position: absolute;
-  background: #FFFFFF;
-  border-left: 1px solid #CCCCCC;
-  -webkit-box-shadow: inset -1px 0 0 0 #ECECEC;
-          box-shadow: inset -1px 0 0 0 #ECECEC;
-}
-
 .root-category-menu {
   border-bottom: solid 1px #d8e6ed;
 }
@@ -2623,7 +2625,7 @@ header #search-form > *:focus {
 /* category with custom option */
 /* hot & popular categories */
 .hot-categories-container .hot-category-wrapper {
-  padding: 0 10px 15px 0;
+  padding: 0 10px 0 0;
 }
 
 .hot-categories-container .hot-category-wrapper .card {
@@ -2648,11 +2650,11 @@ header #search-form > *:focus {
 }
 
 .hot-categories-container .hot-category-wrapper:nth-last-child(2) {
-  padding: 15px 0 15px 0px;
+  padding: 0 0 0 0px;
 }
 
 .hot-categories-container .hot-category-wrapper:last-child {
-  padding: 15px 0 15px 10px;
+  padding: 0 0 0 10px;
 }
 
 .hot-categories-container ul,
@@ -2690,8 +2692,7 @@ header #search-form > *:focus {
 }
 
 .popular-categories-container .popular-category-wrapper .card-description {
-  padding: 25px;
-  margin-top: 15px;
+  padding: 10px 20px;
 }
 
 .popular-categories-container .popular-category-wrapper:first-child {
@@ -2767,6 +2768,7 @@ header #search-form > *:focus {
 .categories-sidebar-container .content-list {
   margin: 0;
   width: 100%;
+  height: 42px;
   text-align: left;
   list-style: none;
   position: relative;
@@ -2777,7 +2779,6 @@ header #search-form > *:focus {
 .categories-sidebar-container .content-list ul {
   width: 100%;
   height: 100%;
-  padding-left: 10px;
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -2789,11 +2790,15 @@ header #search-form > *:focus {
   cursor: pointer;
   font-size: 16px;
   font-weight: 600;
+  padding: 8px 15px;
   letter-spacing: 0;
   position: relative;
   color: #FFFFFF;
   text-decoration: none;
-  padding: 8px 20px 8px 5px;
+}
+
+.categories-sidebar-container .content-list ul li:hover {
+  background-color: #42719a;
 }
 
 .velocity-divide-page {
@@ -3361,6 +3366,10 @@ body::after {
   cursor: pointer;
 }
 
+.cursor-default {
+  cursor: default;
+}
+
 .grey {
   color: #9e9e9e;
 }
@@ -3663,6 +3672,12 @@ body::after {
 .small-card-container {
   cursor: pointer;
   margin-bottom: 10px;
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+
+.small-card-container .material-icons {
+  font-size: 16px;
 }
 
 .small-card-container .product-image-container {
@@ -3680,6 +3695,11 @@ body::after {
   padding: 10px 0 !important;
 }
 
+.small-card-container .sticker,
+.small-card-container .regular-price {
+  display: none;
+}
+
 .small-card-container:hover {
   -webkit-box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.14);
           box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.14);
@@ -3809,6 +3829,8 @@ a.default {
 .scrollable {
   max-height: 100vh;
   overflow-y: scroll;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
 }
 
 .scrollable::-webkit-scrollbar {
@@ -3876,8 +3898,13 @@ button[disabled] {
   font-family: 'Webkul Rango' !important;
 }
 
+.max-height-350 {
+  max-height: 350px;
+}
+
 .product-detail {
   padding-top: 20px;
+  margin-bottom: 60px;
 }
 
 .product-detail .magnifier > img {
@@ -3898,6 +3925,10 @@ button[disabled] {
   padding: 0 15px;
 }
 
+.product-detail .right .reviews {
+  vertical-align: top;
+}
+
 .product-detail .right .reviews > div {
   display: inline-block;
 }
@@ -4012,10 +4043,21 @@ button[disabled] {
   vertical-align: middle;
 }
 
+.store-meta-images {
+  margin-top: 20px;
+}
+
+.store-meta-images img {
+  width: 100%;
+  height: 100%;
+  max-height: 300px;
+}
+
 @media only screen and (max-width: 1100px) {
   .footer .footer-content .newsletter-subscription .newsletter-wrapper .social-icons {
     width: 100%;
     padding: 5px 0;
+    text-align: center !important;
   }
   .footer .footer-content .newsletter-subscription .newsletter-wrapper .subscribe-newsletter {
     width: 100%;
@@ -11006,7 +11048,7 @@ button.close {
   outline: 0;
 }
 
-.modal.fade .modal-dialog, .modal.fade .account-modal {
+.modal.fade .modal-dialog, .modal.fade #top #account + .account-modal, #top .modal.fade #account + .account-modal {
   -webkit-transform: translate(0, -25%);
   transform: translate(0, -25%);
   -webkit-transition: -webkit-transform 0.3s ease-out;
@@ -11015,7 +11057,7 @@ button.close {
   transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
 }
 
-.modal.in .modal-dialog, .modal.in .account-modal {
+.modal.in .modal-dialog, .modal.in #top #account + .account-modal, #top .modal.in #account + .account-modal {
   -webkit-transform: translate(0, 0);
   transform: translate(0, 0);
 }
@@ -11025,7 +11067,7 @@ button.close {
   overflow-y: auto;
 }
 
-.modal-dialog, .account-modal {
+.modal-dialog, #top #account + .account-modal {
   position: relative;
   width: auto;
   margin: 10px;
@@ -11137,7 +11179,7 @@ button.close {
 }
 
 @media (min-width: 768px) {
-  .modal-dialog, .account-modal {
+  .modal-dialog, #top #account + .account-modal {
     width: 600px;
     margin: 30px auto;
   }
@@ -12213,7 +12255,23 @@ body {
 }
 
 #top #account + .account-modal {
-  height: 135px;
+  right: 10px;
+  z-index: 100;
+  height: -webkit-max-content;
+  height: -moz-max-content;
+  height: max-content;
+  width: 290px !important;
+  position: absolute !important;
+}
+
+#top #account + .account-modal .theme-btn, #top #account + .account-modal .cart-details .continue-shopping-btn, .cart-details #top #account + .account-modal .continue-shopping-btn, #top #account + .account-modal .account-content .account-layout .bottom-toolbar .pagination .page-item, .account-content .account-layout .bottom-toolbar .pagination #top #account + .account-modal .page-item {
+  padding: .5rem .9rem;
+}
+
+#top #account + .account-modal .modal-footer {
+  -webkit-box-pack: unset;
+      -ms-flex-pack: unset;
+          justify-content: unset;
 }
 
 #top > div:last-child {
@@ -12338,6 +12396,7 @@ header #search-form {
   height: 40px;
   margin: 5px 0px;
   background: #FFFFFF;
+  padding: 4px 1px 0px 0px;
 }
 
 header #search-form * {
diff --git a/packages/Webkul/Velocity/publishable/assets/js/velocity.js b/packages/Webkul/Velocity/publishable/assets/js/velocity.js
index d1c5651f8..8b0641783 100644
--- a/packages/Webkul/Velocity/publishable/assets/js/velocity.js
+++ b/packages/Webkul/Velocity/publishable/assets/js/velocity.js
@@ -35539,9 +35539,11 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 //
 //
 //
+//
+//
 
 /* harmony default export */ __webpack_exports__["default"] = ({
-    props: ['id', 'url', 'addClass', 'categories', 'mainSidebar', 'categoryCount'],
+    props: ['id', 'url', 'addClass', 'parentSlug', 'categories', 'mainSidebar', 'categoryCount'],
 
     data: function data() {
         var slicedCategories = this.categories;
@@ -35551,6 +35553,8 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
             slicedCategories = this.categories.slice(0, categoryCount);
         }
 
+        if (this.parentSlug) slicedCategories['parentSlug'] = this.parentSlug;
+
         return {
             slicedCategories: slicedCategories,
             sidebarLevel: Math.floor(Math.random() * 1000)
@@ -35621,7 +35625,13 @@ var render = function() {
                       staticClass: "category unset",
                       class: category.children.length > 0 ? "fw6" : "",
                       attrs: {
-                        href: _vm.url + "/" + category["translations"][0].slug
+                        href:
+                          _vm.url +
+                          "/" +
+                          (_vm.slicedCategories.parentSlug
+                            ? _vm.slicedCategories.parentSlug + "/"
+                            : "") +
+                          category["translations"][0].slug
                       }
                     },
                     [
@@ -35698,9 +35708,12 @@ var render = function() {
                             _c("sidebar-component", {
                               attrs: {
                                 url: _vm.url,
+                                categories: category.children,
                                 id:
                                   "sidebar-level-" + (_vm.sidebarLevel + index),
-                                categories: category.children
+                                "parent-slug": category.parentSlug
+                                  ? category.parentSlug
+                                  : category["translations"][0].slug
                               }
                             })
                           ],
@@ -35801,7 +35814,11 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 //
 
 /* harmony default export */ __webpack_exports__["default"] = ({
-    props: ['slidesCount', 'slidesPerPage', 'navigationEnabled', 'paginationEnabled', 'addClass']
+    props: ['id', 'addClass', 'slidesCount', 'slidesPerPage', 'navigationEnabled', 'paginationEnabled'],
+
+    data: function data() {
+        return {};
+    }
 });
 
 /***/ }),
diff --git a/packages/Webkul/Velocity/src/Database/Migrations/2020_01_10_122226_update_velocity_meta_data.php b/packages/Webkul/Velocity/src/Database/Migrations/2020_01_10_122226_update_velocity_meta_data.php
new file mode 100644
index 000000000..73a3e3548
--- /dev/null
+++ b/packages/Webkul/Velocity/src/Database/Migrations/2020_01_10_122226_update_velocity_meta_data.php
@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class UpdateVelocityMetaData extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('velocity_meta_data', function (Blueprint $table) {
+            $table->json('product_view_images')->nullable();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('velocity_meta_data', function (Blueprint $table) {
+            $table->dropColumn('product_view_images');
+        });
+    }
+}
diff --git a/packages/Webkul/Velocity/src/Database/Seeders/VelocityMetaDataSeeder.php b/packages/Webkul/Velocity/src/Database/Seeders/VelocityMetaDataSeeder.php
index 769c14dbc..ab5b67390 100644
--- a/packages/Webkul/Velocity/src/Database/Seeders/VelocityMetaDataSeeder.php
+++ b/packages/Webkul/Velocity/src/Database/Seeders/VelocityMetaDataSeeder.php
@@ -18,11 +18,11 @@ class VelocityMetaDataSeeder extends Seeder
 
                 'footer_left_content' => trans('velocity::app.admin.meta-data.footer-left-raw-content'),
 
-                'footer_middle_content' => '<div class="col-4 footer-ct-content"><div class="row"><div class="col-6"><ul type="none"><li><a href="">About Us</a></li><li><a href="">Customer Service</a></li><li><a href="">What’s New</a></li><li><a href="">Contact Us </a></li></div><div class="col-6"><ul type="none"><li><a href="">Order and Returns</a></li><li><a href="">Payment Policy</a></li><li><a href="">Shipping Policy</a></li><li><a href="">Privacy and Cookies Policy</a></li></div></div></div>',
+                'footer_middle_content' => '<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/">About Us</a></li><li><a href="https://webkul.com/about-us/company-profile/">Customer Service</a></li><li><a href="https://webkul.com/about-us/company-profile/">What&rsquo;s New</a></li><li><a href="https://webkul.com/about-us/company-profile/">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/"> Order and Returns </a></li><li><a href="https://webkul.com/about-us/company-profile/"> Payment Policy </a></li><li><a href="https://webkul.com/about-us/company-profile/"> Shipping Policy</a></li><li><a href="https://webkul.com/about-us/company-profile/"> Privacy and Cookies Policy </a></li></ul></div>',
 
                 'slider' => 1,
 
-                'subscription_bar_content' => '<div class="social-icons wk-icon"><i class="fs24 within-circle rango-facebook" title="facebook"></i> <i class="fs24 within-circle rango-twitter" title="twitter"></i> <i class="fs24 within-circle rango-linked-in" title="linkedin"></i> <i class="fs24 within-circle rango-pintrest" title="Pinterest"></i> <i class="fs24 within-circle rango-youtube" title="Youtube"></i> <i class="fs24 within-circle rango-instagram" title="instagram"></i></div>'
+                'subscription_bar_content' => '<div class="social-icons col-lg-6"><i class="fs24 within-circle rango-facebook" title="facebook"></i> <i class="fs24 within-circle rango-twitter" title="twitter"></i> <i class="fs24 within-circle rango-linked-in" title="linkedin"></i> <i class="fs24 within-circle rango-pintrest" title="Pinterest"></i> <i class="fs24 within-circle rango-youtube" title="Youtube"></i> <i class="fs24 within-circle rango-instagram" title="instagram"></i></div>'
             ]);
     }
 }
diff --git a/packages/Webkul/Velocity/src/Http/Controllers/Admin/ConfigurationController.php b/packages/Webkul/Velocity/src/Http/Controllers/Admin/ConfigurationController.php
index b8282ec2c..d75f87bf0 100644
--- a/packages/Webkul/Velocity/src/Http/Controllers/Admin/ConfigurationController.php
+++ b/packages/Webkul/Velocity/src/Http/Controllers/Admin/ConfigurationController.php
@@ -64,11 +64,18 @@ class ConfigurationController extends Controller
 
         foreach ($params['images'] as $index => $advertisement) {
             if ($advertisement['image_1'] !== "") {
-                $params['advertisement'][$index] = $this->uploadImages($advertisement, $index);
+                $params['advertisement'][$index] = $this->uploadAdvertisementImages($advertisement, $index);
+            }
+        }
+
+        foreach ($params['product_view_images'] as $index => $productViewImage) {
+            if ($productViewImage !== "") {
+                $params['product_view_images'][$index] = $this->uploadImage($productViewImage, $index);
             }
         }
 
         $params['advertisement'] = json_encode($params['advertisement']);
+        $params['product_view_images'] = json_encode($params['product_view_images']);
         $params['home_page_content'] = str_replace('=&gt;', '=>', $params['home_page_content']);
 
         unset($params['images']);
@@ -82,11 +89,12 @@ class ConfigurationController extends Controller
         return redirect()->route($this->_config['redirect']);
     }
 
-    public function uploadImages($data, $index)
+    public function uploadAdvertisementImages($data, $index)
     {
         $type = 'images';
         $request = request();
 
+        $advertisement = [];
         foreach ($data as $imageId => $image) {
             $file = $type . '.' . $index . '.' . $imageId;
             $dir = "velocity/$type";
@@ -100,4 +108,22 @@ class ConfigurationController extends Controller
 
         return $advertisement;
     }
+
+    public function uploadImage($data, $index)
+    {
+        $type = 'product_view_images';
+        $request = request();
+
+        $image = '';
+        $file = $type . '.' . $index;
+        $dir = "velocity/$type";
+
+        if ($request->hasFile($file)) {
+            Storage::delete($dir . $file);
+
+            $image = $request->file($file)->store($dir);
+        }
+
+        return $image;
+    }
 }
\ No newline at end of file
diff --git a/packages/Webkul/Velocity/src/Http/Controllers/Shop/SearchController.php b/packages/Webkul/Velocity/src/Http/Controllers/Shop/SearchController.php
deleted file mode 100644
index 046ccf4b9..000000000
--- a/packages/Webkul/Velocity/src/Http/Controllers/Shop/SearchController.php
+++ /dev/null
@@ -1,54 +0,0 @@
-<?php
-
-namespace Webkul\Velocity\Http\Controllers\Shop;
-
-use Webkul\Product\Repositories\SearchRepository;
-use Webkul\Velocity\Http\Shop\Controllers;
-
-/**
- * Search controller
- *
- * @author  Shubham Mehrotra <shubhammehrotra.symfony@webkul.com> @shubhwebkul
- * @copyright 2019 Webkul Software Pvt Ltd (http://www.webkul.com)
- */
- class SearchController extends Controller
-{
-    /**
-     * Contains route related configuration
-     *
-     * @var array
-     */
-    protected $_config;
-
-    /**
-     * SearchRepository object
-     *
-     * @var Object
-    */
-    protected $searchRepository;
-
-    /**
-     * Create a new controller instance.
-     *
-     * @param  \Webkul\Product\Repositories\SearchRepository $searchRepository
-     * @return void
-    */
-    public function __construct(SearchRepository $searchRepository)
-    {
-        $this->_config = request('_config');
-
-        $this->searchRepository = $searchRepository;
-    }
-
-    /**
-     * Index to handle the view loaded with the search results
-     *
-     * @return \Illuminate\View\View
-     */
-    public function index()
-    {
-        $results = $this->searchRepository->search(request()->all());
-
-        return view($this->_config['view'])->with('results', $results ? $results : null);
-    }
-}
diff --git a/packages/Webkul/Velocity/src/Http/Controllers/Shop/ShopController.php b/packages/Webkul/Velocity/src/Http/Controllers/Shop/ShopController.php
new file mode 100644
index 000000000..3f92755c6
--- /dev/null
+++ b/packages/Webkul/Velocity/src/Http/Controllers/Shop/ShopController.php
@@ -0,0 +1,95 @@
+<?php
+
+namespace Webkul\Velocity\Http\Controllers\Shop;
+
+use Webkul\Velocity\Helpers\Helper;
+use Webkul\Velocity\Http\Shop\Controllers;
+use Webkul\Product\Repositories\SearchRepository;
+use Webkul\Product\Repositories\ProductRepository;
+
+/**
+ * Search controller
+ *
+ * @author  Shubham Mehrotra <shubhammehrotra.symfony@webkul.com> @shubhwebkul
+ * @copyright 2019 Webkul Software Pvt Ltd (http://www.webkul.com)
+ */
+ class ShopController extends Controller
+{
+    /**
+     * Contains route related configuration
+     *
+     * @var array
+     */
+    protected $_config;
+
+    /**
+     * SearchRepository object
+     *
+     * @var SearchRepository
+    */
+    protected $searchRepository;
+
+    /**
+     * ProductRepository object
+     *
+     * @var ProductRepository
+     */
+    protected $productRepository;
+
+
+    /**
+     * Create a new controller instance.
+     *
+     * @param  \Webkul\Product\Repositories\SearchRepository $searchRepository
+     * @return void
+    */
+    public function __construct(
+        SearchRepository $searchRepository,
+        ProductRepository $productRepository
+    ) {
+        $this->_config = request('_config');
+
+        $this->searchRepository = $searchRepository;
+        $this->productRepository = $productRepository;
+    }
+
+    /**
+     * Index to handle the view loaded with the search results
+     *
+     * @return \Illuminate\View\View
+     */
+    public function search()
+    {
+        $results = $this->searchRepository->search(request()->all());
+
+        return view($this->_config['view'])->with('results', $results ? $results : null);
+    }
+
+    public function fetchProductDetails($slug)
+    {
+        $product = $this->productRepository->findBySlug($slug);
+
+        if ($product) {
+            $productReviewHelper = app('Webkul\Product\Helpers\Review');
+            $productImageHelper = app('Webkul\Product\Helpers\ProductImage');
+
+            $response = [
+                'status' => true,
+                'details' => [
+                    'name' => $product->name,
+                    'urlKey' => $product->url_key,
+                    'priceHTML' => $product->getTypeInstance()->getPriceHtml(),
+                    'totalReviews' => $productReviewHelper->getTotalReviews($product),
+                    'rating' => ceil($productReviewHelper->getAverageRating($product)),
+                    'image' => $productImageHelper->getProductBaseImage($product)['small_image_url'],
+                ]
+            ];
+        } else {
+            $response = [
+                'status' => false
+            ];
+        }
+
+        return $response;
+    }
+}
diff --git a/packages/Webkul/Velocity/src/Http/admin-routes.php b/packages/Webkul/Velocity/src/Http/admin-routes.php
index 06da1f6a7..ee90c2d07 100644
--- a/packages/Webkul/Velocity/src/Http/admin-routes.php
+++ b/packages/Webkul/Velocity/src/Http/admin-routes.php
@@ -43,10 +43,4 @@ Route::group(['middleware' => ['web']], function () {
             });
         });
     });
-
-    Route::group(['middleware' => ['theme']], function () {
-        Route::get('/search', 'Webkul\Velocity\Http\Controllers\Shop\SearchController@index')->defaults('_config', [
-            'view' => 'velocity::search.search'
-        ])->name('shop.search.index');
-    });
 });
\ No newline at end of file
diff --git a/packages/Webkul/Velocity/src/Http/front-routes.php b/packages/Webkul/Velocity/src/Http/front-routes.php
new file mode 100644
index 000000000..ce689a927
--- /dev/null
+++ b/packages/Webkul/Velocity/src/Http/front-routes.php
@@ -0,0 +1,14 @@
+<?php
+
+Route::group(['middleware' => ['web']], function () {
+    Route::group(['middleware' => ['theme']], function () {
+        Route::namespace('Webkul\Velocity\Http\Controllers\Shop')->group(function () {
+            // Content Pages Route
+            Route::get('/product-details/{slug}', 'ShopController@fetchProductDetails')->name('velocity.shop.product');
+        });
+
+        Route::get('/search', 'ShopController@search')->defaults('_config', [
+            'view' => 'velocity::search.search'
+        ])->name('shop.search.index');
+    });
+});
\ No newline at end of file
diff --git a/packages/Webkul/Velocity/src/Providers/VelocityServiceProvider.php b/packages/Webkul/Velocity/src/Providers/VelocityServiceProvider.php
index e78968185..5ae5917a5 100644
--- a/packages/Webkul/Velocity/src/Providers/VelocityServiceProvider.php
+++ b/packages/Webkul/Velocity/src/Providers/VelocityServiceProvider.php
@@ -27,6 +27,7 @@ class VelocityServiceProvider extends ServiceProvider
     {
         include __DIR__ . '/../Http/helpers.php';
         include __DIR__ . '/../Http/admin-routes.php';
+        include __DIR__ . '/../Http/front-routes.php';
 
         $this->app->register(EventServiceProvider::class);
 
@@ -46,7 +47,7 @@ class VelocityServiceProvider extends ServiceProvider
         $velocityHelper = app('Webkul\Velocity\Helpers\Helper');
         $velocityMetaData = $velocityHelper->getVelocityMetaData();
 
-        view()->share('showRecentlyViewed', false);
+        view()->share('showRecentlyViewed', true);
         view()->share('velocityMetaData', $velocityMetaData);
     }
 
diff --git a/packages/Webkul/Velocity/src/Resources/assets/js/UI/components/carousel.vue b/packages/Webkul/Velocity/src/Resources/assets/js/UI/components/carousel.vue
index ff5977013..5ed6909fd 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/js/UI/components/carousel.vue
+++ b/packages/Webkul/Velocity/src/Resources/assets/js/UI/components/carousel.vue
@@ -20,11 +20,16 @@
 <script type="text/javascript">
     export default {
         props: [
+            'id',
+            'addClass',
             'slidesCount',
             'slidesPerPage',
             'navigationEnabled',
             'paginationEnabled',
-            'addClass'
         ],
+
+        data: function () {
+            return {}
+        }
     }
 </script>
\ No newline at end of file
diff --git a/packages/Webkul/Velocity/src/Resources/assets/js/UI/components/sidebar.vue b/packages/Webkul/Velocity/src/Resources/assets/js/UI/components/sidebar.vue
index 359f9c8ce..d91b79537 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/js/UI/components/sidebar.vue
+++ b/packages/Webkul/Velocity/src/Resources/assets/js/UI/components/sidebar.vue
@@ -15,10 +15,11 @@
                 @mouseout="toggleSidebar(id, $event, 'mouseout')"
                 @mouseover="toggleSidebar(id, $event, 'mouseover')">
 
+
                 <a
                     class="category unset"
                     :class="(category.children.length > 0) ? 'fw6' : ''"
-                    :href="`${url}/${category['translations'][0].slug}`">
+                    :href="`${url}/${slicedCategories.parentSlug ? slicedCategories.parentSlug + '/' : ''}${category['translations'][0].slug}`">
 
                     <div
                         class="category-icon"
@@ -45,8 +46,9 @@
                     <div :class="`sub-categories sub-category-${sidebarLevel+index}`">
                         <sidebar-component
                             :url="url"
+                            :categories="category.children"
                             :id="`sidebar-level-${sidebarLevel+index}`"
-                            :categories="category.children">
+                            :parent-slug="category.parentSlug ? category.parentSlug : category['translations'][0].slug">
                         </sidebar-component>
                     </div>
                 </div>
@@ -61,6 +63,7 @@
             'id',
             'url',
             'addClass',
+            'parentSlug',
             'categories',
             'mainSidebar',
             'categoryCount'
@@ -76,6 +79,9 @@
                 slicedCategories = this.categories.slice(0, categoryCount);
             }
 
+            if (this.parentSlug)
+                slicedCategories['parentSlug'] = this.parentSlug;
+
             return {
                 slicedCategories,
                 sidebarLevel: Math.floor(Math.random() * 1000),
diff --git a/packages/Webkul/Velocity/src/Resources/assets/sass/_variables.scss b/packages/Webkul/Velocity/src/Resources/assets/sass/_variables.scss
index e363df7c7..e42ac06dd 100755
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/_variables.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/_variables.scss
@@ -23,6 +23,7 @@ $grey-clr: rgba(0,0,0,0.53);
 $light-grey-clr: rgb(158, 158, 158);
 $light-background: #F7F7F9;
 $sidebar-width: 230px;
+$box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
 
 $font-family-pro: 'Source Sans Pro', sans-serif;
 $font-family-regular: 'SourceSansPro-Regular';
diff --git a/packages/Webkul/Velocity/src/Resources/assets/sass/admin.scss b/packages/Webkul/Velocity/src/Resources/assets/sass/admin.scss
index 5a36bd684..998a57a1a 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/admin.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/admin.scss
@@ -11,12 +11,6 @@
     font-style: normal;
   }
 
-.wk-icon {
-    font-size: 20px;
-    font-weight: 400;
-    text-align: center;
-    color: #0041ff;
-}
 
 [class^="rango-"], [class*=" rango-"] {
     /* use !important to prevent issues with browser extensions that change fonts */
diff --git a/packages/Webkul/Velocity/src/Resources/assets/sass/app.scss b/packages/Webkul/Velocity/src/Resources/assets/sass/app.scss
index f9c511bf3..4792e19f8 100755
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/app.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/app.scss
@@ -201,7 +201,21 @@ body {
         }
 
         + .account-modal {
-            height: 135px;
+            @extend .modal-dialog;
+
+            right: 10px;
+            z-index: 100;
+            height: max-content;
+            width: 290px !important;
+            position: absolute !important;
+
+            .theme-btn {
+                padding: .5rem .9rem;
+            }
+
+            .modal-footer {
+                justify-content: unset;
+            }
         }
     }
 
@@ -333,6 +347,7 @@ header {
         height: 40px;
         margin: 5px 0px;
         background: $white-color;
+        padding: 4px 1px 0px 0px;
 
         * {
             height: 100%;
diff --git a/packages/Webkul/Velocity/src/Resources/assets/sass/components/UI.scss b/packages/Webkul/Velocity/src/Resources/assets/sass/components/UI.scss
index 501a7726f..d9baf2f84 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/UI.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/UI.scss
@@ -30,11 +30,11 @@
 }
 
 .btn-add-to-cart {
-    padding: 8px;
-    color: #fff !important;
+    padding: 8px !important;
     border-radius: 0px !important;
-    border-color: #26A37C !important;
-    background-color: #26A37C !important;
+    color: $white-color !important;
+    border-color: $theme-color !important;
+    background-color: $theme-color !important;
 
     &.large {
         padding: 12px 18px;
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 87473c5a8..4a84d31fb 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss
@@ -511,7 +511,7 @@
     top: 44px;
     z-index: 100;
     width: 350px;
-    left: -230px;
+    left: -265px;
     position: absolute;
 
     .close {
@@ -521,6 +521,14 @@
         position: relative;
     }
 
+    .mini-cart-container {
+        height: 100%;
+        font-size: 14px;
+        max-height: 200px;
+        overflow-y: scroll;
+        padding: 10px 15px 0 20px;
+    }
+
     .small-card-container {
         margin: 0;
         width: 100%;
@@ -581,6 +589,7 @@
         .cart-header {
             max-height: 45px;
             margin-bottom: 20px;
+            padding-bottom: 20px !important;
             border-bottom: 2px solid $border-general;
 
             > h3 {
@@ -1085,6 +1094,7 @@
 
 .order-summary-container {
     padding-top: 25px;
+    height: max-content;
     max-width: 500px !important;
 
     > div {
@@ -1172,6 +1182,7 @@
     }
 
     .regular-price {
+        font-weight: 500;
         margin-right: 10px;
         text-decoration: line-through;
     }
@@ -1194,6 +1205,8 @@
 .method-sticker {
     font-size: 13px;
     padding: 4px 8px;
+    margin-right: 3px;
+    margin-bottom: 3px;
     text-align: center;
     border-radius: 1px;
     display: inline-block;
@@ -1202,10 +1215,11 @@
 }
 
 .sidebar {
+    z-index: 1000000;
     width: $sidebar-width;
 
     .category-content {
-        margin-bottom: 10px;
+        // margin-bottom: 10px;
 
         .category-title {
             top: -1px;
@@ -1246,8 +1260,57 @@
     }
 }
 
+.category-list-container {
+    z-index: 10;
+    padding: 0px !important;
+    background: $white-color;
+    position: absolute !important;
+    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+
+    .category {
+        @extend .cursor-pointer;
+
+        width: 100%;
+        line-height: 2.5rem;
+        display: inline-block;
+
+        span {
+            top: -4px;
+            position: relative;
+        }
+    }
+
+    li {
+        padding: 7px 0 5px 15px;
+    }
+
+    li:hover {
+        background: $border-light;
+    }
+
+    .sub-category-container {
+        // position: relative;
+    }
+
+    .sub-categories {
+        top: 0px;
+        left: 100%;
+        z-index: 100;
+        padding-top: 10px;
+        position: absolute;
+        background: $light-color;
+        border-left: 1px solid $border-common;
+        box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+
+        li:nth-last-of-type(1) {
+            margin-bottom: 10px;
+        }
+    }
+}
+
 #sidebar-level-0 {
     display: none;
+    z-index: 100000;
     border-top: 1px solid $border-common;
 }
 
@@ -1570,6 +1633,10 @@
             outline: none;
             box-shadow: none;
         }
+
+        .VueCarousel-dot {
+            padding: 5px !important;
+        }
     }
 
     .VueCarousel-dot--active {
diff --git a/packages/Webkul/Velocity/src/Resources/assets/sass/components/home.scss b/packages/Webkul/Velocity/src/Resources/assets/sass/components/home.scss
index c683fd89e..e7f80ec37 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/home.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/home.scss
@@ -9,71 +9,6 @@ body {
     }
 }
 
-.account-modal {
-    @extend .modal-dialog;
-
-    right: 10px;
-    z-index: 100;
-    width: 350px !important;
-    position: absolute !important;
-
-    .theme-btn {
-        padding: .5rem .9rem;
-    }
-
-    .modal-footer {
-        .text-left {
-            padding-left: 5px;
-        }
-    }
-}
-
-.category-list-container {
-    z-index: 10;
-    padding: 0px !important;
-    background: $white-color;
-    position: absolute !important;
-    box-shadow: inset -1px 0 0 0 $border-light;
-
-    .category {
-        @extend .cursor-pointer;
-
-        width: 100%;
-        line-height: 2.5rem;
-        display: inline-block;
-
-        span {
-            top: -4px;
-            position: relative;
-        }
-    }
-}
-
-.category-list-container li {
-    padding: 7px 0 5px 15px;
-}
-
-.category-list-container li:hover {
-    background: $border-light;
-}
-
-.category-list-container {
-    .sub-category-container {
-        position: relative;
-    }
-
-    .sub-categories {
-        top: -40px;
-        left: 100%;
-        z-index: 100;
-        padding-top: 10px;
-        position: absolute;
-        background: $light-color;
-        border-left: 1px solid $border-common;
-        box-shadow: inset -1px 0 0 0 $border-light;
-    }
-}
-
 .root-category-menu {
     border-bottom: solid 1px #d8e6ed;
 }
@@ -352,7 +287,7 @@ header #search-form > *:focus {
 
 .hot-categories-container {
     .hot-category-wrapper {
-        padding: 0 10px 15px 0;
+        padding: 0 10px 0 0;
 
         .card {
             height: 100%;
@@ -381,11 +316,11 @@ header #search-form > *:focus {
     }
 
     .hot-category-wrapper:nth-last-child(2) {
-        padding: 15px 0 15px 0px;
+        padding: 0 0 0 0px;
     }
 
     .hot-category-wrapper:last-child {
-        padding: 15px 0 15px 10px;
+        padding: 0 0 0 10px;
     }
 }
 
@@ -427,8 +362,7 @@ header #search-form > *:focus {
         }
 
         .card-description {
-            padding: 25px;
-            margin-top: 15px;
+            padding: 10px 20px;
         }
     }
 
@@ -513,6 +447,7 @@ header #search-form > *:focus {
     .content-list {
         margin: 0;
         width: 100%;
+        height: 42px;
         text-align: left;
         list-style: none;
         position: relative;
@@ -522,7 +457,6 @@ header #search-form > *:focus {
         ul {
             width: 100%;
             height: 100%;
-            padding-left: 10px;
             display: inline-flex;
             background-color: $link-color;
 
@@ -532,13 +466,17 @@ header #search-form > *:focus {
                     cursor: pointer;
                     font-size: 16px;
                     font-weight: 600;
+                    padding: 8px 15px;
                     letter-spacing: 0;
                     position: relative;
                     color: $white-color;
                     text-decoration: none;
-                    padding: 8px 20px 8px 5px;
                 }
             }
+
+            li:hover {
+                background-color: #42719a;
+            }
         }
     }
 }
diff --git a/packages/Webkul/Velocity/src/Resources/assets/sass/components/media.scss b/packages/Webkul/Velocity/src/Resources/assets/sass/components/media.scss
index dae628f2d..b781f35dc 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/media.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/media.scss
@@ -6,6 +6,7 @@
                     .social-icons {
                         width: 100%;
                         padding: 5px 0;
+                        text-align: center !important;
                     }
 
                     .subscribe-newsletter {
diff --git a/packages/Webkul/Velocity/src/Resources/assets/sass/components/product-view.scss b/packages/Webkul/Velocity/src/Resources/assets/sass/components/product-view.scss
index 518317de6..0cd1f4608 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/product-view.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/product-view.scss
@@ -1,5 +1,6 @@
 .product-detail {
     padding-top: 20px;
+    margin-bottom: 60px;
 
     .magnifier {
         > img {
@@ -31,6 +32,8 @@
         }
 
         .reviews {
+            vertical-align: top;
+
             > div {
                 display: inline-block;
             }
@@ -206,4 +209,15 @@
             vertical-align: middle;
         }
     }
+
+}
+
+.store-meta-images {
+    margin-top: 20px;
+
+    img {
+        width: 100%;
+        height: 100%;
+        max-height: 300px;
+    }
 }
\ No newline at end of file
diff --git a/packages/Webkul/Velocity/src/Resources/assets/sass/components/shared.scss b/packages/Webkul/Velocity/src/Resources/assets/sass/components/shared.scss
index 0a6a0b9a0..25ee9b5bd 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/shared.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/shared.scss
@@ -187,6 +187,9 @@
 .cursor-pointer {
     cursor: pointer;
 }
+.cursor-default {
+    cursor: default;
+}
 
 .grey {
     color: rgb(158, 158, 158);
@@ -499,6 +502,12 @@
 .small-card-container {
     cursor: pointer;
     margin-bottom: 10px;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+
+    .material-icons {
+        font-size: 16px;
+    }
 
     .product-image-container {
         padding: 0;
@@ -516,6 +525,11 @@
         display: inline-block;
         padding: 10px 0 !important;
     }
+
+    .sticker,
+    .regular-price {
+        display: none;
+    }
 }
 
 .small-card-container:hover {
@@ -655,6 +669,8 @@ a {
 .scrollable {
     max-height: 100vh;
     overflow-y: scroll;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
 }
 
 .scrollable::-webkit-scrollbar {
@@ -716,5 +732,8 @@ button[disabled] {
     font-variant: normal;
     -webkit-font-smoothing: antialiased;
     font-family: 'Webkul Rango' !important;
+}
 
+.max-height-350 {
+    max-height: 350px;
 }
\ No newline at end of file
diff --git a/packages/Webkul/Velocity/src/Resources/lang/en/app.php b/packages/Webkul/Velocity/src/Resources/lang/en/app.php
index 7427a3a1f..040240502 100644
--- a/packages/Webkul/Velocity/src/Resources/lang/en/app.php
+++ b/packages/Webkul/Velocity/src/Resources/lang/en/app.php
@@ -95,13 +95,14 @@ return [
             'subscription-content' => 'Subscription bar Content',
             'activate-slider' => 'Activate Slider',
             'sidebar-categories' => 'Sidebar Categories',
-            'footer-left-raw-content' => 'We love to craft softwares and solve the real world problems with the binaries. We are highly committed to our goals. We invest our resources to create world class easy to use softwares and applications for the enterprise business with the top notch, on the edge technology expertise.',
+            'footer-left-raw-content' => '<p>We love to craft softwares and solve the real world problems with the binaries. We are highly committed to our goals. We invest our resources to create world class easy to use softwares and applications for the enterprise business with the top notch, on the edge technology expertise.</p>',
             'footer-middle-content' => 'Footer Middle Content',
             'update-meta-data' => 'Update Meta Data',
             'advertisement-four' => 'Advertisement Four Images',
             'advertisement-three' => 'Advertisement Three Images',
             'advertisement-two' => 'Advertisement Two Images',
             'advertisement-one' => 'Advertisement One Images',
+            'product-view-image' => 'Product View Image',
             'footer' => 'Footer',
         ],
         'category' => [
diff --git a/packages/Webkul/Velocity/src/Resources/views/UI/particals.blade.php b/packages/Webkul/Velocity/src/Resources/views/UI/particals.blade.php
index 9153db099..8c6c39c7e 100644
--- a/packages/Webkul/Velocity/src/Resources/views/UI/particals.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/UI/particals.blade.php
@@ -1,5 +1,5 @@
 <script type="text/x-template" id="star-ratings-template">
-    <div :class="`stars mr10 fs${size ? size : '16'} ${pushClass ? pushClass : ''}`">
+    <div :class="`stars mr5 fs${size ? size : '16'} ${pushClass ? pushClass : ''}`">
         <input
             v-if="editable"
             type="number"
@@ -7,21 +7,26 @@
             name="rating"
             class="hidden" />
 
-        <span
-            :class="`rango-star-fill ${editable ? 'cursor-pointer' : ''}`"
+        <i
+            :class="`material-icons ${editable ? 'cursor-pointer' : ''}`"
             v-for="(rating, index) in parseInt(showFilled ? showFilled : 3)"
             :key="`${index}${Math.random()}`"
             @click="updateRating(index + 1)">
-        </span>
+            star
+        </i>
 
         <template v-if="!hideBlank">
-            <span
-                :class="`rango-star ${editable ? 'cursor-pointer' : ''}`"
+            <i
+                :class="`material-icons ${editable ? 'cursor-pointer' : ''}`"
                 v-for="(blankStar, index) in (5 - (showFilled ? showFilled : 3))"
                 :key="`${index}${Math.random()}`"
                 @click="updateRating(showFilled + index + 1)">
-            </span>
+                star_border
+            </i>
         </template>
+
+        {{-- <i class="material-icons">star_border</i>
+        <i class="material-icons">star</i> --}}
     </div>
 </script>
 
diff --git a/packages/Webkul/Velocity/src/Resources/views/admin/meta-info/meta-data.blade.php b/packages/Webkul/Velocity/src/Resources/views/admin/meta-info/meta-data.blade.php
index 40ff3913f..42074825e 100644
--- a/packages/Webkul/Velocity/src/Resources/views/admin/meta-info/meta-data.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/admin/meta-info/meta-data.blade.php
@@ -121,6 +121,14 @@
                             input-name="images[1]">
                         </image-wrapper>
                     </div>
+
+                    <div class="control-group product-view-image">
+                        <label>{{ __('velocity::app.admin.meta-data.product-view-image') }}</label>
+
+                        <image-wrapper
+                            input-name="product_view_images">
+                        </image-wrapper>
+                    </div>
                 </div>
             </accordian>
 
diff --git a/packages/Webkul/Velocity/src/Resources/views/checkout/cart/mini-cart.blade.php b/packages/Webkul/Velocity/src/Resources/views/checkout/cart/mini-cart.blade.php
index 356625872..ac48b0f26 100644
--- a/packages/Webkul/Velocity/src/Resources/views/checkout/cart/mini-cart.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/checkout/cart/mini-cart.blade.php
@@ -16,7 +16,7 @@
 
             <div class="modal-content sensitive-modal cart-modal-content hide" id="cart-modal-content">
                 <!--Body-->
-                <div class="pl20 pt10 pr15 fs14">
+                <div class="mini-cart-container">
                     @foreach ($items as $item)
                         @php
                             $images = $item->product->getTypeInstance()->getBaseImage($item);
diff --git a/packages/Webkul/Velocity/src/Resources/views/checkout/onepage.blade.php b/packages/Webkul/Velocity/src/Resources/views/checkout/onepage.blade.php
index b4f6ddd1d..4f3258c37 100644
--- a/packages/Webkul/Velocity/src/Resources/views/checkout/onepage.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/checkout/onepage.blade.php
@@ -573,20 +573,6 @@
                     onSubmit: function() {
                         var this_this = this;
                         const emptyCouponErrorText = "Please enter a coupon code";
-                        axios.post('{{ route('shop.checkout.check.coupons') }}', {code: this_this.coupon_code})
-                            .then(function(response) {
-                                this_this.$emit('onApplyCoupon');
-
-                                this_this.couponChanged = true;
-                            })
-                            .catch(function(error) {
-                                this_this.couponChanged = true;
-
-                                this_this.error_message = (error.response.data.message === "The given data was invalid.")?
-                                    emptyCouponErrorText :
-                                        (error.response.data.message === "Cannot Apply Coupon")?
-                                            "Sorry, this Coupon code is invalid":error.response.data.message;
-                            });
                     },
 
                     changeCoupon: function() {
@@ -603,16 +589,6 @@
 
                     removeCoupon: function () {
                         var this_this = this;
-
-                        axios.post('{{ route('shop.checkout.remove.coupon') }}')
-                            .then(function(response) {
-                                this_this.$emit('onRemoveCoupon')
-                            })
-                            .catch(function(error) {
-                                window.flashMessages = [{'type' : 'alert-error', 'message' : error.response.data.message}];
-
-                                this_this.$root.addFlashMessages();
-                            });
                     }
                 }
             });
diff --git a/packages/Webkul/Velocity/src/Resources/views/customers/session/index.blade.php b/packages/Webkul/Velocity/src/Resources/views/customers/session/index.blade.php
index 910e23268..45497524d 100755
--- a/packages/Webkul/Velocity/src/Resources/views/customers/session/index.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/customers/session/index.blade.php
@@ -9,94 +9,97 @@
 
         {!! view_render_event('bagisto.shop.customers.login.before') !!}
 
-        <div class="container">
-            <div class="heading">
-                <h2 class="fs24 fw6">
-                    {{ __('velocity::app.customer.login-form.customer-login')}}
-                </h2>
+            <div class="container">
+                <div class="row col-10 offset-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.new-customer')}}
-                    </button>
-                </a>
-            </div>
-
-            <div class="body">
-                <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="required 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="required 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') }}" style="float: right;">
-                            {{ __('shop::app.customer.login-form.forgot_pass') }}
+                        <a href="{{ route('customer.register.index') }}" class="btn-new-customer">
+                            <button type="button" class="theme-btn light">
+                                {{ __('velocity::app.customer.login-form.new-customer')}}
+                            </button>
                         </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') !!}
+                    <div class="body col-12">
+                        <div class="form-header">
+                            <h3 class="fw6">
+                                {{ __('velocity::app.customer.login-form.registered-user')}}
+                            </h3>
 
-                    <input class="theme-btn" type="submit" value="{{ __('shop::app.customer.login-form.button_title') }}">
+                            <p class="fs16">
+                                {{ __('velocity::app.customer.login-form.form-login-text')}}
+                            </p>
+                        </div>
 
-                </form>
+                        <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="required 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="required 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') }}" style="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>
-        </div>
+
         {!! view_render_event('bagisto.shop.customers.login.after') !!}
     </div>
 @endsection
diff --git a/packages/Webkul/Velocity/src/Resources/views/customers/signup/forgot-password.blade.php b/packages/Webkul/Velocity/src/Resources/views/customers/signup/forgot-password.blade.php
index 0dad7c68a..3bfc6d9ea 100755
--- a/packages/Webkul/Velocity/src/Resources/views/customers/signup/forgot-password.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/customers/signup/forgot-password.blade.php
@@ -7,62 +7,64 @@
 @section('content-wrapper')
     <div class="auth-content form-container">
         <div class="container">
-            <div class="heading">
-                <h2 class="fs24 fw6">
-                    {{ __('velocity::app.customer.forget-password.forgot-password')}}
-                </h2>
+            <div class="row col-10 offset-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>
+                    <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">
-                <h3 class="fw6">
-                    {{ __('velocity::app.customer.forget-password.recover-password')}}
-                </h3>
+                <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>
+                    <p class="fs16">
+                        {{ __('velocity::app.customer.forget-password.recover-password-text')}}
+                    </p>
 
-                {!! view_render_event('bagisto.shop.customers.forget_password.before') !!}
+                    {!! view_render_event('bagisto.shop.customers.forget_password.before') !!}
 
-                <form
-                    method="post"
-                    action="{{ route('customer.register.create') }}"
-                    @submit.prevent="onSubmit">
+                    <form
+                        method="post"
+                        action="{{ route('customer.register.create') }}"
+                        @submit.prevent="onSubmit">
 
-                    {{ csrf_field() }}
+                        {{ csrf_field() }}
 
-                    {!! view_render_event('bagisto.shop.customers.forget_password_form_controls.before') !!}
+                        {!! 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="required label-style">
-                            {{ __('shop::app.customer.forgot-password.email') }}
-                        </label>
+                        <div class="control-group" :class="[errors.has('email') ? 'has-error' : '']">
+                            <label for="email" class="required label-style">
+                                {{ __('shop::app.customer.forgot-password.email') }}
+                            </label>
 
-                        <input
-                            type="email"
-                            class="form-style"
-                            name="email"
-                            v-validate="'required|email'" />
+                            <input
+                                type="email"
+                                class="form-style"
+                                name="email"
+                                v-validate="'required|email'" />
 
-                        <span class="control-error" v-if="errors.has('email')">
-                            @{{ errors.first('email') }}
-                        </span>
-                    </div>
+                            <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') !!}
+                        {!! 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>
+                        <button class="theme-btn" type="submit">
+                            {{ __('shop::app.customer.forgot-password.submit') }}
+                        </button>
+                    </form>
 
-                {!! view_render_event('bagisto.shop.customers.forget_password.after') !!}
+                    {!! view_render_event('bagisto.shop.customers.forget_password.after') !!}
+                </div>
             </div>
         </div>
     </div>
diff --git a/packages/Webkul/Velocity/src/Resources/views/customers/signup/index.blade.php b/packages/Webkul/Velocity/src/Resources/views/customers/signup/index.blade.php
index 82a9c793c..ca2814b69 100755
--- a/packages/Webkul/Velocity/src/Resources/views/customers/signup/index.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/customers/signup/index.blade.php
@@ -7,136 +7,138 @@
 @section('content-wrapper')
     <div class="auth-content form-container">
         <div class="container">
-            <div class="heading">
-                <h2 class="fs24 fw6">
-                    {{ __('velocity::app.customer.signup-form.user-registration')}}
-                </h2>
+            <div class="row col-10 offset-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>
+                    <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">
-                <h3 class="fw6">
-                    {{ __('velocity::app.customer.signup-form.become-user')}}
-                </h3>
+                <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>
+                    <p class="fs16">
+                        {{ __('velocity::app.customer.signup-form.form-sginup-text')}}
+                    </p>
 
-                {!! view_render_event('bagisto.shop.customers.signup.before') !!}
+                    {!! view_render_event('bagisto.shop.customers.signup.before') !!}
 
-                <form
-                    method="post"
-                    action="{{ route('customer.register.create') }}"
-                    @submit.prevent="onSubmit">
+                    <form
+                        method="post"
+                        action="{{ route('customer.register.create') }}"
+                        @submit.prevent="onSubmit">
 
-                    {{ csrf_field() }}
+                        {{ csrf_field() }}
 
-                    {!! view_render_event('bagisto.shop.customers.signup_form_controls.before') !!}
+                        {!! 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>
+                        <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;" />
+                            <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>
+                            <span class="control-error" v-if="errors.has('first_name')">
+                                @{{ errors.first('first_name') }}
+                            </span>
+                        </div>
 
-                    <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>
+                        <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;" />
+                            <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>
+                            <span class="control-error" v-if="errors.has('last_name')">
+                                @{{ errors.first('last_name') }}
+                            </span>
+                        </div>
 
-                    <div class="control-group" :class="[errors.has('email') ? 'has-error' : '']">
-                        <label for="email" class="required label-style">
-                            {{ __('shop::app.customer.signup-form.email') }}
-                        </label>
+                        <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;" />
+                            <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>
+                            <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 label-style">
-                            {{ __('shop::app.customer.signup-form.password') }}
-                        </label>
+                        <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;" />
+                            <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>
+                            <span class="control-error" v-if="errors.has('password')">
+                                @{{ errors.first('password') }}
+                            </span>
+                        </div>
 
-                    <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>
+                        <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;" />
+                            <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>
+                            <span class="control-error" v-if="errors.has('password_confirmation')">
+                                @{{ errors.first('password_confirmation') }}
+                            </span>
+                        </div>
 
-                    {!! view_render_event('bagisto.shop.customers.signup_form_controls.after') !!}
+                        {!! view_render_event('bagisto.shop.customers.signup_form_controls.after') !!}
 
-                    <button class="theme-btn" type="submit">
-                        {{ __('shop::app.customer.signup-form.title') }}
-                    </button>
-                </form>
+                        <button class="theme-btn" type="submit">
+                            {{ __('shop::app.customer.signup-form.title') }}
+                        </button>
+                    </form>
 
-                {!! view_render_event('bagisto.shop.customers.signup.after') !!}
+                    {!! view_render_event('bagisto.shop.customers.signup.after') !!}
+                </div>
             </div>
         </div>
     </div>
diff --git a/packages/Webkul/Velocity/src/Resources/views/home/advertisements/advertisement-two.blade.php b/packages/Webkul/Velocity/src/Resources/views/home/advertisements/advertisement-two.blade.php
index 82f14fa55..4e6a375f7 100644
--- a/packages/Webkul/Velocity/src/Resources/views/home/advertisements/advertisement-two.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/home/advertisements/advertisement-two.blade.php
@@ -18,11 +18,11 @@
 
         <div class="container-fluid advertisement-two-container">
             <div class="row">
-                <a class="col-8 no-padding">
+                <a class="col-9 no-padding">
                     <img src="{{ asset('/storage/' . $advertisementTwo['image_1']) }}" />
                 </a>
 
-                <a class="col-4 pr0">
+                <a class="col-3 pr0">
                     <img src="{{ asset('/storage/' . $advertisementTwo['image_2']) }}" />
                 </a>
             </div>
@@ -33,11 +33,11 @@
 @if (! $isRendered)
     <div class="container-fluid advertisement-two-container">
         <div class="row">
-            <a class="col-8 no-padding">
+            <a class="col-9 no-padding">
                 <img src="{{ asset('/themes/velocity/assets/images/toster.png') }}" />
             </a>
 
-            <a class="col-4 pr0">
+            <a class="col-3 pr0">
                 <img src="{{ asset('/themes/velocity/assets/images/trimmer.png') }}" />
             </a>
         </div>
diff --git a/packages/Webkul/Velocity/src/Resources/views/home/category.blade.php b/packages/Webkul/Velocity/src/Resources/views/home/category.blade.php
index 641be1626..0ef2dbe58 100644
--- a/packages/Webkul/Velocity/src/Resources/views/home/category.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/home/category.blade.php
@@ -18,8 +18,10 @@
 
             <div class="row flex-nowrap">
                 <carousel-component
-                    :slides-count="{{ sizeof($products) }}"
                     slides-per-page="6"
+                    navigation-enabled="hide"
+                    pagination-enabled="hide"
+                    :slides-count="{{ sizeof($products) }}"
                     id="{{ $categoryDetails->name }}-carousel">
 
                     @foreach ($products as $index => $product)
diff --git a/packages/Webkul/Velocity/src/Resources/views/home/featured-products.blade.php b/packages/Webkul/Velocity/src/Resources/views/home/featured-products.blade.php
index 7520694ed..a6751f34e 100644
--- a/packages/Webkul/Velocity/src/Resources/views/home/featured-products.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/home/featured-products.blade.php
@@ -16,9 +16,11 @@
         <div class="row flex-nowrap">
 
             <carousel-component
-                :slides-count="{{ $featuredProductsCount }}"
                 slides-per-page="6"
-                id="fearured-products-carousel">
+                navigation-enabled="hide"
+                pagination-enabled="hide"
+                id="fearured-products-carousel"
+                :slides-count="{{ $featuredProductsCount }}">
 
                 @foreach ($featuredProducts as $index => $product)
 
diff --git a/packages/Webkul/Velocity/src/Resources/views/home/new-products.blade.php b/packages/Webkul/Velocity/src/Resources/views/home/new-products.blade.php
index b3a078a7b..927eec5d6 100644
--- a/packages/Webkul/Velocity/src/Resources/views/home/new-products.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/home/new-products.blade.php
@@ -2,8 +2,6 @@
     $count = $velocityMetaData->new_products_count;
 
     $newProducts = app('Webkul\Velocity\Repositories\Product\ProductRepository')->getNewProducts($count);
-
-    $showRecentlyViewed = false;
 @endphp
 
 @if (! empty($newProducts))
@@ -26,11 +24,11 @@
 
                 <div class="col-9 no-padding">
                     <carousel-component
-                        :slides-count="{{ sizeof($newProducts) }}"
                         slides-per-page="5"
-                        id="new-products-carousel"
                         navigation-enabled="hide"
-                        pagination-enabled="hide">
+                        pagination-enabled="hide"
+                        id="new-products-carousel"
+                        :slides-count="{{ sizeof($newProducts) }}">
 
                         @foreach ($newProducts as $index => $product)
 
@@ -43,12 +41,17 @@
                     </carousel-component>
                 </div>
 
-                @include ('shop::products.list.recently-viewed')
+                @include ('shop::products.list.recently-viewed', [
+                    'addClass' => 'col-3',
+                    'addClassWrapper' => 'scrollable max-height-350',
+                ])
             @else
                 <carousel-component
-                    :slides-count="{{ sizeof($newProducts) }}"
                     slides-per-page="6"
-                    id="new-products-carousel">
+                    navigation-enabled="hide"
+                    pagination-enabled="hide"
+                    id="new-products-carousel"
+                    :slides-count="{{ sizeof($newProducts) }}">
 
                     @foreach ($newProducts as $index => $product)
 
diff --git a/packages/Webkul/Velocity/src/Resources/views/layouts/footer/index.blade.php b/packages/Webkul/Velocity/src/Resources/views/layouts/footer/index.blade.php
index da6a2bc45..64dfc7097 100644
--- a/packages/Webkul/Velocity/src/Resources/views/layouts/footer/index.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/layouts/footer/index.blade.php
@@ -5,11 +5,10 @@
         @include('shop::layouts.footer.footer-links')
 
         @if ($categories)
-            @include('shop::layouts.footer.top-brands')
+            {{-- @include('shop::layouts.footer.top-brands') --}}
         @endif
 
         @include('shop::layouts.footer.copy-right')
-
     </div>
 </div>
 
diff --git a/packages/Webkul/Velocity/src/Resources/views/layouts/footer/newsletter-subscription.blade.php b/packages/Webkul/Velocity/src/Resources/views/layouts/footer/newsletter-subscription.blade.php
index 656666785..3d9bb6a4e 100644
--- a/packages/Webkul/Velocity/src/Resources/views/layouts/footer/newsletter-subscription.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/layouts/footer/newsletter-subscription.blade.php
@@ -9,7 +9,7 @@
             @endif
 
             @if (core()->getConfigData('customer.settings.newsletter.subscription'))
-                <div class="subscribe-newsletter">
+                <div class="subscribe-newsletter col-lg-6 text-right">
                     <div class="form-container">
                         <form action="{{ route('shop.subscribe') }}">
                             <div class="subscriber-form-div">
diff --git a/packages/Webkul/Velocity/src/Resources/views/layouts/top-nav/login-section.blade.php b/packages/Webkul/Velocity/src/Resources/views/layouts/top-nav/login-section.blade.php
index 40623ac6f..b9236d373 100644
--- a/packages/Webkul/Velocity/src/Resources/views/layouts/top-nav/login-section.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/layouts/top-nav/login-section.blade.php
@@ -41,22 +41,22 @@
 
                         <!--Footer-->
                         <div class="modal-footer">
-                            <div class="col-6 text-left">
+                            <div>
                                 <a href="{{ route('customer.session.index') }}">
                                     <button
                                         type="button"
-                                        class="theme-btn fs15">
+                                        class="theme-btn fs14 fw6">
 
                                         {{ __('velocity::app.header.sign-in') }}
                                     </button>
                                 </a>
                             </div>
 
-                            <div class="col-6 text-right">
+                            <div>
                                 <a href="{{ route('customer.register.index') }}">
                                     <button
                                         type="button"
-                                        class="theme-btn fs15">
+                                        class="theme-btn fs14 fw6">
                                         {{ __('velocity::app.header.sign-up') }}
                                     </button>
                                 </a>
diff --git a/packages/Webkul/Velocity/src/Resources/views/products/list/card.blade.php b/packages/Webkul/Velocity/src/Resources/views/products/list/card.blade.php
index 42aae7d3d..3cc77f235 100644
--- a/packages/Webkul/Velocity/src/Resources/views/products/list/card.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/products/list/card.blade.php
@@ -46,7 +46,7 @@
                     </div>
 
                     <div class="product-rating">
-                        <star-ratings ratings="3"></star-ratings>
+                        <star-ratings ratings="{{ $avgRatings }}"></star-ratings>
                         <span>{{ $totalReviews }} Ratings</span>
                     </div>
 
diff --git a/packages/Webkul/Velocity/src/Resources/views/products/list/recently-viewed.blade.php b/packages/Webkul/Velocity/src/Resources/views/products/list/recently-viewed.blade.php
index a01efbb61..063e4ae92 100644
--- a/packages/Webkul/Velocity/src/Resources/views/products/list/recently-viewed.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/products/list/recently-viewed.blade.php
@@ -1,46 +1,91 @@
-@inject ('productImageHelper', 'Webkul\Product\Helpers\ProductImage')
+@inject ('velocityHelper', 'Webkul\Velocity\Helpers\Helper')
 @inject ('productRatingHelper', 'Webkul\Product\Helpers\Review')
+@inject ('productImageHelper', 'Webkul\Product\Helpers\ProductImage')
 
-@php
-    $recentlyViewedProducts = app('Webkul\Product\Repositories\ProductRepository')->getNewProducts(3)->items();
-@endphp
+<recently-viewed
+    add-class="{{ isset($addClass) ? $addClass : '' }}"
+    add-class-wrapper="{{ isset($addClassWrapper) ? $addClassWrapper : '' }}">
+</recently-viewed>
 
-<div class="col-3 recently-viewed">
-    <div class="row mb20 pl20">
-        <div class="col-12 no-padding">
-            <h2 class="fs20 fw6">{{ __('velocity::app.products.recently-viewed') }}</h2>
-        </div>
-    </div>
-
-    @foreach ($recentlyViewedProducts as $index => $product)
-
-        @php
-            $productBaseImage = $productImageHelper->getProductBaseImage($product);
-            $productAverageRating = $productRatingHelper->getAverageRating($product);
-        @endphp
-
-        <div class="row small-card-container">
-            <div class="col-4 product-image-container mr15">
-                <a href="{{ route('shop.productOrCategory.index', $product->url_key) }}" class="unset">
-                    <div class="product-image" style="background-image: url({{ $productBaseImage['small_image_url'] }})"></div>
-                </a>
+@push('scripts')
+    <script type="text/x-template" id="recently-viewed-template">
+        <div :class="`${addClass} recently-viewed`">
+            <div class="row remove-padding-margin">
+                <div class="col-12 no-padding">
+                    <h2 class="fs20 fw6 mb15">{{ __('velocity::app.products.recently-viewed') }}</h2>
+                </div>
             </div>
 
-            <div class="col-8 no-padding card-body align-vertical-top">
-                <div class="no-padding">
-                    <div class="fs16 text-nowrap">{{ $product->name }}</div>
+            <div :class="`recetly-viewed-products-wrapper ${addClassWrapper}`">
+                <div
+                    :key="Math.random()"
+                    class="row small-card-container"
+                    v-for="(product, index) in recentlyViewed">
 
-                    <div class="fs18 card-current-price fw6">
-                        @include ('shop::products.price', [
-                            'product' => $product,
-                            'showDiscount' => false,
-                        ])
+                    <div class="col-4 product-image-container mr15">
+                        <a :href="`${baseURL}/${product.urlKey}`" class="unset">
+                            <div class="product-image" :style="`background-image: url(${product.image})`"></div>
+                        </a>
                     </div>
 
-                    <star-ratings ratings="{{ intval($productAverageRating) }}"></star-ratings>
-                </div>
+                    <div class="col-8 no-padding card-body align-vertical-top">
+                        <a :href="`${baseURL}/${product.urlKey}`" class="unset no-padding">
+                            <span class="fs16 text-nowrap">@{{ product.name }}</span>
 
+                            <div
+                                v-html="product.priceHTML"
+                                class="fs18 card-current-price fw6">
+                            </div>
+
+                            <star-ratings
+                                push-class="display-inbl"
+                                :ratings="product.rating">
+                            </star-ratings>
+
+                            <span class="fs16 text-nowrap align-text-bottom">@{{ product.totalReviews }} Reviews</span>
+                        </a>
+                    </div>
+                </div>
             </div>
         </div>
-    @endforeach
-</div>
+    </script>
+
+    <script type="text/javascript">
+        (() => {
+            Vue.component('recently-viewed', {
+                template: '#recently-viewed-template',
+                props: ['addClass', 'addClassWrapper'],
+
+                data: function () {
+                    return {
+                        baseURL: '{{ url()->to('/') }}',
+                        recentlyViewed: (() => {
+                            let slugs = JSON.parse(window.localStorage.recentlyViewed);
+                            let updatedSlugs = {};
+
+                            slugs.forEach(slug => {
+                                updatedSlugs[slug] = {};
+                            });
+
+                            return updatedSlugs;
+                        })(),
+                    }
+                },
+
+                created: function () {
+                    for (slug in this.recentlyViewed) {
+                        if (slug) {
+                            this.$http(`${this.baseURL}/product-details/${slug}`)
+                            .then(response => {
+                                if (response.data.status) {
+                                    this.$set(this.recentlyViewed, response.data.details.urlKey, response.data.details);
+                                }
+                            })
+                            .catch(error => {})
+                        }
+                    }
+                },
+            })
+        })()
+    </script>
+@endpush
diff --git a/packages/Webkul/Velocity/src/Resources/views/products/reviews/create.blade.php b/packages/Webkul/Velocity/src/Resources/views/products/reviews/create.blade.php
index 7894fabbc..4f1f7a57c 100644
--- a/packages/Webkul/Velocity/src/Resources/views/products/reviews/create.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/products/reviews/create.blade.php
@@ -39,7 +39,7 @@
                         </div>
 
                         <div class="comment">
-                            <label>Rating*</label>
+                            <label>Description*</label>
                             <textarea rows="4" placeholder="Your Comment" name="comment"></textarea>
                         </div>
 
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 6fc037df8..ea67efb09 100644
--- a/packages/Webkul/Velocity/src/Resources/views/products/view.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/products/view.blade.php
@@ -19,116 +19,142 @@
     <meta name="keywords" content="{{ $product->meta_keywords }}"/>
 @stop
 
-@section('content-wrapper')
+@push('css')
+    <style type="text/css">
+        .recently-viewed {
+            margin-top: 20px;
+        }
 
+        .store-meta-images > .recently-viewed:first-child {
+            margin-top: 0px;
+        }
+
+        .categories-sidebar-container {
+            margin-bottom: 0px;
+        }
+    </style>
+
+@endpush
+
+@section('full-content-wrapper')
     {!! view_render_event('bagisto.shop.products.view.before', ['product' => $product]) !!}
 
-    @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="row no-margin">
+            @if ($showRecentlyViewed)
+                <section class="col-9 product-detail">
+            @else
+                <section class="col-12 product-detail">
+            @endif
+                    <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>
-
-                        {{-- 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>
-
-                                        <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])
+                                {{-- product-gallery --}}
+                                <div class="left col-lg-5">
+                                    @include ('shop::products.view.gallery')
                                 </div>
 
-                                @include ('shop::products.add-to-cart', [
-                                    'product' => $product,
-                                    'showCartIcon' => false
-                                ])
+                                {{-- 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>
+
+                                                <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>
+
+                                        @include ('shop::products.add-to-cart', [
+                                            'product' => $product,
+                                            'showCartIcon' => false
+                                        ])
+                                    </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>
-
-                            {!! 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>
+                        </product-view>
                     </div>
-                </product-view>
+
+                    @include ('shop::products.view.related-products')
+
+                    @include ('shop::products.view.up-sells')
+
+            </section>
+
+            <div class="store-meta-images col-3">
+                @foreach (json_decode($velocityMetaData['product_view_images'], true) as $image)
+                    @if ($image && $image !== '')
+                        <img src="{{ url()->to('/') }}/storage/{{ $image }}" />
+                    @endif
+                @endforeach
+
+                @if ($showRecentlyViewed)
+                    @include ('shop::products.list.recently-viewed')
+                @endif
             </div>
 
-            @include ('shop::products.view.related-products')
-
-            @include ('shop::products.view.up-sells')
-
-    </section>
-
-    @if ($showRecentlyViewed)
-        @include ('shop::products.list.recently-viewed')
-    @endif
+        </div>
 
     {!! 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)">
 
@@ -155,17 +181,33 @@
 
     <script type="text/javascript">
         Vue.component('product-view', {
-
-            template: '#product-view-template',
-
             inject: ['$validator'],
-
+            template: '#product-view-template',
             data: function() {
                 return {
                     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 >= 4)
+                        existingViewed = existingViewed.slice(Math.max(existingViewed.length - 4, 1));
+
+                    window.localStorage.setItem('recentlyViewed', JSON.stringify(existingViewed));
+                }
+            },
+
             methods: {
                 onSubmit: function(e) {
                     if (e.target.getAttribute('type') != 'submit')
@@ -189,9 +231,8 @@
         });
 
         Vue.component('quantity-changer', {
-            template: '#quantity-changer-template',
-
             inject: ['$validator'],
+            template: '#quantity-changer-template',
 
             props: {
                 controlName: {
@@ -257,8 +298,7 @@
             var productHeroImage = document.getElementsByClassName('product-hero-image')[0];
 
             if (thumbList && productHeroImage) {
-
-                for(let i=0; i < thumbFrame.length ; i++) {
+                for (let i=0; i < thumbFrame.length ; i++) {
                     thumbFrame[i].style.height = (productHeroImage.offsetHeight/4) + "px";
                     thumbFrame[i].style.width = (productHeroImage.offsetHeight/4)+ "px";
                 }
diff --git a/packages/Webkul/Velocity/src/Resources/views/products/view/reviews.blade.php b/packages/Webkul/Velocity/src/Resources/views/products/view/reviews.blade.php
index 066a98994..8e7d4a1b1 100644
--- a/packages/Webkul/Velocity/src/Resources/views/products/view/reviews.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/products/view/reviews.blade.php
@@ -182,11 +182,13 @@
                         </div>
 
                         <div class="col-lg-12 review-date-time">
-                            <span>{{ __('velocity::app.products.review-by') }} -</span>
+                            @if ("{{ $review->name }}")
+                                <span>{{ __('velocity::app.products.review-by') }} -</span>
 
-                            <label>
-                                {{ $review->name }},
-                            </label>
+                                <label>
+                                    {{ $review->name }},
+                                </label>
+                            @endif
 
                             <span>{{ core()->formatDate($review->created_at, 'F d, Y') }}
                             </span>
diff --git a/packages/Webkul/Velocity/src/Resources/views/products/wishlist.blade.php b/packages/Webkul/Velocity/src/Resources/views/products/wishlist.blade.php
index 3f62abb1a..fa5524dae 100755
--- a/packages/Webkul/Velocity/src/Resources/views/products/wishlist.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/products/wishlist.blade.php
@@ -1,23 +1,29 @@
 @inject ('wishListHelper', 'Webkul\Customer\Helpers\Wishlist')
 
-@auth('customer')
-    {!! view_render_event('bagisto.shop.products.wishlist.before') !!}
+{!! view_render_event('bagisto.shop.products.wishlist.before') !!}
+    @auth('customer')
+        @php
+            $isWished = $wishListHelper->getWishlistProduct($product);
+        @endphp
 
-    @php
-        $isWished = $wishListHelper->getWishlistProduct($product);
-    @endphp
+        <a
+            class="unset wishlist-icon col-4 offset-4 text-right"
+            @if (! $isWished)
+                href="{{ route('customer.wishlist.add', $product->product_id) }}"
+            @elseif (isset($itemId) && $itemId)
+                href="{{ route('customer.wishlist.remove', $itemId) }}"
+            @endif
+            >
 
-    <a
-        class="unset wishlist-icon col-4 offset-4 text-right"
-        @if (! $isWished)
-            href="{{ route('customer.wishlist.add', $product->product_id) }}"
-        @elseif (isset($itemId) && $itemId)
-            href="{{ route('customer.wishlist.remove', $itemId) }}"
-        @endif
-        >
+            <i class="fs24 {{ $isWished ? 'rango-heart-fill' : 'rango-heart'}}"></i>
+        </a>
+    @endauth
 
-        <i class="fs24 {{ $isWished ? 'rango-heart-fill' : 'rango-heart'}}"></i>
-    </a>
-
-    {!! view_render_event('bagisto.shop.products.wishlist.after') !!}
-@endauth
\ No newline at end of file
+    @guest('customer')
+        <a
+            href="{{ route('customer.session.index') }}"
+            class="unset wishlist-icon col-4 offset-4 text-right">
+            <i class="fs24 rango-heart"></i>
+        </a>
+    @endauth
+{!! view_render_event('bagisto.shop.products.wishlist.after') !!}