diff --git a/assets/game-pieces/2D/Hex-Flat.svg b/assets/game-pieces/2D/Hex-Flat.svg
new file mode 100644
index 000000000..2a758a4b7
--- /dev/null
+++ b/assets/game-pieces/2D/Hex-Flat.svg
@@ -0,0 +1,8 @@
+<svg version="1.2" baseProfile="tiny-ps" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+	<title>Hex Flat</title>
+	<style>
+		tspan { white-space:pre }
+		.shp0 { fill: #primaryColor; stroke: #borderColor; stroke-width:#borderWidth; }
+	</style>
+	<polygon id="Layer" class="shp0" points="100,50 75,93.33 25,93.33 0,50 25,6.67 75,6.67"/>
+</svg>
diff --git a/assets/game-pieces/2D/Hex-Point.svg b/assets/game-pieces/2D/Hex-Point.svg
new file mode 100644
index 000000000..67b5260db
--- /dev/null
+++ b/assets/game-pieces/2D/Hex-Point.svg
@@ -0,0 +1,8 @@
+<svg version="1.2" baseProfile="tiny-ps" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+	<title>Hex Flat</title>
+	<style>
+		tspan { white-space:pre }
+		.shp0 { fill: #primaryColor; stroke: #borderColor; stroke-width:#borderWidth; }
+	</style>
+	<polygon id="Layer" class="shp0" points="50,0 93.3,25 93.3,75 50,100 6.7,75 6.7,25"/>
+</svg>
diff --git a/client/js/editmode.js b/client/js/editmode.js
index 8ae290b38..f701c7446 100644
--- a/client/js/editmode.js
+++ b/client/js/editmode.js
@@ -793,6 +793,116 @@ function populateAddWidgetOverlay() {
     borderWidth: 1
   });
 
+   //Sixth row (hexagons)
+
+   addPieceToAddWidgetOverlay(new BasicWidget('HexFlat'), {
+    x: 390,
+    y: 600,
+    width: 50,
+    height: 50,
+    color: VTTblue,
+    image: "i/game-pieces/2D/Hex-Flat.svg",
+    svgReplaces: {
+      "#primaryColor": "color",
+      "#borderColor": "borderColor",
+      "#borderWidth": "borderWidth"
+    },
+    borderColor: "#000000",
+    borderWidth: 2,
+    hexType: "flat"
+  });
+
+  addPieceToAddWidgetOverlay(new BasicWidget('HexPoint'), {
+    x: 465,
+    y: 600,
+    width: 50,
+    height: 50,
+    color: VTTblue,
+    image: "i/game-pieces/2D/Hex-Point.svg",
+    svgReplaces: {
+      "#primaryColor": "color",
+      "#borderColor": "borderColor",
+      "#borderWidth": "borderWidth"
+    },
+    borderColor: "#000000",
+    borderWidth: 2,
+    hexType: "point"
+  });
+
+  //This is added only to provide a visual background for the actual piece "HexFlatImage" since the css there does not show on the overlay
+
+  addPieceToAddWidgetOverlay(new BasicWidget('HexFlatImageBack'), {
+    x: 530,
+    y: 590,
+    width: 70,
+    height: 70,
+    color: VTTblue,
+    image: "i/icons/hexagon_horizontal.svg",
+    svgReplaces: {
+      "currentColor": "color"
+    }
+  });
+
+  addPieceToAddWidgetOverlay(new BasicWidget('HexFlatImage'), {
+    x: 540,
+    y: 600,
+    width: 50,
+    height: 50,
+    imageColor: '#ffffff',
+    image: "i/icons/zoom_in.svg",
+    svgReplaces: {
+      "currentColor": "imageColor"
+    },
+    css: {
+      "default": {
+        "background-color": "${PROPERTY color}",
+        "background-image": "url('${PROPERTY image}')",
+        "background-size": "75% 75%",
+        "background-repeat": "no repeat",
+        "background-position": "center center",
+        "clip-path": "polygon(25% 6.67%, 75% 6.67%, 100% 50%, 75% 93.33%, 25% 93.33%, 0% 50%)"
+      }
+    },
+    hexType: "flat"
+  });
+
+  //This is added only to provide a visual background for the actual piece "HexPointImage" since the css there does not show on the overlay
+
+  addPieceToAddWidgetOverlay(new BasicWidget('HexFlatImageBack'), {
+    x: 605,
+    y: 590,
+    width: 70,
+    height: 70,
+    color: VTTblue,
+    image: "i/icons/hexagon_vertical.svg",
+    svgReplaces: {
+      "currentColor": "color"
+    }
+  });
+
+  addPieceToAddWidgetOverlay(new BasicWidget('HexPointImage'), {
+    x: 615,
+    y: 600,
+    width: 50,
+    height: 50,
+    imageColor: '#ffffff',
+    image: "i/icons/zoom_out.svg",
+    svgReplaces: {
+      "currentColor": "imageColor"
+    },
+    css: {
+      "default": {
+        "background-color": "${PROPERTY color}",
+        "background-image": "url('${PROPERTY image}')",
+        "background-size": "75% 75%",
+        "background-repeat": "no repeat",
+        "background-position": "center center",
+        "clip-path": "polygon(93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%, 50% 0%)"
+      }
+    },
+    hexType: "point"
+  });
+
   //Poker chips
 
   addWidgetToAddWidgetOverlay(new BasicWidget('EmptyPoker2DSVG'), {
diff --git a/client/js/jsonedit.js b/client/js/jsonedit.js
index f04858399..642342350 100644
--- a/client/js/jsonedit.js
+++ b/client/js/jsonedit.js
@@ -551,6 +551,44 @@ const jeCommands = [
       jeSetAndSelect(w.get('width'));
     }
   },
+  {
+    id: 'je_hexGrid',
+    name: 'calculated hex grid',
+    context: '^[^ ]* ↦ grid',
+    call: async function() {
+      const w = widgets.get(jeStateNow.id);
+      let hexType = w.get('hexType');
+      let isFlat = hexType === 'flat';
+      let hexSide = isFlat ? w.get('height') : w.get('width');
+
+      let long = hexSide;
+      let short = parseFloat((long * Math.sqrt(3) / 2).toFixed(2));
+      let long15 = long * 1.5;
+      let long75 = long * 0.75;
+      let shortHalf = short / 2;
+
+      let xHex = isFlat ? long15 : short;
+      let yHex = isFlat ? short : long15;
+      let offsetXHex = isFlat ? long75 : shortHalf;
+      let offsetYHex = isFlat ? shortHalf : long75;
+
+      jeStateNow.grid.push(
+        {
+          "x": '###SELECT ME###',
+          "y": yHex,
+          "offsetX": offsetXHex,
+          "offsetY": offsetYHex
+        },
+        {
+          "x": xHex,
+          "y": yHex,
+          "offsetX": 0,
+          "offsetY": 0
+        }       
+      );
+      jeSetAndSelect(xHex);
+    }
+  },
   {
     id: 'je_imageTemplate',
     name: 'image template',
@@ -1305,6 +1343,20 @@ function jeAddGridCommand(key, value) {
   });
 }
 
+function jeAddHexGridCommand(key, value) {
+  jeCommands.push({
+    id: 'hexGrid_' + key,
+    name: key,
+    context: '^[^ ]* ↦ grid ↦ [0-9]+',
+    show: _=>!(key in jeStateNow.hexGrid[+jeContext[2]]),
+    call: async function() {
+      jeStateNow.hexGrid[+jeContext[2]][key] = '###SELECT ME###';
+      jeSetAndSelect(value);
+    }
+  });
+}
+    
+
 function jeAddLimitCommand(key, value) {
   jeCommands.push({
     id: 'limit_' + key,