diff --git a/packages/Webkul/Velocity/publishable/assets/css/velocity.css b/packages/Webkul/Velocity/publishable/assets/css/velocity.css
index 8074a6255..52dd58a77 100644
--- a/packages/Webkul/Velocity/publishable/assets/css/velocity.css
+++ b/packages/Webkul/Velocity/publishable/assets/css/velocity.css
@@ -2966,10 +2966,14 @@ body::after {
 }
 
 .quick-addtocart-btn {
-  margin-top: 329px;
+  margin-top: 306px;
   margin-left: -82px;
 }
 
+.model-display-block {
+  display: block;
+}
+
 .footer {
   width: 100%;
   background-color: #ffffff;
@@ -3689,6 +3693,7 @@ body::after {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  color: #555555;
 }
 
 .small-card-container {
@@ -3907,6 +3912,18 @@ button[disabled] {
   font-family: 'Webkul Rango' !important;
 }
 
+.quick-view-name {
+  font-size: 24px;
+}
+
+.quick-view-price {
+  font-size: 30px;
+}
+
+.description-text {
+  font-size: 14px;
+}
+
 .product-detail {
   padding-top: 20px;
 }
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 7aca3aa0d..7fd6833a2 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/home.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/home.scss
@@ -682,7 +682,11 @@ body::after {
 }
 
 .quick-addtocart-btn {
-    margin-top: 329px;
+    margin-top: 306px;
     margin-left: -82px;
 }
 
+.model-display-block {
+   display:block;
+}
+
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..16f755c47 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/shared.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/shared.scss
@@ -494,6 +494,7 @@
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
+    color: #555555;
 }
 
 .small-card-container {
@@ -716,5 +717,16 @@ button[disabled] {
     font-variant: normal;
     -webkit-font-smoothing: antialiased;
     font-family: 'Webkul Rango' !important;
+}
 
+.quick-view-name {
+    font-size: 24px;
+}
+
+.quick-view-price {
+    font-size: 30px;
+}
+
+.description-text {
+    font-size: 14px;
 }
\ No newline at end of file
diff --git a/packages/Webkul/Velocity/src/Resources/views/UI/product-quick-view.blade.php b/packages/Webkul/Velocity/src/Resources/views/UI/product-quick-view.blade.php
index 483675df8..022e2c0d0 100644
--- a/packages/Webkul/Velocity/src/Resources/views/UI/product-quick-view.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/UI/product-quick-view.blade.php
@@ -20,10 +20,7 @@
         id="quick-view-btn-container"
         :name="details"
         @click="openQuickView({details: details, event: $event})">
-        <product-quick-view
-            v-if="quickViewDetails"
-            :quick-view-details="quickViewDetails"
-        ></product-quick-view>
+        <product-quick-view v-if="quickViewDetails" :quick-view-details="quickViewDetails"></product-quick-view>
 
         <span class="rango-zoom-plus"></span>
 
@@ -33,7 +30,7 @@
 
 <script type="text/x-template" id="product-quick-view-template">
     <div class="cd-quick-view" v-if="quickView">
-        <div class="col-lg-6 cd-slider-wrapper">
+        <div class="col-lg-6 cd-slider-wrapper model-animation">
             <ul class="cd-slider" type="none">
                 <li class="selected">
                     <img src="{{ $productBaseImage['medium_image_url'] }}" :alt="quickViewDetails.name" />
@@ -50,10 +47,10 @@
         </div>
 
         <div class="col-lg-6 cd-item-info fs16">
-            <h2 class="text-nowrap fw6" style="color: #555555; font-size: 24px;">{{ $product->name }}</h2>
+            <h2 class="text-nowrap fw6 quick-view-name">{{ $product->name }}</h2>
 
             <div class="product-price fs14">
-                <h2 class="text-nowrap fw6" style="color: #555555; font-size: 30px;">{{ $product->price }}</h2>
+                <h2 class="text-nowrap fw6 quick-view-price">{{ $product->price }}</h2>
             </div>
 
             {{-- @TODO --}}
@@ -67,12 +64,12 @@
                 </div>
             @endif --}}
 
-            <p class="pt20" style="font-size: 14px;">
+            <p class="pt14 description-text">
                 {!! $product->description !!}
             </p>
-            <button class="btn btn-add-to-cart quick-addtocart-btn">
+            <button type="submit" class="btn btn-add-to-cart quick-addtocart-btn">
                 <span class="rango-cart-1 fs20"></span>
-                Submit
+                    Add To Cart
             </button>
 
             <div class="action-buttons">
@@ -101,6 +98,7 @@
 
                 methods: {
                     openQuickView: function ({details, event}) {
+                        document.getElementById('quick-view-btn-container').style.display = "block";
                         if (event) {
                             event.preventDefault();
                             event.stopPropagation();
@@ -134,6 +132,9 @@
                     closeQuickView: function () {
                         this.quickView = false;
                         this.quickViewDetails = false;
+                        document.getElementById('quick-view-btn-container').style.display = "none";
+                        window.location.reload();
+
                     },
 
                     changeImage: function (imageIndex) {