diff --git a/src/css/app.scss b/src/css/app.scss
index 357c9ecdb2..ecffd576ca 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -37,6 +37,10 @@ a {
 .link {
     color: $color-link;
     cursor: pointer;
+
+    &--white {
+        color: white;
+    }
 }
 
 .tx-color-link {
diff --git a/src/pages/Item/Card/ItemSummary.vue b/src/pages/Item/Card/ItemSummary.vue
index 1571a903e7..081eb2afb8 100644
--- a/src/pages/Item/Card/ItemSummary.vue
+++ b/src/pages/Item/Card/ItemSummary.vue
@@ -7,9 +7,7 @@ import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import ItemDescriptorImage from 'src/pages/Item/Card/ItemDescriptorImage.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
-
-import { useRole } from 'src/composables/useRole';
-import { useAcl } from 'src/composables/useAcl';
+import VnTitle from 'src/components/common/VnTitle.vue';
 
 const $props = defineProps({
     id: {
@@ -22,13 +20,7 @@ const route = useRoute();
 const { t } = useI18n();
 
 const entityId = computed(() => $props.id || route.params.id);
-
-const canEdit = computed(() => useAcl().hasAny('Item', '*', 'WRITE'));
-
-const isReplenisher = computed(() => useRole().hasAny(['replenisher']));
-
 </script>
-
 <template>
     <CardSummary
         ref="summary"
@@ -37,13 +29,15 @@ const isReplenisher = computed(() => useRole().hasAny(['replenisher']));
         data-key="ItemSummary"
     >
         <template #header-left>
-            <router-link
-                v-if="route.name !== 'ItemSummary'"
+            <QBtn
+                v-if="$route.name !== 'ItemSummary'"
                 :to="{ name: 'ItemSummary', params: { id: entityId } }"
-                class="header link"
-            >
-                <QIcon name="open_in_new" color="white" size="sm" />
-            </router-link>
+                class="header link--white"
+                icon="open_in_new"
+                flat
+                dense
+                round
+            />
         </template>
         <template #header="{ entity: { item } }">
             {{ item.id }} - {{ item.name }}
@@ -58,15 +52,10 @@ const isReplenisher = computed(() => useRole().hasAny(['replenisher']));
                 />
             </QCard>
             <QCard class="vn-one">
-                <component
-                    :is="canEdit ? 'router-link' : 'span'"
-                    :to="{ name: 'ItemBasicData', params: { id: entityId } }"
-                    class="header"
-                    :class="{ 'header-link': canEdit }"
-                >
-                    {{ t('item.summary.basicData') }}
-                    <QIcon v-if="canEdit" name="open_in_new" />
-                </component>
+                <VnTitle
+                    :url="`#/item/${entityId}/basic-data`"
+                    :text="t('item.summary.basicData')"
+                />
                 <VnLv :label="t('item.summary.name')" :value="item.name" />
                 <VnLv :label="t('item.summary.completeName')" :value="item.longName" />
                 <VnLv :label="t('item.summary.family')" :value="item.itemType.name" />
@@ -97,15 +86,10 @@ const isReplenisher = computed(() => useRole().hasAny(['replenisher']));
                 </VnLv>
             </QCard>
             <QCard class="vn-one">
-                <component
-                    :is="canEdit ? 'router-link' : 'span'"
-                    :to="{ name: 'ItemBasicData', params: { id: entityId } }"
-                    class="header"
-                    :class="{ 'header-link': canEdit }"
-                >
-                    {{ t('item.summary.otherData') }}
-                    <QIcon v-if="canEdit" name="open_in_new" />
-                </component>
+                <VnTitle
+                    :url="`#/item/${entityId}/basic-data`"
+                    :text="t('item.summary.otherData')"
+                />
                 <VnLv
                     :label="t('item.summary.intrastatCode')"
                     :value="item.intrastat.id"
@@ -130,15 +114,10 @@ const isReplenisher = computed(() => useRole().hasAny(['replenisher']));
                 />
             </QCard>
             <QCard class="vn-one">
-                <component
-                    :is="canEdit || isReplenisher ? 'router-link' : 'span'"
-                    :to="{ name: 'ItemTags', params: { id: entityId } }"
-                    class="header"
-                    :class="{ 'header-link': canEdit || isReplenisher }"
-                >
-                    {{ t('item.summary.tags') }}
-                    <QIcon v-if="canEdit || isReplenisher" name="open_in_new" />
-                </component>
+                <VnTitle
+                    :url="`#/item/${entityId}/tags`"
+                    :text="t('item.summary.tags')"
+                />
                 <VnLv
                     v-for="(tag, index) in tags"
                     :key="index"
@@ -147,29 +126,14 @@ const isReplenisher = computed(() => useRole().hasAny(['replenisher']));
                 />
             </QCard>
             <QCard class="vn-one" v-if="item.description">
-                <component
-                    :is="canEdit ? 'router-link' : 'span'"
-                    :to="{ name: 'ItemBasicData', params: { id: entityId } }"
-                    class="header"
-                    :class="{ 'header-link': canEdit }"
-                >
-                    {{ t('item.summary.description') }}
-                    <QIcon v-if="canEdit" name="open_in_new" />
-                </component>
-                <p>
-                    {{ item.description }}
-                </p>
+                <VnTitle
+                    :url="`#/item/${entityId}/basic-data`"
+                    :text="t('item.summary.description')"
+                />
+                <p v-text="item.description" />
             </QCard>
             <QCard class="vn-one">
-                <component
-                    :is="canEdit ? 'router-link' : 'span'"
-                    :to="{ name: 'ItemTax', params: { id: entityId } }"
-                    class="header"
-                    :class="{ 'header-link': canEdit }"
-                >
-                    {{ t('item.summary.tax') }}
-                    <QIcon v-if="canEdit" name="open_in_new" />
-                </component>
+                <VnTitle :url="`#/item/${entityId}/tax`" :text="t('item.summary.tax')" />
                 <VnLv
                     v-for="(tax, index) in item.taxes"
                     :key="index"
@@ -178,15 +142,10 @@ const isReplenisher = computed(() => useRole().hasAny(['replenisher']));
                 />
             </QCard>
             <QCard class="vn-one">
-                <component
-                    :is="canEdit ? 'router-link' : 'span'"
-                    :to="{ name: 'ItemBotanical', params: { id: entityId } }"
-                    class="header"
-                    :class="{ 'header-link': canEdit }"
-                >
-                    {{ t('item.summary.botanical') }}
-                    <QIcon v-if="canEdit" name="open_in_new" />
-                </component>
+                <VnTitle
+                    :url="`#/item/${entityId}/botanical`"
+                    :text="t('item.summary.botanical')"
+                />
                 <VnLv :label="t('item.summary.genus')" :value="botanical?.genus?.name" />
                 <VnLv
                     :label="t('item.summary.specie')"
@@ -194,23 +153,19 @@ const isReplenisher = computed(() => useRole().hasAny(['replenisher']));
                 />
             </QCard>
             <QCard class="vn-one">
-                <component
-                    :is="canEdit || isReplenisher ? 'router-link' : 'span'"
-                    :to="{ name: 'ItemBarcode', params: { id: entityId } }"
-                    class="header"
-                    :class="{ 'header-link': canEdit || isReplenisher }"
-                >
-                    {{ t('item.summary.barcode') }}
-                    <QIcon v-if="canEdit || isReplenisher" name="open_in_new" />
-                </component>
-                <p v-for="(barcode, index) in item.itemBarcode" :key="index">
-                    {{ barcode.code }}
-                </p>
+                <VnTitle
+                    :url="`#/item/${entityId}/barcode`"
+                    :text="t('item.summary.barcode')"
+                />
+                <p
+                    v-for="(barcode, index) in item.itemBarcode"
+                    :key="index"
+                    v-text="barcode.code"
+                />
             </QCard>
         </template>
     </CardSummary>
 </template>
-
 <i18n>
 en:
     Este artículo necesita una foto: Este artículo necesita una foto