diff --git a/apps/public-web/src/EShopOnAbp.PublicWeb/Components/UserOrders/Default.cshtml b/apps/public-web/src/EShopOnAbp.PublicWeb/Components/UserOrders/Default.cshtml
index ecb4e0f5..e426ef10 100644
--- a/apps/public-web/src/EShopOnAbp.PublicWeb/Components/UserOrders/Default.cshtml
+++ b/apps/public-web/src/EShopOnAbp.PublicWeb/Components/UserOrders/Default.cshtml
@@ -6,13 +6,16 @@
 @model EShopOnAbp.PublicWeb.Components.UserOrders.UserOrderWidgetViewComponent.UserOrderViewModel
 @inject IStringLocalizer<EShopOnAbpResource> L
 @inject IOptions<AbpRemoteServiceOptions> options
+
 @if (Model.ServiceError)
 {
     <div>SERVICE ERROR</div>
 }
+
 <abp-row class="m-2 p-2" style="text-align: center">
     <span class="order-title">@L["UserOrders:TotalOrderCount"] <strong>@Model.UserOrders.Count</strong></span>
 </abp-row>
+
 @foreach (var order in Model.UserOrders)
 {
     var orderTotalString = order.Items.Sum(q => q.UnitPrice * q.Units).ToString("C", new CultureInfo("en-US"));
@@ -51,24 +54,32 @@
                         </div>
                         <abp-row>
                             <abp-column size="_2">
-                                @{
-                                    string imageUrl = $"{options.Value.RemoteServices.Default.BaseUrl}product-images/{item.PictureUrl}";
-                                    <img class="img-size" src="@imageUrl" />
-                                }
+                                <a href="/products/@item.ProductId.ToString()">
+                                    @{
+                                        string imageUrl = $"{options.Value.RemoteServices.Default.BaseUrl}product-images/{item.PictureUrl}";
+                                        <img class="img-size" src="@imageUrl" />
+                                    }
+                                </a>
                             </abp-column>
-                            <abp-column size-lg="_4">
-                                <div><strong>@item.ProductName</strong></div>
-                                <div>@L["UserOrders:ProductReturnDate"] @order.OrderDate.AddMonths(1).ToString("dd MMMM yyyy")</div>
+                            <abp-column size-lg="_4" size-md="_4" size-sm="_4">
+                                <a href="/products/@item.ProductId.ToString()">
+                                    <div><strong>@item.ProductName</strong></div>
+                                    <div>@L["UserOrders:ProductReturnDate"] @order.OrderDate.AddMonths(1).ToString("dd MMMM yyyy")</div>
+                                </a>
                                 <div class="mt-3">
                                     <abp-button icon="fas fa-cart-plus" class="btn btn-warning buy-again" text="@L["UserOrders:BuyAgain"]" data-product-id="@item.ProductId"></abp-button>
                                 </div>
                             </abp-column>
                             <abp-column offset="_3" size="_2">
                                 <abp-row class="pb-3">
-                                    <abp-button class="btn btn-light shadow" disabled="true" abp-tooltip-right="Not available yet">@L["UserOrders:ReturnProducts"]</abp-button>
+                                    <abp-button class="btn btn-light shadow" disabled="true" abp-tooltip-right="Not available yet">
+                                        @L["UserOrders:ReturnProducts"]
+                                    </abp-button>
                                 </abp-row>
                                 <abp-row>
-                                    <abp-button class="btn btn-light shadow" disabled="true" abp-tooltip-right="Not available yet">@L["UserOrders:AddReview"]</abp-button>
+                                    <abp-button class="btn btn-light shadow" disabled="true" abp-tooltip-right="Not available yet">
+                                        @L["UserOrders:AddReview"]
+                                    </abp-button>
                                 </abp-row>
                             </abp-column>
                         </abp-row>
diff --git a/apps/public-web/src/EShopOnAbp.PublicWeb/Pages/Index.cshtml b/apps/public-web/src/EShopOnAbp.PublicWeb/Pages/Index.cshtml
index e19737e6..24b58a5d 100644
--- a/apps/public-web/src/EShopOnAbp.PublicWeb/Pages/Index.cshtml
+++ b/apps/public-web/src/EShopOnAbp.PublicWeb/Pages/Index.cshtml
@@ -14,12 +14,12 @@
 }
 
 @section styles{
-<abp-style src="/Pages/index.css" />
+    <abp-style src="/Pages/index.css" />
 }
 
 @section scripts {
-<abp-script src="/client-proxies/basket-proxy.js" />
-<abp-script src="/Pages/index.js" />
+    <abp-script src="/client-proxies/basket-proxy.js" />
+    <abp-script src="/Pages/index.js" />
 }
 
 @if (Model.HasRemoteServiceError)
@@ -44,13 +44,15 @@
                                 string productImage = !product.ImageName.IsNullOrEmpty() ? $"{options.Value.RemoteServices.Default.BaseUrl}product-images/{product.ImageName}" : $"{options.Value.RemoteServices.Default.BaseUrl}product-images/@product.ImageName";
                                 string buyText = L["Index:AddToBasket"];
                                 <div class="product-list-item" data-product-id="@product.Id.ToString()">
-                                    <div class="col">
-                                        <div class="product-info-box">
-                                            <h6>@product.Name</h6>
-                                            <em class="d-block text-muted">@product.Code - @L["StockCount"]: @product.StockCount</em>
+                                    <a href="/products/@product.Id.ToString()">
+                                        <div class="col">
+                                            <div class="product-info-box">
+                                                <h6>@product.Name</h6>
+                                                <em class="d-block text-muted">@product.Code - @L["StockCount"]: @product.StockCount</em>
+                                            </div>
                                         </div>
-                                    </div>
-                                    <img src="@productImage" />
+                                        <img src="@productImage" />
+                                    </a>
                                     <div class="row mt-5 ">
                                         @if (product.StockCount > 0)
                                         {
diff --git a/apps/public-web/src/EShopOnAbp.PublicWeb/Pages/ProductDetail.cshtml b/apps/public-web/src/EShopOnAbp.PublicWeb/Pages/ProductDetail.cshtml
new file mode 100644
index 00000000..d9876bda
--- /dev/null
+++ b/apps/public-web/src/EShopOnAbp.PublicWeb/Pages/ProductDetail.cshtml
@@ -0,0 +1,55 @@
+@page "/products/{id:guid}"
+@using EShopOnAbp.Localization
+@using Microsoft.Extensions.Localization
+@using System.Globalization
+@using Microsoft.Extensions.Options
+@using Volo.Abp.Http.Client
+@model EShopOnAbp.PublicWeb.Pages.ProductDetailModel
+@inject IStringLocalizer<EShopOnAbpResource> L
+@inject IOptions<AbpRemoteServiceOptions> options
+
+@section styles{
+    <abp-style src="/Pages/index.css" />
+}
+
+@section scripts {
+    <abp-script src="/client-proxies/basket-proxy.js" />
+    <abp-script src="/Pages/index.js" />
+}
+
+<div class="container">
+    <div class="row justify-content-center">
+        <div class="col-lg-6 col-md-6 col-sm-6 ">
+            <div class="product-list">
+                @{
+                    var product = Model.Product;
+                    var productPrice = product.Price.ToString("C", new CultureInfo("en-US"));
+                    string productImage = !product.ImageName.IsNullOrEmpty() ? $"{options.Value.RemoteServices.Default.BaseUrl}product-images/{product.ImageName}" : $"{options.Value.RemoteServices.Default.BaseUrl}product-images/@product.ImageName";
+                    string buyText = L["Index:AddToBasket"];
+                    <div class="product-list-item" data-product-id="@product.Id.ToString()" style="cursor:auto">
+                        <div class="col">
+                            <div class="product-info-box">
+                                <h6>@product.Name</h6>
+                                <em class="d-block text-muted">@product.Code - @L["StockCount"]: @product.StockCount</em>
+                            </div>
+                        </div>
+                        <img src="@productImage" />
+                        <div class="row mt-5 ">
+                            @if (product.StockCount > 0)
+                            {
+                                <abp-button class="add-basket-button" button-type="Warning" text="@buyText" data-product-id="@product.Id.ToString()"></abp-button>
+                            }
+                            else
+                            {
+                                <abp-button disabled="true" class="add-basket-button" button-type="Warning" text="@L["Index:OutOfStock"]" />
+                            }
+                            <div class="info-section col" style="text-align: center">
+                                <span class="product-price">@productPrice</span>
+                            </div>
+                        </div>
+                    </div>
+                 }
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/apps/public-web/src/EShopOnAbp.PublicWeb/Pages/ProductDetail.cshtml.cs b/apps/public-web/src/EShopOnAbp.PublicWeb/Pages/ProductDetail.cshtml.cs
new file mode 100644
index 00000000..99ad7431
--- /dev/null
+++ b/apps/public-web/src/EShopOnAbp.PublicWeb/Pages/ProductDetail.cshtml.cs
@@ -0,0 +1,28 @@
+using EShopOnAbp.CatalogService.Products;
+using Microsoft.AspNetCore.Mvc;
+using System;
+using System.Threading.Tasks;
+using Volo.Abp.AspNetCore.Mvc.UI.RazorPages;
+
+namespace EShopOnAbp.PublicWeb.Pages
+{
+    public class ProductDetailModel : AbpPageModel
+    {
+        [BindProperty(SupportsGet = true)]
+        public int OrderNo { get; set; }
+
+        public ProductDto Product { get; private set; }
+
+        private readonly IPublicProductAppService _productAppService;
+
+        public ProductDetailModel(IPublicProductAppService productAppService)
+        {
+            _productAppService = productAppService;
+        }
+
+        public async Task OnGet(Guid id)
+        {
+            Product = await _productAppService.GetAsync(id);
+        }
+    }
+}
\ No newline at end of file
diff --git a/apps/public-web/src/EShopOnAbp.PublicWeb/Pages/index.css b/apps/public-web/src/EShopOnAbp.PublicWeb/Pages/index.css
index fea3c70f..9b2c3929 100644
--- a/apps/public-web/src/EShopOnAbp.PublicWeb/Pages/index.css
+++ b/apps/public-web/src/EShopOnAbp.PublicWeb/Pages/index.css
@@ -2,6 +2,11 @@
     background-color: #f9f9f9;
 }
 
+a, a:hover, a:visited, a:active {
+    color: inherit;
+    text-decoration: none;
+}
+
 .product-list-item {
     background-color: #fff;
     padding: 2em;
diff --git a/apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/user-orders/user-order-widget.css b/apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/user-orders/user-order-widget.css
index e69de29b..bfa23e93 100644
--- a/apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/user-orders/user-order-widget.css
+++ b/apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/user-orders/user-order-widget.css
@@ -0,0 +1,4 @@
+a, a:hover, a:visited, a:active {
+    color: inherit;
+    text-decoration: none;
+}