diff --git a/packages/Webkul/Admin/src/Providers/EventServiceProvider.php b/packages/Webkul/Admin/src/Providers/EventServiceProvider.php
index fab5a2f7d..59012ebf1 100644
--- a/packages/Webkul/Admin/src/Providers/EventServiceProvider.php
+++ b/packages/Webkul/Admin/src/Providers/EventServiceProvider.php
@@ -96,6 +96,12 @@ class EventServiceProvider extends ServiceProvider
         Event::listen('admin.acl.build', function ($acl) {
             $acl->add('dashboard', 'Dashboard', 'admin.dashboard.index', 1);
 
+            $acl->add('catalog', 'Catalog', 'admin.catalog.index', 2);
+
+            $acl->add('catalog.products', 'Products', 'admin.catalog.products.index', 1);
+
+            $acl->add('catalog.categories', 'Categories', 'admin.catalog.categories.index', 1);
+            
             $acl->add('configuration', 'Configure', 'admin.account.edit', 5);
 
             $acl->add('settings', 'Settings', 'admin.users.index', 6);
diff --git a/packages/Webkul/Product/src/Models/Product.php b/packages/Webkul/Product/src/Models/Product.php
index 905a323f7..77e9971e3 100644
--- a/packages/Webkul/Product/src/Models/Product.php
+++ b/packages/Webkul/Product/src/Models/Product.php
@@ -134,6 +134,22 @@ class Product extends Model
         return $this->attribute_family->custom_attributes->pluck('code')->contains($attribute);
     }
 
+    /**
+     * @param string $key
+     *
+     * @return bool
+     */
+    public function isSaleable()
+    {
+        if($this->status) {
+            if($this->inventories->sum('qty')) {
+                return true;
+            }
+        }
+    
+        return false;
+    }
+
     /**
      * Get an attribute from the model.
      *
diff --git a/packages/Webkul/Product/src/Product/ConfigurableOption.php b/packages/Webkul/Product/src/Product/ConfigurableOption.php
new file mode 100644
index 000000000..b078576ba
--- /dev/null
+++ b/packages/Webkul/Product/src/Product/ConfigurableOption.php
@@ -0,0 +1,238 @@
+<?php
+
+namespace Webkul\Product\Product;
+
+use Webkul\Attribute\Repositories\AttributeOptionRepository as AttributeOption;
+use Webkul\Product\Product\Gallery;
+use Webkul\Product\Product\Price;
+
+class ConfigurableOption extends AbstractProduct
+{
+    /**
+     * AttributeOptionRepository object
+     *
+     * @var array
+     */
+    protected $attributeOption;
+
+    /**
+     * Gallery object
+     *
+     * @var array
+     */
+    protected $gallery;
+
+    /**
+     * Price object
+     *
+     * @var array
+     */
+    protected $price;
+
+    /**
+     * Create a new controller instance.
+     *
+     * @param  Webkul\Attribute\Repositories\AttributeOptionRepository $attributeOption
+     * @param  Webkul\Product\Product\Gallery                          $gallery
+     * @param  Webkul\Product\Product\Price                            $price
+     * @return void
+     */
+    public function __construct(
+        AttributeOption $attributeOption,
+        Gallery $gallery,
+        Price $price
+    )
+    {
+        $this->attributeOption = $attributeOption;
+
+        $this->gallery = $gallery;
+
+        $this->price = $price;
+    }
+
+    /**
+     * Returns the allowed variants
+     *
+     * @param Product $product
+     * @return float
+     */
+    public function getAllowProducts($product)
+    {
+        $variants = [];
+
+        foreach ($product->variants as $variant) {
+            if ($variant->isSaleable()) {
+                $variants[] = $variant;
+            }
+        }
+        
+        return $variants;
+    }
+
+    /**
+     * Returns the allowed variants JSON
+     *
+     * @param Product $product
+     * @return float
+     */
+    public function getConfigurationConfig($product)
+    {
+        $options = $this->getOptions($product, $this->getAllowProducts($product));
+
+        $config = [
+            'attributes' => $this->getAttributesData($product, $options),
+            'index' => isset($options['index']) ? $options['index'] : [],
+            'regular_price' => [
+                'formated_price' => core()->currency($this->price->getMinimalPrice($product)),
+                'price' => $this->price->getMinimalPrice($product)
+            ],
+            'variant_prices' => $this->getVariantPrices($product),
+            'variant_images' => $this->getVariantImages($product),
+            'chooseText' => trans('shop::app.products.choose-option')
+        ];
+
+        return $config;
+    }
+
+    /**
+     * Get allowed attributes
+     *
+     * @param Product $product
+     * @return array
+     */
+    public function getAllowAttributes($product)
+    {
+        return $product->super_attributes;
+    }
+
+    /**
+     * Get Configurable Product Options
+     *
+     * @param Product $currentProduct
+     * @param array $allowedProducts
+     * @return array
+     */
+    public function getOptions($currentProduct, $allowedProducts)
+    {
+        $options = [];
+
+        $allowAttributes = $this->getAllowAttributes($currentProduct);
+
+        foreach ($allowedProducts as $product) {
+
+            $productId = $product->id;
+
+            foreach ($allowAttributes as $productAttribute) {
+                $productAttributeId = $productAttribute->id;
+
+                $attributeValue = $product->{$productAttribute->code};
+
+                $options[$productAttributeId][$attributeValue][] = $productId;
+
+                $options['index'][$productId][$productAttributeId] = $attributeValue;
+            }
+        }
+
+        return $options;
+    }
+
+    /**
+     * Get product attributes
+     *
+     * @param Product $product
+     * @param array $options
+     * @return array
+     */
+    public function getAttributesData($product, array $options = [])
+    {
+        $defaultValues = [];
+
+        $attributes = [];
+
+        foreach ($product->super_attributes as $attribute) {
+
+            $attributeOptionsData = $this->getAttributeOptionsData($attribute, $options);
+
+            if ($attributeOptionsData) {
+                $attributeId = $attribute->id;
+
+                $attributes[] = [
+                    'id' => $attributeId,
+                    'code' => $attribute->code,
+                    'label' => $attribute->name,
+                    'options' => $attributeOptionsData
+                ];
+            }
+        }
+
+        return $attributes;
+    }
+
+    /**
+     * @param Attribute $attribute
+     * @param array $options
+     * @return array
+     */
+    protected function getAttributeOptionsData($attribute, $options)
+    {
+        $attributeOptionsData = [];
+
+        foreach ($attribute->options as $attributeOption) {
+
+            $optionId = $attributeOption->id;
+
+            if(isset($options[$attribute->id][$optionId])) {
+                $attributeOptionsData[] = [
+                    'id' => $optionId,
+                    'label' => $attributeOption->label,
+                    'products' => $options[$attribute->id][$optionId]
+                ];
+            }
+        }
+
+        return $attributeOptionsData;
+    }
+
+    /**
+     * Get product prices for configurable variations
+     *
+     * @param Product $product
+     * @return array
+     */
+    protected function getVariantPrices($product)
+    {
+        $prices = [];
+
+        foreach ($this->getAllowProducts($product) as $variant) {
+            $prices[$variant->id] = [
+                'regular_price' => [
+                    'formated_price' => core()->currency($variant->price),
+                    'price' => $variant->price
+                ],
+                'final_price' => [
+                    'formated_price' => core()->currency($this->price->getMinimalPrice($variant)),
+                    'price' => $this->price->getMinimalPrice($variant)
+                ]
+            ];
+        }
+
+        return $prices;
+    }
+
+    /**
+     * Get product images for configurable variations
+     *
+     * @param Product $product
+     * @return array
+     */
+    protected function getVariantImages($product)
+    {
+        $images = [];
+
+        foreach ($this->getAllowProducts($product) as $variant) {
+            $images[$variant->id] = $this->gallery->getImages($variant);
+        }
+
+        return $images;
+    }
+}
\ No newline at end of file
diff --git a/packages/Webkul/Product/src/Product/Gallery.php b/packages/Webkul/Product/src/Product/Gallery.php
new file mode 100644
index 000000000..7e47592c1
--- /dev/null
+++ b/packages/Webkul/Product/src/Product/Gallery.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace Webkul\Product\Product;
+
+use Webkul\Attribute\Repositories\AttributeOptionRepository as AttributeOption;
+
+class Gallery extends AbstractProduct
+{
+    /**
+     * Retrieve collection of gallery images
+     *
+     * @param Product $product
+     * @return array
+     */
+    public function getImages($product)
+    {
+        $images[] = [
+            'small_image_url' => '',
+            'medium_image_url' => '',
+            'large_image_url' => '',
+        ];
+
+        return $images;
+    }
+}
\ No newline at end of file
diff --git a/packages/Webkul/Product/src/Product/Price.php b/packages/Webkul/Product/src/Product/Price.php
index f07417649..98e10e4f4 100644
--- a/packages/Webkul/Product/src/Product/Price.php
+++ b/packages/Webkul/Product/src/Product/Price.php
@@ -78,7 +78,7 @@ class Price extends AbstractProduct
     public function getSpecialPrice($product)
     {
         if($this->haveSpecialPrice($product)) {
-                return $product->special_price;
+            return $product->special_price;
         } else {
             return $product->price;
         }
diff --git a/packages/Webkul/Product/src/Product/Review.php b/packages/Webkul/Product/src/Product/Review.php
index 7028d3d8a..f9c60e3eb 100644
--- a/packages/Webkul/Product/src/Product/Review.php
+++ b/packages/Webkul/Product/src/Product/Review.php
@@ -4,6 +4,17 @@ namespace Webkul\Product\Product;
 
 class Review extends AbstractProduct
 {
+    /**
+     * Returns the product's avg rating
+     *
+    * @param Product $product
+     * @return float
+     */
+    public function getReviews($product)
+    {
+        return $product->reviews()->where('status', 'approved');
+    }
+
     /**
      * Returns the product's avg rating
      *
@@ -12,7 +23,7 @@ class Review extends AbstractProduct
      */
     public function getAverageRating($product)
     {
-        return round($product->reviews->average('rating'));
+        return number_format(round($product->reviews()->where('status', 'approved')->average('rating'), 2), 1);
     }
 
     /**
@@ -23,7 +34,7 @@ class Review extends AbstractProduct
      */
     public function getTotalReviews($product)
     {
-        return $product->reviews()->count();
+        return $product->reviews()->where('status', 'approved')->count();
     }
 
     /**
diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
index ef204dbcd..68afef5af 100644
--- a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
+++ b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
@@ -8,6 +8,9 @@ body {
     margin: 0;
     padding: 0;
     font-weight: 500;
+    position: relative;
+    min-height: 100%;
+    top: 0px;
     color: $font-color;
     font-size: $font-size-base;
 }
@@ -16,343 +19,9 @@ body {
     font-family: "Montserrat", sans-serif;
 }
 
-.header {
-    margin-top: 16px;
-    margin-bottom: 21px;
-
-    .header-top {
-        margin-bottom: 16px;
-        display: flex;
-        max-width: 80%;
-        width: 100%;
-        margin-left: auto;
-        margin-right: auto;
-        align-items: center;
-        justify-content: space-between;
-
-        div.left-content {
-            display: flex;
-            flex-direction: row;
-            justify-content: flex-start;
-            align-items: center;
-
-            ul.logo-container {
-                margin-right: 12px;
-
-                li {
-                    display: flex;
-                }
-            }
-
-            ul.search-container {
-                li.search-group {
-                    display: inline-flex;
-                    justify-content: center;
-                    align-items: center;
-
-                    .search-field {
-                        height: 38px;
-                        border: 2px solid $border-color;
-                        border-radius: 3px;
-                        border-right: none;
-                        border-top-right-radius: 0px;
-                        border-bottom-right-radius: 0px;
-                        padding-left: 12px;
-                        font-family: "Montserrat", sans-serif;
-                        font-size: 14px;
-                    }
-
-                    .search-icon-wrapper {
-                        box-sizing: border-box;
-                        height: 38px;
-                        width: 38px;
-                        border: 2px solid $border-color;
-                        border-top-right-radius: 3px;
-                        border-bottom-right-radius: 3px;
-
-                        .search-icon {
-                            margin-top: 4px;
-                            margin-left: 4px;
-                            height: 24px;
-                            width: 24px;
-                        }
-                    }
-                }
-            }
-        }
-
-        div.right-content {
-            display: flex;
-            flex-direction: row;
-            justify-content: flex-end;
-            align-items: center;
-
-            ul.account-dropdown-container {
-                float: right;
-                border-right: 2px solid $border-color;
-
-                li.account-dropdown {
-                    display: flex;
-                    flex-direction: row;
-                    margin-right: 14px;
-
-                    .account-icon {
-                        cursor:  pointer;
-                        margin-right: 8px;
-                        height: 24px;
-                        width: 24px;
-                    }
-
-                    .account {
-                        cursor:  pointer;
-                        padding-top: 3px;
-                        padding-right: 5px;
-                        margin-left: 8px;
-                    }
-
-                    .icon.arrow-down-icon {
-                        cursor:  pointer;
-                        margin-top: 10px;
-                    }
-                }
-            }
-
-            ul.cart-dropdown {
-                float: right;
-
-                li.cart-summary {
-                    display: flex;
-                    flex-direction: row;
-                    margin-left: 14px;
-
-                    .cart-icon {
-                        margin: 0;
-                        height: 24px;
-                        width: 24px;
-                        margin-right: 8px;
-                    }
-                    .cart {
-                        padding-top: 3px;
-                        padding-right: 5px;
-
-                        .cart-count {
-                            color: #0031f0;
-                            padding-right: 3px;
-                        }
-                    }
-
-                    .icon.arrow-down-icon {
-                        margin-top: 10px;
-                    }
-                }
-            }
-        }
-
-        .right-responsive {
-            display: none;
-
-            ul.right-wrapper {
-                display: flex;
-                flex-direction: row;
-                justify-content: flex-end;
-                align-items: center;
-
-                li:not(:last-child) {
-                    margin-right: 7px;
-
-                    span.icon {
-                        margin: 0;
-                        height: 24px;
-                        width: 24px;
-                    }
-                }
-            }
-        }
-    }
-
-    .header-bottom {
-        height: 48px;
-        margin-left: auto;
-        margin-right: auto;
-        border-top: 1px solid lightgrey;
-        border-bottom: 1px solid lightgrey;
-        font-size: 16px;
-        display: block;
-
-        ul.nav {
-            display: block;
-            font-size:16px;
-            height: 48px;
-            width: 80%;
-            margin-left: auto;
-            margin-right: auto;
-        }
-
-        .nav ul {
-            margin: 0;
-            padding:0;
-            border: 1px solid #B1B1B1;
-            box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.40);
-        }
-
-        .nav a {
-            display:block;
-            color: $font-color;
-            text-decoration: none;
-            padding: 0.8em 0.3em 0.8em 0.5em;
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            position: relative;
-        }
-
-        .nav {
-            vertical-align: top;
-            display: inline-block;
-        }
-
-        .nav li {
-            position: relative;
-            height:45px;
-        }
-
-        .nav > li {
-            float: left;
-            margin-right: 1px;
-
-        }
-
-        .nav > li > a {
-            margin-bottom: 1px;
-        }
-
-        .nav > li:last-child {
-            display:flex; align-items:center;
-            border-radius: 0 0 4px 0;
-            float:right;
-
-            img {
-                margin-right:6px;
-            }
-        }
-
-        .nav > li:last-child > a {
-            border-radius: 0 4px 0 0;
-        }
-
-        .nav li li a {
-            margin-top: 1px;
-        }
-
-        .nav li a:first-child:nth-last-child(2):before {
-            content: "";
-            position: absolute;
-            height: 0;
-            width: 0;
-            border: 5px solid transparent;
-            top: 50% ;
-            right:5px;
-        }
-
-        /* submenu positioning*/
-
-        .nav ul {
-            position: absolute;
-            white-space: nowrap;
-            border: 1px solid #B1B1B1;
-            background-color:white;
-            z-index: 1;
-            left: -99999em;
-        }
-
-        .nav > li:hover > ul {
-            left: auto;
-            min-width: 100%;
-        }
-
-        .nav > li li:hover > ul {
-            left: 100%;
-            margin-left: 1px;
-            top: -2px;
-        }
-
-        .nav > li:hover > a:first-child:nth-last-child(2):before {
-            margin-top:-5px
-        }
-
-        .nav li li > a:first-child:nth-last-child(2):before {
-            margin-top: -5px
-        }
-
-        .nav li li:hover > a:first-child:nth-last-child(2):before {
-            right: 10px;
-        }
-
-    }
-}
-
-section.slider-block {
-    display: block;
-    margin-bottom: 5%;
-
-    div.slider-content {
-        width: 80%;
-        height: 500px;
-        margin-left: auto;
-        margin-right: auto;
 
 
-        ul.slider-images {
 
-            li{
-                //both rules are equivalent to display none
-                position: absolute;
-                visibility: hidden;
-            }
-
-            li.show {
-                display:block;
-                visibility: visible;
-                width: 80%;
-                animation-name: example;
-                animation-duration: 4s;
-            }
-
-            @keyframes example {
-                0%   {opacity: 0.1;}
-                100% {opacity: 1;}
-            }
-
-            li img {
-                height: 500px;
-                width:100%;
-            }
-        }
-        div.slider-control {
-            display: block;
-            position: absolute;
-            user-select: none;
-            bottom: 2%;
-            right: 11%;
-
-
-            .dark-left-icon {
-                background-color: $background-color;
-                height: 48px;
-                width: 48px;
-                max-height: 100%;
-                max-width: 100%;
-            }
-
-            .light-right-icon {
-                background-color: $color-black;
-                height: 48px;
-                width: 48px;
-                max-height: 100%;
-                max-width: 100%;
-            }
-        }
-    }
-}
 
 .layered-filter-wrapper {
     width: 25%;
@@ -445,10 +114,350 @@ section.slider-block {
 
 
 .main-container-wrapper {
-    margin-left: 10%;
-    margin-right: 10%;
+    width: 1200px;
+    margin: auto;
+    max-width: 100%;
+    padding: 20px;
+    padding-top: 0px;
+
+    .header {
+        margin-bottom: 22px;
+        margin-top: 15px;
+
+        .header-top {
+            margin-bottom: 16px;
+            display: flex;
+            max-width: 80%;
+            width: 100%;
+            margin-left: auto;
+            margin-right: auto;
+            align-items: center;
+            justify-content: space-between;
+
+            div.left-content {
+                display: flex;
+                flex-direction: row;
+                justify-content: flex-start;
+                align-items: center;
+
+                ul.logo-container {
+                    margin-right: 12px;
+
+                    li {
+                        display: flex;
+                    }
+                }
+
+                ul.search-container {
+                    li.search-group {
+                        display: inline-flex;
+                        justify-content: center;
+                        align-items: center;
+
+                        .search-field {
+                            height: 38px;
+                            border: 2px solid $border-color;
+                            border-radius: 3px;
+                            border-right: none;
+                            border-top-right-radius: 0px;
+                            border-bottom-right-radius: 0px;
+                            padding-left: 12px;
+                            font-family: "Montserrat", sans-serif;
+                            font-size: 14px;
+                        }
+
+                        .search-icon-wrapper {
+                            box-sizing: border-box;
+                            height: 38px;
+                            width: 38px;
+                            border: 2px solid $border-color;
+                            border-top-right-radius: 3px;
+                            border-bottom-right-radius: 3px;
+
+                            .search-icon {
+                                margin-top: 4px;
+                                margin-left: 4px;
+                                height: 24px;
+                                width: 24px;
+                            }
+                        }
+                    }
+                }
+            }
+
+            div.right-content {
+                display: flex;
+                flex-direction: row;
+                justify-content: flex-end;
+                align-items: center;
+
+                ul.account-dropdown-container {
+                    float: right;
+                    border-right: 2px solid $border-color;
+
+                    li.account-dropdown {
+                        display: flex;
+                        flex-direction: row;
+                        margin-right: 14px;
+
+                        .account-icon {
+                            cursor:  pointer;
+                            margin-right: 8px;
+                            height: 24px;
+                            width: 24px;
+                        }
+
+                        .account {
+                            cursor:  pointer;
+                            padding-top: 3px;
+                            padding-right: 5px;
+                            margin-left: 8px;
+                        }
+
+                        .icon.arrow-down-icon {
+                            cursor:  pointer;
+                            margin-top: 10px;
+                        }
+                    }
+                }
+
+                ul.cart-dropdown {
+                    float: right;
+
+                    li.cart-summary {
+                        display: flex;
+                        flex-direction: row;
+                        margin-left: 14px;
+
+                        .cart-icon {
+                            margin: 0;
+                            height: 24px;
+                            width: 24px;
+                            margin-right: 8px;
+                        }
+                        .cart {
+                            padding-top: 3px;
+                            padding-right: 5px;
+
+                            .cart-count {
+                                color: #0031f0;
+                                padding-right: 3px;
+                            }
+                        }
+
+                        .icon.arrow-down-icon {
+                            margin-top: 10px;
+                        }
+                    }
+                }
+            }
+
+            .right-responsive {
+                display: none;
+
+                ul.right-wrapper {
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: flex-end;
+                    align-items: center;
+
+                    li:not(:last-child) {
+                        margin-right: 7px;
+
+                        span.icon {
+                            margin: 0;
+                            height: 24px;
+                            width: 24px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .header-bottom {
+            height: 48px;
+            margin-left: auto;
+            margin-right: auto;
+            border-top: 1px solid lightgrey;
+            border-bottom: 1px solid lightgrey;
+            font-size: 16px;
+            display: block;
+
+            ul.nav {
+                display: block;
+                font-size:16px;
+                height: 48px;
+                width: 80%;
+                margin-left: auto;
+                margin-right: auto;
+            }
+
+            .nav ul {
+                margin: 0;
+                padding:0;
+                border: 1px solid #B1B1B1;
+                box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.40);
+            }
+
+            .nav a {
+                display:block;
+                color: $font-color;
+                text-decoration: none;
+                padding: 0.8em 0.3em 0.8em 0.5em;
+                text-transform: uppercase;
+                letter-spacing: 2px;
+                position: relative;
+            }
+
+            .nav {
+                vertical-align: top;
+                display: inline-block;
+            }
+
+            .nav li {
+                position: relative;
+                height:45px;
+            }
+
+            .nav > li {
+                float: left;
+                margin-right: 1px;
+
+            }
+
+            .nav > li > a {
+                margin-bottom: 1px;
+            }
+
+            .nav > li:last-child {
+                display:flex; align-items:center;
+                border-radius: 0 0 4px 0;
+                float:right;
+
+                img {
+                    margin-right:6px;
+                }
+            }
+
+            .nav > li:last-child > a {
+                border-radius: 0 4px 0 0;
+            }
+
+            .nav li li a {
+                margin-top: 1px;
+            }
+
+            .nav li a:first-child:nth-last-child(2):before {
+                content: "";
+                position: absolute;
+                height: 0;
+                width: 0;
+                border: 5px solid transparent;
+                top: 50% ;
+                right:5px;
+            }
+
+            /* submenu positioning*/
+
+            .nav ul {
+                position: absolute;
+                white-space: nowrap;
+                border: 1px solid #B1B1B1;
+                background-color:white;
+                z-index: 1;
+                left: -99999em;
+            }
+
+            .nav > li:hover > ul {
+                left: auto;
+                min-width: 100%;
+            }
+
+            .nav > li li:hover > ul {
+                left: 100%;
+                margin-left: 1px;
+                top: -2px;
+            }
+
+            .nav > li:hover > a:first-child:nth-last-child(2):before {
+                margin-top:-5px
+            }
+
+            .nav li li > a:first-child:nth-last-child(2):before {
+                margin-top: -5px
+            }
+
+            .nav li li:hover > a:first-child:nth-last-child(2):before {
+                right: 10px;
+            }
+
+        }
+    }
+
+    section.slider-block {
+        display: block;
+        margin-bottom: 5%;
+
+        div.slider-content {
+            width: 100%;
+            height: 500px;
+
+            ul.slider-images {
+
+                li{
+                    position: absolute;
+                    visibility: hidden;
+                }
+
+                li.show {
+                    display: block;
+                    width: 89%;
+                    margin: auto;
+                    visibility: visible;
+                    animation-name: example;
+                    animation-duration: 4s;
+                }
+
+                @keyframes example {
+                    0%   {opacity: 0.1;}
+                    100% {opacity: 1;}
+                }
+
+                li img {
+                    width: 100%;
+                    height: 500px;
+                }
+            }
+            div.slider-control {
+                display: block;
+                position: absolute;
+                user-select: none;
+                right: 8%;
+
+
+                .dark-left-icon {
+                    background-color: $background-color;
+                    height: 48px;
+                    width: 48px;
+                    max-height: 100%;
+                    max-width: 100%;
+                }
+
+                .light-right-icon {
+                    background-color: $color-black;
+                    height: 48px;
+                    width: 48px;
+                    max-height: 100%;
+                    max-width: 100%;
+                }
+            }
+        }
+    }
+    // margin-left: 10%;
+    // margin-right: 10%;
 
     .content-container {
+        display: inline-block;
         width: 100%;
     }
 
@@ -459,7 +468,7 @@ section.slider-block {
 
     .product-grid {
         display: grid;
-        grid-gap: 15px;
+        grid-gap: 30px;
 
         &.max-2-col {
             grid-template-columns: repeat(2, minmax(250px, 1fr));
@@ -508,6 +517,15 @@ section.slider-block {
         .product-ratings {
             width: 100%;
             margin-bottom: 14px;
+
+            .icon {
+                width: 16px;
+                height: 16px;
+            }
+
+            .total-reviews {
+                display: none;
+            }
         }
 
         .cart-fav-seg {
@@ -950,12 +968,11 @@ section.slider-block {
 
     //edit form
     .edit-form-content {
-        padding: 0px 25px;
         margin-left: 5.5%;
         margin-top: 1%;
         width: 100%;
 
-        .title {
+        .edit-text {
             margin-bottom: 2%;
             margin-left: auto;
             margin-right: auto;
@@ -965,44 +982,19 @@ section.slider-block {
         .edit-form {
             display: flex;
             background: $background-color;
+            border: 1px solid $border-color;
             flex-direction: column;
             min-height: 345px;
-            // padding: 25px;
+            padding: 25px;
         }
     }
     //edit form ends
-
-    //address form
-    .address-form-content {
-        padding: 0px 25px;
-        margin-left: 5.5%;
-        margin-top: 1%;
-        width: 100%;
-
-        .title {
-            margin-bottom: 2%;
-            margin-left: auto;
-            margin-right: auto;
-            font-size: 24px;
-        }
-
-        .address-form {
-            display: flex;
-            background: $background-color;
-            flex-direction: column;
-            min-height: 345px;
-            // padding: 25px;
-        }
-    }
-    //address form ends
 }
 //account ends here
-
 //customers page css ends here
 
 // product pages css starts here
-
-section.product-detail, section.product-review {
+section.product-detail {
     font-size: 16px;
     color: $product-font-color;
 
@@ -1011,136 +1003,59 @@ section.product-detail, section.product-review {
     }
 
     div.layouter {
-        display:flex;
-        flex-flow: row;
-        margin-top: 21px;
+        margin-top: 20px;
 
-        // .rating-reviews {
-        //     margin-top: 30px;
+        form {
+            display: flex;
+            flex-flow: row;
+            justify-content: space-between;
+            width: 100%;
 
-        //     .title-inline {
-        //         display: inline-flex;
-        //         align-items: center;
-        //         justify-content: space-between;
-        //         margin-bottom: 20px;
-        //         width: 100%;
+            .product-gallery-group {
+                margin-right: 2.5%;
+                width: 50%;
+                position: inherit;
 
-        //         button {
-        //             float: right;
-        //             border-radius: 0px !important;
-        //         }
-        //     }
+                div.product-image-group {
+                    display:flex;
+                    flex-direction: row;
+                    justify-content: flex-start;
 
-        //     .overall {
-        //         display: flex;
-        //         flex-direction: row;
-        //         align-items: center;
-        //         justify-content: space-between;
-        //         height: 150px;
-
-        //         .left-side {
-        //             margin-bottom: 20px;
-
-        //             .number{
-        //                 font-size: 34px;
-        //             }
-        //         }
-
-        //         .right-side {
-        //             display: block;
-
-        //             .rater {
-        //                 display: inline-flex;
-        //                 align-items: center;
-
-        //                 .star {
-        //                     width: 50px;
-        //                     height: 20px;
-        //                     padding: 1px;
-        //                     margin-right: 8px;
-        //                 }
-
-        //                 .line-bar {
-        //                     height: 4px;
-        //                     width: 158px;
-        //                     margin-right: 12px;
-        //                     background: $bar-color;
-
-        //                     .line-value {
-        //                         height: 4px;
-        //                         width: 100px;
-        //                         background-color: $dark-blue-shade;
-        //                     }
-        //                 }
-        //             }
-        //         }
-        //     }
-
-        //     .reviews {
-        //         margin-top: 34px;
-        //         margin-bottom: 90px;
-
-        //         .review {
-        //             margin-bottom: 25px;
-
-        //             .title {
-        //                 margin-bottom: 5px;
-        //             }
-
-        //             .stars {
-        //                 margin-bottom: 15px;
-        //             }
-        //             .message {
-        //                 margin-bottom: 10px;
-        //             }
-        //         }
-        //         .view-all {
-        //             margin-top:15px;
-        //             color: $logo-color;
-        //             margin-bottom:15px;
-        //         }
-        //     }
-        // }
-
-        .product-gallery-group {
-            margin-right: 2.5%;
-            position: inherit;
-
-            div.product-image-group {
-                display:flex;
-                flex-direction: row;
-                justify-content: flex-start;
-
-                .side-group {
-                    display: flex;
-                    flex-direction: column;
-                    margin-right: 4px;
-                }
-
-                .product-hero-image {
-                    display: block;
-                    position: relative;
-
-                    .wishlist {
-                        position: absolute;
-                        top: 10px;
-                        right: 12px;
+                    .side-group {
+                        display: flex;
+                        flex-direction: column;
+                        margin-right: 4px;
                     }
 
-                    .share {
-                        position: absolute;
-                        top: 10px;
-                        right: 45px;
+                    .product-hero-image {
+                        display: block;
+                        position: relative;
+                        width: 50%;
+
+                        .hero-image {
+                            object-fit: contain;
+                        }
+
+
+                        .wishlist {
+                            position: absolute;
+                            top: 10px;
+                            right: 12px;
+                        }
+
+                        .share {
+                            position: absolute;
+                            top: 10px;
+                            right: 45px;
+                        }
                     }
                 }
-            }
-            .product-button-group {
-                display: inline-flex;
-                justify-content: space-between;
-                width: 100%;
-                // padding: 0.6%;
+                .product-button-group {
+                    display: inline-flex;
+                    justify-content: space-between;
+                    width: 40%;
+                    // padding: 0.6%;
 
-                form{
                     width: 100%;
                     height: 45px;
                     .add-to-cart {
@@ -1153,202 +1068,89 @@ section.product-detail, section.product-review {
                         border-radius: 0px;
 
                     }
+
                 }
 
             }
+            .details {
+                width: 45%;
 
+                .product-heading {
+                    font-size: 24px;
+                    color: $product-font-color;
+                }
+            }
         }
 
-        .product-details {
-            width: 100%;
 
-            .product-heading {
-                font-size: 24px;
-                color: $product-font-color;
-                margin-bottom: 14px;
+    }
+}
+
+.rating-reviews {
+
+    .rating-header {
+        font-weight: 600;
+        padding: 20px 0;
+    }
+
+    .stars {
+        .icon {
+            width: 16px;
+            height: 16px;
+        }
+    }
+
+    .overall {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+
+        .review-info {
+            .number {
+                font-size: 34px;
             }
 
-            .rating {
-                color: $product-font-color;
-                margin-bottom: 14px;
+            .total-reviews {
+                margin-top: 10px;
+            }
+        }
+    }
+
+    .reviews {
+        margin-top: 40px;
+        margin-bottom: 40px;
+
+        .review {
+            margin-bottom: 25px;
+
+            .title {
+                margin-bottom: 5px;
             }
 
-            .product-price {
-                margin-bottom: 14px;
-                font-size: 24px;
-
-                .special-price {
-                    font-size: 24px;
-                }
+            .stars {
+                margin-bottom: 15px;
+                display: inline-block;
             }
 
-            .stock-status {
-                margin-bottom: 14px;
+            .message {
+                margin-bottom: 10px;
             }
 
-            .description {
-                margin-bottom: 14px;
+            .reviewer-details {
+                color: #5E5E5E;
             }
+        }
 
-            .full-specifications {
-                td {
-                    padding: 10px 0;
-                    color: #5E5E5E;
-
-                    &:first-child {
-                        padding-right: 40px;
-                    }
-                }
-            }
-
-            .accordian .accordian-header {
-                font-size: 16px;
-                padding-left: 0;
-                font-weight: 600;
-            }
-
-            .attributes {
-                display: block;
-                width: 100%;
-
-                .attribute {
-                    height: 39px;
-                    margin-bottom: 20px;
-
-                    .title {
-                        float: left;
-                        height: 100%;
-                        min-width: 130px;
-                        padding-top: 9px;
-                    }
-
-                    .values {
-                        display: inline-flex;
-
-                        .colors {
-                            margin-right:5px;
-                        }
-                        .colors:last-child {
-                            margin-right: 0;
-                        }
-
-                        .red {
-                            height: 37px;
-                            width: 37px;
-                            background: red;
-                            border: 1px solid $border-color;
-                            border-radius:  2px;
-                        }
-
-                        .blue {
-                            height: 37px;
-                            width: 37px;
-                            background: blue;
-                            border: 1px solid $border-color;
-                            border-radius:  2px;
-                        }
-
-                        .green {
-                            height: 37px;
-                            width: 37px;
-                            background: green;
-                            border: 1px solid $border-color;
-                            border-radius:  2px;
-                        }
-
-                        .size {
-                            margin-right:5px;
-                            line-height: 38px;
-                            height: 37px;
-                            width: 60px;
-                            border: 1px solid $border-color;
-                            border-radius:  2px;
-                            text-align: center;
-                            vertical-align: middle;
-                        }
-                        .size:last-child {
-                            margin-right: 0;
-                        }
-
-                        .quantity {
-                            .values {
-                                .control {
-                                    height: 37px !important;
-                                    width: 30px !important;
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-
-            .full-description {
-                font-size: 16px;
-            }
-
-            .rating-reviews {
-                margin-top: 30px;
-
-                .title {
-                    margin-bottom: 15px;
-                    font-weight: 600;
-                }
-
-                .overall {
-                    margin-bottom: 5px;
-
-                    .review-info {
-                        .number {
-                            font-size: 34px;
-                        }
-                    }
-
-                    button {
-                        float: right;
-                        border-radius: 0px !important;
-                    }
-
-                }
-
-                .reviews {
-                    margin-top: 34px;
-                    margin-bottom: 80px;
-
-                    .review {
-                        margin-bottom: 25px;
-
-                        .stars {
-                            margin-bottom: 15px;
-                            display: inline-block;
-
-                            .icon {
-                                width: 18px;
-                                height: 18px;
-                            }
-                        }
-
-                        .message {
-                            margin-bottom: 10px;
-                        }
-
-                        .reviewer-details {
-                            color: #5E5E5E;
-                        }
-                    }
-
-                    .view-all {
-                        margin-top:15px;
-                        color: $logo-color;
-                        margin-bottom:15px;
-                    }
-                }
-            }
+        .view-all {
+            margin-top:15px;
+            color: $logo-color;
+            margin-bottom:15px;
         }
     }
 }
 
 /* cart pages and elements css begins here */
-
 section.cart {
     color: $product-font-color;
     font-size: 16px;
@@ -1602,4 +1404,4 @@ section.cart {
         margin-left:auto;
         margin-right:auto;
     }
-}
+}
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Resources/lang/en/app.php b/packages/Webkul/Shop/src/Resources/lang/en/app.php
index 914f33216..f2aaaf9a6 100644
--- a/packages/Webkul/Shop/src/Resources/lang/en/app.php
+++ b/packages/Webkul/Shop/src/Resources/lang/en/app.php
@@ -49,6 +49,9 @@ return [
         'specification' => 'Specification',
         'total-reviews' => ':total Reviews',
         'by' => 'By :name',
-        'up-sell-title' => 'We found other products you might like!'
+        'up-sell-title' => 'We found other products you might like!',
+        'reviews-title' => 'Ratings & Reviews',
+        'write-review-btn' => 'Write Review',
+        'choose-option' => 'Choose an option'
     ]
 ];
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Resources/views/layouts/master.blade.php b/packages/Webkul/Shop/src/Resources/views/layouts/master.blade.php
index f220ec63e..143fc99f6 100644
--- a/packages/Webkul/Shop/src/Resources/views/layouts/master.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/layouts/master.blade.php
@@ -21,12 +21,12 @@
 
     <div id="app">
 
-        @include('shop::layouts.header.index')
-
-        @yield('slider')
-
         <div class="main-container-wrapper">
 
+            @include('shop::layouts.header.index')
+
+            @yield('slider')
+
             <div class="content-container">
 
                 @yield('content-wrapper')
diff --git a/packages/Webkul/Shop/src/Resources/views/products/list/card.blade.php b/packages/Webkul/Shop/src/Resources/views/products/list/card.blade.php
index 34f182e1a..4a8597386 100644
--- a/packages/Webkul/Shop/src/Resources/views/products/list/card.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/products/list/card.blade.php
@@ -22,11 +22,7 @@
         
         @include ('shop::products.price', ['product' => $product])
 
-        @if ($product->reviews->count())
-
-            @include ('shop::products.review', ['product' => $product])
-
-        @endif
+        @include ('shop::products.review', ['product' => $product])
 
         @include ('shop::products.add-to', ['product' => $product])
     
diff --git a/packages/Webkul/Shop/src/Resources/views/products/price.blade.php b/packages/Webkul/Shop/src/Resources/views/products/price.blade.php
index dedfcc8a7..e47b15221 100644
--- a/packages/Webkul/Shop/src/Resources/views/products/price.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/products/price.blade.php
@@ -6,7 +6,7 @@
     
         <span class="price-label">{{ __('shop::app.products.price-label') }}</span>
 
-        <span>{{ core()->currency($priceHelper->getMinimalPrice($product)) }}</span>    
+        <span class="final-price">{{ core()->currency($priceHelper->getMinimalPrice($product)) }}</span>    
 
     @else
 
diff --git a/packages/Webkul/Shop/src/Resources/views/products/review.blade.php b/packages/Webkul/Shop/src/Resources/views/products/review.blade.php
index f5cd7d9ed..47b7000cf 100644
--- a/packages/Webkul/Shop/src/Resources/views/products/review.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/products/review.blade.php
@@ -1,11 +1,19 @@
-<div class="product-ratings">
+@inject ('reviewHelper', 'Webkul\Product\Product\Review')
+@if ($total = $reviewHelper->getTotalReviews($product))
 
-    @inject ('reviewHelper', 'Webkul\Product\Product\Review')
+    <div class="product-ratings">
 
-    @for ($i = 1; $i <= $reviewHelper->getAverageRating($product); $i++)
+        <span class="stars">
+            @for ($i = 1; $i <= round($reviewHelper->getAverageRating($product)); $i++)
 
-        <span class="icon star-icon"></span>
-    
-    @endfor
-    
-</div>
\ No newline at end of file
+                <span class="icon star-icon"></span>
+
+            @endfor
+        </span>
+
+        <div class="total-reviews">
+            {{ __('shop::app.products.total-reviews', ['total' => $total]) }}
+        </div>
+
+    </div>
+@endif
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Resources/views/products/view.blade.php b/packages/Webkul/Shop/src/Resources/views/products/view.blade.php
index 494f8a8bc..e9d22bd4a 100644
--- a/packages/Webkul/Shop/src/Resources/views/products/view.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/products/view.blade.php
@@ -9,129 +9,57 @@
         </div>
         <div class="layouter">
 
-            @include ('shop::products.view.gallery')
+            <form method="POST" @auth('customer') action="{{ route('cart.customer.add', $product->id) }}" @endauth @guest action="{{ route('cart.guest.add', $product->id) }}" @endguest>
+                @csrf()
 
-            <div class="product-details" id="dealit">
+                <input type="hidden" name="product">
 
-                <div class="product-heading">
-                    <span>{{ $product->name }}</span>
-                </div>
+                @include ('shop::products.view.gallery')
 
-                <div class="rating">
-                    <img src="{{ bagisto_asset('images/5star.svg') }}" />
-                    75 Ratings & 11 Reviews
-                </div>
+                <div class="details">
 
-                @include ('shop::products.price', ['product' => $product])
+                    <div class="product-heading">
+                        <span>{{ $product->name }}</span>
+                    </div>
 
-                @include ('shop::products.view.stock')
+                    @include ('shop::products.review', ['product' => $product])
 
-                <br/>
+                    @include ('shop::products.price', ['product' => $product])
 
-                <div class="description">
-                    {{ $product->short_description }}
-                </div>
+                    @include ('shop::products.view.stock')
 
-                @if ($product->type == 'configurable')
+
+                    <div class="description">
+                        {{ $product->short_description }}
+                    </div>
 
                     @include ('shop::products.view.configurable-options')
 
-                @endif
-
-                <accordian :title="{{ __('shop::app.products.description') }}" :active="true">
-                    <div slot="header">
-                        {{ __('shop::app.products.description') }}
-                        <i class="icon expand-icon right"></i>
-                    </div>
-
-                    <div slot="body">
-                        <div class="full-description">
-                            {{ $product->description }}
+                    <accordian :title="'{{ __('shop::app.products.description') }}'" :active="true">
+                        <div slot="header">
+                            {{ __('shop::app.products.description') }}
+                            <i class="icon expand-icon right"></i>
                         </div>
-                    </div>
-                </accordian>
 
-                @include ('shop::products.view.attributes')
+                        <div slot="body">
+                            <div class="full-description">
+                                {{ $product->description }}
+                            </div>
+                        </div>
+                    </accordian>
 
-                @include ('shop::products.view.reviews')
+                    @include ('shop::products.view.attributes')
+
+                    @include ('shop::products.view.reviews')
+
+                </div>
+
+            </form>
 
-            </div>
         </div>
 
         @include ('shop::products.view.up-sells')
 
     </section>
 
-    @push('scripts')
-        <script type="text/javascript">
-            var topBoundOfProductGallery = 0;
-            function getTopBound() {
-                var rect = document.getElementById("getbound").getBoundingClientRect();
-                topBoundOfProductGallery = rect.top;
-                console.log('From Top = ', rect.top);
-            }
-
-            window.onload = getTopBound;
-
-            // window.onscroll = function() {
-            //     myFunction()
-            // };
-
-            // $(document).ready(function () {
-            //     $(document).scroll(function (event) {
-            //         var scroll = $(document).scrollTop();
-            //         if(scroll > 182) {
-            //             $('#dealit').css('width', '50%');
-
-            //             $('#dealit').css('margin-left', '59.7%');
-
-            //             $('#getbound').css('position', 'fixed');
-
-            //             $('#getbound').css('top', '0');
-            //         } else if(scroll < 182) {
-            //             $('#dealit').css('width', '100%');
-
-            //             $('#dealit').css('margin-left', '');
-
-            //             $('#getbound').css('position', '');
-
-            //             $('#getbound').css('top', '');
-
-            //         }
-
-            //     });
-            // });
-
-            // function myFunction() {
-
-            //     if(document.body.scrollTop > 182 || document.documentElement.scrollTop > 182) {
-
-            //         // document.getElementById('dealit').style.style = 'none';
-
-            //         document.getElementById('dealit').classList.remove("product-details");
-
-            //         document.getElementById('dealit').width = '50%';
-
-            //         document.getElementById('dealit').marginLeft = '60%';
-
-            //         document.getElementById('getbound').style.position = 'fixed';
-
-            //         document.getElementById('getbound').style.top = '0';
-
-            //     }
-            //     else if(document.body.scrollTop < 182 || document.documentElement.scrollTop < 182) {
-
-            //         document.getElementById('dealit').classList.add("product-details");
-
-            //         document.getElementById('dealit').width = '100%';
-
-            //         document.getElementById('dealit').marginLeft = '0';
-
-            //         document.getElementById('getbound').style.position = '';
-
-            //         document.getElementById('getbound').style.top = '';
-            //     }
-            // }
-        </script>
-    @endpush
 @endsection
diff --git a/packages/Webkul/Shop/src/Resources/views/products/view/attributes.blade.php b/packages/Webkul/Shop/src/Resources/views/products/view/attributes.blade.php
index 9b5339c84..db5689179 100644
--- a/packages/Webkul/Shop/src/Resources/views/products/view/attributes.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/products/view/attributes.blade.php
@@ -1,6 +1,6 @@
 @inject ('productViewHelper', 'Webkul\Product\Product\View')
 
-<accordian :title="{{ __('shop::app.products.specification') }}" :active="false">
+<accordian :title="'{{ __('shop::app.products.specification') }}'" :active="false">
     <div slot="header">
         {{ __('shop::app.products.specification') }}
         <i class="icon expand-icon right"></i>
diff --git a/packages/Webkul/Shop/src/Resources/views/products/view/configurable-options.blade.php b/packages/Webkul/Shop/src/Resources/views/products/view/configurable-options.blade.php
index 1ebdb1f39..fceefd15f 100644
--- a/packages/Webkul/Shop/src/Resources/views/products/view/configurable-options.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/products/view/configurable-options.blade.php
@@ -1,33 +1,240 @@
-<div class="attributes">
+@if ($product->type == 'configurable')
 
-    <div class="attribute color">
-        <div class="title">Color</div>
+    @inject ('configurableOptionHelper', 'Webkul\Product\Product\ConfigurableOption')
 
-        <div class="values">
-            <div class="colors red"></div>
-            <div class="colors blue"></div>
-            <div class="colors green"></div>
-        </div>
-    </div>
+    <product-options></product-options>
 
-    <div class="attribute size">
-        <div class="title">Size</div>
+    @push('scripts')
 
-        <div class="values">
-            <div class="size xl">XL</div>
-            <div class="size xxl">XXL</div>
-            <div class="size xxxl">XXXL</div>
-        </div>
-    </div>
+        <script type="text/x-template" id="product-options-template">
+            <div class="attributes">
 
-    <div class="attribute quantity">
-        <div class="title">Quantity</div>
+                <input type="hidden" name="selected_configurable_option" :value="selectedProductId">
 
-        <div class="values">
-            <div class="size">1</div>
-        </div>
-    </div>
+                <div v-for='(attribute, index) in childAttributes' class="attribute control-group" :class="[errors.has('super_attribute[' + attribute.id + ']') ? 'has-error' : '']">
+                    <label class="reqiured">@{{ attribute.label }}</label>
 
-</div>
+                    <select v-validate="'required'" class="control" :name="['super_attribute[' + attribute.id + ']']" :disabled="attribute.disabled" @change="configure(attribute, $event.target.value)" :id="['attribute_' + attribute.id]">
 
-<hr/>
\ No newline at end of file
+                        <option  v-for='(option, index) in attribute.options' :value="option.id">@{{ option.label }}</option>
+                        
+                    </select>
+
+                    <span class="control-error" v-if="errors.has('super_attribute[' + attribute.id + ']')">
+                        @{{ errors.first('super_attribute[' + attribute.id + ']') }}
+                    </span>
+                </div>
+
+            </div>
+        </script>
+
+        <?php $config = $configurableOptionHelper->getConfigurationConfig($product) ?>
+
+        <script>
+            
+            Vue.component('product-options', {
+
+                template: '#product-options-template',
+
+                data: () => ({
+                    config: @json($config),
+                    
+                    childAttributes: [],
+
+                    selectedProductId: '',
+
+                    simpleProduct: null
+                }),
+
+                created () {
+                    var config = @json($config);
+
+                    var childAttributes = this.childAttributes,
+                        attributes = config.attributes.slice(),
+                        index = attributes.length,
+                        attribute;
+
+                    while (index--) {
+                        attribute = attributes[index];
+
+                        attribute.options = [];
+
+                        if (index) {
+                            attribute.disabled = true;
+                        } else {
+                            this.fillSelect(attribute);
+                        }
+
+                        attribute = Object.assign(attribute, {
+                            childAttributes: childAttributes.slice(),
+                            prevAttribute: attributes[index - 1],
+                            nextAttribute: attributes[index + 1]
+                        });
+
+                        childAttributes.unshift(attribute);
+                    }
+                },
+
+                methods: {
+                    configure (attribute, value) {
+                        this.simpleProduct = this.getSelectedProductId(attribute, value);
+
+                        if (value) {
+                            attribute.selectedIndex = this.getSelectedIndex(attribute, value);
+
+                            if (attribute.nextAttribute) {
+                                attribute.nextAttribute.disabled = false;
+
+                                this.fillSelect(attribute.nextAttribute);
+                                this.resetChildren(attribute.nextAttribute);
+                            } else {
+                                this.selectedProductId = attribute.options[attribute.selectedIndex].allowedProducts[0];
+                            }
+                        } else {
+                            attribute.selectedIndex = 0;
+
+                            this.resetChildren(attribute);
+
+                            this.clearSelect(attribute.nextAttribute)
+                        }
+
+                        this.reloadPrice();
+                        this.changeProductImages();
+                    },
+
+                    getSelectedIndex (attribute, value) {
+                        var selectedIndex = 0;
+
+                        attribute.options.forEach(function(option, index) {
+                            if(option.id == value) {
+                                selectedIndex = index;
+                            }
+                        })
+
+                        return selectedIndex;
+                    },
+
+                    getSelectedProductId (attribute, value) {
+                        var options = attribute.options,
+                            matchedOptions;
+
+                        matchedOptions = options.filter(function (option) {
+                            return option.id == value;
+                        });
+
+                        if(matchedOptions[0] != undefined && matchedOptions[0].allowedProducts != undefined) {
+                            return matchedOptions[0].allowedProducts[0];
+                        }
+
+                        return undefined;
+                    },
+
+                    fillSelect (attribute) {
+                        var options = this.getAttributeOptions(attribute.id),
+                            prevOption,
+                            index = 1,
+                            allowedProducts,
+                            i,
+                            j;
+
+                        this.clearSelect(attribute)
+
+                        attribute.options = [];
+                        attribute.options[0] = {'id': '', 'label': this.config.chooseText, 'products': []};
+
+                        if (attribute.prevAttribute) {
+                            prevOption = attribute.prevAttribute.options[attribute.prevAttribute.selectedIndex];
+                        }
+
+                        if (options) {
+                            for (i = 0; i < options.length; i++) {
+                                allowedProducts = [];
+
+                                if (prevOption) {
+                                    for (j = 0; j < options[i].products.length; j++) {
+                                        if (prevOption.products && prevOption.products.indexOf(options[i].products[j]) > -1) {
+                                            allowedProducts.push(options[i].products[j]);
+                                        }
+                                    }
+                                } else {
+                                    allowedProducts = options[i].products.slice(0);
+                                }
+
+                                if (allowedProducts.length > 0) {
+                                    options[i].allowedProducts = allowedProducts;
+
+                                    attribute.options[index] = options[i];
+
+                                    index++;
+                                }
+                            }
+                        }
+                    },
+
+                    resetChildren (attribute) {
+                        if (attribute.childAttributes) {
+                            attribute.childAttributes.forEach(function (set) {
+                                set.selectedIndex = 0;
+                                set.disabled = true;
+                            });
+                        }
+                    },
+
+                    clearSelect: function (attribute) {
+                        if(!attribute)
+                            return;
+
+                        var element = document.getElementById("attribute_" + attribute.id);
+
+                        if(element) {
+                            element.selectedIndex = "0";
+                        }
+                    },
+                    
+                    getAttributeOptions (attributeId) {
+                        var this_this = this,
+                            options;
+
+                        this.config.attributes.forEach(function(attribute, index) {
+                            if (attribute.id == attributeId) {
+                                options = attribute.options;
+                            }    
+                        })
+
+                        return options;
+                    },
+
+                    reloadPrice () {
+                        var selectedOptionCount = 0;
+
+                        this.childAttributes.forEach(function(attribute) {
+                            if(attribute.selectedIndex) {
+                                selectedOptionCount++;
+                            }
+                        });
+
+                        var priceLabelElement = document.querySelector('.price-label');
+                        var priceElement = document.querySelector('.final-price');
+
+                        if(this.childAttributes.length == selectedOptionCount) {
+                            priceLabelElement.style.display = 'none';
+
+                            priceElement.innerHTML = this.config.variant_prices[this.simpleProduct].final_price.formated_price;
+                        } else {
+                            priceLabelElement.style.display = 'inline-block';
+
+                            priceElement.innerHTML = this.config.regular_price.formated_price;
+                        }
+                    },
+
+                    changeProductImages () {
+                        console.log(this.config.variant_images[this.simpleProduct])
+                    },
+                }
+
+            });
+
+        </script>
+    @endpush
+
+@endif
\ No newline at end of file
diff --git a/packages/Webkul/Shop/src/Resources/views/products/view/gallery.blade.php b/packages/Webkul/Shop/src/Resources/views/products/view/gallery.blade.php
index 3e478575e..0a8465c1d 100644
--- a/packages/Webkul/Shop/src/Resources/views/products/view/gallery.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/products/view/gallery.blade.php
@@ -1,4 +1,4 @@
-<div class="product-gallery-group" id="getbound">
+<div class="product-gallery-group">
     <div class="product-image-group">
 
         <div class="side-group">
@@ -8,24 +8,19 @@
             <img src="{{ bagisto_asset('images/jeans.jpg') }}" />
         </div>
 
-        <div class="product-hero-image">
-            <img src="{{ bagisto_asset('images/jeans_big.jpg') }}" />
+        <div class="product-hero-image" id="product-hero-image">
+            <img class="hero-image" src="{{ bagisto_asset('images/jeans_big.jpg') }}" />
             <img class="wishlist" src="{{ bagisto_asset('images/wish.svg') }}" />
             <img class="share" src="{{ bagisto_asset('images/icon-share.svg') }}" />
         </div>
-
     </div>
-
     <div class="product-button-group">
-        <form method="POST" @auth('customer') action="{{ route('cart.customer.add', $product->id) }}" @endauth @guest action="{{ route('cart.guest.add', $product->id) }}" @endguest>
-            {{ csrf_field() }}
 
-            <input type="hidden" name="product_id" value="{{ $product->id }}">
+        <input type="hidden" name="product_id" value="{{ $product->id }}">
 
-            <input type="hidden" name="qty" value="1">
+        <input type="hidden" name="qty" value="1">
 
-            <input type="submit" class="btn btn-lg add-to-cart" value="Add to Cart">
-        </form>
+        <input type="submit" class="btn btn-lg add-to-cart" value="Add to Cart">
         {{-- <form>
             <input type="hidden" name="product_id" value="">
             <input type="hidden" name="qty" value="1">
@@ -34,3 +29,14 @@
         {{-- {{ dd(unserialize(Cookie::get('session_c'))) }} --}}
     </div>
 </div>
+@push('scripts')
+
+    <script>
+
+        Vue.component('product-gallery', {
+            props: ['images']
+        });
+
+    </script>
+
+@endpush
diff --git a/packages/Webkul/Shop/src/Resources/views/products/view/reviews.blade.php b/packages/Webkul/Shop/src/Resources/views/products/view/reviews.blade.php
index b84816615..11e8eb560 100644
--- a/packages/Webkul/Shop/src/Resources/views/products/view/reviews.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/products/view/reviews.blade.php
@@ -2,8 +2,8 @@
 
 @if ($total = $reviewHelper->getTotalReviews($product))
 <div class="rating-reviews">
-    <div class="title">
-        Ratings & Reviews
+    <div class="rating-header">
+        {{ __('shop::app.products.reviews-title') }}
     </div>
 
     <div class="overall">
@@ -14,7 +14,7 @@
             </span>
 
             <span class="stars">
-                @for ($i = 1; $i <= $reviewHelper->getAverageRating($product); $i++)
+                @for ($i = 1; $i <= round($reviewHelper->getAverageRating($product)); $i++)
 
                     <span class="icon star-icon"></span>
                 
@@ -27,13 +27,15 @@
 
         </div>
 
-        <a href="{{ route('shop.reviews.create', $product->url_key) }}" class="btn btn-lg btn-primary">Write Review</a>
+        <a href="{{ route('shop.reviews.create', $product->url_key) }}" class="btn btn-lg btn-primary">
+            {{ __('shop::app.products.write-review-btn') }}
+        </a>
 
     </div>
 
     <div class="reviews">
 
-        @foreach ($product->reviews()->paginate(5) as $review)
+        @foreach ($reviewHelper->getReviews($product)->paginate(5) as $review)
             <div class="review">
                 <div class="title">
                     {{ $review->title }}
@@ -65,7 +67,6 @@
 
         <a href="{{ route('shop.reviews.index', $product->url_key) }}" class="view-all">View All</a>
 
-        <hr/>
     </div>
 </div>
 @endif
\ No newline at end of file
diff --git a/public/themes/default/assets/css/shop.css b/public/themes/default/assets/css/shop.css
index 7dd3aef15..0ea5b8673 100644
--- a/public/themes/default/assets/css/shop.css
+++ b/public/themes/default/assets/css/shop.css
@@ -27,6 +27,9 @@ body {
   margin: 0;
   padding: 0;
   font-weight: 500;
+  position: relative;
+  min-height: 100%;
+  top: 0px;
   color: #242424;
   font-size: 16px;
 }
@@ -35,411 +38,6 @@ body {
   font-family: "Montserrat", sans-serif;
 }
 
-.header {
-  margin-top: 16px;
-  margin-bottom: 21px;
-}
-
-.header .header-top {
-  margin-bottom: 16px;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  max-width: 80%;
-  width: 100%;
-  margin-left: auto;
-  margin-right: auto;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
-}
-
-.header .header-top div.left-content {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-}
-
-.header .header-top div.left-content ul.logo-container {
-  margin-right: 12px;
-}
-
-.header .header-top div.left-content ul.logo-container li {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.header .header-top div.left-content ul.search-container li.search-group {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-}
-
-.header .header-top div.left-content ul.search-container li.search-group .search-field {
-  height: 38px;
-  border: 2px solid #c7c7c7;
-  border-radius: 3px;
-  border-right: none;
-  border-top-right-radius: 0px;
-  border-bottom-right-radius: 0px;
-  padding-left: 12px;
-  font-family: "Montserrat", sans-serif;
-  font-size: 14px;
-}
-
-.header .header-top div.left-content ul.search-container li.search-group .search-icon-wrapper {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  height: 38px;
-  width: 38px;
-  border: 2px solid #c7c7c7;
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-
-.header .header-top div.left-content ul.search-container li.search-group .search-icon-wrapper .search-icon {
-  margin-top: 4px;
-  margin-left: 4px;
-  height: 24px;
-  width: 24px;
-}
-
-.header .header-top div.right-content {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  -webkit-box-pack: end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-}
-
-.header .header-top div.right-content ul.account-dropdown-container {
-  float: right;
-  border-right: 2px solid #c7c7c7;
-}
-
-.header .header-top div.right-content ul.account-dropdown-container li.account-dropdown {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  margin-right: 14px;
-}
-
-.header .header-top div.right-content ul.account-dropdown-container li.account-dropdown .account-icon {
-  cursor: pointer;
-  margin-right: 8px;
-  height: 24px;
-  width: 24px;
-}
-
-.header .header-top div.right-content ul.account-dropdown-container li.account-dropdown .account {
-  cursor: pointer;
-  padding-top: 3px;
-  padding-right: 5px;
-  margin-left: 8px;
-}
-
-.header .header-top div.right-content ul.account-dropdown-container li.account-dropdown .icon.arrow-down-icon {
-  cursor: pointer;
-  margin-top: 10px;
-}
-
-.header .header-top div.right-content ul.cart-dropdown {
-  float: right;
-}
-
-.header .header-top div.right-content ul.cart-dropdown li.cart-summary {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  margin-left: 14px;
-}
-
-.header .header-top div.right-content ul.cart-dropdown li.cart-summary .cart-icon {
-  margin: 0;
-  height: 24px;
-  width: 24px;
-  margin-right: 8px;
-}
-
-.header .header-top div.right-content ul.cart-dropdown li.cart-summary .cart {
-  padding-top: 3px;
-  padding-right: 5px;
-}
-
-.header .header-top div.right-content ul.cart-dropdown li.cart-summary .cart .cart-count {
-  color: #0031f0;
-  padding-right: 3px;
-}
-
-.header .header-top div.right-content ul.cart-dropdown li.cart-summary .icon.arrow-down-icon {
-  margin-top: 10px;
-}
-
-.header .header-top .right-responsive {
-  display: none;
-}
-
-.header .header-top .right-responsive ul.right-wrapper {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  -webkit-box-pack: end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-}
-
-.header .header-top .right-responsive ul.right-wrapper li:not(:last-child) {
-  margin-right: 7px;
-}
-
-.header .header-top .right-responsive ul.right-wrapper li:not(:last-child) span.icon {
-  margin: 0;
-  height: 24px;
-  width: 24px;
-}
-
-.header .header-bottom {
-  height: 48px;
-  margin-left: auto;
-  margin-right: auto;
-  border-top: 1px solid lightgrey;
-  border-bottom: 1px solid lightgrey;
-  font-size: 16px;
-  display: block;
-  /* submenu positioning*/
-}
-
-.header .header-bottom ul.nav {
-  display: block;
-  font-size: 16px;
-  height: 48px;
-  width: 80%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.header .header-bottom .nav ul {
-  margin: 0;
-  padding: 0;
-  border: 1px solid #B1B1B1;
-  -webkit-box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.4);
-          box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.4);
-}
-
-.header .header-bottom .nav a {
-  display: block;
-  color: #242424;
-  text-decoration: none;
-  padding: 0.8em 0.3em 0.8em 0.5em;
-  text-transform: uppercase;
-  letter-spacing: 2px;
-  position: relative;
-}
-
-.header .header-bottom .nav {
-  vertical-align: top;
-  display: inline-block;
-}
-
-.header .header-bottom .nav li {
-  position: relative;
-  height: 45px;
-}
-
-.header .header-bottom .nav > li {
-  float: left;
-  margin-right: 1px;
-}
-
-.header .header-bottom .nav > li > a {
-  margin-bottom: 1px;
-}
-
-.header .header-bottom .nav > li:last-child {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  border-radius: 0 0 4px 0;
-  float: right;
-}
-
-.header .header-bottom .nav > li:last-child img {
-  margin-right: 6px;
-}
-
-.header .header-bottom .nav > li:last-child > a {
-  border-radius: 0 4px 0 0;
-}
-
-.header .header-bottom .nav li li a {
-  margin-top: 1px;
-}
-
-.header .header-bottom .nav li a:first-child:nth-last-child(2):before {
-  content: "";
-  position: absolute;
-  height: 0;
-  width: 0;
-  border: 5px solid transparent;
-  top: 50%;
-  right: 5px;
-}
-
-.header .header-bottom .nav ul {
-  position: absolute;
-  white-space: nowrap;
-  border: 1px solid #B1B1B1;
-  background-color: white;
-  z-index: 1;
-  left: -99999em;
-}
-
-.header .header-bottom .nav > li:hover > ul {
-  left: auto;
-  min-width: 100%;
-}
-
-.header .header-bottom .nav > li li:hover > ul {
-  left: 100%;
-  margin-left: 1px;
-  top: -2px;
-}
-
-.header .header-bottom .nav > li:hover > a:first-child:nth-last-child(2):before {
-  margin-top: -5px;
-}
-
-.header .header-bottom .nav li li > a:first-child:nth-last-child(2):before {
-  margin-top: -5px;
-}
-
-.header .header-bottom .nav li li:hover > a:first-child:nth-last-child(2):before {
-  right: 10px;
-}
-
-section.slider-block {
-  display: block;
-  margin-bottom: 5%;
-}
-
-section.slider-block div.slider-content {
-  width: 80%;
-  height: 500px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-section.slider-block div.slider-content ul.slider-images li {
-  position: absolute;
-  visibility: hidden;
-}
-
-section.slider-block div.slider-content ul.slider-images li.show {
-  display: block;
-  visibility: visible;
-  width: 80%;
-  -webkit-animation-name: example;
-          animation-name: example;
-  -webkit-animation-duration: 4s;
-          animation-duration: 4s;
-}
-
-@-webkit-keyframes example {
-  0% {
-    opacity: 0.1;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes example {
-  0% {
-    opacity: 0.1;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-section.slider-block div.slider-content ul.slider-images li img {
-  height: 500px;
-  width: 100%;
-}
-
-section.slider-block div.slider-content div.slider-control {
-  display: block;
-  position: absolute;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  bottom: 2%;
-  right: 11%;
-}
-
-section.slider-block div.slider-content div.slider-control .dark-left-icon {
-  background-color: #ffffff;
-  height: 48px;
-  width: 48px;
-  max-height: 100%;
-  max-width: 100%;
-}
-
-section.slider-block div.slider-content div.slider-control .light-right-icon {
-  background-color: black;
-  height: 48px;
-  width: 48px;
-  max-height: 100%;
-  max-width: 100%;
-}
-
 .layered-filter-wrapper {
   width: 25%;
   float: left;
@@ -526,11 +124,418 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
 }
 
 .main-container-wrapper {
-  margin-left: 10%;
-  margin-right: 10%;
+  width: 1200px;
+  margin: auto;
+  max-width: 100%;
+  padding: 20px;
+  padding-top: 0px;
+}
+
+.main-container-wrapper .header {
+  margin-bottom: 22px;
+  margin-top: 15px;
+}
+
+.main-container-wrapper .header .header-top {
+  margin-bottom: 16px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  max-width: 80%;
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+}
+
+.main-container-wrapper .header .header-top div.left-content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-box-pack: start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+.main-container-wrapper .header .header-top div.left-content ul.logo-container {
+  margin-right: 12px;
+}
+
+.main-container-wrapper .header .header-top div.left-content ul.logo-container li {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.main-container-wrapper .header .header-top div.left-content ul.search-container li.search-group {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+.main-container-wrapper .header .header-top div.left-content ul.search-container li.search-group .search-field {
+  height: 38px;
+  border: 2px solid #c7c7c7;
+  border-radius: 3px;
+  border-right: none;
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+  padding-left: 12px;
+  font-family: "Montserrat", sans-serif;
+  font-size: 14px;
+}
+
+.main-container-wrapper .header .header-top div.left-content ul.search-container li.search-group .search-icon-wrapper {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  height: 38px;
+  width: 38px;
+  border: 2px solid #c7c7c7;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+
+.main-container-wrapper .header .header-top div.left-content ul.search-container li.search-group .search-icon-wrapper .search-icon {
+  margin-top: 4px;
+  margin-left: 4px;
+  height: 24px;
+  width: 24px;
+}
+
+.main-container-wrapper .header .header-top div.right-content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+.main-container-wrapper .header .header-top div.right-content ul.account-dropdown-container {
+  float: right;
+  border-right: 2px solid #c7c7c7;
+}
+
+.main-container-wrapper .header .header-top div.right-content ul.account-dropdown-container li.account-dropdown {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  margin-right: 14px;
+}
+
+.main-container-wrapper .header .header-top div.right-content ul.account-dropdown-container li.account-dropdown .account-icon {
+  cursor: pointer;
+  margin-right: 8px;
+  height: 24px;
+  width: 24px;
+}
+
+.main-container-wrapper .header .header-top div.right-content ul.account-dropdown-container li.account-dropdown .account {
+  cursor: pointer;
+  padding-top: 3px;
+  padding-right: 5px;
+  margin-left: 8px;
+}
+
+.main-container-wrapper .header .header-top div.right-content ul.account-dropdown-container li.account-dropdown .icon.arrow-down-icon {
+  cursor: pointer;
+  margin-top: 10px;
+}
+
+.main-container-wrapper .header .header-top div.right-content ul.cart-dropdown {
+  float: right;
+}
+
+.main-container-wrapper .header .header-top div.right-content ul.cart-dropdown li.cart-summary {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  margin-left: 14px;
+}
+
+.main-container-wrapper .header .header-top div.right-content ul.cart-dropdown li.cart-summary .cart-icon {
+  margin: 0;
+  height: 24px;
+  width: 24px;
+  margin-right: 8px;
+}
+
+.main-container-wrapper .header .header-top div.right-content ul.cart-dropdown li.cart-summary .cart {
+  padding-top: 3px;
+  padding-right: 5px;
+}
+
+.main-container-wrapper .header .header-top div.right-content ul.cart-dropdown li.cart-summary .cart .cart-count {
+  color: #0031f0;
+  padding-right: 3px;
+}
+
+.main-container-wrapper .header .header-top div.right-content ul.cart-dropdown li.cart-summary .icon.arrow-down-icon {
+  margin-top: 10px;
+}
+
+.main-container-wrapper .header .header-top .right-responsive {
+  display: none;
+}
+
+.main-container-wrapper .header .header-top .right-responsive ul.right-wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+.main-container-wrapper .header .header-top .right-responsive ul.right-wrapper li:not(:last-child) {
+  margin-right: 7px;
+}
+
+.main-container-wrapper .header .header-top .right-responsive ul.right-wrapper li:not(:last-child) span.icon {
+  margin: 0;
+  height: 24px;
+  width: 24px;
+}
+
+.main-container-wrapper .header .header-bottom {
+  height: 48px;
+  margin-left: auto;
+  margin-right: auto;
+  border-top: 1px solid lightgrey;
+  border-bottom: 1px solid lightgrey;
+  font-size: 16px;
+  display: block;
+  /* submenu positioning*/
+}
+
+.main-container-wrapper .header .header-bottom ul.nav {
+  display: block;
+  font-size: 16px;
+  height: 48px;
+  width: 80%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.main-container-wrapper .header .header-bottom .nav ul {
+  margin: 0;
+  padding: 0;
+  border: 1px solid #B1B1B1;
+  -webkit-box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.4);
+          box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.4);
+}
+
+.main-container-wrapper .header .header-bottom .nav a {
+  display: block;
+  color: #242424;
+  text-decoration: none;
+  padding: 0.8em 0.3em 0.8em 0.5em;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  position: relative;
+}
+
+.main-container-wrapper .header .header-bottom .nav {
+  vertical-align: top;
+  display: inline-block;
+}
+
+.main-container-wrapper .header .header-bottom .nav li {
+  position: relative;
+  height: 45px;
+}
+
+.main-container-wrapper .header .header-bottom .nav > li {
+  float: left;
+  margin-right: 1px;
+}
+
+.main-container-wrapper .header .header-bottom .nav > li > a {
+  margin-bottom: 1px;
+}
+
+.main-container-wrapper .header .header-bottom .nav > li:last-child {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  border-radius: 0 0 4px 0;
+  float: right;
+}
+
+.main-container-wrapper .header .header-bottom .nav > li:last-child img {
+  margin-right: 6px;
+}
+
+.main-container-wrapper .header .header-bottom .nav > li:last-child > a {
+  border-radius: 0 4px 0 0;
+}
+
+.main-container-wrapper .header .header-bottom .nav li li a {
+  margin-top: 1px;
+}
+
+.main-container-wrapper .header .header-bottom .nav li a:first-child:nth-last-child(2):before {
+  content: "";
+  position: absolute;
+  height: 0;
+  width: 0;
+  border: 5px solid transparent;
+  top: 50%;
+  right: 5px;
+}
+
+.main-container-wrapper .header .header-bottom .nav ul {
+  position: absolute;
+  white-space: nowrap;
+  border: 1px solid #B1B1B1;
+  background-color: white;
+  z-index: 1;
+  left: -99999em;
+}
+
+.main-container-wrapper .header .header-bottom .nav > li:hover > ul {
+  left: auto;
+  min-width: 100%;
+}
+
+.main-container-wrapper .header .header-bottom .nav > li li:hover > ul {
+  left: 100%;
+  margin-left: 1px;
+  top: -2px;
+}
+
+.main-container-wrapper .header .header-bottom .nav > li:hover > a:first-child:nth-last-child(2):before {
+  margin-top: -5px;
+}
+
+.main-container-wrapper .header .header-bottom .nav li li > a:first-child:nth-last-child(2):before {
+  margin-top: -5px;
+}
+
+.main-container-wrapper .header .header-bottom .nav li li:hover > a:first-child:nth-last-child(2):before {
+  right: 10px;
+}
+
+.main-container-wrapper section.slider-block {
+  display: block;
+  margin-bottom: 5%;
+}
+
+.main-container-wrapper section.slider-block div.slider-content {
+  width: 100%;
+  height: 500px;
+}
+
+.main-container-wrapper section.slider-block div.slider-content ul.slider-images li {
+  position: absolute;
+  visibility: hidden;
+}
+
+.main-container-wrapper section.slider-block div.slider-content ul.slider-images li.show {
+  display: block;
+  width: 89%;
+  margin: auto;
+  visibility: visible;
+  -webkit-animation-name: example;
+          animation-name: example;
+  -webkit-animation-duration: 4s;
+          animation-duration: 4s;
+}
+
+@-webkit-keyframes example {
+  0% {
+    opacity: 0.1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes example {
+  0% {
+    opacity: 0.1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.main-container-wrapper section.slider-block div.slider-content ul.slider-images li img {
+  width: 100%;
+  height: 500px;
+}
+
+.main-container-wrapper section.slider-block div.slider-content div.slider-control {
+  display: block;
+  position: absolute;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  right: 8%;
+}
+
+.main-container-wrapper section.slider-block div.slider-content div.slider-control .dark-left-icon {
+  background-color: #ffffff;
+  height: 48px;
+  width: 48px;
+  max-height: 100%;
+  max-width: 100%;
+}
+
+.main-container-wrapper section.slider-block div.slider-content div.slider-control .light-right-icon {
+  background-color: black;
+  height: 48px;
+  width: 48px;
+  max-height: 100%;
+  max-width: 100%;
 }
 
 .main-container-wrapper .content-container {
+  display: inline-block;
   width: 100%;
 }
 
@@ -541,7 +546,7 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
 
 .main-container-wrapper .product-grid {
   display: grid;
-  grid-gap: 15px;
+  grid-gap: 30px;
 }
 
 .main-container-wrapper .product-grid.max-2-col {
@@ -598,6 +603,15 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
   margin-bottom: 14px;
 }
 
+.main-container-wrapper .product-card .product-ratings .icon {
+  width: 16px;
+  height: 16px;
+}
+
+.main-container-wrapper .product-card .product-ratings .total-reviews {
+  display: none;
+}
+
 .main-container-wrapper .product-card .cart-fav-seg {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
@@ -1059,13 +1073,12 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
 }
 
 .account-content .edit-form-content {
-  padding: 0px 25px;
   margin-left: 5.5%;
   margin-top: 1%;
   width: 100%;
 }
 
-.account-content .edit-form-content .title {
+.account-content .edit-form-content .edit-text {
   margin-bottom: 2%;
   margin-left: auto;
   margin-right: auto;
@@ -1077,49 +1090,29 @@ section.slider-block div.slider-content div.slider-control .light-right-icon {
   display: -ms-flexbox;
   display: flex;
   background: #ffffff;
+  border: 1px solid #c7c7c7;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
   min-height: 345px;
+  padding: 25px;
 }
 
-.account-content .address-form-content {
-  padding: 0px 25px;
-  margin-left: 5.5%;
-  margin-top: 1%;
-  width: 100%;
-}
-
-.account-content .address-form-content .title {
-  margin-bottom: 2%;
-  margin-left: auto;
-  margin-right: auto;
-  font-size: 24px;
-}
-
-.account-content .address-form-content .address-form {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  background: #ffffff;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  min-height: 345px;
-}
-
-section.product-detail, section.product-review {
+section.product-detail {
   font-size: 16px;
   color: #242424;
 }
 
-section.product-detail div.category-breadcrumbs, section.product-review div.category-breadcrumbs {
+section.product-detail div.category-breadcrumbs {
   display: inline;
 }
 
-section.product-detail div.layouter, section.product-review div.layouter {
+section.product-detail div.layouter {
+  margin-top: 20px;
+}
+
+section.product-detail div.layouter form {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -1127,15 +1120,19 @@ section.product-detail div.layouter, section.product-review div.layouter {
   -webkit-box-direction: normal;
       -ms-flex-flow: row;
           flex-flow: row;
-  margin-top: 21px;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  width: 100%;
 }
 
-section.product-detail div.layouter .product-gallery-group, section.product-review div.layouter .product-gallery-group {
+section.product-detail div.layouter form .product-gallery-group {
   margin-right: 2.5%;
+  width: 50%;
   position: inherit;
 }
 
-section.product-detail div.layouter .product-gallery-group div.product-image-group, section.product-review div.layouter .product-gallery-group div.product-image-group {
+section.product-detail div.layouter form .product-gallery-group div.product-image-group {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -1148,7 +1145,7 @@ section.product-detail div.layouter .product-gallery-group div.product-image-gro
           justify-content: flex-start;
 }
 
-section.product-detail div.layouter .product-gallery-group div.product-image-group .side-group, section.product-review div.layouter .product-gallery-group div.product-image-group .side-group {
+section.product-detail div.layouter form .product-gallery-group div.product-image-group .side-group {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -1159,225 +1156,122 @@ section.product-detail div.layouter .product-gallery-group div.product-image-gro
   margin-right: 4px;
 }
 
-section.product-detail div.layouter .product-gallery-group div.product-image-group .product-hero-image, section.product-review div.layouter .product-gallery-group div.product-image-group .product-hero-image {
+section.product-detail div.layouter form .product-gallery-group div.product-image-group .product-hero-image {
   display: block;
   position: relative;
+  width: 50%;
 }
 
-section.product-detail div.layouter .product-gallery-group div.product-image-group .product-hero-image .wishlist, section.product-review div.layouter .product-gallery-group div.product-image-group .product-hero-image .wishlist {
+section.product-detail div.layouter form .product-gallery-group div.product-image-group .product-hero-image .hero-image {
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
+section.product-detail div.layouter form .product-gallery-group div.product-image-group .product-hero-image .wishlist {
   position: absolute;
   top: 10px;
   right: 12px;
 }
 
-section.product-detail div.layouter .product-gallery-group div.product-image-group .product-hero-image .share, section.product-review div.layouter .product-gallery-group div.product-image-group .product-hero-image .share {
+section.product-detail div.layouter form .product-gallery-group div.product-image-group .product-hero-image .share {
   position: absolute;
   top: 10px;
   right: 45px;
 }
 
-section.product-detail div.layouter .product-gallery-group .product-button-group, section.product-review div.layouter .product-gallery-group .product-button-group {
+section.product-detail div.layouter form .product-gallery-group .product-button-group {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
-  width: 100%;
-}
-
-section.product-detail div.layouter .product-gallery-group .product-button-group form, section.product-review div.layouter .product-gallery-group .product-button-group form {
+  width: 40%;
   width: 100%;
   height: 45px;
 }
 
-section.product-detail div.layouter .product-gallery-group .product-button-group form .add-to-cart, section.product-review div.layouter .product-gallery-group .product-button-group form .add-to-cart {
+section.product-detail div.layouter form .product-gallery-group .product-button-group .add-to-cart {
   width: 100%;
   border-radius: 0px;
   background-color: black;
 }
 
-section.product-detail div.layouter .product-gallery-group .product-button-group form .buy-now, section.product-review div.layouter .product-gallery-group .product-button-group form .buy-now {
+section.product-detail div.layouter form .product-gallery-group .product-button-group .buy-now {
   width: 100%;
   border-radius: 0px;
 }
 
-section.product-detail div.layouter .product-details, section.product-review div.layouter .product-details {
-  width: 100%;
+section.product-detail div.layouter form .details {
+  width: 45%;
 }
 
-section.product-detail div.layouter .product-details .product-heading, section.product-review div.layouter .product-details .product-heading {
+section.product-detail div.layouter form .details .product-heading {
   font-size: 24px;
   color: #242424;
-  margin-bottom: 14px;
 }
 
-section.product-detail div.layouter .product-details .rating, section.product-review div.layouter .product-details .rating {
-  color: #242424;
-  margin-bottom: 14px;
-}
-
-section.product-detail div.layouter .product-details .product-price, section.product-review div.layouter .product-details .product-price {
-  margin-bottom: 14px;
-  font-size: 24px;
-}
-
-section.product-detail div.layouter .product-details .product-price .special-price, section.product-review div.layouter .product-details .product-price .special-price {
-  font-size: 24px;
-}
-
-section.product-detail div.layouter .product-details .stock-status, section.product-review div.layouter .product-details .stock-status {
-  margin-bottom: 14px;
-}
-
-section.product-detail div.layouter .product-details .description, section.product-review div.layouter .product-details .description {
-  margin-bottom: 14px;
-}
-
-section.product-detail div.layouter .product-details .full-specifications td, section.product-review div.layouter .product-details .full-specifications td {
-  padding: 10px 0;
-  color: #5E5E5E;
-}
-
-section.product-detail div.layouter .product-details .full-specifications td:first-child, section.product-review div.layouter .product-details .full-specifications td:first-child {
-  padding-right: 40px;
-}
-
-section.product-detail div.layouter .product-details .accordian .accordian-header, section.product-review div.layouter .product-details .accordian .accordian-header {
-  font-size: 16px;
-  padding-left: 0;
+.rating-reviews .rating-header {
   font-weight: 600;
+  padding: 20px 0;
 }
 
-section.product-detail div.layouter .product-details .attributes, section.product-review div.layouter .product-details .attributes {
-  display: block;
-  width: 100%;
+.rating-reviews .stars .icon {
+  width: 16px;
+  height: 16px;
 }
 
-section.product-detail div.layouter .product-details .attributes .attribute, section.product-review div.layouter .product-details .attributes .attribute {
-  height: 39px;
-  margin-bottom: 20px;
+.rating-reviews .overall {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
 }
 
-section.product-detail div.layouter .product-details .attributes .attribute .title, section.product-review div.layouter .product-details .attributes .attribute .title {
-  float: left;
-  height: 100%;
-  min-width: 130px;
-  padding-top: 9px;
-}
-
-section.product-detail div.layouter .product-details .attributes .attribute .values, section.product-review div.layouter .product-details .attributes .attribute .values {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-section.product-detail div.layouter .product-details .attributes .attribute .values .colors, section.product-review div.layouter .product-details .attributes .attribute .values .colors {
-  margin-right: 5px;
-}
-
-section.product-detail div.layouter .product-details .attributes .attribute .values .colors:last-child, section.product-review div.layouter .product-details .attributes .attribute .values .colors:last-child {
-  margin-right: 0;
-}
-
-section.product-detail div.layouter .product-details .attributes .attribute .values .red, section.product-review div.layouter .product-details .attributes .attribute .values .red {
-  height: 37px;
-  width: 37px;
-  background: red;
-  border: 1px solid #c7c7c7;
-  border-radius: 2px;
-}
-
-section.product-detail div.layouter .product-details .attributes .attribute .values .blue, section.product-review div.layouter .product-details .attributes .attribute .values .blue {
-  height: 37px;
-  width: 37px;
-  background: blue;
-  border: 1px solid #c7c7c7;
-  border-radius: 2px;
-}
-
-section.product-detail div.layouter .product-details .attributes .attribute .values .green, section.product-review div.layouter .product-details .attributes .attribute .values .green {
-  height: 37px;
-  width: 37px;
-  background: green;
-  border: 1px solid #c7c7c7;
-  border-radius: 2px;
-}
-
-section.product-detail div.layouter .product-details .attributes .attribute .values .size, section.product-review div.layouter .product-details .attributes .attribute .values .size {
-  margin-right: 5px;
-  line-height: 38px;
-  height: 37px;
-  width: 60px;
-  border: 1px solid #c7c7c7;
-  border-radius: 2px;
-  text-align: center;
-  vertical-align: middle;
-}
-
-section.product-detail div.layouter .product-details .attributes .attribute .values .size:last-child, section.product-review div.layouter .product-details .attributes .attribute .values .size:last-child {
-  margin-right: 0;
-}
-
-section.product-detail div.layouter .product-details .attributes .attribute .values .quantity .values .control, section.product-review div.layouter .product-details .attributes .attribute .values .quantity .values .control {
-  height: 37px !important;
-  width: 30px !important;
-}
-
-section.product-detail div.layouter .product-details .full-description, section.product-review div.layouter .product-details .full-description {
-  font-size: 16px;
-}
-
-section.product-detail div.layouter .product-details .rating-reviews, section.product-review div.layouter .product-details .rating-reviews {
-  margin-top: 30px;
-}
-
-section.product-detail div.layouter .product-details .rating-reviews .title, section.product-review div.layouter .product-details .rating-reviews .title {
-  margin-bottom: 15px;
-  font-weight: 600;
-}
-
-section.product-detail div.layouter .product-details .rating-reviews .overall, section.product-review div.layouter .product-details .rating-reviews .overall {
-  margin-bottom: 5px;
-}
-
-section.product-detail div.layouter .product-details .rating-reviews .overall .review-info .number, section.product-review div.layouter .product-details .rating-reviews .overall .review-info .number {
+.rating-reviews .overall .review-info .number {
   font-size: 34px;
 }
 
-section.product-detail div.layouter .product-details .rating-reviews .overall button, section.product-review div.layouter .product-details .rating-reviews .overall button {
-  float: right;
-  border-radius: 0px !important;
+.rating-reviews .overall .review-info .total-reviews {
+  margin-top: 10px;
 }
 
-section.product-detail div.layouter .product-details .rating-reviews .reviews, section.product-review div.layouter .product-details .rating-reviews .reviews {
-  margin-top: 34px;
-  margin-bottom: 80px;
+.rating-reviews .reviews {
+  margin-top: 40px;
+  margin-bottom: 40px;
 }
 
-section.product-detail div.layouter .product-details .rating-reviews .reviews .review, section.product-review div.layouter .product-details .rating-reviews .reviews .review {
+.rating-reviews .reviews .review {
   margin-bottom: 25px;
 }
 
-section.product-detail div.layouter .product-details .rating-reviews .reviews .review .stars, section.product-review div.layouter .product-details .rating-reviews .reviews .review .stars {
+.rating-reviews .reviews .review .title {
+  margin-bottom: 5px;
+}
+
+.rating-reviews .reviews .review .stars {
   margin-bottom: 15px;
   display: inline-block;
 }
 
-section.product-detail div.layouter .product-details .rating-reviews .reviews .review .stars .icon, section.product-review div.layouter .product-details .rating-reviews .reviews .review .stars .icon {
-  width: 18px;
-  height: 18px;
-}
-
-section.product-detail div.layouter .product-details .rating-reviews .reviews .review .message, section.product-review div.layouter .product-details .rating-reviews .reviews .review .message {
+.rating-reviews .reviews .review .message {
   margin-bottom: 10px;
 }
 
-section.product-detail div.layouter .product-details .rating-reviews .reviews .review .reviewer-details, section.product-review div.layouter .product-details .rating-reviews .reviews .review .reviewer-details {
+.rating-reviews .reviews .review .reviewer-details {
   color: #5E5E5E;
 }
 
-section.product-detail div.layouter .product-details .rating-reviews .reviews .view-all, section.product-review div.layouter .product-details .rating-reviews .reviews .view-all {
+.rating-reviews .reviews .view-all {
   margin-top: 15px;
   color: #0031f0;
   margin-bottom: 15px;
diff --git a/resources/views/vendor/mail/html/promotion.blade.php b/resources/views/vendor/mail/html/promotion.blade.php
index 0debcf8a3..2b048f071 100644
--- a/resources/views/vendor/mail/html/promotion.blade.php
+++ b/resources/views/vendor/mail/html/promotion.blade.php
@@ -4,4 +4,4 @@
             {{ Illuminate\Mail\Markdown::parse($slot) }}
         </td>
     </tr>
-</table>
+</table>
\ No newline at end of file