diff --git a/src/frontend/src/components/common/BottomSheet.tsx b/src/frontend/src/components/common/BottomSheet.tsx
index 997730cd0..ed1038209 100644
--- a/src/frontend/src/components/common/BottomSheet.tsx
+++ b/src/frontend/src/components/common/BottomSheet.tsx
@@ -46,6 +46,7 @@ const BottomSheet = ({ body, onClose }: bottomSheetType) => {
   };
 
   const dragStart = (e) => {
+    e.preventDefault();
     const pagesY = e.pageY || e.changedTouches[0].screenY;
     setStartY(pagesY);
     setStartHeight(parseInt(sheetContentRef.current.style.height));
@@ -54,6 +55,7 @@ const BottomSheet = ({ body, onClose }: bottomSheetType) => {
   };
 
   const dragging = (e) => {
+    if (!isDragging) return;
     const delta = startY - (e.pageY || e.changedTouches[0].screenY);
     const newHeight = startHeight + (delta / window.innerHeight) * 100;
     bottomSheetRef.current.style.height = `100vh`;
@@ -88,22 +90,21 @@ const BottomSheet = ({ body, onClose }: bottomSheetType) => {
         </div>
         <div
           ref={sheetContentRef}
-          className={`bottom-sheet-content fmtm-shadow-[30px_-10px_10px_5px_rgba(0,0,0,0.1)] fmtm-w-full fmtm-relative fmtm-bg-white fmtm-max-h-[100vh] fmtm-h-[50vh] fmtm-max-w-[1150px] fmtm-py-6 fmtm-px-4 fmtm-duration-300 fmtm-ease-in-out fmtm-overflow-hidden ${
+          className={`bottom-sheet-content fmtm-shadow-[30px_-10px_10px_5px_rgba(0,0,0,0.1)] fmtm-w-full fmtm-relative fmtm-bg-white fmtm-max-h-[100vh] fmtm-h-[50vh] fmtm-max-w-[1150px] fmtm-pb-6 fmtm-px-4 fmtm-duration-300 fmtm-ease-in-out fmtm-overflow-hidden ${
             !show ? 'fmtm-translate-y-[100%]' : 'fmtm-translate-y-[0%]'
           } ${isDragging ? 'fmtm-transition-none' : ''} ${isFullScreen ? 'fmtm-rounded-none' : 'fmtm-rounded-t-2xl'}`}
         >
-          <div className="header fmtm-flex fmtm-justify-center">
-            <div
-              className="drag-icon fmtm-cursor-grab fmtm-select-none fmtm-p-4 -fmtm-mt-4 fmtm-z-[9999]"
-              onMouseDown={dragStart}
-              onTouchStart={dragStart}
-              onMouseMove={dragging}
-              onTouchMove={dragging}
-              onMouseUp={dragStop}
-              onTouchEnd={dragStop}
-            >
-              <span className="fmtm-h-1 fmtm-w-[2.5rem] fmtm-block fmtm-bg-[#c7d0e1] fmtm-rounded-full hover:fmtm-bg-primaryRed"></span>
-            </div>
+          <div
+            className="header fmtm-group fmtm-flex fmtm-justify-center fmtm-py-4 drag-icon fmtm-cursor-grab fmtm-select-none fmtm-z-[9999]"
+            onMouseDown={dragStart}
+            onTouchStart={dragStart}
+            onMouseMove={dragging}
+            onTouchMove={dragging}
+            onMouseUp={dragStop}
+            onTouchEnd={dragStop}
+            onMouseOut={dragStop}
+          >
+            <span className="fmtm-h-1 fmtm-w-[2.5rem] fmtm-block fmtm-bg-[#c7d0e1] fmtm-rounded-full  group-hover:fmtm-bg-primaryRed fmtm-pointer-events-none"></span>
           </div>
           <div className="body fmtm-overflow-y-scroll scrollbar fmtm-h-full fmtm-p-[1px]">{body}</div>
         </div>
diff --git a/src/mapper/package.json b/src/mapper/package.json
index ae3bf58a6..280f998fa 100644
--- a/src/mapper/package.json
+++ b/src/mapper/package.json
@@ -46,6 +46,9 @@
 		"@electric-sql/pglite": "^0.2.4",
 		"@hotosm/ui": "0.2.0-b5",
 		"@prisma/client": "4.8.1",
+		"@tiptap/core": "^2.8.0",
+		"@tiptap/pm": "^2.8.0",
+		"@tiptap/starter-kit": "^2.8.0",
 		"@turf/bbox": "^7.0.0",
 		"@turf/buffer": "^7.0.0",
 		"@turf/helpers": "^7.0.0",
diff --git a/src/mapper/pnpm-lock.yaml b/src/mapper/pnpm-lock.yaml
index 3d558642d..d91154848 100644
--- a/src/mapper/pnpm-lock.yaml
+++ b/src/mapper/pnpm-lock.yaml
@@ -23,6 +23,15 @@ importers:
       '@shoelace-style/shoelace':
         specifier: ^2.15.1
         version: 2.15.1(@types/react@18.3.3)
+      '@tiptap/core':
+        specifier: ^2.8.0
+        version: 2.8.0(@tiptap/pm@2.8.0)
+      '@tiptap/pm':
+        specifier: ^2.8.0
+        version: 2.8.0
+      '@tiptap/starter-kit':
+        specifier: ^2.8.0
+        version: 2.8.0(@tiptap/extension-text-style@2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0)))
       '@turf/bbox':
         specifier: ^7.0.0
         version: 7.0.0
@@ -573,6 +582,9 @@ packages:
   '@prisma/engines@4.8.1':
     resolution: {integrity: sha512-93tctjNXcIS+i/e552IO6tqw17sX8liivv8WX9lDMCpEEe3ci+nT9F+1oHtAafqruXLepKF80i/D20Mm+ESlOw==}
 
+  '@remirror/core-constants@3.0.0':
+    resolution: {integrity: sha512-42aWfPrimMfDKDi4YegyS7x+/0tlzaqwPQCULLanv3DMIlu96KTJR0fM5isWX2UViOqlGnX6YFgqWepcX+XMNg==}
+
   '@rollup/pluginutils@5.1.0':
     resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
     engines: {node: '>=14.0.0'}
@@ -713,6 +725,121 @@ packages:
       svelte: ^4.0.0 || ^5.0.0-next.0
       vite: ^5.0.0
 
+  '@tiptap/core@2.8.0':
+    resolution: {integrity: sha512-xsqDI4BNzYRWRtBq7+/38ThhqEr7uG9Njip1x+9/wgR3vWPBFnBkYJTz6jSxS35NRE6BSnERm4/B/vrLuY1Hdw==}
+    peerDependencies:
+      '@tiptap/pm': ^2.7.0
+
+  '@tiptap/extension-blockquote@2.8.0':
+    resolution: {integrity: sha512-m3CKrOIvV7fY1Ak2gYf5LkKiz6AHxHpg6wxfVaJvdBqXgLyVtHo552N+A4oSHOSRbB4AG9EBQ2NeBM8cdEQ4MA==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-bold@2.8.0':
+    resolution: {integrity: sha512-U1YkZBxDkSLNvPNiqxB5g42IeJHr27C7zDb/yGQN2xL4UBeg4O9xVhCFfe32f6tLwivSL0dar4ScElpaCJuqow==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-bullet-list@2.8.0':
+    resolution: {integrity: sha512-H4O2X0ozbc/ce9/XF1H98sqWVUdtt7jzy7hMBunwmY8ZxI4dHtcRkeg81CZbpKTqOqRrMCLWjE3M2tgiDXrDkA==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+      '@tiptap/extension-list-item': ^2.7.0
+      '@tiptap/extension-text-style': ^2.7.0
+
+  '@tiptap/extension-code-block@2.8.0':
+    resolution: {integrity: sha512-POuA5Igx+Dto0DTazoBFAQTj/M/FCdkqRVD9Uhsxhv49swPyANTJRr05vgbgtHB+NDDsZfCawVh7pI0IAD/O0w==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+      '@tiptap/pm': ^2.7.0
+
+  '@tiptap/extension-code@2.8.0':
+    resolution: {integrity: sha512-VSFn3sFF6qPpOGkXFhik8oYRH5iByVJpFEFd/duIEftmS0MdPzkbSItOpN3mc9xsJ5dCX80LYaResSj5hr5zkA==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-document@2.8.0':
+    resolution: {integrity: sha512-mp7Isx1sVc/ifeW4uW/PexGQ9exN3NRUOebSpnLfqXeWYk4y1RS1PA/3+IHkOPVetbnapgPjFx/DswlCP3XLjA==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-dropcursor@2.8.0':
+    resolution: {integrity: sha512-rAFvx44YuT6dtS1c+ALw0ROAGI16l5L1HxquL4hR1gtxDcTieST5xhw5bkshXlmrlfotZXPrhokzqA7qjhZtJw==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+      '@tiptap/pm': ^2.7.0
+
+  '@tiptap/extension-gapcursor@2.8.0':
+    resolution: {integrity: sha512-Be1LWCmvteQInOnNVN+HTqc1XWsj1bCl+Q7et8qqNjtGtTaCbdCp8ppcH1SKJxNTM/RLUtPyJ8FDgOTj51ixCA==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+      '@tiptap/pm': ^2.7.0
+
+  '@tiptap/extension-hard-break@2.8.0':
+    resolution: {integrity: sha512-vqiIfviNiCmy/pJTHuDSCAGL2O4QDEdDmAvGJu8oRmElUrnlg8DbJUfKvn6DWQHNSQwRb+LDrwWlzAYj1K9u6A==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-heading@2.8.0':
+    resolution: {integrity: sha512-4inWgrTPiqlivPmEHFOM5ck2UsmOsbKKPtqga6bALvWPmCv24S6/EBwFp8Jz4YABabXDnkviihmGu0LpP9D69w==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-history@2.8.0':
+    resolution: {integrity: sha512-u5YS0J5Egsxt8TUWMMAC3QhPZaak+IzQeyHch4gtqxftx96tprItY7AD/A3pGDF2uCSnN+SZrk6yVexm6EncDw==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+      '@tiptap/pm': ^2.7.0
+
+  '@tiptap/extension-horizontal-rule@2.8.0':
+    resolution: {integrity: sha512-Sn/MI8WVFBoIYSIHA9NJryJIyCEzZdRysau8pC5TFnfifre0QV1ksPz2bgF+DyCD69ozQiRdBBHDEwKe47ZbfQ==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+      '@tiptap/pm': ^2.7.0
+
+  '@tiptap/extension-italic@2.8.0':
+    resolution: {integrity: sha512-PwwSE2LTYiHI47NJnsfhBmPiLE8IXZYqaSoNPU6flPrk1KxEzqvRI1joKZBmD9wuqzmHJ93VFIeZcC+kfwi8ZA==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-list-item@2.8.0':
+    resolution: {integrity: sha512-o7OGymGxB0B9x3x2prp3KBDYFuBYGc5sW69O672jk8G52DqhzzndgPnkk0qUn8nXAUKuDGbJmpmHVA2kagqnRg==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-ordered-list@2.8.0':
+    resolution: {integrity: sha512-sCvNbcTS1+5QTTXwUPFa10vf5I1pr8sGcOTIh0G+a5ZkS5+6FxT12k7VLzPt39QyNbOi+77U2o4Xr4XyaEkfSg==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+      '@tiptap/extension-list-item': ^2.7.0
+      '@tiptap/extension-text-style': ^2.7.0
+
+  '@tiptap/extension-paragraph@2.8.0':
+    resolution: {integrity: sha512-XgxxNNbuBF48rAGwv7/s6as92/xjm/lTZIGTq9aG13ClUKFtgdel7C33SpUCcxg3cO2WkEyllXVyKUiauFZw/A==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-strike@2.8.0':
+    resolution: {integrity: sha512-ezkDiXxQ3ME/dDMMM7tAMkKRi6UWw7tIu+Mx7Os0z8HCGpVBk1gFhLlhEd8I5rJaPZr4tK1wtSehMA9bscFGQw==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-text-style@2.8.0':
+    resolution: {integrity: sha512-jJp0vcZ2Ty7RvIL0VU6dm1y+fTfXq1lN2GwtYzYM0ueFuESa+Qo8ticYOImyWZ3wGJGVrjn7OV9r0ReW0/NYkQ==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-text@2.8.0':
+    resolution: {integrity: sha512-EDAdFFzWOvQfVy7j3qkKhBpOeE5thkJaBemSWfXI93/gMVc0ZCdLi24mDvNNgUHlT+RjlIoQq908jZaaxLKN2A==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/pm@2.8.0':
+    resolution: {integrity: sha512-eMGpRooUMvKz/vOpnKKppApMSoNM325HxTdAJvTlVAmuHp5bOY5kyY1kfUlePRiVx1t1UlFcXs3kecFwkkBD3Q==}
+
+  '@tiptap/starter-kit@2.8.0':
+    resolution: {integrity: sha512-r7UwaTrECkQoheWVZKFDqtL5tBx07x7IFT+prfgnsVlYFutGWskVVqzCDvD3BDmrg5PzeCWYZrQGlPaLib7tjg==}
+
   '@turf/bbox@7.0.0':
     resolution: {integrity: sha512-IyXG5HAsn6IZLdAtQo7aWYccjU5WsV+uzIzhGaXrh/qTVylSYmRiWgLdiekHZVED9nv9r7D/EJUMOT4zyA6POA==}
 
@@ -761,12 +888,21 @@ packages:
   '@types/leaflet@1.9.12':
     resolution: {integrity: sha512-BK7XS+NyRI291HIo0HCfE18Lp8oA30H1gpi1tf0mF3TgiCEzanQjOqNZ4x126SXzzi2oNSZhZ5axJp1k0iM6jg==}
 
+  '@types/linkify-it@5.0.0':
+    resolution: {integrity: sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==}
+
   '@types/mapbox__point-geometry@0.1.4':
     resolution: {integrity: sha512-mUWlSxAmYLfwnRBmgYV86tgYmMIICX4kza8YnE/eIlywGe2XoOxlpVnXWwir92xRLjwyarqwpu2EJKD2pk0IUA==}
 
   '@types/mapbox__vector-tile@1.3.4':
     resolution: {integrity: sha512-bpd8dRn9pr6xKvuEBQup8pwQfD4VUyqO/2deGjfpe6AwC8YRlyEipvefyRJUSiCJTZuCb8Pl1ciVV5ekqJ96Bg==}
 
+  '@types/markdown-it@14.1.2':
+    resolution: {integrity: sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==}
+
+  '@types/mdurl@2.0.0':
+    resolution: {integrity: sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==}
+
   '@types/node@20.14.8':
     resolution: {integrity: sha512-DO+2/jZinXfROG7j7WKFn/3C6nFwxy2lLpgLjEXJz+0XKphZlTLJ14mo8Vfg8X5BWN6XjyESXq+LcYdT7tR3bA==}
 
@@ -1134,6 +1270,9 @@ packages:
     resolution: {integrity: sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==}
     engines: {node: '>= 0.6'}
 
+  crelt@1.0.6:
+    resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}
+
   cross-spawn@7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
@@ -1323,6 +1462,10 @@ packages:
   electron-to-chromium@1.4.827:
     resolution: {integrity: sha512-VY+J0e4SFcNfQy19MEoMdaIcZLmDCprqvBtkii1WTCTQHpRvf5N8+3kTYCgL/PcntvwQvmMJWTuDPsq+IlhWKQ==}
 
+  entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+
   es-define-property@1.0.0:
     resolution: {integrity: sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==}
     engines: {node: '>= 0.4'}
@@ -1830,6 +1973,9 @@ packages:
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
     engines: {node: '>=10'}
 
+  linkify-it@5.0.0:
+    resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
+
   lit-element@4.0.6:
     resolution: {integrity: sha512-U4sdJ3CSQip7sLGZ/uJskO5hGiqtlpxndsLr6mt3IQIjheg93UKYeGQjWMRql1s/cXNOaRrCzC2FQwjIwSUqkg==}
 
@@ -1875,9 +2021,16 @@ packages:
     resolution: {integrity: sha512-qOS1hn4d/pn2i0uva4S5Oz+fACzTkgBKq+NpwT/Tqzi4MSyzcWNtDELzLUSgWqHfNIkGCl5CZ/w7dtis+t4RCw==}
     engines: {node: '>=16.14.0', npm: '>=8.1.0'}
 
+  markdown-it@14.1.0:
+    resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==}
+    hasBin: true
+
   mdn-data@2.0.30:
     resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
 
+  mdurl@2.0.0:
+    resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
+
   merge-stream@2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
 
@@ -1992,6 +2145,9 @@ packages:
     resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
     engines: {node: '>= 0.8.0'}
 
+  orderedmap@2.1.1:
+    resolution: {integrity: sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g==}
+
   p-limit@3.1.0:
     resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
     engines: {node: '>=10'}
@@ -2133,9 +2289,71 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
+  prosemirror-changeset@2.2.1:
+    resolution: {integrity: sha512-J7msc6wbxB4ekDFj+n9gTW/jav/p53kdlivvuppHsrZXCaQdVgRghoZbSS3kwrRyAstRVQ4/+u5k7YfLgkkQvQ==}
+
+  prosemirror-collab@1.3.1:
+    resolution: {integrity: sha512-4SnynYR9TTYaQVXd/ieUvsVV4PDMBzrq2xPUWutHivDuOshZXqQ5rGbZM84HEaXKbLdItse7weMGOUdDVcLKEQ==}
+
+  prosemirror-commands@1.6.0:
+    resolution: {integrity: sha512-xn1U/g36OqXn2tn5nGmvnnimAj/g1pUx2ypJJIe8WkVX83WyJVC5LTARaxZa2AtQRwntu9Jc5zXs9gL9svp/mg==}
+
+  prosemirror-dropcursor@1.8.1:
+    resolution: {integrity: sha512-M30WJdJZLyXHi3N8vxN6Zh5O8ZBbQCz0gURTfPmTIBNQ5pxrdU7A58QkNqfa98YEjSAL1HUyyU34f6Pm5xBSGw==}
+
+  prosemirror-gapcursor@1.3.2:
+    resolution: {integrity: sha512-wtjswVBd2vaQRrnYZaBCbyDqr232Ed4p2QPtRIUK5FuqHYKGWkEwl08oQM4Tw7DOR0FsasARV5uJFvMZWxdNxQ==}
+
+  prosemirror-history@1.4.1:
+    resolution: {integrity: sha512-2JZD8z2JviJrboD9cPuX/Sv/1ChFng+xh2tChQ2X4bB2HeK+rra/bmJ3xGntCcjhOqIzSDG6Id7e8RJ9QPXLEQ==}
+
+  prosemirror-inputrules@1.4.0:
+    resolution: {integrity: sha512-6ygpPRuTJ2lcOXs9JkefieMst63wVJBgHZGl5QOytN7oSZs3Co/BYbc3Yx9zm9H37Bxw8kVzCnDsihsVsL4yEg==}
+
+  prosemirror-keymap@1.2.2:
+    resolution: {integrity: sha512-EAlXoksqC6Vbocqc0GtzCruZEzYgrn+iiGnNjsJsH4mrnIGex4qbLdWWNza3AW5W36ZRrlBID0eM6bdKH4OStQ==}
+
+  prosemirror-markdown@1.13.1:
+    resolution: {integrity: sha512-Sl+oMfMtAjWtlcZoj/5L/Q39MpEnVZ840Xo330WJWUvgyhNmLBLN7MsHn07s53nG/KImevWHSE6fEj4q/GihHw==}
+
+  prosemirror-menu@1.2.4:
+    resolution: {integrity: sha512-S/bXlc0ODQup6aiBbWVsX/eM+xJgCTAfMq/nLqaO5ID/am4wS0tTCIkzwytmao7ypEtjj39i7YbJjAgO20mIqA==}
+
+  prosemirror-model@1.23.0:
+    resolution: {integrity: sha512-Q/fgsgl/dlOAW9ILu4OOhYWQbc7TQd4BwKH/RwmUjyVf8682Be4zj3rOYdLnYEcGzyg8LL9Q5IWYKD8tdToreQ==}
+
+  prosemirror-schema-basic@1.2.3:
+    resolution: {integrity: sha512-h+H0OQwZVqMon1PNn0AG9cTfx513zgIG2DY00eJ00Yvgb3UD+GQ/VlWW5rcaxacpCGT1Yx8nuhwXk4+QbXUfJA==}
+
+  prosemirror-schema-list@1.4.1:
+    resolution: {integrity: sha512-jbDyaP/6AFfDfu70VzySsD75Om2t3sXTOdl5+31Wlxlg62td1haUpty/ybajSfJ1pkGadlOfwQq9kgW5IMo1Rg==}
+
+  prosemirror-state@1.4.3:
+    resolution: {integrity: sha512-goFKORVbvPuAQaXhpbemJFRKJ2aixr+AZMGiquiqKxaucC6hlpHNZHWgz5R7dS4roHiwq9vDctE//CZ++o0W1Q==}
+
+  prosemirror-tables@1.5.0:
+    resolution: {integrity: sha512-VMx4zlYWm7aBlZ5xtfJHpqa3Xgu3b7srV54fXYnXgsAcIGRqKSrhiK3f89omzzgaAgAtDOV4ImXnLKhVfheVNQ==}
+
+  prosemirror-trailing-node@3.0.0:
+    resolution: {integrity: sha512-xiun5/3q0w5eRnGYfNlW1uU9W6x5MoFKWwq/0TIRgt09lv7Hcser2QYV8t4muXbEr+Fwo0geYn79Xs4GKywrRQ==}
+    peerDependencies:
+      prosemirror-model: ^1.22.1
+      prosemirror-state: ^1.4.2
+      prosemirror-view: ^1.33.8
+
+  prosemirror-transform@1.10.0:
+    resolution: {integrity: sha512-9UOgFSgN6Gj2ekQH5CTDJ8Rp/fnKR2IkYfGdzzp5zQMFsS4zDllLVx/+jGcX86YlACpG7UR5fwAXiWzxqWtBTg==}
+
+  prosemirror-view@1.34.3:
+    resolution: {integrity: sha512-mKZ54PrX19sSaQye+sef+YjBbNu2voNwLS1ivb6aD2IRmxRGW64HU9B644+7OfJStGLyxvOreKqEgfvXa91WIA==}
+
   protocol-buffers-schema@3.6.0:
     resolution: {integrity: sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw==}
 
+  punycode.js@2.3.1:
+    resolution: {integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==}
+    engines: {node: '>=6'}
+
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
@@ -2186,6 +2404,9 @@ packages:
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
+  rope-sequence@1.3.4:
+    resolution: {integrity: sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ==}
+
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
@@ -2462,6 +2683,9 @@ packages:
   typewise@1.0.3:
     resolution: {integrity: sha512-aXofE06xGhaQSPzt8hlTY+/YWQhm9P0jYUp1f2XtmW/3Bk0qzXcyFWAtPoo2uTGQj1ZwbDuSyuxicq+aDo8lCQ==}
 
+  uc.micro@2.1.0:
+    resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==}
+
   ufo@1.5.3:
     resolution: {integrity: sha512-Y7HYmWaFwPUmkoQCUIAYpKqkOf+SbVj/2fJJZ4RJMCfZp0rTGwRbzQD+HghfnhKOjL9E01okqz+ncJskGYfBNw==}
 
@@ -2572,6 +2796,9 @@ packages:
   vt-pbf@3.1.3:
     resolution: {integrity: sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==}
 
+  w3c-keyname@2.2.8:
+    resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
+
   which-boxed-primitive@1.0.2:
     resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
 
@@ -3091,6 +3318,8 @@ snapshots:
 
   '@prisma/engines@4.8.1': {}
 
+  '@remirror/core-constants@3.0.0': {}
+
   '@rollup/pluginutils@5.1.0(rollup@4.18.0)':
     dependencies:
       '@types/estree': 1.0.5
@@ -3228,6 +3457,141 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@tiptap/core@2.8.0(@tiptap/pm@2.8.0)':
+    dependencies:
+      '@tiptap/pm': 2.8.0
+
+  '@tiptap/extension-blockquote@2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))':
+    dependencies:
+      '@tiptap/core': 2.8.0(@tiptap/pm@2.8.0)
+
+  '@tiptap/extension-bold@2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))':
+    dependencies:
+      '@tiptap/core': 2.8.0(@tiptap/pm@2.8.0)
+
+  '@tiptap/extension-bullet-list@2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))(@tiptap/extension-list-item@2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0)))(@tiptap/extension-text-style@2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0)))':
+    dependencies:
+      '@tiptap/core': 2.8.0(@tiptap/pm@2.8.0)
+      '@tiptap/extension-list-item': 2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))
+      '@tiptap/extension-text-style': 2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))
+
+  '@tiptap/extension-code-block@2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))(@tiptap/pm@2.8.0)':
+    dependencies:
+      '@tiptap/core': 2.8.0(@tiptap/pm@2.8.0)
+      '@tiptap/pm': 2.8.0
+
+  '@tiptap/extension-code@2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))':
+    dependencies:
+      '@tiptap/core': 2.8.0(@tiptap/pm@2.8.0)
+
+  '@tiptap/extension-document@2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))':
+    dependencies:
+      '@tiptap/core': 2.8.0(@tiptap/pm@2.8.0)
+
+  '@tiptap/extension-dropcursor@2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))(@tiptap/pm@2.8.0)':
+    dependencies:
+      '@tiptap/core': 2.8.0(@tiptap/pm@2.8.0)
+      '@tiptap/pm': 2.8.0
+
+  '@tiptap/extension-gapcursor@2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))(@tiptap/pm@2.8.0)':
+    dependencies:
+      '@tiptap/core': 2.8.0(@tiptap/pm@2.8.0)
+      '@tiptap/pm': 2.8.0
+
+  '@tiptap/extension-hard-break@2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))':
+    dependencies:
+      '@tiptap/core': 2.8.0(@tiptap/pm@2.8.0)
+
+  '@tiptap/extension-heading@2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))':
+    dependencies:
+      '@tiptap/core': 2.8.0(@tiptap/pm@2.8.0)
+
+  '@tiptap/extension-history@2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))(@tiptap/pm@2.8.0)':
+    dependencies:
+      '@tiptap/core': 2.8.0(@tiptap/pm@2.8.0)
+      '@tiptap/pm': 2.8.0
+
+  '@tiptap/extension-horizontal-rule@2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))(@tiptap/pm@2.8.0)':
+    dependencies:
+      '@tiptap/core': 2.8.0(@tiptap/pm@2.8.0)
+      '@tiptap/pm': 2.8.0
+
+  '@tiptap/extension-italic@2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))':
+    dependencies:
+      '@tiptap/core': 2.8.0(@tiptap/pm@2.8.0)
+
+  '@tiptap/extension-list-item@2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))':
+    dependencies:
+      '@tiptap/core': 2.8.0(@tiptap/pm@2.8.0)
+
+  '@tiptap/extension-ordered-list@2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))(@tiptap/extension-list-item@2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0)))(@tiptap/extension-text-style@2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0)))':
+    dependencies:
+      '@tiptap/core': 2.8.0(@tiptap/pm@2.8.0)
+      '@tiptap/extension-list-item': 2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))
+      '@tiptap/extension-text-style': 2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))
+
+  '@tiptap/extension-paragraph@2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))':
+    dependencies:
+      '@tiptap/core': 2.8.0(@tiptap/pm@2.8.0)
+
+  '@tiptap/extension-strike@2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))':
+    dependencies:
+      '@tiptap/core': 2.8.0(@tiptap/pm@2.8.0)
+
+  '@tiptap/extension-text-style@2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))':
+    dependencies:
+      '@tiptap/core': 2.8.0(@tiptap/pm@2.8.0)
+
+  '@tiptap/extension-text@2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))':
+    dependencies:
+      '@tiptap/core': 2.8.0(@tiptap/pm@2.8.0)
+
+  '@tiptap/pm@2.8.0':
+    dependencies:
+      prosemirror-changeset: 2.2.1
+      prosemirror-collab: 1.3.1
+      prosemirror-commands: 1.6.0
+      prosemirror-dropcursor: 1.8.1
+      prosemirror-gapcursor: 1.3.2
+      prosemirror-history: 1.4.1
+      prosemirror-inputrules: 1.4.0
+      prosemirror-keymap: 1.2.2
+      prosemirror-markdown: 1.13.1
+      prosemirror-menu: 1.2.4
+      prosemirror-model: 1.23.0
+      prosemirror-schema-basic: 1.2.3
+      prosemirror-schema-list: 1.4.1
+      prosemirror-state: 1.4.3
+      prosemirror-tables: 1.5.0
+      prosemirror-trailing-node: 3.0.0(prosemirror-model@1.23.0)(prosemirror-state@1.4.3)(prosemirror-view@1.34.3)
+      prosemirror-transform: 1.10.0
+      prosemirror-view: 1.34.3
+
+  '@tiptap/starter-kit@2.8.0(@tiptap/extension-text-style@2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0)))':
+    dependencies:
+      '@tiptap/core': 2.8.0(@tiptap/pm@2.8.0)
+      '@tiptap/extension-blockquote': 2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))
+      '@tiptap/extension-bold': 2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))
+      '@tiptap/extension-bullet-list': 2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))(@tiptap/extension-list-item@2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0)))(@tiptap/extension-text-style@2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0)))
+      '@tiptap/extension-code': 2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))
+      '@tiptap/extension-code-block': 2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))(@tiptap/pm@2.8.0)
+      '@tiptap/extension-document': 2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))
+      '@tiptap/extension-dropcursor': 2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))(@tiptap/pm@2.8.0)
+      '@tiptap/extension-gapcursor': 2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))(@tiptap/pm@2.8.0)
+      '@tiptap/extension-hard-break': 2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))
+      '@tiptap/extension-heading': 2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))
+      '@tiptap/extension-history': 2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))(@tiptap/pm@2.8.0)
+      '@tiptap/extension-horizontal-rule': 2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))(@tiptap/pm@2.8.0)
+      '@tiptap/extension-italic': 2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))
+      '@tiptap/extension-list-item': 2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))
+      '@tiptap/extension-ordered-list': 2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))(@tiptap/extension-list-item@2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0)))(@tiptap/extension-text-style@2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0)))
+      '@tiptap/extension-paragraph': 2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))
+      '@tiptap/extension-strike': 2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))
+      '@tiptap/extension-text': 2.8.0(@tiptap/core@2.8.0(@tiptap/pm@2.8.0))
+      '@tiptap/pm': 2.8.0
+    transitivePeerDependencies:
+      - '@tiptap/extension-text-style'
+
   '@turf/bbox@7.0.0':
     dependencies:
       '@turf/helpers': 7.0.0
@@ -3298,6 +3662,8 @@ snapshots:
     dependencies:
       '@types/geojson': 7946.0.14
 
+  '@types/linkify-it@5.0.0': {}
+
   '@types/mapbox__point-geometry@0.1.4': {}
 
   '@types/mapbox__vector-tile@1.3.4':
@@ -3306,6 +3672,13 @@ snapshots:
       '@types/mapbox__point-geometry': 0.1.4
       '@types/pbf': 3.0.5
 
+  '@types/markdown-it@14.1.2':
+    dependencies:
+      '@types/linkify-it': 5.0.0
+      '@types/mdurl': 2.0.0
+
+  '@types/mdurl@2.0.0': {}
+
   '@types/node@20.14.8':
     dependencies:
       undici-types: 5.26.5
@@ -3781,6 +4154,8 @@ snapshots:
 
   cookie@0.6.0: {}
 
+  crelt@1.0.6: {}
+
   cross-spawn@7.0.3:
     dependencies:
       path-key: 3.1.1
@@ -3888,6 +4263,8 @@ snapshots:
 
   electron-to-chromium@1.4.827: {}
 
+  entities@4.5.0: {}
+
   es-define-property@1.0.0:
     dependencies:
       get-intrinsic: 1.2.4
@@ -4410,6 +4787,10 @@ snapshots:
 
   lilconfig@2.1.0: {}
 
+  linkify-it@5.0.0:
+    dependencies:
+      uc.micro: 2.1.0
+
   lit-element@4.0.6:
     dependencies:
       '@lit-labs/ssr-dom-shim': 1.2.0
@@ -4497,8 +4878,19 @@ snapshots:
       tinyqueue: 2.0.3
       vt-pbf: 3.1.3
 
+  markdown-it@14.1.0:
+    dependencies:
+      argparse: 2.0.1
+      entities: 4.5.0
+      linkify-it: 5.0.0
+      mdurl: 2.0.0
+      punycode.js: 2.3.1
+      uc.micro: 2.1.0
+
   mdn-data@2.0.30: {}
 
+  mdurl@2.0.0: {}
+
   merge-stream@2.0.0: {}
 
   merge2@1.4.1: {}
@@ -4604,6 +4996,8 @@ snapshots:
       type-check: 0.4.0
       word-wrap: 1.2.5
 
+  orderedmap@2.1.1: {}
+
   p-limit@3.1.0:
     dependencies:
       yocto-queue: 0.1.0
@@ -4721,8 +5115,113 @@ snapshots:
     dependencies:
       '@prisma/engines': 4.8.1
 
+  prosemirror-changeset@2.2.1:
+    dependencies:
+      prosemirror-transform: 1.10.0
+
+  prosemirror-collab@1.3.1:
+    dependencies:
+      prosemirror-state: 1.4.3
+
+  prosemirror-commands@1.6.0:
+    dependencies:
+      prosemirror-model: 1.23.0
+      prosemirror-state: 1.4.3
+      prosemirror-transform: 1.10.0
+
+  prosemirror-dropcursor@1.8.1:
+    dependencies:
+      prosemirror-state: 1.4.3
+      prosemirror-transform: 1.10.0
+      prosemirror-view: 1.34.3
+
+  prosemirror-gapcursor@1.3.2:
+    dependencies:
+      prosemirror-keymap: 1.2.2
+      prosemirror-model: 1.23.0
+      prosemirror-state: 1.4.3
+      prosemirror-view: 1.34.3
+
+  prosemirror-history@1.4.1:
+    dependencies:
+      prosemirror-state: 1.4.3
+      prosemirror-transform: 1.10.0
+      prosemirror-view: 1.34.3
+      rope-sequence: 1.3.4
+
+  prosemirror-inputrules@1.4.0:
+    dependencies:
+      prosemirror-state: 1.4.3
+      prosemirror-transform: 1.10.0
+
+  prosemirror-keymap@1.2.2:
+    dependencies:
+      prosemirror-state: 1.4.3
+      w3c-keyname: 2.2.8
+
+  prosemirror-markdown@1.13.1:
+    dependencies:
+      '@types/markdown-it': 14.1.2
+      markdown-it: 14.1.0
+      prosemirror-model: 1.23.0
+
+  prosemirror-menu@1.2.4:
+    dependencies:
+      crelt: 1.0.6
+      prosemirror-commands: 1.6.0
+      prosemirror-history: 1.4.1
+      prosemirror-state: 1.4.3
+
+  prosemirror-model@1.23.0:
+    dependencies:
+      orderedmap: 2.1.1
+
+  prosemirror-schema-basic@1.2.3:
+    dependencies:
+      prosemirror-model: 1.23.0
+
+  prosemirror-schema-list@1.4.1:
+    dependencies:
+      prosemirror-model: 1.23.0
+      prosemirror-state: 1.4.3
+      prosemirror-transform: 1.10.0
+
+  prosemirror-state@1.4.3:
+    dependencies:
+      prosemirror-model: 1.23.0
+      prosemirror-transform: 1.10.0
+      prosemirror-view: 1.34.3
+
+  prosemirror-tables@1.5.0:
+    dependencies:
+      prosemirror-keymap: 1.2.2
+      prosemirror-model: 1.23.0
+      prosemirror-state: 1.4.3
+      prosemirror-transform: 1.10.0
+      prosemirror-view: 1.34.3
+
+  prosemirror-trailing-node@3.0.0(prosemirror-model@1.23.0)(prosemirror-state@1.4.3)(prosemirror-view@1.34.3):
+    dependencies:
+      '@remirror/core-constants': 3.0.0
+      escape-string-regexp: 4.0.0
+      prosemirror-model: 1.23.0
+      prosemirror-state: 1.4.3
+      prosemirror-view: 1.34.3
+
+  prosemirror-transform@1.10.0:
+    dependencies:
+      prosemirror-model: 1.23.0
+
+  prosemirror-view@1.34.3:
+    dependencies:
+      prosemirror-model: 1.23.0
+      prosemirror-state: 1.4.3
+      prosemirror-transform: 1.10.0
+
   protocol-buffers-schema@3.6.0: {}
 
+  punycode.js@2.3.1: {}
+
   punycode@2.3.1: {}
 
   qr-creator@1.0.0: {}
@@ -4782,6 +5281,8 @@ snapshots:
       '@rollup/rollup-win32-x64-msvc': 4.18.0
       fsevents: 2.3.3
 
+  rope-sequence@1.3.4: {}
+
   run-parallel@1.2.0:
     dependencies:
       queue-microtask: 1.2.3
@@ -5039,6 +5540,8 @@ snapshots:
     dependencies:
       typewise-core: 1.2.0
 
+  uc.micro@2.1.0: {}
+
   ufo@1.5.3: {}
 
   unconfig@0.3.13:
@@ -5168,6 +5671,8 @@ snapshots:
       '@mapbox/vector-tile': 1.3.1
       pbf: 3.2.1
 
+  w3c-keyname@2.2.8: {}
+
   which-boxed-primitive@1.0.2:
     dependencies:
       is-bigint: 1.0.4
diff --git a/src/mapper/src/assets/images/black-lock.png b/src/mapper/src/assets/images/black-lock.png
new file mode 100644
index 000000000..e503a9375
Binary files /dev/null and b/src/mapper/src/assets/images/black-lock.png differ
diff --git a/src/mapper/src/assets/images/locationArc.png b/src/mapper/src/assets/images/locationArc.png
new file mode 100644
index 000000000..ded68ceec
Binary files /dev/null and b/src/mapper/src/assets/images/locationArc.png differ
diff --git a/src/mapper/src/assets/images/locationDot.png b/src/mapper/src/assets/images/locationDot.png
new file mode 100644
index 000000000..2ad443fa0
Binary files /dev/null and b/src/mapper/src/assets/images/locationDot.png differ
diff --git a/src/mapper/src/assets/images/red-lock.png b/src/mapper/src/assets/images/red-lock.png
new file mode 100644
index 000000000..095692a3b
Binary files /dev/null and b/src/mapper/src/assets/images/red-lock.png differ
diff --git a/src/mapper/src/lib/components/common/Editor/editor.css b/src/mapper/src/lib/components/common/Editor/editor.css
new file mode 100644
index 000000000..f482a7d7a
--- /dev/null
+++ b/src/mapper/src/lib/components/common/Editor/editor.css
@@ -0,0 +1,74 @@
+.tiptap {
+	outline: none !important;
+	padding-left: 1rem;
+	padding-right: 1rem;
+	height: 100px;
+	overflow-y: scroll;
+}
+
+@media screen and (max-width: 500px) {
+	.tiptap {
+		height: 80px;
+		overflow-y: scroll;
+	}
+}
+
+.tiptap code {
+	background-color: rgba(#616161, 0.1);
+	color: #616161;
+}
+
+.tiptap pre {
+	background: #0d0d0d;
+	color: #fff;
+	font-family: 'JetBrainsMono', monospace;
+	padding: 0.75rem 1rem;
+	border-radius: 0.5rem;
+}
+.tiptap pre code {
+	color: inherit;
+	padding: 0;
+	background: none;
+	font-size: 0.8rem;
+}
+
+.tiptap img {
+	max-width: 100%;
+	height: auto;
+}
+
+.tiptap blockquote {
+	padding-left: 1rem;
+	border-left: 2px solid #c2c2c2;
+}
+
+.tiptap hr {
+	border: none;
+	border-top: 1px solid #c2c2c2;
+	margin: 1.5rem 0;
+}
+
+.tiptap a {
+	color: #0092d1;
+	text-decoration: underline;
+	cursor: pointer;
+}
+
+.tiptap iframe {
+	border: 8px solid #000;
+	border-radius: 4px;
+	min-width: 200px;
+	min-height: 200px;
+	display: block;
+	outline: 0px solid transparent;
+}
+
+.tiptap div[data-youtube-video] {
+	cursor: move;
+	padding-right: 24px;
+}
+
+.tiptap .ProseMirror-selectednode iframe {
+	transition: outline 0.15s;
+	outline: 6px solid #ece111;
+}
diff --git a/src/mapper/src/lib/components/common/Editor/editor.svelte b/src/mapper/src/lib/components/common/Editor/editor.svelte
new file mode 100644
index 000000000..5f24cb9dd
--- /dev/null
+++ b/src/mapper/src/lib/components/common/Editor/editor.svelte
@@ -0,0 +1,52 @@
+<script>
+	import { onMount, onDestroy } from 'svelte';
+	import { Editor } from '@tiptap/core';
+	import StarterKit from '@tiptap/starter-kit';
+	import Toolbar from './toolbar.svelte';
+	import './editor.css';
+	import '../../../../styles/button.css';
+
+	let element;
+	let editor;
+
+	onMount(() => {
+		editor = new Editor({
+			element: element,
+			extensions: [StarterKit],
+			content: '',
+			onTransaction: () => {
+				editor = editor;
+			},
+		});
+	});
+
+	onDestroy(() => {
+		if (editor) {
+			editor.destroy();
+		}
+	});
+</script>
+
+<div>
+	<div style="border: 1px solid #c2c2c2;" class="rounded-md">
+		{#if editor}
+			<Toolbar {editor} />
+		{/if}
+
+		<div bind:this={element} />
+	</div>
+	<div class="w-full flex justify-end my-2 gap-2">
+		<sl-button
+			on:click={editor?.commands.clearContent(true)}
+			variant="default"
+			size="small"
+			class="secondary col-span-2 sm:col-span-1"><span class="font-barlow-medium text-sm">CLEAR</span></sl-button
+		>
+		<sl-button variant="default" size="small" class="primary col-span-2 sm:col-span-1"
+			><span class="font-barlow-medium text-sm">COMMENT</span></sl-button
+		>
+	</div>
+</div>
+
+<style>
+</style>
diff --git a/src/mapper/src/lib/components/common/Editor/toolbar.svelte b/src/mapper/src/lib/components/common/Editor/toolbar.svelte
new file mode 100644
index 000000000..2615be65f
--- /dev/null
+++ b/src/mapper/src/lib/components/common/Editor/toolbar.svelte
@@ -0,0 +1,109 @@
+<script lang="ts">
+	export let editor;
+
+	const iconClassName = 'text-[1.2rem] text-[#52525B] hover:bg-[#f7d9d8] p-[2px] rounded cursor-pointer duration-200';
+</script>
+
+<div style="border-bottom: 1px solid #c2c2c2;" class="flex items-center gap-2 px-2 py-1 flex-wrap">
+	<sl-tooltip content="Bold" placement="bottom">
+		<hot-icon
+			name="bold"
+			class={`${iconClassName}`}
+			class:active={editor.isActive('bold')}
+			on:click={() => editor?.chain()?.focus()?.toggleBold().run()}
+		></hot-icon>
+	</sl-tooltip>
+	<sl-tooltip content="Italic" placement="bottom">
+		<hot-icon
+			name="italic"
+			class={`${iconClassName}`}
+			class:active={editor.isActive('italic')}
+			on:click={() => editor?.chain()?.focus()?.toggleItalic().run()}
+		></hot-icon>
+	</sl-tooltip>
+	<sl-tooltip content="Strike" placement="bottom">
+		<hot-icon
+			name="strike"
+			class={`${iconClassName}`}
+			class:active={editor.isActive('strike')}
+			on:click={() => editor?.chain()?.focus()?.toggleStrike().run()}
+		></hot-icon>
+	</sl-tooltip>
+	<sl-tooltip content="Heading 1" placement="bottom">
+		<hot-icon
+			name="h1"
+			class={`${iconClassName}`}
+			class:active={editor.isActive('heading', { level: 1 })}
+			on:click={() => editor?.chain()?.focus()?.toggleHeading({ level: 1 }).run()}
+		></hot-icon>
+	</sl-tooltip>
+	<sl-tooltip content="Heading 2" placement="bottom">
+		<hot-icon
+			name="h2"
+			class={`${iconClassName}`}
+			class:active={editor.isActive('heading', { level: 2 })}
+			on:click={() => editor?.chain()?.focus()?.toggleHeading({ level: 2 }).run()}
+		></hot-icon>
+	</sl-tooltip>
+	<sl-tooltip content="Heading 3" placement="bottom">
+		<hot-icon
+			name="h3"
+			class={`${iconClassName}`}
+			class:active={editor.isActive('heading', { level: 3 })}
+			on:click={() => editor?.chain()?.focus()?.toggleHeading({ level: 3 }).run()}
+		></hot-icon>
+	</sl-tooltip>
+	<sl-tooltip content="Unordered List" placement="bottom">
+		<hot-icon
+			name="list-ul"
+			class={`${iconClassName}`}
+			class:active={editor.isActive('bulletList')}
+			on:click={() => editor?.chain()?.focus()?.toggleBulletList().run()}
+		></hot-icon>
+	</sl-tooltip>
+	<sl-tooltip content="Ordered List" placement="bottom">
+		<hot-icon
+			name="list-ol"
+			class={`${iconClassName}`}
+			class:active={editor.isActive('orderedList')}
+			on:click={() => editor?.chain()?.focus()?.toggleOrderedList().run()}
+		></hot-icon>
+	</sl-tooltip>
+	<sl-tooltip content="Code" placement="bottom">
+		<hot-icon
+			name="code"
+			class={`${iconClassName}`}
+			class:active={editor.isActive('codeBlock')}
+			on:click={() => editor?.chain()?.focus()?.toggleCodeBlock().run()}
+		></hot-icon>
+	</sl-tooltip>
+	<sl-tooltip content="Quote" placement="bottom">
+		<hot-icon
+			name="quote"
+			class={`${iconClassName}`}
+			class:active={editor.isActive('blockquote')}
+			on:click={() => editor?.chain()?.focus()?.toggleBlockquote().run()}
+		></hot-icon>
+	</sl-tooltip>
+	<sl-tooltip content="Horizontal Ruler" placement="bottom">
+		<hot-icon name="hr" class={`${iconClassName}`} on:click={() => editor?.chain()?.focus()?.setHorizontalRule().run()}
+		></hot-icon>
+	</sl-tooltip>
+	<sl-tooltip content="Undo" placement="bottom">
+		<hot-icon name="undo" class={`${iconClassName}`} on:click={() => editor?.chain()?.focus()?.undo().run()}></hot-icon>
+	</sl-tooltip>
+	<sl-tooltip content="Redo" placement="bottom">
+		<hot-icon name="redo" class={`${iconClassName}`} on:click={() => editor?.chain()?.focus()?.redo().run()}></hot-icon>
+	</sl-tooltip>
+</div>
+
+<style>
+	hot-icon.active {
+		background: #f7d9d8;
+		color: #e84846;
+	}
+
+	sl-tooltip {
+		font-size: 10px;
+	}
+</style>
diff --git a/src/mapper/src/lib/components/common/bottom-sheet.svelte b/src/mapper/src/lib/components/common/bottom-sheet.svelte
new file mode 100644
index 000000000..4d0c7804b
--- /dev/null
+++ b/src/mapper/src/lib/components/common/bottom-sheet.svelte
@@ -0,0 +1,109 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	let bottomSheetRef: any;
+	let sheetContentRef: any;
+
+	let startY: number;
+	let startHeight: number;
+	let currSheetHeight: number;
+	let show: boolean;
+	let isDragging: boolean = false;
+
+	export let onClose: () => void;
+
+	const updateSheetHeight = (height: number) => {
+		if (sheetContentRef) {
+			sheetContentRef.style.height = `${height}vh`;
+		}
+	};
+
+	onMount(() => {
+		show = true;
+		document.body.style.overflowY = 'hidden';
+		bottomSheetRef.style.height = `50vh`;
+		updateSheetHeight(50);
+	});
+
+	const hideBottomSheet = () => {
+		show = false;
+		onClose();
+		document.body.style.overflowY = 'auto';
+	};
+
+	const dragStart = (e) => {
+		e.preventDefault();
+		const pagesY = e.pageY || e.changedTouches[0].screenY;
+		startY = pagesY;
+		startHeight = parseInt(sheetContentRef.style.height);
+		isDragging = true;
+	};
+
+	const dragging = (e) => {
+		if (!isDragging) return;
+		const delta = startY - (e.pageY || e.changedTouches[0].screenY);
+		const newHeight = startHeight + (delta / window.innerHeight) * 100;
+		bottomSheetRef.style.height = `100vh`;
+		updateSheetHeight(newHeight);
+	};
+
+	const dragStop = () => {
+		let sheetHeight;
+		bottomSheetRef.style.height = `${currSheetHeight + 1}vh`;
+
+		isDragging = false;
+		sheetHeight = parseInt(sheetContentRef.style.height);
+		currSheetHeight = sheetHeight;
+
+		if (sheetHeight < 25) {
+			hideBottomSheet();
+		} else if (sheetHeight <= 75) {
+			updateSheetHeight(50);
+		} else {
+			updateSheetHeight(85);
+		}
+	};
+
+	$: if (currSheetHeight) {
+		dragStop();
+	}
+</script>
+
+<div>
+	<!-- sheet container -->
+	<div
+		bind:this={bottomSheetRef}
+		class={`z-10 bottom-sheet fixed w-[100vw] left-0 bottom-0 flex items-center flex-col justify-end duration-100 ease-linear z-20 ${
+			!show ? 'opacity-0 pointer-events-none' : 'opacity-100 pointer-events-none'
+		}`}
+	>
+		<!-- sheet content -->
+		<div
+			style="border-top-left-radius: 25px; border-top-right-radius: 25px;"
+			bind:this={sheetContentRef}
+			class={`bottom-sheet-content shadow-[0px_-10px_10px_5px_rgba(0,0,0,0.05)] w-full relative bg-white max-h-[100vh] h-[50vh] max-w-[100vw] pb-6 duration-300 ease-in-out overflow-hidden md:max-w-[580px] lg:max-w-[750px] ${
+				!show ? 'translate-y-[100%]' : 'translate-y-[0%] pointer-events-auto'
+			} ${isDragging ? 'transition-none' : ''}`}
+		>
+			<div
+				style={' border-top-left-radius: 1rem;'}
+				class="flex justify-center py-4 sm:py-8 cursor-grab select-none w-full"
+				on:mousedown={dragStart}
+				on:touchstart={dragStart}
+				on:mousemove={dragging}
+				on:touchmove={dragging}
+				on:touchend={dragStop}
+				on:mouseup={dragStop}
+				on:mouseout={dragStop}
+			>
+				<span class="h-[6px] w-[3.25rem] block bg-[#d2d2d4] rounded-full pointer-events-none"></span>
+			</div>
+			<!-- </div> -->
+
+			<!-- body -->
+			<div class="overflow-y-scroll scrollbar h-[calc(100%-5rem)] sm:h-[calc(100%-6.7rem)] px-4 relative">
+				<slot />
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/src/mapper/src/lib/components/page/layer-switcher.svelte b/src/mapper/src/lib/components/page/layer-switcher.svelte
new file mode 100644
index 000000000..22a15c412
--- /dev/null
+++ b/src/mapper/src/lib/components/page/layer-switcher.svelte
@@ -0,0 +1,22 @@
+<script>
+	import { clickOutside } from '../../../utilFunctions/clickOutside.ts';
+
+	let isOpen = false;
+</script>
+
+<div use:clickOutside on:click_outside={() => (isOpen = false)} class="relative">
+	<div class="group absolute bottom-16 right-0 text-nowrap cursor-pointer" on:click={() => (isOpen = !isOpen)}>
+		<hot-icon
+			style="border: 1px solid #D7D7D7;"
+			name="layer"
+			class={`!text-[1.7rem] text-[#333333] bg-white p-2 rounded-full group-hover:text-red-600 duration-200 ${isOpen && 'text-red-600'}`}
+		></hot-icon>
+	</div>
+	<div
+		class={`absolute bottom-16 right-14 w-[10rem] bg-white rounded-md p-4 duration-200 ${isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'} overflow-hidden`}
+	>
+		Layer Switcher
+	</div>
+</div>
+
+<style></style>
diff --git a/src/mapper/src/lib/components/page/legend.svelte b/src/mapper/src/lib/components/page/legend.svelte
new file mode 100644
index 000000000..91ca4a235
--- /dev/null
+++ b/src/mapper/src/lib/components/page/legend.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { clickOutside } from '../../../utilFunctions/clickOutside.ts';
+	import LockImg from '../../../assets/images/black-lock.png';
+	import '../../../styles/page.css';
+
+	type taskStatusesType = { status: string; color?: string; icon?: string };
+
+	let isOpen = false;
+
+	const taskStatuses: taskStatusesType[] = [
+		{ status: 'Ready', color: '#ffffff' },
+		{ status: 'Locked For Mapping', color: '#008099' },
+		{ status: 'Ready For Validation', color: '#ade6ef' },
+		{ status: 'Locked For Validation', color: '#fceca4' },
+		{ status: 'Validated', color: '#40ac8c' },
+		{ status: 'More Mapping Needed', color: '#d73f3e' },
+		{ status: 'Locked', icon: LockImg },
+	];
+</script>
+
+<div use:clickOutside on:click_outside={() => (isOpen = false)} class="relative">
+	<div class="group absolute bottom-0 right-0 text-nowrap cursor-pointer" on:click={() => (isOpen = !isOpen)}>
+		<hot-icon
+			style="border: 1px solid #D7D7D7;"
+			name="legend-toggle"
+			class={`!text-[1.7rem] text-[#333333] bg-white p-2 rounded-full group-hover:text-red-600 duration-200 ${isOpen && 'text-red-600'}`}
+		></hot-icon>
+	</div>
+	<div
+		class={`absolute bottom-0 right-14 bg-white rounded-md p-4 duration-200 ${isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'} overflow-hidden flex flex-col gap-2`}
+	>
+		<p class="font-barlow-semibold leading-0 text-xl">Legend</p>
+		{#each taskStatuses as taskStatus}
+			<div class="flex items-center gap-2">
+				{#if !taskStatus.color}
+					<div class="w-5 h-5 flex justify-center">
+						<img src={taskStatus.icon} class="w-4" />
+					</div>
+				{:else}
+					<div style="background-color: {taskStatus.color}; border: 1px solid #D0D0D0;" class={`w-5 h-5 opacity-40`} />
+				{/if}
+				<p class="font-barlow-regular text-[#494949] text-nowrap leading-0">{taskStatus?.status}</p>
+			</div>
+		{/each}
+	</div>
+</div>
+
+<style></style>
diff --git a/src/mapper/src/lib/components/page/more/index.svelte b/src/mapper/src/lib/components/page/more/index.svelte
new file mode 100644
index 000000000..c42a184a6
--- /dev/null
+++ b/src/mapper/src/lib/components/page/more/index.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+	import Editor from '$lib/components/common/Editor/editor.svelte';
+
+	type stackType = '' | 'Comment' | 'Instructions' | 'Activities';
+	const stackGroup: { icon: string; title: stackType }[] = [
+		{
+			icon: 'chat',
+			title: 'Comment',
+		},
+		{
+			icon: 'description',
+			title: 'Instructions',
+		},
+		{
+			icon: 'list-ul',
+			title: 'Activities',
+		},
+	];
+
+	let activeStack: stackType = 'Comment';
+</script>
+
+<div class="font-barlow-medium h-full">
+	{#if activeStack === ''}
+		{#each stackGroup as stack}
+			<div
+				class="group flex items-center justify-between hover:bg-red-50 rounded-md px-2 duration-200 cursor-pointer"
+				on:click={() => (activeStack = stack.title)}
+			>
+				<div class="flex items-center gap-3">
+					<hot-icon name={stack.icon} class="text-[1.25rem]"></hot-icon>
+					<p>{stack.title}</p>
+				</div>
+				<hot-icon name="chevron-right" class="text-[1rem] group-hover:translate-x-1 duration-200"></hot-icon>
+			</div>
+		{/each}
+	{/if}
+
+	<!-- header -->
+	{#if activeStack !== ''}
+		<div class="flex items-center gap-x-2 sticky top-0 bg-white">
+			<hot-icon
+				name="chevron-left"
+				class="text-[1rem] hover:-translate-x-[2px] duration-200 cursor-pointer text-[1.125rem] text-black hover:text-red-600 duration-200"
+				on:click={() => (activeStack = '')}
+			></hot-icon>
+			<p class="text-[1.125rem] font-barlow-semibold leading-0">{activeStack}</p>
+		</div>
+	{/if}
+	<!-- body -->
+	{#if activeStack === 'Comment'}
+		<div class="h-[calc(100%-2.25rem)] sm:h-[calc(100%-2.6rem)]">
+			<div class="h-[calc(100%-11.875rem)] overflow-y-scroll"></div>
+
+			<div class="">
+				<Editor />
+			</div>
+		</div>
+	{/if}
+	{#if activeStack === 'Instructions'}
+		<div class="">
+			<p>Instructions</p>
+		</div>
+	{/if}
+	{#if activeStack === 'Activities'}
+		<div>
+			<p>Activities</p>
+		</div>
+	{/if}
+</div>
+
+<style></style>
diff --git a/src/mapper/src/routes/[projectId]/+page.svelte b/src/mapper/src/routes/[projectId]/+page.svelte
index 55ed0b00d..14ff1a767 100644
--- a/src/mapper/src/routes/[projectId]/+page.svelte
+++ b/src/mapper/src/routes/[projectId]/+page.svelte
@@ -1,53 +1,73 @@
 <script lang="ts">
-	import '@hotosm/ui/dist/hotosm-ui'
-	import SlTabGroup from '@shoelace-style/shoelace/dist/components/tab-group/tab-group.component.js' 
+	import '@hotosm/ui/dist/hotosm-ui';
+	import SlTabGroup from '@shoelace-style/shoelace/dist/components/tab-group/tab-group.component.js';
 	import type { PageData } from '../$types';
 	import { onMount, onDestroy } from 'svelte';
-	import { writable } from 'svelte/store'
-	import { Shape, ShapeStream } from '@electric-sql/client'
-	import { MapLibre, GeoJSON, FillLayer, LineLayer, hoverStateFilter } from 'svelte-maplibre';
+	import { writable } from 'svelte/store';
+	import { Shape, ShapeStream } from '@electric-sql/client';
+	import {
+		MapLibre,
+		GeoJSON,
+		FillLayer,
+		LineLayer,
+		hoverStateFilter,
+		SymbolLayer,
+		NavigationControl,
+		ScaleControl,
+		Control,
+		ControlGroup,
+		ControlButton,
+	} from 'svelte-maplibre';
 	import type { FeatureCollection } from 'geojson';
 	import { polygon } from '@turf/helpers';
 	import { buffer } from '@turf/buffer';
 	import { bbox } from '@turf/bbox';
 
-	import type { 
-		ProjectData,
-		ProjectTask, 
-		ZoomToTaskEventDetail,
-	 } from '$lib/types';
+	import type { ProjectData, ProjectTask, ZoomToTaskEventDetail } from '$lib/types';
 	import { statusEnumLabelToValue, statusEnumValueToLabel } from '$lib/task-events';
-	import { 
-		mapTask, 
+	import {
+		mapTask,
 		finishTask,
 		resetTask,
-		// validateTask, 
-		// goodTask, 
+		// validateTask,
+		// goodTask,
 		// commentTask,
 	} from '$lib/task-events';
 	// import { createLiveQuery } from '$lib/live-query';
-	import { generateQrCode, downloadQrCode } from '$lib/qrcode'
-	import EventCard from '$lib/components/event-card.svelte'; 
+	import { generateQrCode, downloadQrCode } from '$lib/qrcode';
+	import EventCard from '$lib/components/event-card.svelte';
+	import Legend from '$lib/components/page/legend.svelte';
+	import LayerSwitcher from '$lib/components/page/layer-switcher.svelte';
+	import BottomSheet from '$lib/components/common/bottom-sheet.svelte';
 	import Error from './+error.svelte';
+	import '../../styles/page.css';
+	import BlackLockImg from '../../assets/images/black-lock.png';
+	import RedLockImg from '../../assets/images/red-lock.png';
+	import More from '../../lib/components/page/more/index.svelte';
+	import '../../styles/button.css';
+	import { GetDeviceRotation } from '../../utilFunctions/getDeviceRotation';
+	import LocationArcImg from '../../assets/images/locationArc.png';
+	import LocationDotImg from '../../assets/images/locationDot.png';
 
 	export let data: PageData;
 
 	// $: ({ electric, project } = data)
 	let map: maplibregl.Map | undefined;
 	let loaded: boolean;
-	let tabGroup: SlTabGroup
+	let tabGroup: SlTabGroup;
 
 	let selectedTab: string = 'map';
 	let panelDisplay: string = 'none';
 	$: panelDisplay = selectedTab === 'map' ? 'none' : 'block';
+	let toggleTaskActionModal = false;
 
 	// *** Task history sync *** //
-	const taskFeatcolStore = writable<FeatureCollection>({ type: 'FeatureCollection', features: [] })
+	const taskFeatcolStore = writable<FeatureCollection>({ type: 'FeatureCollection', features: [] });
 	const taskHistoryStream = new ShapeStream({
-		url: "http://localhost:7055/v1/shape/task_history",
-		where: `project_id=${data.projectId}`
-	})
-	const taskHistoryEvents = new Shape(taskHistoryStream)
+		url: 'http://localhost:7055/v1/shape/task_history',
+		where: `project_id=${data.projectId}`,
+	});
+	const taskHistoryEvents = new Shape(taskHistoryStream);
 	const taskEventArray = writable([]);
 	const latestEvent = writable();
 	$: if ($latestEvent) {
@@ -76,8 +96,8 @@
 
 		const features = data.project.tasks.map((x: ProjectTask) => {
 			const taskId = x.outline_geojson.id;
-			const statusString = latestActions.get(taskId)
-			const status = statusString? statusEnumLabelToValue(statusString) : '0'
+			const statusString = latestActions.get(taskId);
+			const status = statusString ? statusEnumLabelToValue(statusString) : '0';
 
 			return {
 				...x.outline_geojson,
@@ -95,31 +115,31 @@
 	}
 
 	// *** Selected task *** //
-	$: qrCodeData = generateQrCode(data.project.project_info.name, data.project.odk_token, "TEMP");
+	$: qrCodeData = generateQrCode(data.project.project_info.name, data.project.odk_token, 'TEMP');
 
-    let selectedTaskId = writable<number | null>(null);
+	let selectedTaskId = writable<number | null>(null);
 	let featureClicked = writable(false);
-    let selectedTask = writable<any>(null);
-    let selectedTaskStatus = writable<string>('');
+	let selectedTask = writable<any>(null);
+	let selectedTaskStatus = writable<string>('');
 
 	$: selectedTask.set(data.project.tasks.find((task: ProjectTask) => task.id === $selectedTaskId));
 
-    $: (async () => {
-        const task = $selectedTask;
-        if (task && task.id) {
-            const latestActions = await getLatestEventForTasks();
-			const statusLabel = latestActions.get(task.id)
-            selectedTaskStatus.set(statusLabel ? statusLabel : 'RELEASED_FOR_MAPPING');
-        } else {
-            selectedTaskStatus.set('');
-        }
-    })();
+	$: (async () => {
+		const task = $selectedTask;
+		if (task && task.id) {
+			const latestActions = await getLatestEventForTasks();
+			const statusLabel = latestActions.get(task.id);
+			selectedTaskStatus.set(statusLabel ? statusLabel : 'RELEASED_FOR_MAPPING');
+		} else {
+			selectedTaskStatus.set('');
+		}
+	})();
 
 	function zoomToTask(event: CustomEvent<ZoomToTaskEventDetail>) {
 		const taskId = event.detail.taskId;
 		const taskObj = data.project.tasks.find((task: ProjectTask) => task.id === taskId);
 
-		if (!taskObj) return
+		if (!taskObj) return;
 
 		// Set as selected task for buttons
 		selectedTaskId.set(taskObj.id);
@@ -132,7 +152,7 @@
 		}
 
 		// Open the map tab
-		tabGroup.show('map')
+		tabGroup.show('map');
 	}
 
 	// const mapStyle = {
@@ -165,24 +185,110 @@
 		}
 
 		taskHistoryEvents.subscribe((taskHistoryEvent) => {
-			let newEvent; for (newEvent of taskHistoryEvent);
+			let newEvent;
+			for (newEvent of taskHistoryEvent);
 			if (newEvent) {
 				latestEvent.set(newEvent[1]);
 			}
-		})
+		});
 		// Do initial load of task features
-		await updateTaskFeatures()
+		await updateTaskFeatures();
 	});
 
-	onDestroy(() => {
-		taskHistoryStream.unsubscribeAll()
-	})
+	// geolocation
+	let coords: [number, number];
+	let rotationDeg: number | undefined;
+	let toggleGeolocationStatus = false;
+	let watchId;
+
+	$: if (map && toggleGeolocationStatus) {
+		// zoom to user's current location
+		navigator.geolocation.getCurrentPosition((position) => {
+			const currentCoordinate = [position.coords.longitude, position.coords.latitude];
+			map.flyTo({
+				center: currentCoordinate,
+				essential: true,
+				zoom: 18,
+			});
+		});
 
+		// track users location
+		watchId = navigator.geolocation.watchPosition(
+			function (pos) {
+				coords = [pos.coords.longitude, pos.coords.latitude];
+			},
+			function (error) {
+				alert(`ERROR: ${error.message}`);
+			},
+			{
+				enableHighAccuracy: true,
+			},
+		);
+	} else {
+		// stop tracking user's location on location toggle off
+		navigator.geolocation.clearWatch(watchId);
+	}
+	const isFirefox = typeof InstallTrigger !== 'undefined';
+	const isSafari =
+		/constructor/i.test(window.HTMLElement) ||
+		(function (p) {
+			return p.toString() === '[object SafariRemoteNotification]';
+			// @ts-ignore
+		})(!window['safari'] || (typeof safari !== 'undefined' && window['safari'].pushNotification));
+
+	// locationGeojson: to display point on the map
+	let locationGeojson: FeatureCollection;
+	$: locationGeojson = {
+		type: 'FeatureCollection',
+		features: [
+			{
+				type: 'Feature',
+				geometry: {
+					type: 'Point',
+					coordinates: coords,
+				},
+				// firefox & safari doesn't support device orientation sensor, so if the browser any of the two set orientation to false
+				properties: { orientation: !(isFirefox || isSafari) },
+			},
+		],
+	};
+
+	$: if (map && toggleGeolocationStatus) {
+		if (isFirefox || isSafari) {
+			// firefox & safari doesn't support device orientation sensor
+		} else {
+			// See the API specification at: https://w3c.github.io/orientation-sensor
+			// We use referenceFrame: 'screen' because the web page will rotate when
+			// the phone switches from portrait to landscape.
+			const sensor = new AbsoluteOrientationSensor({
+				frequency: 60,
+				referenceFrame: 'screen',
+			});
+			sensor.addEventListener('reading', (event) => {
+				rotationDeg = GetDeviceRotation(sensor.quaternion);
+			});
+
+			Promise.all([
+				navigator.permissions.query({ name: 'accelerometer' }),
+				navigator.permissions.query({ name: 'magnetometer' }),
+				navigator.permissions.query({ name: 'gyroscope' }),
+			]).then((results) => {
+				if (results.every((result) => result.state === 'granted')) {
+					sensor.start();
+				} else {
+				}
+			});
+		}
+	}
+
+	onDestroy(() => {
+		taskHistoryStream.unsubscribeAll();
+	});
 </script>
 
 {#if $latestEvent}
 	<hot-card id="notification-banner" class="absolute z-10 top-18 right-0 font-sans hidden sm:flex">
-		Latest: { $latestEvent.action_text }
+		Latest: {$latestEvent.action_text}
 	</hot-card>
 {/if}
 
@@ -217,35 +323,82 @@
 	{/if}
 {/if}
 
-<MapLibre
-	bind:map
-	bind:loaded
-	style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
-	class="flex-auto w-full sm:aspect-video sm:max-h-full"
-	standardControls
-	center={[0, 0]}
-	zoom={2}
-	attributionControl={false}
-	on:click={(e) => {
-		featureClicked.subscribe(fClicked => {
-		if (!fClicked) {
-			selectedTaskId.set(null);
-		}
-		featureClicked.set(false);
-		});
-	}}
->
-	<GeoJSON id="states" data={$taskFeatcolStore} promoteId="TASKS">
+<div class="h-[calc(100vh-4.625rem)]">
+	<MapLibre
+		bind:map
+		bind:loaded
+		style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
+		class="flex-auto w-full sm:aspect-video h-[calc(100%-4rem)]"
+		center={[0, 0]}
+		zoom={2}
+		attributionControl={false}
+		on:click={(e) => {
+			featureClicked.subscribe((fClicked) => {
+				if (!fClicked) {
+					selectedTaskId.set(null);
+				}
+				featureClicked.set(false);
+				toggleTaskActionModal = false;
+			});
+		}}
+		images={[
+			{ id: '1', url: BlackLockImg },
+			{ id: '3', url: RedLockImg },
+			{ id: 'locationArc', url: LocationArcImg },
+			{ id: 'locationDot', url: LocationDotImg },
+		]}
+	>
+		<NavigationControl position="top-left" />
+		<ScaleControl />
+		<Control class="flex flex-col gap-y-2" position="top-left">
+			<ControlGroup>
+				<ControlButton on:click={() => (toggleGeolocationStatus = !toggleGeolocationStatus)}
+					><hot-icon
+						name="geolocate"
+						class={`!text-[1.2rem] cursor-pointer  duration-200 ${toggleGeolocationStatus ? 'text-red-600' : 'text-[#52525B]'}`}
+					></hot-icon></ControlButton
+				>
+			</ControlGroup></Control
+		>
+		{#if toggleGeolocationStatus}
+			<GeoJSON data={locationGeojson} id="point">
+				<SymbolLayer
+					applyToClusters={false}
+					hoverCursor="pointer"
+					layout={{
+						// if orientation true (meaning the browser supports device orientation sensor show location dot with orientation sign)
+						'icon-image': ['case', ['==', ['get', 'orientation'], true], 'locationArc', 'locationDot'],
+						'icon-allow-overlap': true,
+						'text-field': '{mag}',
+						'text-offset': [0, -2],
+						'text-size': 12,
+						'icon-rotate': rotationDeg || 0, // rotate location icon acc to device orientation
+						'icon-rotation-alignment': 'map',
+						'icon-size': 0.5,
+					}}
+				/>
+			</GeoJSON>
+		{/if}
+		<GeoJSON id="states" data={$taskFeatcolStore} promoteId="TASKS">
 			<FillLayer
 				hoverCursor="pointer"
 				paint={{
 					'fill-color': [
-						'match', ['get', 'status'],
-						'0', '#c5fbf5',
-						'1', '#ff0000',
-						'2', '#66ff33',
-						'3', '#ff9900',
-						'#c5fbf5' // default color if no match is found
+						'match',
+						['get', 'status'],
+						'0',
+						'#ffffff',
+						'1',
+						'#008099',
+						'2',
+						'#ade6ef',
+						'3',
+						'#fceca4',
+						'4',
+						'#40ac8c',
+						'5',
+						'#d73f3e',
+						'#c5fbf5', // default color if no match is found
 					],
 					'fill-opacity': hoverStateFilter(0.5, 0),
 				}}
@@ -255,100 +408,194 @@
 					featureClicked.set(true);
 					const clickedTask = e.detail.features?.[0]?.properties?.uid;
 					selectedTaskId.set(clickedTask);
+					toggleTaskActionModal = true;
 				}}
 			/>
 			<LineLayer
 				layout={{ 'line-cap': 'round', 'line-join': 'round' }}
-				paint={{ 
-					'line-color': hoverStateFilter('#0fffff', '#0fffff'),
-					'line-width': 3 
+				paint={{
+					'line-color': ['case', ['==', ['get', 'uid'], $selectedTaskId], '#fa1100', '#0fffff'],
+					'line-width': 3,
+					'line-opacity': ['case', ['==', ['get', 'uid'], $selectedTaskId], 1, 0.35],
 				}}
 				beforeLayerType="symbol"
 				manageHoverState
 			/>
-	</GeoJSON>
-</MapLibre>
-
-<sl-tab-group
-	placement="bottom"
-	no-scroll-controls
-	on:sl-tab-show={(e) => selectedTab = e.detail.name}
-	style="--panel-display: {panelDisplay};"
-	bind:this={tabGroup}
->
-	<!-- Map tab: panel is hidden to display the map below it -->
-	<sl-tab-panel name="map"></sl-tab-panel>
-	
-	<!-- Task events tab -->
-	<sl-tab-panel name="events">
-		{#if $taskEventArray.length > 0}
-			{#each $taskEventArray as record}
-				<EventCard
-					record={record}
-					highlight={record.task_id === $selectedTaskId}
-					on:zoomToTask={(e) => zoomToTask(e)}
-				></EventCard>
-			{/each}
-		{/if}
-	</sl-tab-panel>
-	
-	<!-- Offline mode tab -->
-	<sl-tab-panel name="offline">
-		TODO stuff here
-	</sl-tab-panel>
-	
-	<!-- QRCode tab -->
-	<sl-tab-panel name="qrcode">
-		<div class="flex flex-col items-center justify-center h-full p-4 space-y-4">
-			<!-- Text above the QR code -->
-			<div class="text-center w-full">
-				<div class="h-12 font-bold text-lg">
-					Scan this QR Code in ODK Collect
+			<SymbolLayer
+				applyToClusters={false}
+				hoverCursor="pointer"
+				layout={{
+					'icon-image': ['case', ['==', ['get', 'status'], '1'], '1', ['==', ['get', 'status'], '3'], '3', ''],
+					'icon-allow-overlap': true,
+				}}
+			/>
+		</GeoJSON>
+		<div class="absolute right-3 bottom-3 sm:right-5 sm:bottom-5">
+			<LayerSwitcher />
+			<Legend />
+		</div>
+	</MapLibre>
+
+	{#if $selectedTaskId && selectedTab === 'map' && toggleTaskActionModal && ($selectedTaskStatus === 'RELEASED_FOR_MAPPING' || $selectedTaskStatus === 'LOCKED_FOR_MAPPING')}
+		<div class="flex justify-center !w-[100vw] absolute bottom-[4rem] left-0 pointer-events-none z-50">
+			<div
+				class="bg-white w-[100vw] h-fit font-barlow-regular w-[100vw] md:max-w-[580px] pointer-events-auto px-4 pb-3 sm:pb-4 rounded-t-3xl"
+			>
+				<div class="flex justify-between items-center">
+					<p class="text-[#333] text-xl font-barlow-semibold leading-0 pt-2">Task #{$selectedTaskId}</p>
+					<hot-icon
+						name="close"
+						class="!text-[1.5rem] text-[#52525B] cursor-pointer hover:text-red-600 duration-200"
+						on:click={() => (toggleTaskActionModal = false)}
+					></hot-icon>
 				</div>
-			</div>
 
-			<!-- QR Code Container -->
-			<div class="flex justify-center w-full max-w-sm">
-				<hot-qr-code
-					value={qrCodeData}
-					label="Scan to open ODK Collect"
-					size="300"
-					radius="0.5"
-					errorCorrection="L"
-				></hot-qr-code>
+				{#if $selectedTaskStatus == 'RELEASED_FOR_MAPPING'}
+					<p class="my-4 sm:my-6">Do you want to start mapping task #{$selectedTaskId}?</p>
+					<div class="flex justify-center gap-x-2">
+						<sl-button
+							size="small"
+							variant="default"
+							class="secondary"
+							on:click={() => (toggleTaskActionModal = false)}
+							outline><span class="font-barlow-medium text-sm">CANCEL</span></sl-button
+						>
+						<sl-button
+							variant="default"
+							size="small"
+							class="primary"
+							on:click={mapTask(data.projectId, $selectedTaskId)}
+						>
+							<div class="flex items-center gap-1">
+								<hot-icon name="location" class="!text-[1rem] text-white cursor-pointer duration-200"></hot-icon>
+								<p class="font-barlow-medium text-sm leading-[0]">START MAPPING</p>
+							</div>
+						</sl-button>
+					</div>
+				{:else if $selectedTaskStatus == 'LOCKED_FOR_MAPPING'}
+					<p class="my-4 sm:my-6">Task #{$selectedTaskId} has been locked, Is the task completely mapped?</p>
+					<div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
+						<sl-button
+							on:click={resetTask(data.projectId, $selectedTaskId)}
+							variant="default"
+							outline
+							size="small"
+							class="secondary"
+						>
+							<div class="flex items-center gap-1">
+								<hot-icon
+									name="close"
+									class="!text-[1rem] text-[#d73f37] cursor-pointer duration-200 hover:text-[#b91c1c]"
+									on:click={() => (toggleTaskActionModal = false)}
+								></hot-icon>
+								<p class="font-barlow-medium text-sm leading-[0]">CANCEL MAPPING</p>
+							</div></sl-button
+						>
+						<sl-button
+							on:click={finishTask(data.projectId, $selectedTaskId)}
+							variant="default"
+							size="small"
+							class="primary"
+							><div class="flex items-center gap-1">
+								<hot-icon
+									name="check"
+									class="!text-[1rem] text-white cursor-pointer duration-200"
+									on:click={() => (toggleTaskActionModal = false)}
+								></hot-icon>
+								<p class="font-barlow-medium text-sm leading-[0]">COMPLETE MAPPING</p>
+							</div></sl-button
+						>
+						<sl-button variant="default" size="small" class="gray col-span-2 sm:col-span-1">
+							<p class="font-barlow-medium text-sm leading-[0]">GO TO ODK</p>
+						</sl-button>
+					</div>
+					<div class="flex justify-center gap-2"></div>
+				{/if}
 			</div>
+		</div>
+	{/if}
 
-			<!-- Download Button -->
-			<div class="w-full max-w-sm text-center">
-				<hot-icon-button
-					name="download"
-					label="Download QRCode"
-					on:click={downloadQrCode(data.project.project_info.name, qrCodeData)}
-				>Download</hot-icon-button>
-			</div>
+	{#if selectedTab !== 'map'}
+		<BottomSheet
+			onClose={() => {
+				tabGroup.show('map');
+			}}
+		>
+			{#if selectedTab === 'events'}
+				<!-- {#if $taskEventArray.length > 0}
+					{#each $taskEventArray as record}
+						<EventCard {record} highlight={record.task_id === $selectedTaskId} on:zoomToTask={(e) => zoomToTask(e)}
+						></EventCard>
+					{/each}
+				{/if} -->
+
+				<!-- uncomment More to view stacked component containing comment, instructions, activities -->
+				<More />
+			{/if}
+			{#if selectedTab === 'offline'}
+				<div>TODO stuff here</div>
+			{/if}
+			{#if selectedTab === 'qrcode'}
+				<div class="flex flex-col items-center p-4 space-y-4">
+					<!-- Text above the QR code -->
+					<div class="text-center w-full">
+						<div class=" font-bold text-lg font-barlow-medium">Scan this QR Code in ODK Collect</div>
+					</div>
+
+					<!-- QR Code Container -->
+					<div class="flex justify-center w-full max-w-sm">
+						<hot-qr-code value={qrCodeData} label="Scan to open ODK Collect" size="250" radius="0.5" errorCorrection="L"
+						></hot-qr-code>
+					</div>
+
+					<!-- Download Button -->
+					<div class="w-full max-w-sm text-center">
+						<hot-icon-button
+							name="download"
+							label="Download QRCode"
+							on:click={downloadQrCode(data.project.project_info.name, qrCodeData)}>Download</hot-icon-button
+						>
+					</div>
+
+					<!-- Open ODK Button -->
+					<div class="w-full max-w-sm text-center">
+						<sl-button
+							class="primary"
+							href="odkcollect://form/{data.project.xform_id}{$selectedTaskId ? `?task_filter=${$selectedTaskId}` : ''}"
+							><span class="font-barlow-medium text-base">Open ODK</span></sl-button
+						>
+					</div>
+				</div>
+			{/if}
+		</BottomSheet>
+	{/if}
 
-			<!-- Open ODK Button -->
-			<div class="w-full max-w-sm text-center">
-				<sl-button
-					href="odkcollect://form/{data.project.xform_id}{$selectedTaskId ? `?task_filter=${$selectedTaskId}` : ''}"
-				>Open ODK</sl-button>
-			</div>
-		</div>
-	</sl-tab-panel>
-
-	<sl-tab slot="nav" panel="map">
-		<hot-icon name="map"></hot-icon>
-	</sl-tab>
-	<sl-tab slot="nav" panel="events">
-		<hot-icon name="list"></hot-icon>
-	</sl-tab>
-	<sl-tab slot="nav" panel="offline">
-		<hot-icon name="wifi-off"></hot-icon>
-	</sl-tab>
-	<sl-tab slot="nav" panel="qrcode">
-		<hot-icon name="qr-code"></hot-icon>
-	</sl-tab>
-</sl-tab-group>
+	<sl-tab-group
+		class="z-9999 fixed bottom-0 left-0 right-0"
+		placement="bottom"
+		no-scroll-controls
+		on:sl-tab-show={(e) => {
+			selectedTab = e.detail.name;
+		}}
+		style="--panel-display: none"
+		bind:this={tabGroup}
+	>
+		<sl-tab slot="nav" panel="map">
+			<hot-icon name="map" class="!text-[1.7rem] !sm:text-[2rem]"></hot-icon>
+		</sl-tab>
+		<sl-tab slot="nav" panel="events">
+			<hot-icon name="list" class="!text-[1.7rem] !sm:text-[2rem]"></hot-icon>
+		</sl-tab>
+		<sl-tab slot="nav" panel="offline">
+			<hot-icon name="wifi-off" class="!text-[1.7rem] !sm:text-[2rem]"></hot-icon>
+		</sl-tab>
+		<sl-tab slot="nav" panel="qrcode">
+			<hot-icon name="qr-code" class="!text-[1.7rem] !sm:text-[2rem]"></hot-icon>
+		</sl-tab>
+	</sl-tab-group>
+</div>
+
+<!-- </div> -->
 
 <style>
 	:root {
@@ -375,7 +622,7 @@
 		overflow: auto;
 		border-top-left-radius: 1rem;
 		border-top-right-radius: 1rem;
-		z-index: 100;  /* Map is using z-index 10 */
+		z-index: 100; /* Map is using z-index 10 */
 	}
 
 	/* The tab selector */
@@ -384,6 +631,7 @@
 		justify-content: center;
 		background-color: var(--hot-white);
 		height: var(--nav-height);
+		background-color: white;
 	}
 
 	/* The tab active indicator */
diff --git a/src/mapper/src/styles/button.css b/src/mapper/src/styles/button.css
new file mode 100644
index 000000000..fd7b7e18d
--- /dev/null
+++ b/src/mapper/src/styles/button.css
@@ -0,0 +1,28 @@
+sl-button.primary::part(base) {
+	background-color: #d73f37;
+	color: white;
+	border: 0px;
+}
+sl-button.primary::part(base):hover {
+	background-color: #b91c1c;
+}
+
+sl-button.secondary::part(base) {
+	background-color: white;
+	color: #d73f37;
+	border-width: 1px;
+	border-color: #d73f37;
+}
+sl-button.secondary::part(base):hover {
+	color: #b91c1c;
+	border-color: #b91c1c;
+}
+
+sl-button.gray::part(base) {
+	background-color: #4c4c4c;
+	color: white;
+	border-width: 0px;
+}
+sl-button.gray::part(base):hover {
+	background-color: #5f5f5f;
+}
diff --git a/src/mapper/src/styles/page.css b/src/mapper/src/styles/page.css
new file mode 100644
index 000000000..e87d22ddb
--- /dev/null
+++ b/src/mapper/src/styles/page.css
@@ -0,0 +1,38 @@
+@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+/* font barlow */
+.font-barlow-regular {
+	font-family: 'Barlow', system-ui;
+	font-weight: 400;
+	font-style: normal;
+}
+.font-barlow-medium {
+	font-family: 'Barlow', system-ui;
+	font-weight: 500;
+	font-style: normal;
+}
+.font-barlow-semibold {
+	font-family: 'Barlow', system-ui;
+	font-weight: 600;
+	font-style: normal;
+}
+.font-barlow-bold {
+	font-family: 'Barlow', system-ui;
+	font-weight: 700;
+	font-style: normal;
+}
+
+/* override default scrollbar */
+::-webkit-scrollbar {
+	width: 6px;
+}
+::-webkit-scrollbar-track {
+	background: none;
+}
+::-webkit-scrollbar-thumb {
+	background: #d7d7d7;
+	border-radius: 25px;
+}
+::-webkit-scrollbar-thumb:hover {
+	background: #c9c8c8;
+}
diff --git a/src/mapper/src/utilFunctions/clickOutside.ts b/src/mapper/src/utilFunctions/clickOutside.ts
new file mode 100644
index 000000000..a47eabbcf
--- /dev/null
+++ b/src/mapper/src/utilFunctions/clickOutside.ts
@@ -0,0 +1,16 @@
+/** Dispatch event on click outside of node */
+export function clickOutside(node: HTMLElement) {
+	const handleClick = (event: MouseEvent) => {
+		if (node && !node.contains(event.target as Node) && !event.defaultPrevented) {
+			node.dispatchEvent(new CustomEvent('click_outside', { detail: node }));
+		}
+	};
+
+	document.addEventListener('click', handleClick, true);
+
+	return {
+		destroy() {
+			document.removeEventListener('click', handleClick, true);
+		},
+	};
+}
diff --git a/src/mapper/src/utilFunctions/getDeviceRotation.ts b/src/mapper/src/utilFunctions/getDeviceRotation.ts
new file mode 100644
index 000000000..66dfda2cc
--- /dev/null
+++ b/src/mapper/src/utilFunctions/getDeviceRotation.ts
@@ -0,0 +1,42 @@
+export function GetDeviceRotation(quaternion) {
+	// https://w3c.github.io/orientation-sensor/#model explains the order of
+	// the 4 elements in the sensor.quaternion array.
+	let [qx, qy, qz, qw] = quaternion;
+
+	// When the phone is lying flat, we want to treat the direction toward the
+	// top of the phone as the "forward" direction; when the phone is held
+	// upright, we want to treat the direction out the back of the phone as the
+	// "forward" direction.  So, let's determine the compass heading of the
+	// phone based on the vector between these directions, i.e. at a 45-degree
+	// angle between the positive Y-axis and the negative Z-axis in this figure:
+	// https://w3c.github.io/orientation-sensor/#absoluteorientationsensor-model
+
+	// To find the current "forward" direction of the phone, we want to take this
+	// vector, (0, 1, -1), and apply the same rotation as the phone's rotation.
+	const y = 1;
+	const z = -1;
+
+	// From experimentation, it looks like the quaternion from the sensor is
+	// the inverse rotation, so we need to flip the fourth component.
+	qw = -qw;
+
+	// This section explains how to convert the quaternion to a rotation matrix:
+	// https://w3c.github.io/orientation-sensor/#convert-quaternion-to-rotation-matrix
+	// Now let's multiply the forward vector by the rotation matrix.
+	const rx = y * (2 * qx * qy + 2 * qw * qz) + z * (2 * qx * qz - 2 * qw * qy);
+	const ry = y * (1 - 2 * qx * qx - 2 * qz * qz) + z * (2 * qy * qz + 2 * qw * qx);
+	const rz = y * (2 * qy * qz + 2 * qw * qx) + z * (1 - 2 * qx * qx - 2 * qy * qy);
+
+	// This gives us a rotated vector indicating the "forward" direction of the
+	// phone with respect to the earth.  We only care about the orientation of
+	// this vector in the XY plane (the plane tangential to the ground), i.e.
+	// the heading of the (rx, ry) vector, where (0, 1) is north.
+
+	const radians = Math.atan2(ry, rx);
+	const degrees = (radians * 180) / Math.PI; // counterclockwise from +X axis
+	let heading = 90 - degrees;
+	if (heading < 0) heading += 360;
+
+	// return rotation degree to rotate icon
+	return Math.round(heading);
+}
diff --git a/src/mapper/static/assets/icons/bold.svg b/src/mapper/static/assets/icons/bold.svg
new file mode 100644
index 000000000..0814a2e4a
--- /dev/null
+++ b/src/mapper/static/assets/icons/bold.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-bold" viewBox="0 0 16 16">
+  <path d="M8.21 13c2.106 0 3.412-1.087 3.412-2.823 0-1.306-.984-2.283-2.324-2.386v-.055a2.176 2.176 0 0 0 1.852-2.14c0-1.51-1.162-2.46-3.014-2.46H3.843V13zM5.908 4.674h1.696c.963 0 1.517.451 1.517 1.244 0 .834-.629 1.32-1.73 1.32H5.908V4.673zm0 6.788V8.598h1.73c1.217 0 1.88.492 1.88 1.415 0 .943-.643 1.449-1.832 1.449H5.907z"/>
+</svg>
\ No newline at end of file
diff --git a/src/mapper/static/assets/icons/chat.svg b/src/mapper/static/assets/icons/chat.svg
new file mode 100644
index 000000000..88d190672
--- /dev/null
+++ b/src/mapper/static/assets/icons/chat.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chat-left-text" viewBox="0 0 16 16">
+  <path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H4.414A2 2 0 0 0 3 11.586l-2 2V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12.793a.5.5 0 0 0 .854.353l2.853-2.853A1 1 0 0 1 4.414 12H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
+  <path d="M3 3.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5M3 6a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 6m0 2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5"/>
+</svg>
\ No newline at end of file
diff --git a/src/mapper/static/assets/icons/check.svg b/src/mapper/static/assets/icons/check.svg
new file mode 100644
index 000000000..166e6612d
--- /dev/null
+++ b/src/mapper/static/assets/icons/check.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check2-circle" viewBox="0 0 16 16">
+  <path d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0"/>
+  <path d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0z"/>
+</svg>
\ No newline at end of file
diff --git a/src/mapper/static/assets/icons/chevron-left.svg b/src/mapper/static/assets/icons/chevron-left.svg
new file mode 100644
index 000000000..5bcc1bb5e
--- /dev/null
+++ b/src/mapper/static/assets/icons/chevron-left.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"/>
+</svg>
\ No newline at end of file
diff --git a/src/mapper/static/assets/icons/chevron-right.svg b/src/mapper/static/assets/icons/chevron-right.svg
new file mode 100644
index 000000000..ab39af834
--- /dev/null
+++ b/src/mapper/static/assets/icons/chevron-right.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/>
+</svg>
\ No newline at end of file
diff --git a/src/mapper/static/assets/icons/close.svg b/src/mapper/static/assets/icons/close.svg
new file mode 100644
index 000000000..fdcc4e824
--- /dev/null
+++ b/src/mapper/static/assets/icons/close.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
+  <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
+</svg>
\ No newline at end of file
diff --git a/src/mapper/static/assets/icons/code.svg b/src/mapper/static/assets/icons/code.svg
new file mode 100644
index 000000000..c0760e979
--- /dev/null
+++ b/src/mapper/static/assets/icons/code.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-code" viewBox="0 0 16 16">
+  <path d="M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8z"/>
+</svg>
\ No newline at end of file
diff --git a/src/mapper/static/assets/icons/description.svg b/src/mapper/static/assets/icons/description.svg
new file mode 100644
index 000000000..7ae53fc4a
--- /dev/null
+++ b/src/mapper/static/assets/icons/description.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-text" viewBox="0 0 16 16">
+  <path d="M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5"/>
+  <path d="M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z"/>
+</svg>
\ No newline at end of file
diff --git a/src/mapper/static/assets/icons/geolocate.svg b/src/mapper/static/assets/icons/geolocate.svg
new file mode 100644
index 000000000..13bed746f
--- /dev/null
+++ b/src/mapper/static/assets/icons/geolocate.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-crosshair" viewBox="0 0 16 16">
+  <path d="M8.5.5a.5.5 0 0 0-1 0v.518A7 7 0 0 0 1.018 7.5H.5a.5.5 0 0 0 0 1h.518A7 7 0 0 0 7.5 14.982v.518a.5.5 0 0 0 1 0v-.518A7 7 0 0 0 14.982 8.5h.518a.5.5 0 0 0 0-1h-.518A7 7 0 0 0 8.5 1.018zm-6.48 7A6 6 0 0 1 7.5 2.02v.48a.5.5 0 0 0 1 0v-.48a6 6 0 0 1 5.48 5.48h-.48a.5.5 0 0 0 0 1h.48a6 6 0 0 1-5.48 5.48v-.48a.5.5 0 0 0-1 0v.48A6 6 0 0 1 2.02 8.5h.48a.5.5 0 0 0 0-1zM8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4"/>
+</svg>
\ No newline at end of file
diff --git a/src/mapper/static/assets/icons/h1.svg b/src/mapper/static/assets/icons/h1.svg
new file mode 100644
index 000000000..0df41f6cf
--- /dev/null
+++ b/src/mapper/static/assets/icons/h1.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-h1" viewBox="0 0 16 16">
+  <path d="M7.648 13V3H6.3v4.234H1.348V3H0v10h1.348V8.421H6.3V13zM14 13V3h-1.333l-2.381 1.766V6.12L12.6 4.443h.066V13z"/>
+</svg>
\ No newline at end of file
diff --git a/src/mapper/static/assets/icons/h2.svg b/src/mapper/static/assets/icons/h2.svg
new file mode 100644
index 000000000..03379edb3
--- /dev/null
+++ b/src/mapper/static/assets/icons/h2.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-h2" viewBox="0 0 16 16">
+  <path d="M7.495 13V3.201H6.174v4.15H1.32V3.2H0V13h1.32V8.513h4.854V13zm3.174-7.071v-.05c0-.934.66-1.752 1.801-1.752 1.005 0 1.76.639 1.76 1.651 0 .898-.582 1.58-1.12 2.19l-3.69 4.2V13h6.331v-1.149h-4.458v-.079L13.9 8.786c.919-1.048 1.666-1.874 1.666-3.101C15.565 4.149 14.35 3 12.499 3 10.46 3 9.384 4.393 9.384 5.879v.05z"/>
+</svg>
\ No newline at end of file
diff --git a/src/mapper/static/assets/icons/h3.svg b/src/mapper/static/assets/icons/h3.svg
new file mode 100644
index 000000000..97de53125
--- /dev/null
+++ b/src/mapper/static/assets/icons/h3.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-h3" viewBox="0 0 16 16">
+  <path d="M11.07 8.4h1.049c1.174 0 1.99.69 2.004 1.724s-.802 1.786-2.068 1.779c-1.11-.007-1.905-.605-1.99-1.357h-1.21C8.926 11.91 10.116 13 12.028 13c1.99 0 3.439-1.188 3.404-2.87-.028-1.553-1.287-2.221-2.096-2.313v-.07c.724-.127 1.814-.935 1.772-2.293-.035-1.392-1.21-2.468-3.038-2.454-1.927.007-2.94 1.196-2.981 2.426h1.23c.064-.71.732-1.336 1.744-1.336 1.027 0 1.744.64 1.744 1.568.007.95-.738 1.639-1.744 1.639h-.991V8.4ZM7.495 13V3.201H6.174v4.15H1.32V3.2H0V13h1.32V8.513h4.854V13z"/>
+</svg>
\ No newline at end of file
diff --git a/src/mapper/static/assets/icons/hr.svg b/src/mapper/static/assets/icons/hr.svg
new file mode 100644
index 000000000..6e9fbd8c5
--- /dev/null
+++ b/src/mapper/static/assets/icons/hr.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-hr" viewBox="0 0 16 16">
+  <path d="M12 3H4a1 1 0 0 0-1 1v2.5H2V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2.5h-1V4a1 1 0 0 0-1-1M2 9.5h1V12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V9.5h1V12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm-1.5-2a.5.5 0 0 0 0 1h15a.5.5 0 0 0 0-1z"/>
+</svg>
\ No newline at end of file
diff --git a/src/mapper/static/assets/icons/italic.svg b/src/mapper/static/assets/icons/italic.svg
new file mode 100644
index 000000000..3ac6b09f0
--- /dev/null
+++ b/src/mapper/static/assets/icons/italic.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-italic" viewBox="0 0 16 16">
+  <path d="M7.991 11.674 9.53 4.455c.123-.595.246-.71 1.347-.807l.11-.52H7.211l-.11.52c1.06.096 1.128.212 1.005.807L6.57 11.674c-.123.595-.246.71-1.346.806l-.11.52h3.774l.11-.52c-1.06-.095-1.129-.211-1.006-.806z"/>
+</svg>
\ No newline at end of file
diff --git a/src/mapper/static/assets/icons/layer.svg b/src/mapper/static/assets/icons/layer.svg
new file mode 100644
index 000000000..52dbe792f
--- /dev/null
+++ b/src/mapper/static/assets/icons/layer.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-layers" viewBox="0 0 16 16">
+  <path d="M8.235 1.559a.5.5 0 0 0-.47 0l-7.5 4a.5.5 0 0 0 0 .882L3.188 8 .264 9.559a.5.5 0 0 0 0 .882l7.5 4a.5.5 0 0 0 .47 0l7.5-4a.5.5 0 0 0 0-.882L12.813 8l2.922-1.559a.5.5 0 0 0 0-.882zm3.515 7.008L14.438 10 8 13.433 1.562 10 4.25 8.567l3.515 1.874a.5.5 0 0 0 .47 0zM8 9.433 1.562 6 8 2.567 14.438 6z"/>
+</svg>
\ No newline at end of file
diff --git a/src/mapper/static/assets/icons/legend-toggle.svg b/src/mapper/static/assets/icons/legend-toggle.svg
new file mode 100644
index 000000000..a2fb09e7f
--- /dev/null
+++ b/src/mapper/static/assets/icons/legend-toggle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M160-200v-80h640v80H160Zm0-160v-80h640v80H160Zm0-160v-94l240-146 200 142 200-142v98L600-520 397-664 160-520Z"/></svg>
\ No newline at end of file
diff --git a/src/mapper/static/assets/icons/list-ol.svg b/src/mapper/static/assets/icons/list-ol.svg
new file mode 100644
index 000000000..d111f7301
--- /dev/null
+++ b/src/mapper/static/assets/icons/list-ol.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list-ol" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5"/>
+  <path d="M1.713 11.865v-.474H2c.217 0 .363-.137.363-.317 0-.185-.158-.31-.361-.31-.223 0-.367.152-.373.31h-.59c.016-.467.373-.787.986-.787.588-.002.954.291.957.703a.595.595 0 0 1-.492.594v.033a.615.615 0 0 1 .569.631c.003.533-.502.8-1.051.8-.656 0-1-.37-1.008-.794h.582c.008.178.186.306.422.309.254 0 .424-.145.422-.35-.002-.195-.155-.348-.414-.348h-.3zm-.004-4.699h-.604v-.035c0-.408.295-.844.958-.844.583 0 .96.326.96.756 0 .389-.257.617-.476.848l-.537.572v.03h1.054V9H1.143v-.395l.957-.99c.138-.142.293-.304.293-.508 0-.18-.147-.32-.342-.32a.33.33 0 0 0-.342.338zM2.564 5h-.635V2.924h-.031l-.598.42v-.567l.629-.443h.635z"/>
+</svg>
\ No newline at end of file
diff --git a/src/mapper/static/assets/icons/list-ul.svg b/src/mapper/static/assets/icons/list-ul.svg
new file mode 100644
index 000000000..f1cc202ca
--- /dev/null
+++ b/src/mapper/static/assets/icons/list-ul.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list-ul" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m-3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2m0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2m0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2"/>
+</svg>
\ No newline at end of file
diff --git a/src/mapper/static/assets/icons/location.svg b/src/mapper/static/assets/icons/location.svg
new file mode 100644
index 000000000..20e18ba1f
--- /dev/null
+++ b/src/mapper/static/assets/icons/location.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo-alt" viewBox="0 0 16 16">
+  <path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A32 32 0 0 1 8 14.58a32 32 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10"/>
+  <path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4m0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6"/>
+</svg>
\ No newline at end of file
diff --git a/src/mapper/static/assets/icons/quote.svg b/src/mapper/static/assets/icons/quote.svg
new file mode 100644
index 000000000..0aa0e175a
--- /dev/null
+++ b/src/mapper/static/assets/icons/quote.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-quote" viewBox="0 0 16 16">
+  <path d="M12 12a1 1 0 0 0 1-1V8.558a1 1 0 0 0-1-1h-1.388q0-.527.062-1.054.093-.558.31-.992t.559-.683q.34-.279.868-.279V3q-.868 0-1.52.372a3.3 3.3 0 0 0-1.085.992 4.9 4.9 0 0 0-.62 1.458A7.7 7.7 0 0 0 9 7.558V11a1 1 0 0 0 1 1zm-6 0a1 1 0 0 0 1-1V8.558a1 1 0 0 0-1-1H4.612q0-.527.062-1.054.094-.558.31-.992.217-.434.559-.683.34-.279.868-.279V3q-.868 0-1.52.372a3.3 3.3 0 0 0-1.085.992 4.9 4.9 0 0 0-.62 1.458A7.7 7.7 0 0 0 3 7.558V11a1 1 0 0 0 1 1z"/>
+</svg>
\ No newline at end of file
diff --git a/src/mapper/static/assets/icons/redo.svg b/src/mapper/static/assets/icons/redo.svg
new file mode 100644
index 000000000..324d5af1a
--- /dev/null
+++ b/src/mapper/static/assets/icons/redo.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2z"/>
+  <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466"/>
+</svg>
\ No newline at end of file
diff --git a/src/mapper/static/assets/icons/strike.svg b/src/mapper/static/assets/icons/strike.svg
new file mode 100644
index 000000000..c64eba34a
--- /dev/null
+++ b/src/mapper/static/assets/icons/strike.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-strikethrough" viewBox="0 0 16 16">
+  <path d="M6.333 5.686c0 .31.083.581.27.814H5.166a2.8 2.8 0 0 1-.099-.76c0-1.627 1.436-2.768 3.48-2.768 1.969 0 3.39 1.175 3.445 2.85h-1.23c-.11-1.08-.964-1.743-2.25-1.743-1.23 0-2.18.602-2.18 1.607zm2.194 7.478c-2.153 0-3.589-1.107-3.705-2.81h1.23c.144 1.06 1.129 1.703 2.544 1.703 1.34 0 2.31-.705 2.31-1.675 0-.827-.547-1.374-1.914-1.675L8.046 8.5H1v-1h14v1h-3.504c.468.437.675.994.675 1.697 0 1.826-1.436 2.967-3.644 2.967"/>
+</svg>
\ No newline at end of file
diff --git a/src/mapper/static/assets/icons/undo.svg b/src/mapper/static/assets/icons/undo.svg
new file mode 100644
index 000000000..3d9ff62ef
--- /dev/null
+++ b/src/mapper/static/assets/icons/undo.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2z"/>
+  <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466"/>
+</svg>
\ No newline at end of file