diff --git a/app/component-library/components/CellAccount/CellAccount.constants.ts b/app/component-library/components/CellAccount/CellAccount.constants.ts
new file mode 100644
index 00000000000..4f2eb935fd1
--- /dev/null
+++ b/app/component-library/components/CellAccount/CellAccount.constants.ts
@@ -0,0 +1,16 @@
+export const TEST_ACCOUNT_ADDRESS =
+  '0x2990079bcdEe240329a520d2444386FC119da21a';
+export const TEST_CELL_ACCOUNT_TITLE = 'Orangefox.eth';
+export const TEST_CELL_ACCOUNT_SECONDARY_TEXT =
+  '0x2990079bcdEe240329a520d2444386FC119da21a';
+export const TEST_CELL_ACCOUNT_TERTIARY_TEXT = 'Updated 1 sec ago';
+export const TEST_TAG_LABEL_TEXT = 'Imported';
+
+export const CELL_ACCOUNT_SINGLE_SELECT_TEST_ID = 'cell-account-single-select';
+export const CELL_ACCOUNT_MULTI_SELECT_TEST_ID = 'cell-account-multi-select';
+export const CELL_ACCOUNT_AVATAR_TEST_ID = 'cell-account-avatar';
+export const CELL_ACCOUNT_TITLE_TEST_ID = 'cell-account-title';
+export const CELL_ACCOUNT_SECONDARY_TEXT_TEST_ID =
+  'cell-account-secondary-text';
+export const CELL_ACCOUNT_TERTIARY_TEXT_TEST_ID = 'cell-account-tertiary-text';
+export const CELL_ACCOUNT_TAG_LABEL_TEST_ID = 'cell-account-label';
diff --git a/app/component-library/components/CellAccount/CellAccount.stories.tsx b/app/component-library/components/CellAccount/CellAccount.stories.tsx
new file mode 100644
index 00000000000..1f51fde19d2
--- /dev/null
+++ b/app/component-library/components/CellAccount/CellAccount.stories.tsx
@@ -0,0 +1,56 @@
+/* eslint-disable no-console */
+// 3rd party dependencies
+import React from 'react';
+import { Alert } from 'react-native';
+import { boolean, text } from '@storybook/addon-knobs';
+import { storiesOf } from '@storybook/react-native';
+
+// External dependencies
+import { AccountAvatarType } from '../AccountAvatar';
+
+// Internal dependencies
+import CellAccount from './CellAccount';
+import {
+  TEST_ACCOUNT_ADDRESS,
+  TEST_CELL_ACCOUNT_TITLE,
+  TEST_CELL_ACCOUNT_SECONDARY_TEXT,
+  TEST_CELL_ACCOUNT_TERTIARY_TEXT,
+  TEST_TAG_LABEL_TEXT,
+} from './CellAccount.constants';
+
+storiesOf('Component Library / Cell', module).add('Default', () => {
+  const groupId = 'Props';
+  const isMultiSelect = boolean('IsMultiSelect?', false, groupId);
+  const titleText = text('title', TEST_CELL_ACCOUNT_TITLE, groupId);
+  const includeSecondaryText = boolean(
+    'Includes secondaryText?',
+    false,
+    groupId,
+  );
+  const secondaryText = includeSecondaryText
+    ? text('secondaryText', TEST_CELL_ACCOUNT_SECONDARY_TEXT, groupId)
+    : '';
+  const includeTertiaryText = boolean('Includes tertiaryText?', false, groupId);
+  const tertiaryText = includeTertiaryText
+    ? text('tertiaryText', TEST_CELL_ACCOUNT_TERTIARY_TEXT, groupId)
+    : '';
+  const includeTagLabel = boolean('Includes label?', false, groupId);
+  const tagLabel = includeTagLabel
+    ? text('label', TEST_TAG_LABEL_TEXT, groupId)
+    : '';
+  const isSelected = boolean('isSelected?', false, groupId);
+
+  return (
+    <CellAccount
+      accountAddress={TEST_ACCOUNT_ADDRESS}
+      accountAvatarType={AccountAvatarType.JazzIcon}
+      title={titleText}
+      secondaryText={secondaryText}
+      tertiaryText={tertiaryText}
+      tagLabel={tagLabel}
+      isSelected={isSelected}
+      isMultiSelect={isMultiSelect}
+      onPress={() => Alert.alert('Pressed account Cell!')}
+    />
+  );
+});
diff --git a/app/component-library/components/CellAccount/CellAccount.styles.ts b/app/component-library/components/CellAccount/CellAccount.styles.ts
new file mode 100644
index 00000000000..821986d9c1b
--- /dev/null
+++ b/app/component-library/components/CellAccount/CellAccount.styles.ts
@@ -0,0 +1,53 @@
+// 3rd library dependencies
+import { StyleSheet, ViewStyle } from 'react-native';
+
+// External dependencies
+import { CellAccountStyleSheetVars } from './CellAccount.types';
+
+// Internal dependencies
+import { Theme } from '../../../util/theme/models';
+
+/**
+ * Style sheet function for CellAccount component.
+ *
+ * @param params Style sheet params.
+ * @param params.theme App theme from ThemeContext.
+ * @param params.vars Inputs that the style sheet depends on.
+ * @returns StyleSheet object.
+ */
+const styleSheet = (params: {
+  theme: Theme;
+  vars: CellAccountStyleSheetVars;
+}) => {
+  const { vars, theme } = params;
+  const { colors } = theme;
+  const { style } = vars;
+
+  return StyleSheet.create({
+    base: Object.assign({} as ViewStyle, style) as ViewStyle,
+    cellAccount: {
+      flexDirection: 'row',
+    },
+    accountAvatar: {
+      marginRight: 16,
+    },
+    cellAccountInfo: {
+      flex: 1,
+      alignItems: 'flex-start',
+    },
+    optionalAccessory: {
+      marginLeft: 16,
+    },
+    secondaryText: {
+      color: colors.text.alternative,
+    },
+    tertiaryText: {
+      color: colors.text.alternative,
+    },
+    tagLabel: {
+      marginTop: 4,
+    },
+  });
+};
+
+export default styleSheet;
diff --git a/app/component-library/components/CellAccount/CellAccount.test.tsx b/app/component-library/components/CellAccount/CellAccount.test.tsx
new file mode 100644
index 00000000000..1279b661c6b
--- /dev/null
+++ b/app/component-library/components/CellAccount/CellAccount.test.tsx
@@ -0,0 +1,259 @@
+// 3rd party dependencies
+import React from 'react';
+import { shallow } from 'enzyme';
+
+// External dependencies
+import { AccountAvatarType } from '../AccountAvatar';
+
+// Internal dependencies
+import CellAccount from './CellAccount';
+import {
+  TEST_ACCOUNT_ADDRESS,
+  TEST_CELL_ACCOUNT_TITLE,
+  TEST_CELL_ACCOUNT_SECONDARY_TEXT,
+  TEST_CELL_ACCOUNT_TERTIARY_TEXT,
+  TEST_TAG_LABEL_TEXT,
+  CELL_ACCOUNT_SINGLE_SELECT_TEST_ID,
+  CELL_ACCOUNT_MULTI_SELECT_TEST_ID,
+  CELL_ACCOUNT_AVATAR_TEST_ID,
+  CELL_ACCOUNT_TITLE_TEST_ID,
+  CELL_ACCOUNT_SECONDARY_TEXT_TEST_ID,
+  CELL_ACCOUNT_TERTIARY_TEXT_TEST_ID,
+  CELL_ACCOUNT_TAG_LABEL_TEST_ID,
+} from './CellAccount.constants';
+
+describe('CellAccount - Snapshot', () => {
+  it('should render default settings correctly', () => {
+    const wrapper = shallow(
+      <CellAccount
+        accountAddress={TEST_ACCOUNT_ADDRESS}
+        accountAvatarType={AccountAvatarType.JazzIcon}
+        title={TEST_CELL_ACCOUNT_TITLE}
+        onPress={jest.fn}
+      />,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('should render secondaryText when given', () => {
+    const wrapper = shallow(
+      <CellAccount
+        accountAddress={TEST_ACCOUNT_ADDRESS}
+        accountAvatarType={AccountAvatarType.JazzIcon}
+        title={TEST_CELL_ACCOUNT_TITLE}
+        secondaryText={TEST_CELL_ACCOUNT_SECONDARY_TEXT}
+        onPress={jest.fn}
+      />,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('should render tertiaryText when given', () => {
+    const wrapper = shallow(
+      <CellAccount
+        accountAddress={TEST_ACCOUNT_ADDRESS}
+        accountAvatarType={AccountAvatarType.JazzIcon}
+        title={TEST_CELL_ACCOUNT_TITLE}
+        tertiaryText={TEST_CELL_ACCOUNT_TERTIARY_TEXT}
+        onPress={jest.fn}
+      />,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('should render label when given', () => {
+    const wrapper = shallow(
+      <CellAccount
+        accountAddress={TEST_ACCOUNT_ADDRESS}
+        accountAvatarType={AccountAvatarType.JazzIcon}
+        title={TEST_CELL_ACCOUNT_TITLE}
+        tagLabel={TEST_TAG_LABEL_TEXT}
+        onPress={jest.fn}
+      />,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('should render the proper selected state', () => {
+    const wrapper = shallow(
+      <CellAccount
+        accountAddress={TEST_ACCOUNT_ADDRESS}
+        accountAvatarType={AccountAvatarType.JazzIcon}
+        title={TEST_CELL_ACCOUNT_TITLE}
+        isSelected
+        onPress={jest.fn}
+      />,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('should render the proper multiselect when isMultiSelect is true', () => {
+    const wrapper = shallow(
+      <CellAccount
+        accountAddress={TEST_ACCOUNT_ADDRESS}
+        accountAvatarType={AccountAvatarType.JazzIcon}
+        title={TEST_CELL_ACCOUNT_TITLE}
+        isMultiSelect
+        onPress={jest.fn}
+      />,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+});
+
+describe('CellAccount', () => {
+  it('should render singleSelect if isMultiSelect is false', () => {
+    const wrapper = shallow(
+      <CellAccount
+        accountAddress={TEST_ACCOUNT_ADDRESS}
+        accountAvatarType={AccountAvatarType.JazzIcon}
+        title={TEST_CELL_ACCOUNT_TITLE}
+        onPress={jest.fn}
+        isMultiSelect={false}
+      />,
+    );
+    const singleSelectComponent = wrapper.findWhere(
+      (node) => node.prop('testID') === CELL_ACCOUNT_SINGLE_SELECT_TEST_ID,
+    );
+    expect(singleSelectComponent.exists()).toBe(true);
+
+    const multiSelectComponent = wrapper.findWhere(
+      (node) => node.prop('testID') === CELL_ACCOUNT_MULTI_SELECT_TEST_ID,
+    );
+    expect(multiSelectComponent.exists()).toBe(false);
+  });
+  it('should render multiSelect if isMultiSelect is true', () => {
+    const wrapper = shallow(
+      <CellAccount
+        accountAddress={TEST_ACCOUNT_ADDRESS}
+        accountAvatarType={AccountAvatarType.JazzIcon}
+        title={TEST_CELL_ACCOUNT_TITLE}
+        isMultiSelect
+        onPress={jest.fn}
+      />,
+    );
+    const singleSelectComponent = wrapper.findWhere(
+      (node) => node.prop('testID') === CELL_ACCOUNT_SINGLE_SELECT_TEST_ID,
+    );
+    expect(singleSelectComponent.exists()).toBe(false);
+
+    const multiSelectComponent = wrapper.findWhere(
+      (node) => node.prop('testID') === CELL_ACCOUNT_MULTI_SELECT_TEST_ID,
+    );
+    expect(multiSelectComponent.exists()).toBe(true);
+  });
+  it('should render Avatar', () => {
+    const wrapper = shallow(
+      <CellAccount
+        accountAddress={TEST_ACCOUNT_ADDRESS}
+        accountAvatarType={AccountAvatarType.JazzIcon}
+        title={TEST_CELL_ACCOUNT_TITLE}
+        onPress={jest.fn}
+      />,
+    );
+    const avatarComponent = wrapper.findWhere(
+      (node) => node.prop('testID') === CELL_ACCOUNT_AVATAR_TEST_ID,
+    );
+    expect(avatarComponent.exists()).toBe(true);
+  });
+  it('should render the given title', () => {
+    const wrapper = shallow(
+      <CellAccount
+        accountAddress={TEST_ACCOUNT_ADDRESS}
+        accountAvatarType={AccountAvatarType.JazzIcon}
+        title={TEST_CELL_ACCOUNT_TITLE}
+        onPress={jest.fn}
+      />,
+    );
+    const titleElement = wrapper.findWhere(
+      (node) => node.prop('testID') === CELL_ACCOUNT_TITLE_TEST_ID,
+    );
+    expect(titleElement.props().children).toBe(TEST_CELL_ACCOUNT_TITLE);
+  });
+  it('should render the given secondaryText', () => {
+    const wrapper = shallow(
+      <CellAccount
+        accountAddress={TEST_ACCOUNT_ADDRESS}
+        accountAvatarType={AccountAvatarType.JazzIcon}
+        title={TEST_CELL_ACCOUNT_TITLE}
+        secondaryText={TEST_CELL_ACCOUNT_SECONDARY_TEXT}
+        onPress={jest.fn}
+      />,
+    );
+    const secondaryTextElement = wrapper.findWhere(
+      (node) => node.prop('testID') === CELL_ACCOUNT_SECONDARY_TEXT_TEST_ID,
+    );
+    expect(secondaryTextElement.props().children).toBe(
+      TEST_CELL_ACCOUNT_SECONDARY_TEXT,
+    );
+  });
+  it('should not render secondaryText if not given', () => {
+    const wrapper = shallow(
+      <CellAccount
+        accountAddress={TEST_ACCOUNT_ADDRESS}
+        accountAvatarType={AccountAvatarType.JazzIcon}
+        title={TEST_CELL_ACCOUNT_TITLE}
+        onPress={jest.fn}
+      />,
+    );
+    const secondaryTextElement = wrapper.findWhere(
+      (node) => node.prop('testID') === CELL_ACCOUNT_SECONDARY_TEXT_TEST_ID,
+    );
+    expect(secondaryTextElement.exists()).toBe(false);
+  });
+  it('should render the given tertiaryText', () => {
+    const wrapper = shallow(
+      <CellAccount
+        accountAddress={TEST_ACCOUNT_ADDRESS}
+        accountAvatarType={AccountAvatarType.JazzIcon}
+        title={TEST_CELL_ACCOUNT_TITLE}
+        tertiaryText={TEST_CELL_ACCOUNT_TERTIARY_TEXT}
+        onPress={jest.fn}
+      />,
+    );
+    const tertiaryTextElement = wrapper.findWhere(
+      (node) => node.prop('testID') === CELL_ACCOUNT_TERTIARY_TEXT_TEST_ID,
+    );
+    expect(tertiaryTextElement.props().children).toBe(
+      TEST_CELL_ACCOUNT_TERTIARY_TEXT,
+    );
+  });
+  it('should not render tertiaryText if not given', () => {
+    const wrapper = shallow(
+      <CellAccount
+        accountAddress={TEST_ACCOUNT_ADDRESS}
+        accountAvatarType={AccountAvatarType.JazzIcon}
+        title={TEST_CELL_ACCOUNT_TITLE}
+        onPress={jest.fn}
+      />,
+    );
+    const tertiaryTextElement = wrapper.findWhere(
+      (node) => node.prop('testID') === CELL_ACCOUNT_TERTIARY_TEXT_TEST_ID,
+    );
+    expect(tertiaryTextElement.exists()).toBe(false);
+  });
+  it('should render tag with given label', () => {
+    const wrapper = shallow(
+      <CellAccount
+        accountAddress={TEST_ACCOUNT_ADDRESS}
+        accountAvatarType={AccountAvatarType.JazzIcon}
+        title={TEST_CELL_ACCOUNT_TITLE}
+        tagLabel={TEST_TAG_LABEL_TEXT}
+        onPress={jest.fn}
+      />,
+    );
+    const tagComponent = wrapper.findWhere(
+      (node) => node.prop('testID') === CELL_ACCOUNT_TAG_LABEL_TEST_ID,
+    );
+    expect(tagComponent.exists()).toBe(true);
+  });
+  it('should not render tag without given label', () => {
+    const wrapper = shallow(
+      <CellAccount
+        accountAddress={TEST_ACCOUNT_ADDRESS}
+        accountAvatarType={AccountAvatarType.JazzIcon}
+        title={TEST_CELL_ACCOUNT_TITLE}
+        onPress={jest.fn}
+      />,
+    );
+    const tagComponent = wrapper.findWhere(
+      (node) => node.prop('testID') === CELL_ACCOUNT_TAG_LABEL_TEST_ID,
+    );
+    expect(tagComponent.exists()).toBe(false);
+  });
+});
diff --git a/app/component-library/components/CellAccount/CellAccount.tsx b/app/component-library/components/CellAccount/CellAccount.tsx
new file mode 100644
index 00000000000..d88c95a5d47
--- /dev/null
+++ b/app/component-library/components/CellAccount/CellAccount.tsx
@@ -0,0 +1,107 @@
+/* eslint-disable react/prop-types */
+// 3rd library dependencies
+import React from 'react';
+import { View } from 'react-native';
+
+// External dependencies
+import { useStyles } from '../../hooks';
+import AccountAvatar from '../AccountAvatar';
+import BaseText, { BaseTextVariant } from '../BaseText';
+import { BaseAvatarSize } from '../BaseAvatar';
+import CellContainerMultiSelectItem from '../CellContainerMultiSelectItem';
+import CellContainerSelectItem from '../CellContainerSelectItem';
+import Tag from '../Tag';
+
+// Internal dependencies
+import {
+  CELL_ACCOUNT_SINGLE_SELECT_TEST_ID,
+  CELL_ACCOUNT_MULTI_SELECT_TEST_ID,
+  CELL_ACCOUNT_AVATAR_TEST_ID,
+  CELL_ACCOUNT_TITLE_TEST_ID,
+  CELL_ACCOUNT_SECONDARY_TEXT_TEST_ID,
+  CELL_ACCOUNT_TERTIARY_TEXT_TEST_ID,
+  CELL_ACCOUNT_TAG_LABEL_TEST_ID,
+} from './CellAccount.constants';
+import styleSheet from './CellAccount.styles';
+import { CellAccountProps } from './CellAccount.types';
+
+const CellAccount = ({
+  style,
+  accountAddress,
+  accountAvatarType,
+  title,
+  secondaryText,
+  tertiaryText,
+  tagLabel,
+  isMultiSelect = false,
+  isSelected = false,
+  children,
+  ...props
+}: CellAccountProps) => {
+  const { styles } = useStyles(styleSheet, { style });
+  const ContainerComponent = isMultiSelect
+    ? CellContainerMultiSelectItem
+    : CellContainerSelectItem;
+  const containerTestID = isMultiSelect
+    ? CELL_ACCOUNT_MULTI_SELECT_TEST_ID
+    : CELL_ACCOUNT_SINGLE_SELECT_TEST_ID;
+
+  return (
+    <ContainerComponent
+      isSelected={isSelected}
+      style={styles.base}
+      testID={containerTestID}
+      {...props}
+    >
+      <View style={styles.cellAccount}>
+        {/* DEV Note: Account Avatar should be replaced with Avatar with Badge whenever available */}
+        <AccountAvatar
+          type={accountAvatarType}
+          accountAddress={accountAddress}
+          size={BaseAvatarSize.Md}
+          style={styles.accountAvatar}
+          testID={CELL_ACCOUNT_AVATAR_TEST_ID}
+        />
+        <View style={styles.cellAccountInfo}>
+          <BaseText
+            numberOfLines={1}
+            variant={BaseTextVariant.sHeadingSMRegular}
+            testID={CELL_ACCOUNT_TITLE_TEST_ID}
+          >
+            {title}
+          </BaseText>
+          {!!secondaryText && (
+            <BaseText
+              numberOfLines={1}
+              variant={BaseTextVariant.sBodyMD}
+              style={styles.secondaryText}
+              testID={CELL_ACCOUNT_SECONDARY_TEXT_TEST_ID}
+            >
+              {secondaryText}
+            </BaseText>
+          )}
+          {!!tertiaryText && (
+            <BaseText
+              numberOfLines={1}
+              variant={BaseTextVariant.sBodyMD}
+              style={styles.tertiaryText}
+              testID={CELL_ACCOUNT_TERTIARY_TEXT_TEST_ID}
+            >
+              {tertiaryText}
+            </BaseText>
+          )}
+          {!!tagLabel && (
+            <Tag
+              label={tagLabel}
+              style={styles.tagLabel}
+              testID={CELL_ACCOUNT_TAG_LABEL_TEST_ID}
+            />
+          )}
+        </View>
+        {children && <View style={styles.optionalAccessory}>{children}</View>}
+      </View>
+    </ContainerComponent>
+  );
+};
+
+export default CellAccount;
diff --git a/app/component-library/components/CellAccount/CellAccount.types.ts b/app/component-library/components/CellAccount/CellAccount.types.ts
new file mode 100644
index 00000000000..ea0c61db0eb
--- /dev/null
+++ b/app/component-library/components/CellAccount/CellAccount.types.ts
@@ -0,0 +1,59 @@
+import { StyleProp, TouchableOpacityProps, ViewStyle } from 'react-native';
+import { AccountAvatarType } from '../AccountAvatar';
+
+/**
+ * Cell Account component props.
+ */
+export interface CellAccountProps extends TouchableOpacityProps {
+  /**
+   * Callback to trigger when pressed.
+   */
+  onPress: () => void;
+  /**
+   * An Ethereum wallet address to retrieve avatar
+   */
+  accountAddress: string;
+  /**
+   * AccountAvatar variants.
+   */
+  accountAvatarType: AccountAvatarType;
+  /**
+   * Title of the Cell Account, 1 line truncation
+   */
+  title: string;
+  /**
+   * Optional secondary text below the title, 1 line truncation
+   */
+  secondaryText?: string;
+  /**
+   * Optional tertiary text below the secondaryText, 1 line truncation
+   */
+  tertiaryText?: string;
+  /**
+   * Optional label (using Tag component) below the title/secondaryText/tertiaryText
+   */
+  tagLabel?: string;
+  /**
+   * Optional boolean to show Checkbox in Cell Account, applicable for multi select view
+   * @default false
+   */
+  isMultiSelect?: boolean;
+  /**
+   * Optional boolean to show Selected state in Cell Account
+   * @default false
+   */
+  isSelected?: boolean;
+  /**
+   * Optional accessory that can be inserted on the right of Cell Account
+   */
+  children?: React.ReactNode;
+  /**
+   * Escape hatch for applying extra styles. Only use if absolutely necessary.
+   */
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Style sheet input parameters.
+ */
+export type CellAccountStyleSheetVars = Pick<CellAccountProps, 'style'>;
diff --git a/app/component-library/components/CellAccount/README.md b/app/component-library/components/CellAccount/README.md
new file mode 100644
index 00000000000..d15e1ae27a4
--- /dev/null
+++ b/app/component-library/components/CellAccount/README.md
@@ -0,0 +1,108 @@
+# CellAccount
+
+CellAccount is a component used for accessing account selection.
+
+## Props
+
+This component extends `TouchableOpacityProps` from React Native's [TouchableOpacityProps Component](https://reactnative.dev/docs/touchableOpacity).
+
+### `onPress`
+
+Callback to trigger when pressed.
+
+| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
+| :-------------------------------------------------- | :------------------------------------------------------ |
+| function                                            | Yes                                                     |
+
+### `accountAddress`
+
+An Ethereum wallet address to retrieve avatar.
+
+| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
+| :-------------------------------------------------- | :------------------------------------------------------ |
+| string                                              | Yes                                                     |
+
+### `accountAvatarType`
+
+[AccountAvatar](../AccountAvatar/AccountAvatar.tsx) variants.
+
+| <span style="color:gray;font-size:14px">TYPE</span>         | <span style="color:gray;font-size:14px">REQUIRED</span> |
+| :---------------------------------------------------------- | :------------------------------------------------------ |
+| [AccountAvatar](../AccountAvatar/AccountAvatar.types.ts#L6) | Yes                                                     |
+
+### `title`
+
+Title of the Cell Account, 1 line truncation.
+
+| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
+| :-------------------------------------------------- | :------------------------------------------------------ |
+| string                                              | Yes                                                     |
+
+### `secondaryText`
+
+Optional secondary text below the title, 1 line truncation.
+
+| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
+| :-------------------------------------------------- | :------------------------------------------------------ |
+| string                                              | No                                                      |
+
+### `tertiaryText`
+
+Optional tertiary text below the secondaryText, 1 line truncation.
+
+| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
+| :-------------------------------------------------- | :------------------------------------------------------ |
+| string                                              | No                                                      |
+
+### `label`
+
+Optional label (using Tag component) below the title/secondaryText/tertiaryText.
+
+| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
+| :-------------------------------------------------- | :------------------------------------------------------ |
+| string                                              | No                                                      |
+
+### `isMultiSelect`
+
+Optional boolean to show Checkbox in Cell Account, applicable for multi select view.
+
+| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> | <span style="color:gray;font-size:14px">DEFAULT</span> |
+| :-------------------------------------------------- | :------------------------------------------------------ | :----------------------------------------------------- |
+| boolean                                             | No                                                      | false                                                  |
+
+### `isSelected`
+
+Optional boolean to show Selected state in Cell Account
+Default: false
+
+| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> | <span style="color:gray;font-size:14px">DEFAULT</span> |
+| :-------------------------------------------------- | :------------------------------------------------------ | :----------------------------------------------------- |
+| boolean                                             | No                                                      | false                                                  |
+
+### `children`
+
+Optional accessory that can be inserted on the right of Cell Account
+
+| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
+| :-------------------------------------------------- | :------------------------------------------------------ |
+| ReactNode                                           | Yes                                                     |
+
+## Usage
+
+```javascript
+// Change import path to relative path
+import { CellAccount } from 'app/component-library/components/CellAccount/CellAccount'
+import { AccountAvatarType } from 'app/component-library/components/AccountAvatar/AccountAvatar';
+
+<CellAccount
+    accountAddress={ACCOUNT_ADDRESS}
+    accountAvatarType={AccountAvatarType.JazzIcon}
+    title={TITLE}
+    secondaryText={SECONDARY_TEXT}
+    tertiaryText={TERTIARY_TEXT}
+    tagLabel={TAG_LABEL}
+    isSelected={false}
+    isMultiSelect={false}
+    onPress={() => Alert.alert('Pressed account Cell!')}
+/>
+```
diff --git a/app/component-library/components/CellAccount/__snapshots__/CellAccount.test.tsx.snap b/app/component-library/components/CellAccount/__snapshots__/CellAccount.test.tsx.snap
new file mode 100644
index 00000000000..40bee92d943
--- /dev/null
+++ b/app/component-library/components/CellAccount/__snapshots__/CellAccount.test.tsx.snap
@@ -0,0 +1,304 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CellAccount - Snapshot should render default settings correctly 1`] = `
+<CellContainerSelectOption
+  isSelected={false}
+  onPress={[Function]}
+  style={Object {}}
+  testID="cell-account-single-select"
+>
+  <View
+    style={
+      Object {
+        "flexDirection": "row",
+      }
+    }
+  >
+    <AccountAvatar
+      accountAddress="0x2990079bcdEe240329a520d2444386FC119da21a"
+      size="32"
+      style={
+        Object {
+          "marginRight": 16,
+        }
+      }
+      testID="cell-account-avatar"
+      type="JazzIcon"
+    />
+    <View
+      style={
+        Object {
+          "alignItems": "flex-start",
+          "flex": 1,
+        }
+      }
+    >
+      <BaseText
+        numberOfLines={1}
+        testID="cell-account-title"
+        variant="sHeadingSMRegular"
+      >
+        Orangefox.eth
+      </BaseText>
+    </View>
+  </View>
+</CellContainerSelectOption>
+`;
+
+exports[`CellAccount - Snapshot should render label when given 1`] = `
+<CellContainerSelectOption
+  isSelected={false}
+  onPress={[Function]}
+  style={Object {}}
+  testID="cell-account-single-select"
+>
+  <View
+    style={
+      Object {
+        "flexDirection": "row",
+      }
+    }
+  >
+    <AccountAvatar
+      accountAddress="0x2990079bcdEe240329a520d2444386FC119da21a"
+      size="32"
+      style={
+        Object {
+          "marginRight": 16,
+        }
+      }
+      testID="cell-account-avatar"
+      type="JazzIcon"
+    />
+    <View
+      style={
+        Object {
+          "alignItems": "flex-start",
+          "flex": 1,
+        }
+      }
+    >
+      <BaseText
+        numberOfLines={1}
+        testID="cell-account-title"
+        variant="sHeadingSMRegular"
+      >
+        Orangefox.eth
+      </BaseText>
+      <Tag
+        label="Imported"
+        style={
+          Object {
+            "marginTop": 4,
+          }
+        }
+        testID="cell-account-label"
+      />
+    </View>
+  </View>
+</CellContainerSelectOption>
+`;
+
+exports[`CellAccount - Snapshot should render secondaryText when given 1`] = `
+<CellContainerSelectOption
+  isSelected={false}
+  onPress={[Function]}
+  style={Object {}}
+  testID="cell-account-single-select"
+>
+  <View
+    style={
+      Object {
+        "flexDirection": "row",
+      }
+    }
+  >
+    <AccountAvatar
+      accountAddress="0x2990079bcdEe240329a520d2444386FC119da21a"
+      size="32"
+      style={
+        Object {
+          "marginRight": 16,
+        }
+      }
+      testID="cell-account-avatar"
+      type="JazzIcon"
+    />
+    <View
+      style={
+        Object {
+          "alignItems": "flex-start",
+          "flex": 1,
+        }
+      }
+    >
+      <BaseText
+        numberOfLines={1}
+        testID="cell-account-title"
+        variant="sHeadingSMRegular"
+      >
+        Orangefox.eth
+      </BaseText>
+      <BaseText
+        numberOfLines={1}
+        style={
+          Object {
+            "color": "#535A61",
+          }
+        }
+        testID="cell-account-secondary-text"
+        variant="sBodyMD"
+      >
+        0x2990079bcdEe240329a520d2444386FC119da21a
+      </BaseText>
+    </View>
+  </View>
+</CellContainerSelectOption>
+`;
+
+exports[`CellAccount - Snapshot should render tertiaryText when given 1`] = `
+<CellContainerSelectOption
+  isSelected={false}
+  onPress={[Function]}
+  style={Object {}}
+  testID="cell-account-single-select"
+>
+  <View
+    style={
+      Object {
+        "flexDirection": "row",
+      }
+    }
+  >
+    <AccountAvatar
+      accountAddress="0x2990079bcdEe240329a520d2444386FC119da21a"
+      size="32"
+      style={
+        Object {
+          "marginRight": 16,
+        }
+      }
+      testID="cell-account-avatar"
+      type="JazzIcon"
+    />
+    <View
+      style={
+        Object {
+          "alignItems": "flex-start",
+          "flex": 1,
+        }
+      }
+    >
+      <BaseText
+        numberOfLines={1}
+        testID="cell-account-title"
+        variant="sHeadingSMRegular"
+      >
+        Orangefox.eth
+      </BaseText>
+      <BaseText
+        numberOfLines={1}
+        style={
+          Object {
+            "color": "#535A61",
+          }
+        }
+        testID="cell-account-tertiary-text"
+        variant="sBodyMD"
+      >
+        Updated 1 sec ago
+      </BaseText>
+    </View>
+  </View>
+</CellContainerSelectOption>
+`;
+
+exports[`CellAccount - Snapshot should render the proper multiselect when isMultiSelect is true 1`] = `
+<CellContainerMultiSelectItem
+  isSelected={false}
+  onPress={[Function]}
+  style={Object {}}
+  testID="cell-account-multi-select"
+>
+  <View
+    style={
+      Object {
+        "flexDirection": "row",
+      }
+    }
+  >
+    <AccountAvatar
+      accountAddress="0x2990079bcdEe240329a520d2444386FC119da21a"
+      size="32"
+      style={
+        Object {
+          "marginRight": 16,
+        }
+      }
+      testID="cell-account-avatar"
+      type="JazzIcon"
+    />
+    <View
+      style={
+        Object {
+          "alignItems": "flex-start",
+          "flex": 1,
+        }
+      }
+    >
+      <BaseText
+        numberOfLines={1}
+        testID="cell-account-title"
+        variant="sHeadingSMRegular"
+      >
+        Orangefox.eth
+      </BaseText>
+    </View>
+  </View>
+</CellContainerMultiSelectItem>
+`;
+
+exports[`CellAccount - Snapshot should render the proper selected state 1`] = `
+<CellContainerSelectOption
+  isSelected={true}
+  onPress={[Function]}
+  style={Object {}}
+  testID="cell-account-single-select"
+>
+  <View
+    style={
+      Object {
+        "flexDirection": "row",
+      }
+    }
+  >
+    <AccountAvatar
+      accountAddress="0x2990079bcdEe240329a520d2444386FC119da21a"
+      size="32"
+      style={
+        Object {
+          "marginRight": 16,
+        }
+      }
+      testID="cell-account-avatar"
+      type="JazzIcon"
+    />
+    <View
+      style={
+        Object {
+          "alignItems": "flex-start",
+          "flex": 1,
+        }
+      }
+    >
+      <BaseText
+        numberOfLines={1}
+        testID="cell-account-title"
+        variant="sHeadingSMRegular"
+      >
+        Orangefox.eth
+      </BaseText>
+    </View>
+  </View>
+</CellContainerSelectOption>
+`;
diff --git a/app/component-library/components/CellAccount/index.ts b/app/component-library/components/CellAccount/index.ts
new file mode 100644
index 00000000000..7edd9c45ec4
--- /dev/null
+++ b/app/component-library/components/CellAccount/index.ts
@@ -0,0 +1 @@
+export { default } from './Cell';
diff --git a/app/component-library/components/CellContainerMultiSelectItem/CellContainerMultiSelectItem.constants.tsx b/app/component-library/components/CellContainerMultiSelectItem/CellContainerMultiSelectItem.constants.tsx
new file mode 100644
index 00000000000..8631fc469b9
--- /dev/null
+++ b/app/component-library/components/CellContainerMultiSelectItem/CellContainerMultiSelectItem.constants.tsx
@@ -0,0 +1,5 @@
+// eslint-disable-next-line import/prefer-default-export
+export const CELL_CONTAINER_MULTISELECT_ITEM_SELECTED_VIEW_TEST_ID =
+  'cell-container-multiselect-item-selected-view';
+export const CELL_CONTAINER_MULTISELECT_ITEM_CHECKBOX_TEST_ID =
+  'cell-container-multiselect-item-checkbox';
diff --git a/app/component-library/components/MultiselectListItem/MultiselectListItem.stories.tsx b/app/component-library/components/CellContainerMultiSelectItem/CellContainerMultiSelectItem.stories.tsx
similarity index 78%
rename from app/component-library/components/MultiselectListItem/MultiselectListItem.stories.tsx
rename to app/component-library/components/CellContainerMultiSelectItem/CellContainerMultiSelectItem.stories.tsx
index 3f68e80de12..8986224db9e 100644
--- a/app/component-library/components/MultiselectListItem/MultiselectListItem.stories.tsx
+++ b/app/component-library/components/CellContainerMultiSelectItem/CellContainerMultiSelectItem.stories.tsx
@@ -1,17 +1,17 @@
 /* eslint-disable no-console, react-native/no-inline-styles */
 import React, { useState } from 'react';
 import { storiesOf } from '@storybook/react-native';
-import MultiselectListItem from './MultiselectListItem';
+import CellContainerMultiSelectItem from './CellContainerMultiSelectItem';
 import { boolean } from '@storybook/addon-knobs';
 import { View } from 'react-native';
 import { mockTheme } from '../../../util/theme';
 import BaseText, { BaseTextVariant } from '../BaseText';
 
-const MultiselectListItemExample = () => {
+const CellContainerMultiSelectItemExample = () => {
   const [data, setData] = useState([true, true, false]);
 
   const renderItem = (isSelected: boolean, index: number) => (
-    <MultiselectListItem
+    <CellContainerMultiSelectItem
       onPress={() => {
         const newData = [...data];
         newData[index] = !isSelected;
@@ -33,20 +33,20 @@ const MultiselectListItemExample = () => {
           {'Wrapped Content'}
         </BaseText>
       </View>
-    </MultiselectListItem>
+    </CellContainerMultiSelectItem>
   );
 
   return <React.Fragment>{data.map(renderItem)}</React.Fragment>;
 };
 
-storiesOf('Component Library / MultiselectListItem', module)
+storiesOf('Component Library / CellContainerMultiSelectItem', module)
   .addDecorator((getStory) => getStory())
   .add('Default', () => {
     const groupId = 'Props';
     const selectedSelector = boolean('isSelected', false, groupId);
 
     return (
-      <MultiselectListItem isSelected={selectedSelector}>
+      <CellContainerMultiSelectItem isSelected={selectedSelector}>
         <View
           style={{
             height: 50,
@@ -60,7 +60,7 @@ storiesOf('Component Library / MultiselectListItem', module)
             {'Wrapped Content'}
           </BaseText>
         </View>
-      </MultiselectListItem>
+      </CellContainerMultiSelectItem>
     );
   })
-  .add('Multilist', () => <MultiselectListItemExample />);
+  .add('Multilist', () => <CellContainerMultiSelectItemExample />);
diff --git a/app/component-library/components/CellContainerMultiSelectItem/CellContainerMultiSelectItem.styles.ts b/app/component-library/components/CellContainerMultiSelectItem/CellContainerMultiSelectItem.styles.ts
new file mode 100644
index 00000000000..34784624b0c
--- /dev/null
+++ b/app/component-library/components/CellContainerMultiSelectItem/CellContainerMultiSelectItem.styles.ts
@@ -0,0 +1,55 @@
+import { StyleSheet, ViewStyle } from 'react-native';
+import { Theme } from '../../../util/theme/models';
+import { CellContainerMultiSelectItemStyleSheetVars } from './CellContainerMultiSelectItem.types';
+
+/**
+ * Style sheet function for CellContainerMultiSelectItem component.
+ *
+ * @param params Style sheet params.
+ * @param params.theme App theme from ThemeContext.
+ * @param params.vars Inputs that the style sheet depends on.
+ * @returns StyleSheet object.
+ */
+const styleSheet = (params: {
+  theme: Theme;
+  vars: CellContainerMultiSelectItemStyleSheetVars;
+}) => {
+  const { vars, theme } = params;
+  const { style } = vars;
+  const { colors } = theme;
+
+  return StyleSheet.create({
+    base: Object.assign(
+      {
+        position: 'relative',
+        padding: 16,
+        borderRadius: 4,
+        backgroundColor: colors.background.default,
+        zIndex: 100,
+      } as ViewStyle,
+      style,
+    ) as ViewStyle,
+    selectedView: {
+      position: 'absolute',
+      flexDirection: 'row',
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+      backgroundColor: colors.primary.muted,
+      zIndex: 200,
+    },
+    checkbox: {
+      marginRight: 10,
+    },
+    contentContainer: {
+      zIndex: 300,
+      flexDirection: 'row',
+    },
+    childrenContainer: {
+      flex: 1,
+    },
+  });
+};
+
+export default styleSheet;
diff --git a/app/component-library/components/CellContainerMultiSelectItem/CellContainerMultiSelectItem.test.tsx b/app/component-library/components/CellContainerMultiSelectItem/CellContainerMultiSelectItem.test.tsx
new file mode 100644
index 00000000000..9c76a9d2914
--- /dev/null
+++ b/app/component-library/components/CellContainerMultiSelectItem/CellContainerMultiSelectItem.test.tsx
@@ -0,0 +1,99 @@
+// 3rd library dependencies
+import React from 'react';
+import { View } from 'react-native';
+import { shallow } from 'enzyme';
+
+// External dependencies
+import { useAppThemeFromContext } from '../../../util/theme';
+
+// Internal dependencies
+import CellContainerMultiSelectItem from './CellContainerMultiSelectItem';
+import {
+  CELL_CONTAINER_MULTISELECT_ITEM_SELECTED_VIEW_TEST_ID,
+  CELL_CONTAINER_MULTISELECT_ITEM_CHECKBOX_TEST_ID,
+} from './CellContainerMultiSelectItem.constants';
+
+// eslint-disable-next-line react-hooks/rules-of-hooks
+const themeDesignTokens = useAppThemeFromContext();
+
+describe('CellContainerMultiSelectItem - Snapshot', () => {
+  it('should render default settings correctly', () => {
+    const wrapper = shallow(
+      <CellContainerMultiSelectItem isSelected={false}>
+        <View />
+      </CellContainerMultiSelectItem>,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('should render the proper select state when isSelected is true', () => {
+    const wrapper = shallow(
+      <CellContainerMultiSelectItem isSelected>
+        <View />
+      </CellContainerMultiSelectItem>,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+});
+
+describe('CellContainerMultiSelectItem', () => {
+  it('should have a checked checkbox when selected', () => {
+    const wrapper = shallow(
+      <CellContainerMultiSelectItem isSelected>
+        <View />
+      </CellContainerMultiSelectItem>,
+    );
+    const checkboxComponent = wrapper.findWhere(
+      (node) =>
+        node.prop('testID') ===
+        CELL_CONTAINER_MULTISELECT_ITEM_CHECKBOX_TEST_ID,
+    );
+    const isSelected = checkboxComponent.props().isSelected;
+    expect(isSelected).toBe(true);
+  });
+
+  it('should be highlighted when selected', () => {
+    const wrapper = shallow(
+      <CellContainerMultiSelectItem isSelected>
+        <View />
+      </CellContainerMultiSelectItem>,
+    );
+    const cellContainer = wrapper.findWhere(
+      (node) =>
+        node.prop('testID') ===
+        CELL_CONTAINER_MULTISELECT_ITEM_SELECTED_VIEW_TEST_ID,
+    );
+    expect(cellContainer.exists()).toBe(true);
+    expect(cellContainer.props().style.backgroundColor).toBe(
+      themeDesignTokens.colors.primary.muted,
+    );
+  });
+
+  it('should not have a checked checkbox when not selected', () => {
+    const wrapper = shallow(
+      <CellContainerMultiSelectItem isSelected={false}>
+        <View />
+      </CellContainerMultiSelectItem>,
+    );
+    const checkboxComponent = wrapper.findWhere(
+      (node) =>
+        node.prop('testID') ===
+        CELL_CONTAINER_MULTISELECT_ITEM_CHECKBOX_TEST_ID,
+    );
+    const isSelected = checkboxComponent.props().isSelected;
+    expect(isSelected).toBe(false);
+  });
+
+  it('should not be highlighted when not selected', () => {
+    const wrapper = shallow(
+      <CellContainerMultiSelectItem isSelected={false}>
+        <View />
+      </CellContainerMultiSelectItem>,
+    );
+    const cellContainer = wrapper.findWhere(
+      (node) =>
+        node.prop('testID') ===
+        CELL_CONTAINER_MULTISELECT_ITEM_SELECTED_VIEW_TEST_ID,
+    );
+    expect(cellContainer.exists()).toBe(false);
+  });
+});
diff --git a/app/component-library/components/CellContainerMultiSelectItem/CellContainerMultiSelectItem.tsx b/app/component-library/components/CellContainerMultiSelectItem/CellContainerMultiSelectItem.tsx
new file mode 100644
index 00000000000..8f5082c16b9
--- /dev/null
+++ b/app/component-library/components/CellContainerMultiSelectItem/CellContainerMultiSelectItem.tsx
@@ -0,0 +1,42 @@
+/* eslint-disable react/prop-types */
+// 3rd library dependencies
+import React from 'react';
+import { TouchableOpacity, View } from 'react-native';
+
+// External dependencies
+import { useStyles } from '../../hooks';
+import Checkbox from '../Checkbox';
+
+// Internal dependencies
+import styleSheet from './CellContainerMultiSelectItem.styles';
+import { CellContainerMultiSelectItemProps } from './CellContainerMultiSelectItem.types';
+import {
+  CELL_CONTAINER_MULTISELECT_ITEM_SELECTED_VIEW_TEST_ID,
+  CELL_CONTAINER_MULTISELECT_ITEM_CHECKBOX_TEST_ID,
+} from './CellContainerMultiSelectItem.constants';
+
+const CellContainerMultiSelectItem: React.FC<CellContainerMultiSelectItemProps> =
+  ({ style, isSelected, children, ...props }) => {
+    const { styles } = useStyles(styleSheet, { style, isSelected });
+
+    return (
+      <TouchableOpacity style={styles.base} {...props}>
+        {isSelected && (
+          <View
+            style={styles.selectedView}
+            testID={CELL_CONTAINER_MULTISELECT_ITEM_SELECTED_VIEW_TEST_ID}
+          />
+        )}
+        <View style={styles.contentContainer}>
+          <Checkbox
+            style={styles.checkbox}
+            isSelected={isSelected}
+            testID={CELL_CONTAINER_MULTISELECT_ITEM_CHECKBOX_TEST_ID}
+          />
+          <View style={styles.childrenContainer}>{children}</View>
+        </View>
+      </TouchableOpacity>
+    );
+  };
+
+export default CellContainerMultiSelectItem;
diff --git a/app/component-library/components/MultiselectListItem/MultiselectListItem.types.ts b/app/component-library/components/CellContainerMultiSelectItem/CellContainerMultiSelectItem.types.ts
similarity index 55%
rename from app/component-library/components/MultiselectListItem/MultiselectListItem.types.ts
rename to app/component-library/components/CellContainerMultiSelectItem/CellContainerMultiSelectItem.types.ts
index 5b2ae4ff4d0..b152f469e7b 100644
--- a/app/component-library/components/MultiselectListItem/MultiselectListItem.types.ts
+++ b/app/component-library/components/CellContainerMultiSelectItem/CellContainerMultiSelectItem.types.ts
@@ -1,9 +1,10 @@
 import { StyleProp, TouchableOpacityProps, ViewStyle } from 'react-native';
 
 /**
- * MultiselectListItem component props.
+ * CellContainerMultiSelectItem component props.
  */
-export interface MultiselectListItemProps extends TouchableOpacityProps {
+export interface CellContainerMultiSelectItemProps
+  extends TouchableOpacityProps {
   /**
    * Determines if checkbox is selected.
    */
@@ -18,18 +19,10 @@ export interface MultiselectListItemProps extends TouchableOpacityProps {
   children: React.ReactNode;
 }
 
-/**
- * MultiselectListItem component style sheet.
- */
-export interface MultiselectListItemStyleSheet {
-  base: ViewStyle;
-  checkbox: ViewStyle;
-}
-
 /**
  * Style sheet input parameters.
  */
-export type MultiselectListItemStyleSheetVars = Pick<
-  MultiselectListItemProps,
+export type CellContainerMultiSelectItemStyleSheetVars = Pick<
+  CellContainerMultiSelectItemProps,
   'style' | 'isSelected'
 >;
diff --git a/app/component-library/components/MultiselectListItem/README.md b/app/component-library/components/CellContainerMultiSelectItem/README.md
similarity index 88%
rename from app/component-library/components/MultiselectListItem/README.md
rename to app/component-library/components/CellContainerMultiSelectItem/README.md
index 865905273ac..ab36916e39c 100644
--- a/app/component-library/components/MultiselectListItem/README.md
+++ b/app/component-library/components/CellContainerMultiSelectItem/README.md
@@ -1,6 +1,6 @@
-# MultiselectListItem
+# CellContainerMultiSelectItem
 
-MultiselectListItem is a wrapper component typically used for multi-select scenarios.
+CellContainerMultiSelectItem is a wrapper component typically used for multi-select scenarios.
 
 ## Props
 
diff --git a/app/component-library/components/CellContainerMultiSelectItem/__snapshots__/CellContainerMultiSelectItem.test.tsx.snap b/app/component-library/components/CellContainerMultiSelectItem/__snapshots__/CellContainerMultiSelectItem.test.tsx.snap
new file mode 100644
index 00000000000..d2dcff28ec4
--- /dev/null
+++ b/app/component-library/components/CellContainerMultiSelectItem/__snapshots__/CellContainerMultiSelectItem.test.tsx.snap
@@ -0,0 +1,100 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CellContainerMultiSelectItem - Snapshot should render default settings correctly 1`] = `
+<TouchableOpacity
+  style={
+    Object {
+      "backgroundColor": "#FFFFFF",
+      "borderRadius": 4,
+      "padding": 16,
+      "position": "relative",
+      "zIndex": 100,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "flexDirection": "row",
+        "zIndex": 300,
+      }
+    }
+  >
+    <Checkbox
+      isSelected={false}
+      style={
+        Object {
+          "marginRight": 10,
+        }
+      }
+      testID="cell-container-multiselect-item-checkbox"
+    />
+    <View
+      style={
+        Object {
+          "flex": 1,
+        }
+      }
+    >
+      <View />
+    </View>
+  </View>
+</TouchableOpacity>
+`;
+
+exports[`CellContainerMultiSelectItem - Snapshot should render the proper select state when isSelected is true 1`] = `
+<TouchableOpacity
+  style={
+    Object {
+      "backgroundColor": "#FFFFFF",
+      "borderRadius": 4,
+      "padding": 16,
+      "position": "relative",
+      "zIndex": 100,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "backgroundColor": "#037DD619",
+        "bottom": 0,
+        "flexDirection": "row",
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+        "zIndex": 200,
+      }
+    }
+    testID="cell-container-multiselect-item-selected-view"
+  />
+  <View
+    style={
+      Object {
+        "flexDirection": "row",
+        "zIndex": 300,
+      }
+    }
+  >
+    <Checkbox
+      isSelected={true}
+      style={
+        Object {
+          "marginRight": 10,
+        }
+      }
+      testID="cell-container-multiselect-item-checkbox"
+    />
+    <View
+      style={
+        Object {
+          "flex": 1,
+        }
+      }
+    >
+      <View />
+    </View>
+  </View>
+</TouchableOpacity>
+`;
diff --git a/app/component-library/components/CellContainerMultiSelectItem/index.ts b/app/component-library/components/CellContainerMultiSelectItem/index.ts
new file mode 100644
index 00000000000..3258bd57afb
--- /dev/null
+++ b/app/component-library/components/CellContainerMultiSelectItem/index.ts
@@ -0,0 +1 @@
+export { default } from './CellContainerMultiSelectItem';
diff --git a/app/component-library/components/CellContainerSelectItem/CellContainerSelectItem.constants.tsx b/app/component-library/components/CellContainerSelectItem/CellContainerSelectItem.constants.tsx
new file mode 100644
index 00000000000..3674bb2b7a0
--- /dev/null
+++ b/app/component-library/components/CellContainerSelectItem/CellContainerSelectItem.constants.tsx
@@ -0,0 +1,3 @@
+// eslint-disable-next-line import/prefer-default-export
+export const CELL_CONTAINER_SELECT_ITEM_SELECTED_VIEW_TEST_ID =
+  'cell-container-select-item-selected-view';
diff --git a/app/component-library/components/SelectableListItem/SelectableListItem.stories.tsx b/app/component-library/components/CellContainerSelectItem/CellContainerSelectItem.stories.tsx
similarity index 79%
rename from app/component-library/components/SelectableListItem/SelectableListItem.stories.tsx
rename to app/component-library/components/CellContainerSelectItem/CellContainerSelectItem.stories.tsx
index 3f716cef9e3..be44bffa627 100644
--- a/app/component-library/components/SelectableListItem/SelectableListItem.stories.tsx
+++ b/app/component-library/components/CellContainerSelectItem/CellContainerSelectItem.stories.tsx
@@ -1,17 +1,17 @@
 /* eslint-disable no-console, react-native/no-inline-styles */
 import React, { useState } from 'react';
 import { storiesOf } from '@storybook/react-native';
-import SelectableListItem from './SelectableListItem';
+import CellContainerSelectItem from './CellContainerSelectItem';
 import { boolean } from '@storybook/addon-knobs';
 import { View } from 'react-native';
 import { mockTheme } from '../../../util/theme';
 import BaseText, { BaseTextVariant } from '../BaseText';
 
-const SelectableListItemExample = () => {
+const CellContainerSelectItemExample = () => {
   const [selectedIndex, setSelectedIndex] = useState(0);
 
   const renderItem = (item: number) => (
-    <SelectableListItem
+    <CellContainerSelectItem
       onPress={() => setSelectedIndex(item)}
       key={`item-${item}`}
       isSelected={item === selectedIndex}
@@ -28,20 +28,20 @@ const SelectableListItemExample = () => {
           {'Wrapped Content'}
         </BaseText>
       </View>
-    </SelectableListItem>
+    </CellContainerSelectItem>
   );
 
   return <React.Fragment>{[0, 1, 2].map(renderItem)}</React.Fragment>;
 };
 
-storiesOf('Component Library / SelectableListItem', module)
+storiesOf('Component Library / CellContainerSelectItem', module)
   .addDecorator((getStory) => getStory())
   .add('Default', () => {
     const groupId = 'Props';
     const selectedSelector = boolean('isSelected', false, groupId);
 
     return (
-      <SelectableListItem isSelected={selectedSelector}>
+      <CellContainerSelectItem isSelected={selectedSelector}>
         <View
           style={{
             height: 50,
@@ -54,7 +54,7 @@ storiesOf('Component Library / SelectableListItem', module)
             {'Wrapped Content'}
           </BaseText>
         </View>
-      </SelectableListItem>
+      </CellContainerSelectItem>
     );
   })
-  .add('List', () => <SelectableListItemExample />);
+  .add('List', () => <CellContainerSelectItemExample />);
diff --git a/app/component-library/components/SelectableListItem/SelectableListItem.styles.ts b/app/component-library/components/CellContainerSelectItem/CellContainerSelectItem.styles.ts
similarity index 54%
rename from app/component-library/components/SelectableListItem/SelectableListItem.styles.ts
rename to app/component-library/components/CellContainerSelectItem/CellContainerSelectItem.styles.ts
index e2a7e9415ed..0a5c5a384ba 100644
--- a/app/component-library/components/SelectableListItem/SelectableListItem.styles.ts
+++ b/app/component-library/components/CellContainerSelectItem/CellContainerSelectItem.styles.ts
@@ -1,12 +1,9 @@
 import { StyleSheet, ViewStyle } from 'react-native';
 import { Theme } from '../../../util/theme/models';
-import {
-  SelectableListItemStyleSheet,
-  SelectableListItemStyleSheetVars,
-} from './SelectableListItem.types';
+import { CellContainerSelectItemStyleSheetVars } from './CellContainerSelectItem.types';
 
 /**
- * Style sheet function for SelectableListItem component.
+ * Style sheet function for CellContainerSelectItem component.
  *
  * @param params Style sheet params.
  * @param params.theme App theme from ThemeContext.
@@ -15,17 +12,31 @@ import {
  */
 const styleSheet = (params: {
   theme: Theme;
-  vars: SelectableListItemStyleSheetVars;
-}): SelectableListItemStyleSheet => {
+  vars: CellContainerSelectItemStyleSheetVars;
+}) => {
   const { vars, theme } = params;
   const { colors } = theme;
   const { style } = vars;
   return StyleSheet.create({
-    base: Object.assign({} as ViewStyle, style) as ViewStyle,
-    overlay: {
-      ...StyleSheet.absoluteFillObject,
+    base: Object.assign(
+      {
+        position: 'relative',
+        padding: 16,
+        borderRadius: 4,
+        backgroundColor: colors.background.default,
+        zIndex: 100,
+      } as ViewStyle,
+      style,
+    ) as ViewStyle,
+    selectedView: {
+      position: 'absolute',
       flexDirection: 'row',
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
       backgroundColor: colors.primary.muted,
+      zIndex: 200,
     },
     verticalBar: {
       marginVertical: 4,
@@ -34,6 +45,9 @@ const styleSheet = (params: {
       borderRadius: 2,
       backgroundColor: colors.primary.default,
     },
+    contentContainer: {
+      zIndex: 300,
+    },
   });
 };
 
diff --git a/app/component-library/components/CellContainerSelectItem/CellContainerSelectItem.test.tsx b/app/component-library/components/CellContainerSelectItem/CellContainerSelectItem.test.tsx
new file mode 100644
index 00000000000..6c4ac91b97f
--- /dev/null
+++ b/app/component-library/components/CellContainerSelectItem/CellContainerSelectItem.test.tsx
@@ -0,0 +1,66 @@
+// 3rd library dependencies
+import React from 'react';
+import { View } from 'react-native';
+import { shallow } from 'enzyme';
+
+// External dependencies
+import { useAppThemeFromContext } from '../../../util/theme';
+
+// Internal dependencies
+import CellContainerSelectItem from './CellContainerSelectItem';
+import { CELL_CONTAINER_SELECT_ITEM_SELECTED_VIEW_TEST_ID } from './CellContainerSelectItem.constants';
+
+// eslint-disable-next-line react-hooks/rules-of-hooks
+const themeDesignTokens = useAppThemeFromContext();
+
+describe('CellContainerSelectItem - Snapshot', () => {
+  it('should render default settings correctly', () => {
+    const wrapper = shallow(
+      <CellContainerSelectItem isSelected={false}>
+        <View />
+      </CellContainerSelectItem>,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('should render the proper select state when isSelected is true', () => {
+    const wrapper = shallow(
+      <CellContainerSelectItem isSelected>
+        <View />
+      </CellContainerSelectItem>,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+});
+
+describe('CellContainerSelectItem', () => {
+  it('should be highlighted when selected', () => {
+    const wrapper = shallow(
+      <CellContainerSelectItem isSelected>
+        <View />
+      </CellContainerSelectItem>,
+    );
+    const cellContainer = wrapper.findWhere(
+      (node) =>
+        node.prop('testID') ===
+        CELL_CONTAINER_SELECT_ITEM_SELECTED_VIEW_TEST_ID,
+    );
+    expect(cellContainer.exists()).toBe(true);
+    expect(cellContainer.props().style.backgroundColor).toBe(
+      themeDesignTokens.colors.primary.muted,
+    );
+  });
+
+  it('should not be highlighted when not selected', () => {
+    const wrapper = shallow(
+      <CellContainerSelectItem isSelected={false}>
+        <View />
+      </CellContainerSelectItem>,
+    );
+    const cellContainer = wrapper.findWhere(
+      (node) =>
+        node.prop('testID') ===
+        CELL_CONTAINER_SELECT_ITEM_SELECTED_VIEW_TEST_ID,
+    );
+    expect(cellContainer.exists()).toBe(false);
+  });
+});
diff --git a/app/component-library/components/CellContainerSelectItem/CellContainerSelectItem.tsx b/app/component-library/components/CellContainerSelectItem/CellContainerSelectItem.tsx
new file mode 100644
index 00000000000..0a85d761a80
--- /dev/null
+++ b/app/component-library/components/CellContainerSelectItem/CellContainerSelectItem.tsx
@@ -0,0 +1,37 @@
+/* eslint-disable react/prop-types */
+// 3rd library dependencies
+import React from 'react';
+import { TouchableOpacity, View } from 'react-native';
+
+// External dependencies
+import { useStyles } from '../../hooks';
+
+// Internal dependencies
+import styleSheet from './CellContainerSelectItem.styles';
+import { CellContainerSelectItemProps } from './CellContainerSelectItem.types';
+import { CELL_CONTAINER_SELECT_ITEM_SELECTED_VIEW_TEST_ID } from './CellContainerSelectItem.constants';
+
+const CellContainerSelectOption: React.FC<CellContainerSelectItemProps> = ({
+  style,
+  isSelected,
+  children,
+  ...props
+}) => {
+  const { styles } = useStyles(styleSheet, { style, isSelected });
+
+  return (
+    <TouchableOpacity style={styles.base} {...props}>
+      {isSelected && (
+        <View
+          style={styles.selectedView}
+          testID={CELL_CONTAINER_SELECT_ITEM_SELECTED_VIEW_TEST_ID}
+        >
+          <View style={styles.verticalBar} />
+        </View>
+      )}
+      <View style={styles.contentContainer}>{children}</View>
+    </TouchableOpacity>
+  );
+};
+
+export default CellContainerSelectOption;
diff --git a/app/component-library/components/SelectableListItem/SelectableListItem.types.ts b/app/component-library/components/CellContainerSelectItem/CellContainerSelectItem.types.ts
similarity index 54%
rename from app/component-library/components/SelectableListItem/SelectableListItem.types.ts
rename to app/component-library/components/CellContainerSelectItem/CellContainerSelectItem.types.ts
index b9ffd6014c3..7fc9ce6acc4 100644
--- a/app/component-library/components/SelectableListItem/SelectableListItem.types.ts
+++ b/app/component-library/components/CellContainerSelectItem/CellContainerSelectItem.types.ts
@@ -1,9 +1,9 @@
 import { StyleProp, TouchableOpacityProps, ViewStyle } from 'react-native';
 
 /**
- * SelectableListItem component props.
+ * CellContainerSelectItem component props.
  */
-export interface SelectableListItemProps extends TouchableOpacityProps {
+export interface CellContainerSelectItemProps extends TouchableOpacityProps {
   /**
    * Determines if checkbox is selected.
    */
@@ -18,19 +18,10 @@ export interface SelectableListItemProps extends TouchableOpacityProps {
   children: React.ReactNode;
 }
 
-/**
- * SelectableListItem component style sheet.
- */
-export interface SelectableListItemStyleSheet {
-  base: ViewStyle;
-  overlay: ViewStyle;
-  verticalBar: ViewStyle;
-}
-
 /**
  * Style sheet input parameters.
  */
-export type SelectableListItemStyleSheetVars = Pick<
-  SelectableListItemProps,
+export type CellContainerSelectItemStyleSheetVars = Pick<
+  CellContainerSelectItemProps,
   'style' | 'isSelected'
 >;
diff --git a/app/component-library/components/SelectableListItem/README.md b/app/component-library/components/CellContainerSelectItem/README.md
similarity index 88%
rename from app/component-library/components/SelectableListItem/README.md
rename to app/component-library/components/CellContainerSelectItem/README.md
index c3bf9ca09e4..32df8dace61 100644
--- a/app/component-library/components/SelectableListItem/README.md
+++ b/app/component-library/components/CellContainerSelectItem/README.md
@@ -1,6 +1,6 @@
-# SelectableListItem
+# CellContainerSelectItem
 
-SelectableListItem is a wrapper component typically used for item selection scenarios.
+CellContainerSelectItem is a wrapper component typically used for item selection scenarios.
 
 ## Props
 
diff --git a/app/component-library/components/CellContainerSelectItem/__snapshots__/CellContainerSelectItem.test.tsx.snap b/app/component-library/components/CellContainerSelectItem/__snapshots__/CellContainerSelectItem.test.tsx.snap
new file mode 100644
index 00000000000..3e9287bf9a7
--- /dev/null
+++ b/app/component-library/components/CellContainerSelectItem/__snapshots__/CellContainerSelectItem.test.tsx.snap
@@ -0,0 +1,76 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CellContainerSelectItem - Snapshot should render default settings correctly 1`] = `
+<TouchableOpacity
+  style={
+    Object {
+      "backgroundColor": "#FFFFFF",
+      "borderRadius": 4,
+      "padding": 16,
+      "position": "relative",
+      "zIndex": 100,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "zIndex": 300,
+      }
+    }
+  >
+    <View />
+  </View>
+</TouchableOpacity>
+`;
+
+exports[`CellContainerSelectItem - Snapshot should render the proper select state when isSelected is true 1`] = `
+<TouchableOpacity
+  style={
+    Object {
+      "backgroundColor": "#FFFFFF",
+      "borderRadius": 4,
+      "padding": 16,
+      "position": "relative",
+      "zIndex": 100,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "backgroundColor": "#037DD619",
+        "bottom": 0,
+        "flexDirection": "row",
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+        "zIndex": 200,
+      }
+    }
+    testID="cell-container-select-item-selected-view"
+  >
+    <View
+      style={
+        Object {
+          "backgroundColor": "#037DD6",
+          "borderRadius": 2,
+          "marginLeft": 4,
+          "marginVertical": 4,
+          "width": 4,
+        }
+      }
+    />
+  </View>
+  <View
+    style={
+      Object {
+        "zIndex": 300,
+      }
+    }
+  >
+    <View />
+  </View>
+</TouchableOpacity>
+`;
diff --git a/app/component-library/components/CellContainerSelectItem/index.ts b/app/component-library/components/CellContainerSelectItem/index.ts
new file mode 100644
index 00000000000..3c296be038b
--- /dev/null
+++ b/app/component-library/components/CellContainerSelectItem/index.ts
@@ -0,0 +1 @@
+export { default } from './CellContainerSelectItem';
diff --git a/app/component-library/components/MultiselectListItem/MultiselectListItem.styles.ts b/app/component-library/components/MultiselectListItem/MultiselectListItem.styles.ts
deleted file mode 100644
index 9ccb0b0b7ba..00000000000
--- a/app/component-library/components/MultiselectListItem/MultiselectListItem.styles.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { StyleSheet, ViewStyle } from 'react-native';
-import {
-  MultiselectListItemStyleSheet,
-  MultiselectListItemStyleSheetVars,
-} from './MultiselectListItem.types';
-
-/**
- * Style sheet function for MultiselectListItem component.
- *
- * @param params Style sheet params.
- * @param params.theme App theme from ThemeContext.
- * @param params.vars Inputs that the style sheet depends on.
- * @returns StyleSheet object.
- */
-const styleSheet = (params: {
-  vars: MultiselectListItemStyleSheetVars;
-}): MultiselectListItemStyleSheet => {
-  const { vars } = params;
-  const { style } = vars;
-  return StyleSheet.create({
-    base: Object.assign(
-      {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingHorizontal: 16,
-      } as ViewStyle,
-      style,
-    ) as ViewStyle,
-    checkbox: {
-      marginRight: 16,
-    },
-  });
-};
-
-export default styleSheet;
diff --git a/app/component-library/components/MultiselectListItem/MultiselectListItem.test.tsx b/app/component-library/components/MultiselectListItem/MultiselectListItem.test.tsx
deleted file mode 100644
index 73f16d96b89..00000000000
--- a/app/component-library/components/MultiselectListItem/MultiselectListItem.test.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import { shallow } from 'enzyme';
-import MultiselectListItem from './MultiselectListItem';
-
-describe('MultiselectListItem', () => {
-  it('should render correctly', () => {
-    const wrapper = shallow(
-      <MultiselectListItem isSelected>
-        <View />
-      </MultiselectListItem>,
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('should be checked when selected', () => {
-    const wrapper = shallow(
-      <MultiselectListItem isSelected>
-        <View />
-      </MultiselectListItem>,
-    );
-    const checkboxComponent = wrapper.childAt(0);
-    const isSelected = checkboxComponent.props().isSelected;
-    expect(isSelected).toBe(true);
-  });
-
-  it('should not be checked when not selected', () => {
-    const wrapper = shallow(
-      <MultiselectListItem isSelected={false}>
-        <View />
-      </MultiselectListItem>,
-    );
-    const checkboxComponent = wrapper.childAt(0);
-    const isSelected = checkboxComponent.props().isSelected;
-    expect(isSelected).toBe(false);
-  });
-});
diff --git a/app/component-library/components/MultiselectListItem/MultiselectListItem.tsx b/app/component-library/components/MultiselectListItem/MultiselectListItem.tsx
deleted file mode 100644
index 11432e378e4..00000000000
--- a/app/component-library/components/MultiselectListItem/MultiselectListItem.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from 'react';
-import { TouchableOpacity } from 'react-native';
-import { useStyles } from '../../hooks';
-import Checkbox from '../Checkbox';
-import styleSheet from './MultiselectListItem.styles';
-import { MultiselectListItemProps } from './MultiselectListItem.types';
-
-const MultiselectListItem: React.FC<MultiselectListItemProps> = ({
-  style,
-  isSelected,
-  children,
-  ...props
-}) => {
-  const { styles } = useStyles(styleSheet, { style, isSelected });
-
-  return (
-    <TouchableOpacity style={styles.base} {...props}>
-      <Checkbox style={styles.checkbox} isSelected={isSelected} />
-      {children}
-    </TouchableOpacity>
-  );
-};
-
-export default MultiselectListItem;
diff --git a/app/component-library/components/MultiselectListItem/__snapshots__/MultiselectListItem.test.tsx.snap b/app/component-library/components/MultiselectListItem/__snapshots__/MultiselectListItem.test.tsx.snap
deleted file mode 100644
index 3bb0bde5de5..00000000000
--- a/app/component-library/components/MultiselectListItem/__snapshots__/MultiselectListItem.test.tsx.snap
+++ /dev/null
@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MultiselectListItem should render correctly 1`] = `
-<TouchableOpacity
-  style={
-    Object {
-      "alignItems": "center",
-      "flexDirection": "row",
-      "paddingHorizontal": 16,
-    }
-  }
->
-  <Checkbox
-    isSelected={true}
-    style={
-      Object {
-        "marginRight": 16,
-      }
-    }
-  />
-  <View />
-</TouchableOpacity>
-`;
diff --git a/app/component-library/components/MultiselectListItem/index.ts b/app/component-library/components/MultiselectListItem/index.ts
deleted file mode 100644
index ccaaea28902..00000000000
--- a/app/component-library/components/MultiselectListItem/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './MultiselectListItem';
diff --git a/app/component-library/components/PickerAccount/PickerAccount.tsx b/app/component-library/components/PickerAccount/PickerAccount.tsx
index 08d68002eb8..96220e1e8fe 100644
--- a/app/component-library/components/PickerAccount/PickerAccount.tsx
+++ b/app/component-library/components/PickerAccount/PickerAccount.tsx
@@ -1,14 +1,19 @@
 /* eslint-disable react/prop-types */
+// 3rd library dependencies
 import React from 'react';
 import { View } from 'react-native';
+
+// External dependencies
+import { formatAddress } from '../../../util/address';
 import { useStyles } from '../../hooks';
 import AccountAvatar from '../AccountAvatar';
+import { BaseAvatarSize } from '../BaseAvatar';
 import BaseText, { BaseTextVariant } from '../BaseText';
 import PickerItem from '../PickerItem';
+
+// Internal dependencies
 import styleSheet from './PickerAccount.styles';
 import { PickerAccountProps } from './PickerAccount.types';
-import { BaseAvatarSize } from '../BaseAvatar';
-import { formatAddress } from '../../../util/address';
 
 const PickerAccount = ({
   style,
@@ -29,11 +34,11 @@ const PickerAccount = ({
         style={styles.accountAvatar}
       />
       <View>
-        <BaseText variant={BaseTextVariant.lHeadingSMRegular}>
+        <BaseText variant={BaseTextVariant.sHeadingSMRegular}>
           {accountName}
         </BaseText>
         <BaseText
-          variant={BaseTextVariant.lBodyMD}
+          variant={BaseTextVariant.sBodyMD}
           style={styles.accountAddressLabel}
         >
           {shortenedAddress}
diff --git a/app/component-library/components/PickerAccount/__snapshots__/PickerAccount.test.tsx.snap b/app/component-library/components/PickerAccount/__snapshots__/PickerAccount.test.tsx.snap
index 043dda64efa..76e8929bae4 100644
--- a/app/component-library/components/PickerAccount/__snapshots__/PickerAccount.test.tsx.snap
+++ b/app/component-library/components/PickerAccount/__snapshots__/PickerAccount.test.tsx.snap
@@ -26,7 +26,7 @@ exports[`PickerAccount should render correctly 1`] = `
     />
     <View>
       <BaseText
-        variant="lHeadingSMRegular"
+        variant="sHeadingSMRegular"
       >
         Orangefox.eth
       </BaseText>
@@ -36,7 +36,7 @@ exports[`PickerAccount should render correctly 1`] = `
             "color": "#535A61",
           }
         }
-        variant="lBodyMD"
+        variant="sBodyMD"
       >
         0x2990...a21a
       </BaseText>
diff --git a/app/component-library/components/SelectableListItem/SelectableListItem.test.tsx b/app/component-library/components/SelectableListItem/SelectableListItem.test.tsx
deleted file mode 100644
index f135c623b9e..00000000000
--- a/app/component-library/components/SelectableListItem/SelectableListItem.test.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import { shallow } from 'enzyme';
-
-import { SELECTABLE_LIST_ITEM_OVERLAY_ID } from '../../../constants/test-ids';
-
-import SelectableListItem from './SelectableListItem';
-
-describe('SelectableListItem', () => {
-  it('should render correctly', () => {
-    const wrapper = shallow(
-      <SelectableListItem isSelected>
-        <View />
-      </SelectableListItem>,
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('should be highlighted when selected', () => {
-    const wrapper = shallow(
-      <SelectableListItem isSelected>
-        <View />
-      </SelectableListItem>,
-    );
-    const overlayComponent = wrapper.findWhere(
-      (node) => node.prop('testID') === SELECTABLE_LIST_ITEM_OVERLAY_ID,
-    );
-    expect(overlayComponent.exists()).toBe(true);
-  });
-
-  it('should not be highlighted when not selected', () => {
-    const wrapper = shallow(
-      <SelectableListItem isSelected={false}>
-        <View />
-      </SelectableListItem>,
-    );
-    const overlayComponent = wrapper.findWhere(
-      (node) => node.prop('testID') === SELECTABLE_LIST_ITEM_OVERLAY_ID,
-    );
-    expect(overlayComponent.exists()).toBe(false);
-  });
-});
diff --git a/app/component-library/components/SelectableListItem/SelectableListItem.tsx b/app/component-library/components/SelectableListItem/SelectableListItem.tsx
deleted file mode 100644
index 56746336d95..00000000000
--- a/app/component-library/components/SelectableListItem/SelectableListItem.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-/* eslint-disable react/prop-types */
-import React, { useCallback } from 'react';
-import { TouchableOpacity, View } from 'react-native';
-import { useStyles } from '../../hooks';
-import styleSheet from './SelectableListItem.styles';
-import { SelectableListItemProps } from './SelectableListItem.types';
-import { SELECTABLE_LIST_ITEM_OVERLAY_ID } from '../../../constants/test-ids';
-
-const SelectableListItem: React.FC<SelectableListItemProps> = ({
-  style,
-  isSelected,
-  children,
-  ...props
-}) => {
-  const { styles } = useStyles(styleSheet, { style, isSelected });
-
-  const renderOverlay = useCallback(
-    () =>
-      isSelected ? (
-        <View testID={SELECTABLE_LIST_ITEM_OVERLAY_ID} style={styles.overlay}>
-          <View style={styles.verticalBar} />
-        </View>
-      ) : null,
-    [isSelected, styles],
-  );
-
-  return (
-    <TouchableOpacity style={styles.base} {...props}>
-      {children}
-      {renderOverlay()}
-    </TouchableOpacity>
-  );
-};
-
-export default SelectableListItem;
diff --git a/app/component-library/components/SelectableListItem/__snapshots__/SelectableListItem.test.tsx.snap b/app/component-library/components/SelectableListItem/__snapshots__/SelectableListItem.test.tsx.snap
deleted file mode 100644
index 3e353558abb..00000000000
--- a/app/component-library/components/SelectableListItem/__snapshots__/SelectableListItem.test.tsx.snap
+++ /dev/null
@@ -1,35 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SelectableListItem should render correctly 1`] = `
-<TouchableOpacity
-  style={Object {}}
->
-  <View />
-  <View
-    style={
-      Object {
-        "backgroundColor": "#037DD619",
-        "bottom": 0,
-        "flexDirection": "row",
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      }
-    }
-    testID="selectable-list-item-overlay"
-  >
-    <View
-      style={
-        Object {
-          "backgroundColor": "#037DD6",
-          "borderRadius": 2,
-          "marginLeft": 4,
-          "marginVertical": 4,
-          "width": 4,
-        }
-      }
-    />
-  </View>
-</TouchableOpacity>
-`;
diff --git a/app/component-library/components/SelectableListItem/index.ts b/app/component-library/components/SelectableListItem/index.ts
deleted file mode 100644
index cec771bdd4d..00000000000
--- a/app/component-library/components/SelectableListItem/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './SelectableListItem';
diff --git a/app/constants/test-ids.js b/app/constants/test-ids.js
index 18bc36bd8bc..02b8ed7fe20 100644
--- a/app/constants/test-ids.js
+++ b/app/constants/test-ids.js
@@ -72,7 +72,6 @@ export const INPUT_NETWORK_NAME = 'input-network-name';
 export const FAVICON_AVATAR_IMAGE_ID = 'favicon-avatar-image';
 export const NETWORK_AVATAR_IMAGE_ID = 'network-avatar-image';
 export const CHECKBOX_ICON_ID = 'checkbox-icon';
-export const SELECTABLE_LIST_ITEM_OVERLAY_ID = 'selectable-list-item-overlay';
 export const TOKEN_AVATAR_IMAGE_ID = 'token-avatar-image';
 export const STACKED_AVATARS_OVERFLOW_COUNTER =
   'stacked-avatar-overflow-counter';
diff --git a/storybook/storyLoader.js b/storybook/storyLoader.js
index 77ed853b2a7..5e79157478b 100644
--- a/storybook/storyLoader.js
+++ b/storybook/storyLoader.js
@@ -19,17 +19,18 @@ function loadStories() {
   require('../app/component-library/components/ButtonPrimary/ButtonPrimary.stories');
   require('../app/component-library/components/ButtonSecondary/ButtonSecondary.stories');
   require('../app/component-library/components/ButtonTertiary/ButtonTertiary.stories');
+  require('../app/component-library/components/CellAccount/CellAccount.stories');
+  require('../app/component-library/components/CellContainerMultiSelectItem/CellContainerMultiSelectItem.stories');
+  require('../app/component-library/components/CellContainerSelectItem/CellContainerSelectItem.stories');
   require('../app/component-library/components/Checkbox/Checkbox.stories');
   require('../app/component-library/components/FaviconAvatar/FaviconAvatar.stories');
   require('../app/component-library/components/Icon/Icon.stories');
   require('../app/component-library/components/IconButton/IconButton.stories');
   require('../app/component-library/components/Link/Link.stories');
-  require('../app/component-library/components/MultiselectListItem/MultiselectListItem.stories');
   require('../app/component-library/components/NetworkAvatar/NetworkAvatar.stories');
   require('../app/component-library/components/NetworkPicker/NetworkPicker.stories');
   require('../app/component-library/components/PickerAccount/PickerAccount.stories');
   require('../app/component-library/components/PickerItem/PickerItem.stories');
-  require('../app/component-library/components/SelectableListItem/SelectableListItem.stories');
   require('../app/component-library/components/StackedAvatars/StackedAvatars.stories');
   require('../app/component-library/components/TabBar/TabBar.stories');
   require('../app/component-library/components/TabBarItem/TabBarItem.stories');
@@ -55,17 +56,18 @@ const stories = [
   '../app/component-library/components/ButtonPrimary/ButtonPrimary.stories',
   '../app/component-library/components/ButtonSecondary/ButtonSecondary.stories',
   '../app/component-library/components/ButtonTertiary/ButtonTertiary.stories',
+  '../app/component-library/components/CellAccount/CellAccount.stories',
+  '../app/component-library/components/CellContainerMultiSelectItem/CellContainerMultiSelectItem.stories',
+  '../app/component-library/components/CellContainerSelectItem/CellContainerSelectItem.stories',
   '../app/component-library/components/Checkbox/Checkbox.stories',
   '../app/component-library/components/FaviconAvatar/FaviconAvatar.stories',
   '../app/component-library/components/Icon/Icon.stories',
   '../app/component-library/components/IconButton/IconButton.stories',
   '../app/component-library/components/Link/Link.stories',
-  '../app/component-library/components/MultiselectListItem/MultiselectListItem.stories',
   '../app/component-library/components/NetworkAvatar/NetworkAvatar.stories',
   '../app/component-library/components/NetworkPicker/NetworkPicker.stories',
   '../app/component-library/components/PickerAccount/PickerAccount.stories',
   '../app/component-library/components/PickerItem/PickerItem.stories',
-  '../app/component-library/components/SelectableListItem/SelectableListItem.stories',
   '../app/component-library/components/StackedAvatars/StackedAvatars.stories',
   '../app/component-library/components/TabBar/TabBar.stories',
   '../app/component-library/components/TabBarItem/TabBarItem.stories',