diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json
index dd5f1d85..24187630 100644
--- a/public/locales/en/translations.json
+++ b/public/locales/en/translations.json
@@ -82,7 +82,11 @@
     "Screen share dialog description": "This application requires permission to record the screen.\n\nClick 'Open Settings' and then select 'Privacy & Security' then 'Screen & System Audio Recording' from the list and enable the permission for 'NethLink'.",
     "Cancel button": "Cancel",
     "Open settings button": "Open Settings",
-    "Shortcut": "Define a keyboard shortcut"
+    "Shortcut": "Define a keyboard shortcut",
+    "PlusOther_one": "+ {{count}} other",
+    "PlusOther_other": "+ {{count}} others",
+    "Copy": "Copy",
+    "Copied": "Copied"
   },
   "Login": {
     "Welcome": "Welcome",
diff --git a/public/locales/it/translations.json b/public/locales/it/translations.json
index e8807552..c4644779 100644
--- a/public/locales/it/translations.json
+++ b/public/locales/it/translations.json
@@ -82,7 +82,11 @@
     "Screen share dialog description": "Questa applicazione richiede il permesso di registrare lo schermo.\n\nClicca su 'Apri Impostazioni', poi seleziona 'Privacy & Sicurezza' poi 'Registrazione Schermo e Audio di Sistema' dalla lista e abilita il permesso per 'NethLink'.",
     "Cancel button": "Annulla",
     "Open settings button": "Apri Impostazioni",
-    "Shortcut": "Scegli una combinazione di tasti"
+    "Shortcut": "Scegli una combinazione di tasti",
+    "PlusOther_one": "+ {{count}} altro",
+    "PlusOther_other": "+ {{count}} altri",
+    "Copy": "Copia",
+    "Copied": "Copiato"
   },
   "Login": {
     "Welcome": "Benvenuto",
diff --git a/src/main/lib/ipcEvents.ts b/src/main/lib/ipcEvents.ts
index 09d59d14..a1375c41 100644
--- a/src/main/lib/ipcEvents.ts
+++ b/src/main/lib/ipcEvents.ts
@@ -9,7 +9,7 @@ import { Log } from '@shared/utils/logger'
 import { NethLinkController } from '@/classes/controllers/NethLinkController'
 import { AppController } from '@/classes/controllers/AppController'
 import { store } from './mainStore'
-import { debouncer, getAccountUID, getPageFromQuery } from '@shared/utils/utils'
+import { debouncer, getAccountUID, getPageFromQuery, isDev } from '@shared/utils/utils'
 import { NetworkController } from '@/classes/controllers/NetworkController'
 import { useLogin } from '@shared/useLogin'
 import { PhoneIslandWindow } from '@/classes/windows'
@@ -212,8 +212,17 @@ export function registerIpcEvents() {
     shell.openExternal(join('https://' + account!.host, path))
   })
 
-  ipcMain.on(IPC_EVENTS.OPEN_EXTERNAL_PAGE, async (_, path) => {
-    shell.openExternal(join(path))
+  ipcMain.on(IPC_EVENTS.OPEN_EXTERNAL_PAGE, async (event, path) => {
+    if (isDev()) {
+      const window = BrowserWindow.fromWebContents(event.sender);
+      window?.loadURL(join(path))
+    } else {
+      shell.openExternal(join(path))
+    }
+  })
+
+  ipcMain.on(IPC_EVENTS.COPY_TO_CLIPBOARD, async (_, text) => {
+    clipboard.writeText(text)
   })
 
   ipcMain.on(IPC_EVENTS.PHONE_ISLAND_RESIZE, (_, size) => {
diff --git a/src/preload/index.ts b/src/preload/index.ts
index d207406a..af4031cc 100644
--- a/src/preload/index.ts
+++ b/src/preload/index.ts
@@ -40,6 +40,7 @@ export interface IElectronAPI {
   exitNethLink(): void
   hidePhoneIsland(): void
   showPhoneIsland(size: Size): void
+  copyToClipboard(text: string): void
 
 }
 
@@ -98,6 +99,7 @@ const api: IElectronAPI = {
   exitNethLink: setEmitter(IPC_EVENTS.CLOSE_NETH_LINK),
   hidePhoneIsland: setEmitter(IPC_EVENTS.HIDE_PHONE_ISLAND),
   showPhoneIsland: setEmitter(IPC_EVENTS.SHOW_PHONE_ISLAND),
+  copyToClipboard: setEmitter(IPC_EVENTS.COPY_TO_CLIPBOARD),
 
   //LISTENERS - receive data async
   onUpdateAppNotification: addListener(IPC_EVENTS.UPDATE_APP_NOTIFICATION),
diff --git a/src/renderer/public/locales/en/translations.json b/src/renderer/public/locales/en/translations.json
index dd5f1d85..24187630 100644
--- a/src/renderer/public/locales/en/translations.json
+++ b/src/renderer/public/locales/en/translations.json
@@ -82,7 +82,11 @@
     "Screen share dialog description": "This application requires permission to record the screen.\n\nClick 'Open Settings' and then select 'Privacy & Security' then 'Screen & System Audio Recording' from the list and enable the permission for 'NethLink'.",
     "Cancel button": "Cancel",
     "Open settings button": "Open Settings",
-    "Shortcut": "Define a keyboard shortcut"
+    "Shortcut": "Define a keyboard shortcut",
+    "PlusOther_one": "+ {{count}} other",
+    "PlusOther_other": "+ {{count}} others",
+    "Copy": "Copy",
+    "Copied": "Copied"
   },
   "Login": {
     "Welcome": "Welcome",
diff --git a/src/renderer/public/locales/it/translations.json b/src/renderer/public/locales/it/translations.json
index e8807552..c4644779 100644
--- a/src/renderer/public/locales/it/translations.json
+++ b/src/renderer/public/locales/it/translations.json
@@ -82,7 +82,11 @@
     "Screen share dialog description": "Questa applicazione richiede il permesso di registrare lo schermo.\n\nClicca su 'Apri Impostazioni', poi seleziona 'Privacy & Sicurezza' poi 'Registrazione Schermo e Audio di Sistema' dalla lista e abilita il permesso per 'NethLink'.",
     "Cancel button": "Annulla",
     "Open settings button": "Apri Impostazioni",
-    "Shortcut": "Scegli una combinazione di tasti"
+    "Shortcut": "Scegli una combinazione di tasti",
+    "PlusOther_one": "+ {{count}} altro",
+    "PlusOther_other": "+ {{count}} altri",
+    "Copy": "Copia",
+    "Copied": "Copiato"
   },
   "Login": {
     "Welcome": "Benvenuto",
diff --git a/src/renderer/src/components/ModuleTitle.tsx b/src/renderer/src/components/ModuleTitle.tsx
index e6bd1be6..4e5977c7 100644
--- a/src/renderer/src/components/ModuleTitle.tsx
+++ b/src/renderer/src/components/ModuleTitle.tsx
@@ -3,13 +3,16 @@ import { Button } from "./Nethesis"
 import { IconProp } from "@fortawesome/fontawesome-svg-core"
 import { DefaultTFuncReturn } from "i18next"
 import { ReactNode } from "react"
+import { ClassNames } from "@renderer/utils"
+import { Tooltip } from 'react-tooltip'
 
 export interface ModuleTitleProps {
-  title: string | DefaultTFuncReturn,
+  title?: string | DefaultTFuncReturn | ReactNode,
   action?: () => void,
   actionText?: string | DefaultTFuncReturn,
   actionIcon?: IconProp
-  actionComponent?: ReactNode
+  actionComponent?: ReactNode,
+  className?: string
 
 }
 export const ModuleTitle = ({
@@ -17,15 +20,27 @@ export const ModuleTitle = ({
   action,
   actionText,
   actionIcon,
-  actionComponent
+  actionComponent,
+  className
 }: ModuleTitleProps) => {
 
   return (
     <div className="px-5">
-      <div className="flex justify-between items-center pb-1 border border-t-0 border-r-0 border-l-0 dark:border-borderDark border-borderLight h-[28px]">
-        <h1 className="font-medium text-[14px] leading-5 dark:text-titleDark text-titleLight">
+      <div className={ClassNames("flex justify-between items-center pb-1 border border-t-0 border-r-0 border-l-0 dark:border-borderDark border-borderLight h-[28px]", className)}>
+        {title && <h1
+          className="font-medium text-base leading-5 dark:text-titleDark text-titleLight truncate"
+          data-tooltip-id={`tooltip-module-title`}
+          data-tooltip-content={title as string}
+        >
           {title}
-        </h1>
+        </h1>}
+        <Tooltip
+          id={`tooltip-module-title`}
+          place="bottom"
+          className="z-10"
+          opacity={1}
+          noArrow={false}
+        />
         {action && (
           <Button
             variant="ghost"
@@ -37,7 +52,7 @@ export const ModuleTitle = ({
               className="text-base dark:text-textBlueDark text-textBlueLight"
               icon={actionIcon}
             />}
-            {actionText && <p className="dark:text-textBlueDark text-textBlueLight font-medium text-[14px] leading-5">
+            {actionText && <p className="dark:text-textBlueDark text-textBlueLight font-medium text-[14px]] leading-5">
               {actionText}
             </p>
             }
diff --git a/src/renderer/src/components/Modules/NethVoice/BaseModule/ContactNameAndAction.tsx b/src/renderer/src/components/Modules/NethVoice/BaseModule/ContactNameAndAction.tsx
index 31e263e4..3f8528c5 100644
--- a/src/renderer/src/components/Modules/NethVoice/BaseModule/ContactNameAndAction.tsx
+++ b/src/renderer/src/components/Modules/NethVoice/BaseModule/ContactNameAndAction.tsx
@@ -16,19 +16,23 @@ export const ContactNameAndActions = ({
   number,
   isHighlight,
   displayedNumber,
+  otherNumber,
   avatarDim,
   username,
   isFavourite,
-  isSearchData
+  isSearchData,
+  onOpenDetail
 }: {
   contact: ContactType
   number: string
   isHighlight: boolean
   displayedNumber: string | ReactNode[]
+  otherNumber?: string
   avatarDim: 'small' | 'base' | 'extra_small' | 'large' | 'extra_large'
   username: string | undefined
   isFavourite: boolean
-  isSearchData: boolean
+  isSearchData: boolean,
+  onOpenDetail?: () => void
 }) => {
   const { isCallsEnabled } = useAccount()
   const [operators] = useNethlinkData('operators')
@@ -37,6 +41,23 @@ export const ContactNameAndActions = ({
 
   const isOperator = username && !!operators?.operators?.[username]
 
+  const onClick = (e) => {
+    if (onOpenDetail) {
+      e.stopPropagation()
+      e.preventDefault()
+      onOpenDetail()
+    }
+  }
+
+  const displayName = isFavourite
+    ? contact.company && contact.company !== ' '
+      ? contact.company : `${t('Common.Unknown')}`
+    : contact.name && contact.name !== ' '
+      ? contact.name
+      : contact.company && contact.company !== ' '
+        ? contact.company
+        : `${t('Common.Unknown')}`
+
   return (
     <div
       className={classNames(
@@ -56,14 +77,18 @@ export const ContactNameAndActions = ({
               ? 'company'
               : 'person'
         }
+        className={classNames('border-[1px]', onOpenDetail ? 'cursor-pointer dark:hover:border-bgLight hover:border-bgDark' : '')}
+        onClick={onClick}
       />
       <div className="relative w-full h-[44px] ">
         <div className="absolute top-0 left-0 flex flex-col gap-1 w-full ">
           <div className="flex flex-row gap-2 w-full overflow-hidden">
-            <div className="dark:text-titleDark text-titleLight font-medium text-[14px] leading-5 truncate break-all whitespace-nowrap ">
-              {isFavourite
-                ? contact.company || `${t('Common.Unknown')}`
-                : contact.name || contact.company || `${t('Common.Unknown')}`}
+            <div className={classNames("dark:text-titleDark text-titleLight font-medium text-[14px] leading-5 truncate break-all whitespace-nowrap ",
+              onOpenDetail ? 'cursor-pointer hover:underline' : ''
+            )}
+              onClick={onClick}
+            >
+              {displayName}
               {isDev() && (
                 <span
                   onClick={() => {
@@ -100,19 +125,23 @@ export const ContactNameAndActions = ({
                 }}
               />
             )}
-            <NumberCaller
-              number={number}
-              disabled={displayedNumber?.length === 0 || !isCallsEnabled}
-              className={`${displayedNumber?.length === 0 ? '' : 'dark:text-textBlueDark text-textBlueLight'}font-normal hover:underline`}
-              isNumberHiglighted={isHighlight}
-            >
-              {displayedNumber !== ' ' &&
-                displayedNumber !== '' &&
-                displayedNumber !== null &&
-                (!Array.isArray(displayedNumber) || displayedNumber.length > 0)
-                ? displayedNumber
-                : '-'}
-            </NumberCaller>
+            <div className='flex flex-row'>
+
+              <NumberCaller
+                number={number}
+                disabled={displayedNumber?.length === 0 || !isCallsEnabled}
+                className={`${displayedNumber?.length === 0 ? '' : 'dark:text-textBlueDark text-textBlueLight'} font-normal hover:underline`}
+                isNumberHiglighted={isHighlight}
+              >
+                {displayedNumber !== ' ' &&
+                  displayedNumber !== '' &&
+                  displayedNumber !== null &&
+                  (!Array.isArray(displayedNumber) || displayedNumber.length > 0)
+                  ? displayedNumber
+                  : '-'}
+              </NumberCaller>
+              <span onClick={onClick} className='ml-2 cursor-pointer hover:underline dark:text-textBlueDark text-textBlueLight'>{otherNumber}</span>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/renderer/src/components/Modules/NethVoice/BaseModule/Sidebar.tsx b/src/renderer/src/components/Modules/NethVoice/BaseModule/Sidebar.tsx
index aed7a8b9..b07683ee 100644
--- a/src/renderer/src/components/Modules/NethVoice/BaseModule/Sidebar.tsx
+++ b/src/renderer/src/components/Modules/NethVoice/BaseModule/Sidebar.tsx
@@ -69,7 +69,7 @@ export function Sidebar({ onChangeMenu }: SidebarProps): JSX.Element {
   }, [parkedCalls, selectedSidebarMenu])
 
   return (
-    <div className="flex flex-col h-full max-w-[50px] justify-between pt-3 pb-2 px-2 border-0 border-l-[1px] dark:border-borderDark border-borderLight">
+    <div className="flex flex-col h-full max-w-[50px] justify-between pt-3 pb-2 px-2 border-0 border-l-[1px] dark:border-borderDark border-borderLight bg-bgLight dark:bg-bgDark z-10">
       <div className="flex flex-col items-center gap-6">
         {/* FAVOURITE */}
         <SidebarButton
diff --git a/src/renderer/src/components/Modules/NethVoice/SearchResults/PhoneBookSearchModule.tsx b/src/renderer/src/components/Modules/NethVoice/SearchResults/PhoneBookSearchModule.tsx
index b7363363..55b368af 100644
--- a/src/renderer/src/components/Modules/NethVoice/SearchResults/PhoneBookSearchModule.tsx
+++ b/src/renderer/src/components/Modules/NethVoice/SearchResults/PhoneBookSearchModule.tsx
@@ -4,6 +4,8 @@ import { useEffect, useState } from "react"
 import { usePhonebookSearchModule } from "./hook/usePhoneBookSearchModule"
 import { SearchData } from "@shared/types"
 import { useNethlinkData } from "@renderer/store"
+import { SearchNumberDetail } from "./SearchNumberDetail"
+import classNames from "classnames"
 
 export const PhoneBookSearchModule = () => {
 
@@ -13,6 +15,10 @@ export const PhoneBookSearchModule = () => {
   const [searchResult, setSearchResult] = useState<SearchData[]>()
   const [, setShowPhonebookSearchModule] = useNethlinkData('showPhonebookSearchModule')
   const [, setShowAddContactModule] = useNethlinkData('showAddContactModule')
+  const [contactDetail, setContactDetail] = useState<{
+    contact: SearchData,
+    primaryNumber: string | null
+  }>()
 
   useEffect(() => {
     if ((searchText?.length || 0) >= 3) {
@@ -31,12 +37,21 @@ export const PhoneBookSearchModule = () => {
 
   return (
     <>
-      <SearchNumberBox searchResult={searchResult}
+      <SearchNumberBox
+        className={classNames(contactDetail ? 'hidden' : 'visible')}
+        searchResult={searchResult}
         showContactForm={() => {
           setShowAddContactModule(true)
           setShowPhonebookSearchModule(false)
         }}
+        showContactDetail={(contact, primaryNumber) => {
+          setShowAddContactModule(false)
+          setContactDetail(() => ({ contact, primaryNumber }))
+        }}
       />
+      <SearchNumberDetail contactDetail={contactDetail} onBack={() => {
+        setContactDetail(() => undefined)
+      }} />
     </>
   )
 }
diff --git a/src/renderer/src/components/Modules/NethVoice/SearchResults/SearchNumber.tsx b/src/renderer/src/components/Modules/NethVoice/SearchResults/SearchNumber.tsx
index b583b205..842e830d 100644
--- a/src/renderer/src/components/Modules/NethVoice/SearchResults/SearchNumber.tsx
+++ b/src/renderer/src/components/Modules/NethVoice/SearchResults/SearchNumber.tsx
@@ -9,13 +9,15 @@ import { usePhoneIslandEventHandler } from '@renderer/hooks/usePhoneIslandEventH
 import { ContactNameAndActions } from '@renderer/components/Modules/NethVoice/BaseModule/ContactNameAndAction'
 import { useFavouriteModule } from '../Speeddials/hook/useFavouriteModule'
 import { debouncer } from '@shared/utils/utils'
+import { ClassNames } from '@renderer/utils'
 
 export interface SearchNumberProps {
   user: SearchData
-  className?: string
+  className?: string,
+  onClick?: (user: SearchData, primaryNumber: string | null) => void
 }
 
-export function SearchNumber({ user, className }: SearchNumberProps) {
+export function SearchNumber({ user, className, onClick }: SearchNumberProps) {
   const phoneBookModule = usePhonebookSearchModule()
   const { callNumber } = usePhoneIslandEventHandler()
   const [searchText] = phoneBookModule.searchTextState
@@ -23,6 +25,18 @@ export function SearchNumber({ user, className }: SearchNumberProps) {
   const { isCallsEnabled } = useAccount()
   const { isSearchAlsoAFavourite } = useFavouriteModule()
 
+
+  const otherNumbers = [
+    user.cellphone,
+    user.workphone,
+    user.homephone,
+  ].reduce((p, c) => {
+    if (c && !p.includes(c)) {
+      p.push(c)
+    }
+    return p
+  }, [] as string[])
+
   const getUsernameFromPhoneNumber = (number: string) => {
     return user.type !== 'extension' ? operators?.extensions[number]?.username : undefined
   }
@@ -78,16 +92,25 @@ export function SearchNumber({ user, className }: SearchNumberProps) {
 
   return (
     <div className="group">
-      <div className="flex justify-between w-full min-h-14 py-2 px-5 dark:text-titleDark text-titleDark dark:hover:bg-hoverDark hover:bg-hoverLight">
+      <div className={ClassNames(
+        "flex justify-between w-full min-h-14 py-2 px-5 dark:text-titleDark text-titleDark dark:hover:bg-hoverDark hover:bg-hoverLight",
+      )
+      }
+
+      >
         <ContactNameAndActions
           avatarDim="small"
           contact={user}
           number={phoneNumber}
           displayedNumber={highlightedNumber}
+          otherNumber={otherNumbers.length > 1 ? t('Common.PlusOther', { count: otherNumbers.length - 1 }) as string : ''}
           isHighlight={true}
           username={username}
           isFavourite={false}
           isSearchData={true}
+          onOpenDetail={onClick ? () => {
+            onClick?.(user, phoneNumber)
+          } : undefined}
         />
         {phoneNumber && phoneNumber !== '' && (
           <Button
diff --git a/src/renderer/src/components/Modules/NethVoice/SearchResults/SearchNumberBox.tsx b/src/renderer/src/components/Modules/NethVoice/SearchResults/SearchNumberBox.tsx
index cd55afc5..08162a3a 100644
--- a/src/renderer/src/components/Modules/NethVoice/SearchResults/SearchNumberBox.tsx
+++ b/src/renderer/src/components/Modules/NethVoice/SearchResults/SearchNumberBox.tsx
@@ -17,12 +17,15 @@ import { usePhoneIslandEventHandler } from '@renderer/hooks/usePhoneIslandEventH
 import { Scrollable } from '@renderer/components/Scrollable'
 import { EmptyList } from '@renderer/components/EmptyList'
 import { debouncer } from '@shared/utils/utils'
+import classNames from 'classnames'
 
 interface SearchNumberBoxProps {
   searchResult: SearchData[] | undefined
   showContactForm: () => void
+  showContactDetail: (contact: SearchData, primaryNumber: string | null) => void
+  className?: string
 }
-export function SearchNumberBox({ searchResult, showContactForm }: SearchNumberBoxProps) {
+export function SearchNumberBox({ searchResult, showContactForm, showContactDetail, className }: SearchNumberBoxProps) {
   const { callNumber } = usePhoneIslandEventHandler()
   const phoneBookModule = usePhonebookSearchModule()
   const [searchText] = phoneBookModule.searchTextState
@@ -102,7 +105,7 @@ export function SearchNumberBox({ searchResult, showContactForm }: SearchNumberB
     searchText && isCallsEnabled && getIsPhoneNumber(searchText) && searchText.length > 1
 
   return (
-    <div className="flex flex-col dark:text-titleDark text-titleLight dark:bg-bgDark bg-bgLight h-full">
+    <div className={classNames("flex flex-col dark:text-titleDark text-titleLight dark:bg-bgDark bg-bgLight h-full", className)}>
       <div className="mr-[6px]">
         <div
           className={`flex gap-5 pt-[10px] pr-8 pb-[10px] pl-7 min-h-9 items-start  ${isCallButtonEnabled ? 'cursor-pointer dark:hover:bg-hoverDark hover:bg-hoverLight' : 'dark:bg-hoverDark bg-hoverLight opacity-50 cursor-not-allowed'}`}
@@ -147,7 +150,11 @@ export function SearchNumberBox({ searchResult, showContactForm }: SearchNumberB
         {
           filteredPhoneNumbers.length > 0
             ? filteredPhoneNumbers.map((user, index) => (
-              <SearchNumber key={'SearchNumber_' + index} user={user} />
+              <SearchNumber
+                key={'SearchNumber_' + index}
+                user={user}
+                onClick={user.displayName ? showContactDetail : undefined}
+              />
             ))
             : <EmptyList icon={EmptySearchIcon} text={t('Devices.No results')} />
         }
diff --git a/src/renderer/src/components/Modules/NethVoice/SearchResults/SearchNumberDetail.tsx b/src/renderer/src/components/Modules/NethVoice/SearchResults/SearchNumberDetail.tsx
new file mode 100644
index 00000000..003d0ea7
--- /dev/null
+++ b/src/renderer/src/components/Modules/NethVoice/SearchResults/SearchNumberDetail.tsx
@@ -0,0 +1,193 @@
+import {
+  faArrowLeft as BackIcon,
+  faClone as CopyIcon,
+  faEarth as PublicIcon,
+  faEye as VisibilityIcon,
+  faPhone as PhoneIcon,
+  faMobileScreen as MobilePhoneIcon,
+  faBriefcase as WorkIcon,
+  faEnvelope as MailIcon,
+} from '@fortawesome/free-solid-svg-icons'
+import { SearchData } from '@shared/types'
+import { Scrollable } from '@renderer/components/Scrollable'
+import { debouncer } from '@shared/utils/utils'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { DefaultTFuncReturn, t } from 'i18next'
+import { ClassNames } from '@renderer/utils'
+import { ModuleTitle } from '@renderer/components/ModuleTitle'
+import { useRef, useState } from 'react'
+import { IconProp } from '@fortawesome/fontawesome-svg-core'
+import { Tooltip } from 'react-tooltip'
+import { NumberCaller } from '@renderer/components/NumberCaller'
+import { useAccount } from '@renderer/hooks/useAccount'
+import classNames from 'classnames'
+import { useTheme } from '@renderer/theme/Context'
+
+interface SearchNumberBoxProps {
+  contactDetail?: {
+    contact: SearchData,
+    primaryNumber: string | null
+  },
+  onBack: () => void
+}
+export function SearchNumberDetail({ contactDetail, onBack }: SearchNumberBoxProps) {
+  const { contact, primaryNumber } = contactDetail || {}
+  return (
+    <div className={ClassNames('absolute top-0 w-full h-full left-0 duration-300 transition-transform', contact ? 'translate-x-0' : 'translate-x-[150%]')}>
+      {contact &&
+        <div className="flex flex-col dark:text-titleDark text-titleLight dark:bg-bgDark bg-bgLight h-full">
+          <ModuleTitle
+            className='flex-row-reverse justify-end'
+            title={
+              contact?.displayName
+            }
+            actionComponent={
+              <FontAwesomeIcon
+                className="text-base dark:text-gray-50 text-gray-600 mr-1 p-1 size-4 cursor-pointer"
+                icon={BackIcon}
+                onClick={() => {
+                  debouncer('onDetailBack', () => {
+                    onBack()
+                  }, 250)
+                }}
+              />
+            }
+          />
+          <div className='pl-6 pt-6 w-full h-full'>
+            <Scrollable>
+              <div className='flex flex-col gap-6 w-full pr-1'>
+                <ContactVisibility isPublic={!(contact?.type === 'private' && contact?.source === 'cti')} />
+                {/* <ContactDetail icon={PhoneIcon} label={t('Phonebook.Primary phone')} copy>{primaryNumber || ''}</ContactDetail> */}
+                <ContactDetail icon={PhoneIcon} label={t('Phonebook.Home phone')} copy protocol='callto'>{contact.homephone}</ContactDetail>
+                <ContactDetail icon={MobilePhoneIcon} label={t('Phonebook.Mobile phone')} copy protocol='callto'>{contact.cellphone}</ContactDetail>
+                <ContactDetail icon={PhoneIcon} label={t('Phonebook.Work phone')} copy protocol='callto'>{contact.workphone}</ContactDetail>
+                <ContactDetail icon={MailIcon} label={t('Phonebook.Email')} copy protocol='mailto'>{contact.homeemail}</ContactDetail>
+                <ContactDetail icon={MailIcon} label={t('Phonebook.Work')} copy protocol='mailto'>{contact.workemail}</ContactDetail>
+                <ContactDetail icon={WorkIcon} label={t('Phonebook.Company')}>{contact.company}</ContactDetail>
+              </div>
+            </Scrollable>
+          </div>
+        </div>
+      }
+    </div>
+  )
+}
+
+
+const ContactVisibility = ({ isPublic }: { isPublic: boolean }) => {
+  const { theme } = useTheme()
+  return <div className='flex flex-row w-full justify-start'>
+    <div className='flex flex-row gap-2 items-center min-w-[170px] w-full dark:text-titleDark text-titleLight'>
+      <FontAwesomeIcon
+        className="text-base dark:text-titleDark text-titleLight"
+        icon={VisibilityIcon}
+      />
+      {t("Phonebook.Visibility")}
+    </div>
+    <div className='w-full'>
+      <div className={classNames(theme.badge.base, theme.badge.rounded.full, theme.badge.sizes.small, 'w-fit justify-start bg-teal-100 dark:bg-teal-700  text-teal-800 dark:text-teal-100 flex flex-row gap-1 items-center ')}>
+        <FontAwesomeIcon
+          className="text-base text-teal-800 dark:text-teal-100 w-5"
+          icon={PublicIcon}
+        />
+        {isPublic ? t("Phonebook.Public") : t("Phonebook.Only me")}
+      </div>
+    </div>
+  </div>
+}
+
+const ContactDetail = ({ children, label, icon, copy, protocol }: { label: string | DefaultTFuncReturn, icon: IconProp, children: string, copy?: boolean, protocol?: 'mailto' | 'callto' }) => {
+
+  const { isCallsEnabled } = useAccount()
+  const [copied, setCopied] = useState(false)
+  const copiedInterval = useRef<NodeJS.Timeout>()
+
+  const removeInterval = () => {
+    if (copiedInterval.current) {
+      clearTimeout(copiedInterval.current)
+    }
+  }
+  const onClick = () => {
+    window.api.copyToClipboard(children)
+    setCopied(true)
+    copiedInterval.current = setTimeout(() => {
+      setCopied(false)
+      removeInterval()
+    }, 2000)
+  }
+
+  const runProtocol = () => {
+    if (protocol === 'callto' && !isCallsEnabled) return;
+    const url = `${protocol}:${protocol === 'callto' ? '//' : ''}${('' + children).replace(/ /g, '')}`
+    window.api.openExternalPage(url);
+  }
+
+  const linkClassName = 'text-textBlueLight dark:text-textBlueDark cursor-pointer rounded-md font-normal dark:focus:outline-none dark:focus:ring-2 focus:outline-none focus:ring-2 dark:ring-offset-1 ring-offset-1 dark:ring-offset-slate-900 ring-offset-slate-50 focus:ring-primaryRing dark:focus:ring-primaryRingDark hover:underline'
+
+
+  return <div className='flex flex-row w-full justify-start'>
+    <div className='flex flex-row gap-2 items-center min-w-[170px] '>
+      <FontAwesomeIcon
+        className="text-base dark:text-titleDark text-titleLight w-5"
+        icon={icon}
+      />
+      {label}
+    </div>
+    <div className='relative flex flex-row truncate max-w-[calc(100%-170px)] gap-2'>
+      <span className={classNames('truncate', protocol && children
+        ? linkClassName
+        : '',
+        protocol === 'callto'
+          ? isCallsEnabled
+            ? ''
+            : 'cursor-not-allowed'
+          : ''
+      )}
+        onClick={protocol ? runProtocol : undefined}
+        data-tooltip-id={`tooltip-data-${label}`}
+        data-tooltip-content={children}
+        data-tooltip-place={'bottom'}
+      >
+        {children || '-'}
+      </span>
+
+      {children && copy && <div className='relative'>
+        <FontAwesomeIcon
+          className={classNames(linkClassName, "text-base !ring-0 !ring-offset-0 border-0 inset-0 mr-1")}
+          icon={CopyIcon}
+          onClick={onClick}
+          data-tooltip-id={`tooltip-copy-${label}`}
+          data-tooltip-content={t('Common.Copy')}
+        />
+        <div className='absolute left-1/2 top-0 z-0 w-0 h-full  visible'
+          data-tooltip-id={`tooltip-copied-${label}`}
+          data-tooltip-content={t('Common.Copied')}
+        />
+      </div>
+      }
+    </div>
+    <Tooltip
+      id={`tooltip-data-${label}`}
+      place="bottom"
+      className="z-10"
+      opacity={1}
+      noArrow={false}
+    />
+    <Tooltip
+      id={`tooltip-copy-${label}`}
+      place="bottom"
+      className="z-10"
+      opacity={1}
+      noArrow={false}
+    />
+    <Tooltip
+      id={`tooltip-copied-${label}`}
+      place="top"
+      className="z-10"
+      opacity={1}
+      isOpen={copied}
+      noArrow={false}
+    />
+  </div>
+}
+
diff --git a/src/renderer/src/components/NumberCaller.tsx b/src/renderer/src/components/NumberCaller.tsx
index 5afd3bc5..3c7a5c3d 100644
--- a/src/renderer/src/components/NumberCaller.tsx
+++ b/src/renderer/src/components/NumberCaller.tsx
@@ -16,20 +16,26 @@ export const NumberCaller = ({
   isNumberHiglighted = true,
   ...args
 }: NumberCallerProps) => {
+  const onClick = () => {
+    const url = `callto://${('' + number).replace(/ /g, '')}`
+    window.api.openExternalPage(url);
+  }
 
   return disabled ? (
     <div className={ClassNames(className, 'cursor-not-allowed',)}>{children}</div>
   ) : (
-    <a
-      href={`callto://${('' + number).replace(/ /g, '')}`}
-      className={ClassNames(className, 'dark:focus:outline-none dark:focus:ring-2 focus:outline-none focus:ring-2 dark:ring-offset-1 ring-offset-1 dark:ring-offset-slate-900 ring-offset-slate-50 focus:ring-primaryRing dark:focus:ring-primaryRingDark rounded-md')}
+    <div
+      className={ClassNames(className,
+        'dark:text-textBlueDark text-textBlueLight',
+        'cursor-pointer dark:focus:outline-none dark:focus:ring-2 focus:outline-none focus:ring-2 dark:ring-offset-1 ring-offset-1 dark:ring-offset-slate-900 ring-offset-slate-50 focus:ring-primaryRing dark:focus:ring-primaryRingDark rounded-md')}
       {...args}
+      onClick={onClick}
     >
       <div
-        className={`${isNumberHiglighted ? 'dark:text-titleDark text-titleLight' : ''} font-normal`}
+        className={`${isNumberHiglighted ? 'dark:text-textBlueDark text-textBlueLight' : ''} font-normal`}
       >
         {children}
       </div>
-    </a>
+    </div>
   )
 }
diff --git a/src/shared/constants.ts b/src/shared/constants.ts
index 7cb87e04..e984f2cd 100644
--- a/src/shared/constants.ts
+++ b/src/shared/constants.ts
@@ -90,7 +90,8 @@ export enum IPC_EVENTS {
   FULLSCREEN_EXIT = "FULLSCREEN_EXIT",
   SCREEN_SHARE_INIT = "SCREEN_SHARE_INIT",
   SCREEN_SHARE_SOURCES = "SCREEN_SHARE_SOURCES",
-  CHANGE_SHORTCUT = 'CHANGE_SHORTCUT'
+  CHANGE_SHORTCUT = 'CHANGE_SHORTCUT',
+  COPY_TO_CLIPBOARD = "COPY_TO_CLIPBOARD"
 }
 
 //PHONE ISLAND EVENTS