diff --git a/src/filters/index.js b/src/filters/index.js
index 5f9d9e746..c08f897c4 100644
--- a/src/filters/index.js
+++ b/src/filters/index.js
@@ -3,7 +3,6 @@ import toDate from './toDate';
 import toCurrency from './toCurrency';
 import toPercentage from './toPercentage';
 import dashIfEmpty from './dashIfEmpty';
-import zeroFill from './zeroFill';
 
 export {
     toLowerCase,
@@ -11,5 +10,4 @@ export {
     toCurrency,
     toPercentage,
     dashIfEmpty,
-    zeroFill
 };
diff --git a/src/filters/zeroFill.js b/src/filters/zeroFill.js
deleted file mode 100644
index 00d47d366..000000000
--- a/src/filters/zeroFill.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export default function (value, pad) {
-    const valueStr = String(value);
-    return valueStr.padStart(pad, '0');
-}
diff --git a/src/pages/Ticket/Card/TicketSummary.vue b/src/pages/Ticket/Card/TicketSummary.vue
index b172d0c89..f2cdb4c7a 100644
--- a/src/pages/Ticket/Card/TicketSummary.vue
+++ b/src/pages/Ticket/Card/TicketSummary.vue
@@ -3,7 +3,7 @@ import { onMounted, ref, computed, onUpdated } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import axios from 'axios';
-import { dashIfEmpty, toDate, toCurrency, zeroFill } from 'src/filters';
+import { dashIfEmpty, toDate, toCurrency } from 'src/filters';
 import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
 import FetchData from 'components/FetchData.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
@@ -33,7 +33,6 @@ async function fetch() {
     const { data } = await axios.get(`Tickets/${entityId.value}/summary`);
     if (data) {
         ticket.value = data;
-        console.log(ticket.value);
         salesLines.value = data.sales;
     }
 }
@@ -92,7 +91,8 @@ async function changeState(value) {
                     <q-btn-dropdown
                         side
                         top
-                        color="dark"
+                        color="orange-11"
+                        text-color="black"
                         :label="t('ticket.summary.changeState')"
                         :disable="!isEditable()"
                     >
@@ -248,199 +248,221 @@ async function changeState(value) {
                 </div>
                 <div class="row q-pa-md" v-if="salesLines.length > 0">
                     <div class="col">
-                        <q-item-label header class="text-h6">
-                            {{ t('ticket.summary.saleLines') }}
-                            <q-tooltip>{{ t('ticket.summary.goTo') }}</q-tooltip>
-                        </q-item-label>
-                        <q-table :rows="ticket.sales">
-                            <template #header="props">
-                                <q-tr :props="props">
-                                    <q-th auto-width></q-th>
-                                    <q-th auto-width>{{ t('ticket.summary.item') }}</q-th>
-                                    <q-th auto-width>{{ t('ticket.summary.visible') }}</q-th>
-                                    <q-th auto-width>{{ t('ticket.summary.available') }}</q-th>
-                                    <q-th auto-width>{{ t('ticket.summary.quantity') }}</q-th>
-                                    <q-th auto-width>{{ t('ticket.summary.description') }}</q-th>
-                                    <q-th auto-width>{{ t('ticket.summary.price') }}</q-th>
-                                    <q-th auto-width>{{ t('ticket.summary.discount') }}</q-th>
-                                    <q-th auto-width>{{ t('ticket.summary.amount') }}</q-th>
-                                    <q-th auto-width>{{ t('ticket.summary.packing') }}</q-th>
-                                </q-tr>
-                            </template>
-                            <template #body="props">
-                                <q-tr :props="props">
-                                    <q-td>
-                                        <q-btn
-                                            flat
-                                            round
-                                            size="xs"
-                                            icon="vn:claims"
-                                            v-if="props.row.claim"
-                                            color="primary"
-                                            :to="{ name: 'ClaimCard', params: { id: props.row.claim.claimFk } }"
-                                        >
-                                            <q-tooltip
-                                                >{{ t('ticket.summary.claim') }}:
-                                                {{ props.row.claim.claimFk }}</q-tooltip
+                        <q-list>
+                            <q-item-label header class="text-h6">
+                                {{ t('ticket.summary.saleLines') }}
+                                <router-link
+                                    :to="{ name: 'TicketBasicData', params: { id: entityId } }"
+                                    target="_blank"
+                                >
+                                    <q-icon name="open_in_new" />
+                                </router-link>
+                            </q-item-label>
+                            <q-table :rows="ticket.sales" flat>
+                                <template #header="props">
+                                    <q-tr :props="props">
+                                        <q-th auto-width></q-th>
+                                        <q-th auto-width>{{ t('ticket.summary.item') }}</q-th>
+                                        <q-th auto-width>{{ t('ticket.summary.visible') }}</q-th>
+                                        <q-th auto-width>{{ t('ticket.summary.available') }}</q-th>
+                                        <q-th auto-width>{{ t('ticket.summary.quantity') }}</q-th>
+                                        <q-th auto-width>{{ t('ticket.summary.description') }}</q-th>
+                                        <q-th auto-width>{{ t('ticket.summary.price') }}</q-th>
+                                        <q-th auto-width>{{ t('ticket.summary.discount') }}</q-th>
+                                        <q-th auto-width>{{ t('ticket.summary.amount') }}</q-th>
+                                        <q-th auto-width>{{ t('ticket.summary.packing') }}</q-th>
+                                    </q-tr>
+                                </template>
+                                <template #body="props">
+                                    <q-tr :props="props">
+                                        <q-td>
+                                            <q-btn
+                                                flat
+                                                round
+                                                size="xs"
+                                                icon="vn:claims"
+                                                v-if="props.row.claim"
+                                                color="primary"
+                                                :to="{ name: 'ClaimCard', params: { id: props.row.claim.claimFk } }"
                                             >
-                                        </q-btn>
-                                        <q-btn
-                                            flat
-                                            round
-                                            size="xs"
-                                            icon="vn:claims"
-                                            v-if="props.row.claimBeginning"
-                                            color="primary"
-                                            :to="{
-                                                name: 'ClaimCard',
-                                                params: { id: props.row.claimBeginning.claimFk },
-                                            }"
-                                        >
-                                            <q-tooltip
-                                                >{{ t('ticket.summary.claim') }}:
-                                                {{ props.row.claimBeginning.claimFk }}</q-tooltip
+                                                <q-tooltip
+                                                    >{{ t('ticket.summary.claim') }}:
+                                                    {{ props.row.claim.claimFk }}</q-tooltip
+                                                >
+                                            </q-btn>
+                                            <q-btn
+                                                flat
+                                                round
+                                                size="xs"
+                                                icon="vn:claims"
+                                                v-if="props.row.claimBeginning"
+                                                color="primary"
+                                                :to="{
+                                                    name: 'ClaimCard',
+                                                    params: { id: props.row.claimBeginning.claimFk },
+                                                }"
                                             >
-                                        </q-btn>
-                                        <q-icon name="warning" v-show="props.row.visible < 0" size="xs" color="primary">
-                                            <q-tooltip
-                                                >{{ t('ticket.summary.visible') }}: {{ props.row.visible }}</q-tooltip
+                                                <q-tooltip
+                                                    >{{ t('ticket.summary.claim') }}:
+                                                    {{ props.row.claimBeginning.claimFk }}</q-tooltip
+                                                >
+                                            </q-btn>
+                                            <q-icon
+                                                name="warning"
+                                                v-show="props.row.visible < 0"
+                                                size="xs"
+                                                color="primary"
                                             >
-                                        </q-icon>
-                                        <q-icon name="vn:reserva" v-show="props.row.reserved" size="xs" color="primary">
-                                            <q-tooltip>{{ t('ticket.summary.reserved') }}</q-tooltip>
-                                        </q-icon>
-                                        <q-icon
-                                            name="vn:unavailable"
-                                            v-show="props.row.itemShortage"
-                                            size="xs"
-                                            color="primary"
-                                        >
-                                            <q-tooltip>{{ t('ticket.summary.itemShortage') }}</q-tooltip>
-                                        </q-icon>
-                                        <q-icon
-                                            name="vn:components"
-                                            v-show="props.row.hasComponentLack"
-                                            size="xs"
-                                            color="primary"
-                                        >
-                                            <q-tooltip>{{ t('ticket.summary.hasComponentLack') }}</q-tooltip>
-                                        </q-icon>
-                                    </q-td>
-                                    <q-td class="link">{{ zeroFill(props.row.itemFk, 6) }}</q-td>
-                                    <q-td>{{ props.row.visible }}</q-td>
-                                    <q-td>{{ props.row.available }}</q-td>
-                                    <q-td>{{ props.row.quantity }}</q-td>
-                                    <q-td>
-                                        <div class="fetched-tags">
-                                            <span>{{ props.row.item.name }}</span>
-                                            <span v-if="props.row.item.subName" class="subName">{{
-                                                props.row.item.subName
-                                            }}</span>
-                                        </div>
-                                        <fetched-tags :item="props.row.item" :max-length="5"></fetched-tags>
-                                    </q-td>
-                                    <q-td>{{ props.row.price }}</q-td>
-                                    <q-td>{{ props.row.discount }} %</q-td>
-                                    <q-td
-                                        >{{
-                                            toCurrency(
-                                                props.row.quantity *
-                                                    props.row.price *
-                                                    ((100 - props.row.discount) / 100)
-                                            )
-                                        }}
-                                    </q-td>
-                                    <q-td>{{ dashIfEmpty(props.row.item.itemPackingTypeFk) }}</q-td>
-                                </q-tr>
-                            </template>
-                        </q-table>
+                                                <q-tooltip
+                                                    >{{ t('ticket.summary.visible') }}:
+                                                    {{ props.row.visible }}</q-tooltip
+                                                >
+                                            </q-icon>
+                                            <q-icon
+                                                name="vn:reserva"
+                                                v-show="props.row.reserved"
+                                                size="xs"
+                                                color="primary"
+                                            >
+                                                <q-tooltip>{{ t('ticket.summary.reserved') }}</q-tooltip>
+                                            </q-icon>
+                                            <q-icon
+                                                name="vn:unavailable"
+                                                v-show="props.row.itemShortage"
+                                                size="xs"
+                                                color="primary"
+                                            >
+                                                <q-tooltip>{{ t('ticket.summary.itemShortage') }}</q-tooltip>
+                                            </q-icon>
+                                            <q-icon
+                                                name="vn:components"
+                                                v-show="props.row.hasComponentLack"
+                                                size="xs"
+                                                color="primary"
+                                            >
+                                                <q-tooltip>{{ t('ticket.summary.hasComponentLack') }}</q-tooltip>
+                                            </q-icon>
+                                        </q-td>
+                                        <q-td class="link">{{ props.row.itemFk }}</q-td>
+                                        <q-td>{{ props.row.visible }}</q-td>
+                                        <q-td>{{ props.row.available }}</q-td>
+                                        <q-td>{{ props.row.quantity }}</q-td>
+                                        <q-td>
+                                            <div class="fetched-tags">
+                                                <span>{{ props.row.item.name }}</span>
+                                                <span v-if="props.row.item.subName" class="subName">{{
+                                                    props.row.item.subName
+                                                }}</span>
+                                            </div>
+                                            <fetched-tags :item="props.row.item" :max-length="5"></fetched-tags>
+                                        </q-td>
+                                        <q-td>{{ props.row.price }}</q-td>
+                                        <q-td>{{ props.row.discount }} %</q-td>
+                                        <q-td
+                                            >{{
+                                                toCurrency(
+                                                    props.row.quantity *
+                                                        props.row.price *
+                                                        ((100 - props.row.discount) / 100)
+                                                )
+                                            }}
+                                        </q-td>
+                                        <q-td>{{ dashIfEmpty(props.row.item.itemPackingTypeFk) }}</q-td>
+                                    </q-tr>
+                                </template>
+                            </q-table>
+                        </q-list>
                     </div>
                 </div>
                 <div class="row q-pa-md" v-if="ticket.packagings.length > 0 || ticket.services.length > 0">
                     <div class="col" v-if="ticket.packagings.length > 0">
-                        <q-item-label header class="text-h6">
-                            {{ t('ticket.summary.packages') }}
-                            <q-tooltip>{{ t('ticket.summary.goTo') }}</q-tooltip>
-                        </q-item-label>
-                        <q-table :rows="ticket.packagings">
-                            <template #header="props">
-                                <q-tr :props="props">
-                                    <q-th auto-width>{{ t('ticket.summary.created') }}</q-th>
-                                    <q-th auto-width>{{ t('ticket.summary.package') }}</q-th>
-                                    <q-th auto-width>{{ t('ticket.summary.quantity') }}</q-th>
-                                </q-tr>
-                            </template>
-                            <template #body="props">
-                                <q-tr :props="props">
-                                    <q-td>{{ toDate(props.row.created) }}</q-td>
-                                    <q-td>{{ props.row.packaging.item.name }}</q-td>
-                                    <q-td>{{ props.row.quantity }}</q-td>
-                                </q-tr>
-                            </template>
-                        </q-table>
+                        <q-list>
+                            <q-item-label header class="text-h6">
+                                {{ t('ticket.summary.packages') }}
+                                <q-icon name="open_in_new" />
+                            </q-item-label>
+                            <q-table :rows="ticket.packagings" flat>
+                                <template #header="props">
+                                    <q-tr :props="props">
+                                        <q-th auto-width>{{ t('ticket.summary.created') }}</q-th>
+                                        <q-th auto-width>{{ t('ticket.summary.package') }}</q-th>
+                                        <q-th auto-width>{{ t('ticket.summary.quantity') }}</q-th>
+                                    </q-tr>
+                                </template>
+                                <template #body="props">
+                                    <q-tr :props="props">
+                                        <q-td>{{ toDate(props.row.created) }}</q-td>
+                                        <q-td>{{ props.row.packaging.item.name }}</q-td>
+                                        <q-td>{{ props.row.quantity }}</q-td>
+                                    </q-tr>
+                                </template>
+                            </q-table>
+                        </q-list>
                     </div>
                     <div class="col" v-if="ticket.services.length > 0">
-                        <q-item-label header class="text-h6">
-                            {{ t('ticket.summary.services') }}
-                            <q-tooltip>{{ t('ticket.summary.goTo') }}</q-tooltip>
-                        </q-item-label>
-                        <q-table :rows="ticket.services">
-                            <template #header="props">
-                                <q-tr :props="props">
-                                    <q-th auto-width>{{ t('ticket.summary.quantity') }}</q-th>
-                                    <q-th auto-width>{{ t('ticket.summary.description') }}</q-th>
-                                    <q-th auto-width>{{ t('ticket.summary.price') }}</q-th>
-                                    <q-th auto-width>{{ t('ticket.summary.taxClass') }}</q-th>
-                                    <q-th auto-width>{{ t('ticket.summary.amount') }}</q-th>
-                                </q-tr>
-                            </template>
-                            <template #body="props">
-                                <q-tr :props="props">
-                                    <q-td>{{ props.row.quantity }}</q-td>
-                                    <q-td>{{ props.row.description }}</q-td>
-                                    <q-td>{{ toCurrency(props.row.price) }}</q-td>
-                                    <q-td>{{ props.row.taxClass.description }}</q-td>
-                                    <q-td>{{ toCurrency(props.row.quantity * props.row.price) }}</q-td>
-                                </q-tr>
-                            </template>
-                        </q-table>
+                        <q-list>
+                            <q-item-label header class="text-h6">
+                                {{ t('ticket.summary.services') }}
+                                <q-icon name="open_in_new" />
+                            </q-item-label>
+                            <q-table :rows="ticket.services" flat>
+                                <template #header="props">
+                                    <q-tr :props="props">
+                                        <q-th auto-width>{{ t('ticket.summary.quantity') }}</q-th>
+                                        <q-th auto-width>{{ t('ticket.summary.description') }}</q-th>
+                                        <q-th auto-width>{{ t('ticket.summary.price') }}</q-th>
+                                        <q-th auto-width>{{ t('ticket.summary.taxClass') }}</q-th>
+                                        <q-th auto-width>{{ t('ticket.summary.amount') }}</q-th>
+                                    </q-tr>
+                                </template>
+                                <template #body="props">
+                                    <q-tr :props="props">
+                                        <q-td>{{ props.row.quantity }}</q-td>
+                                        <q-td>{{ props.row.description }}</q-td>
+                                        <q-td>{{ toCurrency(props.row.price) }}</q-td>
+                                        <q-td>{{ props.row.taxClass.description }}</q-td>
+                                        <q-td>{{ toCurrency(props.row.quantity * props.row.price) }}</q-td>
+                                    </q-tr>
+                                </template>
+                            </q-table>
+                        </q-list>
                     </div>
                 </div>
                 <div class="row q-pa-md" v-if="ticket.requests.length > 0">
                     <div class="col">
-                        <q-item-label header class="text-h6">
-                            {{ t('ticket.summary.request') }}
-                            <q-tooltip>{{ t('ticket.summary.goTo') }}</q-tooltip>
-                        </q-item-label>
-                        <q-table :rows="ticket.requests">
-                            <template #header="props">
-                                <q-tr :props="props">
-                                    <q-th auto-width>{{ t('ticket.summary.description') }}</q-th>
-                                    <q-th auto-width>{{ t('ticket.summary.created') }}</q-th>
-                                    <q-th auto-width>{{ t('ticket.summary.requester') }}</q-th>
-                                    <q-th auto-width>{{ t('ticket.summary.atender') }}</q-th>
-                                    <q-th auto-width>{{ t('ticket.summary.quantity') }}</q-th>
-                                    <q-th auto-width>{{ t('ticket.summary.price') }}</q-th>
-                                    <q-th auto-width>{{ t('ticket.summary.item') }}</q-th>
-                                    <q-th auto-width>Ok</q-th>
-                                </q-tr>
-                            </template>
-                            <template #body="props">
-                                <q-tr :props="props">
-                                    <q-td>{{ props.row.description }}</q-td>
-                                    <q-td>{{ toDate(props.row.created) }}</q-td>
-                                    <q-td>{{ props.row.requester.user.name }}</q-td>
-                                    <q-td>{{ props.row.atender.user.name }}</q-td>
-                                    <q-td>{{ props.row.quantity }}</q-td>
-                                    <q-td>{{ toCurrency(props.row.price) }}</q-td>
-                                    <q-td v-if="!props.row.sale">-</q-td>
-                                    <q-td v-if="props.row.sale" class="link">{{
-                                        zeroFill(props.row.sale.itemFk, 6)
-                                    }}</q-td>
-                                    <q-td><q-checkbox v-model="props.row.isOk" :disable="true" /></q-td>
-                                </q-tr>
-                            </template>
-                        </q-table>
+                        <q-list>
+                            <q-item-label header class="text-h6">
+                                {{ t('ticket.summary.request') }}
+                                <q-icon name="open_in_new" />
+                            </q-item-label>
+                            <q-table :rows="ticket.requests" flat>
+                                <template #header="props">
+                                    <q-tr :props="props">
+                                        <q-th auto-width>{{ t('ticket.summary.description') }}</q-th>
+                                        <q-th auto-width>{{ t('ticket.summary.created') }}</q-th>
+                                        <q-th auto-width>{{ t('ticket.summary.requester') }}</q-th>
+                                        <q-th auto-width>{{ t('ticket.summary.atender') }}</q-th>
+                                        <q-th auto-width>{{ t('ticket.summary.quantity') }}</q-th>
+                                        <q-th auto-width>{{ t('ticket.summary.price') }}</q-th>
+                                        <q-th auto-width>{{ t('ticket.summary.item') }}</q-th>
+                                        <q-th auto-width>Ok</q-th>
+                                    </q-tr>
+                                </template>
+                                <template #body="props">
+                                    <q-tr :props="props">
+                                        <q-td>{{ props.row.description }}</q-td>
+                                        <q-td>{{ toDate(props.row.created) }}</q-td>
+                                        <q-td>{{ props.row.requester.user.name }}</q-td>
+                                        <q-td>{{ props.row.atender.user.name }}</q-td>
+                                        <q-td>{{ props.row.quantity }}</q-td>
+                                        <q-td>{{ toCurrency(props.row.price) }}</q-td>
+                                        <q-td v-if="!props.row.sale">-</q-td>
+                                        <q-td v-if="props.row.sale" class="link">{{ props.row.sale.itemFk }}</q-td>
+                                        <q-td><q-checkbox v-model="props.row.isOk" :disable="true" /></q-td>
+                                    </q-tr>
+                                </template>
+                            </q-table>
+                        </q-list>
                     </div>
                 </div>
             </template>
@@ -455,9 +477,21 @@ async function changeState(value) {
 
 .q-card {
     width: 100%;
+    height: 100%;
+    max-width: 1200px;
 }
 
 .summary {
+    .q-list {
+        .q-item__label--header {
+            display: flex;
+            justify-content: space-between;
+
+            a {
+                color: $primary;
+            }
+        }
+    }
     .fetched-tags {
         display: flex;
         flex-wrap: wrap;
@@ -494,26 +528,6 @@ async function changeState(value) {
         }
     }
 
-    .text-h6 {
-        margin-bottom: $spacing-md;
-        text-transform: uppercase;
-        line-height: 1;
-        padding: 7px 0;
-        padding-bottom: 5px;
-        border-bottom: 2px solid $primary;
-        overflow: hidden;
-        position: relative;
-    }
-
-    .text-h6:after {
-        font-family: 'Material Icons';
-        content: 'open_in_new';
-        position: absolute;
-        right: 5px;
-        text-transform: none;
-        color: $primary;
-    }
-
     .header {
         font-size: 18px;
         display: flex;
@@ -532,4 +546,8 @@ async function changeState(value) {
         }
     }
 }
+
+.q-dialog .summary {
+    max-width: 1200px;
+}
 </style>
diff --git a/src/pages/Ticket/TicketList.vue b/src/pages/Ticket/TicketList.vue
index 330c17bbf..f875e5314 100644
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import Paginate from 'components/Paginate.vue';
 import { toDate, toCurrency } from 'src/filters/index';
-// import TicketSummary from './Card/TicketSummary.vue';
+import TicketSummary from './Card/TicketSummary.vue';
 
 const router = useRouter();
 const { t } = useI18n();
@@ -55,7 +55,7 @@ const preview = ref({
 function showPreview(id) {
     preview.value.shown = true;
     preview.value.data = {
-        customerId: id,
+        ticketId: id,
     };
 }
 </script>
@@ -108,42 +108,19 @@ function showPreview(id) {
                         </q-item-section>
                         <q-separator vertical />
                         <q-card-actions vertical class="justify-between">
-                            <!-- <q-btn color="grey-7" round flat icon="more_vert">
-                                <q-tooltip>{{ t('customer.list.moreOptions') }}</q-tooltip>
-                                <q-menu cover auto-close>
-                                    <q-list>
-                                        <q-item clickable>
-                                            <q-item-section avatar>
-                                                <q-icon name="add" />
-                                            </q-item-section>
-                                            <q-item-section>Add a note</q-item-section>
-                                        </q-item>
-                                        <q-item clickable>
-                                            <q-item-section avatar>
-                                                <q-icon name="history" />
-                                            </q-item-section>
-                                            <q-item-section>Display customer history</q-item-section>
-                                        </q-item>
-                                    </q-list>
-                                </q-menu>
-                            </q-btn> -->
-
                             <q-btn flat round color="orange" icon="arrow_circle_right" @click="navigate(row.id)">
                                 <q-tooltip>{{ t('components.smartCard.openCard') }}</q-tooltip>
                             </q-btn>
                             <q-btn flat round color="grey-7" icon="preview" @click="showPreview(row.id)">
                                 <q-tooltip>{{ t('components.smartCard.openSummary') }}</q-tooltip>
                             </q-btn>
-                            <!-- <q-btn flat round color="grey-7" icon="vn:ticket">
-                                <q-tooltip>{{ t('customer.list.customerOrders') }}</q-tooltip>
-                            </q-btn> -->
                         </q-card-actions>
                     </q-item>
                 </q-card>
             </template>
         </paginate>
     </q-page>
-    <!-- <q-dialog v-model="preview.shown">
-        <customer-summary :customer-id="preview.data.customerId" />
-    </q-dialog> -->
+    <q-dialog v-model="preview.shown">
+        <ticket-summary :id="preview.data.ticketId" />
+    </q-dialog>
 </template>