diff --git a/src/components/map/MapSettings.js b/src/components/map/MapSettings.js
index a6d0c76..1e7d0fd 100644
--- a/src/components/map/MapSettings.js
+++ b/src/components/map/MapSettings.js
@@ -1,30 +1,85 @@
 import React from "react";
-import { Flex, Box, Label, Input } from "theme-ui";
+import { Flex, Box, Label, Input, Checkbox } from "theme-ui";
 
-function MapSettings({ map, onSettingsChange }) {
+function MapSettings({
+  map,
+  mapState,
+  onSettingsChange,
+  onStateSettingsChange,
+}) {
+  function handleFlagChange(event, flag) {
+    if (event.target.checked) {
+      onStateSettingsChange("editFlags", [...mapState.editFlags, flag]);
+    } else {
+      onStateSettingsChange(
+        "editFlags",
+        mapState.editFlags.filter((f) => f !== flag)
+      );
+    }
+  }
   return (
-    <Flex>
-      <Box mb={2} mr={1} sx={{ flexGrow: 1 }}>
-        <Label htmlFor="gridX">Columns</Label>
+    <Flex sx={{ flexDirection: "column" }}>
+      <Flex>
+        <Box mt={2} mr={1} sx={{ flexGrow: 1 }}>
+          <Label htmlFor="gridX">Columns</Label>
+          <Input
+            type="number"
+            name="gridX"
+            value={(map && map.gridX) || 0}
+            onChange={(e) =>
+              onSettingsChange("gridX", parseInt(e.target.value))
+            }
+            disabled={map === null || map.type === "default"}
+            min={1}
+          />
+        </Box>
+        <Box mt={2} ml={1} sx={{ flexGrow: 1 }}>
+          <Label htmlFor="gridY">Rows</Label>
+          <Input
+            type="number"
+            name="gridY"
+            value={(map && map.gridY) || 0}
+            onChange={(e) =>
+              onSettingsChange("gridY", parseInt(e.target.value))
+            }
+            disabled={map === null || map.type === "default"}
+            min={1}
+          />
+        </Box>
+      </Flex>
+      <Box mt={2} sx={{ flexGrow: 1 }}>
+        <Label htmlFor="name">Name</Label>
         <Input
-          type="number"
-          name="gridX"
-          value={(map && map.gridX) || 0}
-          onChange={(e) => onSettingsChange("gridX", parseInt(e.target.value))}
+          name="name"
+          value={(map && map.name) || ""}
+          onChange={(e) => onSettingsChange("name", e.target.value)}
           disabled={map === null || map.type === "default"}
-          min={1}
         />
       </Box>
-      <Box mb={2} ml={1} sx={{ flexGrow: 1 }}>
-        <Label htmlFor="gridY">Rows</Label>
-        <Input
-          type="number"
-          name="gridY"
-          value={(map && map.gridY) || 0}
-          onChange={(e) => onSettingsChange("gridY", parseInt(e.target.value))}
-          disabled={map === null || map.type === "default"}
-          min={1}
-        />
+      <Box my={2} sx={{ flexGrow: 1 }}>
+        <Label>Allow others to edit</Label>
+        <Flex>
+          <Label>
+            <Checkbox
+              checked={
+                mapState !== null && mapState.editFlags.includes("drawings")
+              }
+              disabled={mapState === null}
+              onChange={(e) => handleFlagChange(e, "drawings")}
+            />
+            Drawings
+          </Label>
+          <Label>
+            <Checkbox
+              checked={
+                mapState !== null && mapState.editFlags.includes("tokens")
+              }
+              disabled={mapState === null}
+              onChange={(e) => handleFlagChange(e, "tokens")}
+            />
+            Tokens
+          </Label>
+        </Flex>
       </Box>
     </Flex>
   );
diff --git a/src/modals/SelectMapModal.js b/src/modals/SelectMapModal.js
index ad8ee21..295ac4d 100644
--- a/src/modals/SelectMapModal.js
+++ b/src/modals/SelectMapModal.js
@@ -1,5 +1,5 @@
 import React, { useRef, useState, useEffect, useContext } from "react";
-import { Box, Button, Flex, Label, Input, Text } from "theme-ui";
+import { Box, Button, Flex, Label, Text } from "theme-ui";
 import shortid from "shortid";
 
 import db from "../database";
@@ -19,11 +19,11 @@ const defaultMapState = {
   // index will be performed (used in undo and redo)
   drawActionIndex: -1,
   drawActions: [],
+  // Flags to determine what other people can edit
+  editFlags: ["drawings", "tokens"],
 };
 
 const defaultMapProps = {
-  // Flags to determine what other people can edit
-  editFlags: [],
   // Grid type
   // TODO: add support for hex horizontal and hex vertical
   gridType: "grid",
@@ -44,6 +44,7 @@ function SelectMapModal({
 
   // The map selected in the modal
   const [selectedMap, setSelectedMap] = useState(null);
+  const [selectedMapState, setSelectedMapState] = useState(null);
   const [maps, setMaps] = useState([]);
   // Load maps from the database and ensure state is properly setup
   useEffect(() => {
@@ -146,9 +147,11 @@ function SelectMapModal({
 
   async function handleMapAdd(map) {
     await db.table("maps").add(map);
-    await db.table("states").add({ ...defaultMapState, mapId: map.id });
+    const state = { ...defaultMapState, mapId: map.id };
+    await db.table("states").add(state);
     setMaps((prevMaps) => [map, ...prevMaps]);
     setSelectedMap(map);
+    setSelectedMapState(state);
   }
 
   async function handleMapRemove(id) {
@@ -157,6 +160,7 @@ function SelectMapModal({
     setMaps((prevMaps) => {
       const filtered = prevMaps.filter((map) => map.id !== id);
       setSelectedMap(filtered[0]);
+      db.table("states").get(filtered[0].id).then(setSelectedMapState);
       return filtered;
     });
     // Removed the map from the map screen if needed
@@ -167,6 +171,7 @@ function SelectMapModal({
 
   function handleMapSelect(map) {
     setSelectedMap(map);
+    db.table("states").get(map.id).then(setSelectedMapState);
   }
 
   async function handleMapReset(id) {
@@ -181,8 +186,7 @@ function SelectMapModal({
   async function handleSubmit(e) {
     e.preventDefault();
     if (selectedMap) {
-      let currentMapState = await db.table("states").get(selectedMap.id);
-      onMapChange(selectedMap, currentMapState);
+      onMapChange(selectedMap, selectedMapState);
       onDone();
     }
     onDone();
@@ -190,15 +194,22 @@ function SelectMapModal({
 
   async function handleMapSettingsChange(key, value) {
     await db.table("maps").update(selectedMap.id, { [key]: value });
+    const newMap = { ...selectedMap, [key]: value };
     setMaps((prevMaps) => {
       const newMaps = [...prevMaps];
       const i = newMaps.findIndex((map) => map.id === selectedMap.id);
       if (i > -1) {
-        newMaps[i][key] = value;
+        newMaps[i] = newMap;
       }
       return newMaps;
     });
-    setSelectedMap((prevMap) => ({ ...prevMap, [key]: value }));
+    setSelectedMap(newMap);
+  }
+
+  async function handleMapStateSettingsChange(key, value) {
+    console.log(value);
+    await db.table("states").update(selectedMap.id, { [key]: value });
+    setSelectedMapState((prevState) => ({ ...prevState, [key]: value }));
   }
 
   /**
@@ -256,7 +267,9 @@ function SelectMapModal({
           />
           <MapSettings
             map={selectedMap}
+            mapState={selectedMapState}
             onSettingsChange={handleMapSettingsChange}
+            onStateSettingsChange={handleMapStateSettingsChange}
           />
           <Button variant="primary" disabled={imageLoading}>
             Done