diff --git a/src/Web/WebSPA/Client/modules/basket/basket.component.html b/src/Web/WebSPA/Client/modules/basket/basket.component.html
index 7df93fd98..98bc0a613 100644
--- a/src/Web/WebSPA/Client/modules/basket/basket.component.html
+++ b/src/Web/WebSPA/Client/modules/basket/basket.component.html
@@ -21,8 +21,8 @@
 
                 <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-3">{{item.productName}}</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)" />
diff --git a/src/Web/WebSPA/Client/modules/basket/basket.component.scss b/src/Web/WebSPA/Client/modules/basket/basket.component.scss
index 327af1e9a..ba1b246ab 100644
--- a/src/Web/WebSPA/Client/modules/basket/basket.component.scss
+++ b/src/Web/WebSPA/Client/modules/basket/basket.component.scss
@@ -13,10 +13,18 @@
             padding-top: 0;
         }
     }
+    &-titles {
+        justify-content: space-between;
+        align-items: right;
+    }
     &-title {
         text-transform: uppercase;
+        justify-content: space-between;
+        align-items: right;
     }
     &-items {
+        justify-content: space-between;
+        align-items: right;
         &--border {
             border-bottom: $border-light solid $color-foreground-bright;
             padding: .5rem 0;