diff --git a/native/community-creation/community-configuration.react.js b/native/community-creation/community-configuration.react.js
--- a/native/community-creation/community-configuration.react.js
+++ b/native/community-creation/community-configuration.react.js
@@ -143,14 +143,16 @@
         </View>
 
         <ThreadSettingsCategoryHeader type="full" title="OPTIONAL SETTINGS" />
-        <EnumSettingsOption
-          icon="megaphone"
-          name="Announcement root"
-          description={enumSettingsOptionDescription}
-          enumValue={announcementSetting}
-          onEnumValuePress={onCheckBoxPress}
-          type="checkbox"
-        />
+        <View style={styles.optionalSettingsContainer}>
+          <EnumSettingsOption
+            icon="megaphone"
+            name="Announcement root"
+            description={enumSettingsOptionDescription}
+            enumValue={announcementSetting}
+            onEnumValuePress={onCheckBoxPress}
+            type="checkbox"
+          />
+        </View>
         <ThreadSettingsCategoryFooter type="full" />
         <RegistrationButtonContainer>
           <RegistrationButton
@@ -205,6 +207,10 @@
   communityNameNoticeText: {
     color: 'panelForegroundTertiaryLabel',
   },
+  optionalSettingsContainer: {
+    backgroundColor: 'panelForeground',
+    paddingVertical: 4,
+  },
   errorMessageContainer: {
     alignItems: 'center',
   },
diff --git a/native/components/enum-settings-option.react.js b/native/components/enum-settings-option.react.js
--- a/native/components/enum-settings-option.react.js
+++ b/native/components/enum-settings-option.react.js
@@ -47,14 +47,6 @@
     return icon;
   }, [icon, styles.enumIcon, colors.purpleButton]);
 
-  const infoContainerStyle = React.useMemo(
-    () =>
-      props.icon
-        ? styles.enumInfoContainer
-        : { ...styles.enumInfoContainer, marginLeft: 10 },
-    [props.icon, styles.enumInfoContainer],
-  );
-
   const enumInputStyles = React.useMemo(() => {
     const style = [styles.enumInput];
 
@@ -93,51 +85,73 @@
     [enumValue, enumInputFilledStyles],
   );
 
+  const touchableContainerStyle = React.useMemo(() => {
+    const style = [styles.touchableContainer];
+
+    if (enumValue) {
+      style.push(styles.touchableContainerSelected);
+    }
+
+    return style;
+  }, [enumValue, styles.touchableContainer, styles.touchableContainerSelected]);
+
   return (
-    <View style={styles.enumCell}>
-      {enumIcon}
-      <View style={infoContainerStyle}>
-        <Text style={styles.enumInfoName}>{name}</Text>
-        <Text style={styles.enumInfoDescription}>{description}</Text>
-      </View>
+    <View style={styles.container}>
       <TouchableOpacity
-        onPress={onEnumValuePress}
-        style={styles.enumInputContainer}
+        style={touchableContainerStyle}
         activeOpacity={0.4}
+        onPress={onEnumValuePress}
         disabled={disabled}
       >
-        <View style={enumInputStyles}>{enumInputFill}</View>
+        {enumIcon}
+        <View style={styles.enumInfoContainer}>
+          <Text style={styles.enumInfoName}>{name}</Text>
+          <Text style={styles.enumInfoDescription}>{description}</Text>
+        </View>
+        <View style={styles.enumInputContainer}>
+          <View style={enumInputStyles}>{enumInputFill}</View>
+        </View>
       </TouchableOpacity>
     </View>
   );
 }
 
 const unboundStyles = {
-  enumCell: {
-    flexDirection: 'row',
-    height: 96,
+  container: {
     backgroundColor: 'panelForeground',
+    paddingVertical: 4,
+    paddingHorizontal: 8,
+  },
+  touchableContainer: {
+    flexDirection: 'row',
+    padding: 12,
+  },
+  touchableContainerSelected: {
+    backgroundColor: 'panelSecondaryForeground',
+    borderRadius: 8,
   },
   enumIcon: {
-    padding: 16,
+    paddingTop: 4,
+    paddingRight: 24,
   },
   enumInfoContainer: {
     flex: 1,
     flexDirection: 'column',
     justifyContent: 'space-evenly',
-    padding: 8,
   },
   enumInfoName: {
     color: 'panelForegroundLabel',
     fontSize: 18,
     lineHeight: 24,
+    marginBottom: 4,
   },
   enumInfoDescription: {
     color: 'panelForegroundSecondaryLabel',
     lineHeight: 18,
   },
   enumInputContainer: {
-    padding: 22,
+    padding: 16,
+    paddingRight: 0,
     justifyContent: 'center',
     alignItems: 'center',
   },
diff --git a/native/roles/create-roles-screen.react.js b/native/roles/create-roles-screen.react.js
--- a/native/roles/create-roles-screen.react.js
+++ b/native/roles/create-roles-screen.react.js
@@ -309,7 +309,8 @@
     marginTop: 10,
   },
   permissionsListContentContainer: {
-    paddingBottom: 48,
+    paddingTop: 4,
+    paddingBottom: 56,
   },
   activityIndicator: {
     paddingRight: 15,