diff --git a/src/components/ui/CardSummary.vue b/src/components/ui/CardSummary.vue
index 2ec6bea78..7ea91edca 100644
--- a/src/components/ui/CardSummary.vue
+++ b/src/components/ui/CardSummary.vue
@@ -159,6 +159,7 @@ async function fetch() {
                 display: flex;
                 flex-direction: row;
                 margin-top: 2px;
+                align-items: start;
                 .label {
                     color: var(--vn-label-color);
                     width: 9em;
@@ -169,6 +170,10 @@ async function fetch() {
                     flex-grow: 0;
                     flex-shrink: 0;
                 }
+                &.ellipsis > .value {
+                    text-overflow: ellipsis;
+                    white-space: pre;
+                }
                 .value {
                     color: var(--vn-text-color);
                     overflow: hidden;
diff --git a/src/components/ui/VnLinkMail.vue b/src/components/ui/VnLinkMail.vue
index a54f463f5..6c5129a9b 100644
--- a/src/components/ui/VnLinkMail.vue
+++ b/src/components/ui/VnLinkMail.vue
@@ -1,8 +1,11 @@
 <script setup>
+import { dashIfEmpty } from 'src/filters';
+
 defineProps({ email: { type: [String], default: null } });
 </script>
 <template>
     <QBtn
+        class="q-pr-xs"
         v-if="email"
         flat
         round
@@ -13,4 +16,5 @@ defineProps({ email: { type: [String], default: null } });
         :href="`mailto:${email}`"
         @click.stop
     />
+    <span>{{ dashIfEmpty(email) }}</span>
 </template>
diff --git a/src/components/ui/VnLinkPhone.vue b/src/components/ui/VnLinkPhone.vue
index 4174e4ae6..e34a70011 100644
--- a/src/components/ui/VnLinkPhone.vue
+++ b/src/components/ui/VnLinkPhone.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { ref, reactive, useAttrs, onBeforeMount, capitalize } from 'vue';
 import axios from 'axios';
-import { parsePhone } from 'src/filters';
+import { dashIfEmpty, parsePhone } from 'src/filters';
 import useOpenURL from 'src/composables/useOpenURL';
 
 const props = defineProps({
@@ -12,50 +12,65 @@ const props = defineProps({
 
 const phone = ref(props.phoneNumber);
 const config = reactive({
-    sip: { icon: 'phone', href: `sip:${props.phoneNumber}` },
     'say-simple': {
         icon: 'vn:saysimple',
         url: null,
         channel: props.channel,
     },
+    sip: { icon: 'phone', href: `sip:${props.phoneNumber}` },
 });
-const type = Object.keys(config).find((key) => key in useAttrs()) || 'sip';
+
+const attrs = useAttrs();
+const types = Object.keys(config)
+    .filter((key) => key in attrs)
+    .sort();
+const activeTypes = types.length ? types : ['sip'];
 
 onBeforeMount(async () => {
     if (!phone.value) return;
-    let { channel } = config[type];
 
-    if (type === 'say-simple') {
-        const { url, defaultChannel } = (await axios.get('SaySimpleConfigs/findOne'))
-            .data;
-        if (!channel) channel = defaultChannel;
+    for (const type of activeTypes) {
+        if (type === 'say-simple') {
+            let { channel } = config[type];
+            const { url, defaultChannel } = (await axios.get('SaySimpleConfigs/findOne'))
+                .data;
+            if (!channel) channel = defaultChannel;
 
-        phone.value = await parsePhone(props.phoneNumber, props.country?.toLowerCase());
-        config[
-            type
-        ].url = `${url}?customerIdentity=%2B${phone.value}&channelId=${channel}`;
+            phone.value = await parsePhone(
+                props.phoneNumber,
+                props.country?.toLowerCase(),
+            );
+            config[type].url =
+                `${url}?customerIdentity=%2B${phone.value}&channelId=${channel}`;
+        }
     }
 });
 
-function handleClick() {
+function handleClick(type) {
     if (config[type].url) useOpenURL(config[type].url);
     else if (config[type].href) window.location.href = config[type].href;
 }
 </script>
+
 <template>
-    <QBtn
-        v-if="phone"
-        flat
-        round
-        :icon="config[type].icon"
-        size="sm"
-        color="primary"
-        padding="none"
-        @click.stop="handleClick"
-    >
-        <QTooltip>
-            {{ capitalize(type).replace('-', '') }}
-        </QTooltip>
-    </QBtn>
-    {{ phoneNumber }}
+    <div class="flex items-center gap-2">
+        <template v-for="type in activeTypes">
+            <QBtn
+                :key="type"
+                v-if="phone"
+                flat
+                round
+                :icon="config[type].icon"
+                size="sm"
+                color="primary"
+                padding="none"
+                @click.stop="() => handleClick(type)"
+            >
+                <QTooltip>
+                    {{ capitalize(type).replace('-', '') }}
+                </QTooltip>
+            </QBtn></template
+        >
+        <span>{{ dashIfEmpty(phone) }}</span>
+    </div>
 </template>
diff --git a/src/pages/Customer/Card/CustomerSummary.vue b/src/pages/Customer/Card/CustomerSummary.vue
index 7d5d691a3..342643ec3 100644
--- a/src/pages/Customer/Card/CustomerSummary.vue
+++ b/src/pages/Customer/Card/CustomerSummary.vue
@@ -84,28 +84,27 @@ const sumRisk = ({ clientRisks }) => {
                 <VnLv :label="t('customer.summary.customerId')" :value="entity.id" />
                 <VnLv :label="t('globals.name')" :value="entity.name" />
                 <VnLv :label="t('customer.summary.contact')" :value="entity.contact" />
-                <VnLv :value="entity.phone">
-                    <template #label>
-                        {{ t('customer.extendedList.tableVisibleColumns.phone') }}
+                <VnLv :label="t('customer.extendedList.tableVisibleColumns.phone')">
+                    <template #value>
                         <VnLinkPhone :phone-number="entity.phone" />
                     </template>
                 </VnLv>
-                <VnLv :value="entity.mobile">
-                    <template #label>
-                        {{ t('customer.summary.mobile') }}
-                        <VnLinkPhone :phone-number="entity.mobile" />
+                <VnLv :label="t('customer.summary.mobile')">
+                    <template #value>
                         <VnLinkPhone
+                            sip
                             say-simple
                             :phone-number="entity.mobile"
                             :channel="entity.country?.saySimpleCountry?.channel"
-                            class="q-ml-xs"
                         />
                     </template>
                 </VnLv>
-                <VnLv :value="entity.email" copy
-                    ><template #label>
-                        {{ t('globals.params.email') }}
-                        <VnLinkMail email="entity.email"></VnLinkMail> </template
+                <VnLv
+                    :label="t('globals.params.email')"
+                    :value="entity.email"
+                    class="ellipsis"
+                    copy
+                    ><template #value> <VnLinkMail :email="entity.email" /> </template
                 ></VnLv>
                 <VnLv :label="t('globals.department')">
                     <template #value>
diff --git a/src/pages/Route/Roadmap/RoadmapSummary.vue b/src/pages/Route/Roadmap/RoadmapSummary.vue
index 0c1c2b903..dcd02d98e 100644
--- a/src/pages/Route/Roadmap/RoadmapSummary.vue
+++ b/src/pages/Route/Roadmap/RoadmapSummary.vue
@@ -112,12 +112,9 @@ const filter = {
                         :label="t('Trailer Plate')"
                         :value="dashIfEmpty(entity?.trailerPlate)"
                     />
-                    <VnLv :label="t('Phone')" :value="dashIfEmpty(entity?.phone)">
+                    <VnLv :label="t('Phone')">
                         <template #value>
-                            <span>
-                                {{ dashIfEmpty(entity?.phone) }}
-                                <VnLinkPhone :phone-number="entity?.phone" />
-                            </span>
+                            <VnLinkPhone :phone-number="entity?.phone" />
                         </template>
                     </VnLv>
                     <VnLv
diff --git a/src/pages/Worker/Card/WorkerDescriptor.vue b/src/pages/Worker/Card/WorkerDescriptor.vue
index 060520e84..0f09c0a97 100644
--- a/src/pages/Worker/Card/WorkerDescriptor.vue
+++ b/src/pages/Worker/Card/WorkerDescriptor.vue
@@ -128,15 +128,13 @@ const handlePhotoUpdated = (evt = false) => {
                 </template>
             </VnLv>
 
-            <VnLv :value="entity.phone">
-                <template #label>
-                    {{ t('globals.phone') }}
+            <VnLv :label="t('globals.phone')">
+                <template #value>
                     <VnLinkPhone :phone-number="entity.phone" />
                 </template>
             </VnLv>
-            <VnLv :value="entity?.sip?.extension">
-                <template #label>
-                    {{ t('worker.summary.sipExtension') }}
+            <VnLv :label="t('worker.summary.sipExtension')">
+                <template #value>
                     <VnLinkPhone :phone-number="entity?.sip?.extension" />
                 </template>
             </VnLv>
diff --git a/src/pages/Worker/Card/WorkerSummary.vue b/src/pages/Worker/Card/WorkerSummary.vue
index 40787613c..26c84fe09 100644
--- a/src/pages/Worker/Card/WorkerSummary.vue
+++ b/src/pages/Worker/Card/WorkerSummary.vue
@@ -73,21 +73,18 @@ onBeforeMount(async () => {
                                 />
                             </template>
                         </VnLv>
-                        <VnLv :value="worker.mobileExtension">
-                            <template #label>
-                                {{ t('worker.summary.phoneExtension') }}
+                        <VnLv :label="t('worker.summary.phoneExtension')">
+                            <template #value>
                                 <VnLinkPhone :phone-number="worker.mobileExtension" />
                             </template>
                         </VnLv>
-                        <VnLv :value="worker.phone">
-                            <template #label>
-                                {{ t('worker.summary.entPhone') }}
+                        <VnLv :label="t('worker.summary.entPhone')">
+                            <template #value>
                                 <VnLinkPhone :phone-number="worker.phone" />
                             </template>
                         </VnLv>
-                        <VnLv :value="advancedSummary?.client?.phone">
-                            <template #label>
-                                {{ t('worker.summary.personalPhone') }}
+                        <VnLv :label="t('worker.summary.personalPhone')">
+                            <template #value>
                                 <VnLinkPhone
                                     :phone-number="advancedSummary?.client?.phone"
                                 />
@@ -147,9 +144,8 @@ onBeforeMount(async () => {
                         </span>
                     </template>
                 </VnLv>
-                <VnLv :value="worker?.sip?.extension">
-                    <template #label>
-                        {{ t('worker.summary.sipExtension') }}
+                <VnLv :label="t('worker.summary.sipExtension')">
+                    <template #value>
                         <VnLinkPhone :phone-number="worker?.sip?.extension" />
                     </template>
                 </VnLv>