diff --git a/src/pages/DeliveryNote/Card/DeliveryNoteBasicData.vue b/src/pages/DeliveryNote/Card/DeliveryNoteBasicData.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/pages/DeliveryNote/Card/DeliveryNoteDms.vue b/src/pages/DeliveryNote/Card/DeliveryNoteDms.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/pages/DeliveryNote/Card/DeliveryNoteSummary.vue b/src/pages/DeliveryNote/Card/DeliveryNoteSummary.vue
new file mode 100644
index 000000000..20950a429
--- /dev/null
+++ b/src/pages/DeliveryNote/Card/DeliveryNoteSummary.vue
@@ -0,0 +1,80 @@
+<script setup>
+import { onMounted, ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
+import { toCurrency, toDate, toPercentage } from 'src/filters';
+import CardSummary from 'components/ui/CardSummary.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import { getUrl } from 'src/composables/getUrl';
+import VnTitle from 'src/components/common/VnTitle.vue';
+
+onMounted(async () => {
+    fetch();
+    salixUrl.value = await getUrl('');
+    invoiceOutUrl.value = salixUrl.value + `invoiceOut/${entityId.value}/`;
+});
+
+const route = useRoute();
+const { t } = useI18n();
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        default: 0,
+    },
+});
+
+const entityId = computed(() => $props.id || route.params.id);
+
+const salixUrl = ref();
+const invoiceOutUrl = ref();
+const tickets = ref(null);
+
+function fetch() {
+    axios.get(`InvoiceOuts/${entityId.value}/getTickets`).then(({ data }) => {
+        tickets.value = data;
+    });
+}
+</script>
+
+<template>
+    <CardSummary
+        ref="summary"
+        :url="`DeliveryNotes/${entityId}/summary`"
+        :entity-id="entityId"
+        data-key="deliveryNoteSummary"
+    >
+        <template #header="{ entity: { deliveryNote } }">
+            <div>{{ deliveryNote.ref }}</div>
+        </template>
+        <!-- <template #menu="{ entity }">
+            <InvoiceOutDescriptorMenu :invoice-out-data="entity.invoiceOut" />
+        </template> -->
+        <template #body="{ entity: { deliveryNote } }">
+            <QCard class="vn-one">
+                <VnTitle :text="t('globals.pageTitles.basicData')" />
+                {{ deliveryNote }}
+                <!-- <VnLv
+                    :label="t('invoiceOut.summary.issued')"
+                    :value="toDate(invoiceOut.issued)"
+                />
+                <VnLv
+                    :label="t('invoiceOut.summary.expirationDate')"
+                    :value="toDate(invoiceOut.dued)"
+                />
+                <VnLv :label="t('globals.created')" :value="toDate(invoiceOut.created)" />
+                <VnLv
+                    :label="t('invoiceOut.summary.booked')"
+                    :value="toDate(invoiceOut.booked)"
+                />
+                <VnLv :label="t('globals.company')" :value="invoiceOut.company.code" /> -->
+            </QCard>
+        </template>
+    </CardSummary>
+</template>
+<style lang="scss" scoped>
+.no-uppercase {
+    text-transform: none;
+}
+</style>