diff --git a/front/core/components/td-editable/index.html b/front/core/components/td-editable/index.html
index 14336126d..8a1e33fe8 100644
--- a/front/core/components/td-editable/index.html
+++ b/front/core/components/td-editable/index.html
@@ -1,4 +1,2 @@
-<vn-horizontal class="text-container">
-        <span class="text" ng-transclude="text" vn-one></span>
-</vn-horizontal>
 <div class="field"></div>
+<span class="text" ng-transclude="text"></span>
\ No newline at end of file
diff --git a/front/core/components/td-editable/index.js b/front/core/components/td-editable/index.js
index 49a4c3dcd..a6be8b9b8 100644
--- a/front/core/components/td-editable/index.js
+++ b/front/core/components/td-editable/index.js
@@ -1,38 +1,58 @@
 import ngModule from '../../module';
 import Component from '../../lib/component';
+import {focus} from '../../directives/focus';
 import './style.scss';
 
 export default class Controller extends Component {
-    constructor($element, $scope, $transclude) {
+    constructor($element, $scope, $transclude, $timeout) {
         super($element, $scope);
+        this.$timeout = $timeout;
         let element = $element[0];
         element.tabIndex = 0;
 
         element.addEventListener('focus', () => {
+            if (this.field) return;
             $transclude((tClone, tScope) => {
                 this.field = tClone;
                 this.tScope = tScope;
                 this.element.querySelector('.field').appendChild(this.field[0]);
+                element.tabIndex = -1;
+                this.timer = $timeout(() => {
+                    this.timer = null;
+                    focus(this.field[0]);
+                });
             }, null, 'field');
             element.classList.add('selected');
         });
 
         element.addEventListener('focusout', event => {
+            this.destroyTimer();
             this.lastEvent = event;
             let target = event.relatedTarget;
-            while (target && target.parentNode != element)
+            while (target && target != element)
                 target = target.parentNode;
 
             if (!target) {
                 this.tScope.$destroy();
                 this.field.remove();
+                this.field = null;
                 element.classList.remove('selected');
+                element.tabIndex = 0;
             }
         });
     }
-}
+    destroyTimer() {
+        if (this.timer) {
+            this.$timeout.cancel(this.timer);
+            this.timer = null;
+        }
+    }
 
-Controller.$inject = ['$element', '$scope', '$transclude'];
+    $onDestroy() {
+        this.destroyTimer();
+    }
+}
+Controller.$inject = ['$element', '$scope', '$transclude', '$timeout'];
 
 ngModule.component('vnTdEditable', {
     template: require('./index.html'),
diff --git a/front/core/components/td-editable/style.scss b/front/core/components/td-editable/style.scss
index 563590b3d..5101fecf6 100644
--- a/front/core/components/td-editable/style.scss
+++ b/front/core/components/td-editable/style.scss
@@ -1,16 +1,40 @@
+@import "variables";
+
 vn-td-editable {
     cursor: pointer;
-    & > div.text-container{
-        width: 100%;
-    }
+    outline: none;
+    position: relative;
 
-    &.selected {
-        & > .text-container{
-            display: none;
+    &.selected > .text {
+        visibility: hidden;
+    }
+    & > .field {
+        display: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        align-items: center;
+        padding: .6em;
+        overflow: visible;
+
+        & > field {
+            flex: 1;
+            background-color: $color-bg-panel;
+            padding: .5em;
+            box-shadow: 0 0 .4em rgba(0, 0, 0, .2);
+            border-radius: .1em;
+            min-width: 6em;
+    
+            & > * {
+                width: 100%;
+                max-width: initial;
+            }
         }
     }
-
-    vn-icon {
-        font-size: 1em;
+    &.selected > .field {
+        display: flex;
     }
 }
\ No newline at end of file
diff --git a/front/core/directives/focus.js b/front/core/directives/focus.js
index 26376a260..91fcffbb2 100644
--- a/front/core/directives/focus.js
+++ b/front/core/directives/focus.js
@@ -1,5 +1,22 @@
 import ngModule from '../module';
 
+export function focus(input) {
+    let selector = 'input, textarea, button, submit';
+
+    if (!input.matches(selector))
+        input = input.querySelector(selector);
+
+    if (!input) {
+        console.warn(`vnFocus: Can't find a focusable element`);
+        return;
+    }
+
+    input.focus();
+
+    if (input.select)
+        input.select();
+}
+
 /**
  * Sets the focus and selects the text on the input.
  *
@@ -8,24 +25,8 @@ import ngModule from '../module';
 export function directive() {
     return {
         restrict: 'A',
-        link: function($scope, $element, $attrs) {
-            $scope.$watch('', function() {
-                let input = $element[0];
-                let selector = 'input, textarea, button, submit';
-
-                if (!input.matches(selector))
-                    input = input.querySelector(selector);
-
-                if (!input) {
-                    console.warn(`vnFocus: Can't find a focusable element`);
-                    return;
-                }
-
-                input.focus();
-
-                if (input.select)
-                    input.select();
-            });
+        link: function($scope, $element) {
+            $scope.$watch('', () => focus($element[0]));
         }
     };
 }
diff --git a/front/salix/styles/border.scss b/front/salix/styles/border.scss
index 142dc6c3e..ba97afb73 100644
--- a/front/salix/styles/border.scss
+++ b/front/salix/styles/border.scss
@@ -1,43 +1,19 @@
 @import "./variables";
 
-html [border-none], .border-none {
-    border: 0;
-}
-
-/* Solid border */
-
 html [border-solid], .border-solid {
-    border: $border-thin solid $border-color;
+    border: $border-thin-light;
 }
 html [border-solid-top], .border-solid-top {
-    border-top: $border-thin solid $border-color;
+    border-top: $border-thin-light;
 }
 html [border-solid-left], .border-solid-left {
-    border-left: $border-thin solid $border-color;
+    border-left: $border-thin-light;
 }
 html [border-solid-right], .border-solid-right {
-    border-right: $border-thin solid $border-color;
+    border-right: $border-thin-light;
 }
 html [border-solid-bottom], .border-solid-bottom {
-    border-bottom: $border-thin solid $border-color;
-}
-
-/* Dashed border */
-
-html [border-dashed], .border-dashed {
-    border: $border-thin dashed $border-color;
-}
-html [border-dashed-top], .border-dashed-top {
-    border-top: $border-thin dashed $border-color;
-}
-html [border-dashed-left], .border-dashed-left {
-    border-left: $border-thin dashed $border-color;
-}
-html [border-dashed-right], .border-dashed-right {
-    border-right: $border-thin dashed $border-color;
-}
-html [border-dashed-bottom], .border-dashed-bottom {
-    border-bottom: $border-thin dashed $border-color;
+    border-bottom: $border-thin-light;
 }
 
 /* Border Radius */
diff --git a/front/salix/styles/index.js b/front/salix/styles/index.js
index 49c60a40a..806021463 100644
--- a/front/salix/styles/index.js
+++ b/front/salix/styles/index.js
@@ -12,4 +12,5 @@ import './effects.scss';
 import './order-product.scss';
 import './summary.scss';
 import './descriptor.scss';
+import './list.scss';
 import './modal-form.scss';
diff --git a/front/salix/styles/list.scss b/front/salix/styles/list.scss
new file mode 100644
index 000000000..c483feca1
--- /dev/null
+++ b/front/salix/styles/list.scss
@@ -0,0 +1,46 @@
+@import "./effects";
+
+.vn-list {
+    max-width: 36em;
+    margin: 0 auto;
+
+    a.vn-list-item {
+        @extend %clickable;
+    }
+    .vn-list-item {
+        border-bottom: $border-thin-light;
+        display: block;
+        text-decoration: none;
+        color: inherit;
+    
+        & > vn-horizontal {
+            padding: $pad-medium;
+    
+            & > vn-one {
+                overflow: hidden;
+            }
+            & > .buttons {
+                align-items: center;
+    
+                vn-icon-button {
+                    opacity: .4;
+                    color: $color-main;
+                    margin-left: .5em;
+                    transition: opacity 250ms ease-out;
+                    padding: 0;
+                    font-size: 2em;
+    
+                    &:hover {
+                        opacity: 1;
+                    }
+                }
+            }
+        }
+    }
+    vn-empty-rows {
+        display: block;
+        text-align: center;
+        padding: 1.5em;
+        box-sizing: border-box;
+    }
+}
\ No newline at end of file
diff --git a/front/salix/styles/misc.scss b/front/salix/styles/misc.scss
index d06269c86..c73cd6959 100644
--- a/front/salix/styles/misc.scss
+++ b/front/salix/styles/misc.scss
@@ -5,7 +5,6 @@ html, body {
     margin: 0;
     padding: 0;
 }
-
 a:focus,
 input:focus,
 button:focus {
@@ -23,8 +22,7 @@ input[type=reset]::-moz-focus-inner {
     -ms-user-select: none;
     user-select: none;
 }
-
-a, .link{
+a, .link {
     color: $color-font-link;
     text-decoration: none;
 }
@@ -35,23 +33,20 @@ a, .link{
         text-decoration: underline;
     }
 }
-
 .totalBox {
     border: 1px solid #CCC;
-    text-align: right!important;
+    text-align: right !important;
     justify-content: center;
     align-items: center;
     padding: 18px;
     margin-bottom: 10px;
 }
-
 .form {
     height: 100%;
     box-sizing: border-box;
     padding: $pad-large;
     max-width: 1000px;
 }
-
 html [fixed-bottom-right] {
     position: fixed;
     bottom: 2em;
@@ -60,87 +55,53 @@ html [fixed-bottom-right] {
 html [text-center], .text-center {
     text-align: center;
 }
-html [text-right], .text-right{
+html [text-right], .text-right {
     text-align: right;
 }
-html [text-left], .text-left{
+html [text-left], .text-left {
     text-align: left;
 }
-html [vn-right], .vn-right{
+html [vn-right], .vn-right {
      float: right;
 }
-html [vn-left], .vn-left{
+html [vn-left], .vn-left {
      float: left;
 }
-html [vn-center], .vn-center{
+html [vn-center], .vn-center {
      justify-content: center;
 }
-
-.list > vn-none{
+.list > vn-none {
     min-width: 60px;
 }
-
-.list-element{
+.list-element {
     padding: 8px 0 0 0;
     border-bottom: 1px solid $color-spacer;
+
     i {
         color: $color-main;
     }
 }
-.tooltip {
-    .list-header{
-        border-bottom: 3px solid $color-spacer;
-        font-family: vn-font-bold;
-        text-align: center
-    }
-    .list-element{
-        white-space: nowrap;
-    }
-}
-.list-footer{
-    font-family: vn-font-bold;
-    border-top: 3px solid $color-spacer;
-}
-.list-element.warning{
-    background-color: $color-main-medium;
-}
-.list-element.success{
-    background-color: $color-success-medium;
-    
-}
-.list-element.success:hover{
-    background-color: $color-success-light;
-}
-.list-element.warning:hover{
-    background-color: $color-main-light;
-}
 .flatpickr-month, .flatpickr-weekdays, span.flatpickr-weekday {
     background-color: $color-main;
 }
-
 html [pointer], .pointer{
     cursor: pointer;
 }
-
 html [noDrop], .noDrop{
     cursor: no-drop;
 }
-
 html [compact], .compact{
-    max-width: 950px;
+    max-width: $width-compact;
     margin-left: auto;
     margin-right: auto;
 }
-
 button {
     @extend %clickable;
 }
-
 vn-button-bar {
     display: block;
     margin-top: $margin-small;
 }
-
 vn-tool-bar {
     display: flex;
 
@@ -149,51 +110,6 @@ vn-tool-bar {
     }
 }
 
-.vn-list {
-    max-width: 36em;
-    margin: 0 auto;
-
-    a.vn-list-item {
-        @extend %clickable;
-    }
-    .vn-list-item {
-        border-bottom: $border-thin solid $color-spacer;
-        display: block;
-        text-decoration: none;
-        color: inherit;
-    
-        & > vn-horizontal {
-            padding: $pad-medium;
-    
-            & > vn-one {
-                overflow: hidden;
-            }
-            & > .buttons {
-                align-items: center;
-    
-                vn-icon-button {
-                    opacity: .4;
-                    color: $color-main;
-                    margin-left: .5em;
-                    transition: opacity 250ms ease-out;
-                    padding: 0;
-                    font-size: 2em;
-    
-                    &:hover {
-                        opacity: 1;
-                    }
-                }
-            }
-        }
-    }
-    vn-empty-rows {
-        display: block;
-        text-align: center;
-        padding: 1.5em;
-        box-sizing: border-box;
-    }
-}
-
 /** START - FORM ELEMENTS DISABLED **/
 
 fieldset[disabled] .mdl-textfield .mdl-textfield__input,
@@ -215,7 +131,6 @@ fieldset[disabled] .mdl-textfield .mdl-textfield__label,
     white-space: nowrap;
     overflow: hidden;
 }
-
 .counter {
     @extend %active;
 
@@ -223,7 +138,6 @@ fieldset[disabled] .mdl-textfield .mdl-textfield__label,
         font-size: 0.7em
     }
 }
-
 .vn-grid {
     border-collapse: collapse;
     width: 100%;
diff --git a/front/salix/styles/order-product.scss b/front/salix/styles/order-product.scss
index 255d4f610..aaa070ed8 100644
--- a/front/salix/styles/order-product.scss
+++ b/front/salix/styles/order-product.scss
@@ -1,100 +1,90 @@
 @import "./variables";
 
-@media screen and (max-width: 1920px){
-    .catalog-list .product {
-        width: 25%;
-    }
-}
-
-@media screen and (max-width: 1800px){
-    .catalog-list .product {
-        width: 33.33%
-    }
-}
-
-@media screen and (max-width: 1600px){
-    .catalog-list .product {
-        width: 50%
-    }
-}
-
-@media screen and (max-width: 1280px){
-    .catalog-list .product {
-        width: 100%
-    }
-}
-
 .catalog-list {
-    justify-content: flex-start;
     align-items: flex-start;
     flex-wrap: wrap;
+    justify-content: center;
 
-    .product {
+    & > .product {
         box-sizing: border-box;
-        padding: 4px;
+        padding: $pad-small;
+        width: 26em;
+        overflow: hidden;
 
-        & > vn-one {
-            border: 1px solid rgba($color-spacer, 0.5);
-            display: block
-        }
+        & > vn-card > div {
+            display: flex;
+            height: 11em;
 
-        .image {
-            min-width: 10em;
-            max-width: 10em;
-            min-height: 10em;
-            max-height: 10em;
+            .image {
+                width: 11em;
+                height: 11em;
 
-            img {
-                width: 100%;
-                height: 100%
-            }
-        }
-
-        .description {
-            box-sizing: border-box;
-
-            & > vn-vertical {
-                height: 100%;
-
-                & > h2 {
-                    text-transform: uppercase;
-                    font-family: vn-font;
-                    margin: 0 0 0.5em 0;
-                    font-weight: 100;
-                    line-height: 1em;
-                    font-size: 0.9em;
+                img {
+                    width: 100%;
+                    height: 100%
                 }
+            }
+            .description {
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+                box-sizing: border-box;
+                height: 100%;
+                width: 100%;
+                overflow: hidden;
+                padding: .8em;
 
-                & > span {
+                & > h3 {
+                    font-family: vn-font;
+                    margin: 0;
+                    margin-bottom: .3em;
+                    font-weight: normal;
+                    line-height: initial;
+                    font-size: 1.2em;
+                    max-height:2.4em;
+                    overflow: hidden;
+                }
+                & > h4 {
                     color: $color-font-secondary;
                     text-transform: uppercase;
-                    margin-bottom: 0.5em;
-                    font-weight: bold;
-                    font-size: 0.8em
+                    margin-bottom: .3em;
+                    line-height: initial;
+                    font-size: 1em;
+                    flex: 1;
                 }
-    
-                & > vn-label-value {
-                    font-size: 0.8em
+                & > .tags {
+                    padding-bottom: .2em;
+                    height: 3em;
+
+                    & > vn-label-value {
+                        font-size: .8em
+                    }
+                }  
+            }
+            .footer {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                font-size: .8em;
+
+                & > .price {
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+
+                    & > span {
+                        flex: 1;
+
+                        &:first-child,
+                        &:last-child {
+                            font-size: 1.4em
+                        }
+                    }
+                } 
+                & > vn-icon-button {
+                    padding: 0;
                 }
             }
         }
-
-        .price {
-            align-items: center;
-            margin-top: auto;
-            font-size: 0.8em;
-
-            & > vn-one span:first-child {
-                color: $color-font-secondary
-            }
-
-            & > vn-one span:first-child, & > vn-one span:last-child {
-                font-size: 1.2em
-            }
-
-            vn-icon[icon="add_circle"] {
-                color: $color-main
-            }
-        }
     }
 }
diff --git a/front/salix/styles/variables.scss b/front/salix/styles/variables.scss
index 36a1a14db..ea496f4f4 100644
--- a/front/salix/styles/variables.scss
+++ b/front/salix/styles/variables.scss
@@ -3,6 +3,12 @@ $menu-width: 16em;
 $topbar-height: 4em;
 $mobile-width: 800px;
 
+// Width
+
+$width-small: 36em;
+$width-compact: 60em;
+$width-large: 80em;
+
 // Padding
 
 $pad-none: 0;
@@ -17,12 +23,6 @@ $margin-small: 8px;
 $margin-medium: 16px;
 $margin-large: 32px;
 
-// Border
-
-$border-color: #AAA;
-$border-thin: .1em;
-$border-thick: .15em;
-
 // Light theme
 
 $color-header: #3d3d3d;
@@ -96,4 +96,9 @@ $color-notice-medium: darken($color-notice, 20%);
 $color-notice-light: darken($color-notice, 35%);
 $color-alert-medium: darken($color-alert, 20%);
 $color-alert-light: darken($color-alert, 35%);
-/**/
\ No newline at end of file
+/**/
+
+// Border
+
+$border-thin: .1em solid $color-spacer;
+$border-thin-light: .1em solid $color-spacer-light;
diff --git a/modules/item/front/descriptor/index.html b/modules/item/front/descriptor/index.html
index a0d6404f5..d0c89e9e1 100644
--- a/modules/item/front/descriptor/index.html
+++ b/modules/item/front/descriptor/index.html
@@ -95,7 +95,7 @@
                 <span translate>Regularize stock</span>
             </h5>
             <vn-textfield
-                label="Quantity"
+                label="Type the visible quantity"
                 model="$ctrl.quantity"
                 name="user"
                 vn-id="userField"
diff --git a/modules/item/front/descriptor/locale/es.yml b/modules/item/front/descriptor/locale/es.yml
index 22852f6a4..ad4d3c35e 100644
--- a/modules/item/front/descriptor/locale/es.yml
+++ b/modules/item/front/descriptor/locale/es.yml
@@ -1 +1,2 @@
-Regularize stock: Regularizar stock
\ No newline at end of file
+Regularize stock: Regularizar stock
+Type the visible quantity: Introduce la cantidad visible
\ No newline at end of file
diff --git a/modules/order/front/catalog/index.html b/modules/order/front/catalog/index.html
index d088238df..2ad3af2f6 100644
--- a/modules/order/front/catalog/index.html
+++ b/modules/order/front/catalog/index.html
@@ -4,98 +4,95 @@
     filter="$ctrl.filter"
     limit="50"
     data="items"
-    on-data-change="$ctrl.onDataChange()" >
+    on-data-change="$ctrl.onDataChange()">
 </vn-crud-model>
 <div class="main-with-right-menu">
     <vn-card>
         <vn-horizontal class="catalog-header" pad-medium-h>
-            <vn-one ng-if="model.moreRows">
-                <span translate>More than</span> {{model.limit}} <span translate>results</span>
-            </vn-one>
             <vn-one>
-                <vn-horizontal>
-                    <vn-autocomplete vn-id="field" vn-one
-                        data="$ctrl.fieldList"
-                        initial-data="$ctrl.field"
-                        field="$ctrl.field"
-                        translate-fields="['name']"
-                        order="name"
-                        show-field="name"
-                        value-field="field"
-                        label="Order by">
-                    </vn-autocomplete>
-                    <vn-autocomplete vn-one
-                        data="$ctrl.wayList"
-                        initial-data="$ctrl.way"
-                        field="$ctrl.way"
-                        translate-fields="['name']"
-                        show-field="name"
-                        value-field="way"
-                        label="Order">
-                    </vn-autocomplete>
-                </vn-horizontal>
-            </vn-one>
-        </vn-horizontal>
-        <vn-horizontal class="catalog-list" pad-small>
-            <section class="product" ng-repeat="item in items">
-                <vn-one>
-                    <vn-horizontal>
-                        <vn-one class="image">
-                            <img
-                                ng-src="//verdnatura.es/vn-image-data/catalog/200x200/{{::item.image}}" 
-                                zoom-image="//verdnatura.es/vn-image-data/catalog/1600x900/{{::item.image}}"
-                                on-error-src/>
-                        </vn-one>
-                        <vn-one pad-small class="description ellipsize">
-                            <vn-vertical>
-                                <h2 class="ellipsize" vn-tooltip="{{::item.name}}">
-                                    {{::item.name}}
-                                </h2>
-                                <span class="ellipsize" vn-tooltip="{{::item.subName}}">
-                                    {{::item.subName}}
-                                </span>
-                
-                                <vn-label-value 
-                                    label="{{::item.tag5}}"
-                                    value="{{::item.value5}}">
-                                </vn-label-value>
-                                <vn-label-value 
-                                    label="{{::item.tag6}}"
-                                    value="{{::item.value6}}">
-                                </vn-label-value>
-                                <vn-label-value 
-                                    label="{{::item.tag7}}"
-                                    value="{{::item.value7}}">
-                                </vn-label-value>
-                                <vn-label-value 
-                                    label="{{::item.tag8}}"
-                                    value="{{::item.value8}}">
-                                </vn-label-value>
-                
-                                <vn-horizontal class="price">
-                                    <vn-one>
-                                        <span>{{::item.available}}</span> 
-                                        <span translate>from</span>
-                                        <span>{{::item.price | currency: 'EUR': 2}}</span>
-                                    </vn-one>
-                                    <vn-auto>
-                                        <a href="" vn-tooltip="Add">
-                                            <vn-icon-button icon="add_circle" ng-click="$ctrl.preview($event, item)"></vn-icon-button>
-                                        </a>
-                                    </vn-auto>
-                                </vn-horizontal>
-                            </vn-vertical>
-                        </vn-one>
-                    </vn-horizontal>
-                </vn-one>
-            </section>
-        </vn-horizontal>
-        <vn-horizontal ng-if="!model.data || model.data.length == 0">
-            <vn-one pad-small translate style="text-align: center">
-                No results
+                <div> <!-- ng-if="model.moreRows" -->
+                    <span translate>More than</span> {{model.limit}} <span translate>results</span>
+                </div>
             </vn-one>
+            <vn-auto>
+                <vn-autocomplete vn-id="field" vn-one
+                    data="$ctrl.fieldList"
+                    initial-data="$ctrl.field"
+                    field="$ctrl.field"
+                    translate-fields="['name']"
+                    order="name"
+                    show-field="name"
+                    value-field="field"
+                    label="Order by">
+                </vn-autocomplete>
+                <vn-autocomplete vn-one
+                    data="$ctrl.wayList"
+                    initial-data="$ctrl.way"
+                    field="$ctrl.way"
+                    translate-fields="['name']"
+                    show-field="name"
+                    value-field="way"
+                    label="Order">
+                </vn-autocomplete>
+            </vn-auto>
         </vn-horizontal>
     </vn-card>
+    <vn-card
+        ng-if="!model.data || model.data.length == 0"
+        style="text-align: center"
+        margin-medium-top
+        pad-medium>
+        <span translate>No results</span>
+    </vn-card>
+    <vn-horizontal class="catalog-list">
+        <section class="product" ng-repeat="item in items">
+        <vn-card>
+            <div class="image">
+                <img
+                    ng-src="//verdnatura.es/vn-image-data/catalog/200x200/{{::item.image}}" 
+                    zoom-image="//verdnatura.es/vn-image-data/catalog/1600x900/{{::item.image}}"
+                    on-error-src/>
+            </div>
+            <div class="description">
+                <h3>
+                    {{::item.name}}
+                </h3>
+                <h4 class="ellipsize">
+                    <span translate-attr="::{title: item.subName}">{{::item.subName}}</span>
+                </h4>
+                <div class="tags">
+                    <vn-label-value
+                        ng-if="::item.value5"
+                        label="{{::item.tag5}}"
+                        value="{{::item.value5}}">
+                    </vn-label-value>
+                    <vn-label-value
+                        ng-if="::item.value6"
+                        label="{{::item.tag6}}"
+                        value="{{::item.value6}}">
+                    </vn-label-value>
+                    <vn-label-value
+                        ng-if="::item.value7"
+                        label="{{::item.tag7}}"
+                        value="{{::item.value7}}">
+                    </vn-label-value>
+                </div>
+                <div class="footer">
+                    <div class="price">
+                        <span>{{::item.available}}</span> 
+                        <span translate>from</span>
+                        <span>{{::item.price | currency:'EUR':2}}</span>
+                    </div>
+                    <vn-icon-button
+                        icon="add_circle"
+                        ng-click="$ctrl.preview($event, item)"
+                        vn-tooltip="Add">
+                    </vn-icon-button>
+                </div>
+            </div>
+        </vn-card>
+        </section>
+    </vn-horizontal>
     <vn-pagination margin-small-v model="model"></vn-pagination>
 </div>
 <vn-side-menu side="right">
diff --git a/modules/order/front/catalog/style.scss b/modules/order/front/catalog/style.scss
index e22e182bc..8061cabc4 100644
--- a/modules/order/front/catalog/style.scss
+++ b/modules/order/front/catalog/style.scss
@@ -1,16 +1,31 @@
 @import "variables";
 
-vn-order-catalog .catalog-header {
-    border-color: $color-spacer;
-    border-bottom: 1px solid rgba($color-spacer, 0.5);
+vn-order-catalog {
+    .catalog-header {
+        border-bottom: $border-thin;
+        padding: $pad-medium;
+        align-items: center;
 
-    vn-one:first-child {
-        padding-top: 2em;
+        & > vn-one {
+            display: flex;
+            flex: 1;
+
+            span {
+                color: $color-font-secondary
+            }
+        }
+        & > vn-auto {
+            width: 28em;
+            display: flex;
+            overflow: hidden;
+
+            & > * {
+                padding-left: $pad-medium;
+            }
+        }
     }
-    vn-one:nth-child(2) {
-        padding-top: 0.5em;
+    .catalog-list {
+        padding-top: $pad-small;
     }
-    span {
-        color: $color-font-secondary
-    }
-}
\ No newline at end of file
+}
+
diff --git a/modules/order/front/filter/style.scss b/modules/order/front/filter/style.scss
index fb561f78c..07a7b1dbd 100644
--- a/modules/order/front/filter/style.scss
+++ b/modules/order/front/filter/style.scss
@@ -6,7 +6,7 @@ vn-catalog-filter > div {
         padding-left: $pad-medium;
         padding-right: $pad-medium;
         border-color: $color-spacer;
-        border-bottom: 1px solid rgba($color-spacer, 0.5);
+        border-bottom: $border-thin;
     }
     .item-category {
         padding: $pad-small;
diff --git a/modules/order/front/line/style.scss b/modules/order/front/line/style.scss
index 6f06532e0..ceef14fa1 100644
--- a/modules/order/front/line/style.scss
+++ b/modules/order/front/line/style.scss
@@ -1,4 +1,6 @@
-vn-order-line{
+@import "./variables";
+
+vn-order-line {
     vn-table {
         img {
             border-radius: 50%;
@@ -8,7 +10,7 @@ vn-order-line{
     }
     .taxes {
         max-width: 10em;
-        border: .1em solid #CCC;
+        border: $border-thin-light;
         text-align: right;
         padding: .5em !important;
 
diff --git a/modules/order/front/summary/style.scss b/modules/order/front/summary/style.scss
index 283214a2d..0a3e6df83 100644
--- a/modules/order/front/summary/style.scss
+++ b/modules/order/front/summary/style.scss
@@ -1,8 +1,10 @@
+@import "./variables";
+
 vn-order-summary .summary > div > vn-horizontal > vn-one {
     min-width: 10em !important;
 
     &.taxes {
-        border: .1em solid #CCC;
+        border: $border-thin-light;
         text-align: right;
         padding: .5em !important;
 
diff --git a/modules/order/front/volume/style.scss b/modules/order/front/volume/style.scss
index 2900023a1..baeabf383 100644
--- a/modules/order/front/volume/style.scss
+++ b/modules/order/front/volume/style.scss
@@ -1,6 +1,8 @@
 
+@import "./variables";
+
 .totalBox {
-    border: 1px solid #CCC;
+    border: $border-thin-light;
     text-align: left;
     align-self: flex-end;
 }
diff --git a/modules/ticket/front/picture/index.html b/modules/ticket/front/picture/index.html
index 23965fec5..8e2462b44 100644
--- a/modules/ticket/front/picture/index.html
+++ b/modules/ticket/front/picture/index.html
@@ -8,65 +8,55 @@
     auto-load="true">
 </vn-crud-model>
 <vn-vertical>
-    <vn-card pad-large>
-        <vn-vertical>
-            <vn-horizontal class="catalog-list" pad-small>
-                <section class="product" ng-repeat="sale in sales">
-                    <vn-one>
-                        <vn-horizontal>
-                            <vn-one class="image">
-                                <img
-                                    ng-src="//verdnatura.es/vn-image-data/catalog/200x200/{{::sale.item.image}}" 
-                                    zoom-image="//verdnatura.es/vn-image-data/catalog/1600x900/{{::sale.item.image}}"
-                                    on-error-src/>
-                            </vn-one>
-                            <vn-one pad-small class="description ellipsize">
-                                <vn-vertical>
-                                    <h2 class="ellipsize link" vn-tooltip="{{::sale.item.name}}"
-                                    ng-click="$ctrl.showDescriptor($event, sale.item.id)">
-                                        {{::sale.item.name}}
-                                    </h2>
-                                    <span class="ellipsize" vn-tooltip="{{::sale.item.subName}}">
-                                        {{::sale.item.subName}}
-                                    </span>
-                    
-                                    <vn-label-value 
-                                        label="{{::sale.item.tag5}}"
-                                        value="{{::sale.item.value5}}">
-                                    </vn-label-value>
-                                    <vn-label-value 
-                                        label="{{::sale.item.tag6}}"
-                                        value="{{::sale.item.value6}}">
-                                    </vn-label-value>
-                                    <vn-label-value 
-                                        label="{{::sale.item.tag7}}"
-                                        value="{{::sale.item.value7}}">
-                                    </vn-label-value>
-                                    <vn-label-value 
-                                        label="{{::sale.item.tag8}}"
-                                        value="{{::sale.item.value8}}">
-                                    </vn-label-value>
-                    
-                                    <vn-horizontal class="price">
-                                        <vn-one>
-                                            <span>{{::sale.quantity}}</span> 
-                                            <span translate>by</span>
-                                            <span>{{::sale.price | currency: 'EUR': 2}}</span>
-                                        </vn-one>
-                                    </vn-horizontal>
-                                </vn-vertical>
-                            </vn-one>
-                        </vn-horizontal>
-                    </vn-one>
-                </section>
-            </vn-horizontal>
-            <vn-horizontal ng-if="model.data.length == 0">
-                <vn-one pad-small-v translate>
-                    No results
-                </vn-one>
-            </vn-horizontal>
-        </vn-vertical>
-        <vn-pagination model="model"></vn-pagination>
+    <vn-card
+        ng-if="!model.data || model.data.length == 0"
+        style="text-align: center"
+        pad-medium>
+        <span translate>No results</span>
     </vn-card>
+    <vn-horizontal class="catalog-list">
+        <section class="product" ng-repeat="sale in sales">
+        <vn-card>
+            <div class="image">
+                <img
+                    ng-src="//verdnatura.es/vn-image-data/catalog/200x200/{{::sale.item.image}}" 
+                    zoom-image="//verdnatura.es/vn-image-data/catalog/1600x900/{{::sale.item.image}}"
+                    on-error-src/>
+            </div>
+            <div class="description">
+                <h3>
+                    <span class="link" ng-click="$ctrl.showDescriptor($event, sale.item.id)">
+                        {{::sale.item.name}}
+                    </span>
+                </h3>
+                <h4 class="ellipsize">
+                    <span translate-attr="::{title: item.subName}">{{::sale.item.subName}}</span>
+                </h4>
+                <div class="tags">
+                    <vn-label-value 
+                        label="{{::sale.item.tag5}}"
+                        value="{{::sale.item.value5}}">
+                    </vn-label-value>
+                    <vn-label-value 
+                        label="{{::sale.item.tag6}}"
+                        value="{{::sale.item.value6}}">
+                    </vn-label-value>
+                    <vn-label-value 
+                        label="{{::sale.item.tag7}}"
+                        value="{{::sale.item.value7}}">
+                    </vn-label-value>
+                </div>
+                <div class="footer">
+                    <div class="price">
+                        <span>{{::sale.quantity}}</span> 
+                        <span translate>by</span>
+                        <span>{{::sale.price | currency: 'EUR': 2}}</span>
+                    </div>
+                </div>
+            </div>
+        </vn-card>
+        </section>
+    </vn-horizontal>
+    <vn-pagination model="model"></vn-pagination>
 </vn-vertical>
 <vn-item-descriptor-popover vn-id="descriptor"></vn-item-descriptor-popover>
diff --git a/modules/ticket/front/sale-checked/index.html b/modules/ticket/front/sale-checked/index.html
index 3c8a925c2..968d69af2 100644
--- a/modules/ticket/front/sale-checked/index.html
+++ b/modules/ticket/front/sale-checked/index.html
@@ -20,7 +20,7 @@
                     </vn-thead>
                     <vn-tbody>
                         <vn-tr ng-repeat="sale in sales">
-                            <vn-td center>
+                            <vn-td center shrink>
                                 <vn-check 
                                     vn-one field="sale.isChecked.isChecked" 
                                     disabled="true">
diff --git a/modules/ticket/front/sale/style.scss b/modules/ticket/front/sale/style.scss
index 91d793290..2831631ff 100644
--- a/modules/ticket/front/sale/style.scss
+++ b/modules/ticket/front/sale/style.scss
@@ -75,7 +75,7 @@ vn-ticket-sale {
         vn-button[label=Cancel]{
             display: none;
         }
-        vn-card.vn-ticket-create{
+        vn-card.vn-ticket-create {
             padding: 0!important;
         }
     }
@@ -89,7 +89,7 @@ vn-ticket-sale {
     }
     .taxes {
         max-width: 10em;
-        border: .1em solid #CCC;
+        border: $border-thin-light;
         text-align: right;
         padding: .5em !important;
 
diff --git a/modules/ticket/front/summary/style.scss b/modules/ticket/front/summary/style.scss
index 571402188..4e94fb4a6 100644
--- a/modules/ticket/front/summary/style.scss
+++ b/modules/ticket/front/summary/style.scss
@@ -1,14 +1,20 @@
-vn-ticket-summary .summary > div > vn-horizontal > vn-one {
-    min-width: 10em !important;
+@import "./variables";
 
-    &.taxes {
-        border: .1em solid #CCC;
-        text-align: right;
-        padding: .5em !important;
+vn-ticket-summary .summary {
+    max-width: $width-large;
 
-        & > p {
-            font-size: 1.2em;
-            margin: .2em;
+    & > div > vn-horizontal > vn-one {
+        min-width: 10em;
+    
+        &.taxes {
+            border: $border-thin-light;
+            text-align: right;
+            padding: .5em;
+    
+            & > p {
+                font-size: 1.2em;
+                margin: .2em;
+            }
         }
     }
 }
\ No newline at end of file