diff --git a/packages/rn-tester/js/RNTesterAppShared.js b/packages/rn-tester/js/RNTesterAppShared.js
index 90609a0b4ab..5b09165f232 100644
--- a/packages/rn-tester/js/RNTesterAppShared.js
+++ b/packages/rn-tester/js/RNTesterAppShared.js
@@ -176,7 +176,10 @@ const RNTesterApp = (): React.Node => {
         onBack={activeModule ? handleBackPress : null}
         documentationURL={activeModule?.documentationURL}
       />
-      <View style={styles.container}>
+      <View
+        style={StyleSheet.compose(styles.container, {
+          backgroundColor: theme.GroupedBackgroundColor,
+        })}>
         {activeModule != null ? (
           <RNTesterModuleContainer
             module={activeModule}
diff --git a/packages/rn-tester/js/components/RNTPressableRow.js b/packages/rn-tester/js/components/RNTPressableRow.js
index 1b111c0122d..ed876f2e2b4 100644
--- a/packages/rn-tester/js/components/RNTPressableRow.js
+++ b/packages/rn-tester/js/components/RNTPressableRow.js
@@ -52,8 +52,8 @@ export default function RNTPressableRow({
         styles.row,
         typeof style === 'function' ? style(pressed) : style,
         pressed
-          ? styles.pressed
-          : {backgroundColor: theme.SystemBackgroundColor},
+          ? {backgroundColor: theme.SecondarySystemFillColor}
+          : {backgroundColor: theme.SecondaryGroupedBackgroundColor},
       ]}
       onPress={onPress}>
       <View style={styles.topRowStyle}>
@@ -86,7 +86,6 @@ const styles = StyleSheet.create({
     marginBottom: 5,
   },
   pressed: {
-    backgroundColor: 'rgb(242,242,242)',
     elevation: 3,
   },
   topRowStyle: {
diff --git a/packages/rn-tester/js/components/RNTTestDetails.js b/packages/rn-tester/js/components/RNTTestDetails.js
index 2f7c247ad8c..5c5094784dc 100644
--- a/packages/rn-tester/js/components/RNTTestDetails.js
+++ b/packages/rn-tester/js/components/RNTTestDetails.js
@@ -9,7 +9,7 @@
  */
 
 import * as React from 'react';
-import {View, Text, StyleSheet, Button} from 'react-native';
+import {View, Text, StyleSheet, Button, Platform} from 'react-native';
 import {type RNTesterTheme} from './RNTesterTheme';
 
 function RNTTestDetails({
@@ -45,6 +45,10 @@ function RNTTestDetails({
     <View
       style={StyleSheet.compose(styles.container, {
         borderColor: theme.SeparatorColor,
+        backgroundColor:
+          Platform.OS === 'ios'
+            ? theme.SystemBackgroundColor
+            : theme.BackgroundColor,
       })}>
       <View style={styles.titleRow}>
         <Text
diff --git a/packages/rn-tester/js/components/RNTTitleBar.js b/packages/rn-tester/js/components/RNTTitleBar.js
index 5774c61f840..8b3d057b180 100644
--- a/packages/rn-tester/js/components/RNTTitleBar.js
+++ b/packages/rn-tester/js/components/RNTTitleBar.js
@@ -33,7 +33,8 @@ const HeaderIOS = ({
 }) => {
   return (
     <SafeAreaView>
-      <View style={styles.header}>
+      <View
+        style={[styles.header, {backgroundColor: theme.SystemBackgroundColor}]}>
         <View style={styles.headerCenter}>
           <Text style={{...styles.title, ...{color: theme.LabelColor}}}>
             {title}
diff --git a/packages/rn-tester/js/components/RNTesterBlock.js b/packages/rn-tester/js/components/RNTesterBlock.js
index 2c83209ac86..214d881a46e 100644
--- a/packages/rn-tester/js/components/RNTesterBlock.js
+++ b/packages/rn-tester/js/components/RNTesterBlock.js
@@ -26,7 +26,7 @@ const RNTesterBlock = ({description, title, children}: Props): React.Node => {
         [styles.container],
         {
           borderColor: theme.SeparatorColor,
-          backgroundColor: theme.SystemBackgroundColor,
+          backgroundColor: theme.SecondaryGroupedBackgroundColor,
         },
       ]}>
       <View style={[styles.titleContainer]}>
diff --git a/packages/rn-tester/js/components/RNTesterEmptyBookmarksState.js b/packages/rn-tester/js/components/RNTesterEmptyBookmarksState.js
index 3a526168a56..31e95953f4b 100644
--- a/packages/rn-tester/js/components/RNTesterEmptyBookmarksState.js
+++ b/packages/rn-tester/js/components/RNTesterEmptyBookmarksState.js
@@ -10,30 +10,34 @@
 
 import * as React from 'react';
 import {View, Image, Text, StyleSheet} from 'react-native';
+import {RNTesterThemeContext} from './RNTesterTheme';
 
-export const RNTesterEmptyBookmarksState = (): React.Node => (
-  <View style={styles.emptyContainer}>
-    <View style={styles.emptyContainerInner}>
-      <Image
-        source={require('../assets/empty.png')}
-        resizeMode="contain"
-        style={styles.emptyImage}
-      />
-      <View>
-        <Text style={styles.heading}>Bookmarks are empty</Text>
-        <Text style={styles.subheading}>
-          Please tap the{' '}
-          <Image
-            source={require('../assets/bookmark-outline-gray.png')}
-            resizeMode="contain"
-            style={styles.bookmarkIcon}
-          />{' '}
-          icon to bookmark examples.
-        </Text>
+export const RNTesterEmptyBookmarksState = (): React.Node => {
+  const theme = React.useContext(RNTesterThemeContext);
+  return (
+    <View
+      style={StyleSheet.compose(styles.emptyContainer, {
+        backgroundColor: theme.GroupedBackgroundColor,
+      })}>
+      <View style={styles.emptyContainerInner}>
+        <View>
+          <Text style={[styles.heading, {color: theme.LabelColor}]}>
+            Bookmarks are empty
+          </Text>
+          <Text style={[styles.subheading, {color: theme.SecondaryLabelColor}]}>
+            Please tap the{' '}
+            <Image
+              source={require('../assets/bookmark-outline-gray.png')}
+              resizeMode="contain"
+              style={styles.bookmarkIcon}
+            />{' '}
+            icon to bookmark examples.
+          </Text>
+        </View>
       </View>
     </View>
-  </View>
-);
+  );
+};
 
 const styles = StyleSheet.create({
   emptyContainer: {
@@ -41,7 +45,6 @@ const styles = StyleSheet.create({
     paddingHorizontal: 40,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: 'white',
   },
   emptyContainerInner: {
     marginTop: -150,
diff --git a/packages/rn-tester/js/components/RNTesterExampleFilter.js b/packages/rn-tester/js/components/RNTesterExampleFilter.js
index 768b0137fca..f799e89dd36 100644
--- a/packages/rn-tester/js/components/RNTesterExampleFilter.js
+++ b/packages/rn-tester/js/components/RNTesterExampleFilter.js
@@ -16,6 +16,7 @@ const {
   View,
   ScrollView,
   Image,
+  Platform,
 } = require('react-native');
 import {RNTesterThemeContext} from './RNTesterTheme';
 
@@ -108,7 +109,12 @@ class RNTesterExampleFilter<T> extends React.Component<Props<T>, State> {
             <View
               style={[
                 styles.searchRow,
-                {backgroundColor: theme.BackgroundColor},
+                {
+                  backgroundColor:
+                    Platform.OS === 'ios'
+                      ? theme.SystemBackgroundColor
+                      : theme.BackgroundColor,
+                },
               ]}>
               <View style={styles.textInputStyle}>
                 <Image
diff --git a/packages/rn-tester/js/components/RNTesterModuleContainer.js b/packages/rn-tester/js/components/RNTesterModuleContainer.js
index 73e8a84f5f0..7fafafd08d4 100644
--- a/packages/rn-tester/js/components/RNTesterModuleContainer.js
+++ b/packages/rn-tester/js/components/RNTesterModuleContainer.js
@@ -124,7 +124,12 @@ function Header(props: {
       style={[
         styles.headerContainer,
         props.noBottomPadding === true ? styles.headerNoBottomPadding : null,
-        {backgroundColor: props.theme.BackgroundColor},
+        {
+          backgroundColor:
+            Platform.OS === 'ios'
+              ? props.theme.SystemBackgroundColor
+              : props.theme.BackgroundColor,
+        },
       ]}>
       <Text style={styles.headerDescription}>{props.description}</Text>
     </View>
diff --git a/packages/rn-tester/js/components/RNTesterModuleList.js b/packages/rn-tester/js/components/RNTesterModuleList.js
index 05e1bf5e601..6666c30b595 100644
--- a/packages/rn-tester/js/components/RNTesterModuleList.js
+++ b/packages/rn-tester/js/components/RNTesterModuleList.js
@@ -118,8 +118,6 @@ const renderSectionHeader = ({section}) => (
 
 const RNTesterModuleList: React$AbstractComponent<any, void> = React.memo(
   ({sections, toggleBookmark, handleModuleCardPress}) => {
-    const theme = React.useContext(RNTesterThemeContext);
-
     const filter = ({example, filterRegex, category}) =>
       filterRegex.test(example.module.title) &&
       (!category || example.category === category) &&
@@ -139,11 +137,7 @@ const RNTesterModuleList: React$AbstractComponent<any, void> = React.memo(
     };
 
     return (
-      <View
-        style={[
-          styles.listContainer,
-          {backgroundColor: theme.SecondaryGroupedBackgroundColor},
-        ]}>
+      <View style={styles.listContainer}>
         <RNTesterExampleFilter
           testID="explorer_search"
           page="components_page"
@@ -155,7 +149,6 @@ const RNTesterModuleList: React$AbstractComponent<any, void> = React.memo(
               sections={filteredSections}
               extraData={filteredSections}
               renderItem={renderListItem}
-              ItemSeparatorComponent={ItemSeparator}
               keyboardShouldPersistTaps="handled"
               automaticallyAdjustContentInsets={false}
               keyboardDismissMode="on-drag"
@@ -169,32 +162,10 @@ const RNTesterModuleList: React$AbstractComponent<any, void> = React.memo(
   },
 );
 
-const ItemSeparator = ({highlighted}) => (
-  <RNTesterThemeContext.Consumer>
-    {theme => {
-      return (
-        <View
-          style={
-            highlighted
-              ? [
-                  styles.separatorHighlighted,
-                  {backgroundColor: theme.OpaqueSeparatorColor},
-                ]
-              : [styles.separator, {backgroundColor: theme.SeparatorColor}]
-          }
-        />
-      );
-    }}
-  </RNTesterThemeContext.Consumer>
-);
-
 const styles = StyleSheet.create({
   listContainer: {
     flex: 1,
   },
-  listItem: {
-    backgroundColor: Platform.select({ios: '#FFFFFF', android: '#F3F8FF'}),
-  },
   sectionHeader: {
     padding: 5,
     fontWeight: '500',
@@ -209,13 +180,6 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
     elevation: 5,
   },
-  separator: {
-    height: Platform.select({ios: StyleSheet.hairlineWidth, android: 0}),
-    marginHorizontal: Platform.select({ios: 15, android: 0}),
-  },
-  separatorHighlighted: {
-    height: StyleSheet.hairlineWidth,
-  },
   topRowStyle: {
     flexDirection: 'row',
     justifyContent: 'space-between',
diff --git a/packages/rn-tester/js/components/RNTesterTheme.js b/packages/rn-tester/js/components/RNTesterTheme.js
index 28bab6c1dce..25697d21419 100644
--- a/packages/rn-tester/js/components/RNTesterTheme.js
+++ b/packages/rn-tester/js/components/RNTesterTheme.js
@@ -17,17 +17,22 @@ export type RNTesterTheme = {
   SecondaryLabelColor: ColorValue,
   TertiaryLabelColor: ColorValue,
   QuaternaryLabelColor: ColorValue,
+
   PlaceholderTextColor: ColorValue,
+
   SystemBackgroundColor: ColorValue,
   SecondarySystemBackgroundColor: ColorValue,
   TertiarySystemBackgroundColor: ColorValue,
+
   GroupedBackgroundColor: ColorValue,
   SecondaryGroupedBackgroundColor: ColorValue,
   TertiaryGroupedBackgroundColor: ColorValue,
+
   SystemFillColor: ColorValue,
   SecondarySystemFillColor: ColorValue,
   TertiarySystemFillColor: ColorValue,
   QuaternarySystemFillColor: ColorValue,
+
   SeparatorColor: ColorValue,
   OpaqueSeparatorColor: ColorValue,
   LinkColor: ColorValue,
@@ -44,19 +49,25 @@ export const RNTesterLightTheme = {
   SecondaryLabelColor: '#3c3c4399',
   TertiaryLabelColor: '#3c3c434c',
   QuaternaryLabelColor: '#3c3c432d',
+
   PlaceholderTextColor: '#3c3c434c',
+
   SystemBackgroundColor: '#ffffffff',
   SecondarySystemBackgroundColor: '#f2f2f7ff',
   TertiarySystemBackgroundColor: '#ffffffff',
+
   GroupedBackgroundColor: '#f2f2f7ff',
   SecondaryGroupedBackgroundColor: '#ffffffff',
   TertiaryGroupedBackgroundColor: '#f2f2f7ff',
+
   SystemFillColor: '#78788033',
   SecondarySystemFillColor: '#78788028',
   TertiarySystemFillColor: '#7676801e',
   QuaternarySystemFillColor: '#74748014',
+
   SeparatorColor: '#3c3c4349',
   OpaqueSeparatorColor: '#c6c6c8ff',
+
   LinkColor: '#007affff',
   SystemRedColor: '#ff3b30ff',
   SystemGreenColor: '#34c759ff',
@@ -70,19 +81,25 @@ export const RNTesterDarkTheme = {
   SecondaryLabelColor: '#ebebf599',
   TertiaryLabelColor: '#ebebf54c',
   QuaternaryLabelColor: '#ebebf528',
+
   PlaceholderTextColor: '#ebebf54c',
+
   SystemBackgroundColor: '#000000ff',
   SecondarySystemBackgroundColor: '#1c1c1eff',
   TertiarySystemBackgroundColor: '#2c2c2eff',
+
   GroupedBackgroundColor: '#000000ff',
   SecondaryGroupedBackgroundColor: '#1c1c1eff',
   TertiaryGroupedBackgroundColor: '#2c2c2eff',
+
   SystemFillColor: '#7878805b',
   SecondarySystemFillColor: '#78788051',
   TertiarySystemFillColor: '#7676803d',
   QuaternarySystemFillColor: '#7676802d',
+
   SeparatorColor: '#54545899',
   OpaqueSeparatorColor: '#38383aff',
+
   LinkColor: '#0984ffff',
   SystemRedColor: '#ff375fff',
   SystemGreenColor: '#30d158ff',
diff --git a/packages/rn-tester/js/components/RNTesterTitle.js b/packages/rn-tester/js/components/RNTesterTitle.js
index a9955654043..a7c975d89b4 100644
--- a/packages/rn-tester/js/components/RNTesterTitle.js
+++ b/packages/rn-tester/js/components/RNTesterTitle.js
@@ -24,7 +24,7 @@ class RNTesterTitle extends React.Component<$FlowFixMeProps> {
                 styles.container,
                 {
                   borderColor: theme.SeparatorColor,
-                  backgroundColor: theme.SystemBackgroundColor,
+                  backgroundColor: theme.TertiaryGroupedBackgroundColor,
                 },
               ]}>
               <Text style={[styles.text, {color: theme.LabelColor}]}>