diff --git a/src/Core/Grand.Infrastructure/Caching/Constants/ProductCacheKey.cs b/src/Core/Grand.Infrastructure/Caching/Constants/ProductCacheKey.cs
index a388154dd..69bf390d0 100644
--- a/src/Core/Grand.Infrastructure/Caching/Constants/ProductCacheKey.cs
+++ b/src/Core/Grand.Infrastructure/Caching/Constants/ProductCacheKey.cs
@@ -82,7 +82,7 @@ public static partial class CacheKey
         /// <summary>
         /// Compare products cookie name
         /// </summary>
-        public static string PRODUCTS_COMPARE_COOKIE_NAME => "Grand.CompareProducts";
+        public static string PRODUCTS_COMPARE_COOKIE_NAME => "Grand.CompareProduct";
 
         /// <summary>
         /// Key for caching
diff --git a/src/Web/Grand.Web/Components/Footer.cs b/src/Web/Grand.Web/Components/Footer.cs
index 07bd495aa..98b167e85 100644
--- a/src/Web/Grand.Web/Components/Footer.cs
+++ b/src/Web/Grand.Web/Components/Footer.cs
@@ -103,7 +103,6 @@ private async Task<FooterModel> PrepareFooter()
                 PinterestLink = _storeInformationSettings.PinterestLink,
                 BlogEnabled = _blogSettings.Enabled,
                 KnowledgebaseEnabled = _knowledgebaseSettings.Enabled,
-                CompareProductsEnabled = _catalogSettings.CompareProductsEnabled,
                 NewsEnabled = _newsSettings.Enabled,
                 RecentlyViewedProductsEnabled = _catalogSettings.RecentlyViewedProductsEnabled,
                 RecommendedProductsEnabled = _catalogSettings.RecommendedProductsEnabled,
diff --git a/src/Web/Grand.Web/Controllers/ProductController.cs b/src/Web/Grand.Web/Controllers/ProductController.cs
index 935fa8e64..dbd9e75b4 100644
--- a/src/Web/Grand.Web/Controllers/ProductController.cs
+++ b/src/Web/Grand.Web/Controllers/ProductController.cs
@@ -874,106 +874,14 @@ await _mediator.Send(new SendProductAskQuestionMessageCommand() {
         protected virtual List<string> GetComparedProductIds()
         {
             //try to get cookie
-            if (!HttpContext.Request.Cookies.TryGetValue(CacheKey.PRODUCTS_COMPARE_COOKIE_NAME, out string productIdsCookie) || string.IsNullOrEmpty(productIdsCookie))
+            if (!HttpContext.Request.Cookies.TryGetValue(CacheKey.PRODUCTS_COMPARE_COOKIE_NAME, out var productIdsCookie) || string.IsNullOrEmpty(productIdsCookie))
                 return new List<string>();
 
             //get array of string product identifiers from cookie
-            var productIds = productIdsCookie.Split(new[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
+            var productIds = productIdsCookie.Split(new[] { '|' }, StringSplitOptions.RemoveEmptyEntries);
 
             //return list of int product identifiers
-            return productIds.Select(productId => productId).Distinct().ToList();
-        }
-
-        protected virtual void AddCompareProductsCookie(IEnumerable<string> comparedProductIds)
-        {
-            //delete current cookie if exists
-            HttpContext.Response.Cookies.Delete(CacheKey.PRODUCTS_COMPARE_COOKIE_NAME);
-
-            //create cookie value
-            var comparedProductIdsCookie = string.Join(",", comparedProductIds);
-
-            //create cookie options 
-            var cookieOptions = new CookieOptions {
-                Expires = DateTime.UtcNow.AddHours(CommonHelper.CookieAuthExpires),
-                HttpOnly = true
-            };
-            //add cookie
-            HttpContext.Response.Cookies.Append(CacheKey.PRODUCTS_COMPARE_COOKIE_NAME, comparedProductIdsCookie, cookieOptions);
-        }
-
-        [HttpPost]
-        public virtual async Task<IActionResult> AddProductToCompareList(string productId)
-        {
-            var product = await _productService.GetProductById(productId);
-            if (product == null || !product.Published)
-                return Json(new
-                {
-                    success = false,
-                    comparemessage = "No product found with the specified ID"
-                });
-
-            if (product.ProductTypeId == ProductType.Auction || product.ProductTypeId == ProductType.Reservation)
-                return Json(new
-                {
-                    success = false,
-                    comparemessage = _translationService.GetResource("Products.ProductCantAddToCompareList")
-                });
-
-            if (!_catalogSettings.CompareProductsEnabled)
-                return Json(new
-                {
-                    success = false,
-                    comparemessage = "Product comparison is disabled"
-                });
-
-            //get list of compared product identifiers
-            var comparedProductIds = GetComparedProductIds();
-
-            //whether product identifier to add already exist
-            if (!comparedProductIds.Contains(productId))
-                comparedProductIds.Insert(0, productId);
-
-            //limit list based on the allowed number of products to be compared
-            comparedProductIds = comparedProductIds.Take(_catalogSettings.CompareProductsNumber).ToList();
-
-            //set cookie
-            AddCompareProductsCookie(comparedProductIds);
-
-            //activity log
-            _ = _customerActivityService.InsertActivity("PublicStore.AddToCompareList", productId,
-                 _workContext.CurrentCustomer, HttpContext.Connection?.RemoteIpAddress?.ToString(),
-                _translationService.GetResource("ActivityLog.PublicStore.AddToCompareList"), product.Name);
-
-            return Json(new
-            {
-                success = true,
-                comparemessage = string.Format(_translationService.GetResource("Products.ProductHasBeenAddedToCompareList.Link"), Url.RouteUrl("CompareProducts"))
-            });
-        }
-
-        public virtual IActionResult RemoveProductFromCompareList(string productId)
-        {
-            var product = _productService.GetProductById(productId);
-            if (product == null)
-                return RedirectToRoute("HomePage");
-
-            if (!_catalogSettings.CompareProductsEnabled)
-                return RedirectToRoute("HomePage");
-
-            //get list of compared product identifiers
-            var comparedProductIds = GetComparedProductIds();
-
-            //whether product identifier to remove exists
-            if (!comparedProductIds.Contains(productId))
-                return RedirectToRoute("CompareProducts");
-
-            //it exists, so remove it from list
-            comparedProductIds.Remove(productId);
-
-            //set cookie
-            AddCompareProductsCookie(comparedProductIds); ;
-
-            return RedirectToRoute("CompareProducts");
+            return productIds.Select(productId => productId).Distinct().Take(10).ToList();
         }
 
         public virtual async Task<IActionResult> CompareProducts()
@@ -1008,16 +916,6 @@ public virtual async Task<IActionResult> CompareProducts()
             return View(model);
 
         }
-
-        public virtual IActionResult ClearCompareList()
-        {
-            if (!_catalogSettings.CompareProductsEnabled)
-                return RedirectToRoute("HomePage");
-
-            HttpContext.Response.Cookies.Delete(CacheKey.PRODUCTS_COMPARE_COOKIE_NAME);
-
-            return RedirectToRoute("CompareProducts");
-        }
         #endregion
 
         #region Calendar
diff --git a/src/Web/Grand.Web/Endpoints/EndpointProvider.cs b/src/Web/Grand.Web/Endpoints/EndpointProvider.cs
index e2255ea7c..317a1d976 100644
--- a/src/Web/Grand.Web/Endpoints/EndpointProvider.cs
+++ b/src/Web/Grand.Web/Endpoints/EndpointProvider.cs
@@ -304,26 +304,11 @@ private void RegisterProductRoute(IEndpointRouteBuilder endpointRouteBuilder, st
                             pattern + "productreviews/{productId}",
                             new { controller = "Product", action = "ProductReviews" });
 
-            //comparing products
-            endpointRouteBuilder.MapControllerRoute("AddProductToCompare",
-                            pattern + "compareproducts/add/{productId?}",
-                            new { controller = "Product", action = "AddProductToCompareList" });
-
             //set review helpfulness (AJAX link)
             endpointRouteBuilder.MapControllerRoute("SetProductReviewHelpfulness",
                             pattern + "setproductreviewhelpfulness",
                             new { controller = "Product", action = "SetProductReviewHelpfulness" });
 
-            //comparing products
-            endpointRouteBuilder.MapControllerRoute("RemoveProductFromCompareList",
-                            pattern + "compareproducts/remove/{productId}",
-                            new { controller = "Product", action = "RemoveProductFromCompareList" });
-
-            endpointRouteBuilder.MapControllerRoute("ClearCompareList",
-                            pattern + "clearcomparelist/",
-                            new { controller = "Product", action = "ClearCompareList" });
-
-
             //product attributes with "upload file" type
             endpointRouteBuilder.MapControllerRoute("UploadFileProductAttribute",
                             pattern + "uploadfileproductattribute/{attributeId?}",
diff --git a/src/Web/Grand.Web/Features/Handlers/Common/GetRobotsTextFileHandler.cs b/src/Web/Grand.Web/Features/Handlers/Common/GetRobotsTextFileHandler.cs
index ad1a107ea..5fb65808b 100644
--- a/src/Web/Grand.Web/Features/Handlers/Common/GetRobotsTextFileHandler.cs
+++ b/src/Web/Grand.Web/Features/Handlers/Common/GetRobotsTextFileHandler.cs
@@ -76,9 +76,7 @@ private async Task<string> PrepareRobotsTextFile()
                     "/checkout/shippingmethod",
                     "/checkout/paymentinfo",
                     "/checkout/paymentmethod",
-                    "/clearcomparelist",
                     "/compareproducts",
-                    "/compareproducts/add/*",
                     "/account/activation",
                     "/account/addresses",
                     "/account/changepassword",
diff --git a/src/Web/Grand.Web/Models/Common/FooterModel.cs b/src/Web/Grand.Web/Models/Common/FooterModel.cs
index 426ddf55d..95d288a8b 100644
--- a/src/Web/Grand.Web/Models/Common/FooterModel.cs
+++ b/src/Web/Grand.Web/Models/Common/FooterModel.cs
@@ -29,7 +29,6 @@ public FooterModel()
         public bool SitemapEnabled { get; set; }        
         public bool BlogEnabled { get; set; }
         public bool NewsEnabled { get; set; }
-        public bool CompareProductsEnabled { get; set; }
         public bool RecentlyViewedProductsEnabled { get; set; }
         public bool RecommendedProductsEnabled { get; set; }
         public bool NewProductsEnabled { get; set; }
diff --git a/src/Web/Grand.Web/Views/Catalog/_CatalogProductListView.cshtml b/src/Web/Grand.Web/Views/Catalog/_CatalogProductListView.cshtml
index c863a7309..22af80f43 100644
--- a/src/Web/Grand.Web/Views/Catalog/_CatalogProductListView.cshtml
+++ b/src/Web/Grand.Web/Views/Catalog/_CatalogProductListView.cshtml
@@ -288,7 +288,7 @@
                 }
                 @if (!Model.ProductPrice.DisableAddToCompareListButton && Model.ProductType == ProductType.SimpleProduct)
                 {
-                    <button v-b-tooltip.hover.bottom title="@Loc["ShoppingCart.AddToCompareList"]" class="btn btn-secondary" onclick="AxiosCart.addproducttocomparelist('@addtocomparelink');return false;">
+                    <button v-b-tooltip.hover.bottom title="@Loc["ShoppingCart.AddToCompareList"]" class="btn btn-secondary" onclick="AxiosCart.addproducttocomparelist('@Model.Id', '@string.Format(Loc["Products.ProductHasBeenAddedToCompareList.Link"], Url.RouteUrl("CompareProducts"))')">
                         <span class="sr-only">AddToCompareList</span>
                         <b-icon icon="shuffle"></b-icon>
                     </button>
diff --git a/src/Web/Grand.Web/Views/Catalog/_CatalogProductListViewVue.cshtml b/src/Web/Grand.Web/Views/Catalog/_CatalogProductListViewVue.cshtml
index 251134eb0..8b52de5b1 100644
--- a/src/Web/Grand.Web/Views/Catalog/_CatalogProductListViewVue.cshtml
+++ b/src/Web/Grand.Web/Views/Catalog/_CatalogProductListViewVue.cshtml
@@ -226,7 +226,7 @@
                     </template>
                 </template>
                 <template v-if="!Model.ProductPrice.DisableAddToCompareListButton && Model.ProductType == 0">
-                    <button v-b-tooltip.hover.bottom title="@Loc["ShoppingCart.AddToCompareList"]" class="btn btn-secondary" :onclick="'AxiosCart.addproducttocomparelist(`@Url.RouteUrl("AddProductToCompare")/' + Model.Id + '`);return false;'">
+                    <button v-b-tooltip.hover.bottom title="@Loc["ShoppingCart.AddToCompareList"]" class="btn btn-secondary" :onclick="'AxiosCart.addproducttocomparelist(`'+ Model.Id +'`, `@string.Format(Loc["Products.ProductHasBeenAddedToCompareList.Link"], Url.RouteUrl("CompareProducts"))`)'">
                         <span class="sr-only">AddToCompareList</span>
                         <b-icon icon="shuffle"></b-icon>
                     </button>
diff --git a/src/Web/Grand.Web/Views/Product/CompareProducts.cshtml b/src/Web/Grand.Web/Views/Product/CompareProducts.cshtml
index 83582c60c..2a0b8150a 100644
--- a/src/Web/Grand.Web/Views/Product/CompareProducts.cshtml
+++ b/src/Web/Grand.Web/Views/Product/CompareProducts.cshtml
@@ -8,13 +8,6 @@
 }
 @using Grand.Web.Models.Catalog;
 @{
-    string columnWidth = "";
-    if (Model.Products.Any())
-    {
-        columnWidth = Math.Round((double)(90M / Model.Products.Count), 0).ToString() + "%";
-    }
-
-
     var specificationAttributes = new List<ProductSpecificationModel>();
     foreach (var product in Model.Products)
     {
@@ -29,125 +22,115 @@
 }
 <div class="page compare-products-page">
     <h2 class="text-center generalTitle">@Loc["Products.Compare.Title"]</h2>
-    @if (Model.Products.Any())
-    {
-        <button onclick="location = ('@Url.RouteUrl("ClearCompareList")')" class="btn btn-outline-secondary clear-list mb-3">@Loc["Products.Compare.Clear"]</button>
+    <template v-if="compareproducts !== null && compareproducts.Products.length > 0">
+        <a class="btn btn-danger mb-3" @@click="removeFromCompareList()">@Loc["Products.Compare.Clear"]</a>
         <div class="table-responsive">
-            <table class="table table-hover">
+            <table class="table table-hover compare-products-table table-bordered">
                 <tbody>
                     <tr class="remove-product">
                         <td class="empty">&nbsp;</td>
-                        @foreach (var product in Model.Products)
-                        {
-                            <td style="width: @columnWidth;">
-                                <button type="button" title="@Loc["Common.Remove"]" class="btn btn-sm btn-outline-danger remove-button d-flex align-items-center justify-content-center" onclick="location = ('@Url.RouteUrl("RemoveProductFromCompareList", new { productId = product.Id })')">
-                                    <b-icon icon="trash" aria-hidden="true"></b-icon>
+                        <template v-for="product in compareproducts.Products">
+                            <td class="same-width">
+                                <button type="button" title="@Loc["Common.Remove"]" class="btn btn-sm btn-link remove-button d-flex align-items-center justify-content-center" @@click="removeFromCompareList(product.Id)">
+                                    <b-icon icon="trash" variant="danger" aria-hidden="true"></b-icon>
                                 </button>
                             </td>
-                        }
+                        </template>
                     </tr>
                     <tr class="product-picture">
                         <td class="empty">&nbsp;</td>
-                        @foreach (var product in Model.Products)
-                        {
-                            <td style="width: @columnWidth;">
-                                <a class="picture" href="@Url.RouteUrl("Product", new { SeName = product.SeName })"><img class="img-wish" alt="@product.DefaultPictureModel.AlternateText" src="@product.DefaultPictureModel.ImageUrl" title="@product.DefaultPictureModel.Title" /></a>
+                        <template v-for="product in compareproducts.Products">
+                            <td class="same-width">
+                                <a class="picture" :href="product.Url"><img class="compare-img" :alt="product.DefaultPictureModel.AlternateText" :src="product.DefaultPictureModel.ImageUrl" :title="product.DefaultPictureModel.Title" /></a>
                             </td>
-                        }
+                        </template>
                     </tr>
                     <tr class="product-name">
                         <td>
                             <label>@Loc["Products.Compare.Name"]</label>
                         </td>
-                        @foreach (var product in Model.Products)
-                        {
-                            <td style="width: @columnWidth;">
-                                <a href="@Url.RouteUrl("Product", new { SeName = product.SeName })">@product.Name</a>
+                        <template v-for="product in compareproducts.Products">
+                            <td class="same-width">
+                                <a :href="product.Url">{{product.Name}}</a>
                             </td>
-                        }
+                        </template>
                     </tr>
                     <tr class="product-price">
                         <td>
                             <label><strong>@Loc["Products.Compare.Price"]</strong></label>
                         </td>
-                        @foreach (var product in Model.Products)
-                        {
-                            <td style="width: @columnWidth;">
-                                <strong>@product.ProductPrice.Price</strong>
+                        <template v-for="product in compareproducts.Products">
+                            <td class="same-width">
+                                <strong>{{product.ProductPrice.Price}}</strong>
                             </td>
-                        }
+                        </template>
                     </tr>
-                    @if (Model.IncludeShortDescriptionInCompareProducts)
-                    {
+                    <template v-if="compareproducts.IncludeShortDescriptionInCompareProducts">
                         <tr class="short-description">
                             <td>
                                 <label>@Loc["Products.Compare.ShortDescription"]</label>
                             </td>
-                            @foreach (var product in Model.Products)
-                            {
-                                <td style="width: @columnWidth;">
-                                    @Html.Raw(product.ShortDescription)
+                            <template v-for="product in compareproducts.Products">
+                                <td class="same-width">
+                                    <div v-html="product.ShortDescription"></div>
                                 </td>
-                            }
+                            </template>
                         </tr>
-                    }
-                    @foreach (var specificationAttribute in specificationAttributes)
-                    {
+                    </template>
+                    <template v-for="specificationAttribute in specificationAttributes.Model">
                         <tr class="specification">
                             <td>
-                                <label>@specificationAttribute.SpecificationAttributeName</label>
+                                <label>{{specificationAttribute.SpecificationAttributeName}}</label>
                             </td>
-                            @foreach (var product in Model.Products)
-                            {
-                                var foundProductSpec = product.SpecificationAttributeModels.FirstOrDefault(psa => psa.SpecificationAttributeId == specificationAttribute.SpecificationAttributeId);
-                                var specValue = foundProductSpec != null ? foundProductSpec.ValueRaw : "";
-
-                                <td style="width: @columnWidth;">
-                                    @if (foundProductSpec != null)
-                                    {
-                                        if (String.IsNullOrEmpty(foundProductSpec.ColorSquaresRgb))
-                                        {
-                                            @Html.Raw(foundProductSpec.ValueRaw)
-                                        }
-                                        else
-                                        {
-                                            <div class="color-squares">
-                                                <span class="color-container" title="@Html.Raw(foundProductSpec.ValueRaw)">
-                                                    <span class="color" style="background-color: @(foundProductSpec.ColorSquaresRgb);">&nbsp;</span>
-                                                </span>
-                                            </div>
-                                        }
-                                    }
-                                    else
-                                    {
-                                        <text>&nbsp;</text>
-                                    }
+                            <template v-for="product in compareproducts.Products">
+                                <td class="same-width">
+                                    <template v-for="spec in product.SpecificationAttributeModels">
+                                        <template v-if="spec.SpecificationAttributeId == specificationAttribute.SpecificationAttributeId">
+                                            <template v-if="spec.ColorSquaresRgb == null">
+                                                <div v-html="spec.ValueRaw" class="d-inline-flex mx-1"></div>
+                                            </template>
+                                            <template v-else>
+                                                <div class="color-squares d-inline-flex mx-1">
+                                                    <span class="color-container" :title="spec.ValueRaw">
+                                                        <span class="color" :style="'background-color:' + spec.ColorSquaresRgb">&nbsp;</span>
+                                                    </span>
+                                                </div>
+                                            </template>
+                                        </template>
+                                    </template>
                                 </td>
-                            }
+                            </template>
                         </tr>
-                    }
-                    @if (Model.IncludeFullDescriptionInCompareProducts)
-                    {
+                    </template>
+                    <template v-if="compareproducts.IncludeFullDescriptionInCompareProducts">
                         <tr class="full-description">
                             <td>
                                 <label>@Loc["Products.Compare.FullDescription"]</label>
                             </td>
-                            @foreach (var product in Model.Products)
-                            {
-                                <td style="width: @columnWidth;">
-                                    @Html.Raw(product.FullDescription)
+                            <template v-for="product in compareproducts.Products">
+                                <td class="same-width">
+                                    <div v-html="product.FullDescription"></div>
                                 </td>
-                            }
+                            </template>
                         </tr>
-                    }
+                    </template>
                 </tbody>
             </table>
         </div>
-    }
-    else
-    {
+    </template>
+    <template v-else>
         <div class="no-data alert alert-info text-center my-3">
             @Loc["Products.Compare.NoItems"]
         </div>
-    }
+    </template>
 </div>
+<script asp-location="Footer" asp-order="300">
+    var specificationAttributes = new Vue({
+        data: () => ({
+            Model: @Json.Serialize(specificationAttributes),
+        }),
+    })
+    document.addEventListener("DOMContentLoaded", function () {
+        vm.getCompareList()
+    })
+</script>
\ No newline at end of file
diff --git a/src/Web/Grand.Web/Views/Product/_AddToWishlist.cshtml b/src/Web/Grand.Web/Views/Product/_AddToWishlist.cshtml
index ffaab09b7..2f8518e0a 100644
--- a/src/Web/Grand.Web/Views/Product/_AddToWishlist.cshtml
+++ b/src/Web/Grand.Web/Views/Product/_AddToWishlist.cshtml
@@ -11,8 +11,8 @@
         addToWishlistText = Loc["ShoppingCart.AddToWishlist"];
     }
 
-    <button id="add-to-wishlist-button-@Model.ProductId" class="btn btn-secondary add-to-wishlist-button mr-1" data-productid="@Model.ProductId" onclick="AxiosCart.addproducttocart_details('@Url.RouteUrl("AddProductDetails", new { productId = Model.ProductId, shoppingCartTypeId = (int)ShoppingCartType.Wishlist })', '#product-details-form');return false;" v-b-tooltip.hover.bottom title="@addToWishlistText">
+    <a id="add-to-wishlist-button-@Model.ProductId" type="button" class="btn btn-secondary add-to-wishlist-button mr-1" data-productid="@Model.ProductId" onclick="AxiosCart.addproducttocart_details('@Url.RouteUrl("AddProductDetails", new { productId = Model.ProductId, shoppingCartTypeId = (int)ShoppingCartType.Wishlist })', '#product-details-form');return false;" v-b-tooltip.hover.bottom title="@addToWishlistText">
         <span class="sr-only">@addToWishlistText</span>
         <b-icon icon="heart"></b-icon>
-    </button>
+    </a>
 }
diff --git a/src/Web/Grand.Web/Views/Product/_ProductsComparison.cshtml b/src/Web/Grand.Web/Views/Product/_ProductsComparison.cshtml
index 462943f15..f1fba9474 100644
--- a/src/Web/Grand.Web/Views/Product/_ProductsComparison.cshtml
+++ b/src/Web/Grand.Web/Views/Product/_ProductsComparison.cshtml
@@ -4,7 +4,7 @@
 }
 @if (Model.CompareProductsEnabled)
 {
-    <button class="btn btn-secondary add-to-compare-list-button mr-1" onclick="AxiosCart.addproducttocomparelist('@addtocomparelink');return false;" v-b-tooltip.hover.bottom title="@Loc["Products.Compare.AddToCompareList"]">
+    <button class="btn btn-secondary add-to-compare-list-button mr-1" type="button" onclick="AxiosCart.addproducttocomparelist('@Model.Id', '@string.Format(Loc["Products.ProductHasBeenAddedToCompareList.Link"], Url.RouteUrl("CompareProducts"))')" v-b-tooltip.hover.bottom title="@Loc["Products.Compare.AddToCompareList"]">
         <b-icon icon="shuffle"></b-icon>
         <span class="sr-only">@Loc["Products.Compare.AddToCompareList"]</span>
     </button>
diff --git a/src/Web/Grand.Web/Views/Shared/Components/Footer/Default.cshtml b/src/Web/Grand.Web/Views/Shared/Components/Footer/Default.cshtml
index 7ade3726f..842c36880 100644
--- a/src/Web/Grand.Web/Views/Shared/Components/Footer/Default.cshtml
+++ b/src/Web/Grand.Web/Views/Shared/Components/Footer/Default.cshtml
@@ -41,10 +41,6 @@
                         {
                             <a class="list-group-item list-group-item-action" href="@Url.RouteUrl("RecentlyViewedProducts")">@Loc["Products.RecentlyViewedProducts"]</a>
                         }
-                        @if (Model.CompareProductsEnabled)
-                        {
-                            <a class="list-group-item list-group-item-action" href="@Url.RouteUrl("CompareProducts")">@Loc["Products.Compare.List"]</a>
-                        }
                         @if (Model.NewProductsEnabled)
                         {
                             <a class="list-group-item list-group-item-action" href="@Url.RouteUrl("NewProducts")">@Loc["Products.NewProducts"]</a>
diff --git a/src/Web/Grand.Web/Views/Shared/Header.cshtml b/src/Web/Grand.Web/Views/Shared/Header.cshtml
index 17cb0d930..2bffcd0a8 100644
--- a/src/Web/Grand.Web/Views/Shared/Header.cshtml
+++ b/src/Web/Grand.Web/Views/Shared/Header.cshtml
@@ -4,7 +4,7 @@
 }
 <div class="header-nav">
     <nav class="navbar navbar-light navbar-expand">
-        <b-container :fluid="fluid" id="header-container">
+        <b-container id="header-container">
             <div class="menu-container">
                 <template>
                     <button aria-label="menu-toggler" class="btn menu-toggler" v-b-toggle.sidebar-menu><span></span><span></span><span></span></button>
@@ -32,11 +32,6 @@
                         </span>
                     </li>
                 </template>
-                <li class="nav-item d-lg-block d-none">
-                    <a href="#" target="_self" class="nav-link">
-                        <b-icon :variant="[darkMode ? 'white' : 'dark']" icon="aspect-ratio" @@click="fluid = !fluid"></b-icon>
-                    </a>
-                </li>
                 <li class="nav-item">
                     <a href="#" target="_self" class="nav-link">
                         <b-icon icon="search" :variant="[darkMode ? 'white' : 'dark']" v-b-modal.search-box></b-icon>
diff --git a/src/Web/Grand.Web/Views/Shared/QuickView/_AddToWishlist.cshtml b/src/Web/Grand.Web/Views/Shared/QuickView/_AddToWishlist.cshtml
index ba14730c7..5eb5681bf 100644
--- a/src/Web/Grand.Web/Views/Shared/QuickView/_AddToWishlist.cshtml
+++ b/src/Web/Grand.Web/Views/Shared/QuickView/_AddToWishlist.cshtml
@@ -3,11 +3,11 @@
 }
 <template v-if="!PopupQuickViewVueModal.AddToCart.DisableWishlistButton">
     <template v-if="PopupQuickViewVueModal.AddToCart.UpdatedShoppingCartItemId == null">
-        <button :id="'add-to-wishlist-button-' + PopupQuickViewVueModal.AddToCart.ProductId" class="btn btn-secondary add-to-wishlist-button mr-1" title="@Loc["ShoppingCart.AddToWishlist"]" :data-productid="PopupQuickViewVueModal.AddToCart.ProductId" :onclick="'AxiosCart.addproducttocart_details(`@addtowishlist/' + PopupQuickViewVueModal.AddToCart.ProductId + '/2`, `#product-details-form`);return false;'" v-b-tooltip.hover.bottom>
+        <a :id="'add-to-wishlist-button-' + PopupQuickViewVueModal.AddToCart.ProductId" class="btn btn-secondary add-to-wishlist-button mr-1" title="@Loc["ShoppingCart.AddToWishlist"]" :data-productid="PopupQuickViewVueModal.AddToCart.ProductId" :onclick="'AxiosCart.addproducttocart_details(`@addtowishlist/' + PopupQuickViewVueModal.AddToCart.ProductId + '/2`, `#product-details-form`);return false;'" v-b-tooltip.hover.bottom>
             <span class="sr-only">
                 @Loc["ShoppingCart.AddToWishlist"]
             </span>
             <b-icon icon="heart"></b-icon>
-        </button>
+        </a>
     </template>
 </template>
diff --git a/src/Web/Grand.Web/Views/Shared/QuickView/_ProductsComparison.cshtml b/src/Web/Grand.Web/Views/Shared/QuickView/_ProductsComparison.cshtml
index 18ac82e83..f8bb0bfe5 100644
--- a/src/Web/Grand.Web/Views/Shared/QuickView/_ProductsComparison.cshtml
+++ b/src/Web/Grand.Web/Views/Shared/QuickView/_ProductsComparison.cshtml
@@ -2,8 +2,8 @@
     var addtocomparelink = Url.RouteUrl("AddProductToCompare");
 }
 <template v-if="PopupQuickViewVueModal.CompareProductsEnabled">
-    <button class="btn btn-secondary add-to-compare-list-button mr-1" :onclick="'AxiosCart.addproducttocomparelist(`@addtocomparelink/' + PopupQuickViewVueModal.AddToCart.ProductId + '`);return false;'" v-b-tooltip.hover.bottom title="@Loc["Products.Compare.AddToCompareList"]">
+    <a class="btn btn-secondary add-to-compare-list-button mr-1" :onclick="'AxiosCart.addproducttocomparelist(`'+ PopupQuickViewVueModal.Id +'`, `@string.Format(Loc["Products.ProductHasBeenAddedToCompareList.Link"], Url.RouteUrl("CompareProducts"))`)'" v-b-tooltip.hover.bottom title="@Loc["Products.Compare.AddToCompareList"]">
         <b-icon icon="shuffle"></b-icon>
         <span class="sr-only">@Loc["Products.Compare.AddToCompareList"]</span>
-    </button>
+    </a>
 </template>
\ No newline at end of file
diff --git a/src/Web/Grand.Web/Views/Shared/SidebarCompareProducts.cshtml b/src/Web/Grand.Web/Views/Shared/SidebarCompareProducts.cshtml
new file mode 100644
index 000000000..6922fff41
--- /dev/null
+++ b/src/Web/Grand.Web/Views/Shared/SidebarCompareProducts.cshtml
@@ -0,0 +1,77 @@
+@inject IWorkContext workContext
+@{
+    var supportRtl = workContext.WorkingLanguage.Rtl;
+}
+<li class="nav-item">
+    <ul class="px-0">
+        <li class="nav-item">
+            <a href="#" target="_self" class="nav-link">
+                <b-icon icon="shuffle" :variant="[darkMode ? 'white' : 'dark']" @@click="getCompareList()" v-b-toggle.sidebar-compare></b-icon>
+                <span class="qty-indicator">
+                    {{compareProductsQty}}
+                </span>
+            </a>
+        </li>
+        <template>
+            <li>
+                <b-sidebar id="sidebar-compare" backdrop @if (!supportRtl) { <text> right</text> }>
+                    <template v-slot:title>
+                        @Loc["Products.Compare.Title"]
+                    </template>
+                    <template v-if="compareproducts !== null">
+                        <template v-if="compareproducts.Products !== undefined">
+                            <template v-for="product in compareproducts.Products">
+                                <div class="item comapre-product d-inline-flex no-wrap">
+                                    <a :href="product.Url" :title="product.DefaultPictureModel.Title" v-if="product.DefaultPictureModel.ImageUrl">
+                                        <b-img :alt="product.DefaultPictureModel.AlternateText" :src="product.DefaultPictureModel.ImageUrl" :title="product.DefaultPictureModel.Title" fluid></b-img>
+                                    </a>
+                                    <div class="col">
+                                        <a :href="product.Url">{{product.Name}}</a>
+                                        <div class="price"><span>@Loc["Wishlist.Mini.UnitPrice"]:</span> <strong>{{product.ProductPrice.Price}}</strong></div>
+                                    </div>
+                                    <div>
+                                        <a class="deleteitem" @@click="removeFromCompareList(product.Id)">
+                                            <b-icon icon="trash" variant="danger"></b-icon>
+                                        </a>
+                                    </div>
+                                </div>
+                            </template>
+                            <template v-if="compareproducts.Products == 0">
+                                <div class="d-flex flex-column justify-content-center align-items-center">
+                                    <b-icon icon="shuffle" font-scale="7.5" variant="secondary"></b-icon>
+                                    <div class="text-center text-muted mt-3">@Loc["Products.Compare.NoItems"]</div>
+                                </div>
+                            </template>
+                        </template>
+                        <template v-else>
+                            <div class="d-flex justify-content-center align-items-center h-100" v-if="wishlistitems == undefined">
+                                <div class="spinner-border text-info" role="status">
+                                </div>
+                            </div>
+                        </template>
+                    </template>
+                    <template v-slot:footer>
+                        <template v-if="compareproducts !== null && compareproducts.Products !== undefined && compareproducts.Products.length > 0">
+                            <b-col class="p-3 bg-dark">
+                                <div class="form-row">
+                                    <div class="col-lg-6 col-12">
+                                        <a class="btn btn-light d-flex align-items-center justify-content-center w-100 h-100 py-3 text-uppercase" href="@Url.RouteUrl("CompareProducts")">
+                                            <b-icon icon="shuffle" class="@if (supportRtl) { <text>pl-sm-2</text> } else { <text>pr-sm-2</text> }"></b-icon>
+                                            @Loc["Products.Compare.Title"]
+                                        </a>
+                                    </div>
+                                    <div class="col-lg-6 col-12">
+                                        <a class="btn btn-light d-flex align-items-center justify-content-center w-100 h-100 py-3 text-uppercase" @@click="removeFromCompareList()">
+                                            <b-icon icon="trash" class="@if (supportRtl) { <text>pl-sm-2</text> } else { <text>pr-sm-2</text> }"></b-icon>
+                                            @Loc["Products.Compare.Clear"]
+                                        </a>
+                                    </div>
+                                </div>
+                            </b-col>
+                        </template>
+                    </template>
+                </b-sidebar>
+            </li>
+        </template>
+    </ul>
+</li>
\ No newline at end of file
diff --git a/src/Web/Grand.Web/Views/Shared/SidebarShoppingCart.cshtml b/src/Web/Grand.Web/Views/Shared/SidebarShoppingCart.cshtml
index 8764c9589..f08b78115 100644
--- a/src/Web/Grand.Web/Views/Shared/SidebarShoppingCart.cshtml
+++ b/src/Web/Grand.Web/Views/Shared/SidebarShoppingCart.cshtml
@@ -44,8 +44,8 @@
                             <div class="quantity"><span>@Loc["ShoppingCart.Mini.Quantity"]:</span> <strong>{{item.Quantity}}</strong></div>
                         </div>
                         <div>
-                            <a class="deletecartitem" :data-href="item.Id" data-store-url="@Url.RouteUrl("DeleteCartItem")" onclick="deletecartitem(this.getAttribute('data-store-url') +'/'+ this.getAttribute('data-href'))">
-                                <b-icon icon="trash" class="deletecartitem" variant="danger"></b-icon>
+                            <a class="deleteitem" :data-href="item.Id" data-store-url="@Url.RouteUrl("DeleteCartItem")" onclick="deletecartitem(this.getAttribute('data-store-url') +'/'+ this.getAttribute('data-href'))">
+                                <b-icon icon="trash" class="deleteitem" variant="danger"></b-icon>
                             </a>
                         </div>
                     </div>
diff --git a/src/Web/Grand.Web/Views/Shared/SidebarWishlist.cshtml b/src/Web/Grand.Web/Views/Shared/SidebarWishlist.cshtml
index 4a7417e43..eafe3286a 100644
--- a/src/Web/Grand.Web/Views/Shared/SidebarWishlist.cshtml
+++ b/src/Web/Grand.Web/Views/Shared/SidebarWishlist.cshtml
@@ -41,20 +41,24 @@
                     </div>
                     <template v-slot:footer v-if="wishindicator > 0">
                         <template v-if="flywish !== undefined">
-                            <b-col cols="12" class="p-3 bg-dark">
-                                <div class="btn-group w-100">
-                                    <a class="btn btn-light d-flex align-items-center justify-content-center w-100 h-100 py-3 text-uppercase" href="@Url.RouteUrl("Wishlist")">
-                                        <b-icon icon="heart" class="@if (supportRtl) { <text>pl-sm-2</text> } else { <text>pr-sm-2</text> }"></b-icon>
-                                        @Loc["Wishlist"]
-                                    </a>
-                                    <template v-if="flywish.EmailWishlistEnabled">
-                                        <a class="btn btn-light d-flex align-items-center justify-content-center w-100 h-100 py-3 text-uppercase" href="@Url.RouteUrl("EmailWishlist")">
-                                            <b-icon icon="envelope" class="@if (supportRtl) { <text>pl-sm-2</text> } else { <text>pr-sm-2</text> }"></b-icon>
-                                            @Loc["Wishlist.EmailAFriend"]
+                            <div class="col-12 p-3 bg-dark">
+                                <div class="form-row">
+                                    <div class="col-lg col-12">
+                                        <a class="btn btn-light d-flex align-items-center justify-content-center w-100 h-100 py-3 text-uppercase" href="@Url.RouteUrl("Wishlist")">
+                                            <b-icon icon="heart" class="@if (supportRtl) { <text>pl-sm-2</text> } else { <text>pr-sm-2</text> }"></b-icon>
+                                            @Loc["Wishlist"]
                                         </a>
+                                    </div>
+                                    <template v-if="flywish.EmailWishlistEnabled">
+                                        <div class="col-lg-6 col-12">
+                                            <a class="btn btn-light d-flex align-items-center justify-content-center w-100 h-100 py-3 text-uppercase" href="@Url.RouteUrl("EmailWishlist")">
+                                                <b-icon icon="envelope" class="@if (supportRtl) { <text>pl-sm-2</text> } else { <text>pr-sm-2</text> }"></b-icon>
+                                                @Loc["Wishlist.EmailAFriend"]
+                                            </a>
+                                        </div>
                                     </template>
                                 </div>
-                            </b-col>
+                            </div>
                         </template>
                     </template>
                     <template v-else-if="wishindicator !== undefined">
diff --git a/src/Web/Grand.Web/Views/Shared/_CatalogProductView.cshtml b/src/Web/Grand.Web/Views/Shared/_CatalogProductView.cshtml
index e7c1059f2..6644b0c4a 100644
--- a/src/Web/Grand.Web/Views/Shared/_CatalogProductView.cshtml
+++ b/src/Web/Grand.Web/Views/Shared/_CatalogProductView.cshtml
@@ -290,7 +290,7 @@
             }
             @if (!Model.ProductPrice.DisableAddToCompareListButton && Model.ProductType == ProductType.SimpleProduct)
             {
-                <button v-b-tooltip.hover.bottom title="@Loc["ShoppingCart.AddToCompareList"]" class="btn btn-secondary" onclick="AxiosCart.addproducttocomparelist('@addtocomparelink');return false;">
+                <button v-b-tooltip.hover.bottom title="@Loc["ShoppingCart.AddToCompareList"]" class="btn btn-secondary" onclick="AxiosCart.addproducttocomparelist('@Model.Id', '@string.Format(Loc["Products.ProductHasBeenAddedToCompareList.Link"], Url.RouteUrl("CompareProducts"))')">
                     <span class="sr-only">AddToCompareList</span>
                     <b-icon icon="shuffle"></b-icon>
                 </button>
diff --git a/src/Web/Grand.Web/Views/Shared/_CatalogProductViewVue.cshtml b/src/Web/Grand.Web/Views/Shared/_CatalogProductViewVue.cshtml
index 00074cd7b..274d01c8a 100644
--- a/src/Web/Grand.Web/Views/Shared/_CatalogProductViewVue.cshtml
+++ b/src/Web/Grand.Web/Views/Shared/_CatalogProductViewVue.cshtml
@@ -227,7 +227,7 @@
                 </template>
             </template>
             <template v-if="!Model.ProductPrice.DisableAddToCompareListButton && Model.ProductType == 0">
-                <button v-b-tooltip.hover.bottom title="@Loc["ShoppingCart.AddToCompareList"]" class="btn btn-secondary" :onclick="'AxiosCart.addproducttocomparelist(`@Url.RouteUrl("AddProductToCompare")/' + Model.Id + '`);return false;'">
+                <button v-b-tooltip.hover.bottom title="@Loc["ShoppingCart.AddToCompareList"]" class="btn btn-secondary" :onclick="'AxiosCart.addproducttocomparelist(`'+ Model.Id +'`, `@string.Format(Loc["Products.ProductHasBeenAddedToCompareList.Link"], Url.RouteUrl("CompareProducts"))`)'">
                     <span class="sr-only">AddToCompareList</span>
                     <b-icon icon="shuffle"></b-icon>
                 </button>
diff --git a/src/Web/Grand.Web/Views/Shared/_Layout.cshtml b/src/Web/Grand.Web/Views/Shared/_Layout.cshtml
index 6f480d135..88766b4ef 100644
--- a/src/Web/Grand.Web/Views/Shared/_Layout.cshtml
+++ b/src/Web/Grand.Web/Views/Shared/_Layout.cshtml
@@ -37,7 +37,7 @@
         <partial name="_Notifications" />
         <vc:get-coordinate></vc:get-coordinate>
         <partial name="Header" />
-        <b-container :fluid="fluid" class="main-container">
+        <b-container class="main-container">
             @await Component.InvokeAsync("Widget", new { widgetZone = "content_before" })
             @if (IsSectionDefined("Breadcrumb"))
             {
diff --git a/src/Web/Grand.Web/Views/Shared/_ShoppingCartLinks.cshtml b/src/Web/Grand.Web/Views/Shared/_ShoppingCartLinks.cshtml
index baf9b6fde..c5ed42f80 100644
--- a/src/Web/Grand.Web/Views/Shared/_ShoppingCartLinks.cshtml
+++ b/src/Web/Grand.Web/Views/Shared/_ShoppingCartLinks.cshtml
@@ -1,6 +1,7 @@
 @inject IWorkContext workContext
 @inject Grand.Business.Common.Interfaces.Security.IPermissionService permissionService
 @inject ShoppingCartSettings shoppingCartSettings
+@inject CatalogSettings catalogSettings
 @using Grand.Business.Common.Services.Security
 @using Grand.Business.Checkout.Extensions
 @{
@@ -26,7 +27,10 @@
                 .Sum(x => x.Quantity) : 0;
 
 }
-
+@if (catalogSettings.CompareProductsEnabled)
+{
+    <partial name="SidebarCompareProducts" />
+}
 @if (wishlistEnabled || shoppingCartEnabled)
 {
     @if (miniShoppingCartEnabled)
diff --git a/src/Web/Grand.Web/wwwroot/theme/css/common/common.css b/src/Web/Grand.Web/wwwroot/theme/css/common/common.css
index 138f71234..ba1319698 100644
--- a/src/Web/Grand.Web/wwwroot/theme/css/common/common.css
+++ b/src/Web/Grand.Web/wwwroot/theme/css/common/common.css
@@ -1017,14 +1017,13 @@ input:checked ~ .color-container .color::before {
 }
 .product-box .quick-view-button {
     position: absolute;
-    bottom: 1px;
+    bottom: 0;
     left: 1px;
     width: calc(100% - 2px);
     font-size: 16px;
     font-weight: 500;
     text-transform: uppercase;
     border: 0;
-    border-top: 1px solid;
     border-radius: 0;
     transform: translateY(100%);
     -webkit-transform: translateY(100%);
@@ -1262,11 +1261,8 @@ input:checked ~ .color-container .color::before {
     border-bottom-right-radius: 0;
 }
 
-/* container wide */
+/* main container */
 
-.main-container.container-fluid .product-box.list .card-body {
-    flex: 4;
-}
 .main-container {
     min-height: 350px;
 }
@@ -1288,6 +1284,15 @@ input:checked ~ .color-container .color::before {
     border-radius: 100%;
 }
 
+/* comapre products table */
+
+.compare-products-table td.same-width {
+    width: 25%
+}
+.compare-products-table .compare-img {
+    max-width: 250px;
+}
+
 /* autocomplete */
 
 .vbt-autcomplete-list[data-v-48792d67] {
@@ -1392,36 +1397,7 @@ footer .list-group-item span:last-child {
  
 /* media */
 
-@media (min-width: 992px) {
-    .main-container.container-fluid .product-grid .product-container.col-lg-4 {
-        -ms-flex: 0 0 25%;
-        flex: 0 0 25%;
-        max-width: 25%;
-    }
-}
-@media (min-width: 1200px) {
-    .main-container.container-fluid .categoryGrid .col-md-4 {
-        -ms-flex: 0 0 25%;
-        flex: 0 0 25%;
-        max-width: 25%;
-    }
-    .main-container.container-fluid .product-grid .product-container.col-xl-3 {
-        -ms-flex: 0 0 16.666667%;
-        flex: 0 0 16.666667%;
-        max-width: 16.666667%;
-    }
-    .main-container.container-fluid .featured-product-container.col-xl-6 {
-        -ms-flex: 0 0 33.333333%;
-        flex: 0 0 33.333333%;
-        max-width: 33.333333%;
-    }
-}
 @media (min-width: 1400px) {
-    .main-container.container-fluid .categoryGrid .col-xl-4 {
-        -ms-flex: 0 0 25%;
-        flex: 0 0 25%;
-        max-width: 25%;
-    }
     .container, .container-lg, .container-md, .container-sm, .container-xl {
         max-width: 1350px;
     }
@@ -1430,6 +1406,9 @@ footer .list-group-item span:last-child {
     .container, .container-lg, .container-md, .container-sm {
         max-width: 100%;
     }
+    .compare-products-table td.same-width {
+        width: 33.333333%;
+    }
 }
 @media (max-width: 991px) {
     footer .list-group-item:not(.list-group-item-action) {
diff --git a/src/Web/Grand.Web/wwwroot/theme/css/common/common.rtl.css b/src/Web/Grand.Web/wwwroot/theme/css/common/common.rtl.css
index d9683a62b..c8d55214d 100644
--- a/src/Web/Grand.Web/wwwroot/theme/css/common/common.rtl.css
+++ b/src/Web/Grand.Web/wwwroot/theme/css/common/common.rtl.css
@@ -1156,14 +1156,13 @@ input:checked ~ .color-container .color::before {
 }
 .product-box .quick-view-button {
     position: absolute;
-    bottom: 1px;
+    bottom: 0;
     left: 1px;
     width: calc(100% - 2px);
     font-size: 16px;
     font-weight: 500;
     text-transform: uppercase;
     border: 0;
-    border-top: 1px solid;
     border-radius: 0;
     transform: translateY(100%);
     -webkit-transform: translateY(100%);
@@ -1406,11 +1405,8 @@ input:checked ~ .color-container .color::before {
     border-bottom-right-radius: 0;
 }
 
-/* container wide */
+/* main container */
 
-.main-container.container-fluid .product-box.list .card-body {
-    flex: 4;
-}
 .main-container {
     min-height: 350px;
 }
@@ -1432,6 +1428,15 @@ input:checked ~ .color-container .color::before {
     border-radius: 100%;
 }
 
+/* comapre products table */
+
+.compare-products-table td.same-width {
+    width: 25%
+}
+.compare-products-table .compare-img {
+    max-width: 250px;
+}
+
 /* autocomplete */
 
 .vbt-autcomplete-list[data-v-48792d67] {
@@ -1540,36 +1545,7 @@ footer .list-group-item span:last-child {
  
 /* media */
 
-@media (min-width: 992px) {
-    .main-container.container-fluid .product-grid .product-container.col-lg-4 {
-        -ms-flex: 0 0 25%;
-        flex: 0 0 25%;
-        max-width: 25%;
-    }
-}
-@media (min-width: 1200px) {
-    .main-container.container-fluid .categoryGrid .col-md-4 {
-        -ms-flex: 0 0 25%;
-        flex: 0 0 25%;
-        max-width: 25%;
-    }
-    .main-container.container-fluid .product-grid .product-container.col-xl-3 {
-        -ms-flex: 0 0 16.666667%;
-        flex: 0 0 16.666667%;
-        max-width: 16.666667%;
-    }
-    .main-container.container-fluid .featured-product-container.col-xl-6 {
-        -ms-flex: 0 0 33.333333%;
-        flex: 0 0 33.333333%;
-        max-width: 33.333333%;
-    }
-}
 @media (min-width: 1400px) {
-    .main-container.container-fluid .categoryGrid .col-xl-4 {
-        -ms-flex: 0 0 25%;
-        flex: 0 0 25%;
-        max-width: 25%;
-    }
     .container, .container-lg, .container-md, .container-sm, .container-xl {
         max-width: 1350px;
     }
@@ -1578,6 +1554,9 @@ footer .list-group-item span:last-child {
     .container, .container-lg, .container-md, .container-sm {
         max-width: 100%;
     }
+    .compare-products-table td.same-width {
+        width: 33.333333%;
+    }
 }
 @media (max-width: 991px) {
     footer .list-group-item:not(.list-group-item-action) {
diff --git a/src/Web/Grand.Web/wwwroot/theme/css/header/header.css b/src/Web/Grand.Web/wwwroot/theme/css/header/header.css
index f45b25081..a6f35fd05 100644
--- a/src/Web/Grand.Web/wwwroot/theme/css/header/header.css
+++ b/src/Web/Grand.Web/wwwroot/theme/css/header/header.css
@@ -48,37 +48,39 @@
 
 /* sidebar-cart */
 
-.sidebar-cart {
+.sidebar {
     padding-left: 0;
 }
-
-.sidebar-cart .item {
+.b-sidebar .item {
     position: relative;
     width: 100%;
     margin: 0 0 7.5px 0;
     padding: 0 0 7.5px 0;
     border-bottom: 1px solid #efefef;
 }
-.sidebar-cart .item img {
+.b-sidebar .item img {
     background-color: #F8F9FB;
 }
-.sidebar-cart .item:last-child,
-.sidebar-cart .item:last-child:first-child {
+.b-sidebar .item.comapre-product img {
+    max-width: 100px;
+}
+.b-sidebar .item:last-child,
+.b-sidebar .item:last-child:first-child {
     margin: 0;
     padding: 0;
     border-bottom: 0;
 }
-.sidebar-cart .item .attributes {
+.b-sidebar .item .attributes {
     font-size: 14px;
     color: #888;
 }
-.sidebar-cart .item .deletecartitem {
+.b-sidebar .item .deleteitem {
     position: absolute;
     top: 0;
     right: 0;
     cursor: pointer;
 }
-.sidebar-cart .item .col a {
+.b-sidebar .item .col a {
     color: #343a40;
     font-size: 16px;
     font-weight: 500;
diff --git a/src/Web/Grand.Web/wwwroot/theme/script/app.js b/src/Web/Grand.Web/wwwroot/theme/script/app.js
index b50c7d51a..f2ee91d8f 100644
--- a/src/Web/Grand.Web/wwwroot/theme/script/app.js
+++ b/src/Web/Grand.Web/wwwroot/theme/script/app.js
@@ -3,7 +3,6 @@
     data: function() {
         return {
             show: false,
-            fluid: false,
             hover: false,
             darkMode: false,
             active: false,
@@ -15,6 +14,8 @@
             PopupProductReviewVueModal: null,
             index: null,
             RelatedProducts: null,
+            compareproducts: null,
+            compareProductsQty: 0,
         }
     },
     props: {
@@ -31,6 +32,7 @@
         if (localStorage.fluid == "fluid") this.fluid = "fluid";
         if (localStorage.fluid == "") this.fluid = "false";
         if (localStorage.darkMode == "true") this.darkMode = true;
+        this.updateCompareProductsQty();
     },
     watch: {
         fluid: function (newName) {
@@ -44,6 +46,15 @@
         }
     },
     methods: {
+        updateCompareProductsQty: function () {
+            const cookie = AxiosCart.getCookie('Grand.CompareProduct');
+            if (cookie !== '') {
+                const qty = cookie.split('|').filter(Boolean).length;
+                this.compareProductsQty = qty;
+            } else {
+                this.compareProductsQty = 0;
+            }
+        },
         updateFly: function () {
             axios({
                 baseURL: '/Component/Index?Name=SidebarShoppingCart',
@@ -77,6 +88,35 @@
                 this.wishindicator = response.data.Items.length
             ))
         },
+        getCompareList: function () {
+            axios({
+                baseURL: '/compareproducts',
+                method: 'get',
+                params: {
+                    t: new Date().getTime()
+                },
+                data: null,
+                headers: {
+                    'Accept': 'application/json',
+                    'Content-Type': 'application/json',
+                    'X-Response-View': 'Json'
+                }
+            }).then(response => {
+                this.compareproducts = response.data
+            })
+        },
+        removeFromCompareList: function (id) {
+            if (id !== undefined) {
+                const compareList = AxiosCart.getCookie('Grand.CompareProduct');
+                const newCompareList = compareList.replace(id, '');
+
+                AxiosCart.setCookie('Grand.CompareProduct', newCompareList);
+            } else {
+                AxiosCart.setCookie('Grand.CompareProduct', '');
+            }
+            this.updateCompareProductsQty();
+            this.getCompareList();
+        },
         showModalOutOfStock: function () {
             this.$refs['out-of-stock'].show()
         },
diff --git a/src/Web/Grand.Web/wwwroot/theme/script/public.axios.js b/src/Web/Grand.Web/wwwroot/theme/script/public.axios.js
index 559982e52..d30e74704 100644
--- a/src/Web/Grand.Web/wwwroot/theme/script/public.axios.js
+++ b/src/Web/Grand.Web/wwwroot/theme/script/public.axios.js
@@ -136,22 +136,28 @@ var AxiosCart = {
         });  
     },
     //add a product to compare list
-    addproducttocomparelist: function (urladd) {
+    addproducttocomparelist: function (id, message) {
         if (this.loadWaiting != false) {
             return;
         }
         this.setLoadWaiting(true);
 
-        axios({
-            url: urladd,
-            method: 'post'
-        }).then(function (response) {
-            this.AxiosCart.success_process(response);
-        }).catch(function (error) {
-            error.axiosFailure;
-        }).then(function () {
-            this.AxiosCart.resetLoadWaiting();
-        });  
+        var cookie = this.getCookie('Grand.CompareProduct');
+        if (cookie !== '') {
+            if (!cookie.includes(id)) {
+                cookie = cookie + '|' + id;
+            }
+        } else {
+            cookie = id;
+        }
+        this.setCookie('Grand.CompareProduct', cookie);
+        vm.updateCompareProductsQty();
+
+        displayBarNotification(message, 'success', 3500);
+
+        this.resetLoadWaiting();
+
+        return false;  
     },
 
     setLoadWaiting: function (display) {
@@ -173,15 +179,15 @@ var AxiosCart = {
             vm.flycartindicator = newfly.TotalProducts;
 
         }
-        if (response.data.comparemessage) {
-            if (response.data.success == true) {
-                displayBarNotification(response.data.comparemessage, 'success', 3500);
-            }
-            else {
-                displayBarNotification(response.data.comparemessage, 'error', 3500);
-            }
-            return false;
-        }
+        //if (response.data.comparemessage) {
+        //    if (response.data.success == true) {
+        //        displayBarNotification(response.data.comparemessage, 'success', 3500);
+        //    }
+        //    else {
+        //        displayBarNotification(response.data.comparemessage, 'error', 3500);
+        //    }
+        //    return false;
+        //}
         if (response.data.product) {
             if (response.data.success == true) {
 
@@ -239,5 +245,28 @@ var AxiosCart = {
 
     axiosFailure: function () {
         alert('Failed to add the product. Please refresh the page and try one more time.');
+    },
+    setCookie: function (cname, cvalue, exdays) {
+        const d = new Date();
+        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
+        let expires = "expires=" + d.toUTCString();
+        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
+    },
+    getCookie: function (cname) {
+        let name = cname + "=";
+        let ca = document.cookie.split(';');
+        for (let i = 0; i < ca.length; i++) {
+            let c = ca[i];
+            while (c.charAt(0) == ' ') {
+                c = c.substring(1);
+            }
+            if (c.indexOf(name) == 0) {
+                return c.substring(name.length, c.length);
+            }
+        }
+        return "";
+    },
+    deleteCookie: function (cname) {
+        document.cookie = "" + cname +"=; expires=Thu, 01 Jan 1970 00:00:00 UTC;"
     }
-};
\ No newline at end of file
+};