diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.html b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.html
index 16f4f981c..ccc89836d 100644
--- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.html
+++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.html
@@ -1,12 +1,12 @@
 <div class="esh-orders_detail">
     <div class="esh-orders_detail-header">
         <div class="container">
-            <a class="esh-orders-back" routerLink="/orders">Back to list</a>
+            <a class="esh-orders_detail-back" routerLink="/orders">Back to list</a>
         </div>
     </div>
 
     <div class="container">
-        <div class="aaaaaaaa">
+        <section class="esh-orders_detail-section">
             <article class="esh-orders_detail-titles row">
                 <section class="esh-orders_detail-title col-xs-3">Order number</section>
                 <section class="esh-orders_detail-title col-xs-3">Date</section>
@@ -15,58 +15,58 @@
             </article>
 
             <article class="esh-orders_detail-items row">
-                <section class="esh-orders_detail-item col-xs-2">{{order.ordernumber}}</section>
-                <section class="esh-orders_detail-item col-xs-4">{{order.date | date:'short'}}</section>
-                <section class="esh-orders_detail-item col-xs-2">$ {{order.total}}</section>
-                <section class="esh-orders_detail-item col-xs-2">{{order.status}}</section>
+                <section class="esh-orders_detail-item col-xs-3">{{order.ordernumber}}</section>
+                <section class="esh-orders_detail-item col-xs-3">{{order.date | date:'short'}}</section>
+                <section class="esh-orders_detail-item col-xs-3">$ {{order.total}}</section>
+                <section class="esh-orders_detail-item col-xs-3">{{order.status}}</section>
             </article>
-        </div>
+        </section>
 
-        <div class="bbbbb">
+        <section class="esh-orders_detail-section">
             <article class="esh-orders_detail-titles row">
-                <section class="esh-orders_detail-title col-xs-3">Shipig address</section>
+                <section class="esh-orders_detail-title col-xs-12">Shipig address</section>
             </article>
 
             <article class="esh-orders_detail-items row">
-                <section class="esh-orders_detail-item col-xs-3">{{order.street}}</section>
+                <section class="esh-orders_detail-item col-xs-12">{{order.street}}</section>
             </article>
 
             <article class="esh-orders_detail-items row">
-                <section class="esh-orders_detail-item col-xs-4">{{order.city}}</section>
+                <section class="esh-orders_detail-item col-xs-12">{{order.city}}</section>
             </article>
 
             <article class="esh-orders_detail-items row">
-                <section class="esh-orders_detail-item col-xs-2">{{order.country}}</section>
+                <section class="esh-orders_detail-item col-xs-12">{{order.country}}</section>
             </article>
-        </div>
+        </section>
 
-        <div class="ccccc">
+        <section class="esh-orders_detail-section">
             <article class="esh-orders_detail-titles row">
-                <section class="esh-orders_detail-title col-xs-3">Order details</section>
+                <section class="esh-orders_detail-title col-xs-12">Order details</section>
             </article>
 
-            <article class="esh-orders_detail-items row"
+            <article class="esh-orders_detail-items esh-orders_detail-items--border row"
                      *ngFor="let item of order.orderitems">
-                <section class="esh-orders_detail-item col-xs-4">
-                    <img class="esh-orders-detail-image" src="{{item.pictureurl}}">
+                <section class="esh-orders_detail-item col-md-4 hidden-md-down">
+                    <img class="esh-orders_detail-image" src="{{item.pictureurl}}">
                 </section>
-                <section class="esh-orders_detail-item col-xs-2">{{item.productname}}</section>
-                <section class="esh-orders_detail-item col-xs-2">$ {{item.unitprice}}</section>
-                <section class="esh-orders_detail-item col-xs-2">{{item.units}}</section>
-                <section class="esh-orders_detail-item col-xs-2">$ {{item.units * item.unitprice}}</section>
+                <section class="esh-orders_detail-item esh-orders_detail-item--middle col-xs-4">{{item.productname}}</section>
+                <section class="esh-orders_detail-item esh-orders_detail-item--middle col-xs-1">$ {{item.unitprice}}</section>
+                <section class="esh-orders_detail-item esh-orders_detail-item--middle col-xs-1">{{item.units}}</section>
+                <section class="esh-orders_detail-item esh-orders_detail-item--middle col-xs-2">$ {{item.units * item.unitprice}}</section>
             </article>
-        </div>
+        </section>
 
-        <div class="ddddddd">
+        <section class="esh-orders_detail-section esh-orders_detail-section--right">
             <article class="esh-orders_detail-titles row">
-                <section class="esh-orders_detail-title col-xs-9"></section>
-                <section class="esh-orders_detail-title col-xs-3">Total</section>
+                <section class="esh-orders_detail-title col-xs-10"></section>
+                <section class="esh-orders_detail-title col-xs-2">Total</section>
             </article>
 
             <article class="esh-orders_detail-items row">
-                <section class="esh-orders_detail-item col-xs-9"></section>
-                <section class="esh-orders_detail-item col-xs-3">$ XX</section>
+                <section class="esh-orders_detail-item col-xs-10"></section>
+                <section class="esh-orders_detail-item esh-orders_detail-item--mark col-xs-2">$ XX</section>
             </article>
-        </div>
+        </section>
     </div>
 </div>
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.scss b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.scss
index 6ca4d6fbf..94155312f 100644
--- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.scss
+++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-detail/orders-detail.component.scss
@@ -1,86 +1,70 @@
 @import '../../_variables.scss';
 
-.esh-orders-detail {
+.esh-orders_detail {
     min-height: 80vh;
 
+    $header-height: 4rem;
     &-header {
         background-color: #00A69C;
-        height: 63px;
+        height: $header-height;
+    }
 
-        li {
-            list-style: none;
-            display: inline;
-            opacity: 0.5;
-            margin-top: 25px;
-            margin-left: 10px;
-            float: right;
-            cursor: pointer;
-            color: white;
-        }
+    &-back {
+        color: rgba($color-foreground-brighter, .4);
+        line-height: $header-height;
+        text-transform: uppercase;
+        text-decoration: none;
+        transition: color $animation-speed-default;
 
-        li a {
-            color: white;
+        &:hover {
+            color: $color-foreground-brighter;
+            transition: color $animation-speed-default;
         }
+    }
 
-        &-back {
-            float: left !important;
-            margin-top: 20px !important;
-            text-transform: uppercase;
-        }
+    &-section {
+        padding: 1rem 0;
 
-        li a:hover {
-            text-decoration: none;
+        &--right {
+            text-align: right;
         }
     }
 
-    &-container {
-        min-height: 70vh;
-        padding-top: 40px;
-        margin-bottom: 30px;
-    }
-
-    &-container .table tbody tr:first-child td {
-        border-top: none;
+    &-titles {
+        padding-bottom: 1rem;
+        padding-top: 2rem;
     }
 
-    &-container .table tr {
-        border-bottom: none;
+    &-title {
+        font-size: $font-size-l;
     }
 
-    &-section {
-        margin-top: 50px;
+    &-items {
+        &--border {
+            border-bottom: $border-light solid $color-foreground-bright;
+            padding: .5rem 0;
+        }
     }
 
-    &-container .table {
-        margin-left: -7px;
-    }
+    $item-height: 8rem;
+    &-item {
+        font-size: $font-size-m;
+        font-weight: $font-weight-semilight;
 
-    &-total {
-        margin-bottom: 5px;
-        margin-left: 20px;
-        text-align: left;
-    }
+        &--middle {
+            line-height: $item-height;
 
-    &-total-label {
-        font-size: 14px;
-        color: #404040;
-        margin-top:10px;
-    }
+            @media screen and (max-width: $media-screen-s) {
+                line-height: $font-size-m;
+            }
+        }
 
-    &-total-value {
-        font-size: 28px;
-        color: #00a69c;
-        text-align: left;
+        &--mark {
+            color: $color-secondary;
+        }
     }
 
     &-image {
-        max-width: 210px;
-    }
-
-    &-column {
-        max-width: 120px;
-        padding: 8px;
-        text-transform: uppercase;
-        vertical-align: middle!important;
+        height: $item-height;
     }
 }