diff --git a/src/Web/WebSPA/.gitignore b/src/Web/WebSPA/.gitignore
index c5f31e00a..a4cb1babf 100644
--- a/src/Web/WebSPA/.gitignore
+++ b/src/Web/WebSPA/.gitignore
@@ -11,7 +11,6 @@ npm-debug.log*
 *.user
 *.userosscache
 *.sln.docstates
-package.lock.json
 
 # User-specific files (MonoDevelop/Xamarin Studio)
 *.userprefs
diff --git a/src/Web/WebSPA/Client/modules/basket/basket.component.html b/src/Web/WebSPA/Client/modules/basket/basket.component.html
index 98bc0a613..9207b6fc7 100644
--- a/src/Web/WebSPA/Client/modules/basket/basket.component.html
+++ b/src/Web/WebSPA/Client/modules/basket/basket.component.html
@@ -8,53 +8,106 @@
             </div>
         </div>
 
-        <article class="esh-basket-titles row">
-            <section class="esh-basket-title col-xs-3">Product</section>
-            <section class="esh-basket-title col-xs-3 hidden-lg-down"></section>
-            <section class="esh-basket-title col-xs-2">Price</section>
-            <section class="esh-basket-title col-xs-2">Quantity</section>
-            <section class="esh-basket-title col-xs-2">Cost</section>
-        </article>
-
-        <div *ngFor="let item of basket?.items" class="esh-basket-items--border">
-            <article class="esh-basket-items row">
-
-                <section class="esh-basket-item esh-basket-item--middle col-lg-3 hidden-lg-down">
-                    <img class="esh-basket-image" src="{{item.pictureUrl}}" />
-                    <div>{{item.productName}}</div>
-                </section>
-                <section class="esh-basket-item esh-basket-item--middle col-xs-2">$ {{item.unitPrice | number:'.2-2'}}</section>
-                <section class="esh-basket-item esh-basket-item--middle col-xs-2">
-                    <input id="quantity" class="esh-basket-input" type="number" min="1" [(ngModel)]="item.quantity" (change)="itemQuantityChanged(item)" />
-                </section>
-                <section class="esh-basket-item esh-basket-item--middle esh-basket-item--mark col-xs-2">$ {{(item.unitPrice * item.quantity) | number:'.2-2'}}</section>
-            </article>
-            <br/>
-            <div class="esh-basket-items-margin-left1 row">
-                <div class="alert alert-warning" role="alert" *ngIf="item.oldUnitPrice > 0">&nbsp;Note that the price of this article changed in our Catalog. The old price when you originally added it to the basket was $ {{item.oldUnitPrice}} </div>
-            </div>
+        <div>
+            <table class="table">
+                <thead>
+                    <tr>
+                        <th scope="col">
+                            <section class="esh-basket-title col-xs-3">Product</section>
+                        </th>
+                        <th scope="col">
+                            <section class="esh-basket-title col-xs-3 hidden-lg-down"></section>
+                        </th>
+                        <th scope="col">
+                            <section class="esh-basket-title col-xs-2">Price</section>
+                        </th>
+                        <th scope="col">
+                            <section class="esh-basket-title col-xs-2">Quantity</section>
+                        </th>
+                        <th scope="col">
+                            <section class="esh-basket-title col-xs-2">Cost</section>
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr *ngFor="let item of basket?.items">
+                        <th scope="row">
+                            <section class="esh-basket-item esh-basket-item--middle col-lg-3 hidden-lg-down">
+                                <img class="esh-basket-image" src="{{item.pictureUrl}}" />
+                            </section>
+                        </th>
+                        <td>
+                            <section class="esh-basket-item esh-basket-item--middle col-xs-2">{{item.productName}}</section>
+                        </td>
+                        <td>
+                            <section class="esh-basket-item esh-basket-item--middle col-xs-2">$ {{item.unitPrice | number:'.2-2'}}</section>
+                        </td>
+                        <td>
+                            <section class="esh-basket-item esh-basket-item--middle col-xs-2">
+                                <input id="quantity" class="esh-basket-input" type="number" min="1" [(ngModel)]="item.quantity" (change)="itemQuantityChanged(item)" />
+                            </section>
+                        </td>
+                        <td>
+                            <section class="esh-basket-item esh-basket-item--middle esh-basket-item--mark col-xs-2">$ {{(item.unitPrice * item.quantity) | number:'.2-2'}}</section>
+                        </td>
+                        <div class="esh-basket-items-margin-left1 row">
+                            <div class="alert alert-warning" role="alert" *ngIf="item.oldUnitPrice > 0">&nbsp;Note that the price of this article changed in our Catalog. The old price when you originally added it to the basket was $ {{item.oldUnitPrice}} </div>
+                        </div>
+                    </tr>
+                    <tr>
+                        <th scope="row">
+                            <section class="esh-basket-item esh-basket-item--middle col-lg-3 hidden-lg-down"></section>
+                        </th>
+                        <td>
+                            <section class="esh-basket-item esh-basket-item--middle col-xs-2"></section>
+                        </td>
+                        <td>
+                            <section class="esh-basket-item esh-basket-item--middle col-xs-2"></section>
+                        </td>
+                        <td>
+                            <section class="esh-basket-item esh-basket-item--middle col-xs-2"></section>
+                        </td>
+                        <td>
+                            <section class="esh-basket-title col-xs-2">Total</section>
+                        </td>
+                    </tr>
+                    <tr>
+                        <th scope="row">
+                            <section class="esh-basket-item esh-basket-item--middle col-lg-3 hidden-lg-down"></section>
+                        </th>
+                        <td>
+                            <section class="esh-basket-item esh-basket-item--middle col-xs-2"></section>
+                        </td>
+                        <td>
+                            <section class="esh-basket-item esh-basket-item--middle col-xs-2"></section>
+                        </td>
+                        <td>
+                            <section class="esh-basket-item esh-basket-item--middle col-xs-2"></section>
+                        </td>
+                        <td>
+                            <section class="esh-basket-item esh-basket-item--mark col-xs-2">$ {{totalPrice | number:'.2-2'}}</section>
+                        </td>
+                    </tr>
+                    <tr>
+                        <th scope="row">
+                            <section class="esh-basket-item esh-basket-item--middle col-lg-3 hidden-lg-down"></section>
+                        </th>
+                        <td>
+                            <section class="esh-basket-item esh-basket-item--middle col-xs-2"></section>
+                        </td>
+                        <td>
+                            <section class="esh-basket-item col-xs-2">
+                                <button class="btn esh-basket-checkout" (click)="update($event)">[ Update ]</button>
+                            </section>
+                        </td>
+                        <td colspan="2">
+                            <section class="esh-basket-item col-xs-4">
+                                <button class="btn esh-basket-checkout" (click)="checkOut($event)">[ Checkout ]</button>
+                            </section>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
         </div>
     </div>
-
-    <div class="container">
-        <article class="esh-basket-titles esh-basket-titles--clean row">
-            <section class="esh-basket-title col-xs-9"></section>
-            <section class="esh-basket-title col-xs-2">Total</section>
-        </article>
-
-        <article class="esh-basket-items row">
-            <section class="esh-basket-item col-xs-9"></section>
-            <section class="esh-basket-item esh-basket-item--mark col-xs-2">$ {{totalPrice | number:'.2-2'}}</section>
-        </article>
-
-        <article class="esh-basket-items row">
-            <section class="esh-basket-item col-xs-7"></section>
-            <section class="esh-basket-item col-xs-2">
-                <button class="btn esh-basket-checkout" (click)="update($event)">[ Update ]</button>
-            </section>
-            <section class="esh-basket-item col-xs-3">
-                <div (click)="checkOut($event)" class="btn esh-basket-checkout">[ Checkout ]</div>
-            </section>
-        </article>
-    </div>
 </div>
\ No newline at end of file
diff --git a/src/Web/WebSPA/Client/modules/basket/basket.component.scss b/src/Web/WebSPA/Client/modules/basket/basket.component.scss
index ba1b246ab..8c014b521 100644
--- a/src/Web/WebSPA/Client/modules/basket/basket.component.scss
+++ b/src/Web/WebSPA/Client/modules/basket/basket.component.scss
@@ -8,15 +8,13 @@
     &-titles {
         padding-bottom: 1rem;
         padding-top: 2rem;
+        justify-content: space-between;
+        align-items: right;
         &--clean {
             padding-bottom: 0;
             padding-top: 0;
         }
     }
-    &-titles {
-        justify-content: space-between;
-        align-items: right;
-    }
     &-title {
         text-transform: uppercase;
         justify-content: space-between;
diff --git a/src/Web/WebSPA/Client/modules/orders/orders-detail/orders-detail.component.html b/src/Web/WebSPA/Client/modules/orders/orders-detail/orders-detail.component.html
index cb73ff0b2..c008e4e94 100644
--- a/src/Web/WebSPA/Client/modules/orders/orders-detail/orders-detail.component.html
+++ b/src/Web/WebSPA/Client/modules/orders/orders-detail/orders-detail.component.html
@@ -2,21 +2,43 @@
     <esh-header url="/orders">Back to list</esh-header>
 
     <div class="container">
-        <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>
-                <section class="esh-orders_detail-title col-xs-3">Total</section>
-                <section class="esh-orders_detail-title col-xs-3">Status</section>
-            </article>
 
-            <article class="esh-orders_detail-items row">
-                <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>
-        </section>
+        <div>
+            <table class="table">
+                <thead>
+                    <tr>
+                        <th scope="col">
+                            <section class="esh-orders_detail-title col-xs-3">Order number</section>
+                        </th>
+                        <th scope="col">
+                            <section class="esh-orders_detail-title col-xs-3">Date</section>
+                        </th>
+                        <th scope="col">
+                            <section class="esh-orders_detail-title col-xs-3">Total</section>
+                        </th>
+                        <th scope="col">
+                            <section class="esh-orders_detail-title col-xs-3">Status</section>
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <th scope="row">
+                            <section class="esh-orders_detail-item col-xs-3">{{order.ordernumber}}</section>
+                        </th>
+                        <td>
+                            <section class="esh-orders_detail-item col-xs-3">{{order.date | date:'short'}}</section>
+                        </td>
+                        <td>
+                            <section class="esh-orders_detail-item col-xs-3">$ {{order.total}}</section>
+                        </td>
+                        <td>
+                            <section class="esh-orders_detail-item col-xs-3">{{order.status}}</section>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
         <section class="esh-orders_detail-section">
             <article class="esh-orders_detail-titles row">
diff --git a/src/Web/WebSPA/Client/modules/orders/orders-new/orders-new.component.html b/src/Web/WebSPA/Client/modules/orders/orders-new/orders-new.component.html
index a3ffa8e4f..08d2522bc 100644
--- a/src/Web/WebSPA/Client/modules/orders/orders-new/orders-new.component.html
+++ b/src/Web/WebSPA/Client/modules/orders/orders-new/orders-new.component.html
@@ -80,36 +80,82 @@
                 <section class="esh-orders_new-title col-xs-12">Order details</section>
             </article>
 
-            <article class="esh-orders_new-items esh-orders_new-items--border row" *ngFor="let item of order.orderItems">
-                <section class="esh-orders_new-item col-md-4 hidden-md-down">
-                    <img class="esh-orders_new-image" src="{{item.pictureurl}}">
-                </section>
-                <section class="esh-orders_new-item esh-orders_new-item--middle col-xs-4">{{item.productname}}</section>
-                <section class="esh-orders_new-item esh-orders_new-item--middle col-xs-1">$ {{item.unitprice | number:'.2-2'}}</section>
-                <section class="esh-orders_new-item esh-orders_new-item--middle col-xs-1">{{item.units}}</section>
-                <section class="esh-orders_new-item esh-orders_new-item--middle col-xs-2">$ {{(item.units * item.unitprice) | number:'.2-2'}}</section>
-            </article>
-        </section>
-
-        <section class="esh-orders_new-section esh-orders_new-section--right">
-            <article class="esh-orders_new-titles row">
-                <section class="esh-orders_new-title col-xs-9"></section>
-                <section class="esh-orders_new-title col-xs-2">Total</section>
-            </article>
-
-            <article class="esh-orders_new-items row">
-                <section class="esh-orders_new-item col-xs-9"></section>
-                <section class="esh-orders_new-item esh-orders_new-item--mark col-xs-2">$ {{order.total | number:'.2-2'}}</section>
-            </article>
-        </section>
-        <section class="esh-orders_new-section">
-            <div class="form-group">
-                <div class="col-md-9">
-                </div>
-                <div class="col-md-2">
-                    <button type="submit" class="btn esh-orders_new-placeOrder" [disabled]="!newOrderForm.valid || isOrderProcessing">[ Place Order ]</button>
-                </div>
-            </div>
+            <table>
+                <tbody>
+                    <tr *ngFor="let item of order.orderItems">
+                        <th scope="row">
+                            <section class="esh-orders_new-item col-md-4 hidden-md-down">
+                                <img class="esh-orders_new-image" src="{{item.pictureurl}}">
+                            </section>
+                        </th>
+                        <td>
+                            <section class="esh-orders_new-item esh-orders_new-item--middle col-xs-3">{{item.productname}}</section>
+                        </td>
+                        <td>
+                            <section class="esh-orders_new-item esh-orders_new-item--middle col-xs-2">$ {{item.unitprice | number:'.2-2'}}</section>
+                        </td>
+                        <td>
+                            <section class="esh-orders_new-item esh-orders_new-item--middle col-xs-1">{{item.units}}</section>
+                        </td>
+                        <td>
+                            <section class="esh-orders_new-item esh-orders_new-item--middle col-xs-2">$ {{(item.units * item.unitprice) | number:'.2-2'}}</section>
+                        </td>
+                    </tr>
+                    <tr>
+                        <th scope="row">
+                            <section class="esh-orders_new-item col-md-4 hidden-md-down"></section>
+                        </th>
+                        <td>
+                            <section class="esh-orders_new-item esh-orders_new-item--middle col-xs-3"></section>
+                        </td>
+                        <td>
+                            <section class="esh-orders_new-item esh-orders_new-item--middle col-xs-2"></section>
+                        </td>
+                        <td>
+                            <section class="esh-orders_new-item esh-orders_new-item--middle col-xs-1"></section>
+                        </td>
+                        <td>
+                            <section class="esh-orders_new-title col-xs-2">Total</section>
+                        </td>
+                    </tr>
+                    <tr>
+                        <th scope="row">
+                            <section class="esh-orders_new-item col-md-4 hidden-md-down"></section>
+                        </th>
+                        <td>
+                            <section class="esh-orders_new-item esh-orders_new-item--middle col-xs-3"></section>
+                        </td>
+                        <td>
+                            <section class="esh-orders_new-item esh-orders_new-item--middle col-xs-2"></section>
+                        </td>
+                        <td>
+                            <section class="esh-orders_new-item esh-orders_new-item--middle col-xs-1"></section>
+                        </td>
+                        <td>
+                            <section class="esh-orders_new-item esh-orders_new-item--mark col-xs-2">$ {{order.total | number:'.2-2'}}</section>
+                        </td>
+                    </tr>
+                    <tr>
+                        <th scope="row">
+                            <section class="esh-orders_new-item col-md-4 hidden-md-down"></section>
+                        </th>
+                        <td>
+                            <section class="esh-orders_new-item esh-orders_new-item--middle col-xs-2"></section>
+                        </td>
+                        <td colspan="2">
+                            <section class="esh-orders_new-section">
+                                <div class="form-group">
+                                    <div class="col-md-9">
+                                    </div>
+                                    <div class="col-md-2">
+                                        <button type="submit" class="btn esh-orders_new-placeOrder" [disabled]="!newOrderForm.valid || isOrderProcessing">[ Place Order ]</button>
+                                    </div>
+                                </div>
+                            </section>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
         </section>
     </form>
 </div>
\ No newline at end of file
diff --git a/src/Web/WebSPA/Client/modules/orders/orders.component.html b/src/Web/WebSPA/Client/modules/orders/orders.component.html
index ac68d1dce..15fb4ab2c 100644
--- a/src/Web/WebSPA/Client/modules/orders/orders.component.html
+++ b/src/Web/WebSPA/Client/modules/orders/orders.component.html
@@ -5,22 +5,50 @@
         <div class="alert alert-warning esh-orders-alert" role="alert" [hidden]="!errorReceived">
             Error requesting order list, please try later on
         </div>
-        <article class="esh-orders-titles row">
-            <section class="esh-orders-title col-xs-2">Order number</section>
-            <section class="esh-orders-title col-xs-4">Date</section>
-            <section class="esh-orders-title col-xs-2">Total</section>
-            <section class="esh-orders-title col-xs-2">Status</section>
-            <section class="esh-orders-title col-xs-2"></section>
-        </article>
 
-        <article class="esh-orders-items row" *ngFor="let order of orders">
-            <section class="esh-orders-item col-xs-2">{{order.ordernumber}}</section>
-            <section class="esh-orders-item col-xs-4">{{order.date | date:'short'}}</section>
-            <section class="esh-orders-item col-xs-2">$ {{order.total}}</section>
-            <section class="esh-orders-item col-xs-2">{{order.status}}</section>
-            <section class="esh-orders-item col-xs-2">
-                <a class="esh-orders-link" routerLink="/orders/{{order.ordernumber}}">Detail</a>
-            </section>
-        </article>
+        <div>
+            <table class="table">
+                <thead>
+                    <tr>
+                        <th scope="col">
+                            <section class="esh-orders-title col-xs-2">Order number</section>
+                        </th>
+                        <th scope="col">
+                            <section class="esh-orders-title col-xs-4">Date</section>
+                        </th>
+                        <th scope="col">
+                            <section class="esh-orders-title col-xs-2">Total</section>
+                        </th>
+                        <th scope="col">
+                            <section class="esh-orders-title col-xs-2">Status</section>
+                        </th>
+                        <th scope="col">
+                            <section class="esh-orders-title col-xs-2"></section>
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr *ngFor="let order of orders">
+                        <th scope="row">
+                            <section class="esh-orders-item col-xs-2">{{order.ordernumber}}</section>
+                        </th>
+                        <td>
+                            <section class="esh-orders-item col-xs-4">{{order.date | date:'short'}}</section>
+                        </td>
+                        <td>
+                            <section class="esh-orders-item col-xs-2">$ {{order.total}}</section>
+                        </td>
+                        <td>
+                            <section class="esh-orders-item col-xs-2">{{order.status}}</section>
+                        </td>
+                        <td>
+                            <section class="esh-orders-item col-xs-2">
+                                <a class="esh-orders-link" routerLink="/orders/{{order.ordernumber}}">Detail</a>
+                            </section>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
     </div>
 </div>
\ No newline at end of file