diff --git a/react-ui/src/components/Tools/MapPlanner.js b/react-ui/src/components/Tools/MapPlanner.js
index eb12e20e2..795536baf 100644
--- a/react-ui/src/components/Tools/MapPlanner.js
+++ b/react-ui/src/components/Tools/MapPlanner.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import { SketchField, Tools } from 'react-sketch'
 import { CirclePicker } from 'react-color'
 import { Dropdown, Button, Icon, Input, Grid, Label, Message } from 'semantic-ui-react'
@@ -6,33 +6,35 @@ import { Dropdown, Button, Icon, Input, Grid, Label, Message } from 'semantic-ui
 import WeaponForm from '../XSearch/WeaponForm'
 import weaponDict from '../../utils/english_internal.json'
 
-import academy from '../img/plannerMaps/academy-sz-map.png'
-import arena from '../img/plannerMaps/arena-sz-map.png'
-import camp from '../img/plannerMaps/camp-sz-map.png'
-import canal from '../img/plannerMaps/canal-sz-map.png'
-import dome from '../img/plannerMaps/dome-sz-OLD.png'
-import fitness from '../img/plannerMaps/fitness-sz-map.png'
-import games from '../img/plannerMaps/games-sz-map.png'
-import hotel from '../img/plannerMaps/hotel-sz-map.png'
-import institute from '../img/plannerMaps/institute-sz-map.png'
-import mainstage from '../img/plannerMaps/mainstage-rm-new.png'
-import mall from '../img/plannerMaps/mall-sz-map.png'
-import manta from '../img/plannerMaps/manta-sz-map.png'
-import mart from '../img/plannerMaps/mart-sz-map.png'
-import pavilion from '../img/plannerMaps/pavilion-sz-map.png'
-import pit from '../img/plannerMaps/pit-sz-map.png'
-import port from '../img/plannerMaps/port-sz-map.png'
-import pumptrack from '../img/plannerMaps/pumptrack-sz-map.png'
-import reef from '../img/plannerMaps/reef-sz-new.png'
-import shipyard from '../img/plannerMaps/shipyard-sz-map.png'
-import skatepark from '../img/plannerMaps/skatepark-sz-new.png'
-import towers from '../img/plannerMaps/towers-sz-new-map.png'
-import warehouse from '../img/plannerMaps/warehouse-sz-map.png'
-import world from '../img/plannerMaps/world-sz-map.png'
+import academy from '../img/plannerMaps/academy-sz.png'
+import arena from '../img/plannerMaps/arena-sz.png'
+import camp from '../img/plannerMaps/camp-sz.png'
+import canal from '../img/plannerMaps/canal-sz.png'
+import dome from '../img/plannerMaps/dome-sz.png'
+import fitness from '../img/plannerMaps/fitness-sz.png'
+import games from '../img/plannerMaps/games-sz.png'
+import hotel from '../img/plannerMaps/hotel-sz.png'
+import institute from '../img/plannerMaps/institute-sz.png'
+import mainstage from '../img/plannerMaps/mainstage-sz.png'
+import mall from '../img/plannerMaps/mall-sz.png'
+import manta from '../img/plannerMaps/manta-sz.png'
+import mart from '../img/plannerMaps/mart-sz.png'
+import pavilion from '../img/plannerMaps/pavilion-sz.png'
+import pit from '../img/plannerMaps/pit-sz.png'
+import pitrm from '../img/plannerMaps/pit-rm.png'
+import port from '../img/plannerMaps/port-sz.png'
+import pumptrack from '../img/plannerMaps/pumptrack-sz.png'
+import reef from '../img/plannerMaps/reef-sz.png'
+import shipyard from '../img/plannerMaps/shipyard-sz.png'
+import skatepark from '../img/plannerMaps/skatepark-sz.png'
+import towers from '../img/plannerMaps/towers-sz.png'
+import warehouse from '../img/plannerMaps/warehouse-sz.png'
+import world from '../img/plannerMaps/world-sz.png'
 
 const MapPlanner = ({ setMenuSelection }) => {
   let sketch = null
   const isMobile = window.innerWidth <= 1000
+  const fileInput = useRef(null)
   const [tool, setTool] = useState(Tools.Pencil)
   const [color, setColor] = useState('#f44336')
   const [weapon, setWeapon] = useState('')
@@ -40,6 +42,7 @@ const MapPlanner = ({ setMenuSelection }) => {
   const [canRedo, setCanRedo] = useState(false)
   const [text, setText] = useState('')
   const [bg, setBg] = useState(reef)
+  const [uploadError, setUploadError] = useState(null)
 
   const tools = [
     { key: 1, text: 'Pencil', value: Tools.Pencil, icon: 'pencil' },
@@ -68,6 +71,7 @@ const MapPlanner = ({ setMenuSelection }) => {
     { key: 'Arowana Mall', text: 'Arowana Mall', value: mall },
     { key: 'Goby Arena', text: 'Goby Arena', value: arena },
     { key: 'Piranha Pit', text: 'Piranha Pit', value: pit },
+    { key: 'Piranha Pit (RM)', text: 'Piranha Pit (RM)', value: pitrm },
     { key: 'Camp Triggerfish', text: 'Camp Triggerfish', value: camp },
     { key: 'Wahoo World', text: 'Wahoo World', value: world },
     { key: 'New Albacore Hotel', text: 'New Albacore Hotel', value: hotel },
@@ -115,17 +119,26 @@ const MapPlanner = ({ setMenuSelection }) => {
     }
   }
 
-  const download = () => {
-    const dataUrl = sketch.toDataURL()
+  const download = (dataUrl, extension) => {
+    console.log('dataUrl', dataUrl)
     let a = document.createElement("a")
     document.body.appendChild(a)
     a.style = "display: none"
     a.href = dataUrl
-    a.download = `${bg.replace('/static/media/', '').split('-')[0]} plans.png`
+    a.download = `${bg.replace('/static/media/', '').split('-')[0]} plans.${extension}`
     a.click()
     window.URL.revokeObjectURL(dataUrl)
   }
 
+  const handleUpload = () => {
+    console.log('fp', fileInput)
+    if (fileInput.current.files.length === 0) {
+      console.log('if')
+      setUploadError('Please upload a file')
+      setTimeout(() => setUploadError(null), 5000)
+    } 
+  }
+
   const onBgChange = (value) => {
     setBg(value)
     sketch.clear()
@@ -139,7 +152,7 @@ const MapPlanner = ({ setMenuSelection }) => {
     document.title = 'Planner - sendou.ink'
     sketch.setBackgroundFromDataUrl(reef)
   }, [sketch, setMenuSelection])
-
+  console.log(uploadError)
   return (
     <div>
       <h1>Make your plans!</h1>
@@ -167,10 +180,14 @@ const MapPlanner = ({ setMenuSelection }) => {
       />
       </div>
       <div style={{"paddingTop": "10px"}}>
-        <Button icon disabled={!canUndo} onClick={() => undo()}><Icon name='undo' />Undo</Button>
-        <Button icon disabled={!canRedo} onClick={() => redo()}><Icon name='redo' />Redo</Button>
-        <Button icon disabled={tool !== Tools.Select} onClick={() => removeSelected()}><Icon name='trash' />Delete selected</Button>
-        <Button icon onClick={() => download()}><Icon name='download' />Download</Button>
+        <Button primary icon disabled={!canUndo} onClick={() => undo()}><Icon name='undo' /> Undo</Button>
+        <Button primary icon disabled={!canRedo} onClick={() => redo()}><Icon name='redo' /> Redo</Button>
+        <Button primary icon disabled={tool !== Tools.Select} onClick={() => removeSelected()}><Icon name='trash' /> Delete selected</Button>
+        <Button secondary icon onClick={() => download(sketch.toDataURL(), 'png')}><Icon name='download' /> Download as .png</Button>
+        <Button secondary icon onClick={() => download("data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(sketch.toJSON())), 'json')}><Icon name='cloud download' /> Download as .json</Button>
+        <Button secondary icon onClick={() => handleUpload()}><Icon name='cloud upload' /> Load from .json</Button>
+        <input type="file" accept=".json" ref={fileInput}/>
+        {uploadError && <Label pointing="left" color='red'>{uploadError}</Label>}
       </div>
       <div style={{"paddingTop": "10px"}}>
         <Grid columns={3}>
diff --git a/react-ui/src/components/img/plannerMaps/academy-sz-map.png b/react-ui/src/components/img/plannerMaps/academy-sz-map.png
deleted file mode 100644
index f862c5012..000000000
Binary files a/react-ui/src/components/img/plannerMaps/academy-sz-map.png and /dev/null differ
diff --git a/react-ui/src/components/img/plannerMaps/academy-sz.png b/react-ui/src/components/img/plannerMaps/academy-sz.png
new file mode 100644
index 000000000..ea232129a
Binary files /dev/null and b/react-ui/src/components/img/plannerMaps/academy-sz.png differ
diff --git a/react-ui/src/components/img/plannerMaps/arena-sz-map.png b/react-ui/src/components/img/plannerMaps/arena-sz-map.png
deleted file mode 100644
index 2bffcad04..000000000
Binary files a/react-ui/src/components/img/plannerMaps/arena-sz-map.png and /dev/null differ
diff --git a/react-ui/src/components/img/plannerMaps/arena-sz.png b/react-ui/src/components/img/plannerMaps/arena-sz.png
new file mode 100644
index 000000000..8011d3dd2
Binary files /dev/null and b/react-ui/src/components/img/plannerMaps/arena-sz.png differ
diff --git a/react-ui/src/components/img/plannerMaps/camp-sz-map.png b/react-ui/src/components/img/plannerMaps/camp-sz-map.png
deleted file mode 100644
index 7b99cf3f2..000000000
Binary files a/react-ui/src/components/img/plannerMaps/camp-sz-map.png and /dev/null differ
diff --git a/react-ui/src/components/img/plannerMaps/camp-sz.png b/react-ui/src/components/img/plannerMaps/camp-sz.png
new file mode 100644
index 000000000..6fa452e27
Binary files /dev/null and b/react-ui/src/components/img/plannerMaps/camp-sz.png differ
diff --git a/react-ui/src/components/img/plannerMaps/canal-sz-map.png b/react-ui/src/components/img/plannerMaps/canal-sz-map.png
deleted file mode 100644
index 7f9a4b056..000000000
Binary files a/react-ui/src/components/img/plannerMaps/canal-sz-map.png and /dev/null differ
diff --git a/react-ui/src/components/img/plannerMaps/canal-sz.png b/react-ui/src/components/img/plannerMaps/canal-sz.png
new file mode 100644
index 000000000..74d39c045
Binary files /dev/null and b/react-ui/src/components/img/plannerMaps/canal-sz.png differ
diff --git a/react-ui/src/components/img/plannerMaps/dome-sz-OLD.png b/react-ui/src/components/img/plannerMaps/dome-sz-OLD.png
deleted file mode 100644
index 416a9ed21..000000000
Binary files a/react-ui/src/components/img/plannerMaps/dome-sz-OLD.png and /dev/null differ
diff --git a/react-ui/src/components/img/plannerMaps/dome-sz.png b/react-ui/src/components/img/plannerMaps/dome-sz.png
new file mode 100644
index 000000000..b0aa7758d
Binary files /dev/null and b/react-ui/src/components/img/plannerMaps/dome-sz.png differ
diff --git a/react-ui/src/components/img/plannerMaps/fitness-sz-map.png b/react-ui/src/components/img/plannerMaps/fitness-sz-map.png
deleted file mode 100644
index 4a506fe2b..000000000
Binary files a/react-ui/src/components/img/plannerMaps/fitness-sz-map.png and /dev/null differ
diff --git a/react-ui/src/components/img/plannerMaps/fitness-sz.png b/react-ui/src/components/img/plannerMaps/fitness-sz.png
new file mode 100644
index 000000000..6f4dfc412
Binary files /dev/null and b/react-ui/src/components/img/plannerMaps/fitness-sz.png differ
diff --git a/react-ui/src/components/img/plannerMaps/games-sz-map.png b/react-ui/src/components/img/plannerMaps/games-sz-map.png
deleted file mode 100644
index a2919aae9..000000000
Binary files a/react-ui/src/components/img/plannerMaps/games-sz-map.png and /dev/null differ
diff --git a/react-ui/src/components/img/plannerMaps/games-sz.png b/react-ui/src/components/img/plannerMaps/games-sz.png
new file mode 100644
index 000000000..48da9532f
Binary files /dev/null and b/react-ui/src/components/img/plannerMaps/games-sz.png differ
diff --git a/react-ui/src/components/img/plannerMaps/hotel-sz-map.png b/react-ui/src/components/img/plannerMaps/hotel-sz-map.png
deleted file mode 100644
index cacf57f12..000000000
Binary files a/react-ui/src/components/img/plannerMaps/hotel-sz-map.png and /dev/null differ
diff --git a/react-ui/src/components/img/plannerMaps/hotel-sz.png b/react-ui/src/components/img/plannerMaps/hotel-sz.png
new file mode 100644
index 000000000..f66f960a1
Binary files /dev/null and b/react-ui/src/components/img/plannerMaps/hotel-sz.png differ
diff --git a/react-ui/src/components/img/plannerMaps/institute-sz-map.png b/react-ui/src/components/img/plannerMaps/institute-sz-map.png
deleted file mode 100644
index 8fde7c1af..000000000
Binary files a/react-ui/src/components/img/plannerMaps/institute-sz-map.png and /dev/null differ
diff --git a/react-ui/src/components/img/plannerMaps/institute-sz.png b/react-ui/src/components/img/plannerMaps/institute-sz.png
new file mode 100644
index 000000000..c3605dc15
Binary files /dev/null and b/react-ui/src/components/img/plannerMaps/institute-sz.png differ
diff --git a/react-ui/src/components/img/plannerMaps/mainstage-rm-new.png b/react-ui/src/components/img/plannerMaps/mainstage-rm-new.png
deleted file mode 100644
index 6a4243cb9..000000000
Binary files a/react-ui/src/components/img/plannerMaps/mainstage-rm-new.png and /dev/null differ
diff --git a/react-ui/src/components/img/plannerMaps/mainstage-sz.png b/react-ui/src/components/img/plannerMaps/mainstage-sz.png
new file mode 100644
index 000000000..3a280e20f
Binary files /dev/null and b/react-ui/src/components/img/plannerMaps/mainstage-sz.png differ
diff --git a/react-ui/src/components/img/plannerMaps/mall-sz-map.png b/react-ui/src/components/img/plannerMaps/mall-sz-map.png
deleted file mode 100644
index 3a9f1cde4..000000000
Binary files a/react-ui/src/components/img/plannerMaps/mall-sz-map.png and /dev/null differ
diff --git a/react-ui/src/components/img/plannerMaps/mall-sz.png b/react-ui/src/components/img/plannerMaps/mall-sz.png
new file mode 100644
index 000000000..fef1a6fe9
Binary files /dev/null and b/react-ui/src/components/img/plannerMaps/mall-sz.png differ
diff --git a/react-ui/src/components/img/plannerMaps/manta-sz-map.png b/react-ui/src/components/img/plannerMaps/manta-sz-map.png
deleted file mode 100644
index f676b25fa..000000000
Binary files a/react-ui/src/components/img/plannerMaps/manta-sz-map.png and /dev/null differ
diff --git a/react-ui/src/components/img/plannerMaps/manta-sz.png b/react-ui/src/components/img/plannerMaps/manta-sz.png
new file mode 100644
index 000000000..a8038e828
Binary files /dev/null and b/react-ui/src/components/img/plannerMaps/manta-sz.png differ
diff --git a/react-ui/src/components/img/plannerMaps/mart-sz-map.png b/react-ui/src/components/img/plannerMaps/mart-sz-map.png
deleted file mode 100644
index afe17ad52..000000000
Binary files a/react-ui/src/components/img/plannerMaps/mart-sz-map.png and /dev/null differ
diff --git a/react-ui/src/components/img/plannerMaps/mart-sz.png b/react-ui/src/components/img/plannerMaps/mart-sz.png
new file mode 100644
index 000000000..acf76dce7
Binary files /dev/null and b/react-ui/src/components/img/plannerMaps/mart-sz.png differ
diff --git a/react-ui/src/components/img/plannerMaps/pavilion-sz-map.png b/react-ui/src/components/img/plannerMaps/pavilion-sz-map.png
deleted file mode 100644
index ae9031511..000000000
Binary files a/react-ui/src/components/img/plannerMaps/pavilion-sz-map.png and /dev/null differ
diff --git a/react-ui/src/components/img/plannerMaps/pavilion-sz.png b/react-ui/src/components/img/plannerMaps/pavilion-sz.png
new file mode 100644
index 000000000..cff979a0c
Binary files /dev/null and b/react-ui/src/components/img/plannerMaps/pavilion-sz.png differ
diff --git a/react-ui/src/components/img/plannerMaps/pit-rm.png b/react-ui/src/components/img/plannerMaps/pit-rm.png
new file mode 100644
index 000000000..d421d7975
Binary files /dev/null and b/react-ui/src/components/img/plannerMaps/pit-rm.png differ
diff --git a/react-ui/src/components/img/plannerMaps/pit-sz-map.png b/react-ui/src/components/img/plannerMaps/pit-sz-map.png
deleted file mode 100644
index 8d37ada37..000000000
Binary files a/react-ui/src/components/img/plannerMaps/pit-sz-map.png and /dev/null differ
diff --git a/react-ui/src/components/img/plannerMaps/pit-sz.png b/react-ui/src/components/img/plannerMaps/pit-sz.png
new file mode 100644
index 000000000..779e7fded
Binary files /dev/null and b/react-ui/src/components/img/plannerMaps/pit-sz.png differ
diff --git a/react-ui/src/components/img/plannerMaps/port-sz-map.png b/react-ui/src/components/img/plannerMaps/port-sz-map.png
deleted file mode 100644
index d65f68797..000000000
Binary files a/react-ui/src/components/img/plannerMaps/port-sz-map.png and /dev/null differ
diff --git a/react-ui/src/components/img/plannerMaps/port-sz.png b/react-ui/src/components/img/plannerMaps/port-sz.png
new file mode 100644
index 000000000..eca63bca0
Binary files /dev/null and b/react-ui/src/components/img/plannerMaps/port-sz.png differ
diff --git a/react-ui/src/components/img/plannerMaps/pumptrack-sz-map.png b/react-ui/src/components/img/plannerMaps/pumptrack-sz-map.png
deleted file mode 100644
index d2329565f..000000000
Binary files a/react-ui/src/components/img/plannerMaps/pumptrack-sz-map.png and /dev/null differ
diff --git a/react-ui/src/components/img/plannerMaps/pumptrack-sz.png b/react-ui/src/components/img/plannerMaps/pumptrack-sz.png
new file mode 100644
index 000000000..a9cfbe28e
Binary files /dev/null and b/react-ui/src/components/img/plannerMaps/pumptrack-sz.png differ
diff --git a/react-ui/src/components/img/plannerMaps/reef-sz-new.png b/react-ui/src/components/img/plannerMaps/reef-sz-new.png
deleted file mode 100644
index 96a1fbf6b..000000000
Binary files a/react-ui/src/components/img/plannerMaps/reef-sz-new.png and /dev/null differ
diff --git a/react-ui/src/components/img/plannerMaps/reef-sz.png b/react-ui/src/components/img/plannerMaps/reef-sz.png
new file mode 100644
index 000000000..671f834b0
Binary files /dev/null and b/react-ui/src/components/img/plannerMaps/reef-sz.png differ
diff --git a/react-ui/src/components/img/plannerMaps/shipyard-sz-map.png b/react-ui/src/components/img/plannerMaps/shipyard-sz-map.png
deleted file mode 100644
index 7622a7c4f..000000000
Binary files a/react-ui/src/components/img/plannerMaps/shipyard-sz-map.png and /dev/null differ
diff --git a/react-ui/src/components/img/plannerMaps/shipyard-sz.png b/react-ui/src/components/img/plannerMaps/shipyard-sz.png
new file mode 100644
index 000000000..29861af92
Binary files /dev/null and b/react-ui/src/components/img/plannerMaps/shipyard-sz.png differ
diff --git a/react-ui/src/components/img/plannerMaps/skatepark-sz-new.png b/react-ui/src/components/img/plannerMaps/skatepark-sz-new.png
deleted file mode 100644
index 4f9651fbb..000000000
Binary files a/react-ui/src/components/img/plannerMaps/skatepark-sz-new.png and /dev/null differ
diff --git a/react-ui/src/components/img/plannerMaps/skatepark-sz.png b/react-ui/src/components/img/plannerMaps/skatepark-sz.png
new file mode 100644
index 000000000..605db0c8e
Binary files /dev/null and b/react-ui/src/components/img/plannerMaps/skatepark-sz.png differ
diff --git a/react-ui/src/components/img/plannerMaps/towers-sz-new-map.png b/react-ui/src/components/img/plannerMaps/towers-sz-new-map.png
deleted file mode 100644
index 989b3ec78..000000000
Binary files a/react-ui/src/components/img/plannerMaps/towers-sz-new-map.png and /dev/null differ
diff --git a/react-ui/src/components/img/plannerMaps/towers-sz.png b/react-ui/src/components/img/plannerMaps/towers-sz.png
new file mode 100644
index 000000000..1445b6e99
Binary files /dev/null and b/react-ui/src/components/img/plannerMaps/towers-sz.png differ
diff --git a/react-ui/src/components/img/plannerMaps/warehouse-sz-map.png b/react-ui/src/components/img/plannerMaps/warehouse-sz-map.png
deleted file mode 100644
index 02e3d1b11..000000000
Binary files a/react-ui/src/components/img/plannerMaps/warehouse-sz-map.png and /dev/null differ
diff --git a/react-ui/src/components/img/plannerMaps/warehouse-sz.png b/react-ui/src/components/img/plannerMaps/warehouse-sz.png
new file mode 100644
index 000000000..ca20bb0a9
Binary files /dev/null and b/react-ui/src/components/img/plannerMaps/warehouse-sz.png differ
diff --git a/react-ui/src/components/img/plannerMaps/world-sz-map.png b/react-ui/src/components/img/plannerMaps/world-sz-map.png
deleted file mode 100644
index 53bb1ba05..000000000
Binary files a/react-ui/src/components/img/plannerMaps/world-sz-map.png and /dev/null differ
diff --git a/react-ui/src/components/img/plannerMaps/world-sz.png b/react-ui/src/components/img/plannerMaps/world-sz.png
new file mode 100644
index 000000000..27d8ca21b
Binary files /dev/null and b/react-ui/src/components/img/plannerMaps/world-sz.png differ