diff --git a/native/chat/settings/color-picker-modal.react.js b/native/chat/settings/color-picker-modal.react.js
--- a/native/chat/settings/color-picker-modal.react.js
+++ b/native/chat/settings/color-picker-modal.react.js
@@ -55,7 +55,7 @@
     const { color, threadInfo } = this.props.route.params;
     // Based on the assumption we are always in portrait,
     // and consequently width is the lowest dimensions
-    const modalStyle = { height: this.props.windowWidth - 5 };
+    const modalStyle = { height: this.props.windowWidth - 100 };
     return (
       <Modal modalStyle={[this.props.styles.colorPickerContainer, modalStyle]}>
         <ColorPicker
diff --git a/native/components/color-selector-button.react.js b/native/components/color-selector-button.react.js
--- a/native/components/color-selector-button.react.js
+++ b/native/components/color-selector-button.react.js
@@ -6,20 +6,27 @@
 
 type ColorSelectorButtonProps = {
   +color: string,
-  +currentColor: string,
+  +pendingColor: string,
+  +setPendingColor: ((string => string) | string) => void,
 };
-
 function ColorSelectorButton(props: ColorSelectorButtonProps): React.Node {
-  const { color, currentColor } = props;
+  const { color, pendingColor, setPendingColor } = props;
 
   const colorSplotchStyle = React.useMemo(() => {
     return [styles.button, { backgroundColor: `#${color}` }];
   }, [color]);
 
-  const isSelected = tinycolor.equals(currentColor, color);
+  const onPendingColorSelected = React.useCallback(() => {
+    setPendingColor(color);
+  }, [setPendingColor, color]);
+
+  const isSelected = tinycolor.equals(pendingColor, color);
   return (
     <View style={isSelected ? styles.outerRingSelected : styles.outerRing}>
-      <TouchableOpacity style={colorSplotchStyle} />
+      <TouchableOpacity
+        style={colorSplotchStyle}
+        onPress={onPendingColorSelected}
+      />
     </View>
   );
 }
diff --git a/native/components/color-selector.react.js b/native/components/color-selector.react.js
--- a/native/components/color-selector.react.js
+++ b/native/components/color-selector.react.js
@@ -1,7 +1,8 @@
 // @flow
 
 import * as React from 'react';
-import { Text, View, StyleSheet } from 'react-native';
+import { Button, Text, View, StyleSheet } from 'react-native';
+import tinycolor from 'tinycolor2';
 
 import { selectedThreadColors } from 'lib/shared/thread-utils';
 
@@ -9,10 +10,11 @@
 
 type ColorSelectorProps = {
   +currentColor: string,
+  +onColorSelected: (hex: string) => void,
 };
-
 function ColorSelector(props: ColorSelectorProps): React.Node {
-  const { currentColor } = props;
+  const { currentColor, onColorSelected } = props;
+  const [pendingColor, setPendingColor] = React.useState(currentColor);
 
   const colorSelectorButtons = React.useMemo(
     () =>
@@ -20,26 +22,43 @@
         <ColorSelectorButton
           key={color}
           color={color}
-          currentColor={currentColor}
+          pendingColor={pendingColor}
+          setPendingColor={setPendingColor}
         />
       )),
-    [currentColor],
+    [pendingColor],
   );
 
+  const saveButtonDisabled = tinycolor.equals(currentColor, pendingColor);
+  const saveButtonStyle = React.useMemo(() => {
+    if (saveButtonDisabled) {
+      return [styles.saveButton, { backgroundColor: '#404040' }];
+    }
+    return [styles.saveButton, { backgroundColor: `#${pendingColor}` }];
+  }, [saveButtonDisabled, pendingColor]);
+
+  const onColorSplotchSelected = React.useCallback(() => {
+    onColorSelected(`#${pendingColor}`);
+  }, [onColorSelected, pendingColor]);
+
   return (
     <View style={styles.container}>
-      <View style={styles.textContainer}>
-        <Text style={styles.text}>Select thread color</Text>
-      </View>
+      <Text style={styles.header}>Select thread color</Text>
       <View style={styles.colorButtons}>{colorSelectorButtons}</View>
+      <View style={saveButtonStyle}>
+        <Button
+          title="Save"
+          color="white"
+          onPress={onColorSplotchSelected}
+          disabled={saveButtonDisabled}
+        />
+      </View>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   colorButtons: {
-    alignItems: 'center',
-    display: 'flex',
     flex: 1,
     flexDirection: 'row',
     flexWrap: 'wrap',
@@ -47,20 +66,21 @@
   },
   container: {
     alignItems: 'center',
-    display: 'flex',
     flex: 1,
-    flexDirection: 'column',
-    flexWrap: 'wrap',
     justifyContent: 'center',
   },
-  text: {
+  header: {
     color: 'white',
     fontSize: 24,
     fontWeight: 'bold',
-  },
-  textContainer: {
     margin: 20,
   },
+  saveButton: {
+    borderRadius: 5,
+    margin: 10,
+    padding: 5,
+    width: 320,
+  },
 });
 
 export default ColorSelector;