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 d6f5e2b57..068a103dc 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
@@ -91,19 +91,13 @@
 
 .vertical-divider {
   width: 0.0625rem;
-  height: 0.75rem;
+  height: 0.875rem;
   background-color: var(--mds-color-theme-outline-secondary-normal);
-  margin: 0 0.25rem;
-  opacity: 1;
+  margin: 0 0.5rem;
+  opacity: 0.7;
 }
 
 .participants-section {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.participants-indicator {
   display: flex;
   align-items: center;
   gap: 0.25rem;
@@ -115,8 +109,38 @@
 
 .participants-count {
   font-size: 0.875rem;
-  color: var(--mds-color-theme-text-primary-normal);
+  color: var(--mds-color-theme-text-secondary-normal);
   white-space: nowrap;
+  font-weight: 500;
+}
+
+.participants-select-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0 0.4rem;
+  min-height: 1.5rem;
+  border-radius: 999px;
+  background: transparent !important;
+  border: 1px solid var(--mds-color-theme-outline-secondary-normal) !important;
+  color: var(--mds-color-theme-text-secondary-normal);
+
+  &:hover,
+  &.hover {
+    background: var(--mds-color-theme-background-secondary-hover) !important;
+  }
+}
+
+.dropdown-arrow {
+  width: 0.75rem;
+  height: 0.75rem;
+  color: var(--mds-color-theme-text-secondary-normal);
+  margin-top: 0.0625rem;
+  transition: transform 0.15s ease;
+}
+
+.participants-select-button[aria-expanded='true'] .dropdown-arrow {
+  transform: rotate(180deg);
 }
 
 
@@ -176,7 +200,7 @@
 }
 
 .digital-customer-name {
-   width: auto; 
+   width: auto;
 }
 
 .digital-phone-number {
@@ -252,15 +276,58 @@
 
 .participants-popover {
   background: var(--mds-color-theme-background-solid-primary-normal, #FFFFFF) !important;
+  align-items: normal;
+  width: 100%;
+  padding: 0 !important;
+  border: var(--mds-color-theme-outline-secondary-normal);
+
+  &::part(popover-content) {
+    background: var(--mds-color-theme-background-solid-primary-normal, #FFFFFF);
+    border-radius: 0.75rem;
+    border: 1px solid var(--mds-color-theme-outline-secondary-normal);
+    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
+    padding: 0;
+    width: 16.125rem; /* 258px */
+    overflow: hidden;
+  }
+
   .participants-menu {
+    padding: 0.125rem;
     max-height: 12.5rem;
+    min-width: 16.125rem;
+    max-width: 16.125rem;
     overflow-y: auto;
+    overflow-x: hidden;
   }
 
   .participant-menu-item {
-    padding: 0.2rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.4rem 0.6rem;
     font-size: 0.875rem;
     cursor: pointer;
     color: var(--mds-color-theme-text-primary-normal, #000000F2);
+    border-radius: 0.5rem;
+    min-width: 0;
+    max-width: 100%;
+    white-space: nowrap;
+
+    &:hover {
+      background-color: var(--mds-color-theme-background-secondary-hover);
+    }
+
+    &:focus-visible {
+      background-color: var(--mds-color-theme-background-secondary-normal);
+      outline: 0.0625rem solid var(--mds-color-theme-outline-input-focus);
+      outline-offset: -0.0625rem;
+    }
   }
-}
\ No newline at end of file
+
+  .participant-menu-text {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
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 d1310e82f..7053f63eb 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
@@ -60,6 +60,8 @@ const CallControlCADComponent: React.FC<CallControlComponentProps> = (props) =>
   const mediaChannel = currentTask.data.interaction.mediaType as MediaChannelType;
   const isSocial = mediaChannel === MediaChannelType.SOCIAL;
   const isTelephony = mediaChannel === MediaChannelType.TELEPHONY;
+  const participantsCount = conferenceParticipants?.length || 1;
+  const participantsLabel = participantsCount === 1 ? 'Participant' : 'Participants';
 
   //@ts-expect-error  To be fixed in SDK - https://jira-eng-sjc12.cisco.com/jira/browse/CAI-6762
   const customerName = currentTask?.data?.interaction?.callAssociatedDetails?.customerName;
@@ -180,21 +182,15 @@ const CallControlCADComponent: React.FC<CallControlComponentProps> = (props) =>
                   <>
                     <div className="vertical-divider"></div>
                     <div className="participants-section">
-                      <div className="participants-indicator">
-                        <Text type="body-secondary" tagName={'small'} className="participants-count">
-                          +{Object.keys(conferenceParticipants).length || 1}
-                        </Text>
-                        <Icon name="participant-list-regular" size={0.875} className="participants-icon" />
-                      </div>
                       <PopoverNext
                         color="secondary"
                         delay={[0, 0]}
-                        placement="bottom-start"
-                        showArrow
+                        placement="bottom-end"
+                        showArrow={false}
                         trigger="click"
                         variant="medium"
                         interactive
-                        offsetDistance={2}
+                        offsetDistance={6}
                         className="participants-popover"
                         triggerComponent={
                           <Button
@@ -205,6 +201,9 @@ const CallControlCADComponent: React.FC<CallControlComponentProps> = (props) =>
                             color="default"
                             variant="tertiary"
                           >
+                            <Text type="body-secondary" tagName={'small'} className="participants-count">
+                              +{participantsCount} {participantsLabel}
+                            </Text>
                             <Icon name="arrow-down-bold" className="dropdown-arrow" />
                           </Button>
                         }
@@ -218,7 +217,8 @@ const CallControlCADComponent: React.FC<CallControlComponentProps> = (props) =>
                               tabIndex={0}
                               data-testid={`call-control:participant-${participant.name?.toLowerCase()}`}
                             >
-                              {participant.name}
+                              <Icon name="meet-regular" size={1.125} className="participant-menu-icon" />
+                              <span className="participant-menu-text">{participant.name}</span>
                             </div>
                           ))}
                         </div>