diff --git a/packages/manager/src/components/ImageSelect/ImageSelectTable.tsx b/packages/manager/src/components/ImageSelect/ImageSelectTable.tsx
index 46c5456320c..e2296485ece 100644
--- a/packages/manager/src/components/ImageSelect/ImageSelectTable.tsx
+++ b/packages/manager/src/components/ImageSelect/ImageSelectTable.tsx
@@ -17,7 +17,7 @@ import {
   useTheme,
 } from '@linode/ui';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { Pagination } from 'akamai-cds-react-components/Pagination';
+import { Pagination } from '@akamai/cds-components/react/Pagination';
 import {
   Table,
   TableBody,
@@ -25,7 +25,7 @@ import {
   TableHead,
   TableHeaderCell,
   TableRow,
-} from 'akamai-cds-react-components/Table';
+} from '@akamai/cds-components/react/Table';
 import React, { useState } from 'react';
 
 import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField';
diff --git a/packages/manager/src/components/ImageSelect/ImageSelectTableRow.tsx b/packages/manager/src/components/ImageSelect/ImageSelectTableRow.tsx
index 98dd251e9a4..199e6dbb2f9 100644
--- a/packages/manager/src/components/ImageSelect/ImageSelectTableRow.tsx
+++ b/packages/manager/src/components/ImageSelect/ImageSelectTableRow.tsx
@@ -7,7 +7,7 @@ import {
 } from '@linode/ui';
 import { convertStorageUnit, pluralize } from '@linode/utilities';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { TableCell, TableRow } from 'akamai-cds-react-components/Table';
+import { TableCell, TableRow } from '@akamai/cds-components/react/Table';
 import React from 'react';
 
 import CloudInitIcon from 'src/assets/icons/cloud-init.svg';
diff --git a/packages/manager/src/features/Account/SwitchAccounts/ChildAccountsTable.tsx b/packages/manager/src/features/Account/SwitchAccounts/ChildAccountsTable.tsx
index 524960b2cb0..6ccad3cc06f 100644
--- a/packages/manager/src/features/Account/SwitchAccounts/ChildAccountsTable.tsx
+++ b/packages/manager/src/features/Account/SwitchAccounts/ChildAccountsTable.tsx
@@ -1,11 +1,11 @@
 import { Box, CircleProgress, LinkButton, useTheme } from '@linode/ui';
-import { Pagination } from 'akamai-cds-react-components/Pagination';
+import { Pagination } from '@akamai/cds-components/react/Pagination';
 import {
   Table,
   TableBody,
   TableCell,
   TableRow,
-} from 'akamai-cds-react-components/Table';
+} from '@akamai/cds-components/react/Table';
 import React from 'react';
 
 import { MIN_PAGE_SIZE } from 'src/components/PaginationFooter/PaginationFooter.constants';
diff --git a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.style.ts b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.style.ts
index a19ea764dff..25ca9d71bda 100644
--- a/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.style.ts
+++ b/packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.style.ts
@@ -1,6 +1,6 @@
 import { Box, TextField, Typography } from '@linode/ui';
 import { Grid, styled } from '@mui/material';
-import { Button } from 'akamai-cds-react-components';
+import { Button } from '@akamai/cds-components/react/Button';
 
 import { PlansPanel } from 'src/features/components/PlansPanel/PlansPanel';
 
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.tsx b/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.tsx
index be62f9b5cb5..d17087da33c 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.tsx
@@ -1,6 +1,6 @@
 import { useDatabaseMutation } from '@linode/queries';
 import { ActionsPanel, Notice, Typography } from '@linode/ui';
-import { Button } from 'akamai-cds-react-components';
+import { Button } from '@akamai/cds-components/react/Button';
 import * as React from 'react';
 import type { JSX } from 'react';
 import { makeStyles } from 'tss-react/mui';
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseAdvancedConfiguration.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseAdvancedConfiguration.tsx
index e7d54305105..8e40196e9b2 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseAdvancedConfiguration.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseAdvancedConfiguration.tsx
@@ -1,7 +1,7 @@
 import { Box, Paper, Typography } from '@linode/ui';
 import Grid from '@mui/material/Grid';
 import { useNavigate } from '@tanstack/react-router';
-import { Button } from 'akamai-cds-react-components';
+import { Button } from '@akamai/cds-components/react/Button';
 import React from 'react';
 
 import { Link } from 'src/components/Link';
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseAdvancedConfigurationDrawer.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseAdvancedConfigurationDrawer.tsx
index 033206afd43..cb245f9e70a 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseAdvancedConfigurationDrawer.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseAdvancedConfigurationDrawer.tsx
@@ -12,7 +12,7 @@ import {
 import { scrollErrorIntoViewV2 } from '@linode/utilities';
 import { createDynamicAdvancedConfigSchema } from '@linode/validation';
 import Grid from '@mui/material/Grid';
-import { Button } from 'akamai-cds-react-components';
+import { Button } from '@akamai/cds-components/react/Button';
 import { enqueueSnackbar } from 'notistack';
 import React, { useEffect, useMemo, useState } from 'react';
 import { Controller, get, useFieldArray, useForm } from 'react-hook-form';
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseConfigurationItem.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseConfigurationItem.tsx
index 9cb39fa948b..aadfb04d0ad 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseConfigurationItem.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseConfigurationItem.tsx
@@ -6,7 +6,7 @@ import {
   Toggle,
   Typography,
 } from '@linode/ui';
-import { Button } from 'akamai-cds-react-components';
+import { Button } from '@akamai/cds-components/react/Button';
 import React from 'react';
 
 import {
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPoolRow.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPoolRow.tsx
index a8fe2fe0c43..39e72ae2392 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPoolRow.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPoolRow.tsx
@@ -1,5 +1,5 @@
 import { Hidden } from '@linode/ui';
-import { TableCell, TableRow } from 'akamai-cds-react-components/Table';
+import { TableCell, TableRow } from '@akamai/cds-components/react/Table';
 import * as React from 'react';
 
 import { ActionMenu } from 'src/components/ActionMenu/ActionMenu';
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPools.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPools.tsx
index b6664b2cc9f..4eee774475b 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPools.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPools.tsx
@@ -9,7 +9,7 @@ import {
 } from '@linode/ui';
 import Grid from '@mui/material/Grid';
 import { useTheme } from '@mui/material/styles';
-import { Pagination } from 'akamai-cds-react-components/Pagination';
+import { Pagination } from '@akamai/cds-components/react/Pagination';
 import {
   Table,
   TableBody,
@@ -17,7 +17,7 @@ import {
   TableHead,
   TableHeaderCell,
   TableRow,
-} from 'akamai-cds-react-components/Table';
+} from '@akamai/cds-components/react/Table';
 import React from 'react';
 
 import { Link } from 'src/components/Link';
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.style.ts b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.style.ts
index d30b3c71db5..ad229b31d20 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.style.ts
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseResize/DatabaseResize.style.ts
@@ -1,6 +1,6 @@
 import Grid from '@mui/material/Grid';
 import { styled } from '@mui/material/styles';
-import { Button } from 'akamai-cds-react-components';
+import { Button } from '@akamai/cds-components/react/Button';
 
 import { PlansPanel } from 'src/features/components/PlansPanel/PlansPanel';
 
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsMaintenance.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsMaintenance.tsx
index 8d76a33f127..6179a499445 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsMaintenance.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsMaintenance.tsx
@@ -1,7 +1,7 @@
 import { useDatabaseEnginesQuery } from '@linode/queries';
 import { TooltipIcon, Typography } from '@linode/ui';
 import { GridLegacy, styled } from '@mui/material';
-import { Button } from 'akamai-cds-react-components';
+import { Button } from '@akamai/cds-components/react/Button';
 import * as React from 'react';
 
 import {
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsMenuItem.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsMenuItem.tsx
index 9d285dc4a32..6801bb47762 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsMenuItem.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettingsMenuItem.tsx
@@ -1,5 +1,5 @@
 import { Typography } from '@linode/ui';
-import { Button } from 'akamai-cds-react-components';
+import { Button } from '@akamai/cds-components/react/Button';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx
index 9b7048eb6dc..8b0a578ecdf 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx
@@ -15,7 +15,8 @@ import {
 } from '@linode/ui';
 import { updateMaintenanceSchema } from '@linode/validation';
 import { styled } from '@mui/material/styles';
-import { Button, Select } from 'akamai-cds-react-components';
+import { Button } from '@akamai/cds-components/react/Button';
+import { Select } from '@akamai/cds-components/react/Select';
 import { DateTime } from 'luxon';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseCaCert.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseCaCert.tsx
index 9d8e840467c..dbcb8b8161c 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseCaCert.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseCaCert.tsx
@@ -2,7 +2,7 @@ import { getSSLFields } from '@linode/api-v4/lib/databases/databases';
 import { TooltipIcon } from '@linode/ui';
 import { downloadFile } from '@linode/utilities';
 import { styled } from '@mui/material/styles';
-import { Button } from 'akamai-cds-react-components';
+import { Button } from '@akamai/cds-components/react/Button';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.tsx
index 94f6f00fb0a..79f8ee0b30a 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.tsx
@@ -1,6 +1,6 @@
 import { useDatabaseCredentialsQuery } from '@linode/queries';
 import { Box, CircleProgress, TooltipIcon, Typography } from '@linode/ui';
-import { Button } from 'akamai-cds-react-components';
+import { Button } from '@akamai/cds-components/react/Button';
 import { enqueueSnackbar } from 'notistack';
 import * as React from 'react';
 
diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLandingTable.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLandingTable.tsx
index 3eaeba8e5e9..938d366b995 100644
--- a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLandingTable.tsx
+++ b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseLandingTable.tsx
@@ -1,13 +1,13 @@
 import { Hidden } from '@linode/ui';
 import { useTheme } from '@mui/material/styles';
-import { Pagination } from 'akamai-cds-react-components/Pagination';
+import { Pagination } from '@akamai/cds-components/react/Pagination';
 import {
   Table,
   TableBody,
   TableHead,
   TableHeaderCell,
   TableRow,
-} from 'akamai-cds-react-components/Table';
+} from '@akamai/cds-components/react/Table';
 import React from 'react';
 
 import { MIN_PAGE_SIZE } from 'src/components/PaginationFooter/PaginationFooter.constants';
diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseRow.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseRow.tsx
index decaf48b49a..9734c4219e0 100644
--- a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseRow.tsx
+++ b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseRow.tsx
@@ -5,7 +5,7 @@ import {
 } from '@linode/queries';
 import { Chip, Hidden } from '@linode/ui';
 import { formatStorageUnits } from '@linode/utilities';
-import { TableCell, TableRow } from 'akamai-cds-react-components/Table';
+import { TableCell, TableRow } from '@akamai/cds-components/react/Table';
 import * as React from 'react';
 
 import { Link } from 'src/components/Link';
diff --git a/packages/manager/src/features/Databases/shared.styles.ts b/packages/manager/src/features/Databases/shared.styles.ts
index fe33a83bd58..596e4d83f99 100644
--- a/packages/manager/src/features/Databases/shared.styles.ts
+++ b/packages/manager/src/features/Databases/shared.styles.ts
@@ -1,5 +1,5 @@
 import { styled } from '@linode/ui';
-import { TableCell } from 'akamai-cds-react-components/Table';
+import { TableCell } from '@akamai/cds-components/react/Table';
 import { makeStyles } from 'tss-react/mui';
 
 import type { Theme } from '@mui/material';
diff --git a/packages/manager/src/features/IAM/Roles/RolesTable/RolesTable.tsx b/packages/manager/src/features/IAM/Roles/RolesTable/RolesTable.tsx
index d16de2aa1a9..301c2b89c65 100644
--- a/packages/manager/src/features/IAM/Roles/RolesTable/RolesTable.tsx
+++ b/packages/manager/src/features/IAM/Roles/RolesTable/RolesTable.tsx
@@ -4,7 +4,7 @@ import { useTheme } from '@mui/material';
 import Grid from '@mui/material/Grid';
 import Paper from '@mui/material/Paper';
 import { useLocation, useNavigate, useSearch } from '@tanstack/react-router';
-import { Pagination } from 'akamai-cds-react-components/Pagination';
+import { Pagination } from '@akamai/cds-components/react/Pagination';
 import {
   sortRows,
   Table,
@@ -14,7 +14,7 @@ import {
   TableHeaderCell,
   TableRow,
   TableRowExpanded,
-} from 'akamai-cds-react-components/Table';
+} from '@akamai/cds-components/react/Table';
 import React, { useState } from 'react';
 
 import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField';
@@ -38,7 +38,7 @@ import {
 
 import type { RoleView } from '../../Shared/types';
 import type { SelectOption } from '@linode/ui';
-import type { Order } from 'akamai-cds-react-components/Table';
+import type { Order } from '@akamai/cds-components/react/Table';
 
 const ALL_ROLES_OPTION: SelectOption = {
   label: 'All Roles',
diff --git a/packages/manager/src/features/IAM/Shared/MaskableText/MaskableText.styles.ts b/packages/manager/src/features/IAM/Shared/MaskableText/MaskableText.styles.ts
new file mode 100644
index 00000000000..5d4960c3e1f
--- /dev/null
+++ b/packages/manager/src/features/IAM/Shared/MaskableText/MaskableText.styles.ts
@@ -0,0 +1,32 @@
+import { Button } from '@akamai/cds-components/react/Button';
+import { Icon } from '@akamai/cds-components/react/Icon';
+import { styled } from '@mui/material/styles';
+
+export const StyledWrapper = styled('div', {
+  label: 'StyledWrapper',
+})(() => ({
+  alignItems: 'center',
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'flex-start',
+  height: '20px',
+}));
+
+export const StyledToggleButton = styled(Button, {
+  label: 'StyledToggleButton',
+})(({ theme }) => ({
+  marginLeft: theme.tokens.spacing.S8,
+  minHeight: 'auto',
+  minWidth: 'auto',
+  padding: 0,
+  display: 'flex',
+}));
+
+export const StyledIcon = styled(Icon, {
+  label: 'StyledIcon',
+})(({ theme }) => ({
+  color: theme.palette.grey[500],
+  '&:hover': {
+    color: theme.palette.primary.main,
+  },
+}));
diff --git a/packages/manager/src/features/IAM/Shared/MaskableText/MaskableText.test.tsx b/packages/manager/src/features/IAM/Shared/MaskableText/MaskableText.test.tsx
new file mode 100644
index 00000000000..e11181dcb16
--- /dev/null
+++ b/packages/manager/src/features/IAM/Shared/MaskableText/MaskableText.test.tsx
@@ -0,0 +1,105 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { MaskableText } from './MaskableText';
+
+const SECRET_TEXT = 'text-to-be-masked';
+const TOGGLE_TEST_ID = 'maskable-text-toggle';
+
+const queryMocks = vi.hoisted(() => ({
+  usePreferences: vi.fn(),
+}));
+
+vi.mock('@linode/queries', async () => {
+  const actual = await vi.importActual('@linode/queries');
+  return { ...actual, usePreferences: queryMocks.usePreferences };
+});
+
+describe('MaskableText', () => {
+  describe('when masking is disabled', () => {
+    beforeEach(() => {
+      queryMocks.usePreferences.mockReturnValue({ data: false });
+    });
+
+    it('renders the plain text unmasked', () => {
+      renderWithTheme(<MaskableText text={SECRET_TEXT} />);
+      expect(screen.getByText(SECRET_TEXT)).toBeVisible();
+    });
+
+    it('renders children instead of text when provided', () => {
+      renderWithTheme(
+        <MaskableText text={SECRET_TEXT}>
+          <span>custom child</span>
+        </MaskableText>
+      );
+      expect(screen.getByText('custom child')).toBeVisible();
+      expect(screen.queryByText(SECRET_TEXT)).not.toBeInTheDocument();
+    });
+
+    it('renders nothing when text is empty', () => {
+      const { container } = renderWithTheme(<MaskableText text="" />);
+      expect(container).toBeEmptyDOMElement();
+    });
+
+    it('does not render the toggle button', () => {
+      renderWithTheme(<MaskableText isToggleable text={SECRET_TEXT} />);
+      expect(screen.queryByTestId(TOGGLE_TEST_ID)).not.toBeInTheDocument();
+    });
+  });
+
+  describe('when masking is enabled', () => {
+    beforeEach(() => {
+      queryMocks.usePreferences.mockReturnValue({ data: true });
+    });
+
+    it('renders masked dots instead of plain text by default', () => {
+      renderWithTheme(<MaskableText text="secret-value" />);
+      expect(screen.queryByText('secret-value')).not.toBeInTheDocument();
+      expect(screen.getByText('•'.repeat(12))).toBeVisible();
+    });
+
+    it('renders masked dots with custom length', () => {
+      renderWithTheme(<MaskableText length={6} text="secret-value" />);
+      expect(screen.getByText('•'.repeat(6))).toBeVisible();
+    });
+
+    it('renders nothing when text is empty', () => {
+      const { container } = renderWithTheme(<MaskableText text="" />);
+      expect(container).toBeEmptyDOMElement();
+    });
+
+    describe('toggle behavior', () => {
+      it('does not render toggle button when isToggleable is false', () => {
+        renderWithTheme(<MaskableText text={SECRET_TEXT} />);
+        expect(screen.queryByTestId(TOGGLE_TEST_ID)).not.toBeInTheDocument();
+      });
+
+      it('renders toggle button when isToggleable is true', () => {
+        renderWithTheme(<MaskableText isToggleable text={SECRET_TEXT} />);
+        screen.getByTestId(TOGGLE_TEST_ID);
+      });
+
+      it('reveals text when toggle button is clicked', async () => {
+        renderWithTheme(<MaskableText isToggleable text={SECRET_TEXT} />);
+        expect(screen.queryByText(SECRET_TEXT)).not.toBeInTheDocument();
+
+        await userEvent.click(screen.getByTestId(TOGGLE_TEST_ID));
+
+        expect(screen.getByText(SECRET_TEXT)).toBeVisible();
+      });
+
+      it('masks text again when toggle button is clicked twice', async () => {
+        renderWithTheme(<MaskableText isToggleable text={SECRET_TEXT} />);
+
+        await userEvent.click(screen.getByTestId(TOGGLE_TEST_ID));
+        await userEvent.click(screen.getByTestId(TOGGLE_TEST_ID));
+
+        expect(screen.queryByText(SECRET_TEXT)).not.toBeInTheDocument();
+        expect(screen.getByText('•'.repeat(12))).toBeVisible();
+      });
+    });
+  });
+});
diff --git a/packages/manager/src/features/IAM/Shared/MaskableText/MaskableText.tsx b/packages/manager/src/features/IAM/Shared/MaskableText/MaskableText.tsx
new file mode 100644
index 00000000000..d1668045483
--- /dev/null
+++ b/packages/manager/src/features/IAM/Shared/MaskableText/MaskableText.tsx
@@ -0,0 +1,104 @@
+import { Tooltip } from '@akamai/cds-components/react/Tooltip';
+import { usePreferences } from '@linode/queries';
+import * as React from 'react';
+import type { JSX } from 'react';
+
+import {
+  StyledIcon,
+  StyledToggleButton,
+  StyledWrapper,
+} from './MaskableText.styles';
+
+const DEFAULT_MASKED_TEXT_LENGTH = 12;
+
+export interface MaskableTextProps {
+  /**
+   * (Optional) original JSX element to render if the text is not masked.
+   */
+  children?: JSX.Element | JSX.Element[];
+  /**
+   * If true, displays a VisibilityTooltip icon to toggle the masked and unmasked text.
+   * @default false
+   */
+  isToggleable?: boolean;
+  /**
+   * Optionally specifies the length of the masked text; if not provided, will use a default length.
+   */
+  length?: number;
+  /**
+   * Optional styling for the masked and unmasked Typography
+   */
+  styleTypography?: React.CSSProperties;
+  /**
+   * The original, maskable content; can be a string or any JSX/ReactNode.
+   * If the text is not masked, render this text or the styled text via children.
+   */
+  text: React.ReactNode | string | undefined;
+}
+
+export const MaskableText = (props: MaskableTextProps) => {
+  const {
+    children,
+    isToggleable = false,
+    length,
+    styleTypography,
+    text,
+  } = props;
+
+  const { data: maskedPreferenceSetting } = usePreferences(
+    (preferences) => preferences?.maskSensitiveData
+  );
+
+  const [isMasked, setIsMasked] = React.useState(maskedPreferenceSetting);
+
+  const unmaskedText =
+    children ??
+    (typeof text === 'string' ? (
+      <p style={styleTypography}>{text}</p>
+    ) : (
+      text // JSX (ReactNode)
+    ));
+
+  // Return early based on the preference setting and the original text.
+
+  if (!text) {
+    return;
+  }
+
+  if (!maskedPreferenceSetting) {
+    return unmaskedText;
+  }
+
+  const maskedText = '•'.repeat(length ?? DEFAULT_MASKED_TEXT_LENGTH);
+
+  return (
+    <StyledWrapper>
+      {isMasked ? (
+        <p style={{ overflowWrap: 'anywhere', margin: 0, ...styleTypography }}>
+          {maskedText}
+        </p>
+      ) : (
+        unmaskedText
+      )}
+      {isToggleable && (
+        <Tooltip
+          noArrow={true}
+          tooltipPlacement="top"
+          tooltipText={isMasked ? 'Show' : 'Hide'}
+        >
+          <StyledToggleButton
+            data-testid="maskable-text-toggle"
+            onClick={() => setIsMasked(!isMasked)}
+            variant="icon"
+          >
+            {isMasked ? (
+              <StyledIcon icon="show" size="s" />
+            ) : (
+              <StyledIcon icon="hide" size="s" />
+            )}
+          </StyledToggleButton>
+        </Tooltip>
+      )}
+    </StyledWrapper>
+  );
+};
diff --git a/packages/manager/src/features/IAM/Users/UserDetails/UserDetailsPanel.tsx b/packages/manager/src/features/IAM/Users/UserDetails/UserDetailsPanel.tsx
index dafb504a4b3..7c2b7415994 100644
--- a/packages/manager/src/features/IAM/Users/UserDetails/UserDetailsPanel.tsx
+++ b/packages/manager/src/features/IAM/Users/UserDetails/UserDetailsPanel.tsx
@@ -3,10 +3,10 @@ import Grid from '@mui/material/Grid';
 import React from 'react';
 
 import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
-import { MaskableText } from 'src/components/MaskableText/MaskableText';
 import { StatusIcon } from 'src/components/StatusIcon/StatusIcon';
 import { TextTooltip } from 'src/components/TextTooltip';
 
+import { MaskableText } from '../../Shared/MaskableText/MaskableText';
 import { getTotalAssignedRoles } from './utils';
 
 import type { IamUserRoles, User } from '@linode/api-v4';
diff --git a/packages/manager/src/features/IAM/Users/UsersTable/UserRow.tsx b/packages/manager/src/features/IAM/Users/UsersTable/UserRow.tsx
index f944c896cad..10374181065 100644
--- a/packages/manager/src/features/IAM/Users/UsersTable/UserRow.tsx
+++ b/packages/manager/src/features/IAM/Users/UsersTable/UserRow.tsx
@@ -7,7 +7,6 @@ import React from 'react';
 import { Avatar } from 'src/components/Avatar/Avatar';
 import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
 import { Link } from 'src/components/Link';
-import { MaskableText } from 'src/components/MaskableText/MaskableText';
 import { StatusIcon } from 'src/components/StatusIcon/StatusIcon';
 import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
@@ -20,6 +19,7 @@ import {
   IAM_DELEGATE_USERS_PENDO_IDS,
   IAM_PARENT_USERS_PENDO_IDS,
 } from '../../Shared/constants';
+import { MaskableText } from '../../Shared/MaskableText/MaskableText';
 import { UsersActionMenu } from './UsersActionMenu';
 
 import type { User } from '@linode/api-v4';