diff --git a/package-lock.json b/package-lock.json
index a5848437d7f6b2b08a9cbd23acc1605d3eaa8322..b87fa304de5687e38c4ad39605ed52736d1e29e7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -939,6 +939,11 @@
         "@hapi/hoek": "6.x.x"
       }
     },
+    "@icons/material": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz",
+      "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw=="
+    },
     "@jest/console": {
       "version": "24.7.1",
       "resolved": "https://registry.npmjs.org/@jest/console/-/console-24.7.1.tgz",
@@ -7932,6 +7937,11 @@
         "object-visit": "^1.0.0"
       }
     },
+    "material-colors": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
+      "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -10050,6 +10060,19 @@
         "whatwg-fetch": "3.0.0"
       }
     },
+    "react-color": {
+      "version": "2.17.3",
+      "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.17.3.tgz",
+      "integrity": "sha512-1dtO8LqAVotPIChlmo6kLtFS1FP89ll8/OiA8EcFRDR+ntcK+0ukJgByuIQHRtzvigf26dV5HklnxDIvhON9VQ==",
+      "requires": {
+        "@icons/material": "^0.2.4",
+        "lodash": "^4.17.11",
+        "material-colors": "^1.2.1",
+        "prop-types": "^15.5.10",
+        "reactcss": "^1.2.0",
+        "tinycolor2": "^1.4.1"
+      }
+    },
     "react-cookie": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-4.0.0.tgz",
@@ -10237,6 +10260,14 @@
         "workbox-webpack-plugin": "4.2.0"
       }
     },
+    "reactcss": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz",
+      "integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==",
+      "requires": {
+        "lodash": "^4.0.1"
+      }
+    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -11668,6 +11699,11 @@
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
+    "tinycolor2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",
+      "integrity": "sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g="
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
diff --git a/package.json b/package.json
index c3c2d357e9afdc74879bf2293e8c80d887aef513..88fddfbef5a2435db648728f1b4e4d9e4d127730 100644
--- a/package.json
+++ b/package.json
@@ -7,12 +7,13 @@
     "leaflet": "^1.5.1",
     "leaflet-draw": "^1.0.4",
     "react": "^16.8.6",
+    "react-color": "^2.17.3",
     "react-cookie": "^4.0.0",
     "react-dom": "^16.8.6",
     "react-leaflet": "^2.3.0",
     "react-leaflet-draw": "0.19.0",
-    "universal-cookie": "^4.0.0",
-    "react-scripts": "3.0.1"
+    "react-scripts": "3.0.1",
+    "universal-cookie": "^4.0.0"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/src/components/EditGameForm.js b/src/components/EditGameForm.js
index 68773d82fadcf47553f18653a44973d40438f393..0987f0d3a439e4fbabf10b5041a6f8d6f449cca1 100644
--- a/src/components/EditGameForm.js
+++ b/src/components/EditGameForm.js
@@ -1,6 +1,8 @@
 import React, { Fragment } from "react";
 import ReactDOM from "react-dom";
 import { Map, TileLayer } from "react-leaflet";
+import { SketchPicker } from "react-color";
+import reactCSS from "reactcss";
 
 export class EditGameForm extends React.Component {
   constructor(props) {
@@ -26,7 +28,9 @@ export class EditGameForm extends React.Component {
       objectivePointMultiplierInput: "", // number
       objectivePoints: [],
       capture_time: 300,
-      confirmation_time: 60
+      confirmation_time: 60,
+      displayColorPicker: false,
+      color: "#852222"
     };
 
     this.handleMapDrag = this.handleMapDrag.bind(this);
@@ -382,6 +386,36 @@ export class EditGameForm extends React.Component {
       );
     }
 
+    const styles = reactCSS({
+      default: {
+        color: {
+          width: "36px",
+          height: "14px",
+          borderRadius: "2px",
+          background: `${this.state.color}`
+        },
+        swatch: {
+          padding: "5px",
+          background: "#fff",
+          borderRadius: "1px",
+          boxShadow: "0 0 0 1px rgba(0,0,0,.1)",
+          display: "inline-block",
+          cursor: "pointer"
+        },
+        popover: {
+          position: "absolute",
+          zIndex: "2"
+        },
+        cover: {
+          position: "fixed",
+          top: "0px",
+          right: "0px",
+          bottom: "0px",
+          left: "0px"
+        }
+      }
+    });
+
     return ReactDOM.createPortal(
       <div className="fade-main">
         <div className="sticky">
@@ -490,6 +524,27 @@ export class EditGameForm extends React.Component {
             placeholder="Faction password"
             form="factionAddFrom"
           />
+          <div
+            style={styles.swatch}
+            onClick={() =>
+              this.setState({
+                displayColorPicker: !this.state.displayColorPicker
+              })
+            }
+          >
+            <div style={styles.color} />
+          </div>
+          {this.state.displayColorPicker && (
+            <div
+              style={styles.cover}
+              onClick={() => this.setState({ displayColorPicker: false })}
+            >
+              <SketchPicker
+                color={this.state.color}
+                onChangeComplete={color => this.setState({ color: color.hex })}
+              />
+            </div>
+          )}
           <button type="submit" form="factionAddFrom">
             Add
           </button>