diff --git a/src/js/components/ManageMyCandidates/ActionPill.jsx b/src/js/components/ManageMyCandidates/ActionPill.jsx
index 84a4bd11e..d95f5c81a 100644
--- a/src/js/components/ManageMyCandidates/ActionPill.jsx
+++ b/src/js/components/ManageMyCandidates/ActionPill.jsx
@@ -1,36 +1,57 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-export default function ActionPill({ onClick, label, contentText = null}) {
+import DesignTokenColors from '../../common/components/Style/DesignTokenColors';
+
+export default function ActionPill ({ onClick, label, contentText = null }) {
   return (
     <ActionPillStyle type="button" onClick={onClick}>
-      <MediumBoldText>{label}</MediumBoldText>
-      {contentText && <p>{contentText}</p>}
+      <PillLabel>{label}</PillLabel>
+      {contentText && <PillContent>{contentText}</PillContent>}
     </ActionPillStyle>
   );
 }
-
-const MediumBoldText = styled.span`
-  font-weight: 500;
-`;
+ActionPill.propTypes = {
+  onClick: PropTypes.func,
+  label: PropTypes.node,
+  contentText: PropTypes.node,
+};
 
 const ActionPillStyle = styled.button`
-  border: 1px solid #bfdbfe;
-  background: #eff6ff;
-  color: #1d4ed8;
-  border-radius: 999px;
-  padding: 8px 10px;
-  font-size: 12px;
+  align-items: center;
+  background: ${DesignTokenColors.whiteUI};
+  border: 1.5px solid ${DesignTokenColors.primary700};
+  border-radius: 9999px;
+  color: ${DesignTokenColors.primary700};
   cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  font-size: 13px;
+  gap: 2px;
+  justify-content: center;
+  padding: 8px 16px;
+  text-align: center;
   white-space: nowrap;
 
   &:hover {
-    filter: brightness(0.98);
+    background: ${DesignTokenColors.primary50};
   }
+
   @media (max-width: 575px) {
     flex: 1;
+    width: 100%;
   }
-  @media (min-width: 576px) {
-    min-width: 280px;
-  }
+`;
+
+const PillContent = styled.span`
+  color: ${DesignTokenColors.primary600};
+  font-size: 12px;
+`;
+
+const PillLabel = styled.span`
+  align-items: center;
+  display: inline-flex;
+  font-weight: 600;
+  gap: 6px;
 `;
diff --git a/src/js/components/ManageMyCandidates/Menus.jsx b/src/js/components/ManageMyCandidates/Menus.jsx
index 0a9e65287..d93eacd18 100644
--- a/src/js/components/ManageMyCandidates/Menus.jsx
+++ b/src/js/components/ManageMyCandidates/Menus.jsx
@@ -1,15 +1,43 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useLayoutEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import PropTypes from 'prop-types';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import Button from '@mui/material/Button';
 import ButtonBase from '@mui/material/ButtonBase';
-import Checkbox from '@mui/material/Checkbox';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import styled from 'styled-components';
 
-export function CandidateActionsFilterMenu({ selectAnchorEl, setSelectAnchorEl, checkedBoolean, indeterminateBoolean, handleSelectCheckboxClick, menuOptions = null}) {
+import DesignTokenColors from '../../common/components/Style/DesignTokenColors';
+
+const menuOptionsPropType = PropTypes.arrayOf(PropTypes.shape({
+  label: PropTypes.node,
+  onClick: PropTypes.func,
+  icon: PropTypes.elementType,
+  disabled: PropTypes.bool,
+  info: PropTypes.bool,
+}));
+
+export function SelectAllCheckbox ({ checked, indeterminate, onClick, ariaLabel = 'Select all' }) {
+  return (
+    <input
+      aria-label={ariaLabel}
+      checked={!!checked}
+      onChange={() => {}}
+      onClick={onClick}
+      // eslint-disable-next-line no-param-reassign
+      ref={(el) => { if (el) el.indeterminate = !!indeterminate; }}
+      type="checkbox"
+    />
+  );
+}
+SelectAllCheckbox.propTypes = {
+  checked: PropTypes.bool,
+  indeterminate: PropTypes.bool,
+  onClick: PropTypes.func,
+  ariaLabel: PropTypes.string,
+};
+
+export function CandidateActionsFilterMenu ({ selectAnchorEl, setSelectAnchorEl, checkedBoolean, indeterminateBoolean, handleSelectCheckboxClick, menuOptions = null }) {
   const selectMenuOpen = Boolean(selectAnchorEl);
 
   const openSelectMenu = useCallback((e) => setSelectAnchorEl(e.currentTarget), [setSelectAnchorEl]);
@@ -28,16 +56,12 @@ export function CandidateActionsFilterMenu({ selectAnchorEl, setSelectAnchorEl,
           aria-haspopup="menu"
           aria-expanded={selectMenuOpen ? 'true' : undefined}
       >
-        <Checkbox
+        <SelectAllCheckbox
           checked={checkedBoolean}
           indeterminate={indeterminateBoolean}
-          tabIndex={-1}
-          disableRipple
-          sx={{ padding: 0 }}
           onClick={handleSelectCheckboxClick}
-          onChange={() => {}}
         />
-        <div>Select All</div>
+        <SelectAllLabel>Select all</SelectAllLabel>
         <CaretButton
           type="button"
           onClick={openSelectMenu}
@@ -62,8 +86,16 @@ export function CandidateActionsFilterMenu({ selectAnchorEl, setSelectAnchorEl,
     </>
   );
 }
+CandidateActionsFilterMenu.propTypes = {
+  selectAnchorEl: PropTypes.object,
+  setSelectAnchorEl: PropTypes.func,
+  checkedBoolean: PropTypes.bool,
+  indeterminateBoolean: PropTypes.bool,
+  handleSelectCheckboxClick: PropTypes.func,
+  menuOptions: menuOptionsPropType,
+};
 
-export function CandidateTraitsFilterMenu({ filterAnchorEl, setFilterAnchorEl, filterLabel = 'Select Filter', menuOptions = null}) {
+export function CandidateTraitsFilterMenu ({ filterAnchorEl, setFilterAnchorEl, filterLabel = 'Select Filter', menuOptions = null }) {
   const filterMenuOpen = Boolean(filterAnchorEl);
 
   const openFilterMenu = useCallback((e) => setFilterAnchorEl(e.currentTarget), [setFilterAnchorEl]);
@@ -78,7 +110,7 @@ export function CandidateTraitsFilterMenu({ filterAnchorEl, setFilterAnchorEl, f
   return (
     <>
       <AllButton
-          variant="text"
+          type="button"
           onClick={openFilterMenu}
           aria-label="Filter options"
           aria-controls={filterMenuOpen ? 'all-filter-menu' : undefined}
@@ -105,79 +137,113 @@ export function CandidateTraitsFilterMenu({ filterAnchorEl, setFilterAnchorEl, f
     </>
   );
 }
+CandidateTraitsFilterMenu.propTypes = {
+  filterAnchorEl: PropTypes.object,
+  setFilterAnchorEl: PropTypes.func,
+  filterLabel: PropTypes.string,
+  menuOptions: menuOptionsPropType,
+};
+
+export function DropdownMenu ({ anchorEl, onClose, menuOptions = [], align = 'right', menuId }) {
+  const [position, setPosition] = useState({ top: 0, left: 0 });
+
+  useLayoutEffect(() => {
+    if (!anchorEl) return;
+    const rect = anchorEl.getBoundingClientRect();
+    const menuWidth = 220;
+    const menuHeight = 100;
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const scrollY = window.scrollY || document.documentElement.scrollTop;
+    const scrollX = window.scrollX || document.documentElement.scrollLeft;
+    setPosition({
+      top: (spaceBelow < menuHeight ? rect.top - menuHeight - 6 : rect.bottom + 6) + scrollY,
+      left: (align === 'right' ? rect.right - menuWidth : rect.left) + scrollX,
+    });
+  }, [anchorEl, align]);
+
+  if (!anchorEl) return null;
+
+  const handleClick = (option) => () => {
+    if (option.disabled) return;
+    if (option.onClick) option.onClick();
+    onClose();
+  };
 
-export function CandidateRowMenu({ rowMenuAnchorEl, setRowMenuAnchorEl, setRowMenuVoter, menuOptions = null }) {
-  const rowMenuOpen = Boolean(rowMenuAnchorEl);
+  return createPortal(
+    <>
+      <ClickAwayOverlay onClick={onClose} />
+      <RowMenuCard
+        role="menu"
+        id={menuId}
+        style={{ top: `${position.top}px`, left: `${position.left}px` }}
+      >
+        {menuOptions.map((option, idx) => {
+          const Icon = option.icon;
+          if (option.info) {
+            return <DropdownInfo key={option.label || `info-${idx}`}>{option.label}</DropdownInfo>;
+          }
+          return (
+            <RowMenuItem
+              key={option.label}
+              type="button"
+              role="menuitem"
+              disabled={option.disabled}
+              onClick={handleClick(option)}
+            >
+              {Icon && <Icon fontSize="small" />}
+              <span>{option.label}</span>
+            </RowMenuItem>
+          );
+        })}
+      </RowMenuCard>
+    </>,
+    document.body,
+  );
+}
+DropdownMenu.propTypes = {
+  anchorEl: PropTypes.object,
+  onClose: PropTypes.func,
+  menuOptions: menuOptionsPropType,
+  align: PropTypes.oneOf(['left', 'right']),
+  menuId: PropTypes.string,
+};
 
+export function CandidateRowMenu ({ rowMenuAnchorEl, setRowMenuAnchorEl, setRowMenuVoter, menuOptions = null }) {
   const closeRowMenu = useCallback(() => {
     setRowMenuAnchorEl(null);
     setRowMenuVoter(null);
   }, [setRowMenuAnchorEl, setRowMenuVoter]);
 
-  const onClickFunction = useCallback((optionOnClickFunction) => {
-    optionOnClickFunction();
-    closeRowMenu();
-  }, [closeRowMenu]);
-
   return (
-    <CandidateRowSubMenu
-          id="voter-row-menu"
-          anchorEl={rowMenuAnchorEl}
-          open={rowMenuOpen}
-          onClose={closeRowMenu}
-    >
-      {menuOptions && menuOptions.map((option) => (
-        <StyledMenuItem key={option.label} onClick={() => onClickFunction(option.onClick)}>
-          <ListItemIcon>
-            <option.icon sx={{ fontSize: 18 }} />
-          </ListItemIcon>
-          <ListItemText primary={option.label} />
-        </StyledMenuItem>
-      ))}
-    </CandidateRowSubMenu>
+    <DropdownMenu
+      anchorEl={rowMenuAnchorEl}
+      onClose={closeRowMenu}
+      menuOptions={menuOptions}
+      align="right"
+      menuId="voter-row-menu"
+    />
   );
 }
+CandidateRowMenu.propTypes = {
+  rowMenuAnchorEl: PropTypes.object,
+  setRowMenuAnchorEl: PropTypes.func,
+  setRowMenuVoter: PropTypes.func,
+  menuOptions: menuOptionsPropType,
+};
 
-export const SelectControl = styled(ButtonBase)`
-  display: inline-flex;
+export const AllButton = styled.button`
   align-items: center;
-  gap: 2px;
-  padding: 2px 4px;
-  border-radius: 8px;
-`;
-
-export const CaretButton = styled.button`
-  border: none;
   background: transparent;
-  padding: 0;
-  margin: 0;
+  border: none;
+  color: ${DesignTokenColors.neutralUI700};
   cursor: pointer;
   display: inline-flex;
-  align-items: center;
-`;
-
-
-export const AllButton = styled(Button)`
-  && {
-    min-width: auto;
-    padding: 0 0 0 4px;
-    text-transform: none;
-    font-size: 14px;
-    color: #111827;
-  }
-
-  && .MuiButton-endIcon {
-    margin-left: 4px;
-    margin-right: 0;
-  }
-`;
-
-export const CaretIcon = styled.span`
-  font-size: 32px;
-  padding: 0 4px;
-  color: #6b7280;
-  display: inline-flex;
-  align-items: center;
+  font: inherit;
+  font-size: 14px;
+  gap: 2px;
+  line-height: 1;
+  margin: 0;
+  padding: 0;
 `;
 
 const CandidateSubMenu = styled(Menu).attrs({
@@ -191,28 +257,91 @@ const CandidateSubMenu = styled(Menu).attrs({
   },
 })``;
 
-const CandidateRowSubMenu = styled(Menu).attrs({
-  anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
-  transformOrigin: { vertical: 'top', horizontal: 'right' },
-  PaperProps: {
-    style: {
-      borderRadius: 12,
-      overflow: 'hidden',
-      minWidth: 220,
-    },
-  },
-})``;
+export const CaretButton = styled.button`
+  align-items: center;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  display: inline-flex;
+  margin: 0;
+  padding: 0;
+`;
 
+export const CaretIcon = styled.span`
+  align-items: center;
+  color: ${DesignTokenColors.neutralUI600};
+  display: inline-flex;
+  font-size: 18px;
+  padding: 0 2px;
+`;
+
+const ClickAwayOverlay = styled.div`
+  background: transparent;
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 999;
+`;
+
+const DropdownInfo = styled.div`
+  color: ${DesignTokenColors.neutralUI600};
+  font-size: 13px;
+  padding: 6px 10px 8px;
+`;
 
 const MenuItemText = styled.span`
-font-size: 14px;
-color: #111827;
+  color: #111827;
+  font-size: 14px;
+`;
+
+const RowMenuCard = styled.div`
+  background: ${DesignTokenColors.whiteUI};
+  border: 1px solid ${DesignTokenColors.neutralUI200};
+  border-radius: 10px;
+  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
+  min-width: 220px;
+  padding: 6px;
+  position: absolute;
+  z-index: 1000;
 `;
 
-const StyledMenuItem = styled(MenuItem)`
-  && {
-    font-size: 14px;
-    padding-top: 10px;
-    padding-bottom: 10px;
+const RowMenuItem = styled.button`
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: 8px;
+  color: ${DesignTokenColors.neutralUI900};
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  font-size: 14px;
+  gap: 8px;
+  padding: 8px 10px;
+  text-align: left;
+  width: 100%;
+
+  &:hover {
+    background: ${DesignTokenColors.neutralUI50};
   }
+
+  &:disabled {
+    color: ${DesignTokenColors.neutralUI500};
+    cursor: not-allowed;
+  }
+`;
+
+const SelectAllLabel = styled.span`
+  color: ${DesignTokenColors.neutralUI700};
+  font-size: 14px;
+  line-height: 1;
+`;
+
+export const SelectControl = styled(ButtonBase)`
+  align-items: center;
+  border-radius: 8px;
+  display: inline-flex;
+  gap: 6px;
+  padding: 0 2px;
 `;
diff --git a/src/js/components/ManageMyCandidates/SendButtons.jsx b/src/js/components/ManageMyCandidates/SendButtons.jsx
index cf7c01fb9..8cab128ea 100644
--- a/src/js/components/ManageMyCandidates/SendButtons.jsx
+++ b/src/js/components/ManageMyCandidates/SendButtons.jsx
@@ -1,43 +1,48 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import Button from '@mui/material/Button';
 import styled from 'styled-components';
 
 import DesignTokenColors from '../../common/components/Style/DesignTokenColors';
 
-export function SendMessageButton({ disbaleBoolean, sendMessageFunction, buttonText = '' }) {
+const sendButtonPropTypes = {
+  verb: PropTypes.string,
+  count: PropTypes.number,
+  onClick: PropTypes.func,
+};
+
+function formatLabel (verb, count) {
+  return `${verb} (${count})`;
+}
+
+export function SendMessageButton ({ verb = 'Send message', count = 0, onClick }) {
   return (
     <SendButton
       variant="contained"
       className="u-show-desktop-tablet"
-      disabled={disbaleBoolean}
-      onClick={sendMessageFunction}
+      disabled={count === 0}
+      onClick={onClick}
     >
-      {buttonText}
+      {formatLabel(verb, count)}
     </SendButton>
   );
 }
+SendMessageButton.propTypes = sendButtonPropTypes;
 
-export function SendMessageButtonMobile({ disbaleBoolean, sendThankYouFunction, buttonText = '' }) {
+export function SendMessageButtonMobile ({ verb = 'Send message', count = 0, onClick }) {
   return (
     <MobileBottomBar className="u-show-mobile">
       <MobileSendButton
         variant="contained"
-        disabled={disbaleBoolean}
-        onClick={sendThankYouFunction}
+        disabled={count === 0}
+        onClick={onClick}
       >
-        {buttonText}
+        {formatLabel(verb, count)}
       </MobileSendButton>
     </MobileBottomBar>
   );
 }
-
-export const SendButton = styled(Button)`
-  && {
-    margin-left: 12px;
-    text-transform: none;
-    border-radius: 999px;
-  }
-`;
+SendMessageButtonMobile.propTypes = sendButtonPropTypes;
 
 const MobileBottomBar = styled.div`
   display: flex;
@@ -51,11 +56,34 @@ const MobileBottomBar = styled.div`
   padding-bottom: calc(72px + env(safe-area-inset-bottom));
   background: ${DesignTokenColors.whiteUI};
   border-top: 1px solid #e5e7eb;
+  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.08), 0 -1px 2px rgba(0, 0, 0, 0.1);
 `;
 
 const MobileSendButton = styled(Button)`
   && {
     border-radius: 999px;
+    font-size: 13px;
+    padding: 5px 18px;
     text-transform: none;
   }
+
+  &&.Mui-disabled {
+    background: ${DesignTokenColors.neutralUI200};
+    color: ${DesignTokenColors.whiteUI};
+  }
+`;
+
+export const SendButton = styled(Button)`
+  && {
+    border-radius: 999px;
+    margin-left: 12px;
+    padding: 4px 14px;
+    text-transform: none;
+    white-space: nowrap;
+  }
+
+  &&.Mui-disabled {
+    background: ${DesignTokenColors.neutralUI200};
+    color: ${DesignTokenColors.whiteUI};
+  }
 `;
diff --git a/src/js/components/Style/ManageMyCandidates.jsx b/src/js/components/Style/ManageMyCandidates.jsx
index dba5c4bd9..4460f1486 100644
--- a/src/js/components/Style/ManageMyCandidates.jsx
+++ b/src/js/components/Style/ManageMyCandidates.jsx
@@ -2,17 +2,6 @@ import styled from 'styled-components';
 
 import DesignTokenColors from '../../common/components/Style/DesignTokenColors';
 
-export const CardList = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  @media (max-width: 575px) {
-    padding-bottom: 72px;
-  }
-  border-collapse: separate;
-  border-spacing: 0 10px;
-`;
-
 export const Card = styled.div`
   border: 1px solid #e5e7eb;
   border-radius: 16px;
@@ -21,13 +10,6 @@ export const Card = styled.div`
   box-shadow: 0 1px 0 rgba(0,0,0,0.02);
 `;
 
-export const CardTopRow = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 10px;
-`;
-
 export const CardActionsAndOpinion = styled.div`
   display: flex;
   justify-content: space-evenly;
@@ -54,18 +36,63 @@ export const CardInfoValue = styled.div`
   margin-top: auto;
 `;
 
-export const VerticalBarWrapper = styled.div`
-  align-self: stretch;
+export const CardList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  @media (max-width: 575px) {
+    padding-bottom: 72px;
+  }
+  border-collapse: separate;
+  border-spacing: 0 10px;
+`;
+
+export const CardTopRow = styled.div`
   display: flex;
   align-items: center;
-  margin: ${(p) => (p.$tight ? '0 4px' : '0 12px')};
+  gap: 10px;
+  margin-bottom: 10px;
 `;
 
-export const VerticalBar = styled.div`
-  width: 1px;
-  height: 80%;
-  background: #d1d5db;
-  border-radius: 999px;
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const KebabBtn = styled.button`
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: #6b7280;
+  padding: 2px 6px;
+  border-radius: 10px;
+
+  &:hover {
+    background: ${DesignTokenColors.neutralUI50};
+  }
+`;
+
+export const LeftTools = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+export const NameRow = styled.div`
+  display: flex;
+  gap: 10px;
+  align-items: center;
+`;
+
+export const NameText = styled.div`
+  color: ${DesignTokenColors.neutralUI900};
+  font-size: 15px;
+  font-weight: 600;
+`;
+
+export const RightOptions = styled.div`
+  margin-left: auto;
+  display: flex;
+  align-items: center;
 `;
 
 export const ToolbarRow = styled.div`
@@ -77,7 +104,16 @@ export const ToolbarRow = styled.div`
   margin-left: 12px;
 `;
 
-export const LeftTools = styled.div`
+export const VerticalBar = styled.div`
+  width: 1px;
+  height: 80%;
+  background: #d1d5db;
+  border-radius: 999px;
+`;
+
+export const VerticalBarWrapper = styled.div`
+  align-self: stretch;
   display: flex;
   align-items: center;
-`;
\ No newline at end of file
+  margin: ${(p) => (p.$tight ? '0 4px' : '0 12px')};
+`;
diff --git a/src/js/components/Style/SupporterTrackingStyles.jsx b/src/js/components/Style/SupporterTrackingStyles.jsx
new file mode 100644
index 000000000..24c74800b
--- /dev/null
+++ b/src/js/components/Style/SupporterTrackingStyles.jsx
@@ -0,0 +1,178 @@
+/* Styled components specific to the ManageMyCandidates > Tracking subtabs
+   (Joined / Invited / Reminder needed). Extends the more general primitives
+   from Style/ManageMyCandidates (Card, CardList, NameText, etc.). */
+
+import styled from 'styled-components';
+
+import DesignTokenColors from '../../common/components/Style/DesignTokenColors';
+import { Card, CardList, NameText } from './ManageMyCandidates';
+
+/* Small blue text link with optional inline icons, used for inline row actions
+   like "Send email invite" / "Re-send text invite" on Invited and Reminder. */
+export const ActionLinkButton = styled.button`
+  align-items: center;
+  background: none;
+  border: none;
+  color: ${DesignTokenColors.primary600};
+  cursor: pointer;
+  display: inline-flex;
+  font-size: 14px;
+  font-weight: 500;
+  gap: 6px;
+  padding: 4px 0;
+  white-space: nowrap;
+
+  &:hover {
+    color: ${DesignTokenColors.primary700};
+    text-decoration: underline;
+  }
+`;
+
+/* Shared base for a CSS-grid row used in the table-style desktop view of Invited/Reminder.
+   Caller supplies $cols (a grid-template-columns string).
+   Defined before DesktopGridHeader because DesktopGridHeader extends it. */
+export const DesktopGridRow = styled.div.withConfig({
+  shouldForwardProp: (prop) => prop !== '$cols',
+})`
+  align-items: center;
+  display: grid;
+  gap: 12px;
+  grid-template-columns: ${(p) => p.$cols};
+`;
+
+/* Header variant of DesktopGridRow: bottom border, column-label styling. */
+export const DesktopGridHeader = styled(DesktopGridRow)`
+  border-bottom: 1px solid ${DesignTokenColors.neutralUI200};
+  color: ${DesignTokenColors.neutralUI600};
+  font-size: 13px;
+  min-width: max-content;
+  padding: 8px 14px;
+`;
+
+/* Card list that flattens out (no row gap) on desktop, keeps mobile gap from CardList */
+export const FlatCardList = styled(CardList)`
+  @media (min-width: 576px) {
+    gap: 0;
+  }
+`;
+
+/* Rounded card on mobile (inherits Card's subtle #e5e7eb border + gray bg, matching Joined),
+   flat row (no rounded corners, bottom border only) on desktop.
+   min-width: max-content ensures the bottom border extends across the full grid row
+   when columns overflow the viewport horizontally. */
+export const FlatRowCard = styled(Card)`
+  background: ${(p) => (p.$selected ? DesignTokenColors.primary50 : DesignTokenColors.neutralUI50)};
+  padding: 12px 14px;
+
+  @media (min-width: 576px) {
+    background: ${(p) => (p.$selected ? DesignTokenColors.primary50 : DesignTokenColors.whiteUI)};
+    border-radius: 0;
+    border-left: none;
+    border-right: none;
+    border-top: none;
+    box-shadow: none;
+    min-width: max-content;
+  }
+`;
+
+/* Full-width rounded pill button used in the mobile card actions */
+export const MobileActionPill = styled.button`
+  background: ${DesignTokenColors.whiteUI};
+  border: 1px solid ${DesignTokenColors.primary600};
+  border-radius: 9999px;
+  color: ${DesignTokenColors.primary700};
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  padding: 8px 16px;
+  width: 100%;
+
+  &:hover {
+    background: ${DesignTokenColors.primary50};
+  }
+
+  &:disabled {
+    background: ${DesignTokenColors.neutralUI50};
+    border-color: ${DesignTokenColors.neutralUI300};
+    color: ${DesignTokenColors.neutralUI600};
+    cursor: default;
+  }
+`;
+
+/* Mobile vertical stack of action pills under "What you can do" */
+export const MobileActions = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 8px;
+`;
+
+/* Small gray label above a value in the mobile expanded fields */
+export const MobileFieldLabel = styled.div`
+  color: ${DesignTokenColors.neutralUI600};
+  font-size: 13px;
+  margin-top: 8px;
+`;
+
+/* Bold value paired with MobileFieldLabel */
+export const MobileFieldValue = styled.div`
+  color: ${DesignTokenColors.neutralUI900};
+  font-size: 14px;
+  font-weight: 500;
+`;
+
+/* Mobile-only toolbar row sitting above the card list (Select all + search etc.) */
+export const MobileToolbar = styled.div`
+  align-items: center;
+  display: flex;
+  gap: 12px;
+  justify-content: space-between;
+  margin-bottom: 12px;
+`;
+
+/* Name + checkbox cell for grid-column layouts (Invited/Reminder).
+   min-width: 0 + nowrap+ellipsis on the child NameText so long names truncate. */
+export const NameCell = styled.div`
+  align-items: center;
+  display: flex;
+  gap: 10px;
+  min-width: 0;
+
+  ${NameText} {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;
+
+/* 32x32 transparent icon button, used for the mobile toolbar search affordance */
+export const SearchBtn = styled.button`
+  align-items: center;
+  background: none;
+  border: none;
+  border-radius: 8px;
+  color: ${DesignTokenColors.neutralUI700};
+  cursor: pointer;
+  display: inline-flex;
+  height: 32px;
+  justify-content: center;
+  padding: 0;
+  width: 32px;
+
+  &:hover {
+    background: ${DesignTokenColors.neutralUI50};
+    color: ${DesignTokenColors.neutralUI900};
+  }
+`;
+
+/* Inline "Select all" label that wraps a checkbox + text */
+export const SelectAllInline = styled.label`
+  align-items: center;
+  color: ${DesignTokenColors.neutralUI700};
+  display: inline-flex;
+  font-size: 14px;
+  gap: 6px;
+  line-height: 1;
+  margin: 0;
+`;
diff --git a/src/js/pages/ManageMyCandidates/SupporterTracking.jsx b/src/js/pages/ManageMyCandidates/SupporterTracking.jsx
index 0e343dccf..44ff2dbaa 100644
--- a/src/js/pages/ManageMyCandidates/SupporterTracking.jsx
+++ b/src/js/pages/ManageMyCandidates/SupporterTracking.jsx
@@ -1,7 +1,7 @@
 import React, { useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Search as SearchIcon } from '@mui/icons-material';
-import IconButton from '@mui/material/IconButton';
 import Popover from '@mui/material/Popover';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import CloseIcon from '@mui/icons-material/Close';
@@ -14,6 +14,7 @@ import PoliticianStore from '../../common/stores/PoliticianStore';
 import SupportersJoined from './SupportersJoined';
 import SupportersInvited from './SupportersInvited';
 import SupportersToRemind from './SupportersToRemind';
+import TrackingHeaderActionContext from './TrackingHeaderActionContext';
 
 function pushDataLayer (buttonId = '', politicianWeVoteId = null) {
   const dataLayerObject = {
@@ -31,165 +32,152 @@ function pushDataLayer (buttonId = '', politicianWeVoteId = null) {
   TagManager.dataLayer({ dataLayer: dataLayerObject });
 }
 
+const LOREM_IPSUM_PLACEHOLDER = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.';
+
+/**
+ * Spoofed records (replace later with DB-backed rows)
+ * status: "joined" | "invited" | "reminder"
+ */
+const SPOOF = [
+  {
+    id: 'v_1',
+    status: 'joined',
+    name: 'Steve Smith',
+    endorsed: false,
+    friendsInvited: 0,
+    messageSentCount: 0,
+    publicOpinion: '',
+  },
+  {
+    id: 'v_2',
+    status: 'joined',
+    name: 'Jane Smith',
+    endorsed: true,
+    friendsInvited: 0,
+    messageSentCount: 0,
+    publicOpinion: '',
+  },
+  {
+    id: 'v_3',
+    status: 'joined',
+    name: 'Steve Smith',
+    endorsed: true,
+    friendsInvited: 0,
+    messageSentCount: 0,
+    publicOpinion: LOREM_IPSUM_PLACEHOLDER,
+  },
+  {
+    id: 'v_4',
+    status: 'joined',
+    name: 'Jen Smith',
+    endorsed: true,
+    friendsInvited: 2,
+    messageSentCount: 0,
+    publicOpinion: LOREM_IPSUM_PLACEHOLDER,
+  },
+  {
+    id: 'v_5',
+    status: 'joined',
+    name: 'Mary Smith',
+    endorsed: true,
+    friendsInvited: 2,
+    messageSentCount: 1,
+    publicOpinion: LOREM_IPSUM_PLACEHOLDER,
+  },
+
+  {
+    id: 'v_6',
+    status: 'invited',
+    joined: true,
+    name: 'Alex Doe',
+    emailInviteSent: true,
+    textInviteSent: true,
+    inviteLinkClicked: true,
+    friendsInvited: 2,
+  },
+  {
+    id: 'v_7',
+    status: 'remind',
+    reminderSubStatus: 'invited',
+    name: 'John Smith',
+    emailInviteSent: true,
+    textInviteSent: false,
+    invitedDaysAgo: 9,
+  },
+  {
+    id: 'v_10',
+    status: 'remind',
+    reminderSubStatus: 'invited',
+    name: 'James Smith',
+    emailInviteSent: false,
+    textInviteSent: true,
+    invitedDaysAgo: 11,
+  },
+  {
+    id: 'v_11',
+    status: 'remind',
+    reminderSubStatus: 'invited',
+    name: 'Jennifer Smith',
+    emailInviteSent: true,
+    textInviteSent: true,
+    invitedDaysAgo: 14,
+  },
+  {
+    id: 'v_12',
+    status: 'remind',
+    reminderSubStatus: 'joined',
+    name: 'Morgan Lee',
+    joined: true,
+    endorsed: false,
+    friendsInvited: 0,
+    joinedDaysAgo: 8,
+  },
+  {
+    id: 'v_8',
+    status: 'invited',
+    joined: false,
+    name: 'Alex Doe',
+    emailInviteSent: false,
+    textInviteSent: true,
+    inviteLinkClicked: false,
+    friendsInvited: 0,
+  },
+  {
+    id: 'v_9',
+    status: 'invited',
+    joined: false,
+    name: 'SuperLong FirstNameLastName',
+    emailInviteSent: true,
+    textInviteSent: false,
+    inviteLinkClicked: false,
+    friendsInvited: 0,
+  },
+];
+
 export default function SupporterTracking ({ selectedPoliticianWeVoteId = null }) {
   const [activeTab, setActiveTab] = useState('joined');
-
-  /**
-   * Spoofed records (replace later with DB-backed rows)
-   * status: "joined" | "invited" | "reminder"
-   */
-  const SPOOF = [
-    {
-      id: 'v_1',
-      status: 'joined',
-      name: 'Steve Smith',
-      endorsed: false,
-      friendsInvited: 0,
-      messageSentCount: 0,
-      publicOpinion:
-        '',
-    },
-    {
-      id: 'v_2',
-      status: 'joined',
-      name: 'Jane Smith',
-      endorsed: true,
-      friendsInvited: 0,
-      messageSentCount: 0,
-      publicOpinion: '',
-    },
-    {
-      id: 'v_3',
-      status: 'joined',
-      name: 'Steve Smith',
-      endorsed: true,
-      friendsInvited: 0,
-      messageSentCount: 0,
-      publicOpinion:
-        'Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet...',
-    },
-    {
-      id: 'v_4',
-      status: 'joined',
-      name: 'Jen Smith',
-      endorsed: true,
-      friendsInvited: 2,
-      messageSentCount: 0,
-      publicOpinion:
-        'Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet...',
-    },
-    {
-      id: 'v_5',
-      status: 'joined',
-      name: 'Mary Smith',
-      endorsed: true,
-      friendsInvited: 2,
-      messageSentCount: 1,
-      publicOpinion:
-        'Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet...',
-    },
-
-    // A couple non-joined for tabs
-    // {
-    //   id: "v_6",
-    //   status: "invited",
-    //   name: "Alex Doe",
-    //   endorsed: false,
-    //   friendsInvited: 0,
-    //   messageSentCount: 0,
-    //   publicOpinion: "",
-    // },
-    {
-      id: 'v_6',
-      status: 'invited',
-      joined: true,
-      name: 'Alex Doe',
-      emailInviteSent: true,
-      textInviteSent: true,
-      inviteLinkClicked: true,
-      friendsInvited: 2,
-
-    },
-    {
-      id: 'v_7',
-      status: 'remind',
-      reminderSubStatus: 'invited',
-      name: 'John Smith',
-      emailInviteSent: true,
-      textInviteSent: false,
-      invitedDaysAgo: 9,
-    },
-    {
-      id: 'v_10',
-      status: 'remind',
-      reminderSubStatus: 'invited',
-      name: 'James Smith',
-      emailInviteSent: false,
-      textInviteSent: true,
-      invitedDaysAgo: 11,
-    },
-    {
-      id: 'v_11',
-      status: 'remind',
-      reminderSubStatus: 'invited',
-      name: 'Jennifer Smith',
-      emailInviteSent: true,
-      textInviteSent: true,
-      invitedDaysAgo: 14,
-    },
-    {
-      id: 'v_12',
-      status: 'remind',
-      reminderSubStatus: 'joined',
-      name: 'Morgan Lee',
-      joined: true,
-      endorsed: false,
-      friendsInvited: 0,
-      joinedDaysAgo: 8,
-    },
-    {
-      id: 'v_8',
-      status: 'invited',
-      joined: false,
-      name: 'Alex Doe',
-      emailInviteSent: false,
-      textInviteSent: true,
-      inviteLinkClicked: false,
-      friendsInvited: 0,
-    },
-    {
-      id: 'v_9',
-      status: 'invited',
-      joined: false,
-      name: 'SuperLong FirstNameLastName',
-      emailInviteSent: true,
-      textInviteSent: false,
-      inviteLinkClicked: false,
-      friendsInvited: 0,
-    },
-  ];
+  const [headerActionSlot, setHeaderActionSlot] = useState(null);
 
   const counts = useMemo(() => {
     const c = { joined: 0, invited: 0, remind: 0 };
-    for (const r of SPOOF) c[r.status] += 1;
+    SPOOF.forEach((r) => { c[r.status] += 1; });
     return c;
   }, []);
 
   const renderTabContent = () => {
     switch (activeTab) {
       case 'joined':
-        return <SupportersJoined supporters={SPOOF.filter((r) => r.status === 'joined')}/>;
+        return <SupportersJoined supporters={SPOOF.filter((r) => r.status === 'joined')} />;
       case 'invited':
-        return <SupportersInvited supporters={SPOOF.filter((r) => r.status === 'invited')}/>;
+        return <SupportersInvited supporters={SPOOF.filter((r) => r.status === 'invited')} />;
       case 'remind':
-        return <SupportersToRemind supporters={SPOOF.filter((r) => r.status === 'remind')}/>;
+        return <SupportersToRemind supporters={SPOOF.filter((r) => r.status === 'remind')} />;
       default:
-        return <SupportersJoined supporters={SPOOF.filter((r) => r.status === 'joined')}/>;
+        return <SupportersJoined supporters={SPOOF.filter((r) => r.status === 'joined')} />;
     }
   };
 
   const [anchorEl, setAnchorEl] = React.useState(null);
-  const [buttonEl, setButtonEl] = React.useState(null);
 
   const open = Boolean(anchorEl);
 
@@ -200,7 +188,7 @@ export default function SupporterTracking ({ selectedPoliticianWeVoteId = null }
   const handleClose = () => setAnchorEl(null);
 
   return (
-    <>
+    <TrackingHeaderActionContext.Provider value={headerActionSlot}>
       <HeaderRow className="u-show-desktop-tablet">
         <H2>Tracking</H2>
         <HeaderDivider />
@@ -232,6 +220,9 @@ export default function SupporterTracking ({ selectedPoliticianWeVoteId = null }
           },
         }}
       >
+        {/* TODO: auto-open this popover on the user's first visit to the page
+            (e.g., gate behind a localStorage flag like `seenTrackingInfoPopover`,
+            set the flag once the user dismisses it so it doesn't reopen). */}
         <PopoverContainer>
           <PopoverArrow />
 
@@ -254,43 +245,50 @@ export default function SupporterTracking ({ selectedPoliticianWeVoteId = null }
           id="trackingJoinedWeVoteTab"
           active={activeTab === 'joined'}
           onClick={() => { pushDataLayer('trackingJoinedWeVoteTab', selectedPoliticianWeVoteId); setActiveTab('joined'); }}
-          data-hidden-bold-text={`Joined WeVote (${counts['joined']})`}
+          data-hidden-bold-text={`Joined WeVote (${counts.joined})`}
         >
-          Joined WeVote
-          (
-          {counts['joined']}
+          <span className="u-show-desktop-tablet">Joined WeVote</span>
+          <span className="u-show-mobile">Joined</span>
+          {' ('}
+          {counts.joined}
           )
         </Tab>
         <Tab
           id="trackingInvitedTab"
           active={activeTab === 'invited'}
           onClick={() => { pushDataLayer('trackingInvitedTab', selectedPoliticianWeVoteId); setActiveTab('invited'); }}
-          data-hidden-bold-text={`Invited (${counts['invited']})`}
+          data-hidden-bold-text={`Invited (${counts.invited})`}
         >
           Invited
           (
-          {counts['invited']}
+          {counts.invited}
           )
         </Tab>
         <Tab
           id="trackingReminderNeededTab"
           active={activeTab === 'remind'}
           onClick={() => { pushDataLayer('trackingReminderNeededTab', selectedPoliticianWeVoteId); setActiveTab('remind'); }}
-          data-hidden-bold-text={`Reminder needed (${counts['remind']})`}
+          data-hidden-bold-text={`Reminder needed (${counts.remind})`}
         >
-          Reminder needed
-          (
-          {counts['remind']}
+          <span className="u-show-desktop-tablet">Reminder needed</span>
+          <span className="u-show-mobile">Remind</span>
+          {' ('}
+          {counts.remind}
           )
         </Tab>
+        <HeaderActionSlot ref={setHeaderActionSlot} className="u-show-desktop-tablet" />
       </TabRow>
       <TabContent>
         {renderTabContent()}
       </TabContent>
-    </>
+    </TrackingHeaderActionContext.Provider>
   );
 }
 
+SupporterTracking.propTypes = {
+  selectedPoliticianWeVoteId: PropTypes.string,
+};
+
 // Styles
 
 const H2 = styled.h2`
@@ -300,6 +298,12 @@ const H2 = styled.h2`
   margin: 0;
 `;
 
+const HeaderActionSlot = styled.div`
+  align-items: center;
+  display: flex;
+  margin-left: auto;
+`;
+
 const HeaderDivider = styled.span`
   border-left: 1.5px solid ${DesignTokenColors.neutralUI100};
   height: 30px;
@@ -397,12 +401,23 @@ const SubHeaderRow = styled.div`
   align-items: center;
   gap: 12px;
   margin: 0 0 6px;
+
+  @media (max-width: 575px) {
+    gap: 5px;
+    justify-content: center;
+  }
 `;
 
 const Tab = styled.button`
   background: none;
   border: none;
   padding: 12px 16px 4px 16px;
+  flex-shrink: 0;
+  @media (max-width: 575px) {
+    flex: 1;
+    padding-left: 0;
+    padding-right: 0;
+  }
   font-size: 15px;
   font-weight: ${(props) => (props.active ? '600' : '500')};
   color: ${(props) => (props.active ? DesignTokenColors.primary600 : DesignTokenColors.neutralUI700)};
@@ -447,11 +462,19 @@ const TabContent = styled.div`
 const TabRow = styled.div`
   display: flex;
   gap: 0;
-  border-bottom: 1px solid ${DesignTokenColors.neutralUI200};
-  margin-bottom: 4px;
+  margin-bottom: 16px;
+
+  @media (max-width: 575px) {
+    border-bottom: 1px solid ${DesignTokenColors.neutralUI200};
+    margin-bottom: 4px;
+  }
 `;
 
 const TrackingText = styled.p`
   color: ${DesignTokenColors.neutralUI700};
   margin: 0;
+
+  @media (max-width: 575px) {
+    font-size: 13px;
+  }
 `;
diff --git a/src/js/pages/ManageMyCandidates/SupportersInvited.jsx b/src/js/pages/ManageMyCandidates/SupportersInvited.jsx
index 510cbda2d..a5973bcf8 100644
--- a/src/js/pages/ManageMyCandidates/SupportersInvited.jsx
+++ b/src/js/pages/ManageMyCandidates/SupportersInvited.jsx
@@ -1,144 +1,59 @@
-import React, { useEffect, useMemo, useState } from 'react';
+/* eslint-disable no-alert */
+import React, { useContext, useEffect, useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
+import PropTypes from 'prop-types';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
-import EmailIcon from '@mui/icons-material/Email';
+import EmailOutlinedIcon from '@mui/icons-material/EmailOutlined';
 import MailOutlineIcon from '@mui/icons-material/MailOutline';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
-import SmsIcon from '@mui/icons-material/Sms';
+import SearchIcon from '@mui/icons-material/Search';
+import SmsOutlinedIcon from '@mui/icons-material/SmsOutlined';
 import Alert from '@mui/material/Alert';
 import Snackbar from '@mui/material/Snackbar';
 import styled from 'styled-components';
 
 import DesignTokenColors from '../../common/components/Style/DesignTokenColors';
-import ActionPill from '../../components/ManageMyCandidates/ActionPill';
-import { CandidateActionsFilterMenu, CandidateTraitsFilterMenu, CandidateRowMenu } from '../../components/ManageMyCandidates/Menus';
+import { CandidateRowMenu, SelectAllCheckbox } from '../../components/ManageMyCandidates/Menus';
 import { SendMessageButton, SendMessageButtonMobile } from '../../components/ManageMyCandidates/SendButtons';
-import { CardList, Card, CardTopRow, CardActionsAndOpinion, CardInfo, CardInfoTitle, CardInfoValue, VerticalBarWrapper, VerticalBar, ToolbarRow, LeftTools } from '../../components/Style/ManageMyCandidates';
+import TrackingHeaderActionContext from './TrackingHeaderActionContext';
+import { CardTopRow, Container, KebabBtn, NameRow, NameText, RightOptions } from '../../components/Style/ManageMyCandidates';
+import { ActionLinkButton, DesktopGridHeader, DesktopGridRow, FlatCardList, FlatRowCard, MobileToolbar, NameCell, SearchBtn, SelectAllInline } from '../../components/Style/SupporterTrackingStyles';
 
-const FILTERS = {
-  ALL: 'all',
-  HAS_INVITED: 'hasInvited',
-  HAS_ENDORSED: 'hasEndorsed',
-};
+const GRID_COLS = 'minmax(160px, 220px) minmax(140px, 1.1fr) minmax(140px, 1.1fr) minmax(110px, 0.7fr) minmax(70px, 0.4fr) minmax(110px, 0.6fr)';
 
 export default function SupportersInvited ({ supporters }) {
+  const headerActionSlot = useContext(TrackingHeaderActionContext);
   const [selected, setSelected] = useState(() => new Set());
-  const [activeFilter, setActiveFilter] = useState(FILTERS.ALL);
-  const [copyOpen, setCopyOpen] = useState(false);
-  const [isSending, setIsSending] = useState(false);
   const [sendToast, setSendToast] = useState({ open: false, ok: true, msg: '' });
-
-  // ----- checkbox dropdown menu state -----
-  const [selectAnchorEl, setSelectAnchorEl] = useState(null);
-  // ----- "All" dropdown menu state -----
-  const [filterAnchorEl, setFilterAnchorEl] = useState(null);
-  // ----- per-row "triple dot" menu state -----
   const [rowMenuAnchorEl, setRowMenuAnchorEl] = useState(null);
   const [rowMenuVoter, setRowMenuVoter] = useState(null);
 
-  const getPendingActions = (v) => ([
-    !v.endorsed && 'Endorse',
-    !v.publicOpinion && 'Write public opinion',
-    v.friendsInvited === 0 && 'Invite friends',
-  ].filter(Boolean));
-
-  const getActionsLabel = (v) => getPendingActions(v).join(', ');
-
-  // ----- derived data for selected voters, dropdown + counts -----
-  const selectedVoters = useMemo(() => {
-    const selectedIds = selected;
-    return supporters.filter((v) => selectedIds.has(v.id));
-  }, [supporters, selected]);
-
-  const visibleSupporters = useMemo(() => {
-    switch (activeFilter) {
-      case FILTERS.HAS_INVITED:
-        return supporters.filter((v) => (v.friendsInvited || 0) > 0);
-      case FILTERS.HAS_ENDORSED:
-        return supporters.filter((v) => !!v.endorsed);
-      case FILTERS.ALL:
-      default:
-        return supporters;
-    }
-  }, [supporters, activeFilter]);
-
-  const actionGroups = useMemo(() => {
-    // key: actionsLabel, value: array of supporter ids
-    const map = new Map();
-
-    visibleSupporters.forEach((v) => {
-      const actionsLabel = getActionsLabel(v);
-      if (!actionsLabel) return; // no pending actions => don't appear in "Ask to:" menu
-      const prev = map.get(actionsLabel) || [];
-      prev.push(v.id);
-      map.set(actionsLabel, prev);
-    });
-
-    // Sort by count desc, then label asc
-    return Array.from(map.entries())
-      .map(([label, ids]) => ({ label, ids, count: ids.length }))
-      .sort((a, b) => (b.count - a.count) || a.label.localeCompare(b.label));
-  }, [getActionsLabel, visibleSupporters]);
-
   useEffect(() => {
-    const visibleIds = new Set(visibleSupporters.map((v) => v.id));
+    const visibleIds = new Set(supporters.map((v) => v.id));
     setSelected((prev) => new Set([...prev].filter((id) => visibleIds.has(id))));
-  }, [visibleSupporters]);
+  }, [supporters]);
 
-  const totalVisibleCount = visibleSupporters.length;
-  const selectedVisibleCount = useMemo(
-    () => visibleSupporters.filter((v) => selected.has(v.id)).length,
-    [visibleSupporters, selected],
+  const totalCount = supporters.length;
+  const selectedCount = useMemo(
+    () => supporters.filter((v) => selected.has(v.id)).length,
+    [supporters, selected],
   );
-
-  // ----- "All" filter dropdown data (counts) -----
-  const filterLabel = useMemo(() => {
-    switch (activeFilter) {
-      case FILTERS.HAS_INVITED: return 'Has invited friends';
-      case FILTERS.HAS_ENDORSED: return 'Has endorsed';
-      default: return 'All';
-    }
-  }, [activeFilter]);
-
-  const filterGroups = useMemo(() => {
-    const hasInvitedIds = [];
-    const hasEndorsedIds = [];
-
-    supporters.forEach((v) => {
-      if ((v.friendsInvited || 0) > 0) hasInvitedIds.push(v.id);
-      if (v.endorsed) hasEndorsedIds.push(v.id);
-    });
-
-    return {
-      hasInvitedIds,
-      hasInvitedCount: hasInvitedIds.length,
-      hasEndorsedIds,
-      hasEndorsedCount: hasEndorsedIds.length,
-    };
-  }, [supporters]);
+  const allChecked = totalCount > 0 && selectedCount === totalCount;
+  const indeterminate = selectedCount > 0 && selectedCount < totalCount;
 
   const toggleSelected = (id) => {
     setSelected((prev) => {
       const next = new Set(prev);
-      if (next.has(id)) {
-        next.delete(id);
-      } else {
-        next.add(id);
-      }
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
       return next;
     });
   };
 
   const handleSelectCheckboxClick = (e) => {
-    e.stopPropagation(); // important: don't open the dropdown menu
-    setSelected((prev) => {
-      if (prev.size === 0) {
-        // select all visible
-        return new Set(visibleSupporters.map((v) => v.id));
-      }
-      // clear all selection
-      return new Set();
-    });
+    e.stopPropagation();
+    setSelected((prev) => (prev.size === 0 ? new Set(supporters.map((v) => v.id)) : new Set()));
   };
 
   const openRowMenu = (e, voter) => {
@@ -147,101 +62,81 @@ export default function SupportersInvited ({ supporters }) {
     setRowMenuVoter(voter);
   };
 
-  const handleSendMessage = () => {
-    if (rowMenuVoter) {
-      alert(`Send message to: ${rowMenuVoter.name}`);
-    }
+  const handleResendSelected = () => {
+    if (selectedCount === 0) return;
+    setSendToast({
+      open: true,
+      ok: true,
+      msg: `Resent invitation to ${selectedCount} voter${selectedCount === 1 ? '' : 's'}.`,
+    });
   };
 
-  const handleSendThankYou = async () => {
-    console.log('selectedVoters', selectedVoters);
-    if (selectedVoters.length === 0) {
-      return;
-    }
-
-    setIsSending(true);
-    try {
-      // TODO: replace with real API call(s)
-      // await sendThankYouMessage(selectedVoters, thankYouMessage);
-      handleSendMessage();
-      console.log('here');
-      setSendToast({
-        open: true,
-        ok: true,
-        msg: `Sent to ${selectedVoters.length} supporter${selectedVoters.length === 1 ? '' : 's'}.`,
-      });
-      console.log('here2');
-
-      // Optional: mark them as "messageSentCount + 1" in state once you have stateful supporters
-      // Optional: clear selection after send
-      // setSelected(new Set());
-    } catch (err) {
-      console.error(err);
-      setSendToast({ open: true, ok: false, msg: 'Send failed. Please try again.' });
-    } finally {
-      setIsSending(false);
-    }
+  const getInvitedViaLabel = (v) => {
+    const channels = [];
+    if (v.emailInviteSent) channels.push('Email');
+    if (v.textInviteSent) channels.push('text');
+    if (channels.length === 0) return '—';
+    channels[0] = channels[0].charAt(0).toUpperCase() + channels[0].slice(1);
+    return channels.join(', ');
   };
 
   return (
     <Container>
-      {/* <MessageContainer className="u-show-desktop-tablet">
-
-      </MessageContainer> */}
-
-      {/* Abstract Out */}
-      <ToolbarRow>
-        <LeftTools>
-
-          <CandidateActionsFilterMenu
-            selectAnchorEl={selectAnchorEl}
-            setSelectAnchorEl={setSelectAnchorEl}
-            checkedBoolean={totalVisibleCount > 0 && selectedVisibleCount === totalVisibleCount}
-            indeterminateBoolean={selectedVisibleCount > 0 && selectedVisibleCount < totalVisibleCount}
-            handleSelectCheckboxClick={handleSelectCheckboxClick}
-            menuOptions={[
-              { label: 'All', onClick: () => setSelected(new Set(visibleSupporters.map((v) => v.id)))},
-              ...actionGroups.map((g) => ({
-                label: `Ask to: ${g.label} - (${g.count})`,
-                onClick: () => setSelected(new Set(g.ids)) })),
-              { label: 'None', onClick: () => setSelected(new Set()) },
-            ]}
-          />
-
-          <VerticalBarWrapper $tight>
-            <VerticalBar />
-          </VerticalBarWrapper>
-
-          <CandidateTraitsFilterMenu
-            filterAnchorEl={filterAnchorEl}
-            setFilterAnchorEl={setFilterAnchorEl}
-            filterLabel={filterLabel}
-            menuOptions={[
-              { label: 'All', onClick: () => setActiveFilter(FILTERS.ALL) },
-              { label: `Has invited friends - (${filterGroups.hasInvitedCount})`,
-                onClick: () => setActiveFilter(FILTERS.HAS_INVITED) },
-              { label: `Has endorsed - (${filterGroups.hasEndorsedCount})`,
-                onClick: () => setActiveFilter(FILTERS.HAS_ENDORSED) },
-            ]}
-          />
-        </LeftTools>
-
+      {headerActionSlot && createPortal(
         <SendMessageButton
-          disbaleBoolean={selectedVoters.length === 0}
-          sendMessageFunction={handleSendThankYou}
-          buttonText={`Resend Invitation to Selected (${selectedVoters.length})`}
-        />
-      </ToolbarRow>
-
-
-      <CardList>
-        {visibleSupporters.map((v) => {
+          verb="Resend invite"
+          count={selectedCount}
+          onClick={handleResendSelected}
+        />,
+        headerActionSlot,
+      )}
+
+      {/* Mobile toolbar */}
+      <MobileToolbar className="u-show-mobile">
+        <SelectAllInline>
+          <SelectAllCheckbox
+            checked={allChecked}
+            indeterminate={indeterminate}
+            onClick={handleSelectCheckboxClick}
+          />
+          Select all
+        </SelectAllInline>
+        <SearchBtn
+          type="button"
+          aria-label="Search"
+          onClick={() => console.log('TODO: implement search feature')}
+        >
+          <SearchIcon sx={{ fontSize: 22 }} />
+        </SearchBtn>
+      </MobileToolbar>
+
+      {/* Desktop column headers (with Select all in the first cell) */}
+      <DesktopGridHeader className="u-show-desktop-tablet" $cols={GRID_COLS}>
+        <HeaderCell>
+          <SelectAllInline>
+            <SelectAllCheckbox
+              checked={allChecked}
+              indeterminate={indeterminate}
+              onClick={handleSelectCheckboxClick}
+            />
+            Select all
+          </SelectAllInline>
+        </HeaderCell>
+        <HeaderCell />
+        <HeaderCell />
+        <HeaderCell>Invite link clicked</HeaderCell>
+        <HeaderCell>Joined</HeaderCell>
+        <HeaderCell>Friends invited</HeaderCell>
+      </DesktopGridHeader>
+
+      <FlatCardList>
+        {supporters.map((v) => {
           const isChecked = selected.has(v.id);
-
           return (
-            <Card key={v.id} $selected={isChecked}>
-              <CardTopRow>
-                <NameRow>
+            <FlatRowCard key={v.id} $selected={isChecked}>
+              {/* Desktop row */}
+              <DesktopGridRow className="u-show-desktop-tablet" $cols={GRID_COLS}>
+                <NameCell>
                   <input
                     type="checkbox"
                     checked={isChecked}
@@ -249,128 +144,145 @@ export default function SupportersInvited ({ supporters }) {
                     aria-label={`Select ${v.name}`}
                   />
                   <NameText>{v.name}</NameText>
+                </NameCell>
+
+                <StatusCell>
+                  {v.emailInviteSent ? (
+                    <SentStatus>
+                      <CheckCircleIcon color="success" sx={{ fontSize: 16 }} />
+                      Email invite sent
+                    </SentStatus>
+                  ) : (
+                    <ActionLinkButton type="button" onClick={() => alert(`Send email invite to ${v.name}`)}>
+                      <EmailOutlinedIcon sx={{ fontSize: 18 }} />
+                      Send email invite
+                    </ActionLinkButton>
+                  )}
+                </StatusCell>
+
+                <StatusCell>
+                  {v.textInviteSent ? (
+                    <SentStatus>
+                      <CheckCircleIcon color="success" sx={{ fontSize: 16 }} />
+                      Text invite sent
+                    </SentStatus>
+                  ) : (
+                    <ActionLinkButton type="button" onClick={() => alert(`Send text invite to ${v.name}`)}>
+                      <SmsOutlinedIcon sx={{ fontSize: 18 }} />
+                      Send text invite
+                    </ActionLinkButton>
+                  )}
+                </StatusCell>
+
+                <StatusCell>
+                  {v.inviteLinkClicked ? (
+                    <YesStatus>
+                      <CheckCircleIcon color="success" sx={{ fontSize: 16 }} />
+                      Yes
+                    </YesStatus>
+                  ) : 'No'}
+                </StatusCell>
+
+                <StatusCell>
+                  {v.joined ? (
+                    <YesStatus>
+                      <CheckCircleIcon color="success" sx={{ fontSize: 16 }} />
+                      Yes
+                    </YesStatus>
+                  ) : 'No'}
+                </StatusCell>
+
+                <StatusCell>
+                  {v.friendsInvited > 0 && (
+                    <YesStatus>
+                      <CheckCircleIcon color="success" sx={{ fontSize: 16 }} />
+                      {v.friendsInvited}
+                    </YesStatus>
+                  )}
+                </StatusCell>
+              </DesktopGridRow>
+
+              {/* Mobile card */}
+              <div className="u-show-mobile">
+                <CardTopRow>
+                  <NameRow>
+                    <input
+                      type="checkbox"
+                      checked={isChecked}
+                      onChange={() => toggleSelected(v.id)}
+                      aria-label={`Select ${v.name}`}
+                    />
+                    <NameText>{v.name}</NameText>
+                  </NameRow>
+                  <RightOptions>
+                    <KebabBtn type="button" aria-label="More options" onClick={(e) => openRowMenu(e, v)}>
+                      <MoreHorizIcon sx={{ fontSize: 20 }} />
+                    </KebabBtn>
+                  </RightOptions>
+                </CardTopRow>
+
+                <FieldGrid>
+                  <Field>
+                    <FieldLabel>Invited via</FieldLabel>
+                    <FieldValue>{getInvitedViaLabel(v)}</FieldValue>
+                  </Field>
+                  <Field>
+                    <FieldLabel>Invite link clicked</FieldLabel>
+                    <FieldValue>
+                      {v.inviteLinkClicked ? (
+                        <YesStatus>
+                          <CheckCircleIcon color="success" sx={{ fontSize: 14 }} />
+                          Yes
+                        </YesStatus>
+                      ) : 'No'}
+                    </FieldValue>
+                  </Field>
+                  <Field>
+                    <FieldLabel>Joined</FieldLabel>
+                    <FieldValue>
+                      {v.joined ? (
+                        <YesStatus>
+                          <CheckCircleIcon color="success" sx={{ fontSize: 14 }} />
+                          Yes
+                        </YesStatus>
+                      ) : 'No'}
+                    </FieldValue>
+                  </Field>
+                  <Field>
+                    <FieldLabel>Friends invited</FieldLabel>
+                    <FieldValue>
+                      {v.friendsInvited > 0 ? (
+                        <YesStatus>
+                          <CheckCircleIcon color="success" sx={{ fontSize: 14 }} />
+                          {v.friendsInvited}
+                        </YesStatus>
+                      ) : 'None'}
+                    </FieldValue>
+                  </Field>
+                </FieldGrid>
 
-                </NameRow>
-
-                <RightOptions>
-                  <VerticalBarWrapper>
-                    <VerticalBar />
-                  </VerticalBarWrapper>
-                  <KebabBtn
-                    type="button"
-                    aria-label="More options"
-                    onClick={(e) => openRowMenu(e, v)}
-                  >
-                    <MoreHorizIcon sx={{ fontSize: 20 }} />
-                  </KebabBtn>
-                </RightOptions>
-              </CardTopRow>
-
-              <CardActionsAndOpinion>
-
-                <CardInfo>
-                  <CardInfoTitle>
-                    Invited via
-                  </CardInfoTitle>
-                  <CardInfoValue>
-                    <>
-                      {!!v.emailInviteSent && <EmailIcon />}
-                      {!!v.textInviteSent && <SmsIcon />}
-                    </>
-                  </CardInfoValue>
-                </CardInfo>
-
-                <VerticalBarWrapper><VerticalBar /></VerticalBarWrapper>
-
-                <CardInfo>
-                  <CardInfoTitle>
-                    Link clicked
-                  </CardInfoTitle>
-                  <CardInfoValue>
-                    {!!v.inviteLinkClicked ? (
-                      <>
-                        <CheckCircleIconGreenLarge />
-                        Yes
-                      </>
-                    ) : (
-                      'No'
-                    )}
-                  </CardInfoValue>
-                </CardInfo>
-
-                <VerticalBarWrapper><VerticalBar /></VerticalBarWrapper>
-
-                <CardInfo>
-                  <CardInfoTitle>
-                    Joined
-                  </CardInfoTitle>
-                  <CardInfoValue>
-                    {!!v.joined ? (
-                      <>
-                        <CheckCircleIconGreenLarge />
-                        Yes
-                      </>
-                    ) : (
-                      'No'
-                    )}
-                  </CardInfoValue>
-                </CardInfo>
-
-                <VerticalBarWrapper><VerticalBar /></VerticalBarWrapper>
-
-                <CardInfo>
-                  <CardInfoTitle>
-                    Friends invited
-                  </CardInfoTitle>
-                  <CardInfoValue>
-                    {!!v.friendsInvited ? (
-                      <>
-                        <CheckCircleIconGreenLarge />
-                        {v.friendsInvited}
-                      </>
-                    ) : (
-                      'None'
-                    )}
-                  </CardInfoValue>
-                </CardInfo>
-
-              </CardActionsAndOpinion>
-
-
-              <div>
                 {!v.emailInviteSent && (
-                  <ActionPill
-                    onClick={() => alert(`Send an email & ask ${v.name} to join WeVote`)}
-                    label={(
-                      <>
-                        <EmailIcon sx={{ fontSize: 18 }} />
-                        Send email invite
-                      </>
-                    )}
-                  />
+                  <ActionLinkButton type="button" onClick={() => alert(`Send email invite to ${v.name}`)}>
+                    <EmailOutlinedIcon sx={{ fontSize: 18 }} />
+                    Send email invite
+                  </ActionLinkButton>
                 )}
-
                 {!v.textInviteSent && (
-                  <ActionPill
-                    onClick={() => alert(`Send a text & ask ${v.name} to join WeVote`)}
-                    label={(
-                      <>
-                        <SmsIcon sx={{ fontSize: 18 }} />
-                        Send text invite
-                      </>
-                    )}
-                  />
+                  <ActionLinkButton type="button" onClick={() => alert(`Send text invite to ${v.name}`)}>
+                    <SmsOutlinedIcon sx={{ fontSize: 18 }} />
+                    Send text invite
+                  </ActionLinkButton>
                 )}
               </div>
-            </Card>
+            </FlatRowCard>
           );
         })}
-      </CardList>
+      </FlatCardList>
 
       <SendMessageButtonMobile
-        disbaleBoolean={selectedVoters.length === 0}
-        sendThankYouFunction={handleSendThankYou}
-        buttonText={`Resend Invitation to Selected (${selectedVoters.length})`}
+        verb="Resend invitation to selected"
+        count={selectedCount}
+        onClick={handleResendSelected}
       />
 
       <CandidateRowMenu
@@ -387,26 +299,12 @@ export default function SupportersInvited ({ supporters }) {
         ]}
       />
 
-      {/* Pop up to display when a user copies or sends the Thank You message */}
-      <Snackbar
-        open={copyOpen}
-        autoHideDuration={2000}
-        onClose={() => setCopyOpen(false)}
-        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
-        sx={{ '&.MuiSnackbar-anchorOriginTopCenter': { top: 80 } }}
-      >
-        <Alert severity="success" variant="filled">
-          Copied!
-        </Alert>
-      </Snackbar>
       <Snackbar
         open={sendToast.open}
         autoHideDuration={2500}
         onClose={() => setSendToast((t) => ({ ...t, open: false }))}
         anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
-        sx={{
-          '&.MuiSnackbar-anchorOriginTopCenter': { top: 80 },
-        }}
+        sx={{ '&.MuiSnackbar-anchorOriginTopCenter': { top: 80 } }}
       >
         <Alert severity={sendToast.ok ? 'success' : 'error'} variant="filled">
           {sendToast.msg}
@@ -415,44 +313,56 @@ export default function SupportersInvited ({ supporters }) {
     </Container>
   );
 }
+SupportersInvited.propTypes = {
+  supporters: PropTypes.arrayOf(PropTypes.object),
+};
 
 /* ===== Styled components ===== */
-const Container = styled.div`
+
+const Field = styled.div`
   display: flex;
   flex-direction: column;
+  gap: 2px;
+  min-width: 0;
 `;
 
-const NameRow = styled.div`
-  display: flex;
+const FieldGrid = styled.div`
+  display: grid;
   gap: 10px;
-  align-items: center;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  margin-top: 6px;
 `;
 
-const NameText = styled.div`
-  font-size: 16px;
-  font-weight: 700;
+const FieldLabel = styled.div`
+  color: ${DesignTokenColors.neutralUI600};
+  font-size: 12px;
 `;
 
-const KebabBtn = styled.button`
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  color: #6b7280;
-  padding: 2px 6px;
-  border-radius: 10px;
-
-  &:hover {
-    background: ${DesignTokenColors.neutralUI50};
-  }
+const FieldValue = styled.div`
+  color: ${DesignTokenColors.neutralUI900};
+  font-size: 13px;
+  font-weight: 500;
 `;
 
-const RightOptions = styled.div`
-  margin-left: auto;
-  display: flex;
+const HeaderCell = styled.div``;
+
+const SentStatus = styled.span`
   align-items: center;
+  color: ${DesignTokenColors.neutralUI800};
+  display: inline-flex;
+  font-size: 14px;
+  gap: 4px;
 `;
 
-const CheckCircleIconGreenLarge = styled(CheckCircleIcon)`
-  color: green;
-  font-size: large;
+const StatusCell = styled.div`
+  color: ${DesignTokenColors.neutralUI800};
+  font-size: 14px;
+`;
+
+const YesStatus = styled.span`
+  align-items: center;
+  color: ${DesignTokenColors.neutralUI900};
+  display: inline-flex;
+  font-weight: 600;
+  gap: 4px;
 `;
diff --git a/src/js/pages/ManageMyCandidates/SupportersJoined.jsx b/src/js/pages/ManageMyCandidates/SupportersJoined.jsx
index b9a616f64..b4b7358d5 100644
--- a/src/js/pages/ManageMyCandidates/SupportersJoined.jsx
+++ b/src/js/pages/ManageMyCandidates/SupportersJoined.jsx
@@ -1,32 +1,35 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import styled from 'styled-components';
-import Alert from '@mui/material/Alert';
-import Button from '@mui/material/Button';
-import ButtonBase from '@mui/material/ButtonBase';
-import Checkbox from '@mui/material/Checkbox';
+/* eslint-disable no-alert */
+import React, { useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import PropTypes from 'prop-types';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
-import DoneIcon from '@mui/icons-material/Done';
-import Dialog from '@mui/material/Dialog';
-import DialogTitle from '@mui/material/DialogTitle';
-import DialogContent from '@mui/material/DialogContent';
-import DialogActions from '@mui/material/DialogActions';
-import Drawer from '@mui/material/Drawer';
 import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
 import MailOutlineIcon from '@mui/icons-material/MailOutline';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
-import Snackbar from '@mui/material/Snackbar';
-import TextField from '@mui/material/TextField';
+import SearchIcon from '@mui/icons-material/Search';
 import ThumbUpIcon from '@mui/icons-material/ThumbUp';
 import VisibilityIcon from '@mui/icons-material/Visibility';
+import Alert from '@mui/material/Alert';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import Drawer from '@mui/material/Drawer';
+import Snackbar from '@mui/material/Snackbar';
+import TextField from '@mui/material/TextField';
+import styled from 'styled-components';
+
 import DesignTokenColors from '../../common/components/Style/DesignTokenColors';
+import ActionPill from '../../components/ManageMyCandidates/ActionPill';
+import { CandidateActionsFilterMenu, CandidateRowMenu, CandidateTraitsFilterMenu, DropdownMenu, SelectAllCheckbox } from '../../components/ManageMyCandidates/Menus';
+import { SendMessageButton, SendMessageButtonMobile } from '../../components/ManageMyCandidates/SendButtons';
+import TrackingHeaderActionContext from './TrackingHeaderActionContext';
+import { Card, CardList, CardTopRow, Container, KebabBtn, LeftTools, NameRow, NameText, RightOptions, ToolbarRow, VerticalBar, VerticalBarWrapper } from '../../components/Style/ManageMyCandidates';
+import { MobileActionPill, MobileActions, MobileFieldLabel, MobileFieldValue, MobileToolbar, SearchBtn, SelectAllInline } from '../../components/Style/SupporterTrackingStyles';
 
 const FILTERS = {
   ALL: 'all',
@@ -40,7 +43,20 @@ Thank you so much. May the odds be ever in your favor. We love you.
 
 From the developers at WeVote <3`;
 
+function getPendingActions (v) {
+  return [
+    !v.endorsed && 'Endorse',
+    !v.publicOpinion && 'Write public opinion',
+    v.friendsInvited === 0 && 'Invite friends',
+  ].filter(Boolean);
+}
+
+function getActionsLabel (v) {
+  return getPendingActions(v).join(', ');
+}
+
 export default function SupportersJoined ({ supporters }) {
+  const headerActionSlot = useContext(TrackingHeaderActionContext);
   const [selected, setSelected] = useState(() => new Set());
   const [expanded, setExpanded] = useState(() => new Set());
   const [activeFilter, setActiveFilter] = useState(FILTERS.ALL);
@@ -49,32 +65,22 @@ export default function SupportersJoined ({ supporters }) {
   const [viewOpen, setViewOpen] = useState(false);
   const [editOpen, setEditOpen] = useState(false);
   const [copyOpen, setCopyOpen] = useState(false);
-  const [isSending, setIsSending] = useState(false);
+  const [, setIsSending] = useState(false);
   const [sendToast, setSendToast] = useState({ open: false, ok: true, msg: '' });
-  const totalCount = supporters.length;
-  const selectedCount = selected.size;
 
-  // ----- checkbox dropdown menu state -----
   const [selectAnchorEl, setSelectAnchorEl] = useState(null);
-  const selectMenuOpen = Boolean(selectAnchorEl);
-  // ----- "All" dropdown menu state -----
   const [filterAnchorEl, setFilterAnchorEl] = useState(null);
-  const filterMenuOpen = Boolean(filterAnchorEl);
-  // ----- per-row "triple dot" menu state -----
   const [rowMenuAnchorEl, setRowMenuAnchorEl] = useState(null);
   const [rowMenuVoter, setRowMenuVoter] = useState(null);
-  const rowMenuOpen = Boolean(rowMenuAnchorEl);
-  // ----- candidate drawer open state -----
+
   const [candidateDrawerOpen, setCandidateDrawerOpen] = useState(false);
   const [candidateDrawerVoter, setCandidateDrawerVoter] = useState(null);
-  // ----- thank you dropdown (mobile) -----
+
   const [thankYouAnchorEl, setThankYouAnchorEl] = useState(null);
   const thankYouMenuOpen = Boolean(thankYouAnchorEl);
-
   const openThankYouMenu = (e) => setThankYouAnchorEl(e.currentTarget);
   const closeThankYouMenu = () => setThankYouAnchorEl(null);
 
-  // ----- helpers (single source of truth for "actions") -----
   const copyThankYouMessage = async () => {
     try {
       await navigator.clipboard.writeText(thankYouMessage);
@@ -84,33 +90,20 @@ export default function SupportersJoined ({ supporters }) {
     }
   };
 
-  const getPendingActions = (v) => ([
-    !v.endorsed && 'Endorse',
-    !v.publicOpinion && 'Write public opinion',
-    v.friendsInvited === 0 && 'Invite friends',
-  ].filter(Boolean));
-
-  const getActionsLabel = (v) => getPendingActions(v).join(', ');
-
-  // ----- derived data for selected voters, dropdown + counts -----
-  const selectedVoters = useMemo(() => {
-    const selectedIds = selected;
-    return supporters.filter((v) => selectedIds.has(v.id));
-  }, [supporters, selected]);
+  const selectedVoters = useMemo(
+    () => supporters.filter((v) => selected.has(v.id)),
+    [supporters, selected],
+  );
 
   const actionGroups = useMemo(() => {
-    // key: actionsLabel, value: array of supporter ids
     const map = new Map();
-
     supporters.forEach((v) => {
       const actionsLabel = getActionsLabel(v);
-      if (!actionsLabel) return; // no pending actions => don't appear in "Ask to:" menu
+      if (!actionsLabel) return;
       const prev = map.get(actionsLabel) || [];
       prev.push(v.id);
       map.set(actionsLabel, prev);
     });
-
-    // Sort by count desc, then label asc
     return Array.from(map.entries())
       .map(([label, ids]) => ({ label, ids, count: ids.length }))
       .sort((a, b) => (b.count - a.count) || a.label.localeCompare(b.label));
@@ -127,6 +120,7 @@ export default function SupportersJoined ({ supporters }) {
         return supporters;
     }
   }, [supporters, activeFilter]);
+
   useEffect(() => {
     const visibleIds = new Set(visibleSupporters.map((v) => v.id));
     setSelected((prev) => new Set([...prev].filter((id) => visibleIds.has(id))));
@@ -135,12 +129,11 @@ export default function SupportersJoined ({ supporters }) {
   const totalVisibleCount = visibleSupporters.length;
   const selectedVisibleCount = useMemo(
     () => visibleSupporters.filter((v) => selected.has(v.id)).length,
-    [visibleSupporters, selected]
+    [visibleSupporters, selected],
   );
-  const checked = totalVisibleCount > 0 && selectedVisibleCount === totalVisibleCount;
+  const allChecked = totalVisibleCount > 0 && selectedVisibleCount === totalVisibleCount;
   const indeterminate = selectedVisibleCount > 0 && selectedVisibleCount < totalVisibleCount;
 
-  // ----- "All" filter dropdown data (counts) -----
   const filterLabel = useMemo(() => {
     switch (activeFilter) {
       case FILTERS.HAS_INVITED: return 'Has invited friends';
@@ -152,12 +145,10 @@ export default function SupportersJoined ({ supporters }) {
   const filterGroups = useMemo(() => {
     const hasInvitedIds = [];
     const hasEndorsedIds = [];
-
     supporters.forEach((v) => {
       if ((v.friendsInvited || 0) > 0) hasInvitedIds.push(v.id);
       if (v.endorsed) hasEndorsedIds.push(v.id);
     });
-
     return {
       hasInvitedIds,
       hasInvitedCount: hasInvitedIds.length,
@@ -169,7 +160,8 @@ export default function SupportersJoined ({ supporters }) {
   const toggleSelected = (id) => {
     setSelected((prev) => {
       const next = new Set(prev);
-      next.has(id) ? next.delete(id) : next.add(id);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
       return next;
     });
   };
@@ -177,81 +169,15 @@ export default function SupportersJoined ({ supporters }) {
   const toggleExpanded = (id) => {
     setExpanded((prev) => {
       const next = new Set(prev);
-      next.has(id) ? next.delete(id) : next.add(id);
-      return next;
-    });
-  };
-
-  const selectAllVisible = () => {
-    setSelected((prev) => {
-      const next = new Set(prev);
-      const allSelected = visibleSupporters.every((r) => next.has(r.id));
-      if (allSelected) {
-        visibleSupporters.forEach((r) => next.delete(r.id));
-      } else {
-        visibleSupporters.forEach((r) => next.add(r.id));
-      }
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
       return next;
     });
   };
 
   const handleSelectCheckboxClick = (e) => {
-    e.stopPropagation(); // important: don't open the dropdown menu
-    setSelected((prev) => {
-      if (prev.size === 0) {
-        // select all visible
-        return new Set(visibleSupporters.map((v) => v.id));
-      }
-      // clear all selection
-      return new Set();
-    });
-  };
-
-  const openSelectMenu = (e) => setSelectAnchorEl(e.currentTarget);
-  const closeSelectMenu = () => setSelectAnchorEl(null);
-
-  const selectIds = (ids) => {
-    setSelected(new Set(ids));
-    closeSelectMenu();
-  };
-
-  const handleAll = () => {
-    setSelected(new Set(supporters.map((v) => v.id)));
-    closeSelectMenu();
-  };
-
-  const handleNone = () => {
-    setSelected(new Set());
-    closeSelectMenu();
-  };
-
-  const openFilterMenu = (e) => setFilterAnchorEl(e.currentTarget);
-  const closeFilterMenu = () => setFilterAnchorEl(null);
-
-  const setFilterAll = () => {
-    setActiveFilter(FILTERS.ALL);
-    closeFilterMenu();
-  };
-
-  const setFilterHasInvited = () => {
-    setActiveFilter(FILTERS.HAS_INVITED);
-    closeFilterMenu();
-  };
-
-  const setFilterHasEndorsed = () => {
-    setActiveFilter(FILTERS.HAS_ENDORSED);
-    closeFilterMenu();
-  };
-
-  const openRowMenu = (e, voter) => {
     e.stopPropagation();
-    setRowMenuAnchorEl(e.currentTarget);
-    setRowMenuVoter(voter);
-  };
-
-  const closeRowMenu = () => {
-    setRowMenuAnchorEl(null);
-    setRowMenuVoter(null);
+    setSelected((prev) => (prev.size === 0 ? new Set(visibleSupporters.map((v) => v.id)) : new Set()));
   };
 
   const openCandidateDrawer = (voter) => {
@@ -264,36 +190,23 @@ export default function SupportersJoined ({ supporters }) {
     setCandidateDrawerVoter(null);
   };
 
-  const handleEditVoter = () => {
-    if (!rowMenuVoter) return;
-    alert(`Edit voter: ${rowMenuVoter.name}`);
-    closeRowMenu();
-  };
-
-  const handleSendMessage = () => {
-    if (!rowMenuVoter) return;
-    alert(`Send message to: ${rowMenuVoter.name}`);
-    closeRowMenu();
+  const openRowMenu = (e, voter) => {
+    e.stopPropagation();
+    setRowMenuAnchorEl(e.currentTarget);
+    setRowMenuVoter(voter);
   };
 
   const handleSendThankYou = async () => {
     if (selectedVoters.length === 0) return;
-
     setIsSending(true);
     try {
       // TODO: replace with real API call(s)
       // await sendThankYouMessage(selectedVoters, thankYouMessage);
-      handleSendMessage();
-
       setSendToast({
         open: true,
         ok: true,
         msg: `Sent to ${selectedVoters.length} supporter${selectedVoters.length === 1 ? '' : 's'}.`,
       });
-
-      // Optional: mark them as "messageSentCount + 1" in state once you have stateful supporters
-      // Optional: clear selection after send
-      // setSelected(new Set());
     } catch (err) {
       console.error(err);
       setSendToast({ open: true, ok: false, msg: 'Send failed. Please try again.' });
@@ -304,397 +217,303 @@ export default function SupportersJoined ({ supporters }) {
 
   return (
     <Container>
-      <MessageContainer className="u-show-desktop-tablet">
-        <InfoBox>
-          <strong>
-            Sentiments and opinions posted by WeVote members are private by default.
-            You can view them only if the member chooses to make them public.
-          </strong>
-        </InfoBox>
-
-        <VerticalBarWrapper>
-          <VerticalBar />
-        </VerticalBarWrapper>
-
-        <ThankYouBox>
-          <ThankYouLabelRow>
-            <strong>Thank You message:</strong>
-            <IconRow>
-              <IconBtn
-                type="button"
-                title="View"
-                onClick={() => setViewOpen(true)}
-              >
-                <VisibilityIcon />
+      <TopPanel className="u-show-desktop-tablet">
+        <PrivacyNote>
+          Sentiments and opinions posted by WeVote members are private by default.
+          You can view them only if the member chooses to make them public.
+        </PrivacyNote>
+        <VerticalBarWrapper><VerticalBar /></VerticalBarWrapper>
+        <ThankYouCol>
+          <ThankYouHead>
+            <ThankYouHeading>Thank You message:</ThankYouHeading>
+            <IconBtnRow>
+              <IconBtn type="button" title="View" onClick={() => setViewOpen(true)}>
+                <VisibilityIcon sx={{ fontSize: 17 }} />
               </IconBtn>
-
               <IconBtn
                 type="button"
                 title="Edit"
-                onClick={() => {
-                  setDraftMessage(thankYouMessage);
-                  setEditOpen(true);
-                }}
+                onClick={() => { setDraftMessage(thankYouMessage); setEditOpen(true); }}
               >
-                <EditOutlinedIcon />
+                <EditOutlinedIcon sx={{ fontSize: 17 }} />
               </IconBtn>
-
-              <IconBtn
-                type="button"
-                title="Copy"
-                onClick={copyThankYouMessage}
-              >
-                <ContentCopyIcon />
+              <IconBtn type="button" title="Copy" onClick={copyThankYouMessage}>
+                <ContentCopyIcon sx={{ fontSize: 17 }} />
               </IconBtn>
-            </IconRow>
-          </ThankYouLabelRow>
+            </IconBtnRow>
+          </ThankYouHead>
+          <Subtle>(auto-sent after joining)</Subtle>
+        </ThankYouCol>
+      </TopPanel>
 
-          <ThankYouSubtext>(auto-sent after joining)</ThankYouSubtext>
-        </ThankYouBox>
-      </MessageContainer>
-
-      <ToolbarRow>
+      <ToolbarRow className="u-show-desktop-tablet">
         <LeftTools>
-          <SelectControl
-            aria-label="Selection options"
-            aria-controls={selectMenuOpen ? 'select-by-action-menu' : undefined}
-            aria-haspopup="menu"
-            aria-expanded={selectMenuOpen ? 'true' : undefined}
-          >
-            <Checkbox
-              checked={checked}
-              indeterminate={indeterminate}
-              tabIndex={-1}
-              disableRipple
-              sx={{ padding: 0 }}
-              onClick={handleSelectCheckboxClick}
-              onChange={() => {}}
-            />
-            <CaretButton
-              type="button"
-              onClick={openSelectMenu}
-              aria-label="Open selection menu"
-            >
-              <CaretIcon as={KeyboardArrowDownIcon} />
-            </CaretButton>
-          </SelectControl>
-
-          <Menu
-            id="select-by-action-menu"
-            anchorEl={selectAnchorEl}
-            open={selectMenuOpen}
-            onClose={closeSelectMenu}
-            anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
-            transformOrigin={{ vertical: 'top', horizontal: 'left' }}
-            PaperProps={{
-              style: {
-                borderRadius: 12,
-                overflow: 'hidden',
-              },
-            }}
-          >
-            <MenuItem onClick={handleAll}>
-              <MenuItemText>All</MenuItemText>
-            </MenuItem>
-
-            {actionGroups.map((g) => (
-              <MenuItem key={g.label} onClick={() => selectIds(g.ids)}>
-                <MenuItemText>
-                  Ask to: {g.label} - ({g.count})
-                </MenuItemText>
-              </MenuItem>
-            ))}
-
-            <MenuItem onClick={handleNone}>
-              <MenuItemText>None</MenuItemText>
-            </MenuItem>
-          </Menu>
-
-          <VerticalBarWrapper $tight>
-            <VerticalBar />
-          </VerticalBarWrapper>
-
-          <AllButton
-            variant="text"
-            onClick={openFilterMenu}
-            aria-label="Filter options"
-            aria-controls={filterMenuOpen ? 'all-filter-menu' : undefined}
-            aria-haspopup="menu"
-            aria-expanded={filterMenuOpen ? 'true' : undefined}
-          >
-            {filterLabel}
-            <CaretIcon as={KeyboardArrowDownIcon} />
-          </AllButton>
-          <Menu
-            id="all-filter-menu"
-            anchorEl={filterAnchorEl}
-            open={filterMenuOpen}
-            onClose={closeFilterMenu}
-            anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
-            transformOrigin={{ vertical: 'top', horizontal: 'left' }}
-            PaperProps={{
-              style: {
-                borderRadius: 12,
-                overflow: 'hidden',
-              },
-            }}
-          >
-            <MenuItem onClick={setFilterAll}>
-              <MenuItemText>All</MenuItemText>
-            </MenuItem>
-
-            <MenuItem onClick={setFilterHasInvited}>
-              <MenuItemText>
-                Has invited friends - ({filterGroups.hasInvitedCount})
-              </MenuItemText>
-            </MenuItem>
-
-            <MenuItem onClick={setFilterHasEndorsed}>
-              <MenuItemText>
-                Has endorsed - ({filterGroups.hasEndorsedCount})
-              </MenuItemText>
-            </MenuItem>
-          </Menu>
+          <CandidateActionsFilterMenu
+            selectAnchorEl={selectAnchorEl}
+            setSelectAnchorEl={setSelectAnchorEl}
+            checkedBoolean={allChecked}
+            indeterminateBoolean={indeterminate}
+            handleSelectCheckboxClick={handleSelectCheckboxClick}
+            menuOptions={[
+              { label: 'All', onClick: () => setSelected(new Set(supporters.map((v) => v.id))) },
+              ...actionGroups.map((g) => ({
+                label: `Ask to: ${g.label} - (${g.count})`,
+                onClick: () => setSelected(new Set(g.ids)),
+              })),
+            ]}
+          />
+          <VerticalBarWrapper $tight><VerticalBar /></VerticalBarWrapper>
+          <CandidateTraitsFilterMenu
+            filterAnchorEl={filterAnchorEl}
+            setFilterAnchorEl={setFilterAnchorEl}
+            filterLabel={filterLabel}
+            menuOptions={[
+              { label: 'All', onClick: () => setActiveFilter(FILTERS.ALL) },
+              { label: `Has invited friends - (${filterGroups.hasInvitedCount})`,
+                onClick: () => setActiveFilter(FILTERS.HAS_INVITED) },
+              { label: `Has endorsed - (${filterGroups.hasEndorsedCount})`,
+                onClick: () => setActiveFilter(FILTERS.HAS_ENDORSED) },
+            ]}
+          />
         </LeftTools>
-        {/*
-        <VerticalBarWrapper $tight className="u-show-mobile">
-          <VerticalBar />
-        </VerticalBarWrapper>
-        */}
-        {/* Thank you message dropdown (mobile) */}
-        <ThankYouDropdownButton
+      </ToolbarRow>
+
+      {headerActionSlot && createPortal(
+        <SendMessageButton
+          verb="Send thanks"
+          count={selectedVoters.length}
+          onClick={handleSendThankYou}
+        />,
+        headerActionSlot,
+      )}
+
+      <MobileToolbar className="u-show-mobile">
+        <SelectAllInline>
+          <SelectAllCheckbox
+            checked={allChecked}
+            indeterminate={indeterminate}
+            onClick={handleSelectCheckboxClick}
+          />
+          Select all
+        </SelectAllInline>
+        <ThankYouTrigger
           type="button"
           onClick={openThankYouMenu}
-          className="u-show-mobile"
-          aria-label="Thank you message options"
-          aria-controls={thankYouMenuOpen ? 'thank-you-menu' : undefined}
           aria-haspopup="menu"
           aria-expanded={thankYouMenuOpen ? 'true' : undefined}
         >
           Thank You message
-          <CaretIcon as={KeyboardArrowDownIcon} />
-        </ThankYouDropdownButton>
-
-        <Menu
-          id="thank-you-menu"
-          anchorEl={thankYouAnchorEl}
-          open={thankYouMenuOpen}
-          onClose={closeThankYouMenu}
-          anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
-          transformOrigin={{ vertical: 'top', horizontal: 'left' }}
-          PaperProps={{ style: { borderRadius: 12, overflow: 'hidden', minWidth: 260 } }}
-        >
-          <MenuItem disabled>
-            <ListItemText primary="Thank You message is auto-sent after joining." />
-          </MenuItem>
-
-          <StyledMenuItem
-            onClick={() => {
-              closeThankYouMenu();
-              setViewOpen(true);
-            }}
-          >
-            <ListItemIcon>
-              <VisibilityIcon sx={{ fontSize: 18 }} />
-            </ListItemIcon>
-            <ListItemText primary="Preview" />
-          </StyledMenuItem>
-
-          <StyledMenuItem
-            onClick={() => {
-              closeThankYouMenu();
-              setDraftMessage(thankYouMessage);
-              setEditOpen(true);
-            }}
-          >
-            <ListItemIcon>
-              <EditOutlinedIcon sx={{ fontSize: 18 }} />
-            </ListItemIcon>
-            <ListItemText primary="Edit" />
-          </StyledMenuItem>
-
-          <StyledMenuItem
-            onClick={async () => {
-              closeThankYouMenu();
-              await copyThankYouMessage();
-            }}
-          >
-            <ListItemIcon>
-              <ContentCopyIcon sx={{ fontSize: 18 }} />
-            </ListItemIcon>
-            <ListItemText primary="Copy" />
-          </StyledMenuItem>
-        </Menu>
-        <SendButton
-          variant="contained"
-          className="u-show-desktop-tablet"
-          disabled={selectedVoters.length === 0}
-          onClick={handleSendThankYou}
-        >
-          Send Message to Selected ({selectedVoters.length})
-        </SendButton>
-      </ToolbarRow>
+          <Caret as={KeyboardArrowDownIcon} />
+        </ThankYouTrigger>
+        <SearchBtn type="button" aria-label="Search" onClick={() => console.log('TODO: implement search feature')}>
+          <SearchIcon sx={{ fontSize: 22 }} />
+        </SearchBtn>
+      </MobileToolbar>
+
+      <DropdownMenu
+        anchorEl={thankYouAnchorEl}
+        onClose={closeThankYouMenu}
+        align="left"
+        menuId="thank-you-menu"
+        menuOptions={[
+          { info: true, label: 'Thank You message is auto-sent after joining.' },
+          { icon: VisibilityIcon, label: 'Preview', onClick: () => setViewOpen(true) },
+          { icon: EditOutlinedIcon,
+            label: 'Edit',
+            onClick: () => { setDraftMessage(thankYouMessage); setEditOpen(true); } },
+          { icon: ContentCopyIcon, label: 'Copy', onClick: copyThankYouMessage },
+        ]}
+      />
 
       <CardList>
         {visibleSupporters.map((v) => {
           const isChecked = selected.has(v.id);
           const isOpen = expanded.has(v.id);
-
           const actions = getActionsLabel(v);
           const needsAction = actions.length > 0;
           const hasMessageSent = !!v.messageSentCount;
+          const hasOpinion = !!v.publicOpinion;
+          const showCandidateLink = v.endorsed || hasOpinion || !!v.friendsInvited;
+
+          const renderPrimaryAction = () => {
+            if (hasMessageSent) {
+              return (
+                <SentIndicator>
+                  <CheckCircleIcon color="success" sx={{ fontSize: 14 }} />
+                  {' '}
+                  Message sent (
+                  {v.messageSentCount}
+                  )
+                </SentIndicator>
+              );
+            }
+            if (needsAction) {
+              return (
+                <ActionPill
+                  onClick={() => alert(`${v.endorsed ? 'Send thanks' : 'Send message'} & ask ${v.name} to ${actions}`)}
+                  label={`${v.endorsed ? 'Send thanks' : 'Send message'} & ask to:`}
+                  contentText={<em>{actions}</em>}
+                />
+              );
+            }
+            return (
+              <ActionPill
+                onClick={() => alert(`Send thanks to ${v.name}`)}
+                label="Send thanks"
+              />
+            );
+          };
 
           return (
             <Card key={v.id} $selected={isChecked}>
-              <CardTopRow>
-                <NameRow>
-                  <input
-                    type="checkbox"
-                    checked={isChecked}
-                    onChange={() => toggleSelected(v.id)}
-                    aria-label={`Select ${v.name}`}
-                  />
-                  <NameText>{v.name}</NameText>
-
-                  <Badges>
+              <div className="u-show-desktop-tablet">
+                <CardTopRow>
+                  <NameRow>
+                    <input
+                      type="checkbox"
+                      checked={isChecked}
+                      onChange={() => toggleSelected(v.id)}
+                      aria-label={`Select ${v.name}`}
+                    />
+                    <NameText>{v.name}</NameText>
                     {v.endorsed && (
-                      <BadgeOk className="u-show-desktop-tablet">
-                        <DoneIcon sx={{ fontSize: 14 }} /> Endorsed
-                      </BadgeOk>
+                      <>
+                        <NameDivider aria-hidden />
+                        <Endorsed>
+                          <CheckCircleIcon color="success" sx={{ fontSize: 14 }} />
+                          {' '}
+                          Endorsed
+                        </Endorsed>
+                      </>
                     )}
-
                     {!!v.friendsInvited && (
-                      <BadgeNeutral className="u-show-desktop-tablet">
-                        {v.friendsInvited} friends invited
-                      </BadgeNeutral>
+                      <>
+                        <NameDivider aria-hidden />
+                        <Subtle>
+                          {v.friendsInvited}
+                          {' '}
+                          friends invited
+                        </Subtle>
+                      </>
                     )}
-
-                    <CandidateLink className="u-show-desktop-tablet" type="button" onClick={() => openCandidateDrawer(v)}>
-                      View on candidate page
-                    </CandidateLink>
-                  </Badges>
-                </NameRow>
-
-                <RightOptions>
-                  <BadgeNeutral className="u-show-mobile">
-                    Friends invited: <b>{v.friendsInvited}</b>
-                  </BadgeNeutral>
-                  <VerticalBarWrapper className="u-show-mobile">
-                    <VerticalBar />
-                  </VerticalBarWrapper>
-                  <KebabBtn
-                    type="button"
-                    aria-label="More options"
-                    onClick={(e) => openRowMenu(e, v)}
-                  >
-                    <MoreHorizIcon sx={{ fontSize: 20 }} />
-                  </KebabBtn>
-                  <VerticalBarWrapper className="u-show-mobile">
-                    <VerticalBar />
-                  </VerticalBarWrapper>
-                  <ExpandBtn
-                    className="u-show-mobile"
-                    type="button"
-                    onClick={() => toggleExpanded(v.id)}
-                    aria-expanded={isOpen}
-                  >
-                    {isOpen ? (
-                      <CaretIcon as={KeyboardArrowUpIcon} />
-                    ) : (
-                      <CaretIcon as={KeyboardArrowDownIcon} />
+                    {showCandidateLink && (
+                      <>
+                        <NameDivider aria-hidden />
+                        <LinkBtn type="button" onClick={() => openCandidateDrawer(v)}>
+                          View on candidate page
+                        </LinkBtn>
+                      </>
                     )}
-                  </ExpandBtn>
-                </RightOptions>
-              </CardTopRow>
-
-              <CardActionsAndOpinion>
-                <CardActions>
+                  </NameRow>
+                  <RightOptions>
+                    <KebabBtn type="button" aria-label="More options" onClick={(e) => openRowMenu(e, v)}>
+                      <MoreHorizIcon sx={{ fontSize: 20 }} />
+                    </KebabBtn>
+                  </RightOptions>
+                </CardTopRow>
+
+                <CardOpinionRow
+                  opinion={hasOpinion ? v.publicOpinion : null}
+                  isOpen={isOpen}
+                  onToggle={() => toggleExpanded(v.id)}
+                >
                   {v.endorsed && (
                     <ActionPill
-                      type="button"
                       onClick={() => alert(`Like endorsement/opinion for ${v.name}`)}
-                    >
-                      <MediumBoldText>
-                        <ThumbUpIcon sx={{ fontSize: 14 }} /> Like endorsement/opinion
-                      </MediumBoldText>
-                    </ActionPill>
+                      label={(
+                        <>
+                          <ThumbUpIcon sx={{ fontSize: 14 }} />
+                          {' '}
+                          Like endorsement/opinion
+                        </>
+                      )}
+                    />
                   )}
-
-                  {hasMessageSent ? (
-                    <ActionLink>
-                      <CheckCircleIcon color="success" sx={{ fontSize: 14 }} />{' '}
-                      Message sent ({v.messageSentCount})
-                    </ActionLink>
-                  ) : needsAction ? (
-                    <ActionPill
-                      type="button"
-                      onClick={() => alert(`Send message & ask ${v.name} to ${actions}`)}
-                    >
-                      <MediumBoldText>Send message &amp; ask to:</MediumBoldText>
-                      <br />
-                      <em>{actions}</em>
-                    </ActionPill>
-                  ) : (
-                    <ActionPill
-                      type="button"
-                      onClick={() => alert(`Send thanks to ${v.name}`)}
-                    >
-                      <MediumBoldText>Send thanks</MediumBoldText>
-                    </ActionPill>
+                  {renderPrimaryAction()}
+                  {!v.endorsed && !hasMessageSent && (
+                    <ReminderText>Send reminder message in 3 days</ReminderText>
                   )}
-                </CardActions>
-
-                <VerticalBarWrapper className="u-show-desktop-tablet">
-                  <VerticalBar />
-                </VerticalBarWrapper>
+                </CardOpinionRow>
+              </div>
 
-                {v.publicOpinion && (
-                  <div className="u-show-desktop-tablet">
-                    <ExpandBtn
-                      type="button"
-                      onClick={() => toggleExpanded(v.id)}
-                      aria-expanded={isOpen}
-                    >
-                      {isOpen ? (
-                        <CaretIcon as={KeyboardArrowDownIcon} />
-                      ) : (
-                        <CaretIcon as={KeyboardArrowRightIcon} />
-                      )}
+              <div className="u-show-mobile">
+                <CardTopRow>
+                  <NameRow>
+                    <input
+                      type="checkbox"
+                      checked={isChecked}
+                      onChange={() => toggleSelected(v.id)}
+                      aria-label={`Select ${v.name}`}
+                    />
+                    <NameText>{v.name}</NameText>
+                  </NameRow>
+                  <RightOptions>
+                    <Subtle>
+                      Friends invited:
+                      {' '}
+                      <b>{v.friendsInvited || 0}</b>
+                    </Subtle>
+                    <KebabBtn type="button" aria-label="More options" onClick={(e) => openRowMenu(e, v)}>
+                      <MoreHorizIcon sx={{ fontSize: 20 }} />
+                    </KebabBtn>
+                    <ExpandBtn type="button" onClick={() => toggleExpanded(v.id)} aria-expanded={isOpen}>
+                      <Caret as={isOpen ? KeyboardArrowUpIcon : KeyboardArrowDownIcon} />
                     </ExpandBtn>
-                  </div>
-                )}
+                  </RightOptions>
+                </CardTopRow>
 
-                <div className="u-show-desktop-tablet">
-                  {v.publicOpinion ? (
-                    <OpinionBox>{isOpen ? v.publicOpinion : '...'}</OpinionBox>
+                <MobileFieldLabel>What you can do</MobileFieldLabel>
+                <MobileActions>
+                  {v.endorsed && (
+                    <MobileActionPill type="button" onClick={() => alert(`Give thumbs up on endorsement/opinion for ${v.name}`)}>
+                      Give thumbs up on endorsement/opinion
+                    </MobileActionPill>
+                  )}
+                  {hasMessageSent ? (
+                    <MobileActionPill type="button" disabled>
+                      Message sent (
+                      {v.messageSentCount}
+                      )
+                    </MobileActionPill>
                   ) : (
-                    <OpinionEmpty>No public opinion available.</OpinionEmpty>
+                    <MobileActionPill
+                      type="button"
+                      onClick={() => (needsAction ?
+                        alert(`${v.endorsed ? 'Send thanks' : 'Send message'} & ask ${v.name} to ${actions}`) :
+                        alert(`Send thanks to ${v.name}`))}
+                    >
+                      {needsAction && !v.endorsed ? 'Send message' : 'Send thanks'}
+                    </MobileActionPill>
                   )}
-                </div>
-              </CardActionsAndOpinion>
+                </MobileActions>
 
-              {/* MOBILE: expanded details under the action buttons */}
-              <div className="u-show-mobile">
                 {isOpen && (
-                  <MobileDetails>
-                    <MobileOpinionLabel>Public sentiment/opinion</MobileOpinionLabel>
-                    <MobileDetailsRow>
-                      <MobileEndorsed>
+                  <>
+                    <MobileFieldLabel>Public sentiment/opinion</MobileFieldLabel>
+                    <MobileSentiment>
+                      <MobileEndorsed $muted={!v.endorsed}>
                         {v.endorsed ? (
                           <>
-                            <ThumbUpIcon color="success" sx={{ fontSize: 16 }} /> Endorsed
+                            <CheckCircleIcon color="success" sx={{ fontSize: 16 }} />
+                            {' '}
+                            Endorsed
                           </>
-                        ) : (
-                          <>Not endorsed</>
-                        )}
+                        ) : 'Not endorsed'}
                       </MobileEndorsed>
-                      {v.publicOpinion ? (
-                        <MobileOpinionText>{v.publicOpinion}</MobileOpinionText>
+                      {hasOpinion ? (
+                        <OpinionText>{v.publicOpinion}</OpinionText>
                       ) : (
-                        <MobileOpinionEmpty>No public opinion available.</MobileOpinionEmpty>
+                        <OpinionText $empty>No public opinion available.</OpinionText>
                       )}
-                    </MobileDetailsRow>
-                  </MobileDetails>
+                    </MobileSentiment>
+
+                    {needsAction && (
+                      <>
+                        <MobileFieldLabel>What you can ask voters to do</MobileFieldLabel>
+                        <MobileFieldValue>{actions}</MobileFieldValue>
+                      </>
+                    )}
+                  </>
                 )}
               </div>
             </Card>
@@ -702,99 +521,56 @@ export default function SupportersJoined ({ supporters }) {
         })}
       </CardList>
 
-      <MobileBottomBar className="u-show-mobile">
-        <MobileSendButton
-          variant="contained"
-          disabled={selectedVoters.length === 0}
-          onClick={handleSendThankYou}
-        >
-          Send Message to Selected ({selectedVoters.length})
-        </MobileSendButton>
-      </MobileBottomBar>
-
-      <Menu
-        id="voter-row-menu"
-        anchorEl={rowMenuAnchorEl}
-        open={rowMenuOpen}
-        onClose={closeRowMenu}
-        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
-        PaperProps={{
-          style: {
-            borderRadius: 12,
-            overflow: 'hidden',
-            minWidth: 220,
-          },
-        }}
-      >
-        <StyledMenuItem onClick={handleEditVoter}>
-          <ListItemIcon>
-            <EditOutlinedIcon sx={{ fontSize: 18 }} />
-          </ListItemIcon>
-          <ListItemText primary="Edit voter" />
-        </StyledMenuItem>
-
-        <StyledMenuItem onClick={handleSendMessage}>
-          <ListItemIcon>
-            <MailOutlineIcon sx={{ fontSize: 18 }} />
-          </ListItemIcon>
-          <ListItemText primary="Send message" />
-        </StyledMenuItem>
-      </Menu>
-
-      {/* Drawer that opens with the candidate view of a voter, from "View on candidate page" link */}
+      <SendMessageButtonMobile
+        verb="Send message to selected"
+        count={selectedVoters.length}
+        onClick={handleSendThankYou}
+      />
+
+      <CandidateRowMenu
+        rowMenuAnchorEl={rowMenuAnchorEl}
+        setRowMenuAnchorEl={setRowMenuAnchorEl}
+        setRowMenuVoter={setRowMenuVoter}
+        menuOptions={[
+          { icon: EditOutlinedIcon,
+            label: 'Edit voter',
+            onClick: () => rowMenuVoter && alert(`Edit voter: ${rowMenuVoter.name}`) },
+          { icon: MailOutlineIcon,
+            label: 'Send message',
+            onClick: () => rowMenuVoter && alert(`Send message to: ${rowMenuVoter.name}`) },
+        ]}
+      />
+
       <Drawer
         anchor="right"
         open={candidateDrawerOpen}
         onClose={closeCandidateDrawer}
         PaperProps={{ sx: { width: 'min(920px, 92vw)' } }}
       >
-        <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
-          <div style={{ padding: 12, borderBottom: '1px solid #e5e7eb', display: 'flex', justifyContent: 'space-between' }}>
+        <DrawerLayout>
+          <DrawerHeader>
             <strong>Candidate page</strong>
-            <button type="button" onClick={closeCandidateDrawer}>Close</button>
-          </div>
-
-          <div style={{ flex: 1 }}>
-            {/* http://localhost:3000/shannon-d-dicus-politician-from-california/-/ */}
-            <iframe
-              title="Candidate page"
-              src={candidateDrawerVoter?.candidateUrl || '/candidates/cs'}
-              style={{ width: '100%', height: '100%', border: 0 }}
-            />
-          </div>
-        </div>
+            <Button size="small" variant="outlined" onClick={closeCandidateDrawer}>Close</Button>
+          </DrawerHeader>
+          <DrawerIframe
+            title="Candidate page"
+            src={candidateDrawerVoter?.candidateUrl || '/candidates/cs'}
+          />
+        </DrawerLayout>
       </Drawer>
 
-      {/* Pop up to display when a user views the Thank You message */}
-      <Dialog
-        open={viewOpen}
-        onClose={() => setViewOpen(false)}
-        maxWidth="sm"
-        fullWidth
-      >
+      <Dialog open={viewOpen} onClose={() => setViewOpen(false)} maxWidth="sm" fullWidth>
         <DialogTitle>Thank-you message</DialogTitle>
-
         <DialogContent>
-          <div style={{ whiteSpace: 'pre-wrap', fontSize: 14 }}>
-            {thankYouMessage}
-          </div>
+          <ThankYouPreview>{thankYouMessage}</ThankYouPreview>
         </DialogContent>
-
         <DialogActions>
           <Button onClick={() => setViewOpen(false)}>Close</Button>
         </DialogActions>
       </Dialog>
 
-      {/* Pop up to display when a user edits the Thank You message */}
-      <Dialog
-        open={editOpen}
-        onClose={() => setEditOpen(false)}
-        maxWidth="sm"
-        fullWidth
-      >
+      <Dialog open={editOpen} onClose={() => setEditOpen(false)} maxWidth="sm" fullWidth>
         <DialogTitle>Edit thank-you message</DialogTitle>
-
         <DialogContent>
           <TextField
             multiline
@@ -807,22 +583,14 @@ export default function SupportersJoined ({ supporters }) {
             sx={{ mt: 1 }}
           />
         </DialogContent>
-
         <DialogActions>
           <Button onClick={() => setEditOpen(false)}>Cancel</Button>
-          <Button
-            variant="contained"
-            onClick={() => {
-              setThankYouMessage(draftMessage);
-              setEditOpen(false);
-            }}
-          >
+          <Button variant="contained" onClick={() => { setThankYouMessage(draftMessage); setEditOpen(false); }}>
             Save
           </Button>
         </DialogActions>
       </Dialog>
 
-      {/* Pop up to display when a user copies or sends the Thank You message */}
       <Snackbar
         open={copyOpen}
         autoHideDuration={2000}
@@ -830,18 +598,14 @@ export default function SupportersJoined ({ supporters }) {
         anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
         sx={{ '&.MuiSnackbar-anchorOriginTopCenter': { top: 80 } }}
       >
-        <Alert severity="success" variant="filled">
-          Copied!
-        </Alert>
+        <Alert severity="success" variant="filled">Copied!</Alert>
       </Snackbar>
       <Snackbar
         open={sendToast.open}
         autoHideDuration={2500}
         onClose={() => setSendToast((t) => ({ ...t, open: false }))}
         anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
-        sx={{
-          '&.MuiSnackbar-anchorOriginTopCenter': { top: 80 },
-        }}
+        sx={{ '&.MuiSnackbar-anchorOriginTopCenter': { top: 80 } }}
       >
         <Alert severity={sendToast.ok ? 'success' : 'error'} variant="filled">
           {sendToast.msg}
@@ -850,417 +614,277 @@ export default function SupportersJoined ({ supporters }) {
     </Container>
   );
 }
+SupportersJoined.propTypes = {
+  supporters: PropTypes.arrayOf(PropTypes.object),
+};
+
+function CardOpinionRow ({ children, opinion, isOpen, onToggle }) {
+  const actionsRef = useRef(null);
+  const [maxH, setMaxH] = useState(null);
+
+  useLayoutEffect(() => {
+    const el = actionsRef.current;
+    if (!el) return undefined;
+    const update = () => setMaxH(el.offsetHeight);
+    update();
+    if (typeof ResizeObserver === 'undefined') return undefined;
+    const ro = new ResizeObserver(update);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
+  return (
+    <CardBody>
+      <ActionsCol ref={actionsRef}>{children}</ActionsCol>
+      {opinion != null && (
+        <>
+          <VerticalBarWrapper><VerticalBar /></VerticalBarWrapper>
+          <ExpandBtn
+            type="button"
+            onClick={onToggle}
+            aria-expanded={isOpen}
+            aria-label={isOpen ? 'Collapse opinion' : 'Expand opinion'}
+          >
+            <Caret as={isOpen ? KeyboardArrowUpIcon : KeyboardArrowDownIcon} />
+          </ExpandBtn>
+          <OpinionText
+            $open={isOpen}
+            style={!isOpen && maxH != null ? { maxHeight: `${maxH}px` } : undefined}
+          >
+            {opinion}
+          </OpinionText>
+        </>
+      )}
+    </CardBody>
+  );
+}
+CardOpinionRow.propTypes = {
+  children: PropTypes.node,
+  opinion: PropTypes.string,
+  isOpen: PropTypes.bool,
+  onToggle: PropTypes.func,
+};
 
 /* ===== Styled components ===== */
 
-const Container = styled.div`
-  display: flex;
+const ActionsCol = styled.div`
+  align-items: stretch;
+  display: inline-flex;
   flex-direction: column;
+  gap: 8px;
 `;
 
-const Placeholder = styled.div`
-  background: ${DesignTokenColors.neutralUI50};
-  border: 1px dashed ${DesignTokenColors.neutralUI300};
-  border-radius: 12px;
+const Caret = styled.span`
+  align-items: center;
   color: ${DesignTokenColors.neutralUI600};
-  padding: 24px;
-  text-align: center;
-`;
-
-const MediumBoldText = styled.span`
-  font-weight: 500;
+  display: inline-flex;
+  font-size: 18px;
 `;
 
-const MessageContainer = styled.div`
+const CardBody = styled.div`
+  align-items: flex-start;
   display: flex;
-  align-items: center;
+  margin-top: 10px;
 `;
 
-const InfoBox = styled.div`
-  flex: 2;
-  font-size: 13px;
-  padding: 10px;
-  border-radius: 12px;
-  color: #374151;
+const DrawerHeader = styled.div`
+  align-items: center;
+  border-bottom: 1px solid ${DesignTokenColors.neutralUI200};
+  display: flex;
+  justify-content: space-between;
+  padding: 12px;
 `;
 
-const ThankYouBox = styled.div`
+const DrawerIframe = styled.iframe`
+  border: 0;
   flex: 1;
-  max-width: 420px;
-  min-width: 160px;
-  background: #ffffff;
-  padding: 10px;
+  width: 100%;
 `;
 
-const ThankYouLabelRow = styled.div`
+const DrawerLayout = styled.div`
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  margin-bottom: 6px;
-  font-size: 13px;
-`;
-
-const ThankYouSubtext = styled.div`
-  font-size: 12px;
-  color: #6b7280;
+  flex-direction: column;
+  height: 100%;
 `;
 
-const IconRow = styled.span`
+const Endorsed = styled.span`
+  align-items: center;
+  color: ${DesignTokenColors.neutralUI900};
   display: inline-flex;
-  gap: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  gap: 4px;
+
+  svg {
+    color: ${DesignTokenColors.primary600};
+  }
 `;
 
-const IconBtn = styled.button`
+const ExpandBtn = styled.button`
+  align-items: flex-start;
+  align-self: flex-start;
+  background: transparent;
   border: none;
-  background: #f9fafb;
-  border-radius: 8px;
-  padding: 2px 6px;
+  border-radius: 6px;
+  color: ${DesignTokenColors.neutralUI600};
   cursor: pointer;
-  font-size: 10px;
-
   display: inline-flex;
-  align-items: center;
+  padding: 4px 2px 0;
 
   &:hover {
     background: ${DesignTokenColors.neutralUI50};
   }
 `;
 
-const ThankYouDropdownButton = styled.button`
-  border: none;
+const IconBtn = styled.button`
+  align-items: center;
   background: transparent;
+  border: none;
+  border-radius: 6px;
+  color: ${DesignTokenColors.neutralUI700};
   cursor: pointer;
-  font: inherit;
-  color: #111827;
   display: inline-flex;
-  align-items: center;
-  padding: 6px 6px;
+  margin: 0;
+  padding: 2px;
 
   &:hover {
     background: ${DesignTokenColors.neutralUI50};
-    border-radius: 10px;
+    color: ${DesignTokenColors.neutralUI900};
   }
 `;
 
-const ToolbarRow = styled.div`
-  display: flex;
-  gap: 14px;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 12px;
-  margin-left: 12px;
-`;
-
-const LeftTools = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-const SelectControl = styled(ButtonBase)`
-  display: inline-flex;
+const IconBtnRow = styled.span`
   align-items: center;
-  gap: 2px;
-  padding: 2px 4px;
-  border-radius: 8px;
-`;
-
-const CaretIcon = styled.span`
-  font-size: 32px;
-  padding: 0 4px;
-  color: #6b7280;
   display: inline-flex;
-  align-items: center;
+  gap: 4px;
 `;
 
-const CaretButton = styled.button`
+const LinkBtn = styled.button`
+  background: none;
   border: none;
-  background: transparent;
-  padding: 0;
-  margin: 0;
+  color: ${DesignTokenColors.primary600};
   cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-`;
-
-const AllButton = styled(Button)`
-  && {
-    min-width: auto;
-    padding: 0 0 0 4px;
-    text-transform: none;
-    font-size: 14px;
-    color: #111827;
-  }
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  padding: 0;
 
-  && .MuiButton-endIcon {
-    margin-left: 4px;
-    margin-right: 0;
+  &:hover {
+    color: ${DesignTokenColors.primary700};
+    text-decoration: underline;
   }
 `;
 
-const MenuItemText = styled.span`
-  font-size: 14px;
-  color: #111827;
-`;
-
-const VerticalBarWrapper = styled.div`
-  align-self: stretch;
-  display: flex;
+const MobileEndorsed = styled.div`
   align-items: center;
-  margin: ${(p) => (p.$tight ? '0 4px' : '0 12px')};
-`;
-
-const VerticalBar = styled.div`
-  width: 1px;
-  height: 80%;
-  background: #d1d5db;
-  border-radius: 999px;
-`;
-
-const SendButton = styled(Button)`
-  && {
-    margin-left: 12px;
-    text-transform: none;
-    border-radius: 999px;
-  }
+  color: ${(p) => (p.$muted ? DesignTokenColors.neutralUI600 : DesignTokenColors.neutralUI900)};
+  display: inline-flex;
+  font-weight: 600;
+  gap: 6px;
 `;
 
-const CardList = styled.div`
+const MobileSentiment = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 10px;
-  @media (max-width: 575px) {
-    padding-bottom: 72px;
-  }
-`;
-
-const Card = styled.div`
-  border: 1px solid #e5e7eb;
-  border-radius: 16px;
-  background: ${DesignTokenColors.neutralUI50};
-  padding: 12px;
-  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
+  gap: 6px;
+  margin-top: 6px;
 `;
 
-const CardTopRow = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 10px;
+const NameDivider = styled.span`
+  background: ${DesignTokenColors.neutralUI300};
+  display: inline-block;
+  height: 14px;
+  width: 1px;
 `;
 
-const NameRow = styled.div`
-  display: flex;
-  gap: 10px;
-  align-items: center;
-`;
+const OpinionText = styled.div`
+  color: ${(p) => (p.$empty ? DesignTokenColors.neutralUI500 : DesignTokenColors.neutralUI700)};
+  flex: 1;
+  font-size: 13px;
+  font-style: ${(p) => (p.$empty ? 'italic' : 'normal')};
+  line-height: 1.5;
+  padding: 4px 0;
 
-const NameText = styled.div`
-  font-size: 16px;
-  font-weight: 700;
+  ${(p) => p.$open === false && `
+    overflow: hidden;
+  `}
 `;
 
-const Badges = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
+const PrivacyNote = styled.div`
+  color: ${DesignTokenColors.neutralUI900};
+  flex: 1 1 100%;
   font-size: 12px;
+  font-weight: 600;
+  line-height: 1.4;
+  min-width: 0;
 `;
 
-const BadgeOk = styled.span`
-  background: #ecfdf5;
-  border: 1px solid #a7f3d0;
-  color: #065f46;
-  border-radius: 999px;
-  padding: 2px 8px;
-  font-weight: 700;
-
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-`;
-
-const BadgeNeutral = styled.span`
-  background: #f3f4f6;
-  border: 1px solid #e5e7eb;
-  color: #374151;
-  border-radius: 999px;
-  padding: 2px 8px;
-`;
-
-const CandidateLink = styled.button`
-  color: #2563eb;
-  text-decoration: none;
-  background: none;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  font: inherit;
-
-  &:hover {
-    text-decoration: underline;
-  }
-`;
-
-const KebabBtn = styled.button`
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  color: #6b7280;
-  padding: 2px 6px;
-  border-radius: 10px;
-
-  &:hover {
-    background: ${DesignTokenColors.neutralUI50};
-  }
+const ReminderText = styled.div`
+  color: ${DesignTokenColors.neutralUI600};
+  font-size: 13px;
+  text-align: center;
 `;
 
-const RightOptions = styled.div`
-  margin-left: auto;
-  display: flex;
+const SentIndicator = styled.span`
   align-items: center;
+  align-self: flex-start;
+  color: ${DesignTokenColors.primary600};
+  display: inline-flex;
+  font-size: 13px;
+  font-weight: 500;
+  gap: 6px;
 `;
 
-const StyledMenuItem = styled(MenuItem)`
-  && {
-    font-size: 14px;
-    padding-top: 10px;
-    padding-bottom: 10px;
-  }
+const Subtle = styled.span`
+  color: ${DesignTokenColors.neutralUI600};
+  font-size: 12px;
 `;
 
-const CardActionsAndOpinion = styled.div`
+const ThankYouCol = styled.div`
   display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 240px;
 `;
 
-const CardActions = styled.div`
+const ThankYouHead = styled.div`
+  align-items: center;
   display: flex;
-  flex-direction: column;
   gap: 8px;
-  @media (max-width: 575px) {
-    flex: 1;
-    align-items: stretch;
-  }
 `;
 
-const ActionPill = styled.button`
-  border: 1px solid #bfdbfe;
-  background: #eff6ff;
-  color: #1d4ed8;
-  border-radius: 999px;
-  padding: 8px 10px;
+const ThankYouHeading = styled.span`
+  color: ${DesignTokenColors.neutralUI900};
   font-size: 12px;
-  cursor: pointer;
+  font-weight: 600;
   white-space: nowrap;
-
-  &:hover {
-    filter: brightness(0.98);
-  }
-  @media (max-width: 575px) {
-    flex: 1;
-  }
-  @media (min-width: 576px) {
-    min-width: 280px;
-  }
 `;
 
-const ActionLink = styled.span`
-  color: #2563eb;
-  text-decoration: none;
-  align-items: center;
-  align-self: center;
-  gap: 6px;
+const ThankYouPreview = styled.div`
+  font-size: 14px;
+  white-space: pre-wrap;
 `;
 
-const ExpandBtn = styled.button`
-  border: none;
+const ThankYouTrigger = styled.button`
+  align-items: center;
   background: transparent;
+  border: none;
+  border-radius: 8px;
+  color: ${DesignTokenColors.neutralUI900};
   cursor: pointer;
-  color: #6b7280;
   display: inline-flex;
-  align-items: center;
-  padding: 2px 2px;
+  font: inherit;
+  font-size: 14px;
+  padding: 6px 8px;
 
   &:hover {
     background: ${DesignTokenColors.neutralUI50};
-    border-radius: 6px;
   }
 `;
 
-const OpinionBox = styled.div`
-  font-size: 12px;
-  color: #374151;
-  border: 1px solid #e5e7eb;
-  background: #f9fafb;
-  border-radius: 12px;
-  padding: 10px;
-  margin: 4px 0;
-`;
-
-const OpinionEmpty = styled.div`
-  font-size: 12px;
-  color: #9ca3af;
-  border: 1px dashed #e5e7eb;
-  border-radius: 12px;
-  padding: 10px;
-`;
-
-const MobileDetails = styled.div`
-  margin-top: 10px;
-  padding-top: 10px;
-  border-top: 1px solid #e5e7eb;
-`;
-
-const MobileDetailsRow = styled.div`
+const TopPanel = styled.div`
+  align-items: flex-start;
   display: flex;
-  align-items: center;
-  gap: 10px;
-  font-size: 12px;
-  color: #374151;
-  margin-bottom: 6px;
-`;
-
-const MobileEndorsed = styled.div`
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-weight: 600;
-`;
-
-const MobileOpinionLabel = styled.div`
-  font-size: 12px;
-  color: #6b7280;
-  margin-bottom: 6px;
-`;
-
-const MobileOpinionText = styled.div`
-  font-size: 12px;
-  color: #374151;
-`;
-
-const MobileOpinionEmpty = styled.div`
-  font-size: 12px;
-  color: #9ca3af;
-`;
-
-const MobileBottomBar = styled.div`
-  display: flex;
-  justify-content: center;
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1300; /* above most UI */
-  padding: 10px 12px;
-  padding-bottom: calc(72px + env(safe-area-inset-bottom));
-  background: ${DesignTokenColors.whiteUI};
-  border-top: 1px solid #e5e7eb;
-`;
-
-const MobileSendButton = styled(Button)`
-  && {
-    border-radius: 999px;
-    text-transform: none;
-  }
+  margin-bottom: 12px;
 `;
diff --git a/src/js/pages/ManageMyCandidates/SupportersToRemind.jsx b/src/js/pages/ManageMyCandidates/SupportersToRemind.jsx
index 921e4c8c0..da2d263c8 100644
--- a/src/js/pages/ManageMyCandidates/SupportersToRemind.jsx
+++ b/src/js/pages/ManageMyCandidates/SupportersToRemind.jsx
@@ -1,4 +1,7 @@
-import React, { useEffect, useMemo, useState } from 'react';
+/* eslint-disable no-alert */
+import React, { useContext, useEffect, useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
+import PropTypes from 'prop-types';
 import AutorenewIcon from '@mui/icons-material/Autorenew';
 import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
 import EmailOutlinedIcon from '@mui/icons-material/EmailOutlined';
@@ -7,21 +10,25 @@ import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import SearchIcon from '@mui/icons-material/Search';
 import SmsOutlinedIcon from '@mui/icons-material/SmsOutlined';
 import Alert from '@mui/material/Alert';
-import Checkbox from '@mui/material/Checkbox';
 import Snackbar from '@mui/material/Snackbar';
 import styled from 'styled-components';
 
 import DesignTokenColors from '../../common/components/Style/DesignTokenColors';
-import { CandidateRowMenu } from '../../components/ManageMyCandidates/Menus';
+import { CandidateRowMenu, SelectAllCheckbox } from '../../components/ManageMyCandidates/Menus';
 import { SendMessageButton, SendMessageButtonMobile } from '../../components/ManageMyCandidates/SendButtons';
-import { CardList, Card, CardTopRow, ToolbarRow, LeftTools } from '../../components/Style/ManageMyCandidates';
+import TrackingHeaderActionContext from './TrackingHeaderActionContext';
+import { CardTopRow, Container, KebabBtn, LeftTools, NameText, RightOptions, ToolbarRow } from '../../components/Style/ManageMyCandidates';
+import { ActionLinkButton, DesktopGridHeader, DesktopGridRow, FlatCardList, FlatRowCard, MobileActionPill, MobileActions, MobileFieldLabel, MobileFieldValue, NameCell, SelectAllInline } from '../../components/Style/SupporterTrackingStyles';
 
 const SUB_FILTERS = {
   INVITED: 'invited',
   JOINED: 'joined',
 };
 
+const REMIND_GRID_COLS = 'minmax(140px, 200px) minmax(70px, 0.4fr) minmax(340px, 1.8fr)';
+
 export default function SupportersToRemind ({ supporters }) {
+  const headerActionSlot = useContext(TrackingHeaderActionContext);
   const [selected, setSelected] = useState(() => new Set());
   const [subFilter, setSubFilter] = useState(SUB_FILTERS.INVITED);
   const [sendToast, setSendToast] = useState({ open: false, ok: true, msg: '' });
@@ -83,24 +90,27 @@ export default function SupportersToRemind ({ supporters }) {
     const channels = [];
     if (v.emailInviteSent) channels.push('Email');
     if (v.textInviteSent) channels.push('text');
-    return channels.length ? channels.join(', ') : '—';
+    if (channels.length === 0) return '—';
+    channels[0] = channels[0].charAt(0).toUpperCase() + channels[0].slice(1);
+    return channels.join(', ');
   };
 
   const getRecommendedActions = (v) => {
-    const actions = [];
+    const sends = [];
+    const resends = [];
     if (!v.emailInviteSent) {
-      actions.push({ key: 'send-email', label: 'Send email invite', icon: EmailOutlinedIcon, onClick: () => alert(`Send email invite to ${v.name}`) });
+      sends.push({ key: 'send-email', label: 'Send email invite', icon: EmailOutlinedIcon, onClick: () => alert(`Send email invite to ${v.name}`) });
     }
     if (!v.textInviteSent) {
-      actions.push({ key: 'send-text', label: 'Send text invite', icon: SmsOutlinedIcon, onClick: () => alert(`Send text invite to ${v.name}`) });
+      sends.push({ key: 'send-text', label: 'Send text invite', icon: SmsOutlinedIcon, onClick: () => alert(`Send text invite to ${v.name}`) });
     }
     if (v.emailInviteSent) {
-      actions.push({ key: 'resend-email', label: 'Re-send email invite', icon: MailOutlineIcon, isResend: true, onClick: () => alert(`Re-send email invite to ${v.name}`) });
+      resends.push({ key: 'resend-email', label: 'Re-send email invite', icon: MailOutlineIcon, onClick: () => alert(`Re-send email invite to ${v.name}`) });
     }
     if (v.textInviteSent) {
-      actions.push({ key: 'resend-text', label: 'Re-send text invite', icon: SmsOutlinedIcon, isResend: true, onClick: () => alert(`Re-send text invite to ${v.name}`) });
+      resends.push({ key: 'resend-text', label: 'Re-send text invite', icon: SmsOutlinedIcon, onClick: () => alert(`Re-send text invite to ${v.name}`) });
     }
-    return actions;
+    return { sends, resends };
   };
 
   const allChecked = totalVisibleCount > 0 && selectedVisibleCount === totalVisibleCount;
@@ -132,15 +142,10 @@ export default function SupportersToRemind ({ supporters }) {
 
         <MobileRightTools className="u-show-mobile">
           <SelectAllInline>
-            <Checkbox
+            <SelectAllCheckbox
               checked={allChecked}
               indeterminate={indeterminate}
-              tabIndex={-1}
-              disableRipple
-              sx={{ padding: 0 }}
               onClick={handleSelectCheckboxClick}
-              onChange={() => {}}
-              inputProps={{ 'aria-label': 'Select all' }}
             />
             Select all
           </SelectAllInline>
@@ -155,49 +160,47 @@ export default function SupportersToRemind ({ supporters }) {
       <ToolbarRow className="u-show-desktop-tablet">
         <LeftTools>
           <SelectAllInline>
-            <Checkbox
+            <SelectAllCheckbox
               checked={allChecked}
               indeterminate={indeterminate}
-              tabIndex={-1}
-              disableRipple
-              sx={{ padding: 0 }}
               onClick={handleSelectCheckboxClick}
-              onChange={() => {}}
-              inputProps={{ 'aria-label': 'Select all' }}
             />
             Select all
           </SelectAllInline>
         </LeftTools>
+      </ToolbarRow>
 
+      {headerActionSlot && createPortal(
         <SendMessageButton
-          disbaleBoolean={selectedVoters.length === 0}
-          sendMessageFunction={handleResendSelected}
-          buttonText={`Resend invitation to selected (${selectedVoters.length})`}
-        />
-      </ToolbarRow>
+          verb="Resend invite"
+          count={selectedVoters.length}
+          onClick={handleResendSelected}
+        />,
+        headerActionSlot,
+      )}
 
       {/* Desktop column headers */}
-      <DesktopHeaderRow className="u-show-desktop-tablet">
+      <DesktopGridHeader className="u-show-desktop-tablet" $cols={REMIND_GRID_COLS}>
         <HeaderName>
           <CheckboxSpacer aria-hidden="true" />
           Name
         </HeaderName>
         <HeaderInvitedVia>Invited via</HeaderInvitedVia>
         <HeaderActions>Recommended staff actions</HeaderActions>
-      </DesktopHeaderRow>
+      </DesktopGridHeader>
 
       {visibleSupporters.length === 0 ? (
         <EmptyState>No voters to remind in this view.</EmptyState>
       ) : (
-        <CardList>
+        <FlatCardList>
           {visibleSupporters.map((v) => {
             const isChecked = selected.has(v.id);
             const actions = getRecommendedActions(v);
 
             return (
-              <RemindCard key={v.id} $selected={isChecked}>
+              <FlatRowCard key={v.id} $selected={isChecked}>
                 {/* Desktop row layout */}
-                <DesktopRow className="u-show-desktop-tablet">
+                <DesktopGridRow className="u-show-desktop-tablet" $cols={REMIND_GRID_COLS}>
                   <NameCell>
                     <input
                       type="checkbox"
@@ -211,15 +214,25 @@ export default function SupportersToRemind ({ supporters }) {
                   <InvitedViaCell>{getInvitedViaLabel(v)}</InvitedViaCell>
 
                   <ActionsCell>
-                    {actions.map((a) => (
-                      <ActionLinkButton key={a.key} type="button" onClick={a.onClick}>
-                        {a.isResend && <AutorenewIcon sx={{ fontSize: 16 }} />}
-                        <a.icon sx={{ fontSize: 18 }} />
-                        {a.label}
-                      </ActionLinkButton>
-                    ))}
+                    <ActionsColumn>
+                      {actions.sends.map((a) => (
+                        <ActionLinkButton key={a.key} type="button" onClick={a.onClick}>
+                          <a.icon sx={{ fontSize: 18 }} />
+                          {a.label}
+                        </ActionLinkButton>
+                      ))}
+                    </ActionsColumn>
+                    <ActionsColumn>
+                      {actions.resends.map((a) => (
+                        <ActionLinkButton key={a.key} type="button" onClick={a.onClick}>
+                          <AutorenewIcon sx={{ fontSize: 16 }} />
+                          <a.icon sx={{ fontSize: 18 }} />
+                          {a.label}
+                        </ActionLinkButton>
+                      ))}
+                    </ActionsColumn>
                   </ActionsCell>
-                </DesktopRow>
+                </DesktopGridRow>
 
                 {/* Mobile card layout */}
                 <div className="u-show-mobile">
@@ -245,23 +258,23 @@ export default function SupportersToRemind ({ supporters }) {
 
                   <MobileFieldLabel>What you can do</MobileFieldLabel>
                   <MobileActions>
-                    {actions.map((a) => (
+                    {[...actions.sends, ...actions.resends].map((a) => (
                       <MobileActionPill key={a.key} type="button" onClick={a.onClick}>
                         {a.label}
                       </MobileActionPill>
                     ))}
                   </MobileActions>
                 </div>
-              </RemindCard>
+              </FlatRowCard>
             );
           })}
-        </CardList>
+        </FlatCardList>
       )}
 
       <SendMessageButtonMobile
-        disbaleBoolean={selectedVoters.length === 0}
-        sendThankYouFunction={handleResendSelected}
-        buttonText={`Resend invitation to selected (${selectedVoters.length})`}
+        verb="Resend invitation to selected"
+        count={selectedVoters.length}
+        onClick={handleResendSelected}
       />
 
       <CandidateRowMenu
@@ -288,32 +301,24 @@ export default function SupportersToRemind ({ supporters }) {
     </Container>
   );
 }
-
-const ActionLinkButton = styled.button`
-  align-items: center;
-  background: none;
-  border: none;
-  color: ${DesignTokenColors.primary600};
-  cursor: pointer;
-  display: inline-flex;
-  font-size: 14px;
-  font-weight: 500;
-  gap: 6px;
-  padding: 4px 0;
-  white-space: nowrap;
-
-  &:hover {
-    color: ${DesignTokenColors.primary700};
-    text-decoration: underline;
-  }
-`;
+SupportersToRemind.propTypes = {
+  supporters: PropTypes.arrayOf(PropTypes.object),
+};
 
 const ActionsCell = styled.div`
-  align-items: center;
+  align-items: flex-start;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  gap: 14px;
+`;
+
+const ActionsColumn = styled.div`
+  align-items: flex-start;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 6px;
+  max-width: 180px;
 `;
 
 /* Same width as the row checkbox so "Name" header aligns with the data row's name text */
@@ -323,29 +328,6 @@ const CheckboxSpacer = styled.span`
   width: 13px;
 `;
 
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
-
-const DesktopHeaderRow = styled.div`
-  align-items: center;
-  border-bottom: 1px solid ${DesignTokenColors.neutralUI200};
-  color: ${DesignTokenColors.neutralUI600};
-  display: grid;
-  font-size: 13px;
-  gap: 12px;
-  grid-template-columns: minmax(140px, 0.8fr) minmax(70px, 0.4fr) minmax(340px, 1.8fr);
-  padding: 8px 14px;
-`;
-
-const DesktopRow = styled.div`
-  align-items: center;
-  display: grid;
-  gap: 12px;
-  grid-template-columns: minmax(140px, 0.8fr) minmax(70px, 0.4fr) minmax(340px, 1.8fr);
-`;
-
 const EmptyState = styled.div`
   background: ${DesignTokenColors.neutralUI50};
   border: 1px dashed ${DesignTokenColors.neutralUI300};
@@ -370,54 +352,6 @@ const InvitedViaCell = styled.div`
   font-size: 14px;
 `;
 
-const KebabBtn = styled.button`
-  background: transparent;
-  border: none;
-  border-radius: 10px;
-  color: ${DesignTokenColors.neutralUI600};
-  cursor: pointer;
-  padding: 2px 6px;
-
-  &:hover {
-    background: ${DesignTokenColors.neutralUI50};
-  }
-`;
-
-const MobileActionPill = styled.button`
-  background: ${DesignTokenColors.whiteUI};
-  border: 1px solid ${DesignTokenColors.primary600};
-  border-radius: 9999px;
-  color: ${DesignTokenColors.primary700};
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 500;
-  padding: 8px 16px;
-  width: 100%;
-
-  &:hover {
-    background: ${DesignTokenColors.primary50};
-  }
-`;
-
-const MobileActions = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin-top: 8px;
-`;
-
-const MobileFieldLabel = styled.div`
-  color: ${DesignTokenColors.neutralUI600};
-  font-size: 13px;
-  margin-top: 8px;
-`;
-
-const MobileFieldValue = styled.div`
-  color: ${DesignTokenColors.neutralUI900};
-  font-size: 14px;
-  font-weight: 500;
-`;
-
 const MobileRightTools = styled.div`
   align-items: center;
   display: flex;
@@ -432,39 +366,6 @@ const MobileToolsDivider = styled.span`
   width: 1px;
 `;
 
-const NameCell = styled.div`
-  align-items: center;
-  display: flex;
-  gap: 10px;
-`;
-
-const NameText = styled.div`
-  color: ${DesignTokenColors.neutralUI900};
-  font-size: 15px;
-  font-weight: 600;
-`;
-
-const RemindCard = styled(Card)`
-  background: ${(p) => (p.$selected ? DesignTokenColors.primary50 : DesignTokenColors.neutralUI50)};
-  border: 1px solid ${(p) => (p.$selected ? DesignTokenColors.primary200 : DesignTokenColors.neutralUI200)};
-  padding: 12px 14px;
-
-  @media (min-width: 576px) {
-    background: ${(p) => (p.$selected ? DesignTokenColors.primary50 : DesignTokenColors.whiteUI)};
-    border-radius: 0;
-    border-left: none;
-    border-right: none;
-    border-top: none;
-    box-shadow: none;
-  }
-`;
-
-const RightOptions = styled.div`
-  align-items: center;
-  display: flex;
-  margin-left: auto;
-`;
-
 const SearchIconButton = styled.button`
   align-items: center;
   background: none;
@@ -484,16 +385,6 @@ const SearchIconButton = styled.button`
   }
 `;
 
-const SelectAllInline = styled.label`
-  align-items: center;
-  color: ${DesignTokenColors.neutralUI700};
-  display: inline-flex;
-  font-size: 14px;
-  gap: 6px;
-  line-height: 1;
-  margin: 0;
-`;
-
 const SubFilterPill = styled.button`
   background: ${(p) => (p.$active ? DesignTokenColors.primary50 : DesignTokenColors.whiteUI)};
   border: 1px solid ${(p) => (p.$active ? DesignTokenColors.primary600 : DesignTokenColors.neutralUI300)};
diff --git a/src/js/pages/ManageMyCandidates/TrackingHeaderActionContext.js b/src/js/pages/ManageMyCandidates/TrackingHeaderActionContext.js
new file mode 100644
index 000000000..cdd5ae746
--- /dev/null
+++ b/src/js/pages/ManageMyCandidates/TrackingHeaderActionContext.js
@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+
+/**
+ * Holds a DOM node (the slot inside SupporterTracking's TabRow) into which the
+ * active subtab portals its desktop "Send / Resend ... to selected (N)" button.
+ * Null when the slot isn't mounted yet (e.g., on mobile, or pre-mount).
+ */
+const TrackingHeaderActionContext = createContext(null);
+
+export default TrackingHeaderActionContext;