diff --git a/pkg/interface/chat/src/js/components/settings.js b/pkg/interface/chat/src/js/components/settings.js
index 2d8b73a0a7..ec87926fc1 100644
--- a/pkg/interface/chat/src/js/components/settings.js
+++ b/pkg/interface/chat/src/js/components/settings.js
@@ -31,7 +31,7 @@ export class SettingsScreen extends Component {
       this.setState({
         title: props.association.metadata.title,
         description: props.association.metadata.description,
-        color: uxToHex(props.association.metadata.color)
+        color: `#${uxToHex(props.association.metadata.color)}`
       });
     }
   }
@@ -47,14 +47,48 @@ export class SettingsScreen extends Component {
       });
     }
 
-    if ((this.state.title === "") && (prevProps !== this.props)) {
+    if ((state.title === "") && (prevProps !== props)) {
       if (props.association && "metadata" in props.association)
         this.setState({
           title: props.association.metadata.title,
           description: props.association.metadata.description,
-          color: uxToHex(props.association.metadata.color)
+          color: `#${uxToHex(props.association.metadata.color)}`
         });
     }
+
+    if (state.color !== prevState.color) {
+      //submit color if valid
+      let color = state.color;
+      if (color.startsWith("#")) {
+        color = state.color.substr(1);
+      }
+      let hexExp = /([0-9A-Fa-f]{6})/
+      let hexTest = hexExp.exec(color);
+      let currentColor = "000000";
+      if (props.association && "metadata" in props.association) {
+        currentColor = uxToHex(props.association.metadata.color);
+      }
+      if (hexTest && (hexTest[1] !== currentColor)) {
+        let chatOwner = (deSig(props.match.params.ship) === window.ship);
+        let association =
+          (props.association) && ("metadata" in props.association)
+            ? props.association : {};
+
+        if (chatOwner) {
+          props.api.setSpinner(true);
+          props.api.metadataAdd(
+            association['app-path'],
+            association['group-path'],
+            association.metadata.title,
+            association.metadata.description,
+            association.metadata['date-created'],
+            color
+          ).then(() => {
+            props.api.setSpinner(false);
+          })
+        }
+      }
+    }
   }
 
   changeTitle() {
@@ -174,28 +208,21 @@ export class SettingsScreen extends Component {
           <p className="f8 mt3 lh-copy">Change color</p>
           <p className="f9 gray2 db mb4">Give this chat a color when viewing group channels</p>
           <div className="relative w-100 flex"
-            style={{ maxWidth: "20rem" }}>
+            style={{ maxWidth: "10rem" }}>
+            <div className="absolute"
+              style={{
+                height: 16,
+                width: 16,
+                backgroundColor: state.color,
+                top: 13,
+                left: 11
+                }}/>
             <input
-              className={"f8 ba b--gray3 b--gray2-d bg-gray0-d white-d " +
+              className={"pl7 f8 ba b--gray3 b--gray2-d bg-gray0-d white-d " +
                 "focus-b--black focus-b--white-d pa3 db w-100 flex-auto mr3"}
               value={this.state.color}
               disabled={!chatOwner}
               onChange={this.changeColor}
-              onBlur={() => {
-                if ((chatOwner) && (this.state.color.match(/[0-9A-F]{6}/i))) {
-                  props.api.setSpinner(true);
-                  props.api.metadataAdd(
-                    association['app-path'],
-                    association['group-path'],
-                    association.metadata.title,
-                    association.metadata.description,
-                    association.metadata['date-created'],
-                    this.state.color
-                  ).then(() => {
-                    props.api.setSpinner(false);
-                  })
-                }
-              }}
             />
           </div>
         </div>