diff --git a/packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.styles.scss b/packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.styles.scss
index 966cad3f5..abd032830 100644
--- a/packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.styles.scss
+++ b/packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.styles.scss
@@ -116,4 +116,99 @@
   .media-icon.chat {
     color: var(--mds-color-theme-indicator-secure);
   }
+}
+.call-control-task-tooltip::part(popover-content) {
+  white-space: normal;
+  word-break: break-all;
+}
+
+.call-control-task-tooltip {
+  min-width: 30%;
+  width: auto;
+  text-align: center;
+}
+
+.digital-customer-name::part(text),
+.voice-customer-name::part(text),
+.digital-phone-number::part(text),
+.voice-phone-number::part(text) {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0;
+}
+
+.digital-customer-name {
+   width: auto; 
+}
+
+.digital-phone-number {
+   width: auto;
+}
+
+@media (min-width: 64.0625rem) and (max-width: 75rem) {
+  .digital-customer-name {
+    width: 50rem;
+    max-width: 50rem;
+  }
+
+  .digital-phone-number {
+    width: 16rem;
+    max-width: 16rem;
+  }
+}
+
+@media (min-width: 48.0625rem) and (max-width: 64rem) {
+  .digital-customer-name {
+    width: 31.25rem;
+    max-width: 31.25rem;
+  }
+
+  .digital-phone-number {
+    width: 15rem;
+    max-width: 15rem;
+  }
+  .call-control-task-tooltip {
+   width: 50%;
+   text-align: center;
+  }
+}
+
+@media (min-width: 30.0625rem) and (max-width: 48rem) {
+  .digital-customer-name {
+    width: 15.625rem;
+    max-width: 15.625rem;
+  }
+
+  .digital-phone-number {
+    width: 13rem;
+    max-width: 13rem;
+  }
+  .call-control-task-tooltip {
+   width: 50%;
+   text-align: center;
+  }
+}
+
+@media (min-width: 20rem) and (max-width: 30.0625rem) {
+  .digital-customer-name {
+    width: 9.375rem;
+    max-width: 9.375rem;
+  }
+
+  .digital-phone-number {
+    width: 12rem;
+    max-width: 12rem;
+  }
+  .call-control-task-tooltip {
+   width: 50%;
+   text-align: center;
+  }
+}
+
+@media (min-width: 15.625rem) and (max-width: 20rem){
+  .call-control-task-tooltip {
+    width: 50%;
+    text-align: center;
+  }
 }
\ No newline at end of file
diff --git a/packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.tsx b/packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.tsx
index c2672613f..fdacfd384 100644
--- a/packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.tsx
+++ b/packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import CallControlComponent from '../CallControl/call-control';
 import {Text} from '@momentum-ui/react-collaboration';
-import {Brandvisual, Icon} from '@momentum-design/components/dist/react';
+import {Brandvisual, Icon, Tooltip} from '@momentum-design/components/dist/react';
 import './call-control-cad.styles.scss';
 import TaskTimer from '../TaskTimer/index';
 import CallControlConsultComponent from '../CallControl/CallControlCustom/call-control-consult';
@@ -60,6 +60,87 @@ const CallControlCADComponent: React.FC<CallControlComponentProps> = (props) =>
   const customerName = currentTask?.data?.interaction?.callAssociatedDetails?.customerName;
   const ani = currentTask?.data?.interaction?.callAssociatedDetails?.ani;
 
+  // Create unique IDs for tooltips
+  const customerNameTriggerId = `customer-name-trigger-${currentTask.data.interaction.interactionId}`;
+  const customerNameTooltipId = `customer-name-tooltip-${currentTask.data.interaction.interactionId}`;
+  const phoneNumberTriggerId = `phone-number-trigger-${currentTask.data.interaction.interactionId}`;
+  const phoneNumberTooltipId = `phone-number-tooltip-${currentTask.data.interaction.interactionId}`;
+
+  const renderCustomerName = () => {
+    const customerText = isSocial ? customerName || NO_CUSTOMER_NAME : ani || NO_CALLER_ID;
+
+    const textComponent = (
+      <Text
+        className={!isTelephony ? 'digital-customer-name' : 'voice-customer-name'}
+        type="body-large-bold"
+        tagName={'p'}
+        id={!isTelephony ? customerNameTriggerId : undefined}
+      >
+        {customerText}
+      </Text>
+    );
+
+    if (!isTelephony) {
+      return (
+        <>
+          {textComponent}
+          <Tooltip
+            color="contrast"
+            delay="0,0"
+            id={customerNameTooltipId}
+            placement="top-start"
+            offset={4}
+            tooltip-type="description"
+            triggerID={customerNameTriggerId}
+            className="call-control-task-tooltip"
+          >
+            <Text tagName="small">{customerText}</Text>
+          </Tooltip>
+        </>
+      );
+    }
+
+    return textComponent;
+  };
+
+  const renderPhoneNumber = () => {
+    const phoneText = isSocial ? customerName || NO_CUSTOMER_NAME : ani || NO_PHONE_NUMBER;
+    const labelText = isSocial ? CUSTOMER_NAME : PHONE_NUMBER;
+
+    const textComponent = (
+      <Text
+        className={!isTelephony ? 'digital-phone-number' : 'voice-phone-number'}
+        type="body-secondary"
+        tagName={'p'}
+        id={!isTelephony ? phoneNumberTriggerId : undefined}
+      >
+        <strong>{labelText}</strong> <span>{phoneText}</span>
+      </Text>
+    );
+
+    if (!isTelephony) {
+      return (
+        <>
+          {textComponent}
+          <Tooltip
+            color="contrast"
+            delay="0,0"
+            id={phoneNumberTooltipId}
+            placement="top-start"
+            offset={4}
+            tooltip-type="description"
+            triggerID={phoneNumberTriggerId}
+            className="call-control-task-tooltip"
+          >
+            <Text tagName="small">{phoneText}</Text>
+          </Tooltip>
+        </>
+      );
+    }
+
+    return textComponent;
+  };
+
   if (!currentTask) return null;
 
   return (
@@ -76,9 +157,7 @@ const CallControlCADComponent: React.FC<CallControlComponentProps> = (props) =>
           </div>
 
           <div className="customer-info">
-            <Text className="customer-id" type="body-large-bold" tagName={'small'}>
-              {isSocial ? customerName || NO_CUSTOMER_NAME : ani || NO_CALLER_ID}
-            </Text>
+            {renderCustomerName()}
             <div className="call-details">
               <Text className="call-timer" type="body-secondary" tagName={'small'}>
                 {currentMediaType.labelName} - <TaskTimer startTimeStamp={startTimestamp} />
@@ -110,10 +189,7 @@ const CallControlCADComponent: React.FC<CallControlComponentProps> = (props) =>
             <strong>{QUEUE}</strong>{' '}
             <span>{currentTask?.data?.interaction?.callAssociatedDetails?.virtualTeamName || NO_TEAM_NAME}</span>
           </Text>
-          <Text className="phone-number" type="body-secondary" tagName={'small'}>
-            <strong>{isSocial ? CUSTOMER_NAME : PHONE_NUMBER}</strong>{' '}
-            <span> {isSocial ? customerName || NO_CUSTOMER_NAME : ani || NO_PHONE_NUMBER}</span>
-          </Text>
+          {renderPhoneNumber()}
           <Text className="rona" type="body-secondary" tagName={'small'}>
             <strong>{RONA}</strong>{' '}
             <span>{currentTask?.data?.interaction?.callAssociatedDetails?.ronaTimeout || NO_RONA}</span>
diff --git a/packages/contact-center/cc-components/src/components/task/Task/index.tsx b/packages/contact-center/cc-components/src/components/task/Task/index.tsx
index f958e0c2f..f4c4c198b 100644
--- a/packages/contact-center/cc-components/src/components/task/Task/index.tsx
+++ b/packages/contact-center/cc-components/src/components/task/Task/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {ButtonPill, ListItemBase, ListItemBaseSection, Text} from '@momentum-ui/react-collaboration';
-import {Avatar, Brandvisual} from '@momentum-design/components/dist/react';
+import {Avatar, Brandvisual, Tooltip} from '@momentum-design/components/dist/react';
 import {PressEvent} from '@react-types/shared';
 import TaskTimer from '../TaskTimer';
 import {getMediaTypeInfo} from '../../../utils';
@@ -50,6 +50,57 @@ const Task: React.FC<TaskProps> = ({
     return str.replace(/^\s*(\w)/, (match, firstLetter) => firstLetter.toUpperCase());
   };
   const currentMediaType = getMediaTypeInfo(mediaType, mediaChannel);
+  const isNonVoiceMedia = currentMediaType.labelName !== 'Call';
+  // Create unique IDs for tooltip trigger and tooltip
+  const tooltipTriggerId = `tooltip-trigger-${interactionId}`;
+  const tooltipId = `tooltip-${interactionId}`;
+  // Helper function to get the correct CSS class
+  const getTitleClassName = () => {
+    if (isNonVoiceMedia && isIncomingTask) {
+      return 'incoming-digital-task-title';
+    }
+    if (isNonVoiceMedia && !isIncomingTask) {
+      return 'task-digital-title';
+    }
+    return 'task-title';
+  };
+  const renderTitle = () => {
+    if (!title) return null;
+
+    const textComponent = (
+      <Text
+        tagName="span"
+        type={selected ? 'body-large-bold' : 'body-large-medium'}
+        className={getTitleClassName()}
+        id={isNonVoiceMedia ? tooltipTriggerId : undefined}
+      >
+        {title}
+      </Text>
+    );
+
+    if (isNonVoiceMedia) {
+      return (
+        <>
+          {textComponent}
+          <Tooltip
+            color="contrast"
+            delay="0,0"
+            id={tooltipId}
+            placement="top-start"
+            offset={4}
+            tooltip-type="description"
+            triggerID={tooltipTriggerId}
+            className="task-tooltip"
+          >
+            {title}
+          </Tooltip>
+        </>
+      );
+    }
+
+    return textComponent;
+  };
+
   return (
     <ListItemBase
       className={`task-list-item ${selected ? 'task-list-item--selected' : ''} ${styles}`}
@@ -68,12 +119,7 @@ const Task: React.FC<TaskProps> = ({
 
       <ListItemBaseSection position="fill">
         <section className="task-details">
-          {title && (
-            <Text tagName="span" type={selected ? 'body-large-bold' : 'body-large-medium'}>
-              {title}
-            </Text>
-          )}
-
+          {renderTitle()}
           {state && !isIncomingTask && (
             <Text tagName="span" type="body-midsize-regular" className="task-text">
               {capitalizeFirstWord(state)}
diff --git a/packages/contact-center/cc-components/src/components/task/Task/styles.scss b/packages/contact-center/cc-components/src/components/task/Task/styles.scss
index 30fa6dde4..98704922a 100644
--- a/packages/contact-center/cc-components/src/components/task/Task/styles.scss
+++ b/packages/contact-center/cc-components/src/components/task/Task/styles.scss
@@ -14,7 +14,8 @@
   align-items: center;
   align-self: stretch;
   // have to override momentum default height for listitem to match the design
-  height: 5rem !important;
+  min-height: 5rem;
+  height: auto;
 
   mdc-avatar {
     --mdc-avatar-default-background-color: var(--mds-color-theme-avatar-glass-normal);
@@ -75,4 +76,94 @@
 .task-list-hover:hover{ 
   // To remove the hover effect of ListItemBase when we render an incoming task 
   background: none !important;
+}
+
+.task-details {
+  .task-digital-title {
+    width: auto;
+  }
+  
+  .incoming-digital-task-title {
+    width: 12.5rem;
+  }
+}
+
+.task-tooltip::part(popover-content) {
+  white-space: normal;
+  word-break: break-all;
+}
+
+.task-tooltip {
+  min-width: 25%;
+  width: auto;
+  text-align: center;
+}
+
+@media (min-width: 64.0625rem) and (max-width: 75rem) {
+  .task-details {
+    .task-digital-title {
+      width: 50rem;
+      max-width: 50rem;
+    }
+  }
+}
+
+@media (min-width: 48.0625rem) and (max-width: 64rem) {
+  .task-details {
+    .task-digital-title {
+      width: 31.25rem;
+      max-width: 31.25rem;
+    }
+    .incoming-digital-task-title {
+      width: 10rem;
+    }
+  }
+  .task-tooltip {
+   width: 50%;
+   text-align: center;
+}
+}
+
+@media (min-width: 30.0625rem) and (max-width: 48rem) {
+  .task-details {
+    .task-digital-title {
+      width: 15.625rem;
+      max-width: 15.625rem;
+    }
+    .incoming-digital-task-title {
+      width: 8rem;
+    }
+  }
+  .task-tooltip {
+   width: 50%;
+   text-align: center;
+}
+}
+
+@media (min-width: 20rem) and (max-width: 30rem) {
+  .task-details {
+    .task-digital-title {
+      width: 9.375rem;
+      max-width: 9.375rem;
+    }
+    .incoming-digital-task-title {
+      width: 5rem;
+    }
+  }
+ .task-tooltip {
+   width: 50%;
+   text-align: center;
+}
+}
+
+@media (min-width: 15.625rem) and (max-width: 20rem){
+  .task-details {
+    .incoming-digital-task-title {
+      width: 4rem;
+    }
+}
+.task-tooltip {
+   width: 50%;
+   text-align: center;
+}
 }
\ No newline at end of file