diff --git a/example/src/Examples/ListItemExample.tsx b/example/src/Examples/ListItemExample.tsx
index 4d5a69b400..923c3f7c53 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)}
+          left={(props) => <List.Icon {...props} 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 97730d58e6..831f218591 100644
--- a/src/components/List/ListAccordion.tsx
+++ b/src/components/List/ListAccordion.tsx
@@ -12,11 +12,25 @@ 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 { ListAccordionGroupContext } from './ListAccordionGroup';
+import { ListTokens } from './tokens';
 import type { ListChildProps, 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 '../../types';
 import MaterialCommunityIcon from '../MaterialCommunityIcon';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
@@ -46,6 +60,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.
    */
@@ -190,6 +208,7 @@ const ListAccordion = ({
   onLongPress,
   delayLongPress,
   expanded: expandedProp,
+  selected,
   'aria-label': ariaLabel,
   pointerEvents = 'none',
   titleMaxFontSizeMultiplier,
@@ -201,13 +220,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) => {
@@ -232,100 +252,186 @@ 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]
+  );
+
   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
-        ? React.Children.map(children, (child) => {
+      {isExpanded ? (
+        <Animated.View
+          entering={expandAnimation}
+          exiting={collapseAnimation}
+          style={styles.expandedContent}
+        >
+          {React.Children.map(children, (child) => {
             if (
               left &&
               React.isValidElement<ListChildProps>(child) &&
@@ -339,8 +445,9 @@ const ListAccordion = ({
             }
 
             return child;
-          })
-        : null}
+          })}
+        </Animated.View>
+      ) : null}
     </View>
   );
 };
@@ -349,34 +456,35 @@ 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,
   },
   child: {
     paddingLeft: 40,
   },
+  expandedContent: {
+    overflow: 'hidden',
+  },
   content: {
     flex: 1,
     justifyContent: 'center',
diff --git a/src/components/List/ListImage.tsx b/src/components/List/ListImage.tsx
index 907c1b63b2..6c2650720d 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 '../../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 a6f0181f02..31d67d6c7e 100644
--- a/src/components/List/ListItem.tsx
+++ b/src/components/List/ListItem.tsx
@@ -10,7 +10,8 @@ import type {
   ViewStyle,
 } from 'react-native';
 
-import { getLeftStyles, getRightStyles } from './utils';
+import { ListTokens } from './tokens';
+import { ListRowContext, getLeftStyles, getRightStyles } from './utils';
 import type { Style } from './utils';
 import { useInternalTheme } from '../../core/theming';
 import type { $RemoveChildren, EllipsizeProp, ThemeProp } from '../../types';
@@ -52,6 +53,10 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
    * 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.
    */
@@ -143,6 +148,7 @@ const ListItem = ({
   right,
   title,
   description,
+  selected,
   onPress,
   theme: themeOverrides,
   style,
@@ -161,15 +167,23 @@ const ListItem = ({
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
-  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
@@ -179,18 +193,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}
       >
@@ -200,21 +212,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}
@@ -222,42 +234,66 @@ 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]
+  );
 
   return (
-    <TouchableRipple
-      {...rest}
-      ref={ref}
-      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]}
-          testID={`${testID}-content`}
-        >
-          {renderTitle()}
+    <ListRowContext.Provider value={rowContext}>
+      <TouchableRipple
+        {...rest}
+        ref={ref}
+        style={[
+          styles.container,
+          description ? styles.containerTwoLine : styles.containerOneLine,
+          isDescriptionMultiline && styles.containerThreeLine,
+          { backgroundColor },
+          style,
+        ]}
+        onPress={onPress}
+        aria-selected={selected}
+        theme={theme}
+        testID={testID}
+      >
+        <View style={[styles.row, containerStyle]}>
+          {left
+            ? left({
+                color: selected
+                  ? theme.colors[ListTokens.selectedContentColor]
+                  : theme.colors[ListTokens.leadingIconColor],
+                style: getLeftStyles(isDescriptionMultiline, description),
+              })
+            : null}
+          <View
+            style={[styles.item, styles.content, contentStyle]}
+            testID={`${testID}-content`}
+          >
+            {renderTitle()}
 
-          {description
-            ? renderDescription(descriptionColor, description)
+            {description
+              ? renderDescription(descriptionColor, description)
+              : null}
+          </View>
+          {right
+            ? right({
+                color: selected
+                  ? theme.colors[ListTokens.selectedContentColor]
+                  : theme.colors[ListTokens.trailingIconColor],
+                style: getRightStyles(isDescriptionMultiline, description),
+              })
             : null}
         </View>
-        {right
-          ? right({
-              color: descriptionColor,
-              style: getRightStyles(alignToTop, description),
-            })
-          : null}
-      </View>
-    </TouchableRipple>
+      </TouchableRipple>
+    </ListRowContext.Provider>
   );
 };
 
@@ -265,22 +301,25 @@ 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,
   },
   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/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 7b7a868de0..b67b0000a1 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, ViewStyle } from 'react-native';
 
+import { ListTokens } from './tokens';
 import type { EllipsizeProp, InternalTheme, ThemeProp } from '../../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 ad1783ec52..e7fa7318de 100644
--- a/src/components/__tests__/ListAccordion.test.tsx
+++ b/src/components/__tests__/ListAccordion.test.tsx
@@ -3,13 +3,12 @@ import { StyleSheet, View } from 'react-native';
 import { describe, expect, it } from '@jest/globals';
 
 import { getTheme } from '../../core/theming';
-import { render } from '../../test-utils';
+import { fireEvent, render, screen } from '../../test-utils';
 import { red500 } from '../../theme/colors';
 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: {
@@ -120,39 +119,117 @@ 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: getTheme(),
-      })
-    ).toMatchObject({
-      descriptionColor: getTheme().colors.onSurfaceVariant,
+  it('keeps the title on onSurface when collapsed', async () => {
+    await render(
+      <ListAccordion title="Accordion item 1">
+        <ListItem title="List item 1" />
+      </ListAccordion>
+    );
+
+    expect(screen.getByText('Accordion item 1')).toHaveStyle({
+      color: getTheme().colors.onSurface,
     });
   });
-});
 
-describe('getAccordionColors - title text color', () => {
-  it('should return theme color, for theme version 3', () => {
-    expect(
-      getAccordionColors({
-        theme: getTheme(),
-      })
-    ).toMatchObject({
-      titleTextColor: getTheme().colors.onSurface,
+  it('keeps the title on onSurface when expanded', async () => {
+    await render(
+      <ListAccordion title="Accordion item 1" expanded>
+        <ListItem title="List item 1" />
+      </ListAccordion>
+    );
+
+    expect(screen.getByText('Accordion item 1')).toHaveStyle({
+      color: getTheme().colors.onSurface,
     });
   });
 
-  it('should return primary color if it is expanded', () => {
+  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('uses the expand token for the chevron', async () => {
+    await render(
+      <ListAccordion title="Accordion item 1">
+        <ListItem title="List item 1" />
+      </ListAccordion>
+    );
+
     expect(
-      getAccordionColors({
-        theme: getTheme(),
-        isExpanded: true,
-      })
-    ).toMatchObject({
-      titleTextColor: getTheme().colors?.primary,
+      screen.getByText('chevron-down', { includeHiddenElements: true })
+    ).toHaveStyle({
+      color: getTheme().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: getTheme().colors.onPrimaryContainer,
+    });
+    expect(screen.getByText('Supporting')).toHaveStyle({
+      color: getTheme().colors.onPrimaryContainer,
     });
   });
 });
diff --git a/src/components/__tests__/ListImage.test.tsx b/src/components/__tests__/ListImage.test.tsx
index 8aa7e9b54d..3001324a99 100644
--- a/src/components/__tests__/ListImage.test.tsx
+++ b/src/components/__tests__/ListImage.test.tsx
@@ -14,6 +14,7 @@ const styles = StyleSheet.create({
     width: 114,
     height: 64,
     marginLeft: 0,
+    marginVertical: 4,
   },
   container: {
     width: 30,
diff --git a/src/components/__tests__/ListItem.test.tsx b/src/components/__tests__/ListItem.test.tsx
index b50f4e7d3f..f2ff8854eb 100644
--- a/src/components/__tests__/ListItem.test.tsx
+++ b/src/components/__tests__/ListItem.test.tsx
@@ -5,11 +5,13 @@ 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 { getTheme } from '../../core/theming';
+import { fireEvent, render, screen } from '../../test-utils';
 import { red500 } from '../../theme/colors';
 import Chip from '../Chip/Chip';
 import IconButton from '../IconButton/IconButton';
 import ListIcon from '../List/ListIcon';
+import ListImage from '../List/ListImage';
 import ListItem from '../List/ListItem';
 
 const styles = StyleSheet.create({
@@ -22,6 +24,14 @@ const styles = StyleSheet.create({
   content: {
     paddingLeft: 0,
   },
+  avatar: {
+    width: 40,
+    height: 40,
+  },
+  image: {
+    width: 56,
+    height: 56,
+  },
 });
 
 const testID = 'list-item';
@@ -175,3 +185,202 @@ it('renders list item with custom content style', async () => {
 
   expect(screen.getByTestId('list-item-content')).toHaveStyle(styles.content);
 });
+
+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('leaves a 40dp leading element on the one line container height', async () => {
+  await render(
+    <ListItem
+      title="First Item"
+      left={(props) => (
+        <View testID="left-accessory" style={[props.style, styles.avatar]} />
+      )}
+      testID={testID}
+    />
+  );
+
+  expect(screen.getByTestId(testID)).toHaveStyle({
+    minHeight: 56,
+    paddingVertical: 8,
+  });
+  expect(screen.getByTestId('left-accessory')).toHaveStyle({ height: 40 });
+});
+
+it('leaves a 56dp leading image on the two line container height', async () => {
+  await render(
+    <ListItem
+      title="First Item"
+      description="Item description"
+      left={(props) => (
+        <View testID="left-accessory" style={[props.style, styles.image]} />
+      )}
+      testID={testID}
+    />
+  );
+
+  expect(screen.getByTestId(testID)).toHaveStyle({
+    minHeight: 72,
+    paddingVertical: 8,
+  });
+  expect(screen.getByTestId('left-accessory')).toHaveStyle({ height: 56 });
+});
+
+it('pads a 64dp leading video to the three line container height', async () => {
+  await render(
+    <ListItem
+      title="First Item"
+      left={(props) => (
+        <ListImage
+          variant="video"
+          style={props.style}
+          source={{ uri: 'https://www.someurl.com/apple' }}
+        />
+      )}
+      testID={testID}
+    />
+  );
+
+  expect(screen.getByTestId(testID)).toHaveStyle({
+    minHeight: 56,
+    paddingVertical: 8,
+  });
+  expect(screen.getByTestId('list-image')).toHaveStyle({
+    height: 64,
+    marginVertical: 4,
+  });
+});
+
+it('keeps a 64dp leading video on the same height once the description wraps', async () => {
+  await render(
+    <ListItem
+      title="First Item"
+      description="Item description"
+      left={(props) => (
+        <ListImage
+          variant="video"
+          style={props.style}
+          source={{ uri: 'https://www.someurl.com/apple' }}
+        />
+      )}
+      testID={testID}
+    />
+  );
+
+  await fireEvent(screen.getByText('Item description'), 'textLayout', {
+    nativeEvent: { lines: [{}, {}] },
+  });
+
+  expect(screen.getByTestId(testID)).toHaveStyle({ paddingVertical: 12 });
+  expect(screen.getByTestId('list-image')).toHaveStyle({
+    height: 64,
+    marginVertical: 0,
+  });
+});
+
+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('renders an unselected list item on surface colors', async () => {
+  await render(
+    <ListItem
+      title="First Item"
+      description="Item description"
+      testID={testID}
+    />
+  );
+
+  expect(screen.getByText('First Item')).toHaveStyle({
+    color: getTheme().colors.onSurface,
+  });
+  expect(screen.getByText('Item description')).toHaveStyle({
+    color: getTheme().colors.onSurfaceVariant,
+  });
+});
+
+it('renders a selected list item on the primary container', async () => {
+  await render(
+    <ListItem
+      title="First Item"
+      description="Item description"
+      selected
+      testID={testID}
+    />
+  );
+
+  expect(screen.getByTestId(testID)).toHaveStyle({
+    backgroundColor: getTheme().colors.primaryContainer,
+  });
+  expect(screen.getByText('First Item')).toHaveStyle({
+    color: getTheme().colors.onPrimaryContainer,
+  });
+  expect(screen.getByText('Item description')).toHaveStyle({
+    color: getTheme().colors.onPrimaryContainer,
+  });
+});
diff --git a/src/components/__tests__/Tooltip.test.tsx b/src/components/__tests__/Tooltip.test.tsx
index 75b4a18cf7..43904e5bd5 100644
--- a/src/components/__tests__/Tooltip.test.tsx
+++ b/src/components/__tests__/Tooltip.test.tsx
@@ -163,7 +163,7 @@ describe('Tooltip', () => {
       it('hides the tooltip when the user stop pressing the component', async () => {
         const {
           wrapper: { queryByText, getByText, findByText },
-        } = await setup({ enterTouchDelay: 50, leaveTouchDelay: 0 });
+        } = await setup({ enterTouchDelay: 50, leaveTouchDelay: 100 });
 
         await userEvent.longPress(getTrigger(getByText));
 
diff --git a/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap b/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap
index 66fa6d11e8..e665300e3e 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,114 @@ 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
             style={
-              [
-                {
-                  "color": "rgba(73, 69, 79, 1)",
-                  "fontSize": 24,
-                },
-                [
-                  {
-                    "lineHeight": 24,
-                    "transform": [
-                      {
-                        "scaleX": 1,
-                      },
-                    ],
-                  },
+              {
+                "transform": [
                   {
-                    "backgroundColor": "transparent",
+                    "rotate": "180deg",
                   },
                 ],
-              ]
+              }
             }
           >
-            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={
+    entering={[Function]}
+    exiting={[Function]}
+    style={
       {
-        "max": undefined,
-        "min": undefined,
-        "now": undefined,
-        "text": undefined,
+        "overflow": "hidden",
       }
     }
-    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={
-      [
-        false,
-        [
-          {
-            "paddingRight": 24,
-            "paddingVertical": 8,
-          },
-          undefined,
-        ],
-      ]
-    }
   >
     <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,
+            {
+              "backgroundColor": undefined,
+            },
+            undefined,
+          ],
         ]
       }
     >
@@ -216,49 +235,62 @@ exports[`renders expanded accordion 1`] = `
         style={
           [
             {
-              "paddingLeft": 16,
-            },
-            {
-              "flexGrow": 1,
-              "flexShrink": 1,
-              "justifyContent": "center",
+              "flexDirection": "row",
+              "width": "100%",
             },
             undefined,
           ]
         }
-        testID="undefined-content"
       >
-        <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,
+            ]
+          }
+          testID="undefined-content"
+        >
+          <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>
@@ -312,9 +344,14 @@ exports[`renders list accordion with children 1`] = `
           },
           [
             {
-              "paddingRight": 24,
+              "justifyContent": "center",
+              "paddingRight": 16,
               "paddingVertical": 8,
             },
+            {
+              "minHeight": 56,
+            },
+            false,
             undefined,
           ],
         ]
@@ -326,7 +363,6 @@ exports[`renders list accordion with children 1`] = `
           [
             {
               "flexDirection": "row",
-              "marginVertical": 6,
             },
             undefined,
           ]
@@ -403,21 +439,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,
+                  ],
                 ],
               ]
             }
@@ -427,44 +464,53 @@ 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
             style={
-              [
-                {
-                  "color": "rgba(73, 69, 79, 1)",
-                  "fontSize": 24,
-                },
-                [
-                  {
-                    "lineHeight": 24,
-                    "transform": [
-                      {
-                        "scaleX": 1,
-                      },
-                    ],
-                  },
+              {
+                "transform": [
                   {
-                    "backgroundColor": "transparent",
+                    "rotate": "0deg",
                   },
                 ],
-              ]
+              }
             }
           >
-            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>
@@ -519,9 +565,14 @@ exports[`renders list accordion with custom title and description styles 1`] = `
           },
           [
             {
-              "paddingRight": 24,
+              "justifyContent": "center",
+              "paddingRight": 16,
               "paddingVertical": 8,
             },
+            {
+              "minHeight": 72,
+            },
+            false,
             undefined,
           ],
         ]
@@ -533,7 +584,6 @@ exports[`renders list accordion with custom title and description styles 1`] = `
           [
             {
               "flexDirection": "row",
-              "marginVertical": 6,
             },
             undefined,
           ]
@@ -563,23 +613,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",
+                    },
+                  ],
                 ],
               ]
             }
@@ -597,23 +648,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",
+                    },
+                  ],
                 ],
               ]
             }
@@ -623,48 +675,53 @@ 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
             style={
-              [
-                {
-                  "color": "rgba(73, 69, 79, 1)",
-                  "fontSize": 24,
-                },
-                [
-                  {
-                    "lineHeight": 24,
-                    "transform": [
-                      {
-                        "scaleX": 1,
-                      },
-                    ],
-                  },
+              {
+                "transform": [
                   {
-                    "backgroundColor": "transparent",
+                    "rotate": "0deg",
                   },
                 ],
-              ]
+              }
             }
           >
-            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>
@@ -719,9 +776,14 @@ exports[`renders list accordion with left items 1`] = `
           },
           [
             {
-              "paddingRight": 24,
+              "justifyContent": "center",
+              "paddingRight": 16,
               "paddingVertical": 8,
             },
+            {
+              "minHeight": 56,
+            },
+            false,
             undefined,
           ],
         ]
@@ -733,7 +795,6 @@ exports[`renders list accordion with left items 1`] = `
           [
             {
               "flexDirection": "row",
-              "marginVertical": 6,
             },
             undefined,
           ]
@@ -810,21 +871,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,
+                  ],
                 ],
               ]
             }
@@ -834,44 +896,53 @@ 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
             style={
-              [
-                {
-                  "color": "rgba(73, 69, 79, 1)",
-                  "fontSize": 24,
-                },
-                [
-                  {
-                    "lineHeight": 24,
-                    "transform": [
-                      {
-                        "scaleX": 1,
-                      },
-                    ],
-                  },
+              {
+                "transform": [
                   {
-                    "backgroundColor": "transparent",
+                    "rotate": "0deg",
                   },
                 ],
-              ]
+              }
             }
           >
-            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>
@@ -926,9 +997,14 @@ exports[`renders multiline list accordion 1`] = `
           },
           [
             {
-              "paddingRight": 24,
+              "justifyContent": "center",
+              "paddingRight": 16,
               "paddingVertical": 8,
             },
+            {
+              "minHeight": 72,
+            },
+            false,
             undefined,
           ],
         ]
@@ -940,7 +1016,6 @@ exports[`renders multiline list accordion 1`] = `
           [
             {
               "flexDirection": "row",
-              "marginVertical": 6,
             },
             undefined,
           ]
@@ -970,21 +1045,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,
+                  ],
                 ],
               ]
             }
@@ -1002,21 +1078,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,
+                  ],
                 ],
               ]
             }
@@ -1026,48 +1103,53 @@ 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
             style={
-              [
-                {
-                  "color": "rgba(73, 69, 79, 1)",
-                  "fontSize": 24,
-                },
-                [
-                  {
-                    "lineHeight": 24,
-                    "transform": [
-                      {
-                        "scaleX": 1,
-                      },
-                    ],
-                  },
+              {
+                "transform": [
                   {
-                    "backgroundColor": "transparent",
+                    "rotate": "0deg",
                   },
                 ],
-              ]
+              }
             }
           >
-            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__/ListItem.test.tsx.snap b/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap
index f06b87045f..3c7f31ca12 100644
--- a/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap
@@ -36,9 +36,17 @@ exports[`renders list item with custom description 1`] = `
       false,
       [
         {
-          "paddingRight": 24,
+          "justifyContent": "center",
+          "paddingRight": 16,
           "paddingVertical": 8,
         },
+        {
+          "minHeight": 72,
+        },
+        false,
+        {
+          "backgroundColor": undefined,
+        },
         undefined,
       ],
     ]
@@ -50,7 +58,6 @@ exports[`renders list item with custom description 1`] = `
       [
         {
           "flexDirection": "row",
-          "marginVertical": 6,
           "width": "100%",
         },
         undefined,
@@ -83,21 +90,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,
+              ],
             ],
           ]
         }
@@ -362,9 +370,17 @@ exports[`renders list item with custom title and description styles 1`] = `
       false,
       [
         {
-          "paddingRight": 24,
+          "justifyContent": "center",
+          "paddingRight": 16,
           "paddingVertical": 8,
         },
+        {
+          "minHeight": 72,
+        },
+        false,
+        {
+          "backgroundColor": undefined,
+        },
         undefined,
       ],
     ]
@@ -376,7 +392,6 @@ exports[`renders list item with custom title and description styles 1`] = `
       [
         {
           "flexDirection": "row",
-          "marginVertical": 6,
           "width": "100%",
         },
         undefined,
@@ -409,23 +424,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,
+                },
+              ],
             ],
           ]
         }
@@ -443,23 +459,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",
+                },
+              ],
             ],
           ]
         }
@@ -507,9 +524,17 @@ exports[`renders list item with left and right items 1`] = `
       false,
       [
         {
-          "paddingRight": 24,
+          "justifyContent": "center",
+          "paddingRight": 16,
           "paddingVertical": 8,
         },
+        {
+          "minHeight": 72,
+        },
+        false,
+        {
+          "backgroundColor": undefined,
+        },
         undefined,
       ],
     ]
@@ -521,7 +546,6 @@ exports[`renders list item with left and right items 1`] = `
       [
         {
           "flexDirection": "row",
-          "marginVertical": 6,
           "width": "100%",
         },
         undefined,
@@ -557,21 +581,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,
+              ],
             ],
           ]
         }
@@ -589,21 +614,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,
+              ],
             ],
           ]
         }
@@ -697,9 +723,17 @@ exports[`renders list item with left item 1`] = `
       false,
       [
         {
-          "paddingRight": 24,
+          "justifyContent": "center",
+          "paddingRight": 16,
           "paddingVertical": 8,
         },
+        {
+          "minHeight": 56,
+        },
+        false,
+        {
+          "backgroundColor": undefined,
+        },
         undefined,
       ],
     ]
@@ -711,7 +745,6 @@ exports[`renders list item with left item 1`] = `
       [
         {
           "flexDirection": "row",
-          "marginVertical": 6,
           "width": "100%",
         },
         undefined,
@@ -791,21 +824,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,
+              ],
             ],
           ]
         }
@@ -853,9 +887,17 @@ exports[`renders list item with right item 1`] = `
       false,
       [
         {
-          "paddingRight": 24,
+          "justifyContent": "center",
+          "paddingRight": 16,
           "paddingVertical": 8,
         },
+        {
+          "minHeight": 56,
+        },
+        false,
+        {
+          "backgroundColor": undefined,
+        },
         undefined,
       ],
     ]
@@ -867,7 +909,6 @@ exports[`renders list item with right item 1`] = `
       [
         {
           "flexDirection": "row",
-          "marginVertical": 6,
           "width": "100%",
         },
         undefined,
@@ -900,21 +941,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,
+              ],
             ],
           ]
         }
@@ -965,9 +1007,17 @@ exports[`renders list item with title and description 1`] = `
       false,
       [
         {
-          "paddingRight": 24,
+          "justifyContent": "center",
+          "paddingRight": 16,
           "paddingVertical": 8,
         },
+        {
+          "minHeight": 72,
+        },
+        false,
+        {
+          "backgroundColor": undefined,
+        },
         undefined,
       ],
     ]
@@ -979,7 +1029,6 @@ exports[`renders list item with title and description 1`] = `
       [
         {
           "flexDirection": "row",
-          "marginVertical": 6,
           "width": "100%",
         },
         undefined,
@@ -1012,21 +1061,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,
+              ],
             ],
           ]
         }
@@ -1044,21 +1094,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,
+              ],
             ],
           ]
         }
@@ -1106,9 +1157,17 @@ exports[`renders with a description with typeof number 1`] = `
       false,
       [
         {
-          "paddingRight": 24,
+          "justifyContent": "center",
+          "paddingRight": 16,
           "paddingVertical": 8,
         },
+        {
+          "minHeight": 72,
+        },
+        false,
+        {
+          "backgroundColor": undefined,
+        },
         undefined,
       ],
     ]
@@ -1120,7 +1179,6 @@ exports[`renders with a description with typeof number 1`] = `
       [
         {
           "flexDirection": "row",
-          "marginVertical": 6,
           "width": "100%",
         },
         undefined,
@@ -1153,23 +1211,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,
+                },
+              ],
             ],
           ]
         }
@@ -1187,23 +1246,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 7e7dcc158c..bc5c04f24d 100644
--- a/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap
@@ -488,9 +488,17 @@ exports[`renders list section with custom title style 1`] = `
         false,
         [
           {
-            "paddingRight": 24,
+            "justifyContent": "center",
+            "paddingRight": 16,
             "paddingVertical": 8,
           },
+          {
+            "minHeight": 56,
+          },
+          false,
+          {
+            "backgroundColor": undefined,
+          },
           undefined,
         ],
       ]
@@ -502,7 +510,6 @@ exports[`renders list section with custom title style 1`] = `
         [
           {
             "flexDirection": "row",
-            "marginVertical": 6,
             "width": "100%",
           },
           undefined,
@@ -582,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,
+                ],
               ],
             ]
           }
@@ -641,9 +649,17 @@ exports[`renders list section with custom title style 1`] = `
         false,
         [
           {
-            "paddingRight": 24,
+            "justifyContent": "center",
+            "paddingRight": 16,
             "paddingVertical": 8,
           },
+          {
+            "minHeight": 56,
+          },
+          false,
+          {
+            "backgroundColor": undefined,
+          },
           undefined,
         ],
       ]
@@ -655,7 +671,6 @@ exports[`renders list section with custom title style 1`] = `
         [
           {
             "flexDirection": "row",
-            "marginVertical": 6,
             "width": "100%",
           },
           undefined,
@@ -735,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,
+                ],
               ],
             ]
           }
@@ -1248,9 +1264,17 @@ exports[`renders list section with subheader 1`] = `
         false,
         [
           {
-            "paddingRight": 24,
+            "justifyContent": "center",
+            "paddingRight": 16,
             "paddingVertical": 8,
           },
+          {
+            "minHeight": 56,
+          },
+          false,
+          {
+            "backgroundColor": undefined,
+          },
           undefined,
         ],
       ]
@@ -1262,7 +1286,6 @@ exports[`renders list section with subheader 1`] = `
         [
           {
             "flexDirection": "row",
-            "marginVertical": 6,
             "width": "100%",
           },
           undefined,
@@ -1342,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,
+                ],
               ],
             ]
           }
@@ -1401,9 +1425,17 @@ exports[`renders list section with subheader 1`] = `
         false,
         [
           {
-            "paddingRight": 24,
+            "justifyContent": "center",
+            "paddingRight": 16,
             "paddingVertical": 8,
           },
+          {
+            "minHeight": 56,
+          },
+          false,
+          {
+            "backgroundColor": undefined,
+          },
           undefined,
         ],
       ]
@@ -1415,7 +1447,6 @@ exports[`renders list section with subheader 1`] = `
         [
           {
             "flexDirection": "row",
-            "marginVertical": 6,
             "width": "100%",
           },
           undefined,
@@ -1495,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,
+                ],
               ],
             ]
           }
@@ -1968,9 +2000,17 @@ exports[`renders list section without subheader 1`] = `
         false,
         [
           {
-            "paddingRight": 24,
+            "justifyContent": "center",
+            "paddingRight": 16,
             "paddingVertical": 8,
           },
+          {
+            "minHeight": 56,
+          },
+          false,
+          {
+            "backgroundColor": undefined,
+          },
           undefined,
         ],
       ]
@@ -1982,7 +2022,6 @@ exports[`renders list section without subheader 1`] = `
         [
           {
             "flexDirection": "row",
-            "marginVertical": 6,
             "width": "100%",
           },
           undefined,
@@ -2062,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,
+                ],
               ],
             ]
           }
@@ -2121,9 +2161,17 @@ exports[`renders list section without subheader 1`] = `
         false,
         [
           {
-            "paddingRight": 24,
+            "justifyContent": "center",
+            "paddingRight": 16,
             "paddingVertical": 8,
           },
+          {
+            "minHeight": 56,
+          },
+          false,
+          {
+            "backgroundColor": undefined,
+          },
           undefined,
         ],
       ]
@@ -2135,7 +2183,6 @@ exports[`renders list section without subheader 1`] = `
         [
           {
             "flexDirection": "row",
-            "marginVertical": 6,
             "width": "100%",
           },
           undefined,
@@ -2215,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,
+                ],
               ],
             ]
           }