diff --git a/example/src/Examples/ListItemExample.tsx b/example/src/Examples/ListItemExample.tsx
index 4d5a69b400..030d21cef8 100644
--- a/example/src/Examples/ListItemExample.tsx
+++ b/example/src/Examples/ListItemExample.tsx
@@ -1,18 +1,34 @@
-import { View, StyleSheet } from 'react-native';
+import { useState } from 'react';
 
 import { List, Divider, Checkbox, Avatar, Switch } from 'react-native-paper';
 
 import ScreenWrapper from '../ScreenWrapper';
 
-const CenteredCheckbox = () => (
-  <View style={styles.centered}>
-    <Checkbox status="checked" />
-  </View>
-);
+const SelectableSection = () => {
+  const [selected, setSelected] = useState(0);
+
+  return (
+    <List.Section title="Selected">
+      {[0, 1, 2].map((index) => (
+        <List.Item
+          key={index}
+          title="Headline"
+          description="Supporting text"
+          selected={index === selected}
+          onPress={() => setSelected(index)}
+          leading={<List.Icon icon="account-outline" />}
+        />
+      ))}
+      <Divider />
+    </List.Section>
+  );
+};
 
 const ListItemExample = () => {
   return (
     <ScreenWrapper>
+      <SelectableSection />
+
       <List.Section title="Text-only">
         <List.Item title="Headline" />
         <List.Item title="Headline" description="Supporting text" />
@@ -21,16 +37,19 @@ const ListItemExample = () => {
           description="Supporting text that is long enough to fill up multiple lines in the item"
         />
         <Divider />
-        <List.Item title="Headline" right={() => <CenteredCheckbox />} />
+        <List.Item
+          title="Headline"
+          right={(props) => <Checkbox status="checked" style={props.style} />}
+        />
         <List.Item
           title="Headline"
           description="Supporting text"
-          right={() => <CenteredCheckbox />}
+          right={(props) => <Checkbox status="checked" style={props.style} />}
         />
         <List.Item
           title="Headline"
           description="Supporting text that is long enough to fill up multiple lines in the item"
-          right={() => <Checkbox status="checked" />}
+          right={(props) => <Checkbox status="checked" style={props.style} />}
         />
         <Divider />
       </List.Section>
@@ -54,19 +73,19 @@ const ListItemExample = () => {
         <List.Item
           title="Headline"
           left={(props) => <List.Icon {...props} icon="account-outline" />}
-          right={() => <CenteredCheckbox />}
+          right={(props) => <Checkbox status="checked" style={props.style} />}
         />
         <List.Item
           title="Headline"
           description="Supporting text"
           left={(props) => <List.Icon {...props} icon="account-outline" />}
-          right={() => <CenteredCheckbox />}
+          right={(props) => <Checkbox status="checked" style={props.style} />}
         />
         <List.Item
           title="Headline"
           description="Supporting text that is long enough to fill up multiple lines in the item"
           left={(props) => <List.Icon {...props} icon="account-outline" />}
-          right={() => <Checkbox status="checked" />}
+          right={(props) => <Checkbox status="checked" style={props.style} />}
         />
         <Divider />
       </List.Section>
@@ -98,7 +117,7 @@ const ListItemExample = () => {
           left={(props) => (
             <Avatar.Text style={props.style} label="A" size={40} />
           )}
-          right={() => <CenteredCheckbox />}
+          right={(props) => <Checkbox status="checked" style={props.style} />}
         />
         <List.Item
           title="Headline"
@@ -106,7 +125,7 @@ const ListItemExample = () => {
           left={(props) => (
             <Avatar.Text style={props.style} label="A" size={40} />
           )}
-          right={() => <CenteredCheckbox />}
+          right={(props) => <Checkbox status="checked" style={props.style} />}
         />
         <List.Item
           title="Headline"
@@ -114,7 +133,7 @@ const ListItemExample = () => {
           left={(props) => (
             <Avatar.Text style={props.style} label="A" size={40} />
           )}
-          right={() => <Checkbox status="checked" />}
+          right={(props) => <Checkbox status="checked" style={props.style} />}
         />
         <Divider />
       </List.Section>
@@ -158,7 +177,7 @@ const ListItemExample = () => {
               source={require('../../../example/assets/images/strawberries.jpg')}
             />
           )}
-          right={() => <CenteredCheckbox />}
+          right={(props) => <Checkbox status="checked" style={props.style} />}
         />
         <List.Item
           title="Headline"
@@ -169,7 +188,7 @@ const ListItemExample = () => {
               source={require('../../../example/assets/images/strawberries.jpg')}
             />
           )}
-          right={() => <CenteredCheckbox />}
+          right={(props) => <Checkbox status="checked" style={props.style} />}
         />
         <List.Item
           title="Headline"
@@ -180,7 +199,7 @@ const ListItemExample = () => {
               source={require('../../../example/assets/images/strawberries.jpg')}
             />
           )}
-          right={() => <Checkbox status="checked" />}
+          right={(props) => <Checkbox status="checked" style={props.style} />}
         />
         <Divider />
       </List.Section>
@@ -228,7 +247,7 @@ const ListItemExample = () => {
               source={require('../../../example/assets/images/strawberries.jpg')}
             />
           )}
-          right={() => <CenteredCheckbox />}
+          right={(props) => <Checkbox status="checked" style={props.style} />}
         />
         <List.Item
           title="Headline"
@@ -240,7 +259,7 @@ const ListItemExample = () => {
               source={require('../../../example/assets/images/strawberries.jpg')}
             />
           )}
-          right={() => <CenteredCheckbox />}
+          right={(props) => <Checkbox status="checked" style={props.style} />}
         />
         <List.Item
           title="Headline"
@@ -252,7 +271,7 @@ const ListItemExample = () => {
               source={require('../../../example/assets/images/strawberries.jpg')}
             />
           )}
-          right={() => <Checkbox status="checked" />}
+          right={(props) => <Checkbox status="checked" style={props.style} />}
         />
         <Divider />
       </List.Section>
@@ -260,35 +279,35 @@ const ListItemExample = () => {
       <List.Section title="With switch">
         <List.Item
           title="Headline"
-          right={() => <Switch disabled style={styles.centered} />}
+          right={(props) => <Switch disabled style={props.style} />}
         />
         <List.Item
           title="Headline"
           description="Supporting text"
-          right={() => <Switch disabled style={styles.centered} />}
+          right={(props) => <Switch disabled style={props.style} />}
         />
         <List.Item
           title="Headline"
           description="Supporting text that is long enough to fill up multiple lines in the item"
-          right={() => <Switch disabled />}
+          right={(props) => <Switch disabled style={props.style} />}
         />
         <Divider />
         <List.Item
           title="Headline"
           left={(props) => <List.Icon {...props} icon="account-outline" />}
-          right={() => <Switch disabled style={styles.centered} />}
+          right={(props) => <Switch disabled style={props.style} />}
         />
         <List.Item
           title="Headline"
           description="Supporting text"
           left={(props) => <List.Icon {...props} icon="account-outline" />}
-          right={() => <Switch disabled style={styles.centered} />}
+          right={(props) => <Switch disabled style={props.style} />}
         />
         <List.Item
           title="Headline"
           description="Supporting text that is long enough to fill up multiple lines in the item"
           left={(props) => <List.Icon {...props} icon="account-outline" />}
-          right={() => <Switch disabled />}
+          right={(props) => <Switch disabled style={props.style} />}
         />
         <Divider />
       </List.Section>
@@ -296,12 +315,6 @@ const ListItemExample = () => {
   );
 };
 
-const styles = StyleSheet.create({
-  centered: {
-    alignSelf: 'center',
-  },
-});
-
 ListItemExample.title = 'List.Item';
 
 export default ListItemExample;
diff --git a/src/components/List/ListAccordion.tsx b/src/components/List/ListAccordion.tsx
index ff26a075a4..2614b52774 100644
--- a/src/components/List/ListAccordion.tsx
+++ b/src/components/List/ListAccordion.tsx
@@ -12,12 +12,26 @@ import type {
   ViewStyle,
 } from 'react-native';
 
+import Animated, {
+  Easing,
+  ReduceMotion,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import type {
+  EntryAnimationsValues,
+  ExitAnimationsValues,
+} from 'react-native-reanimated';
+
 import { ListAccordionContext } from './ListAccordionContext';
 import { ListAccordionGroupContext } from './ListAccordionGroup';
+import { ListTokens } from './tokens';
 import type { Style } from './utils';
-import { getAccordionColors, getLeftStyles } from './utils';
+import { ListRowContext, getAccordionColors, getLeftStyles } from './utils';
 import { useLocale } from '../../core/locale';
 import { useInternalTheme } from '../../core/theming';
+import { useReduceMotion } from '../../theme/accessibility/ReduceMotionContext';
 import type { ThemeProp } from '../../theme/types';
 import MaterialCommunityIcon from '../MaterialCommunityIcon';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
@@ -47,6 +61,10 @@ export type Props = {
    * You'll need to update this prop when you want to toggle the component or on `onPress`.
    */
   expanded?: boolean;
+  /**
+   * Whether to highlight the accordion as selected.
+   */
+  selected?: boolean;
   /**
    * Function to execute on press.
    */
@@ -191,6 +209,7 @@ const ListAccordion = ({
   onLongPress,
   delayLongPress,
   expanded: expandedProp,
+  selected,
   'aria-label': ariaLabel,
   pointerEvents = 'none',
   titleMaxFontSizeMultiplier,
@@ -202,13 +221,14 @@ const ListAccordion = ({
   const [expanded, setExpanded] = React.useState<boolean>(
     expandedProp || false
   );
-  const [alignToTop, setAlignToTop] = React.useState(false);
+  const [isDescriptionMultiline, setIsDescriptionMultiline] =
+    React.useState(false);
 
   const onDescriptionTextLayout = (
     event: NativeSyntheticEvent<TextLayoutEventData>
   ) => {
     const { nativeEvent } = event;
-    setAlignToTop(nativeEvent.lines.length >= 2);
+    setIsDescriptionMultiline(nativeEvent.lines.length >= 2);
   };
 
   const handlePressAction = (e: GestureResponderEvent) => {
@@ -233,106 +253,192 @@ const ListAccordion = ({
     ? groupContext.expandedId === id
     : expandedInternal;
 
-  const { descriptionColor, titleTextColor } = getAccordionColors({
-    theme,
-    isExpanded,
-  });
+  const reduceMotion = useReduceMotion();
+  const reanimatedReduceMotion = reduceMotion
+    ? ReduceMotion.Always
+    : ReduceMotion.Never;
+
+  const timingConfig = React.useMemo(
+    () => ({
+      duration: theme.motion.duration.medium2,
+      easing: Easing.bezier(...theme.motion.easing.emphasized),
+      reduceMotion: reanimatedReduceMotion,
+    }),
+    [
+      theme.motion.duration.medium2,
+      theme.motion.easing.emphasized,
+      reanimatedReduceMotion,
+    ]
+  );
+
+  const chevronProgress = useSharedValue(isExpanded ? 1 : 0);
+
+  React.useEffect(() => {
+    chevronProgress.value = withTiming(isExpanded ? 1 : 0, timingConfig);
+  }, [isExpanded, chevronProgress, timingConfig]);
+
+  const chevronStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${chevronProgress.value * 180}deg` }],
+  }));
+
+  const expandAnimation = React.useCallback(
+    (values: EntryAnimationsValues) => {
+      'worklet';
+      return {
+        initialValues: { height: 0, opacity: 0 },
+        animations: {
+          height: withTiming(values.targetHeight, timingConfig),
+          opacity: withTiming(1, timingConfig),
+        },
+      };
+    },
+    [timingConfig]
+  );
+
+  const collapseAnimation = React.useCallback(
+    (values: ExitAnimationsValues) => {
+      'worklet';
+      return {
+        initialValues: { height: values.currentHeight, opacity: 1 },
+        animations: {
+          height: withTiming(0, timingConfig),
+          opacity: withTiming(0, timingConfig),
+        },
+      };
+    },
+    [timingConfig]
+  );
+
+  const {
+    descriptionColor,
+    titleTextColor,
+    leadingIconColor,
+    trailingIconColor,
+  } = getAccordionColors({ theme, selected });
 
   const handlePress =
     groupContext && id !== undefined
       ? () => groupContext.onAccordionPress(id)
       : handlePressAction;
 
+  const rowContext = React.useMemo(
+    () => ({
+      verticalPadding: isDescriptionMultiline
+        ? ListTokens.threeLineVerticalPadding
+        : ListTokens.verticalPadding,
+    }),
+    [isDescriptionMultiline]
+  );
+
   const hasLeft = left != null;
   const accordionContext = React.useMemo(() => ({ hasLeft }), [hasLeft]);
 
   return (
     <View>
-      <View style={{ backgroundColor: theme?.colors?.background }}>
-        <TouchableRipple
-          style={[styles.container, style]}
-          onPress={handlePress}
-          onLongPress={onLongPress}
-          delayLongPress={delayLongPress}
-          role="button"
-          aria-expanded={isExpanded}
-          aria-label={ariaLabel}
-          testID={testID}
-          theme={theme}
-          background={background}
-          borderless
-          hitSlop={hitSlop}
-        >
-          <View
-            style={[styles.row, containerStyle]}
-            pointerEvents={pointerEvents}
+      <View
+        style={{
+          backgroundColor: selected
+            ? theme.colors[ListTokens.selectedContainerColor]
+            : theme.colors[ListTokens.containerColor],
+        }}
+      >
+        <ListRowContext.Provider value={rowContext}>
+          <TouchableRipple
+            style={[
+              styles.container,
+              description ? styles.containerTwoLine : styles.containerOneLine,
+              isDescriptionMultiline && styles.containerThreeLine,
+              style,
+            ]}
+            onPress={handlePress}
+            onLongPress={onLongPress}
+            delayLongPress={delayLongPress}
+            role="button"
+            aria-expanded={isExpanded}
+            aria-selected={selected}
+            aria-label={ariaLabel}
+            testID={testID}
+            theme={theme}
+            background={background}
+            borderless
+            hitSlop={hitSlop}
           >
-            {left
-              ? left({
-                  color: isExpanded ? theme.colors?.primary : descriptionColor,
-                  style: getLeftStyles(alignToTop, description),
-                })
-              : null}
-            <View style={[styles.contentItem, styles.content, contentStyle]}>
-              <Text
-                selectable={false}
-                numberOfLines={titleNumberOfLines}
-                style={[
-                  styles.title,
-                  {
-                    color: titleTextColor,
-                  },
-                  titleStyle,
-                ]}
-                maxFontSizeMultiplier={titleMaxFontSizeMultiplier}
-              >
-                {title}
-              </Text>
-              {description ? (
+            <View
+              style={[styles.row, containerStyle]}
+              pointerEvents={pointerEvents}
+            >
+              {left
+                ? left({
+                    color: leadingIconColor,
+                    style: getLeftStyles(isDescriptionMultiline, description),
+                  })
+                : null}
+              <View style={[styles.contentItem, styles.content, contentStyle]}>
                 <Text
+                  variant="bodyLarge"
+                  theme={theme}
                   selectable={false}
-                  numberOfLines={descriptionNumberOfLines}
+                  numberOfLines={titleNumberOfLines}
                   style={[
-                    styles.description,
                     {
-                      color: descriptionColor,
+                      color: titleTextColor,
                     },
-                    descriptionStyle,
+                    titleStyle,
                   ]}
-                  onTextLayout={onDescriptionTextLayout}
-                  maxFontSizeMultiplier={descriptionMaxFontSizeMultiplier}
+                  maxFontSizeMultiplier={titleMaxFontSizeMultiplier}
                 >
-                  {description}
+                  {title}
                 </Text>
-              ) : null}
+                {description ? (
+                  <Text
+                    variant="bodyMedium"
+                    theme={theme}
+                    selectable={false}
+                    numberOfLines={descriptionNumberOfLines}
+                    style={[
+                      {
+                        color: descriptionColor,
+                      },
+                      descriptionStyle,
+                    ]}
+                    onTextLayout={onDescriptionTextLayout}
+                    maxFontSizeMultiplier={descriptionMaxFontSizeMultiplier}
+                  >
+                    {description}
+                  </Text>
+                ) : null}
+              </View>
+              <View style={styles.trailingItem}>
+                {right ? (
+                  right({
+                    isExpanded: isExpanded,
+                  })
+                ) : (
+                  <Animated.View style={chevronStyle}>
+                    <MaterialCommunityIcon
+                      name="chevron-down"
+                      color={trailingIconColor}
+                      size={24}
+                      direction={direction}
+                    />
+                  </Animated.View>
+                )}
+              </View>
             </View>
-            <View
-              style={[
-                styles.trailingItem,
-                description ? styles.multiline : undefined,
-              ]}
-            >
-              {right ? (
-                right({
-                  isExpanded: isExpanded,
-                })
-              ) : (
-                <MaterialCommunityIcon
-                  name={isExpanded ? 'chevron-up' : 'chevron-down'}
-                  color={descriptionColor}
-                  size={24}
-                  direction={direction}
-                />
-              )}
-            </View>
-          </View>
-        </TouchableRipple>
+          </TouchableRipple>
+        </ListRowContext.Provider>
       </View>
 
       {isExpanded ? (
-        <ListAccordionContext.Provider value={accordionContext}>
-          {children}
-        </ListAccordionContext.Provider>
+        <Animated.View
+          entering={expandAnimation}
+          exiting={collapseAnimation}
+          style={styles.expandedContent}
+        >
+          <ListAccordionContext.Provider value={accordionContext}>
+            {children}
+          </ListAccordionContext.Provider>
+        </Animated.View>
       ) : null}
     </View>
   );
@@ -342,30 +448,31 @@ ListAccordion.displayName = 'List.Accordion';
 
 const styles = StyleSheet.create({
   container: {
-    paddingVertical: 8,
-    paddingRight: 24,
+    paddingVertical: ListTokens.verticalPadding,
+    paddingRight: ListTokens.trailingSpace,
+    justifyContent: 'center',
   },
-  row: {
-    flexDirection: 'row',
-    marginVertical: 6,
+  containerOneLine: {
+    minHeight: ListTokens.oneLineContainerHeight,
   },
-  multiline: {
-    height: 40,
-    alignItems: 'center',
-    justifyContent: 'center',
+  containerTwoLine: {
+    minHeight: ListTokens.twoLineContainerHeight,
   },
-  title: {
-    fontSize: 16,
+  containerThreeLine: {
+    paddingVertical: ListTokens.threeLineVerticalPadding,
   },
-  description: {
-    fontSize: 14,
+  row: {
+    flexDirection: 'row',
   },
   contentItem: {
-    paddingLeft: 16,
+    paddingLeft: ListTokens.leadingSpace,
   },
   trailingItem: {
-    marginVertical: 6,
-    paddingLeft: 8,
+    alignSelf: 'center',
+    paddingLeft: ListTokens.leadingSpace,
+  },
+  expandedContent: {
+    overflow: 'hidden',
   },
   content: {
     flex: 1,
diff --git a/src/components/List/ListIcon.tsx b/src/components/List/ListIcon.tsx
index ff02dea7f6..fb06e6463e 100644
--- a/src/components/List/ListIcon.tsx
+++ b/src/components/List/ListIcon.tsx
@@ -1,6 +1,8 @@
+import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
 
+import { ListItemContext } from './ListItemContext';
 import { useInternalTheme } from '../../core/theming';
 import type { ThemeProp } from '../../theme/types';
 import Icon from '../Icon';
@@ -50,10 +52,12 @@ const ListIcon = ({
   theme: themeOverrides,
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
+  const listItem = React.useContext(ListItemContext);
+  const color = iconColor ?? listItem?.color;
 
   return (
     <View style={[styles.item, style]} pointerEvents="box-none">
-      <Icon source={icon} size={ICON_SIZE} color={iconColor} theme={theme} />
+      <Icon source={icon} size={ICON_SIZE} color={color} theme={theme} />
     </View>
   );
 };
diff --git a/src/components/List/ListImage.tsx b/src/components/List/ListImage.tsx
index 213d4254c7..73a2ba3692 100644
--- a/src/components/List/ListImage.tsx
+++ b/src/components/List/ListImage.tsx
@@ -1,6 +1,9 @@
+import * as React from 'react';
 import { StyleSheet, Image } from 'react-native';
 import type { StyleProp, ImageSourcePropType, ImageStyle } from 'react-native';
 
+import { ListTokens } from './tokens';
+import { ListRowContext } from './utils';
 import type { ThemeProp } from '../../theme/types';
 
 export type Props = {
@@ -37,9 +40,17 @@ const ListImage = ({
   variant = 'image',
   theme: _theme,
 }: Props) => {
+  const { verticalPadding } = React.useContext(ListRowContext);
+
   const getStyles = () => {
     if (variant === 'video') {
-      return [style, styles.video];
+      return [
+        style,
+        styles.video,
+        {
+          marginVertical: ListTokens.threeLineVerticalPadding - verticalPadding,
+        },
+      ];
     }
 
     return [style, styles.image];
diff --git a/src/components/List/ListItem.tsx b/src/components/List/ListItem.tsx
index 038ef86a58..ce2ad693aa 100644
--- a/src/components/List/ListItem.tsx
+++ b/src/components/List/ListItem.tsx
@@ -12,7 +12,9 @@ import type {
 } from 'react-native';
 
 import { ListAccordionContext } from './ListAccordionContext';
-import { getLeftStyles, getRightStyles } from './utils';
+import { ListItemContext } from './ListItemContext';
+import { ListTokens } from './tokens';
+import { ListRowContext, getLeftStyles, getRightStyles } from './utils';
 import type { Style } from './utils';
 import { useInternalTheme } from '../../core/theming';
 import type { ThemeProp } from '../../theme/types';
@@ -50,6 +52,14 @@ export type Props = Omit<
    * Description text for the list item or callback which returns a React element to display the description.
    */
   description?: Description;
+  /**
+   * Element to display in the leading slot. Takes precedence over `left`.
+   */
+  leading?: React.ReactNode;
+  /**
+   * Element to display in the trailing slot. Takes precedence over `right`.
+   */
+  trailing?: React.ReactNode;
   /**
    * Callback which returns a React element to display on the left side.
    */
@@ -58,6 +68,10 @@ export type Props = Omit<
    * Callback which returns a React element to display on the right side.
    */
   right?: (props: { color: ColorValue; style?: Style }) => React.ReactNode;
+  /**
+   * Whether to highlight the list item as selected.
+   */
+  selected?: boolean;
   /**
    * Function to execute on press.
    */
@@ -147,8 +161,11 @@ export type Props = Omit<
 const ListItem = ({
   left,
   right,
+  leading,
+  trailing,
   title,
   description,
+  selected,
   onPress,
   theme: themeOverrides,
   style,
@@ -169,15 +186,23 @@ const ListItem = ({
   const theme = useInternalTheme(themeOverrides);
   const { hasLeft } = React.useContext(ListAccordionContext);
   const shouldIndent = hasLeft && !left && !right;
-  const [alignToTop, setAlignToTop] = React.useState(false);
+  const [isDescriptionMultiline, setIsDescriptionMultiline] =
+    React.useState(false);
 
   const onDescriptionTextLayout = (
     event: NativeSyntheticEvent<TextLayoutEventData>
   ) => {
     const { nativeEvent } = event;
-    setAlignToTop(nativeEvent.lines.length >= 2);
+    setIsDescriptionMultiline(nativeEvent.lines.length >= 2);
   };
 
+  const backgroundColor = selected
+    ? theme.colors[ListTokens.selectedContainerColor]
+    : undefined;
+  const titleColor = selected
+    ? theme.colors[ListTokens.selectedContentColor]
+    : theme.colors[ListTokens.headlineColor];
+
   const renderDescription = (
     descriptionColor: ColorValue,
     description?: Description | null
@@ -187,18 +212,16 @@ const ListItem = ({
         selectable: false,
         ellipsizeMode: descriptionEllipsizeMode,
         color: descriptionColor,
-        fontSize: styles.description.fontSize,
+        fontSize: theme.fonts.bodyMedium.fontSize,
       })
     ) : (
       <Text
+        variant="bodyMedium"
+        theme={theme}
         selectable={false}
         numberOfLines={descriptionNumberOfLines}
         ellipsizeMode={descriptionEllipsizeMode}
-        style={[
-          styles.description,
-          { color: descriptionColor },
-          descriptionStyle,
-        ]}
+        style={[{ color: descriptionColor }, descriptionStyle]}
         onTextLayout={onDescriptionTextLayout}
         maxFontSizeMultiplier={descriptionMaxFontSizeMultiplier}
       >
@@ -208,21 +231,21 @@ const ListItem = ({
   };
 
   const renderTitle = () => {
-    const titleColor = theme.colors.onSurface;
-
     return typeof title === 'function' ? (
       title({
         selectable: false,
         ellipsizeMode: titleEllipsizeMode,
         color: titleColor,
-        fontSize: styles.title.fontSize,
+        fontSize: theme.fonts.bodyLarge.fontSize,
       })
     ) : (
       <Text
+        variant="bodyLarge"
+        theme={theme}
         selectable={false}
         ellipsizeMode={titleEllipsizeMode}
         numberOfLines={titleNumberOfLines}
-        style={[styles.title, { color: titleColor }, titleStyle]}
+        style={[{ color: titleColor }, titleStyle]}
         maxFontSizeMultiplier={titleMaxFontSizeMultiplier}
       >
         {title}
@@ -230,43 +253,96 @@ const ListItem = ({
     );
   };
 
-  const descriptionColor = theme.colors.onSurfaceVariant;
+  const descriptionColor = selected
+    ? theme.colors[ListTokens.selectedContentColor]
+    : theme.colors[ListTokens.supportingTextColor];
+
+  const rowContext = React.useMemo(
+    () => ({
+      verticalPadding: isDescriptionMultiline
+        ? ListTokens.threeLineVerticalPadding
+        : ListTokens.verticalPadding,
+    }),
+    [isDescriptionMultiline]
+  );
+
+  const leadingColor = selected
+    ? theme.colors[ListTokens.selectedContentColor]
+    : theme.colors[ListTokens.leadingIconColor];
+  const trailingColor = selected
+    ? theme.colors[ListTokens.selectedContentColor]
+    : theme.colors[ListTokens.trailingIconColor];
+
+  const leadingContext = React.useMemo(
+    () => ({ color: leadingColor }),
+    [leadingColor]
+  );
+  const trailingContext = React.useMemo(
+    () => ({ color: trailingColor }),
+    [trailingColor]
+  );
+
+  const renderLeading = () => {
+    const accessoryStyle = getLeftStyles(isDescriptionMultiline, description);
+
+    if (leading) {
+      return (
+        <ListItemContext.Provider value={leadingContext}>
+          <View style={accessoryStyle}>{leading}</View>
+        </ListItemContext.Provider>
+      );
+    }
+
+    return left ? left({ color: leadingColor, style: accessoryStyle }) : null;
+  };
+
+  const renderTrailing = () => {
+    const accessoryStyle = getRightStyles(isDescriptionMultiline, description);
+
+    if (trailing) {
+      return (
+        <ListItemContext.Provider value={trailingContext}>
+          <View style={accessoryStyle}>{trailing}</View>
+        </ListItemContext.Provider>
+      );
+    }
+
+    return right
+      ? right({ color: trailingColor, style: accessoryStyle })
+      : null;
+  };
 
   return (
-    <TouchableRipple
-      {...rest}
-      ref={ref}
-      style={
-        shouldIndent
-          ? [styles.container, styles.indent, style]
-          : [styles.container, style]
-      }
-      onPress={onPress}
-      theme={theme}
-      testID={testID}
-    >
-      <View style={[styles.row, containerStyle]}>
-        {left
-          ? left({
-              color: descriptionColor,
-              style: getLeftStyles(alignToTop, description),
-            })
-          : null}
-        <View style={[styles.item, styles.content, contentStyle]}>
-          {renderTitle()}
+    <ListRowContext.Provider value={rowContext}>
+      <TouchableRipple
+        {...rest}
+        ref={ref}
+        style={[
+          styles.container,
+          description ? styles.containerTwoLine : styles.containerOneLine,
+          isDescriptionMultiline && styles.containerThreeLine,
+          shouldIndent && styles.indent,
+          { backgroundColor },
+          style,
+        ]}
+        onPress={onPress}
+        aria-selected={selected}
+        theme={theme}
+        testID={testID}
+      >
+        <View style={[styles.row, containerStyle]}>
+          {renderLeading()}
+          <View style={[styles.item, styles.content, contentStyle]}>
+            {renderTitle()}
 
-          {description
-            ? renderDescription(descriptionColor, description)
-            : null}
+            {description
+              ? renderDescription(descriptionColor, description)
+              : null}
+          </View>
+          {renderTrailing()}
         </View>
-        {right
-          ? right({
-              color: descriptionColor,
-              style: getRightStyles(alignToTop, description),
-            })
-          : null}
-      </View>
-    </TouchableRipple>
+      </TouchableRipple>
+    </ListRowContext.Provider>
   );
 };
 
@@ -274,8 +350,18 @@ ListItem.displayName = 'List.Item';
 
 const styles = StyleSheet.create({
   container: {
-    paddingVertical: 8,
-    paddingRight: 24,
+    paddingVertical: ListTokens.verticalPadding,
+    paddingRight: ListTokens.trailingSpace,
+    justifyContent: 'center',
+  },
+  containerOneLine: {
+    minHeight: ListTokens.oneLineContainerHeight,
+  },
+  containerTwoLine: {
+    minHeight: ListTokens.twoLineContainerHeight,
+  },
+  containerThreeLine: {
+    paddingVertical: ListTokens.threeLineVerticalPadding,
   },
   indent: {
     paddingLeft: 40,
@@ -283,16 +369,9 @@ const styles = StyleSheet.create({
   row: {
     width: '100%',
     flexDirection: 'row',
-    marginVertical: 6,
-  },
-  title: {
-    fontSize: 16,
-  },
-  description: {
-    fontSize: 14,
   },
   item: {
-    paddingLeft: 16,
+    paddingLeft: ListTokens.leadingSpace,
   },
   content: {
     flexShrink: 1,
diff --git a/src/components/List/ListItemContext.tsx b/src/components/List/ListItemContext.tsx
new file mode 100644
index 0000000000..f372559a93
--- /dev/null
+++ b/src/components/List/ListItemContext.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { ColorValue } from 'react-native';
+
+export type ListItemContextType = {
+  color: ColorValue;
+};
+
+export const ListItemContext = React.createContext<ListItemContextType | null>(
+  null
+);
diff --git a/src/components/List/tokens.ts b/src/components/List/tokens.ts
new file mode 100644
index 0000000000..f1fd872458
--- /dev/null
+++ b/src/components/List/tokens.ts
@@ -0,0 +1,23 @@
+import type { ColorRole } from '../../theme/types';
+
+const sizes = {
+  verticalPadding: 8,
+  threeLineVerticalPadding: 12,
+  oneLineContainerHeight: 56,
+  twoLineContainerHeight: 72,
+  leadingSpace: 16,
+  trailingSpace: 16,
+} as const;
+
+const colors = {
+  containerColor: 'surface',
+  headlineColor: 'onSurface',
+  supportingTextColor: 'onSurfaceVariant',
+  leadingIconColor: 'onSurfaceVariant',
+  trailingIconColor: 'onSurfaceVariant',
+  expandTrailingIconColor: 'onSurface',
+  selectedContainerColor: 'primaryContainer',
+  selectedContentColor: 'onPrimaryContainer',
+} as const satisfies Record<string, ColorRole>;
+
+export const ListTokens = { ...sizes, ...colors };
diff --git a/src/components/List/utils.ts b/src/components/List/utils.ts
index e01f0e55c6..1d9a9cc1ff 100644
--- a/src/components/List/utils.ts
+++ b/src/components/List/utils.ts
@@ -1,6 +1,7 @@
-import { StyleSheet } from 'react-native';
+import * as React from 'react';
 import type { StyleProp, TextProps, ViewStyle } from 'react-native';
 
+import { ListTokens } from './tokens';
 import type { InternalTheme, ThemeProp } from '../../theme/types';
 
 type Description =
@@ -26,82 +27,55 @@ export type Style = {
   alignSelf?: 'flex-start' | 'center';
 };
 
-const stylesV3Left = {
-  marginRight: 0,
-  marginLeft: 16,
-};
-
-const stylesV3Right = {
-  marginLeft: 16,
-};
-
-export const getLeftStyles = (
+const getAccessoryStyles = (
   alignToTop: boolean,
   description: Description
-) => {
-  const stylesV3: Style = {
-    ...stylesV3Left,
+): Style => {
+  const style: Style = {
+    marginLeft: ListTokens.leadingSpace,
+    marginRight: 0,
     alignSelf: alignToTop ? 'flex-start' : 'center',
   };
 
-  if (!description) {
-    return {
-      ...styles.iconMarginLeft,
-      ...styles.marginVerticalNone,
-      ...stylesV3,
-    };
-  }
-
-  return {
-    ...styles.iconMarginLeft,
-    ...stylesV3,
-  };
+  return description ? style : { ...style, marginVertical: 0 };
 };
 
-export const getRightStyles = (
-  alignToTop: boolean,
-  description: Description
-) => {
-  const stylesV3: Style = {
-    ...stylesV3Right,
-    alignSelf: alignToTop ? 'flex-start' : 'center',
-  };
+export const getLeftStyles = (alignToTop: boolean, description: Description) =>
+  getAccessoryStyles(alignToTop, description);
 
-  if (!description) {
-    return {
-      ...styles.iconMarginRight,
-      ...styles.marginVerticalNone,
-      ...stylesV3,
-    };
-  }
-
-  return {
-    ...styles.iconMarginRight,
-    ...stylesV3,
-  };
-};
+export const getRightStyles = (alignToTop: boolean, description: Description) =>
+  getAccessoryStyles(alignToTop, description);
 
-const styles = StyleSheet.create({
-  marginVerticalNone: { marginVertical: 0 },
-  iconMarginLeft: { marginLeft: 0, marginRight: 16 },
-  iconMarginRight: { marginRight: 0 },
+/**
+ * Rows change their vertical padding with the number of lines, so a leading
+ * element taller than the default slot needs to know how much of the MD3
+ * height the row already covers.
+ */
+export const ListRowContext = React.createContext<{ verticalPadding: number }>({
+  verticalPadding: ListTokens.verticalPadding,
 });
 
 export const getAccordionColors = ({
   theme,
-  isExpanded,
+  selected,
 }: {
   theme: InternalTheme;
-  isExpanded?: boolean;
+  selected?: boolean;
 }) => {
-  const titleColor = theme.colors.onSurface;
-
-  const descriptionColor = theme.colors.onSurfaceVariant;
-
-  const titleTextColor = isExpanded ? theme.colors?.primary : titleColor;
+  const selectedContentColor = theme.colors[ListTokens.selectedContentColor];
 
   return {
-    descriptionColor,
-    titleTextColor,
+    titleTextColor: selected
+      ? selectedContentColor
+      : theme.colors[ListTokens.headlineColor],
+    descriptionColor: selected
+      ? selectedContentColor
+      : theme.colors[ListTokens.supportingTextColor],
+    leadingIconColor: selected
+      ? selectedContentColor
+      : theme.colors[ListTokens.leadingIconColor],
+    trailingIconColor: selected
+      ? selectedContentColor
+      : theme.colors[ListTokens.expandTrailingIconColor],
   };
 };
diff --git a/src/components/__tests__/ListAccordion.test.tsx b/src/components/__tests__/ListAccordion.test.tsx
index ce387e343a..1977573cc0 100644
--- a/src/components/__tests__/ListAccordion.test.tsx
+++ b/src/components/__tests__/ListAccordion.test.tsx
@@ -2,14 +2,13 @@ import { StyleSheet, View } from 'react-native';
 
 import { describe, expect, it } from '@jest/globals';
 
-import { render, screen } from '../../test-utils';
+import { fireEvent, render, screen } from '../../test-utils';
 import { red500 } from '../../theme/colors';
 import { LightTheme } from '../../theme/schemes';
 import ListAccordion from '../List/ListAccordion';
 import ListAccordionGroup from '../List/ListAccordionGroup';
 import ListIcon from '../List/ListIcon';
 import ListItem from '../List/ListItem';
-import { getAccordionColors } from '../List/utils';
 
 const styles = StyleSheet.create({
   coloring: {
@@ -148,39 +147,108 @@ describe('ListAccordion', () => {
       'List.Accordion is used inside a List.AccordionGroup without specifying an id prop.'
     );
   });
-});
 
-describe('getAccordionColors - description color', () => {
-  it('should return theme color, for theme version 3', () => {
-    expect(
-      getAccordionColors({
-        theme: LightTheme,
-      })
-    ).toMatchObject({
-      descriptionColor: LightTheme.colors.onSurfaceVariant,
+  it.each([
+    ['collapsed', false],
+    ['expanded', true],
+  ])('keeps the title on onSurface when %s', async (_label, expanded) => {
+    await render(
+      <ListAccordion title="Accordion item 1" expanded={expanded}>
+        <ListItem title="List item 1" />
+      </ListAccordion>
+    );
+
+    expect(screen.getByText('Accordion item 1')).toHaveStyle({
+      color: LightTheme.colors.onSurface,
     });
   });
-});
 
-describe('getAccordionColors - title text color', () => {
-  it('should return theme color, for theme version 3', () => {
-    expect(
-      getAccordionColors({
-        theme: LightTheme,
-      })
-    ).toMatchObject({
-      titleTextColor: LightTheme.colors.onSurface,
+  it('hits the container heights without measuring the description', async () => {
+    await render(
+      <ListAccordion title="Accordion item 1" testID="list-accordion">
+        <ListItem title="List item 1" />
+      </ListAccordion>
+    );
+
+    expect(screen.getByTestId('list-accordion')).toHaveStyle({
+      minHeight: 56,
+      paddingVertical: 8,
+    });
+  });
+
+  it('keeps the two line container height once a description is present', async () => {
+    await render(
+      <ListAccordion
+        title="Accordion item 1"
+        description="Describes the expandable list item"
+        testID="list-accordion"
+      >
+        <ListItem title="List item 1" />
+      </ListAccordion>
+    );
+
+    expect(screen.getByTestId('list-accordion')).toHaveStyle({
+      minHeight: 72,
+      paddingVertical: 8,
+    });
+
+    await fireEvent(
+      screen.getByText('Describes the expandable list item'),
+      'textLayout',
+      { nativeEvent: { lines: [{}, {}] } }
+    );
+
+    expect(screen.getByTestId('list-accordion')).toHaveStyle({
+      minHeight: 72,
+      paddingVertical: 12,
     });
   });
 
-  it('should return primary color if it is expanded', () => {
+  it('uses the expand token for the chevron', async () => {
+    await render(
+      <ListAccordion title="Accordion item 1">
+        <ListItem title="List item 1" />
+      </ListAccordion>
+    );
+
     expect(
-      getAccordionColors({
-        theme: LightTheme,
-        isExpanded: true,
-      })
-    ).toMatchObject({
-      titleTextColor: LightTheme.colors?.primary,
+      screen.getByText('chevron-down', { includeHiddenElements: true })
+    ).toHaveStyle({
+      color: LightTheme.colors.onSurface,
+    });
+  });
+
+  it('applies the theme override to title and description typography', async () => {
+    await render(
+      <ListAccordion
+        title="Accordion item 1"
+        description="Describes the expandable list item"
+        theme={{
+          fonts: { bodyLarge: { fontSize: 99 }, bodyMedium: { fontSize: 77 } },
+        }}
+      >
+        <ListItem title="List item 1" />
+      </ListAccordion>
+    );
+
+    expect(screen.getByText('Accordion item 1')).toHaveStyle({ fontSize: 99 });
+    expect(screen.getByText('Describes the expandable list item')).toHaveStyle({
+      fontSize: 77,
+    });
+  });
+
+  it('renders a selected accordion on the primary container', async () => {
+    await render(
+      <ListAccordion title="Accordion item 1" description="Supporting" selected>
+        <ListItem title="List item 1" />
+      </ListAccordion>
+    );
+
+    expect(screen.getByText('Accordion item 1')).toHaveStyle({
+      color: LightTheme.colors.onPrimaryContainer,
+    });
+    expect(screen.getByText('Supporting')).toHaveStyle({
+      color: LightTheme.colors.onPrimaryContainer,
     });
   });
 });
diff --git a/src/components/__tests__/ListItem.test.tsx b/src/components/__tests__/ListItem.test.tsx
index 98e6e0f0fe..cb3da93d35 100644
--- a/src/components/__tests__/ListItem.test.tsx
+++ b/src/components/__tests__/ListItem.test.tsx
@@ -5,8 +5,9 @@ import { Text, View } from 'react-native';
 import { expect, it, jest } from '@jest/globals';
 import { userEvent } from '@testing-library/react-native';
 
-import { render, screen } from '../../test-utils';
+import { fireEvent, render, screen } from '../../test-utils';
 import { red500 } from '../../theme/colors';
+import { LightTheme } from '../../theme/schemes';
 import Chip from '../Chip/Chip';
 import IconButton from '../IconButton/IconButton';
 import ListIcon from '../List/ListIcon';
@@ -22,6 +23,18 @@ const styles = StyleSheet.create({
   content: {
     paddingLeft: 0,
   },
+  avatar: {
+    width: 40,
+    height: 40,
+  },
+  image: {
+    width: 56,
+    height: 56,
+  },
+  video: {
+    width: 114,
+    height: 64,
+  },
 });
 
 const testID = 'list-item';
@@ -177,3 +190,183 @@ it('renders list item with custom content style', async () => {
 
   expect(toJSON()).toMatchSnapshot();
 });
+
+it('hits the one line container height without measuring the description', async () => {
+  await render(<ListItem title="First Item" testID={testID} />);
+
+  expect(screen.getByTestId(testID)).toHaveStyle({
+    minHeight: 56,
+    paddingVertical: 8,
+  });
+});
+
+it('hits the two and three line container heights without measuring', async () => {
+  await render(
+    <ListItem
+      title="First Item"
+      description="Item description"
+      testID={testID}
+    />
+  );
+
+  expect(screen.getByTestId(testID)).toHaveStyle({
+    minHeight: 72,
+    paddingVertical: 8,
+  });
+
+  await fireEvent(screen.getByText('Item description'), 'textLayout', {
+    nativeEvent: { lines: [{}, {}] },
+  });
+
+  expect(screen.getByTestId(testID)).toHaveStyle({
+    minHeight: 72,
+    paddingVertical: 12,
+  });
+});
+
+it.each([
+  ['a 40dp accessory', styles.avatar, undefined, 56],
+  ['a 56dp accessory', styles.image, 'Item description', 72],
+  ['a 64dp accessory', styles.video, undefined, 56],
+])(
+  'keeps the container height with %s in the leading slot',
+  async (_label, accessoryStyle, description, minHeight) => {
+    await render(
+      <ListItem
+        title="First Item"
+        description={description}
+        left={(props) => (
+          <View testID="left-accessory" style={[props.style, accessoryStyle]} />
+        )}
+        testID={testID}
+      />
+    );
+
+    expect(screen.getByTestId(testID)).toHaveStyle({
+      minHeight,
+      paddingVertical: 8,
+    });
+  }
+);
+
+it('colors the typed slots from the list item context', async () => {
+  await render(
+    <ListItem
+      title="First Item"
+      leading={<ListIcon icon="folder" />}
+      trailing={<ListIcon icon="chevron-right" />}
+      testID={testID}
+    />
+  );
+
+  expect(
+    screen.getByText('folder', { includeHiddenElements: true })
+  ).toHaveStyle({ color: LightTheme.colors.onSurfaceVariant });
+  expect(
+    screen.getByText('chevron-right', { includeHiddenElements: true })
+  ).toHaveStyle({ color: LightTheme.colors.onSurfaceVariant });
+});
+
+it('renders the trailing slot', async () => {
+  await render(
+    <ListItem
+      title="First Item"
+      trailing={<Text>Trailing</Text>}
+      testID={testID}
+    />
+  );
+
+  expect(screen.getByText('Trailing')).toBeOnTheScreen();
+});
+
+it('prefers the typed slots over the left and right render props', async () => {
+  await render(
+    <ListItem
+      title="First Item"
+      leading={<Text>Leading slot</Text>}
+      trailing={<Text>Trailing slot</Text>}
+      left={() => <Text>Left render prop</Text>}
+      right={() => <Text>Right render prop</Text>}
+      testID={testID}
+    />
+  );
+
+  expect(screen.getByText('Leading slot')).toBeOnTheScreen();
+  expect(screen.getByText('Trailing slot')).toBeOnTheScreen();
+  expect(screen.queryByText('Left render prop')).not.toBeOnTheScreen();
+  expect(screen.queryByText('Right render prop')).not.toBeOnTheScreen();
+});
+
+it('top aligns the accessories once the description wraps', async () => {
+  await render(
+    <ListItem
+      title="First Item"
+      description="Item description"
+      left={(props) => <View testID="left-accessory" style={props.style} />}
+      testID={testID}
+    />
+  );
+
+  expect(screen.getByTestId('left-accessory')).toHaveStyle({
+    alignSelf: 'center',
+  });
+
+  await fireEvent(screen.getByText('Item description'), 'textLayout', {
+    nativeEvent: { lines: [{}, {}] },
+  });
+
+  expect(screen.getByTestId('left-accessory')).toHaveStyle({
+    alignSelf: 'flex-start',
+  });
+});
+
+it('applies the theme override to title and description typography', async () => {
+  await render(
+    <ListItem
+      title="First Item"
+      description="Item description"
+      testID={testID}
+      theme={{
+        fonts: { bodyLarge: { fontSize: 99 }, bodyMedium: { fontSize: 77 } },
+      }}
+    />
+  );
+
+  expect(screen.getByText('First Item')).toHaveStyle({ fontSize: 99 });
+  expect(screen.getByText('Item description')).toHaveStyle({ fontSize: 77 });
+});
+
+it.each([
+  [
+    'an unselected item on surface colors',
+    false,
+    undefined,
+    LightTheme.colors.onSurface,
+    LightTheme.colors.onSurfaceVariant,
+  ],
+  [
+    'a selected item on the primary container',
+    true,
+    LightTheme.colors.primaryContainer,
+    LightTheme.colors.onPrimaryContainer,
+    LightTheme.colors.onPrimaryContainer,
+  ],
+])(
+  'renders %s',
+  async (_label, selected, backgroundColor, titleColor, descriptionColor) => {
+    await render(
+      <ListItem
+        title="First Item"
+        description="Item description"
+        selected={selected}
+        testID={testID}
+      />
+    );
+
+    expect(screen.getByTestId(testID)).toHaveStyle({ backgroundColor });
+    expect(screen.getByText('First Item')).toHaveStyle({ color: titleColor });
+    expect(screen.getByText('Item description')).toHaveStyle({
+      color: descriptionColor,
+    });
+  }
+);
diff --git a/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap b/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap
index c01fcf856a..d7785498c7 100644
--- a/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap
@@ -47,9 +47,14 @@ exports[`renders expanded accordion 1`] = `
           },
           [
             {
-              "paddingRight": 24,
+              "justifyContent": "center",
+              "paddingRight": 16,
               "paddingVertical": 8,
             },
+            {
+              "minHeight": 56,
+            },
+            false,
             undefined,
           ],
         ]
@@ -61,7 +66,6 @@ exports[`renders expanded accordion 1`] = `
           [
             {
               "flexDirection": "row",
-              "marginVertical": 6,
             },
             undefined,
           ]
@@ -91,21 +95,22 @@ exports[`renders expanded accordion 1`] = `
                 },
                 {
                   "color": "rgba(29, 27, 32, 1)",
-                  "fontFamily": "System",
-                  "fontWeight": "400",
-                  "letterSpacing": 0,
-                },
-                {
                   "writingDirection": "ltr",
                 },
                 [
                   {
+                    "fontFamily": "System",
                     "fontSize": 16,
+                    "fontWeight": "400",
+                    "letterSpacing": 0.5,
+                    "lineHeight": 24,
                   },
-                  {
-                    "color": "rgba(103, 80, 164, 1)",
-                  },
-                  undefined,
+                  [
+                    {
+                      "color": "rgba(29, 27, 32, 1)",
+                    },
+                    undefined,
+                  ],
                 ],
               ]
             }
@@ -115,100 +120,121 @@ exports[`renders expanded accordion 1`] = `
         </View>
         <View
           style={
-            [
-              {
-                "marginVertical": 6,
-                "paddingLeft": 8,
-              },
-              undefined,
-            ]
+            {
+              "alignSelf": "center",
+              "paddingLeft": 16,
+            }
           }
         >
-          <Text
-            accessibilityElementsHidden={true}
-            importantForAccessibility="no-hide-descendants"
-            pointerEvents="none"
-            selectable={false}
+          <View
+            collapsable={false}
             style={
               [
                 {
-                  "color": "rgba(73, 69, 79, 1)",
-                  "fontSize": 24,
+                  "transform": [
+                    {
+                      "rotate": "180deg",
+                    },
+                  ],
                 },
-                [
-                  {
-                    "lineHeight": 24,
-                    "transform": [
-                      {
-                        "scaleX": 1,
-                      },
-                    ],
-                  },
-                  {
-                    "backgroundColor": "transparent",
-                  },
-                ],
               ]
             }
           >
-            chevron-up
-          </Text>
+            <Text
+              accessibilityElementsHidden={true}
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              selectable={false}
+              style={
+                [
+                  {
+                    "color": "rgba(29, 27, 32, 1)",
+                    "fontSize": 24,
+                  },
+                  [
+                    {
+                      "lineHeight": 24,
+                      "transform": [
+                        {
+                          "scaleX": 1,
+                        },
+                      ],
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                    },
+                  ],
+                ]
+              }
+            >
+              chevron-down
+            </Text>
+          </View>
         </View>
       </View>
     </View>
   </View>
   <View
-    accessibilityState={
-      {
-        "busy": undefined,
-        "checked": undefined,
-        "disabled": true,
-        "expanded": undefined,
-        "selected": undefined,
-      }
-    }
-    accessibilityValue={
-      {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
-      }
-    }
-    accessible={true}
     collapsable={false}
-    focusable={true}
-    onBlur={[Function]}
-    onClick={[Function]}
-    onFocus={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
+    entering={[Function]}
+    exiting={[Function]}
     style={
       [
-        false,
-        [
-          {
-            "paddingRight": 24,
-            "paddingVertical": 8,
-          },
-          undefined,
-        ],
+        {
+          "overflow": "hidden",
+        },
       ]
     }
   >
     <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": true,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
-          {
-            "flexDirection": "row",
-            "marginVertical": 6,
-            "width": "100%",
-          },
-          undefined,
+          false,
+          [
+            {
+              "justifyContent": "center",
+              "paddingRight": 16,
+              "paddingVertical": 8,
+            },
+            {
+              "minHeight": 56,
+            },
+            false,
+            false,
+            {
+              "backgroundColor": undefined,
+            },
+            undefined,
+          ],
         ]
       }
     >
@@ -216,48 +242,61 @@ exports[`renders expanded accordion 1`] = `
         style={
           [
             {
-              "paddingLeft": 16,
-            },
-            {
-              "flexGrow": 1,
-              "flexShrink": 1,
-              "justifyContent": "center",
+              "flexDirection": "row",
+              "width": "100%",
             },
             undefined,
           ]
         }
       >
-        <Text
-          numberOfLines={1}
-          selectable={false}
+        <View
           style={
             [
               {
-                "textAlign": "left",
-              },
-              {
-                "color": "rgba(29, 27, 32, 1)",
-                "fontFamily": "System",
-                "fontWeight": "400",
-                "letterSpacing": 0,
+                "paddingLeft": 16,
               },
               {
-                "writingDirection": "ltr",
+                "flexGrow": 1,
+                "flexShrink": 1,
+                "justifyContent": "center",
               },
+              undefined,
+            ]
+          }
+        >
+          <Text
+            numberOfLines={1}
+            selectable={false}
+            style={
               [
                 {
-                  "fontSize": 16,
+                  "textAlign": "left",
                 },
                 {
                   "color": "rgba(29, 27, 32, 1)",
+                  "writingDirection": "ltr",
                 },
-                undefined,
-              ],
-            ]
-          }
-        >
-          List item 1
-        </Text>
+                [
+                  {
+                    "fontFamily": "System",
+                    "fontSize": 16,
+                    "fontWeight": "400",
+                    "letterSpacing": 0.5,
+                    "lineHeight": 24,
+                  },
+                  [
+                    {
+                      "color": "rgba(29, 27, 32, 1)",
+                    },
+                    undefined,
+                  ],
+                ],
+              ]
+            }
+          >
+            List item 1
+          </Text>
+        </View>
       </View>
     </View>
   </View>
@@ -311,9 +350,14 @@ exports[`renders list accordion with children 1`] = `
           },
           [
             {
-              "paddingRight": 24,
+              "justifyContent": "center",
+              "paddingRight": 16,
               "paddingVertical": 8,
             },
+            {
+              "minHeight": 56,
+            },
+            false,
             undefined,
           ],
         ]
@@ -325,7 +369,6 @@ exports[`renders list accordion with children 1`] = `
           [
             {
               "flexDirection": "row",
-              "marginVertical": 6,
             },
             undefined,
           ]
@@ -402,21 +445,22 @@ exports[`renders list accordion with children 1`] = `
                 },
                 {
                   "color": "rgba(29, 27, 32, 1)",
-                  "fontFamily": "System",
-                  "fontWeight": "400",
-                  "letterSpacing": 0,
-                },
-                {
                   "writingDirection": "ltr",
                 },
                 [
                   {
+                    "fontFamily": "System",
                     "fontSize": 16,
+                    "fontWeight": "400",
+                    "letterSpacing": 0.5,
+                    "lineHeight": 24,
                   },
-                  {
-                    "color": "rgba(29, 27, 32, 1)",
-                  },
-                  undefined,
+                  [
+                    {
+                      "color": "rgba(29, 27, 32, 1)",
+                    },
+                    undefined,
+                  ],
                 ],
               ]
             }
@@ -426,44 +470,56 @@ exports[`renders list accordion with children 1`] = `
         </View>
         <View
           style={
-            [
-              {
-                "marginVertical": 6,
-                "paddingLeft": 8,
-              },
-              undefined,
-            ]
+            {
+              "alignSelf": "center",
+              "paddingLeft": 16,
+            }
           }
         >
-          <Text
-            accessibilityElementsHidden={true}
-            importantForAccessibility="no-hide-descendants"
-            pointerEvents="none"
-            selectable={false}
+          <View
+            collapsable={false}
             style={
               [
                 {
-                  "color": "rgba(73, 69, 79, 1)",
-                  "fontSize": 24,
+                  "transform": [
+                    {
+                      "rotate": "0deg",
+                    },
+                  ],
                 },
-                [
-                  {
-                    "lineHeight": 24,
-                    "transform": [
-                      {
-                        "scaleX": 1,
-                      },
-                    ],
-                  },
-                  {
-                    "backgroundColor": "transparent",
-                  },
-                ],
               ]
             }
           >
-            chevron-down
-          </Text>
+            <Text
+              accessibilityElementsHidden={true}
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              selectable={false}
+              style={
+                [
+                  {
+                    "color": "rgba(29, 27, 32, 1)",
+                    "fontSize": 24,
+                  },
+                  [
+                    {
+                      "lineHeight": 24,
+                      "transform": [
+                        {
+                          "scaleX": 1,
+                        },
+                      ],
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                    },
+                  ],
+                ]
+              }
+            >
+              chevron-down
+            </Text>
+          </View>
         </View>
       </View>
     </View>
@@ -518,9 +574,14 @@ exports[`renders list accordion with custom title and description styles 1`] = `
           },
           [
             {
-              "paddingRight": 24,
+              "justifyContent": "center",
+              "paddingRight": 16,
               "paddingVertical": 8,
             },
+            {
+              "minHeight": 72,
+            },
+            false,
             undefined,
           ],
         ]
@@ -532,7 +593,6 @@ exports[`renders list accordion with custom title and description styles 1`] = `
           [
             {
               "flexDirection": "row",
-              "marginVertical": 6,
             },
             undefined,
           ]
@@ -562,23 +622,24 @@ exports[`renders list accordion with custom title and description styles 1`] = `
                 },
                 {
                   "color": "rgba(29, 27, 32, 1)",
-                  "fontFamily": "System",
-                  "fontWeight": "400",
-                  "letterSpacing": 0,
-                },
-                {
                   "writingDirection": "ltr",
                 },
                 [
                   {
+                    "fontFamily": "System",
                     "fontSize": 16,
+                    "fontWeight": "400",
+                    "letterSpacing": 0.5,
+                    "lineHeight": 24,
                   },
-                  {
-                    "color": "rgba(29, 27, 32, 1)",
-                  },
-                  {
-                    "color": "#f44336",
-                  },
+                  [
+                    {
+                      "color": "rgba(29, 27, 32, 1)",
+                    },
+                    {
+                      "color": "#f44336",
+                    },
+                  ],
                 ],
               ]
             }
@@ -596,23 +657,24 @@ exports[`renders list accordion with custom title and description styles 1`] = `
                 },
                 {
                   "color": "rgba(29, 27, 32, 1)",
-                  "fontFamily": "System",
-                  "fontWeight": "400",
-                  "letterSpacing": 0,
-                },
-                {
                   "writingDirection": "ltr",
                 },
                 [
                   {
+                    "fontFamily": "System",
                     "fontSize": 14,
+                    "fontWeight": "400",
+                    "letterSpacing": 0.25,
+                    "lineHeight": 20,
                   },
-                  {
-                    "color": "rgba(73, 69, 79, 1)",
-                  },
-                  {
-                    "color": "#f44336",
-                  },
+                  [
+                    {
+                      "color": "rgba(73, 69, 79, 1)",
+                    },
+                    {
+                      "color": "#f44336",
+                    },
+                  ],
                 ],
               ]
             }
@@ -622,48 +684,56 @@ exports[`renders list accordion with custom title and description styles 1`] = `
         </View>
         <View
           style={
-            [
-              {
-                "marginVertical": 6,
-                "paddingLeft": 8,
-              },
-              {
-                "alignItems": "center",
-                "height": 40,
-                "justifyContent": "center",
-              },
-            ]
+            {
+              "alignSelf": "center",
+              "paddingLeft": 16,
+            }
           }
         >
-          <Text
-            accessibilityElementsHidden={true}
-            importantForAccessibility="no-hide-descendants"
-            pointerEvents="none"
-            selectable={false}
+          <View
+            collapsable={false}
             style={
               [
                 {
-                  "color": "rgba(73, 69, 79, 1)",
-                  "fontSize": 24,
+                  "transform": [
+                    {
+                      "rotate": "0deg",
+                    },
+                  ],
                 },
-                [
-                  {
-                    "lineHeight": 24,
-                    "transform": [
-                      {
-                        "scaleX": 1,
-                      },
-                    ],
-                  },
-                  {
-                    "backgroundColor": "transparent",
-                  },
-                ],
               ]
             }
           >
-            chevron-down
-          </Text>
+            <Text
+              accessibilityElementsHidden={true}
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              selectable={false}
+              style={
+                [
+                  {
+                    "color": "rgba(29, 27, 32, 1)",
+                    "fontSize": 24,
+                  },
+                  [
+                    {
+                      "lineHeight": 24,
+                      "transform": [
+                        {
+                          "scaleX": 1,
+                        },
+                      ],
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                    },
+                  ],
+                ]
+              }
+            >
+              chevron-down
+            </Text>
+          </View>
         </View>
       </View>
     </View>
@@ -718,9 +788,14 @@ exports[`renders list accordion with left items 1`] = `
           },
           [
             {
-              "paddingRight": 24,
+              "justifyContent": "center",
+              "paddingRight": 16,
               "paddingVertical": 8,
             },
+            {
+              "minHeight": 56,
+            },
+            false,
             undefined,
           ],
         ]
@@ -732,7 +807,6 @@ exports[`renders list accordion with left items 1`] = `
           [
             {
               "flexDirection": "row",
-              "marginVertical": 6,
             },
             undefined,
           ]
@@ -809,21 +883,22 @@ exports[`renders list accordion with left items 1`] = `
                 },
                 {
                   "color": "rgba(29, 27, 32, 1)",
-                  "fontFamily": "System",
-                  "fontWeight": "400",
-                  "letterSpacing": 0,
-                },
-                {
                   "writingDirection": "ltr",
                 },
                 [
                   {
+                    "fontFamily": "System",
                     "fontSize": 16,
+                    "fontWeight": "400",
+                    "letterSpacing": 0.5,
+                    "lineHeight": 24,
                   },
-                  {
-                    "color": "rgba(29, 27, 32, 1)",
-                  },
-                  undefined,
+                  [
+                    {
+                      "color": "rgba(29, 27, 32, 1)",
+                    },
+                    undefined,
+                  ],
                 ],
               ]
             }
@@ -833,44 +908,56 @@ exports[`renders list accordion with left items 1`] = `
         </View>
         <View
           style={
-            [
-              {
-                "marginVertical": 6,
-                "paddingLeft": 8,
-              },
-              undefined,
-            ]
+            {
+              "alignSelf": "center",
+              "paddingLeft": 16,
+            }
           }
         >
-          <Text
-            accessibilityElementsHidden={true}
-            importantForAccessibility="no-hide-descendants"
-            pointerEvents="none"
-            selectable={false}
+          <View
+            collapsable={false}
             style={
               [
                 {
-                  "color": "rgba(73, 69, 79, 1)",
-                  "fontSize": 24,
+                  "transform": [
+                    {
+                      "rotate": "0deg",
+                    },
+                  ],
                 },
-                [
-                  {
-                    "lineHeight": 24,
-                    "transform": [
-                      {
-                        "scaleX": 1,
-                      },
-                    ],
-                  },
-                  {
-                    "backgroundColor": "transparent",
-                  },
-                ],
               ]
             }
           >
-            chevron-down
-          </Text>
+            <Text
+              accessibilityElementsHidden={true}
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              selectable={false}
+              style={
+                [
+                  {
+                    "color": "rgba(29, 27, 32, 1)",
+                    "fontSize": 24,
+                  },
+                  [
+                    {
+                      "lineHeight": 24,
+                      "transform": [
+                        {
+                          "scaleX": 1,
+                        },
+                      ],
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                    },
+                  ],
+                ]
+              }
+            >
+              chevron-down
+            </Text>
+          </View>
         </View>
       </View>
     </View>
@@ -925,9 +1012,14 @@ exports[`renders multiline list accordion 1`] = `
           },
           [
             {
-              "paddingRight": 24,
+              "justifyContent": "center",
+              "paddingRight": 16,
               "paddingVertical": 8,
             },
+            {
+              "minHeight": 72,
+            },
+            false,
             undefined,
           ],
         ]
@@ -939,7 +1031,6 @@ exports[`renders multiline list accordion 1`] = `
           [
             {
               "flexDirection": "row",
-              "marginVertical": 6,
             },
             undefined,
           ]
@@ -969,21 +1060,22 @@ exports[`renders multiline list accordion 1`] = `
                 },
                 {
                   "color": "rgba(29, 27, 32, 1)",
-                  "fontFamily": "System",
-                  "fontWeight": "400",
-                  "letterSpacing": 0,
-                },
-                {
                   "writingDirection": "ltr",
                 },
                 [
                   {
+                    "fontFamily": "System",
                     "fontSize": 16,
+                    "fontWeight": "400",
+                    "letterSpacing": 0.5,
+                    "lineHeight": 24,
                   },
-                  {
-                    "color": "rgba(29, 27, 32, 1)",
-                  },
-                  undefined,
+                  [
+                    {
+                      "color": "rgba(29, 27, 32, 1)",
+                    },
+                    undefined,
+                  ],
                 ],
               ]
             }
@@ -1001,21 +1093,22 @@ exports[`renders multiline list accordion 1`] = `
                 },
                 {
                   "color": "rgba(29, 27, 32, 1)",
-                  "fontFamily": "System",
-                  "fontWeight": "400",
-                  "letterSpacing": 0,
-                },
-                {
                   "writingDirection": "ltr",
                 },
                 [
                   {
+                    "fontFamily": "System",
                     "fontSize": 14,
+                    "fontWeight": "400",
+                    "letterSpacing": 0.25,
+                    "lineHeight": 20,
                   },
-                  {
-                    "color": "rgba(73, 69, 79, 1)",
-                  },
-                  undefined,
+                  [
+                    {
+                      "color": "rgba(73, 69, 79, 1)",
+                    },
+                    undefined,
+                  ],
                 ],
               ]
             }
@@ -1025,48 +1118,56 @@ exports[`renders multiline list accordion 1`] = `
         </View>
         <View
           style={
-            [
-              {
-                "marginVertical": 6,
-                "paddingLeft": 8,
-              },
-              {
-                "alignItems": "center",
-                "height": 40,
-                "justifyContent": "center",
-              },
-            ]
+            {
+              "alignSelf": "center",
+              "paddingLeft": 16,
+            }
           }
         >
-          <Text
-            accessibilityElementsHidden={true}
-            importantForAccessibility="no-hide-descendants"
-            pointerEvents="none"
-            selectable={false}
+          <View
+            collapsable={false}
             style={
               [
                 {
-                  "color": "rgba(73, 69, 79, 1)",
-                  "fontSize": 24,
+                  "transform": [
+                    {
+                      "rotate": "0deg",
+                    },
+                  ],
                 },
-                [
-                  {
-                    "lineHeight": 24,
-                    "transform": [
-                      {
-                        "scaleX": 1,
-                      },
-                    ],
-                  },
-                  {
-                    "backgroundColor": "transparent",
-                  },
-                ],
               ]
             }
           >
-            chevron-down
-          </Text>
+            <Text
+              accessibilityElementsHidden={true}
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              selectable={false}
+              style={
+                [
+                  {
+                    "color": "rgba(29, 27, 32, 1)",
+                    "fontSize": 24,
+                  },
+                  [
+                    {
+                      "lineHeight": 24,
+                      "transform": [
+                        {
+                          "scaleX": 1,
+                        },
+                      ],
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                    },
+                  ],
+                ]
+              }
+            >
+              chevron-down
+            </Text>
+          </View>
         </View>
       </View>
     </View>
diff --git a/src/components/__tests__/__snapshots__/ListImage.test.tsx.snap b/src/components/__tests__/__snapshots__/ListImage.test.tsx.snap
index 927779644c..abf60d8b22 100644
--- a/src/components/__tests__/__snapshots__/ListImage.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/ListImage.test.tsx.snap
@@ -36,6 +36,9 @@ exports[`renders ListImage with \`video\` variant 1`] = `
         "marginLeft": 0,
         "width": 114,
       },
+      {
+        "marginVertical": 4,
+      },
     ]
   }
 />
diff --git a/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap b/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap
index e63259b5ef..6793c84fae 100644
--- a/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap
@@ -38,9 +38,18 @@ exports[`renders list item with custom content style 1`] = `
       false,
       [
         {
-          "paddingRight": 24,
+          "justifyContent": "center",
+          "paddingRight": 16,
           "paddingVertical": 8,
         },
+        {
+          "minHeight": 72,
+        },
+        false,
+        false,
+        {
+          "backgroundColor": undefined,
+        },
         undefined,
       ],
     ]
@@ -52,7 +61,6 @@ exports[`renders list item with custom content style 1`] = `
       [
         {
           "flexDirection": "row",
-          "marginVertical": 6,
           "width": "100%",
         },
         undefined,
@@ -86,21 +94,22 @@ exports[`renders list item with custom content style 1`] = `
             },
             {
               "color": "rgba(29, 27, 32, 1)",
-              "fontFamily": "System",
-              "fontWeight": "400",
-              "letterSpacing": 0,
-            },
-            {
               "writingDirection": "ltr",
             },
             [
               {
+                "fontFamily": "System",
                 "fontSize": 16,
+                "fontWeight": "400",
+                "letterSpacing": 0.5,
+                "lineHeight": 24,
               },
-              {
-                "color": "rgba(29, 27, 32, 1)",
-              },
-              undefined,
+              [
+                {
+                  "color": "rgba(29, 27, 32, 1)",
+                },
+                undefined,
+              ],
             ],
           ]
         }
@@ -118,21 +127,22 @@ exports[`renders list item with custom content style 1`] = `
             },
             {
               "color": "rgba(29, 27, 32, 1)",
-              "fontFamily": "System",
-              "fontWeight": "400",
-              "letterSpacing": 0,
-            },
-            {
               "writingDirection": "ltr",
             },
             [
               {
+                "fontFamily": "System",
                 "fontSize": 14,
+                "fontWeight": "400",
+                "letterSpacing": 0.25,
+                "lineHeight": 20,
               },
-              {
-                "color": "rgba(73, 69, 79, 1)",
-              },
-              undefined,
+              [
+                {
+                  "color": "rgba(73, 69, 79, 1)",
+                },
+                undefined,
+              ],
             ],
           ]
         }
@@ -180,9 +190,18 @@ exports[`renders list item with custom description 1`] = `
       false,
       [
         {
-          "paddingRight": 24,
+          "justifyContent": "center",
+          "paddingRight": 16,
           "paddingVertical": 8,
         },
+        {
+          "minHeight": 72,
+        },
+        false,
+        false,
+        {
+          "backgroundColor": undefined,
+        },
         undefined,
       ],
     ]
@@ -194,7 +213,6 @@ exports[`renders list item with custom description 1`] = `
       [
         {
           "flexDirection": "row",
-          "marginVertical": 6,
           "width": "100%",
         },
         undefined,
@@ -226,21 +244,22 @@ exports[`renders list item with custom description 1`] = `
             },
             {
               "color": "rgba(29, 27, 32, 1)",
-              "fontFamily": "System",
-              "fontWeight": "400",
-              "letterSpacing": 0,
-            },
-            {
               "writingDirection": "ltr",
             },
             [
               {
+                "fontFamily": "System",
                 "fontSize": 16,
+                "fontWeight": "400",
+                "letterSpacing": 0.5,
+                "lineHeight": 24,
               },
-              {
-                "color": "rgba(29, 27, 32, 1)",
-              },
-              undefined,
+              [
+                {
+                  "color": "rgba(29, 27, 32, 1)",
+                },
+                undefined,
+              ],
             ],
           ]
         }
@@ -560,9 +579,18 @@ exports[`renders list item with custom title and description styles 1`] = `
       false,
       [
         {
-          "paddingRight": 24,
+          "justifyContent": "center",
+          "paddingRight": 16,
           "paddingVertical": 8,
         },
+        {
+          "minHeight": 72,
+        },
+        false,
+        false,
+        {
+          "backgroundColor": undefined,
+        },
         undefined,
       ],
     ]
@@ -574,7 +602,6 @@ exports[`renders list item with custom title and description styles 1`] = `
       [
         {
           "flexDirection": "row",
-          "marginVertical": 6,
           "width": "100%",
         },
         undefined,
@@ -606,23 +633,24 @@ exports[`renders list item with custom title and description styles 1`] = `
             },
             {
               "color": "rgba(29, 27, 32, 1)",
-              "fontFamily": "System",
-              "fontWeight": "400",
-              "letterSpacing": 0,
-            },
-            {
               "writingDirection": "ltr",
             },
             [
               {
+                "fontFamily": "System",
                 "fontSize": 16,
+                "fontWeight": "400",
+                "letterSpacing": 0.5,
+                "lineHeight": 24,
               },
-              {
-                "color": "rgba(29, 27, 32, 1)",
-              },
-              {
-                "fontSize": 20,
-              },
+              [
+                {
+                  "color": "rgba(29, 27, 32, 1)",
+                },
+                {
+                  "fontSize": 20,
+                },
+              ],
             ],
           ]
         }
@@ -640,23 +668,24 @@ exports[`renders list item with custom title and description styles 1`] = `
             },
             {
               "color": "rgba(29, 27, 32, 1)",
-              "fontFamily": "System",
-              "fontWeight": "400",
-              "letterSpacing": 0,
-            },
-            {
               "writingDirection": "ltr",
             },
             [
               {
+                "fontFamily": "System",
                 "fontSize": 14,
+                "fontWeight": "400",
+                "letterSpacing": 0.25,
+                "lineHeight": 20,
               },
-              {
-                "color": "rgba(73, 69, 79, 1)",
-              },
-              {
-                "color": "#f44336",
-              },
+              [
+                {
+                  "color": "rgba(73, 69, 79, 1)",
+                },
+                {
+                  "color": "#f44336",
+                },
+              ],
             ],
           ]
         }
@@ -704,9 +733,18 @@ exports[`renders list item with left and right items 1`] = `
       false,
       [
         {
-          "paddingRight": 24,
+          "justifyContent": "center",
+          "paddingRight": 16,
           "paddingVertical": 8,
         },
+        {
+          "minHeight": 72,
+        },
+        false,
+        false,
+        {
+          "backgroundColor": undefined,
+        },
         undefined,
       ],
     ]
@@ -718,7 +756,6 @@ exports[`renders list item with left and right items 1`] = `
       [
         {
           "flexDirection": "row",
-          "marginVertical": 6,
           "width": "100%",
         },
         undefined,
@@ -753,21 +790,22 @@ exports[`renders list item with left and right items 1`] = `
             },
             {
               "color": "rgba(29, 27, 32, 1)",
-              "fontFamily": "System",
-              "fontWeight": "400",
-              "letterSpacing": 0,
-            },
-            {
               "writingDirection": "ltr",
             },
             [
               {
+                "fontFamily": "System",
                 "fontSize": 16,
+                "fontWeight": "400",
+                "letterSpacing": 0.5,
+                "lineHeight": 24,
               },
-              {
-                "color": "rgba(29, 27, 32, 1)",
-              },
-              undefined,
+              [
+                {
+                  "color": "rgba(29, 27, 32, 1)",
+                },
+                undefined,
+              ],
             ],
           ]
         }
@@ -785,21 +823,22 @@ exports[`renders list item with left and right items 1`] = `
             },
             {
               "color": "rgba(29, 27, 32, 1)",
-              "fontFamily": "System",
-              "fontWeight": "400",
-              "letterSpacing": 0,
-            },
-            {
               "writingDirection": "ltr",
             },
             [
               {
+                "fontFamily": "System",
                 "fontSize": 14,
+                "fontWeight": "400",
+                "letterSpacing": 0.25,
+                "lineHeight": 20,
               },
-              {
-                "color": "rgba(73, 69, 79, 1)",
-              },
-              undefined,
+              [
+                {
+                  "color": "rgba(73, 69, 79, 1)",
+                },
+                undefined,
+              ],
             ],
           ]
         }
@@ -893,9 +932,18 @@ exports[`renders list item with left item 1`] = `
       false,
       [
         {
-          "paddingRight": 24,
+          "justifyContent": "center",
+          "paddingRight": 16,
           "paddingVertical": 8,
         },
+        {
+          "minHeight": 56,
+        },
+        false,
+        false,
+        {
+          "backgroundColor": undefined,
+        },
         undefined,
       ],
     ]
@@ -907,7 +955,6 @@ exports[`renders list item with left item 1`] = `
       [
         {
           "flexDirection": "row",
-          "marginVertical": 6,
           "width": "100%",
         },
         undefined,
@@ -986,21 +1033,22 @@ exports[`renders list item with left item 1`] = `
             },
             {
               "color": "rgba(29, 27, 32, 1)",
-              "fontFamily": "System",
-              "fontWeight": "400",
-              "letterSpacing": 0,
-            },
-            {
               "writingDirection": "ltr",
             },
             [
               {
+                "fontFamily": "System",
                 "fontSize": 16,
+                "fontWeight": "400",
+                "letterSpacing": 0.5,
+                "lineHeight": 24,
               },
-              {
-                "color": "rgba(29, 27, 32, 1)",
-              },
-              undefined,
+              [
+                {
+                  "color": "rgba(29, 27, 32, 1)",
+                },
+                undefined,
+              ],
             ],
           ]
         }
@@ -1048,9 +1096,18 @@ exports[`renders list item with right item 1`] = `
       false,
       [
         {
-          "paddingRight": 24,
+          "justifyContent": "center",
+          "paddingRight": 16,
           "paddingVertical": 8,
         },
+        {
+          "minHeight": 56,
+        },
+        false,
+        false,
+        {
+          "backgroundColor": undefined,
+        },
         undefined,
       ],
     ]
@@ -1062,7 +1119,6 @@ exports[`renders list item with right item 1`] = `
       [
         {
           "flexDirection": "row",
-          "marginVertical": 6,
           "width": "100%",
         },
         undefined,
@@ -1094,21 +1150,22 @@ exports[`renders list item with right item 1`] = `
             },
             {
               "color": "rgba(29, 27, 32, 1)",
-              "fontFamily": "System",
-              "fontWeight": "400",
-              "letterSpacing": 0,
-            },
-            {
               "writingDirection": "ltr",
             },
             [
               {
+                "fontFamily": "System",
                 "fontSize": 16,
+                "fontWeight": "400",
+                "letterSpacing": 0.5,
+                "lineHeight": 24,
               },
-              {
-                "color": "rgba(29, 27, 32, 1)",
-              },
-              undefined,
+              [
+                {
+                  "color": "rgba(29, 27, 32, 1)",
+                },
+                undefined,
+              ],
             ],
           ]
         }
@@ -1159,9 +1216,18 @@ exports[`renders list item with title and description 1`] = `
       false,
       [
         {
-          "paddingRight": 24,
+          "justifyContent": "center",
+          "paddingRight": 16,
           "paddingVertical": 8,
         },
+        {
+          "minHeight": 72,
+        },
+        false,
+        false,
+        {
+          "backgroundColor": undefined,
+        },
         undefined,
       ],
     ]
@@ -1173,7 +1239,6 @@ exports[`renders list item with title and description 1`] = `
       [
         {
           "flexDirection": "row",
-          "marginVertical": 6,
           "width": "100%",
         },
         undefined,
@@ -1205,21 +1270,22 @@ exports[`renders list item with title and description 1`] = `
             },
             {
               "color": "rgba(29, 27, 32, 1)",
-              "fontFamily": "System",
-              "fontWeight": "400",
-              "letterSpacing": 0,
-            },
-            {
               "writingDirection": "ltr",
             },
             [
               {
+                "fontFamily": "System",
                 "fontSize": 16,
+                "fontWeight": "400",
+                "letterSpacing": 0.5,
+                "lineHeight": 24,
               },
-              {
-                "color": "rgba(29, 27, 32, 1)",
-              },
-              undefined,
+              [
+                {
+                  "color": "rgba(29, 27, 32, 1)",
+                },
+                undefined,
+              ],
             ],
           ]
         }
@@ -1237,21 +1303,22 @@ exports[`renders list item with title and description 1`] = `
             },
             {
               "color": "rgba(29, 27, 32, 1)",
-              "fontFamily": "System",
-              "fontWeight": "400",
-              "letterSpacing": 0,
-            },
-            {
               "writingDirection": "ltr",
             },
             [
               {
+                "fontFamily": "System",
                 "fontSize": 14,
+                "fontWeight": "400",
+                "letterSpacing": 0.25,
+                "lineHeight": 20,
               },
-              {
-                "color": "rgba(73, 69, 79, 1)",
-              },
-              undefined,
+              [
+                {
+                  "color": "rgba(73, 69, 79, 1)",
+                },
+                undefined,
+              ],
             ],
           ]
         }
@@ -1299,9 +1366,18 @@ exports[`renders with a description with typeof number 1`] = `
       false,
       [
         {
-          "paddingRight": 24,
+          "justifyContent": "center",
+          "paddingRight": 16,
           "paddingVertical": 8,
         },
+        {
+          "minHeight": 72,
+        },
+        false,
+        false,
+        {
+          "backgroundColor": undefined,
+        },
         undefined,
       ],
     ]
@@ -1313,7 +1389,6 @@ exports[`renders with a description with typeof number 1`] = `
       [
         {
           "flexDirection": "row",
-          "marginVertical": 6,
           "width": "100%",
         },
         undefined,
@@ -1345,23 +1420,24 @@ exports[`renders with a description with typeof number 1`] = `
             },
             {
               "color": "rgba(29, 27, 32, 1)",
-              "fontFamily": "System",
-              "fontWeight": "400",
-              "letterSpacing": 0,
-            },
-            {
               "writingDirection": "ltr",
             },
             [
               {
+                "fontFamily": "System",
                 "fontSize": 16,
+                "fontWeight": "400",
+                "letterSpacing": 0.5,
+                "lineHeight": 24,
               },
-              {
-                "color": "rgba(29, 27, 32, 1)",
-              },
-              {
-                "fontSize": 20,
-              },
+              [
+                {
+                  "color": "rgba(29, 27, 32, 1)",
+                },
+                {
+                  "fontSize": 20,
+                },
+              ],
             ],
           ]
         }
@@ -1379,23 +1455,24 @@ exports[`renders with a description with typeof number 1`] = `
             },
             {
               "color": "rgba(29, 27, 32, 1)",
-              "fontFamily": "System",
-              "fontWeight": "400",
-              "letterSpacing": 0,
-            },
-            {
               "writingDirection": "ltr",
             },
             [
               {
+                "fontFamily": "System",
                 "fontSize": 14,
+                "fontWeight": "400",
+                "letterSpacing": 0.25,
+                "lineHeight": 20,
               },
-              {
-                "color": "rgba(73, 69, 79, 1)",
-              },
-              {
-                "color": "#f44336",
-              },
+              [
+                {
+                  "color": "rgba(73, 69, 79, 1)",
+                },
+                {
+                  "color": "#f44336",
+                },
+              ],
             ],
           ]
         }
diff --git a/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap b/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap
index a64f2e3662..3bab20e89b 100644
--- a/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap
@@ -488,9 +488,18 @@ exports[`renders list section with custom title style 1`] = `
         false,
         [
           {
-            "paddingRight": 24,
+            "justifyContent": "center",
+            "paddingRight": 16,
             "paddingVertical": 8,
           },
+          {
+            "minHeight": 56,
+          },
+          false,
+          false,
+          {
+            "backgroundColor": undefined,
+          },
           undefined,
         ],
       ]
@@ -502,7 +511,6 @@ exports[`renders list section with custom title style 1`] = `
         [
           {
             "flexDirection": "row",
-            "marginVertical": 6,
             "width": "100%",
           },
           undefined,
@@ -581,21 +589,22 @@ exports[`renders list section with custom title style 1`] = `
               },
               {
                 "color": "rgba(29, 27, 32, 1)",
-                "fontFamily": "System",
-                "fontWeight": "400",
-                "letterSpacing": 0,
-              },
-              {
                 "writingDirection": "ltr",
               },
               [
                 {
+                  "fontFamily": "System",
                   "fontSize": 16,
+                  "fontWeight": "400",
+                  "letterSpacing": 0.5,
+                  "lineHeight": 24,
                 },
-                {
-                  "color": "rgba(29, 27, 32, 1)",
-                },
-                undefined,
+                [
+                  {
+                    "color": "rgba(29, 27, 32, 1)",
+                  },
+                  undefined,
+                ],
               ],
             ]
           }
@@ -640,9 +649,18 @@ exports[`renders list section with custom title style 1`] = `
         false,
         [
           {
-            "paddingRight": 24,
+            "justifyContent": "center",
+            "paddingRight": 16,
             "paddingVertical": 8,
           },
+          {
+            "minHeight": 56,
+          },
+          false,
+          false,
+          {
+            "backgroundColor": undefined,
+          },
           undefined,
         ],
       ]
@@ -654,7 +672,6 @@ exports[`renders list section with custom title style 1`] = `
         [
           {
             "flexDirection": "row",
-            "marginVertical": 6,
             "width": "100%",
           },
           undefined,
@@ -733,21 +750,22 @@ exports[`renders list section with custom title style 1`] = `
               },
               {
                 "color": "rgba(29, 27, 32, 1)",
-                "fontFamily": "System",
-                "fontWeight": "400",
-                "letterSpacing": 0,
-              },
-              {
                 "writingDirection": "ltr",
               },
               [
                 {
+                  "fontFamily": "System",
                   "fontSize": 16,
+                  "fontWeight": "400",
+                  "letterSpacing": 0.5,
+                  "lineHeight": 24,
                 },
-                {
-                  "color": "rgba(29, 27, 32, 1)",
-                },
-                undefined,
+                [
+                  {
+                    "color": "rgba(29, 27, 32, 1)",
+                  },
+                  undefined,
+                ],
               ],
             ]
           }
@@ -1246,9 +1264,18 @@ exports[`renders list section with subheader 1`] = `
         false,
         [
           {
-            "paddingRight": 24,
+            "justifyContent": "center",
+            "paddingRight": 16,
             "paddingVertical": 8,
           },
+          {
+            "minHeight": 56,
+          },
+          false,
+          false,
+          {
+            "backgroundColor": undefined,
+          },
           undefined,
         ],
       ]
@@ -1260,7 +1287,6 @@ exports[`renders list section with subheader 1`] = `
         [
           {
             "flexDirection": "row",
-            "marginVertical": 6,
             "width": "100%",
           },
           undefined,
@@ -1339,21 +1365,22 @@ exports[`renders list section with subheader 1`] = `
               },
               {
                 "color": "rgba(29, 27, 32, 1)",
-                "fontFamily": "System",
-                "fontWeight": "400",
-                "letterSpacing": 0,
-              },
-              {
                 "writingDirection": "ltr",
               },
               [
                 {
+                  "fontFamily": "System",
                   "fontSize": 16,
+                  "fontWeight": "400",
+                  "letterSpacing": 0.5,
+                  "lineHeight": 24,
                 },
-                {
-                  "color": "rgba(29, 27, 32, 1)",
-                },
-                undefined,
+                [
+                  {
+                    "color": "rgba(29, 27, 32, 1)",
+                  },
+                  undefined,
+                ],
               ],
             ]
           }
@@ -1398,9 +1425,18 @@ exports[`renders list section with subheader 1`] = `
         false,
         [
           {
-            "paddingRight": 24,
+            "justifyContent": "center",
+            "paddingRight": 16,
             "paddingVertical": 8,
           },
+          {
+            "minHeight": 56,
+          },
+          false,
+          false,
+          {
+            "backgroundColor": undefined,
+          },
           undefined,
         ],
       ]
@@ -1412,7 +1448,6 @@ exports[`renders list section with subheader 1`] = `
         [
           {
             "flexDirection": "row",
-            "marginVertical": 6,
             "width": "100%",
           },
           undefined,
@@ -1491,21 +1526,22 @@ exports[`renders list section with subheader 1`] = `
               },
               {
                 "color": "rgba(29, 27, 32, 1)",
-                "fontFamily": "System",
-                "fontWeight": "400",
-                "letterSpacing": 0,
-              },
-              {
                 "writingDirection": "ltr",
               },
               [
                 {
+                  "fontFamily": "System",
                   "fontSize": 16,
+                  "fontWeight": "400",
+                  "letterSpacing": 0.5,
+                  "lineHeight": 24,
                 },
-                {
-                  "color": "rgba(29, 27, 32, 1)",
-                },
-                undefined,
+                [
+                  {
+                    "color": "rgba(29, 27, 32, 1)",
+                  },
+                  undefined,
+                ],
               ],
             ]
           }
@@ -1964,9 +2000,18 @@ exports[`renders list section without subheader 1`] = `
         false,
         [
           {
-            "paddingRight": 24,
+            "justifyContent": "center",
+            "paddingRight": 16,
             "paddingVertical": 8,
           },
+          {
+            "minHeight": 56,
+          },
+          false,
+          false,
+          {
+            "backgroundColor": undefined,
+          },
           undefined,
         ],
       ]
@@ -1978,7 +2023,6 @@ exports[`renders list section without subheader 1`] = `
         [
           {
             "flexDirection": "row",
-            "marginVertical": 6,
             "width": "100%",
           },
           undefined,
@@ -2057,21 +2101,22 @@ exports[`renders list section without subheader 1`] = `
               },
               {
                 "color": "rgba(29, 27, 32, 1)",
-                "fontFamily": "System",
-                "fontWeight": "400",
-                "letterSpacing": 0,
-              },
-              {
                 "writingDirection": "ltr",
               },
               [
                 {
+                  "fontFamily": "System",
                   "fontSize": 16,
+                  "fontWeight": "400",
+                  "letterSpacing": 0.5,
+                  "lineHeight": 24,
                 },
-                {
-                  "color": "rgba(29, 27, 32, 1)",
-                },
-                undefined,
+                [
+                  {
+                    "color": "rgba(29, 27, 32, 1)",
+                  },
+                  undefined,
+                ],
               ],
             ]
           }
@@ -2116,9 +2161,18 @@ exports[`renders list section without subheader 1`] = `
         false,
         [
           {
-            "paddingRight": 24,
+            "justifyContent": "center",
+            "paddingRight": 16,
             "paddingVertical": 8,
           },
+          {
+            "minHeight": 56,
+          },
+          false,
+          false,
+          {
+            "backgroundColor": undefined,
+          },
           undefined,
         ],
       ]
@@ -2130,7 +2184,6 @@ exports[`renders list section without subheader 1`] = `
         [
           {
             "flexDirection": "row",
-            "marginVertical": 6,
             "width": "100%",
           },
           undefined,
@@ -2209,21 +2262,22 @@ exports[`renders list section without subheader 1`] = `
               },
               {
                 "color": "rgba(29, 27, 32, 1)",
-                "fontFamily": "System",
-                "fontWeight": "400",
-                "letterSpacing": 0,
-              },
-              {
                 "writingDirection": "ltr",
               },
               [
                 {
+                  "fontFamily": "System",
                   "fontSize": 16,
+                  "fontWeight": "400",
+                  "letterSpacing": 0.5,
+                  "lineHeight": 24,
                 },
-                {
-                  "color": "rgba(29, 27, 32, 1)",
-                },
-                undefined,
+                [
+                  {
+                    "color": "rgba(29, 27, 32, 1)",
+                  },
+                  undefined,
+                ],
               ],
             ]
           }