diff --git a/packages/Webkul/Velocity/publishable/assets/css/velocity.css b/packages/Webkul/Velocity/publishable/assets/css/velocity.css
index 1c90331bd..516d416ac 100644
--- a/packages/Webkul/Velocity/publishable/assets/css/velocity.css
+++ b/packages/Webkul/Velocity/publishable/assets/css/velocity.css
@@ -1022,6 +1022,7 @@
 
 #product-card-new .product-image-container {
   height: 220px;
+  position: relative;
 }
 
 #product-card-new .product-image-container img {
@@ -1060,6 +1061,35 @@
   vertical-align: middle;
 }
 
+.quick-view-btn-container {
+  left: -12px;
+  width: 100%;
+  bottom: 10px;
+  display: none;
+  position: absolute;
+}
+
+.quick-view-btn-container span {
+  left: 32%;
+  top: -26px;
+  z-index: 1;
+  font-size: 16px;
+  color: #FFFFFF;
+  position: absolute;
+}
+
+.quick-view-btn-container button {
+  left: 30%;
+  top: -36px;
+  border: none;
+  color: white;
+  font-size: 16px;
+  padding: 5px 10px 7px 24px;
+  position: absolute;
+  opacity: 0.8;
+  background-color: #0D2438;
+}
+
 .quantity {
   width: 100%;
   padding-bottom: 10px;
@@ -2775,32 +2805,6 @@ header #search-form > *:focus {
   font: 18px "josefin sans", arial;
 }
 
-.quick-view-btn-container {
-  position: relative;
-  margin: 48px 1px 0px -18px;
-}
-
-.quick-view-btn-container span {
-  left: 32%;
-  top: -26px;
-  z-index: 1;
-  font-size: 16px;
-  color: #FFFFFF;
-  position: absolute;
-}
-
-.quick-view-btn-container button {
-  left: 30%;
-  top: -36px;
-  border: none;
-  color: white;
-  font-size: 16px;
-  padding: 5px 10px 7px 24px;
-  position: absolute;
-  opacity: 0.8;
-  background-color: #0D2438;
-}
-
 body::after {
   /* dark overlay layer - visible when we fire .cd-quick-view */
   position: fixed;
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 4a77c18a8..286b615a3 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/app.scss
@@ -210,6 +210,7 @@
 
     .product-image-container {
         height: 220px;
+        position: relative;
 
         img {
             width: 100%;
@@ -259,6 +260,41 @@
     }
 }
 
+.quick-view-btn-container {
+    left: -12px;
+    width: 100%;
+    bottom: 10px;
+    display: none;
+    position: absolute;
+
+    span {
+        left: 32%;
+        top: -26px;
+        z-index: 1;
+        font-size: 16px;
+        color: #FFFFFF;
+        position: absolute;
+    }
+
+    button {
+        left: 30%;
+        top: -36px;
+        border: none;
+        color: white;
+        font-size: 16px;
+        padding: 5px 10px 7px 24px;
+        position: absolute;
+        opacity: 0.8;
+        background-color: #0D2438;
+    }
+}
+
+#product-card-new:hover {
+    #quick-view-btn-container {
+        // display: block;
+    }
+}
+
 .quantity {
     @extend .btn-group;
 
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 9bade0fe7..3390b9b4a 100644
--- a/packages/Webkul/Velocity/src/Resources/assets/sass/components/home.scss
+++ b/packages/Webkul/Velocity/src/Resources/assets/sass/components/home.scss
@@ -614,39 +614,6 @@ header #search-form > *:focus {
     font: 18px "josefin sans", arial;
 }
 
-.quick-view-btn-container {
-    position: relative;
-    margin: 48px 1px 0px -18px;
-
-    span {
-        left: 32%;
-        top: -26px;
-        z-index: 1;
-        font-size: 16px;
-        color: #FFFFFF;
-        position: absolute;
-    }
-
-    button {
-        left: 30%;
-        top: -36px;
-        border: none;
-        color: white;
-        font-size: 16px;
-        padding: 5px 10px 7px 24px;
-        position: absolute;
-        opacity: 0.8;
-        background-color: #0D2438;
-    }
-}
-
-
-
-
-
-
-
-
 body::after {
     /* dark overlay layer - visible when we fire .cd-quick-view */
     position: fixed;
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 58534a1af..8ef5cb244 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
@@ -6,13 +6,12 @@
     $productPrice = $product->getTypeInstance()->getProductPrices();
     $totalReviews = $product->reviews;
     $avgRatings = ceil($reviewHelper->getAverageRating($product));
-@endphp
 
-<?php
-    foreach ($totalReviews as $review) {
-        $productReview = $review;
-    }
-?>
+    // @TODO
+    // foreach ($totalReviews as $review) {
+    //     $productReview = $review;
+    // }
+@endphp
 
 <script type="text/x-template" id="quick-view-btn-template">
 
@@ -57,7 +56,8 @@
                 <h2 class="text-nowrap fw6">{{ $product->price }}</h2>
             </div>
 
-            @if ($totalReviews)
+            {{-- @TODO --}}
+            {{-- @if ($totalReviews)
                 <div class="">
                     {{ $productReview['rating'] }} Ratings
                 </div>
@@ -65,7 +65,7 @@
                 <div class="">
                     <a href="">{{ __('velocity::app.products.be-first-review') }}</a>
                 </div>
-            @endif
+            @endif --}}
 
             <p class="pt20">
                 {!! $product->description !!}
@@ -103,20 +103,6 @@
                             event.stopPropagation();
                         }
 
-                        // this.quickView
-
-                        // .velocity({
-
-                        //     'width': '734px',
-                        //     'left': '200px',
-                        //     'top': '50px',
-                        // }, 1000, [ 500, 20 ])
-
-                        // .velocity({
-                        //     'width': '734px',
-                        //     'left': '200px',
-                        // }, 3000, 'ease');
-
                         this.quickViewDetails = true;
                     }
                 }
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 60d2e0114..aad68edc3 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
@@ -67,9 +67,9 @@
                     src="{{ $productBaseImage['medium_image_url'] }}"
                     class="card-img-top"
                     alt="{{ $product->name }}">
-            </a>
 
-            <quick-view-btn details="{{ $product }}"></quick-view-btn>
+                <quick-view-btn details="{{ $product }}"></quick-view-btn>
+            </a>
 
             <div class="card-body">
                 <div class="product-name">