diff --git a/native/components/color-selector-button.react.js b/native/components/color-selector-button.react.js
index b62b660d5..1d2ebd1b0 100644
--- a/native/components/color-selector-button.react.js
+++ b/native/components/color-selector-button.react.js
@@ -1,28 +1,49 @@
 // @flow
 
 import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import tinycolor from 'tinycolor2';
 
 type ColorSelectorButtonProps = {
-  color: string,
+  +color: string,
+  +currentColor: string,
 };
 
 function ColorSelectorButton(props: ColorSelectorButtonProps): React.Node {
-  const { color } = props;
-  const buttonStyle = React.useMemo(
-    () => [styles.button, { backgroundColor: color }],
-    [color],
+  const { color, currentColor } = props;
+
+  const colorSplotchStyle = React.useMemo(() => {
+    return [styles.button, { backgroundColor: `#${color}` }];
+  }, [color]);
+
+  const isSelected = tinycolor.equals(currentColor, color);
+  return (
+    <View style={isSelected ? styles.outerRingSelected : styles.outerRing}>
+      <TouchableOpacity style={colorSplotchStyle} />
+    </View>
   );
-  return <View style={buttonStyle} />;
 }
 
 const styles = StyleSheet.create({
   button: {
     borderRadius: 20,
     height: 40,
-    margin: 15,
+    margin: 10,
     width: 40,
   },
+  outerRing: {
+    borderRadius: 40,
+    height: 60,
+    margin: 5,
+    width: 60,
+  },
+  outerRingSelected: {
+    backgroundColor: '#404040',
+    borderRadius: 40,
+    height: 60,
+    margin: 5,
+    width: 60,
+  },
 });
 
 export default ColorSelectorButton;
diff --git a/native/components/color-selector.react.js b/native/components/color-selector.react.js
index d50eeabd6..694f4d415 100644
--- a/native/components/color-selector.react.js
+++ b/native/components/color-selector.react.js
@@ -1,57 +1,66 @@
 // @flow
 
 import * as React from 'react';
 import { Text, View, StyleSheet } from 'react-native';
 
+import { selectedThreadColors } from 'lib/shared/thread-utils';
+
 import ColorSelectorButton from './color-selector-button.react';
 
-function ColorSelector(): React.Node {
+type ColorSelectorProps = {
+  +currentColor: string,
+};
+
+function ColorSelector(props: ColorSelectorProps): React.Node {
+  const { currentColor } = props;
+
+  const colorSelectorButtons = React.useMemo(
+    () =>
+      selectedThreadColors.map(color => (
+        <ColorSelectorButton
+          key={color}
+          color={color}
+          currentColor={currentColor}
+        />
+      )),
+    [currentColor],
+  );
+
   return (
     <View style={styles.container}>
       <View style={styles.textContainer}>
         <Text style={styles.text}>Select thread color</Text>
       </View>
-      <View style={styles.colorButtons}>
-        <ColorSelectorButton color="#4B87AA" />
-        <ColorSelectorButton color="#5C9F5F" />
-        <ColorSelectorButton color="#B8753D" />
-        <ColorSelectorButton color="#AA4B4B" />
-        <ColorSelectorButton color="#6D49AB" />
-        <ColorSelectorButton color="#C85000" />
-        <ColorSelectorButton color="#008F83" />
-        <ColorSelectorButton color="#648CAA" />
-        <ColorSelectorButton color="#57697F" />
-        <ColorSelectorButton color="#575757" />
-      </View>
+      <View style={styles.colorButtons}>{colorSelectorButtons}</View>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   colorButtons: {
     alignItems: 'center',
     display: 'flex',
     flex: 1,
     flexDirection: 'row',
     flexWrap: 'wrap',
     justifyContent: 'center',
   },
   container: {
     alignItems: 'center',
     display: 'flex',
     flex: 1,
     flexDirection: 'column',
     flexWrap: 'wrap',
     justifyContent: 'center',
   },
   text: {
     color: 'white',
     fontSize: 24,
     fontWeight: 'bold',
   },
   textContainer: {
     margin: 20,
   },
 });
 
 export default ColorSelector;