From 912d646831f53599dcf0604365577a0891a965e3 Mon Sep 17 00:00:00 2001
From: steveoh <sgourley@utah.gov>
Date: Mon, 3 Feb 2025 17:51:39 -0700
Subject: [PATCH] chore: prettier

---
 .storybook/main.js                            |   6 +-
 .storybook/preview-head.html                  |   2 +-
 commitlint.config.js                          |  17 +-
 firebase.json                                 |   7 +-
 .../database/submissions/onCreateMonument.js  |   3 +-
 functions/emailHelpers.js                     |   2 +-
 functions/https/postGeneratePreview.js        |   1 +
 functions/pdfHelpers.js                       |   8 +-
 index.html                                    |  36 ++--
 src/components/app/App.jsx                    |  42 +---
 src/components/contexts/SubmissionContext.jsx |  10 +-
 src/components/formElements/Buttons.jsx       |  26 +--
 src/components/formElements/FileUpload.jsx    |  62 ++----
 src/components/formElements/Form.jsx          |   7 +-
 src/components/formElements/Inputs.jsx        |   7 +-
 .../formElements/LimitedTextarea.jsx          |   5 +-
 src/components/formElements/Note.jsx          |   6 +-
 src/components/formElements/Select.jsx        | 204 ++++++++----------
 .../formElements/Select.stories.jsx           |   5 +-
 src/components/formElements/Switch.jsx        |  21 +-
 src/components/hooks/usePageView.jsx          |   2 +-
 src/components/layoutElements/Drawer.jsx      |  34 +--
 src/components/layoutElements/Menu.jsx        |  49 +----
 src/components/machines/geolocation.js        |   2 +-
 src/components/machines/index.js              |  32 +--
 src/components/machines/index.test.js         |  12 +-
 src/components/pageElements/AddPoint.jsx      | 112 +++-------
 .../pageElements/AddPoint.stories.jsx         |   7 +-
 .../0-CornerSubmission.stories.jsx            |  19 +-
 .../CornerSubmission/1-Metadata.stories.jsx   |  20 +-
 .../CornerSubmission/1b-Existing.stories.jsx  |  17 +-
 .../CornerSubmission/2-Datum.stories.jsx      |  13 +-
 .../CornerSubmission/3-Grid.stories.jsx       |  15 +-
 .../CornerSubmission/3a-Latitude.stories.jsx  |  14 +-
 .../CornerSubmission/3b-Longitude.stories.jsx |  11 +-
 .../CornerSubmission/3c-Height.stories.jsx    |  19 +-
 .../CornerSubmission/4-Images.stories.jsx     |  11 +-
 .../CornerSubmission/CornerSubmission.jsx     |  19 +-
 .../pageElements/CornerSubmission/Datum.jsx   |  39 ++--
 .../GeographicCoordinates.jsx                 | 114 +++-------
 .../CornerSubmission/GridCoordinates.jsx      | 115 +++-------
 .../pageElements/CornerSubmission/Images.jsx  |  36 +---
 .../CornerSubmission/Metadata.jsx             |  86 ++------
 .../pageElements/CornerSubmission/Pdf.jsx     |  23 +-
 .../CornerSubmission/SubmissionNotice.jsx     |  22 +-
 .../CornerSubmission/SubmissionReview.jsx     |  87 ++------
 .../SubmissionReview.stories.jsx              |  14 +-
 .../CornerSubmission/SubmissionSuccess.jsx    |  25 +--
 .../pageElements/CornerSubmission/Wizard.jsx  |  17 +-
 src/components/pageElements/ErrorBoundary.jsx |   4 +-
 src/components/pageElements/Identify.jsx      |  38 +---
 .../pageElements/Identify.stories.jsx         |  10 +-
 src/components/pageElements/Legend.jsx        |  31 +--
 src/components/pageElements/Login.jsx         |  41 ++--
 src/components/pageElements/Logo.jsx          |   6 +-
 src/components/pageElements/Map.jsx           |  57 ++---
 src/components/pageElements/MyContent.jsx     |  97 ++-------
 .../pageElements/MyContent.stories.jsx        |   7 +-
 src/components/pageElements/Profile.jsx       |  70 ++----
 src/components/pageElements/TieSheetList.jsx  |  13 +-
 src/components/pageElements/Welcome.jsx       |  39 ++--
 .../pageElements/mapElements/GroupButton.jsx  |  18 +-
 .../pageElements/mapElements/HomeButton.jsx   |  11 +-
 .../mapElements/MonumentRecord.jsx            |  13 +-
 .../mapElements/MonumentRecord.stories.jsx    |   8 +-
 .../pageElements/mapElements/MyLocation.jsx   |  34 ++-
 .../mapElements/MyLocation.stories.jsx        |  30 +--
 .../pageElements/mapElements/Township.jsx     |  47 +---
 .../mapElements/Township.stories.jsx          |   2 +-
 .../pageElements/mapElements/townships.js     |  15 +-
 src/components/reducers/AppReducer.js         |  10 +-
 src/emails/cancelled_submission.html          | 140 +++++++-----
 src/emails/new_submission.html                | 145 ++++++++-----
 src/main.jsx                                  |   6 +-
 storage.rules.test.mjs                        |  49 ++---
 vite.config.js                                |   2 +-
 76 files changed, 784 insertions(+), 1622 deletions(-)

diff --git a/.storybook/main.js b/.storybook/main.js
index 61249f4f..1f950e07 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -1,10 +1,6 @@
 export default {
   stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-  ],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
   framework: {
     name: '@storybook/react-vite',
     options: {},
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 05da1e9d..e5510401 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -1,3 +1,3 @@
 <script>
   window.global = window;
-</script>
\ No newline at end of file
+</script>
diff --git a/commitlint.config.js b/commitlint.config.js
index 91272ddd..b2727de7 100644
--- a/commitlint.config.js
+++ b/commitlint.config.js
@@ -2,21 +2,6 @@ export default {
   extends: ['@commitlint/config-conventional'],
   rules: {
     'scope-enum': [2, 'always', ['api', 'app']],
-    'type-enum': [
-      2,
-      'always',
-      [
-        'build',
-        'chore',
-        'ci',
-        'docs',
-        'feat',
-        'fix',
-        'refactor',
-        'deps',
-        'style',
-        'test',
-      ],
-    ],
+    'type-enum': [2, 'always', ['build', 'chore', 'ci', 'docs', 'feat', 'fix', 'refactor', 'deps', 'style', 'test']],
   },
 };
diff --git a/firebase.json b/firebase.json
index 156921c2..a2ed94db 100644
--- a/firebase.json
+++ b/firebase.json
@@ -4,12 +4,7 @@
       "source": "functions",
       "runtime": "nodejs20",
       "codebase": "default",
-      "ignore": [
-        "node_modules",
-        ".git",
-        "firebase-debug.log",
-        "firebase-debug.*.log"
-      ]
+      "ignore": ["node_modules", ".git", "firebase-debug.log", "firebase-debug.*.log"]
     }
   ],
   "firestore": {
diff --git a/functions/database/submissions/onCreateMonument.js b/functions/database/submissions/onCreateMonument.js
index a505d9ad..1a36c8e9 100644
--- a/functions/database/submissions/onCreateMonument.js
+++ b/functions/database/submissions/onCreateMonument.js
@@ -55,6 +55,7 @@ export const createMonumentRecord = async (record, id) => {
   } catch (error) {
     logger.error(
       'error fetching surveyor license. using empty string',
+      error,
       record.submitted_by,
       {
         structuredData: true,
@@ -92,7 +93,7 @@ export const createMonumentRecord = async (record, id) => {
 
     await doc.update({ monument: fileName });
   } catch (error) {
-    logger.error('error updating monument record sheet', fileName, {
+    logger.error('error updating monument record sheet', fileName, error, {
       structuredData: true,
     });
   }
diff --git a/functions/emailHelpers.js b/functions/emailHelpers.js
index f0c67fad..8e34b19a 100644
--- a/functions/emailHelpers.js
+++ b/functions/emailHelpers.js
@@ -9,7 +9,7 @@ export const notify = (key, template) => {
       { nodeEnv: process.env.NODE_ENV },
       {
         structuredData: true,
-      }
+      },
     );
 
     return Promise.resolve([
diff --git a/functions/https/postGeneratePreview.js b/functions/https/postGeneratePreview.js
index cbf22cf8..c7d3a184 100644
--- a/functions/https/postGeneratePreview.js
+++ b/functions/https/postGeneratePreview.js
@@ -53,6 +53,7 @@ export const generatePreview = async (data, auth) => {
     logger.error(
       'error fetching surveyor license. using empty string',
       auth.uid,
+      error,
       {
         structuredData: true,
       },
diff --git a/functions/pdfHelpers.js b/functions/pdfHelpers.js
index fc2b7cea..73573827 100644
--- a/functions/pdfHelpers.js
+++ b/functions/pdfHelpers.js
@@ -32,12 +32,16 @@ export const getPdfAssets = async (bucket, metadata, seal) => {
   try {
     images = await getBase64Images(bucket, imagePaths);
   } catch (error) {
-    logger.error('could not get binary images');
+    logger.error('could not get binary images', error, {
+      structuredData: true,
+    });
   }
   try {
     pdfs = await getBinaryPdfs(bucket, pdfPaths);
   } catch (error) {
-    logger.error('could not get binary pdfs');
+    logger.error('could not get binary pdfs', error, {
+      structuredData: true,
+    });
   }
 
   return { images, pdfs };
diff --git a/index.html b/index.html
index 0d65156c..1fb55a01 100644
--- a/index.html
+++ b/index.html
@@ -1,21 +1,21 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="https://gis.utah.gov/images/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Utah PLSS Corner Points: Provided by the UGRC</title>
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+    <meta
+      name="description"
+      content="View and submit corner monument information for the Utah Public Lands Survey System."
+    />
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="https://gis.utah.gov/images/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Utah PLSS Corner Points: Provided by the UGRC</title>
-  <meta name="apple-mobile-web-app-capable" content="yes">
-  <meta name="mobile-web-app-capable" content="yes">
-  <meta name="apple-mobile-web-app-status-bar-style" content="black">
-  <meta name="description"
-    content="View and submit corner monument information for the Utah Public Lands Survey System." />
-</head>
-
-<body>
-  <div id="root"></div>
-  <script type="module" src="/src/main.jsx"></script>
-</body>
-
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
 </html>
diff --git a/src/components/app/App.jsx b/src/components/app/App.jsx
index 166a1300..5c8b5dc2 100644
--- a/src/components/app/App.jsx
+++ b/src/components/app/App.jsx
@@ -1,20 +1,14 @@
-import { useImmerReducer } from 'use-immer';
-import {
-  AnalyticsProvider,
-  AuthProvider,
-  useFirebaseApp,
-  FunctionsProvider,
-  StorageProvider,
-} from 'reactfire';
 import { getAnalytics } from 'firebase/analytics';
-import { getAuth, connectAuthEmulator } from 'firebase/auth';
-import { getFunctions, connectFunctionsEmulator } from 'firebase/functions';
-import { getStorage, connectStorageEmulator } from 'firebase/storage';
-import { getFirestore, connectFirestoreEmulator } from 'firebase/firestore';
-import reduce, { defaults } from '../reducers/AppReducer';
+import { connectAuthEmulator, getAuth } from 'firebase/auth';
+import { connectFirestoreEmulator, getFirestore } from 'firebase/firestore';
+import { connectFunctionsEmulator, getFunctions } from 'firebase/functions';
+import { connectStorageEmulator, getStorage } from 'firebase/storage';
+import { AnalyticsProvider, AuthProvider, FunctionsProvider, StorageProvider, useFirebaseApp } from 'reactfire';
+import { useImmerReducer } from 'use-immer';
 import Drawer from '../layoutElements/Drawer.jsx';
 import Menu from '../layoutElements/Menu.jsx';
 import Map from '../pageElements/Map.jsx';
+import reduce, { defaults } from '../reducers/AppReducer';
 
 export default function App() {
   const [state, dispatch] = useImmerReducer(reduce, defaults);
@@ -38,10 +32,7 @@ export default function App() {
       }
     }
 
-    if (
-      typeof window === 'undefined' ||
-      !window['_firebase_functions_emulator']
-    ) {
+    if (typeof window === 'undefined' || !window['_firebase_functions_emulator']) {
       try {
         connectFunctionsEmulator(functions, 'localhost', 5001);
       } catch {
@@ -52,10 +43,7 @@ export default function App() {
       }
     }
 
-    if (
-      typeof window === 'undefined' ||
-      !window['_firebase_storage_emulator']
-    ) {
+    if (typeof window === 'undefined' || !window['_firebase_storage_emulator']) {
       try {
         connectStorageEmulator(storage, 'localhost', 9199);
       } catch {
@@ -66,10 +54,7 @@ export default function App() {
       }
     }
 
-    if (
-      typeof window === 'undefined' ||
-      !window['_firebase_firestore_emulator']
-    ) {
+    if (typeof window === 'undefined' || !window['_firebase_firestore_emulator']) {
       try {
         connectFirestoreEmulator(firestore, 'localhost', 8080);
       } catch {
@@ -87,12 +72,7 @@ export default function App() {
         <FunctionsProvider sdk={functions}>
           <StorageProvider sdk={storage}>
             <main className="app grid h-full w-screen">
-              <Map
-                state={state.map}
-                color={state.addPoint.color}
-                drawerOpen={state.drawerOpen}
-                dispatch={dispatch}
-              />
+              <Map state={state.map} color={state.addPoint.color} drawerOpen={state.drawerOpen} dispatch={dispatch} />
               <Menu drawerOpen={state.drawerOpen} dispatch={dispatch}>
                 menu
               </Menu>
diff --git a/src/components/contexts/SubmissionContext.jsx b/src/components/contexts/SubmissionContext.jsx
index 367c8a70..cef59073 100644
--- a/src/components/contexts/SubmissionContext.jsx
+++ b/src/components/contexts/SubmissionContext.jsx
@@ -1,6 +1,6 @@
-import { createContext } from 'react';
-import PropTypes from 'prop-types';
 import { useMachine } from '@xstate/react';
+import PropTypes from 'prop-types';
+import { createContext } from 'react';
 import { submissionMachine } from '../machines';
 
 export const SubmissionContext = createContext({});
@@ -10,11 +10,7 @@ export const SubmissionProvider = ({ children, context }) => {
     input: { ...context },
   });
 
-  return (
-    <SubmissionContext.Provider value={[state, send]}>
-      {children}
-    </SubmissionContext.Provider>
-  );
+  return <SubmissionContext.Provider value={[state, send]}>{children}</SubmissionContext.Provider>;
 };
 
 SubmissionProvider.propTypes = {
diff --git a/src/components/formElements/Buttons.jsx b/src/components/formElements/Buttons.jsx
index 31230c39..5d0a0645 100644
--- a/src/components/formElements/Buttons.jsx
+++ b/src/components/formElements/Buttons.jsx
@@ -1,8 +1,8 @@
+import { ExclamationCircleIcon } from '@heroicons/react/20/solid';
 import clsx from 'clsx';
-import PropTypes from 'prop-types';
 import { OAuthProvider, signInWithPopup } from 'firebase/auth';
+import PropTypes from 'prop-types';
 import { useAuth } from 'reactfire';
-import { ExclamationCircleIcon } from '@heroicons/react/20/solid';
 
 export const LogInButton = () => {
   const auth = useAuth();
@@ -154,14 +154,7 @@ export const Button = ({
           fill="none"
           viewBox="0 0 24 24"
         >
-          <circle
-            className="opacity-25"
-            cx="12"
-            cy="12"
-            r="10"
-            stroke="currentColor"
-            strokeWidth="4"
-          ></circle>
+          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
           <path
             className="opacity-75"
             fill="currentColor"
@@ -169,9 +162,7 @@ export const Button = ({
           ></path>
         </svg>
       )}
-      {state === 'error' && (
-        <ExclamationCircleIcon className="-ml-1 mr-2 h-5 w-5 text-red-500" />
-      )}
+      {state === 'error' && <ExclamationCircleIcon className="-ml-1 mr-2 h-5 w-5 text-red-500" />}
       {children}
     </button>
   );
@@ -210,14 +201,7 @@ Button.propTypes = {
   buttonGroup: PropTypes.object,
 };
 
-export const Link = ({
-  href,
-  children,
-  target,
-  rel,
-  buttonGroup,
-  style = 'link',
-}) => {
+export const Link = ({ href, children, target, rel, buttonGroup, style = 'link' }) => {
   const attributes = {
     target,
     rel,
diff --git a/src/components/formElements/FileUpload.jsx b/src/components/formElements/FileUpload.jsx
index ed4188ec..4012ea47 100644
--- a/src/components/formElements/FileUpload.jsx
+++ b/src/components/formElements/FileUpload.jsx
@@ -1,19 +1,12 @@
-import { useEffect, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { deleteObject, getDownloadURL, ref, uploadBytesResumable } from 'firebase/storage';
 import PropTypes from 'prop-types';
+import { useEffect, useRef, useState } from 'react';
 import { useStorage } from 'reactfire';
-import {
-  deleteObject,
-  getDownloadURL,
-  ref,
-  uploadBytesResumable,
-} from 'firebase/storage';
-import clsx from 'clsx';
 import { Button } from './Buttons.jsx';
 
 const validateContentTypes = (contentType, contentTypes) => {
-  const found = contentTypes.find(
-    (meta) => contentType === meta.value.toLowerCase(),
-  );
+  const found = contentTypes.find((meta) => contentType === meta.value.toLowerCase());
 
   if (found) {
     return [true, ''];
@@ -28,14 +21,7 @@ const validateSize = (actualSize, megabytes) => {
   return actualSize > megabytes * 1024 * 1024;
 };
 
-const FileUpload = ({
-  defaultFileName,
-  path,
-  contentTypes,
-  maxFileSize,
-  value,
-  onChange,
-}) => {
+const FileUpload = ({ defaultFileName, path, contentTypes, maxFileSize, value, onChange }) => {
   const storage = useStorage();
   const uploadReference = useRef();
   const [fileUrl, setFileUrl] = useState('');
@@ -54,10 +40,7 @@ const FileUpload = ({
     const fileToUpload = fileList[0];
     let fileName = fileToUpload.name;
 
-    let [hasValidType, errorMessage] = validateContentTypes(
-      fileToUpload.type,
-      contentTypes,
-    );
+    let [hasValidType, errorMessage] = validateContentTypes(fileToUpload.type, contentTypes);
     if (!hasValidType) {
       setUploadError(errorMessage);
       return;
@@ -70,10 +53,7 @@ const FileUpload = ({
 
     uploadReference.current = ref(storage, `${path}/${fileName}`);
 
-    const uploadTask = uploadBytesResumable(
-      uploadReference.current,
-      fileToUpload,
-    );
+    const uploadTask = uploadBytesResumable(uploadReference.current, fileToUpload);
 
     uploadTask?.on(
       'state_changed',
@@ -97,14 +77,10 @@ const FileUpload = ({
               ).toFixed(2)}MB.`,
             );
           } else {
-            setUploadError(
-              'Permission denied. Check your login status and try again.',
-            );
+            setUploadError('Permission denied. Check your login status and try again.');
           }
         } catch {
-          setUploadError(
-            'Permission denied. Check your login status and try again.',
-          );
+          setUploadError('Permission denied. Check your login status and try again.');
         }
       },
       async () => {
@@ -135,11 +111,7 @@ const FileUpload = ({
         name={defaultFileName}
         id={defaultFileName}
         onChange={uploadFile}
-        className="w-max text-center text-sm text-slate-400 file:flex file:min-h-[2rem] file:cursor-pointer file:rounded-full file:border-2
-        file:border-solid file:border-sky-600 file:bg-sky-500 file:px-7 file:py-1 file:text-sm
-        file:font-semibold file:text-white file:transition-all file:duration-200 file:ease-in-out hover:file:bg-sky-600
-        file:focus:border-sky-500 file:focus:outline-none file:focus:ring-2 file:focus:ring-sky-600 file:focus:ring-opacity-50
-        file:active:bg-sky-700 file:disabled:cursor-not-allowed file:disabled:opacity-50"
+        className="w-max text-center text-sm text-slate-400 file:flex file:min-h-[2rem] file:cursor-pointer file:rounded-full file:border-2 file:border-solid file:border-sky-600 file:bg-sky-500 file:px-7 file:py-1 file:text-sm file:font-semibold file:text-white file:transition-all file:duration-200 file:ease-in-out hover:file:bg-sky-600 file:focus:border-sky-500 file:focus:outline-none file:focus:ring-2 file:focus:ring-sky-600 file:focus:ring-opacity-50 file:active:bg-sky-700 file:disabled:cursor-not-allowed file:disabled:opacity-50"
       />
       {uploadPercent !== undefined && (
         <span
@@ -182,21 +154,11 @@ export const ObjectPreview = ({ url, children }) => {
   return (
     <div className="flex w-full flex-col rounded border border-slate-400 bg-slate-50 text-slate-400 shadow">
       {url.search(/\.pdf\?/i) > -1 ? (
-        <object
-          className="self-center"
-          data={url}
-          type="application/pdf"
-          width="300"
-          height="375"
-        >
+        <object className="self-center" data={url} type="application/pdf" width="300" height="375">
           PDF preview
         </object>
       ) : (
-        <img
-          src={url}
-          alt="upload preview"
-          className="m-2 max-w-[300px] self-center rounded-t"
-        />
+        <img src={url} alt="upload preview" className="m-2 max-w-[300px] self-center rounded-t" />
       )}
 
       <span className="flex flex-1 select-none justify-center rounded-b border-t bg-white p-2 text-sm italic">
diff --git a/src/components/formElements/Form.jsx b/src/components/formElements/Form.jsx
index aeb304ae..2ecd59b6 100644
--- a/src/components/formElements/Form.jsx
+++ b/src/components/formElements/Form.jsx
@@ -2,10 +2,7 @@ import PropTypes from 'prop-types';
 
 export function NumberedForm({ children, onSubmit }) {
   return (
-    <form
-      onSubmit={onSubmit}
-      className="mb-10 flex w-full flex-col items-center justify-center"
-    >
+    <form onSubmit={onSubmit} className="mb-10 flex w-full flex-col items-center justify-center">
       <div className="relative flex w-full flex-col gap-4 pl-6 after:absolute after:h-full after:border-l-2 after:border-sky-100 after:content-['']">
         {children}
       </div>
@@ -26,7 +23,7 @@ export function NumberedFormSection({ children, number, title }) {
         </div>
         <div className="ml-8 flex-1 uppercase">{title ? title : children}</div>
       </div>
-      {title && <div className="ml-8 mb-4 flex flex-col gap-4">{children}</div>}
+      {title && <div className="mb-4 ml-8 flex flex-col gap-4">{children}</div>}
     </>
   );
 }
diff --git a/src/components/formElements/Inputs.jsx b/src/components/formElements/Inputs.jsx
index cb851fd3..220a2967 100644
--- a/src/components/formElements/Inputs.jsx
+++ b/src/components/formElements/Inputs.jsx
@@ -22,7 +22,7 @@ export const Input = forwardRef(
     ref,
   ) => {
     const classes = clsx(
-      'border border-slate-400 bg-white py-2 px-3 text-slate-800 placeholder:text-slate-400 shadow-sm transition-all duration-200 ease-in-out focus:border-sky-500 focus:outline-none focus:ring focus:ring-sky-600 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm',
+      'border border-slate-400 bg-white px-3 py-2 text-slate-800 shadow-sm transition-all duration-200 ease-in-out placeholder:text-slate-400 focus:border-sky-500 focus:outline-none focus:ring focus:ring-sky-600 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm',
       {
         'rounded-md': !left,
         'rounded-l-md': left,
@@ -90,10 +90,7 @@ Input.propTypes = {
   /**
    * Custom css class names to append to the defaults
    */
-  className: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.arrayOf(PropTypes.string),
-  ]),
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
   touched: PropTypes.bool,
   step: PropTypes.string,
   min: PropTypes.string,
diff --git a/src/components/formElements/LimitedTextarea.jsx b/src/components/formElements/LimitedTextarea.jsx
index 20bdd2d5..902631c3 100644
--- a/src/components/formElements/LimitedTextarea.jsx
+++ b/src/components/formElements/LimitedTextarea.jsx
@@ -1,6 +1,6 @@
+import { ErrorMessage } from '@hookform/error-message';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
-import { ErrorMessage } from '@hookform/error-message';
 import ErrorMessageTag from '../pageElements/ErrorMessage.jsx';
 
 export const LimitedTextarea = ({
@@ -95,8 +95,7 @@ export const CharactersRemaining = ({ remaining, limit }) => {
       className={clsx('absolute bottom-0 right-3', {
         'text-xs text-slate-500': percentage >= 0 && percentage < 0.8,
         'text-xs text-amber-600': percentage >= 0.8 && percentage < 0.9,
-        'border border-red-600 bg-white p-2 text-lg font-black text-red-600':
-          percentage >= 0.9,
+        'border border-red-600 bg-white p-2 text-lg font-black text-red-600': percentage >= 0.9,
       })}
     >
       {remaining} characters left
diff --git a/src/components/formElements/Note.jsx b/src/components/formElements/Note.jsx
index ba4560bd..6eb9e5c2 100644
--- a/src/components/formElements/Note.jsx
+++ b/src/components/formElements/Note.jsx
@@ -1,11 +1,7 @@
 import PropTypes from 'prop-types';
 
 export default function Note({ children }) {
-  return (
-    <p className="border bg-slate-50 p-3 text-justify text-xs leading-tight">
-      {children}
-    </p>
-  );
+  return <p className="border bg-slate-50 p-3 text-justify text-xs leading-tight">{children}</p>;
 }
 Note.propTypes = {
   children: PropTypes.node.isRequired,
diff --git a/src/components/formElements/Select.jsx b/src/components/formElements/Select.jsx
index af399ebf..87372c82 100644
--- a/src/components/formElements/Select.jsx
+++ b/src/components/formElements/Select.jsx
@@ -1,15 +1,8 @@
-import { forwardRef, Fragment } from 'react';
-import PropTypes from 'prop-types';
-import {
-  Listbox,
-  ListboxButton,
-  Label,
-  ListboxOption,
-  ListboxOptions,
-  Transition,
-} from '@headlessui/react';
+import { Label, Listbox, ListboxButton, ListboxOption, ListboxOptions, Transition } from '@headlessui/react';
 import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/20/solid';
 import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import { forwardRef, Fragment } from 'react';
 
 const getDefaultValue = (value, placeholder, options) => {
   if ((value?.length ?? 0) < 1) {
@@ -21,9 +14,7 @@ const getDefaultValue = (value, placeholder, options) => {
   }
 
   if (Object.keys(options[0]).includes('value')) {
-    const label = options.find(
-      (option) => option.value === (value?.value ?? value),
-    )?.label;
+    const label = options.find((option) => option.value === (value?.value ?? value))?.label;
 
     if (!label) {
       return placeholder;
@@ -41,106 +32,85 @@ const getDefaultValue = (value, placeholder, options) => {
   return option;
 };
 
-export const Select = forwardRef(
-  (
-    { disabled, label, name, required, options, value, onChange, placeholder },
-    ref,
-  ) => {
-    return (
-      <Listbox
-        value={value}
-        name={name}
-        disabled={disabled}
-        className={clsx('transform-opacity', {
-          'opacity-25': disabled,
-        })}
-        as="div"
-        onChange={(newValue) => {
-          if (onChange) {
-            onChange(newValue?.value ?? newValue);
-          }
-        }}
-      >
-        {label !== false && (
-          <Label className="font-semibold">
-            {label ?? name}
-            {required && (
-              <span className="not-sr-only ml-0.5 text-rose-300">*</span>
-            )}
-          </Label>
-        )}
-        <div className="relative mt-1">
-          <ListboxButton
-            ref={ref}
-            aria-required={required}
-            className="relative w-full cursor-default rounded-lg border border-slate-400 bg-white py-2 pl-3 pr-10 text-left focus:outline-none focus-visible:border-sky-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm"
-          >
-            <span className="block h-5 truncate text-slate-600">
-              {getDefaultValue(value, placeholder, options)}
-            </span>
-            <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-              <ChevronUpDownIcon
-                className="h-5 w-5 text-slate-400"
-                aria-hidden="true"
-              />
-            </span>
-          </ListboxButton>
-          <Transition
-            as={Fragment}
-            leave="transition ease-in duration-100"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <ListboxOptions className="absolute z-50 mt-1 max-h-32 min-h-full w-full overflow-auto rounded-md border border-slate-400 bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
-              {(options?.length ?? 0) > 0 ? (
-                options?.map((option, id) => (
-                  <ListboxOption
-                    key={id}
-                    className={({ focus }) =>
-                      clsx(
-                        'relative cursor-default select-none py-2 pl-10 pr-4',
-                        {
-                          'bg-sky-100 text-sky-900': focus,
-                          'text-sky-900': !focus && !option?.disabled,
-                          'cursor-not-allowed text-slate-400':
-                            option?.disabled ?? false,
-                        },
-                      )
-                    }
-                    value={option}
-                    disabled={option?.disabled ?? false}
-                  >
-                    {({ selected }) => (
-                      <>
-                        <span
-                          className={clsx('block truncate', {
-                            'font-bold': selected,
-                            'font-normal': !selected,
-                          })}
-                        >
-                          {option?.label ?? option}
+export const Select = forwardRef(({ disabled, label, name, required, options, value, onChange, placeholder }, ref) => {
+  return (
+    <Listbox
+      value={value}
+      name={name}
+      disabled={disabled}
+      className={clsx('transform-opacity', {
+        'opacity-25': disabled,
+      })}
+      as="div"
+      onChange={(newValue) => {
+        if (onChange) {
+          onChange(newValue?.value ?? newValue);
+        }
+      }}
+    >
+      {label !== false && (
+        <Label className="font-semibold">
+          {label ?? name}
+          {required && <span className="not-sr-only ml-0.5 text-rose-300">*</span>}
+        </Label>
+      )}
+      <div className="relative mt-1">
+        <ListboxButton
+          ref={ref}
+          aria-required={required}
+          className="relative w-full cursor-default rounded-lg border border-slate-400 bg-white py-2 pl-3 pr-10 text-left focus:outline-none focus-visible:border-sky-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm"
+        >
+          <span className="block h-5 truncate text-slate-600">{getDefaultValue(value, placeholder, options)}</span>
+          <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+            <ChevronUpDownIcon className="h-5 w-5 text-slate-400" aria-hidden="true" />
+          </span>
+        </ListboxButton>
+        <Transition as={Fragment} leave="transition ease-in duration-100" leaveFrom="opacity-100" leaveTo="opacity-0">
+          <ListboxOptions className="absolute z-50 mt-1 max-h-32 min-h-full w-full overflow-auto rounded-md border border-slate-400 bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+            {(options?.length ?? 0) > 0 ? (
+              options?.map((option, id) => (
+                <ListboxOption
+                  key={id}
+                  className={({ focus }) =>
+                    clsx('relative cursor-default select-none py-2 pl-10 pr-4', {
+                      'bg-sky-100 text-sky-900': focus,
+                      'text-sky-900': !focus && !option?.disabled,
+                      'cursor-not-allowed text-slate-400': option?.disabled ?? false,
+                    })
+                  }
+                  value={option}
+                  disabled={option?.disabled ?? false}
+                >
+                  {({ selected }) => (
+                    <>
+                      <span
+                        className={clsx('block truncate', {
+                          'font-bold': selected,
+                          'font-normal': !selected,
+                        })}
+                      >
+                        {option?.label ?? option}
+                      </span>
+                      {selected ? (
+                        <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-sky-600">
+                          <CheckIcon className="h-5 w-5" aria-hidden="true" />
                         </span>
-                        {selected ? (
-                          <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-sky-600">
-                            <CheckIcon className="h-5 w-5" aria-hidden="true" />
-                          </span>
-                        ) : null}
-                      </>
-                    )}
-                  </ListboxOption>
-                ))
-              ) : (
-                <div className="relative cursor-default select-none py-2 pl-10 text-center text-slate-500">
-                  This list is empty 😶
-                </div>
-              )}
-            </ListboxOptions>
-          </Transition>
-        </div>
-      </Listbox>
-    );
-  },
-);
+                      ) : null}
+                    </>
+                  )}
+                </ListboxOption>
+              ))
+            ) : (
+              <div className="relative cursor-default select-none py-2 pl-10 text-center text-slate-500">
+                This list is empty 😶
+              </div>
+            )}
+          </ListboxOptions>
+        </Transition>
+      </div>
+    </Listbox>
+  );
+});
 Select.displayName = 'Select';
 Select.propTypes = {
   /**
@@ -167,14 +137,8 @@ Select.propTypes = {
    * The options to place inside the select
    */
   options: PropTypes.arrayOf(
-    PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.shape({ label: PropTypes.string, value: PropTypes.string }),
-    ]),
+    PropTypes.oneOfType([PropTypes.string, PropTypes.shape({ label: PropTypes.string, value: PropTypes.string })]),
   ),
-  value: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.shape({ label: PropTypes.string, value: PropTypes.string }),
-  ]),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({ label: PropTypes.string, value: PropTypes.string })]),
   onChange: PropTypes.func,
 };
diff --git a/src/components/formElements/Select.stories.jsx b/src/components/formElements/Select.stories.jsx
index 33ee4207..52ce80f6 100644
--- a/src/components/formElements/Select.stories.jsx
+++ b/src/components/formElements/Select.stories.jsx
@@ -96,10 +96,7 @@ export const ResetInForm = () => {
           />
         )}
       />
-      <button
-        className="border bg-amber-200 p-2"
-        onClick={() => reset(defaultValues)}
-      >
+      <button className="border bg-amber-200 p-2" onClick={() => reset(defaultValues)}>
         Reset
       </button>
     </>
diff --git a/src/components/formElements/Switch.jsx b/src/components/formElements/Switch.jsx
index e136b60c..414e80c5 100644
--- a/src/components/formElements/Switch.jsx
+++ b/src/components/formElements/Switch.jsx
@@ -1,19 +1,11 @@
-import { forwardRef } from 'react';
-import PropTypes from 'prop-types';
 import { Switch } from '@headlessui/react';
 import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import { forwardRef } from 'react';
 
 const Toggle = forwardRef(
   (
-    {
-      name,
-      value = false,
-      onChange,
-      screenReader = 'Toggle',
-      hideLabel = false,
-      yesValue = 'Yes',
-      noValue = 'No',
-    },
+    { name, value = false, onChange, screenReader = 'Toggle', hideLabel = false, yesValue = 'Yes', noValue = 'No' },
     ref,
   ) => {
     return (
@@ -33,17 +25,14 @@ const Toggle = forwardRef(
             className={clsx(
               {
                 'translate-x-8 border-sky-800 from-sky-300 to-sky-800': value,
-                'translate-x-0 border-slate-500 from-white to-slate-300':
-                  !value,
+                'translate-x-0 border-slate-500 from-white to-slate-300': !value,
               },
               'pointer-events-none inline-block h-6 w-6 transform rounded-full border-2 bg-gradient-to-br shadow-lg ring-0 transition duration-200 ease-in-out',
             )}
           />
         </Switch>
         {!hideLabel && (
-          <span className="mt-1 self-center pl-2 text-sm text-slate-500">
-            {value ? yesValue : noValue}
-          </span>
+          <span className="mt-1 self-center pl-2 text-sm text-slate-500">{value ? yesValue : noValue}</span>
         )}
       </div>
     );
diff --git a/src/components/hooks/usePageView.jsx b/src/components/hooks/usePageView.jsx
index 29b1e07f..e0b15dee 100644
--- a/src/components/hooks/usePageView.jsx
+++ b/src/components/hooks/usePageView.jsx
@@ -1,6 +1,6 @@
-import { useAnalytics } from 'reactfire';
 import { logEvent } from 'firebase/analytics';
 import { useEffect } from 'react';
+import { useAnalytics } from 'reactfire';
 
 export default function usePageView(page, data) {
   const analytics = useAnalytics();
diff --git a/src/components/layoutElements/Drawer.jsx b/src/components/layoutElements/Drawer.jsx
index 61b4e133..e9678456 100644
--- a/src/components/layoutElements/Drawer.jsx
+++ b/src/components/layoutElements/Drawer.jsx
@@ -14,9 +14,7 @@ const SubmissionProvider = lazy(() =>
     default: module.SubmissionProvider,
   })),
 );
-const CornerSubmission = lazy(
-  () => import('../pageElements/CornerSubmission/CornerSubmission.jsx'),
-);
+const CornerSubmission = lazy(() => import('../pageElements/CornerSubmission/CornerSubmission.jsx'));
 const MyContent = lazy(() => import('../pageElements/MyContent.jsx'));
 const AddPoint = lazy(() => import('../pageElements/AddPoint.jsx'));
 const Identify = lazy(() => import('../pageElements/Identify.jsx'));
@@ -25,15 +23,7 @@ const Profile = lazy(() => import('../pageElements/Profile.jsx'));
 const Welcome = lazy(() => import('../pageElements/Welcome.jsx'));
 const Legend = lazy(() => import('../pageElements/Legend.jsx'));
 
-export default function Drawer({
-  dispatch,
-  authenticated,
-  map,
-  addPoint,
-  activeComponent,
-  drawerOpen,
-  submission,
-}) {
+export default function Drawer({ dispatch, authenticated, map, addPoint, activeComponent, drawerOpen, submission }) {
   const { data: signInCheckResult } = useSigninCheck();
   const scrollContainer = useRef();
 
@@ -76,11 +66,7 @@ export default function Drawer({
       }
       case 'points': {
         return signInCheckResult?.signedIn ? (
-          <AddPoint
-            {...addPoint}
-            active={map.activeTool === 'add-point'}
-            dispatch={dispatch}
-          />
+          <AddPoint {...addPoint} active={map.activeTool === 'add-point'} dispatch={dispatch} />
         ) : (
           <Login dispatch={dispatch} authenticated={authenticated} />
         );
@@ -99,13 +85,7 @@ export default function Drawer({
         return <Legend />;
       }
       case 'identify': {
-        return (
-          <Identify
-            authenticated={signInCheckResult.signedIn}
-            graphic={map.graphic}
-            dispatch={dispatch}
-          />
-        );
+        return <Identify authenticated={signInCheckResult.signedIn} graphic={map.graphic} dispatch={dispatch} />;
       }
       case 'submission': {
         return (
@@ -121,16 +101,14 @@ export default function Drawer({
     <aside ref={scrollContainer} className={classes}>
       <Logo version={version} t />
       <XCircleIcon
-        className="absolute top-6 right-4 h-8 w-8 cursor-pointer text-sky-800 hover:text-sky-400"
+        className="absolute right-4 top-6 h-8 w-8 cursor-pointer text-sky-800 hover:text-sky-400"
         onClick={() => dispatch({ type: 'menu/toggle', payload: '' })}
       />
       <ErrorBoundary
         FallbackComponent={DefaultFallback}
         onReset={() => dispatch({ type: 'menu/toggle', payload: 'welcome' })}
       >
-        <Suspense fallback={<div>loading...</div>}>
-          {getComponent(activeComponent)}
-        </Suspense>
+        <Suspense fallback={<div>loading...</div>}>{getComponent(activeComponent)}</Suspense>
       </ErrorBoundary>
     </aside>
   );
diff --git a/src/components/layoutElements/Menu.jsx b/src/components/layoutElements/Menu.jsx
index 73aca83f..c2d2f703 100644
--- a/src/components/layoutElements/Menu.jsx
+++ b/src/components/layoutElements/Menu.jsx
@@ -1,29 +1,13 @@
-import PropTypes from 'prop-types';
+import { FolderIcon, HomeModernIcon, PlusCircleIcon, SwatchIcon, UserCircleIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
-import {
-  FolderIcon,
-  PlusCircleIcon,
-  UserCircleIcon,
-  SwatchIcon,
-  HomeModernIcon,
-} from '@heroicons/react/24/outline';
+import PropTypes from 'prop-types';
 import { useUser } from 'reactfire';
 
 export default function Menu({ dispatch, drawerOpen }) {
   const { data: user } = useUser();
 
   const classes = clsx(
-    [
-      'menu',
-      'z-20',
-      'flex',
-      'py-4',
-      'bg-slate-800/95',
-      'shadow',
-      'menu',
-      'md:justify-between',
-      'justify-evenly',
-    ],
+    ['menu', 'z-20', 'flex', 'py-4', 'bg-slate-800/95', 'shadow', 'menu', 'md:justify-between', 'justify-evenly'],
     {
       'menu--open': drawerOpen,
     },
@@ -31,40 +15,23 @@ export default function Menu({ dispatch, drawerOpen }) {
 
   return (
     <nav className={classes}>
-      <MenuItem
-        Icon={HomeModernIcon}
-        onClick={() => dispatch({ type: 'menu/toggle', payload: 'welcome' })}
-      >
+      <MenuItem Icon={HomeModernIcon} onClick={() => dispatch({ type: 'menu/toggle', payload: 'welcome' })}>
         Home
       </MenuItem>
-      <MenuItem
-        Icon={SwatchIcon}
-        onClick={() => dispatch({ type: 'menu/toggle', payload: 'legend' })}
-      >
+      <MenuItem Icon={SwatchIcon} onClick={() => dispatch({ type: 'menu/toggle', payload: 'legend' })}>
         Map Legend
       </MenuItem>
       {user !== null && (
         <>
-          <MenuItem
-            Icon={PlusCircleIcon}
-            onClick={() => dispatch({ type: 'menu/toggle', payload: 'points' })}
-          >
+          <MenuItem Icon={PlusCircleIcon} onClick={() => dispatch({ type: 'menu/toggle', payload: 'points' })}>
             Add Reference Point
           </MenuItem>
-          <MenuItem
-            Icon={FolderIcon}
-            onClick={() =>
-              dispatch({ type: 'menu/toggle', payload: 'content' })
-            }
-          >
+          <MenuItem Icon={FolderIcon} onClick={() => dispatch({ type: 'menu/toggle', payload: 'content' })}>
             My Content
           </MenuItem>
         </>
       )}
-      <MenuItem
-        Icon={UserCircleIcon}
-        onClick={() => dispatch({ type: 'menu/toggle', payload: 'login' })}
-      >
+      <MenuItem Icon={UserCircleIcon} onClick={() => dispatch({ type: 'menu/toggle', payload: 'login' })}>
         {user !== null ? 'Profile' : 'Login/Register'}
       </MenuItem>
     </nav>
diff --git a/src/components/machines/geolocation.js b/src/components/machines/geolocation.js
index 94e5f011..bb60b7fb 100644
--- a/src/components/machines/geolocation.js
+++ b/src/components/machines/geolocation.js
@@ -1,5 +1,5 @@
-import { assign, fromCallback, setup } from 'xstate';
 import Graphic from '@arcgis/core/Graphic';
+import { assign, fromCallback, setup } from 'xstate';
 
 const updatePosition = assign({
   position: ({ event }) => {
diff --git a/src/components/machines/index.js b/src/components/machines/index.js
index dcdf0316..70337651 100644
--- a/src/components/machines/index.js
+++ b/src/components/machines/index.js
@@ -1,8 +1,8 @@
 // @ts-check
 
-import { assign, fromPromise, setup } from 'xstate';
-import ky from 'ky';
 import DmsCoordinates, { parseDms } from 'dms-conversion';
+import ky from 'ky';
+import { assign, fromPromise, setup } from 'xstate';
 import {
   countiesInZone,
   createProjectFormData,
@@ -47,18 +47,14 @@ const project = (grid) => {
   return ky
     .post('project', {
       body: formData,
-      prefixUrl:
-        'https://mapserv.utah.gov/arcgis/rest/services/Geometry/GeometryServer',
+      prefixUrl: 'https://mapserv.utah.gov/arcgis/rest/services/Geometry/GeometryServer',
     })
     .json();
 };
 
 const coordinateToDecimalDegrees = (geographic) => {
   return new Promise((resolve) => {
-    const dms = [
-      `${formatDegrees(geographic.northing)} N`,
-      `${formatDegrees(geographic.easting)} W`,
-    ];
+    const dms = [`${formatDegrees(geographic.northing)} N`, `${formatDegrees(geographic.easting)} W`];
 
     const [y, x] = dms.map(parseDms);
 
@@ -104,8 +100,7 @@ const projectToStatePlane = (coordinates) => {
   return ky
     .post('project', {
       body: formData,
-      prefixUrl:
-        'https://mapserv.utah.gov/arcgis/rest/services/Geometry/GeometryServer',
+      prefixUrl: 'https://mapserv.utah.gov/arcgis/rest/services/Geometry/GeometryServer',
     })
     .json();
 };
@@ -132,14 +127,11 @@ export const submissionMachine = setup({
     'is new submission': ({ context }) => context.type === 'new',
     'is existing submission': ({ context }) => context.type === 'existing',
     'is grid datum': ({ context }) => context.datum.split('-')[0] === 'grid',
-    'is geographic datum': ({ context }) =>
-      context.datum.split('-')[0] === 'geographic',
+    'is geographic datum': ({ context }) => context.datum.split('-')[0] === 'geographic',
   },
   actors: {
     project: fromPromise(({ input }) => project(input)),
-    coordinateToDecimalDegrees: fromPromise(({ input }) =>
-      coordinateToDecimalDegrees(input),
-    ),
+    coordinateToDecimalDegrees: fromPromise(({ input }) => coordinateToDecimalDegrees(input)),
     queryForCounty: fromPromise(({ input }) => queryForCounty(input)),
     projectToStatePlane: fromPromise(({ input }) =>
       projectToStatePlane({
@@ -471,10 +463,7 @@ export const submissionMachine = setup({
                       return '';
                     }
 
-                    const county =
-                      event.output.features[0].attributes[
-                        'NAME'
-                      ]?.toLowerCase();
+                    const county = event.output.features[0].attributes['NAME']?.toLowerCase();
 
                     let zone;
 
@@ -534,10 +523,7 @@ export const submissionMachine = setup({
             src: fromPromise(
               ({ input: { decimalDegrees } }) =>
                 new Promise((resolve) => {
-                  const dmsCoords = new DmsCoordinates(
-                    decimalDegrees.y,
-                    decimalDegrees.x,
-                  );
+                  const dmsCoords = new DmsCoordinates(decimalDegrees.y, decimalDegrees.x);
 
                   resolve(dmsCoords.dmsArrays);
                 }),
diff --git a/src/components/machines/index.test.js b/src/components/machines/index.test.js
index 3d44e482..ce41e2a7 100644
--- a/src/components/machines/index.test.js
+++ b/src/components/machines/index.test.js
@@ -15,9 +15,7 @@ describe('updateContext', () => {
   });
 
   test('it can update an existing property on an existing object', () => {
-    expect(
-      updateContext({ property: 'value' }, 'property', 'new value'),
-    ).toEqual({
+    expect(updateContext({ property: 'value' }, 'property', 'new value')).toEqual({
       property: 'new value',
     });
   });
@@ -30,11 +28,9 @@ describe('updateContext', () => {
 
   test('it can merge a property within an object', () => {
     expect(
-      updateContext(
-        { geography: { northing: { degrees: 1, minutes: 1, seconds: 1 } } },
-        'geography',
-        { elevation: 100 },
-      ),
+      updateContext({ geography: { northing: { degrees: 1, minutes: 1, seconds: 1 } } }, 'geography', {
+        elevation: 100,
+      }),
     ).toEqual({
       geography: {
         northing: {
diff --git a/src/components/pageElements/AddPoint.jsx b/src/components/pageElements/AddPoint.jsx
index 778ca430..c681f60a 100644
--- a/src/components/pageElements/AddPoint.jsx
+++ b/src/components/pageElements/AddPoint.jsx
@@ -1,26 +1,26 @@
-import { Fragment, useEffect, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
+import { QuestionMarkCircleIcon } from '@heroicons/react/24/outline';
+import { ErrorMessage } from '@hookform/error-message';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { contrastColor } from 'contrast-color';
+import { httpsCallable } from 'firebase/functions';
+import PropTypes from 'prop-types';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import { CirclePicker } from 'react-color';
 import { Controller, useForm, useWatch } from 'react-hook-form';
-import { useUser, useFunctions } from 'reactfire';
-import { httpsCallable } from 'firebase/functions';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { LimitedTextarea } from '../formElements/LimitedTextarea.jsx';
-import { Input } from '../formElements/Inputs.jsx';
-import { Switch } from '../formElements/Switch.jsx';
-import Spacer from '../formElements/Spacer.jsx';
-import { NumberedForm, NumberedFormSection } from '../formElements/Form.jsx';
-import Card from '../formElements/Card.jsx';
+import { useFunctions, useUser } from 'reactfire';
 import { addPointSchema as schema } from '../../../functions/shared/cornerSubmission/Schema.js';
-import { yupResolver } from '@hookform/resolvers/yup';
-import { ErrorMessage } from '@hookform/error-message';
-import ErrorMessageTag from './ErrorMessage.jsx';
-import Wizard from './CornerSubmission/Wizard.jsx';
-import { QuestionMarkCircleIcon } from '@heroicons/react/24/outline';
-import FileUpload from '../formElements/FileUpload.jsx';
 import { Button } from '../formElements/Buttons.jsx';
+import Card from '../formElements/Card.jsx';
+import FileUpload from '../formElements/FileUpload.jsx';
+import { NumberedForm, NumberedFormSection } from '../formElements/Form.jsx';
+import { Input } from '../formElements/Inputs.jsx';
+import { LimitedTextarea } from '../formElements/LimitedTextarea.jsx';
+import Spacer from '../formElements/Spacer.jsx';
+import { Switch } from '../formElements/Switch.jsx';
 import usePageView from '../hooks/usePageView.jsx';
+import Wizard from './CornerSubmission/Wizard.jsx';
+import ErrorMessageTag from './ErrorMessage.jsx';
 
 const numberFormatter = new Intl.NumberFormat('en-US');
 const dateFormatter = new Intl.DateTimeFormat('en-US', {
@@ -29,13 +29,7 @@ const dateFormatter = new Intl.DateTimeFormat('en-US', {
 });
 const limit = 3;
 
-export default function AddPoint({
-  active,
-  color,
-  geometry,
-  dispatch,
-  notes = '',
-}) {
+export default function AddPoint({ active, color, geometry, dispatch, notes = '' }) {
   const functions = useFunctions();
   const addPoint = httpsCallable(functions, 'postPoint');
   const { data: user } = useUser();
@@ -54,11 +48,10 @@ export default function AddPoint({
     [`photo-3-${uniqueId.current}`]: '',
   };
 
-  const { control, formState, handleSubmit, register, reset, setValue, watch } =
-    useForm({
-      resolver: yupResolver(schema),
-      defaultValues,
-    });
+  const { control, formState, handleSubmit, register, reset, setValue, watch } = useForm({
+    resolver: yupResolver(schema),
+    defaultValues,
+  });
 
   const fields = useWatch({ control });
 
@@ -67,11 +60,7 @@ export default function AddPoint({
 
   useEffect(() => {
     if (geometry?.x && geometry?.y) {
-      setValue(
-        'location',
-        { x: geometry.x, y: geometry.y },
-        { shouldValidate: true },
-      );
+      setValue('location', { x: geometry.x, y: geometry.y }, { shouldValidate: true });
     }
   }, [geometry, setValue]);
 
@@ -140,25 +129,15 @@ export default function AddPoint({
         Add Reference Point
       </h2>
       <p className="text-sm leading-tight">
-        Use reference points to help you remember points of interest or other
-        identifying features when out in the field collecting information.
+        Use reference points to help you remember points of interest or other identifying features when out in the field
+        collecting information.
       </p>
       <Spacer className="my-4" />
       <NumberedForm onSubmit={handleSubmit(onSubmit)}>
         <NumberedFormSection number={1} title="Name the point">
           <div>
-            <Input
-              label="Name"
-              placeholder="Point Name"
-              type="text"
-              required={true}
-              {...register('name')}
-            />
-            <ErrorMessage
-              errors={formState.errors}
-              name="name"
-              as={ErrorMessageTag}
-            />
+            <Input label="Name" placeholder="Point Name" type="text" required={true} {...register('name')} />
+            <ErrorMessage errors={formState.errors} name="name" as={ErrorMessageTag} />
           </div>
         </NumberedFormSection>
         <NumberedFormSection number={2} title="Add notes">
@@ -177,11 +156,7 @@ export default function AddPoint({
               />
             )}
           />
-          <ErrorMessage
-            errors={formState.errors}
-            name="notes"
-            as={ErrorMessageTag}
-          />
+          <ErrorMessage errors={formState.errors} name="notes" as={ErrorMessageTag} />
         </NumberedFormSection>
         <NumberedFormSection number={3} title="Add photos">
           {new Array(imageCount).fill().map((_, i) => (
@@ -250,9 +225,7 @@ export default function AddPoint({
                 <>
                   <div className="flex items-center text-slate-500">
                     <span className="h-px flex-1 bg-slate-200"></span>
-                    <span className="mx-3 text-xs uppercase tracking-wide">
-                      selected color
-                    </span>
+                    <span className="mx-3 text-xs uppercase tracking-wide">selected color</span>
                     <span className="h-px flex-1 bg-slate-200"></span>
                   </div>
                   <div className="w-min justify-self-center rounded border border-slate-400 bg-gradient-to-br from-slate-600 via-slate-300 to-slate-50 p-2 shadow-lg">
@@ -262,12 +235,8 @@ export default function AddPoint({
                     >
                       {geometry?.x && (
                         <>
-                          <div className="block text-xs">
-                            {numberFormatter.format(geometry?.x || 0)}
-                          </div>
-                          <div className="block text-xs">
-                            {numberFormatter.format(geometry?.y || 0)}
-                          </div>
+                          <div className="block text-xs">{numberFormatter.format(geometry?.x || 0)}</div>
+                          <div className="block text-xs">{numberFormatter.format(geometry?.y || 0)}</div>
                         </>
                       )}
                     </div>
@@ -275,11 +244,7 @@ export default function AddPoint({
                 </>
               )}
             </Card>
-            <ErrorMessage
-              errors={formState.errors}
-              name="color"
-              as={ErrorMessageTag}
-            />
+            <ErrorMessage errors={formState.errors} name="color" as={ErrorMessageTag} />
           </div>
         </NumberedFormSection>
         <NumberedFormSection number={5} title="Place the point">
@@ -301,20 +266,11 @@ export default function AddPoint({
                 </p>
               </div>
             </Card>
-            <ErrorMessage
-              errors={formState.errors}
-              name="location"
-              as={ErrorMessageTag}
-            />
+            <ErrorMessage errors={formState.errors} name="location" as={ErrorMessageTag} />
           </div>
         </NumberedFormSection>
         <NumberedFormSection number={0}>
-          <Wizard
-            finish={() => mutate}
-            clear={onReset}
-            status={status}
-            back={false}
-          />
+          <Wizard finish={() => mutate} clear={onReset} status={status} back={false} />
         </NumberedFormSection>
       </NumberedForm>
     </>
diff --git a/src/components/pageElements/AddPoint.stories.jsx b/src/components/pageElements/AddPoint.stories.jsx
index ae9eb177..e28c14e1 100644
--- a/src/components/pageElements/AddPoint.stories.jsx
+++ b/src/components/pageElements/AddPoint.stories.jsx
@@ -3,12 +3,7 @@ import { initializeApp } from 'firebase/app';
 import { getAuth } from 'firebase/auth';
 import { getFunctions } from 'firebase/functions';
 import { getStorage } from 'firebase/storage';
-import {
-  AuthProvider,
-  FirebaseAppProvider,
-  FunctionsProvider,
-  StorageProvider,
-} from 'reactfire';
+import { AuthProvider, FirebaseAppProvider, FunctionsProvider, StorageProvider } from 'reactfire';
 import { useImmerReducer } from 'use-immer';
 import reduce, { defaults } from '../reducers/AppReducer';
 import './../../index.css';
diff --git a/src/components/pageElements/CornerSubmission/0-CornerSubmission.stories.jsx b/src/components/pageElements/CornerSubmission/0-CornerSubmission.stories.jsx
index 58ba0d6f..b8da037f 100644
--- a/src/components/pageElements/CornerSubmission/0-CornerSubmission.stories.jsx
+++ b/src/components/pageElements/CornerSubmission/0-CornerSubmission.stories.jsx
@@ -1,18 +1,12 @@
-import CornerSubmission from './CornerSubmission.jsx';
-import { SubmissionProvider } from '../../contexts/SubmissionContext.jsx';
-import { getAnalytics } from 'firebase/analytics';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { getAnalytics } from 'firebase/analytics';
 import { initializeApp } from 'firebase/app';
 import { getAuth } from 'firebase/auth';
 import { getFunctions } from 'firebase/functions';
 import { getStorage } from 'firebase/storage';
-import {
-  AnalyticsProvider,
-  AuthProvider,
-  FirebaseAppProvider,
-  FunctionsProvider,
-  StorageProvider,
-} from 'reactfire';
+import { AnalyticsProvider, AuthProvider, FirebaseAppProvider, FunctionsProvider, StorageProvider } from 'reactfire';
+import { SubmissionProvider } from '../../contexts/SubmissionContext.jsx';
+import CornerSubmission from './CornerSubmission.jsx';
 
 let config = {
   apiKey: '',
@@ -96,10 +90,7 @@ const Template = (args) => {
   };
 
   return (
-    <div
-      className="relative h-screen overflow-y-auto text-white"
-      style={{ width: '450px', maxWidth: '450px' }}
-    >
+    <div className="relative h-screen overflow-y-auto text-white" style={{ width: '450px', maxWidth: '450px' }}>
       <CornerSubmission {...data} />
     </div>
   );
diff --git a/src/components/pageElements/CornerSubmission/1-Metadata.stories.jsx b/src/components/pageElements/CornerSubmission/1-Metadata.stories.jsx
index d221e213..31c0b026 100644
--- a/src/components/pageElements/CornerSubmission/1-Metadata.stories.jsx
+++ b/src/components/pageElements/CornerSubmission/1-Metadata.stories.jsx
@@ -1,16 +1,11 @@
-import Metadata from './Metadata.jsx';
-import { SubmissionProvider } from '../../contexts/SubmissionContext.jsx';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { initializeApp } from 'firebase/app';
 import { getAuth } from 'firebase/auth';
 import { getFunctions } from 'firebase/functions';
 import { getStorage } from 'firebase/storage';
-import {
-  AuthProvider,
-  FirebaseAppProvider,
-  FunctionsProvider,
-  StorageProvider,
-} from 'reactfire';
+import { AuthProvider, FirebaseAppProvider, FunctionsProvider, StorageProvider } from 'reactfire';
+import { SubmissionProvider } from '../../contexts/SubmissionContext.jsx';
+import Metadata from './Metadata.jsx';
 
 let config = {
   apiKey: '',
@@ -42,9 +37,7 @@ export default {
             <AuthProvider sdk={auth}>
               <FunctionsProvider sdk={functions}>
                 <StorageProvider sdk={storage}>
-                  <SubmissionProvider context={{ blmPointId: 1, type: 'new' }}>
-                    {Story()}
-                  </SubmissionProvider>
+                  <SubmissionProvider context={{ blmPointId: 1, type: 'new' }}>{Story()}</SubmissionProvider>
                 </StorageProvider>
               </FunctionsProvider>
             </AuthProvider>
@@ -78,10 +71,7 @@ export default {
 const Template = (args) => {
   const data = { ...args };
   return (
-    <div
-      className="relative h-screen overflow-y-auto text-white"
-      style={{ width: '450px', maxWidth: '450px' }}
-    >
+    <div className="relative h-screen overflow-y-auto text-white" style={{ width: '450px', maxWidth: '450px' }}>
       <Metadata {...data} />
     </div>
   );
diff --git a/src/components/pageElements/CornerSubmission/1b-Existing.stories.jsx b/src/components/pageElements/CornerSubmission/1b-Existing.stories.jsx
index 18590dbd..3ffdb4cd 100644
--- a/src/components/pageElements/CornerSubmission/1b-Existing.stories.jsx
+++ b/src/components/pageElements/CornerSubmission/1b-Existing.stories.jsx
@@ -1,19 +1,15 @@
-import { StorageProvider, FirebaseAppProvider, AuthProvider } from 'reactfire';
-import { getStorage } from 'firebase/storage';
 import { initializeApp } from 'firebase/app';
 import { getAuth } from 'firebase/auth';
-import Pdf from './Pdf.jsx';
+import { getStorage } from 'firebase/storage';
+import { AuthProvider, FirebaseAppProvider, StorageProvider } from 'reactfire';
 import { SubmissionProvider } from '../../contexts/SubmissionContext.jsx';
+import Pdf from './Pdf.jsx';
 
 export default {
   title: 'Corner/Submission/Parts',
   component: Pdf,
   decorators: [
-    (Story) => (
-      <SubmissionProvider context={{ blmPointId: 1, type: 'existing' }}>
-        {Story()}
-      </SubmissionProvider>
-    ),
+    (Story) => <SubmissionProvider context={{ blmPointId: 1, type: 'existing' }}>{Story()}</SubmissionProvider>,
   ],
   parameters: {
     backgrounds: {
@@ -61,10 +57,7 @@ const Template = (args) => {
     <FirebaseAppProvider firebaseApp={app}>
       <StorageProvider sdk={storage}>
         <AuthProvider sdk={auth}>
-          <div
-            className="relative h-screen overflow-y-auto text-white"
-            style={{ width: '450px', maxWidth: '450px' }}
-          >
+          <div className="relative h-screen overflow-y-auto text-white" style={{ width: '450px', maxWidth: '450px' }}>
             <Pdf {...data} />
           </div>
         </AuthProvider>
diff --git a/src/components/pageElements/CornerSubmission/2-Datum.stories.jsx b/src/components/pageElements/CornerSubmission/2-Datum.stories.jsx
index 13c91d06..b37c1fbb 100644
--- a/src/components/pageElements/CornerSubmission/2-Datum.stories.jsx
+++ b/src/components/pageElements/CornerSubmission/2-Datum.stories.jsx
@@ -4,13 +4,7 @@ import CoordinatePicker from './Datum.jsx';
 export default {
   title: 'Corner/Submission/Parts',
   component: CoordinatePicker,
-  decorators: [
-    (Story) => (
-      <SubmissionProvider context={{ blmPointId: 1, type: 'new' }}>
-        {Story()}
-      </SubmissionProvider>
-    ),
-  ],
+  decorators: [(Story) => <SubmissionProvider context={{ blmPointId: 1, type: 'new' }}>{Story()}</SubmissionProvider>],
   parameters: {
     backgrounds: {
       default: 'drawer',
@@ -37,10 +31,7 @@ const Template = (args) => {
   const data = { ...args };
 
   return (
-    <div
-      className="relative h-screen overflow-y-auto text-white"
-      style={{ width: '450px', maxWidth: '450px' }}
-    >
+    <div className="relative h-screen overflow-y-auto text-white" style={{ width: '450px', maxWidth: '450px' }}>
       <CoordinatePicker {...data} />
     </div>
   );
diff --git a/src/components/pageElements/CornerSubmission/3-Grid.stories.jsx b/src/components/pageElements/CornerSubmission/3-Grid.stories.jsx
index eb617448..cda3be1a 100644
--- a/src/components/pageElements/CornerSubmission/3-Grid.stories.jsx
+++ b/src/components/pageElements/CornerSubmission/3-Grid.stories.jsx
@@ -1,16 +1,10 @@
-import GridCoordinates from './GridCoordinates.jsx';
 import { SubmissionProvider } from '../../contexts/SubmissionContext.jsx';
+import GridCoordinates from './GridCoordinates.jsx';
 
 export default {
   title: 'Corner/Submission/Parts',
   component: GridCoordinates,
-  decorators: [
-    (Story) => (
-      <SubmissionProvider context={{ blmPointId: 1, type: 'new' }}>
-        {Story()}
-      </SubmissionProvider>
-    ),
-  ],
+  decorators: [(Story) => <SubmissionProvider context={{ blmPointId: 1, type: 'new' }}>{Story()}</SubmissionProvider>],
   parameters: {
     backgrounds: {
       default: 'drawer',
@@ -37,10 +31,7 @@ const Template = (args) => {
   const data = { ...args };
 
   return (
-    <div
-      className="relative h-screen overflow-y-auto text-white"
-      style={{ width: '450px', maxWidth: '450px' }}
-    >
+    <div className="relative h-screen overflow-y-auto text-white" style={{ width: '450px', maxWidth: '450px' }}>
       <GridCoordinates {...data} />
     </div>
   );
diff --git a/src/components/pageElements/CornerSubmission/3a-Latitude.stories.jsx b/src/components/pageElements/CornerSubmission/3a-Latitude.stories.jsx
index b5e78680..a2799b40 100644
--- a/src/components/pageElements/CornerSubmission/3a-Latitude.stories.jsx
+++ b/src/components/pageElements/CornerSubmission/3a-Latitude.stories.jsx
@@ -1,5 +1,5 @@
-import { Latitude } from './GeographicCoordinates.jsx';
 import { SubmissionProvider } from '../../contexts/SubmissionContext.jsx';
+import { Latitude } from './GeographicCoordinates.jsx';
 
 export default {
   title: 'Corner/Submission/Parts',
@@ -35,12 +35,7 @@ export default {
     },
     xstate: {
       submission: {
-        events: [
-          { type: 'start submission' },
-          { type: 'NEXT' },
-          { type: 'NEXT' },
-          { type: 'NEXT' },
-        ],
+        events: [{ type: 'start submission' }, { type: 'NEXT' }, { type: 'NEXT' }, { type: 'NEXT' }],
       },
       project: {
         events: { type: 'SET_COORDINATES' },
@@ -57,10 +52,7 @@ const Template = (args) => {
   const data = { ...args };
 
   return (
-    <div
-      className="relative h-screen overflow-y-auto text-white"
-      style={{ width: '450px', maxWidth: '450px' }}
-    >
+    <div className="relative h-screen overflow-y-auto text-white" style={{ width: '450px', maxWidth: '450px' }}>
       <Latitude {...data} />
     </div>
   );
diff --git a/src/components/pageElements/CornerSubmission/3b-Longitude.stories.jsx b/src/components/pageElements/CornerSubmission/3b-Longitude.stories.jsx
index 7a2f9dda..3f0d6716 100644
--- a/src/components/pageElements/CornerSubmission/3b-Longitude.stories.jsx
+++ b/src/components/pageElements/CornerSubmission/3b-Longitude.stories.jsx
@@ -1,14 +1,12 @@
-import { Longitude } from './GeographicCoordinates.jsx';
 import { SubmissionProvider } from '../../contexts/SubmissionContext.jsx';
+import { Longitude } from './GeographicCoordinates.jsx';
 
 export default {
   title: 'Corner/Submission/Parts',
   component: Longitude,
   decorators: [
     (Story) => (
-      <SubmissionProvider
-        context={{ blmPointId: 1, type: 'new', datum: 'geographic-nad83' }}
-      >
+      <SubmissionProvider context={{ blmPointId: 1, type: 'new', datum: 'geographic-nad83' }}>
         {Story()}
       </SubmissionProvider>
     ),
@@ -39,10 +37,7 @@ const Template = (args) => {
   const data = { ...args };
 
   return (
-    <div
-      className="relative h-screen overflow-y-auto text-white"
-      style={{ width: '450px', maxWidth: '450px' }}
-    >
+    <div className="relative h-screen overflow-y-auto text-white" style={{ width: '450px', maxWidth: '450px' }}>
       <Longitude {...data} />
     </div>
   );
diff --git a/src/components/pageElements/CornerSubmission/3c-Height.stories.jsx b/src/components/pageElements/CornerSubmission/3c-Height.stories.jsx
index 31fb8096..e3ed537a 100644
--- a/src/components/pageElements/CornerSubmission/3c-Height.stories.jsx
+++ b/src/components/pageElements/CornerSubmission/3c-Height.stories.jsx
@@ -1,18 +1,12 @@
-import { GeographicHeight } from './GeographicCoordinates.jsx';
-import { SubmissionProvider } from '../../contexts/SubmissionContext.jsx';
-import { getAnalytics } from 'firebase/analytics';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { getAnalytics } from 'firebase/analytics';
 import { initializeApp } from 'firebase/app';
 import { getAuth } from 'firebase/auth';
 import { getFunctions } from 'firebase/functions';
 import { getStorage } from 'firebase/storage';
-import {
-  AnalyticsProvider,
-  AuthProvider,
-  FirebaseAppProvider,
-  FunctionsProvider,
-  StorageProvider,
-} from 'reactfire';
+import { AnalyticsProvider, AuthProvider, FirebaseAppProvider, FunctionsProvider, StorageProvider } from 'reactfire';
+import { SubmissionProvider } from '../../contexts/SubmissionContext.jsx';
+import { GeographicHeight } from './GeographicCoordinates.jsx';
 
 let config = {
   apiKey: '',
@@ -90,10 +84,7 @@ const Template = (args) => {
   const data = { ...args };
 
   return (
-    <div
-      className="relative h-screen overflow-y-auto text-white"
-      style={{ width: '450px', maxWidth: '450px' }}
-    >
+    <div className="relative h-screen overflow-y-auto text-white" style={{ width: '450px', maxWidth: '450px' }}>
       <GeographicHeight {...data} />
     </div>
   );
diff --git a/src/components/pageElements/CornerSubmission/4-Images.stories.jsx b/src/components/pageElements/CornerSubmission/4-Images.stories.jsx
index cf30e24d..29bd35e0 100644
--- a/src/components/pageElements/CornerSubmission/4-Images.stories.jsx
+++ b/src/components/pageElements/CornerSubmission/4-Images.stories.jsx
@@ -1,9 +1,9 @@
-import { StorageProvider, FirebaseAppProvider, AuthProvider } from 'reactfire';
-import { getStorage } from 'firebase/storage';
 import { initializeApp } from 'firebase/app';
 import { getAuth } from 'firebase/auth';
-import Images from './Images.jsx';
+import { getStorage } from 'firebase/storage';
+import { AuthProvider, FirebaseAppProvider, StorageProvider } from 'reactfire';
 import { SubmissionProvider } from '../../contexts/SubmissionContext.jsx';
+import Images from './Images.jsx';
 
 export default {
   title: 'Corner/Submission/Parts',
@@ -55,10 +55,7 @@ const Template = (args) => {
     <FirebaseAppProvider firebaseApp={app}>
       <StorageProvider sdk={storage}>
         <AuthProvider sdk={auth}>
-          <div
-            className="relative h-screen overflow-y-auto text-white"
-            style={{ width: '450px', maxWidth: '450px' }}
-          >
+          <div className="relative h-screen overflow-y-auto text-white" style={{ width: '450px', maxWidth: '450px' }}>
             <Images {...data} />
           </div>
         </AuthProvider>
diff --git a/src/components/pageElements/CornerSubmission/CornerSubmission.jsx b/src/components/pageElements/CornerSubmission/CornerSubmission.jsx
index a768ee82..ef5f7414 100644
--- a/src/components/pageElements/CornerSubmission/CornerSubmission.jsx
+++ b/src/components/pageElements/CornerSubmission/CornerSubmission.jsx
@@ -1,13 +1,13 @@
-import { lazy, useContext, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { ErrorBoundary } from 'react-error-boundary';
-import clsx from 'clsx';
 import { MinusCircleIcon, PlusCircleIcon } from '@heroicons/react/24/outline';
 import { useLocalStorage } from '@ugrc/utilities/hooks';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import { lazy, useContext, useEffect, useRef } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
 import { SubmissionContext } from '../../contexts/SubmissionContext.jsx';
 import { Button } from '../../formElements/Buttons.jsx';
-import DefaultFallback from '../ErrorBoundary.jsx';
 import usePageView from '../../hooks/usePageView.jsx';
+import DefaultFallback from '../ErrorBoundary.jsx';
 const SubmissionNotice = lazy(() => import('./SubmissionNotice.jsx'));
 const MonumentPdf = lazy(() => import('./Pdf.jsx'));
 const Metadata = lazy(() => import('./Metadata.jsx'));
@@ -33,11 +33,7 @@ const Longitude = lazy(() =>
 );
 
 export default function CornerSubmission({ submission, dispatch }) {
-  const [hide, setHide] = useLocalStorage(
-    'plssSubmissionNoteVisible',
-    false,
-    true,
-  );
+  const [hide, setHide] = useLocalStorage('plssSubmissionNoteVisible', false, true);
   const scrollContainer = useRef(null);
   const [state, send] = useContext(SubmissionContext);
   const { analytics, logEvent } = usePageView('screen-submission-start');
@@ -89,8 +85,7 @@ export default function CornerSubmission({ submission, dispatch }) {
           <div role="alert" data-area="drawer">
             <h3 className="text-lg font-bold">Something went wrong</h3>
             <p className="m-4 rounded border p-4">
-              No matching component for {JSON.stringify(state.value, null, 2)}{' '}
-              state.
+              No matching component for {JSON.stringify(state.value, null, 2)} state.
             </p>
             <div className="mt-4 flex justify-center">
               <Button onClick={() => send({ type: 'BACK' })}>Back</Button>
diff --git a/src/components/pageElements/CornerSubmission/Datum.jsx b/src/components/pageElements/CornerSubmission/Datum.jsx
index 534af014..675e76f2 100644
--- a/src/components/pageElements/CornerSubmission/Datum.jsx
+++ b/src/components/pageElements/CornerSubmission/Datum.jsx
@@ -1,22 +1,19 @@
-import { useContext, useState, useEffect } from 'react';
-import clsx from 'clsx';
-import { Controller, useForm } from 'react-hook-form';
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react';
 import { ErrorMessage } from '@hookform/error-message';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react';
-import Spacer from '../../formElements/Spacer.jsx';
-import { NumberedForm, NumberedFormSection } from '../../formElements/Form.jsx';
+import clsx from 'clsx';
+import { useContext, useEffect, useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { geographic, grid } from '../../../../functions/shared/cornerSubmission/Options.js';
+import { coordinatePickerSchema } from '../../../../functions/shared/cornerSubmission/Schema.js';
+import { SubmissionContext } from '../../contexts/SubmissionContext.jsx';
 import { Button } from '../../formElements/Buttons.jsx';
+import { NumberedForm, NumberedFormSection } from '../../formElements/Form.jsx';
 import { Select } from '../../formElements/Select.jsx';
+import Spacer from '../../formElements/Spacer.jsx';
+import usePageView from '../../hooks/usePageView.jsx';
 import ErrorMessageTag from '../ErrorMessage.jsx';
-import { SubmissionContext } from '../../contexts/SubmissionContext.jsx';
-import {
-  geographic,
-  grid,
-} from '../../../../functions/shared/cornerSubmission/Options.js';
-import { coordinatePickerSchema } from '../../../../functions/shared/cornerSubmission/Schema.js';
 import Wizard from './Wizard.jsx';
-import usePageView from '../../hooks/usePageView.jsx';
 
 const formats = { Geographic: geographic, Grid: grid };
 
@@ -80,9 +77,7 @@ const CoordinatePicker = () => {
       {state.context.type === 'existing' && (
         <>
           <div className="flex justify-between">
-            <p className="italic">
-              Coordinates are optional for existing monument uploads
-            </p>
+            <p className="italic">Coordinates are optional for existing monument uploads</p>
             <Button style="secondary" onClick={() => send({ type: 'SKIP' })}>
               Skip
             </Button>
@@ -127,22 +122,14 @@ const CoordinatePicker = () => {
                       />
                     )}
                   />
-                  <ErrorMessage
-                    errors={formState.errors}
-                    name="datum"
-                    as={ErrorMessageTag}
-                  />
+                  <ErrorMessage errors={formState.errors} name="datum" as={ErrorMessageTag} />
                 </TabPanel>
               ))}
             </TabPanels>
           </TabGroup>
         </NumberedFormSection>
         <NumberedFormSection number={0}>
-          <Wizard
-            back={() => send({ type: 'BACK' })}
-            next={true}
-            clear={onReset}
-          />
+          <Wizard back={() => send({ type: 'BACK' })} next={true} clear={onReset} />
         </NumberedFormSection>
       </NumberedForm>
     </>
diff --git a/src/components/pageElements/CornerSubmission/GeographicCoordinates.jsx b/src/components/pageElements/CornerSubmission/GeographicCoordinates.jsx
index 1c45c0ae..504753fe 100644
--- a/src/components/pageElements/CornerSubmission/GeographicCoordinates.jsx
+++ b/src/components/pageElements/CornerSubmission/GeographicCoordinates.jsx
@@ -1,23 +1,23 @@
-import { useContext, useEffect, useState } from 'react';
+import { Label, Radio, RadioGroup } from '@headlessui/react';
 import { ErrorMessage } from '@hookform/error-message';
 import { yupResolver } from '@hookform/resolvers/yup';
 import clsx from 'clsx';
+import { useContext, useEffect, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { RadioGroup, Label, Radio } from '@headlessui/react';
-import { Input } from '../../formElements/Inputs.jsx';
-import Spacer from '../../formElements/Spacer.jsx';
-import { NumberedForm, NumberedFormSection } from '../../formElements/Form.jsx';
-import ErrorMessageTag from '../ErrorMessage.jsx';
-import { SubmissionContext } from '../../contexts/SubmissionContext.jsx';
 import { units } from '../../../../functions/shared/cornerSubmission/Options.js';
 import {
+  geographicHeightSchema,
   latitudeSchema,
   longitudeSchema,
-  geographicHeightSchema,
 } from '../../../../functions/shared/cornerSubmission/Schema.js';
-import Wizard from './Wizard.jsx';
 import { formatDatum } from '../../../../functions/shared/index.js';
+import { SubmissionContext } from '../../contexts/SubmissionContext.jsx';
+import { NumberedForm, NumberedFormSection } from '../../formElements/Form.jsx';
+import { Input } from '../../formElements/Inputs.jsx';
+import Spacer from '../../formElements/Spacer.jsx';
 import usePageView from '../../hooks/usePageView.jsx';
+import ErrorMessageTag from '../ErrorMessage.jsx';
+import Wizard from './Wizard.jsx';
 
 const defaults = {
   seconds: '',
@@ -51,10 +51,7 @@ export const Latitude = () => {
   }, []);
 
   useEffect(() => {
-    if (
-      state.matches('form.entering alternate latitude') &&
-      state.matches('projecting.done')
-    ) {
+    if (state.matches('form.entering alternate latitude') && state.matches('projecting.done')) {
       reset({ northing: state.context?.geographic?.northing });
     }
   }, [state, reset]);
@@ -71,12 +68,9 @@ export const Latitude = () => {
   return (
     <>
       <h2 className="text-2xl font-semibold">Location Information</h2>
-      <p className="text-sm leading-none">
-        Geographic Northing for {formatDatum(state.context.datum)}
-      </p>
+      <p className="text-sm leading-none">Geographic Northing for {formatDatum(state.context.datum)}</p>
       <Spacer className="my-4" />
-      {state.matches('form.entering alternate latitude') &&
-      !state.matches('projecting.done') ? (
+      {state.matches('form.entering alternate latitude') && !state.matches('projecting.done') ? (
         <div>Projecting Grid Coordinates...</div>
       ) : (
         <NumberedForm onSubmit={handleSubmit(onSubmit)}>
@@ -91,11 +85,7 @@ export const Latitude = () => {
                 required={true}
                 {...register('northing.degrees')}
               />
-              <ErrorMessage
-                errors={formState.errors}
-                name="northing.degrees"
-                as={ErrorMessageTag}
-              />
+              <ErrorMessage errors={formState.errors} name="northing.degrees" as={ErrorMessageTag} />
             </div>
             <div>
               <Input
@@ -107,11 +97,7 @@ export const Latitude = () => {
                 required={true}
                 {...register('northing.minutes')}
               />
-              <ErrorMessage
-                errors={formState.errors}
-                name="northing.minutes"
-                as={ErrorMessageTag}
-              />
+              <ErrorMessage errors={formState.errors} name="northing.minutes" as={ErrorMessageTag} />
             </div>
             <div>
               <Input
@@ -125,11 +111,7 @@ export const Latitude = () => {
                 {...register('northing.seconds')}
               />
               <p className="text-sm text-slate-300">5 Decimals ##.#####</p>
-              <ErrorMessage
-                errors={formState.errors}
-                name="northing.seconds"
-                as={ErrorMessageTag}
-              />
+              <ErrorMessage errors={formState.errors} name="northing.seconds" as={ErrorMessageTag} />
             </div>
           </NumberedFormSection>
           <NumberedFormSection number={0}>
@@ -178,9 +160,7 @@ export const Longitude = () => {
   return (
     <>
       <h2 className="text-2xl font-semibold">Location Information</h2>
-      <p className="text-sm leading-none">
-        Geographic Easting for {formatDatum(state.context.datum)}
-      </p>
+      <p className="text-sm leading-none">Geographic Easting for {formatDatum(state.context.datum)}</p>
       <Spacer className="my-4" />
       <NumberedForm onSubmit={handleSubmit(onSubmit)}>
         <NumberedFormSection number={3} title="Longitude">
@@ -194,11 +174,7 @@ export const Longitude = () => {
               required={true}
               {...register('easting.degrees')}
             />
-            <ErrorMessage
-              errors={formState.errors}
-              name="easting.degrees"
-              as={ErrorMessageTag}
-            />
+            <ErrorMessage errors={formState.errors} name="easting.degrees" as={ErrorMessageTag} />
           </div>
           <div>
             <Input
@@ -210,11 +186,7 @@ export const Longitude = () => {
               required={true}
               {...register('easting.minutes')}
             />
-            <ErrorMessage
-              errors={formState.errors}
-              name="easting.minutes"
-              as={ErrorMessageTag}
-            />
+            <ErrorMessage errors={formState.errors} name="easting.minutes" as={ErrorMessageTag} />
           </div>
           <div>
             <Input
@@ -228,19 +200,11 @@ export const Longitude = () => {
               {...register('easting.seconds')}
             />
             <p className="text-sm text-slate-300">5 Decimals ##.#####</p>
-            <ErrorMessage
-              errors={formState.errors}
-              name="easting.seconds"
-              as={ErrorMessageTag}
-            />
+            <ErrorMessage errors={formState.errors} name="easting.seconds" as={ErrorMessageTag} />
           </div>
         </NumberedFormSection>
         <NumberedFormSection number={0}>
-          <Wizard
-            back={() => send({ type: 'BACK' })}
-            next={true}
-            clear={onReset}
-          />
+          <Wizard back={() => send({ type: 'BACK' })} next={true} clear={onReset} />
         </NumberedFormSection>
       </NumberedForm>
     </>
@@ -273,11 +237,10 @@ export const GeographicHeight = () => {
 
   const selectedUnit = units.find((x) => x.value === defaultValues.unit);
 
-  const { control, formState, handleSubmit, register, reset, setFocus } =
-    useForm({
-      resolver: yupResolver(geographicHeightSchema),
-      defaultValues,
-    });
+  const { control, formState, handleSubmit, register, reset, setFocus } = useForm({
+    resolver: yupResolver(geographicHeightSchema),
+    defaultValues,
+  });
 
   useEffect(() => {
     setFocus('elevation');
@@ -297,9 +260,7 @@ export const GeographicHeight = () => {
   return (
     <>
       <h2 className="text-2xl font-semibold">Location Information</h2>
-      <p className="text-sm leading-none">
-        Geographic height for {formatDatum(state.context.datum)}
-      </p>
+      <p className="text-sm leading-none">Geographic height for {formatDatum(state.context.datum)}</p>
       <Spacer className="my-4" />
       <NumberedForm onSubmit={handleSubmit(onSubmit)}>
         <NumberedFormSection number={4} title="Ellipsoid Height">
@@ -333,12 +294,7 @@ export const GeographicHeight = () => {
                   >
                     {({ checked }) => (
                       <div className="text-sm">
-                        <Label
-                          as="p"
-                          className={`font-medium ${
-                            checked ? 'text-white' : 'text-sky-700'
-                          }`}
-                        >
+                        <Label as="p" className={`font-medium ${checked ? 'text-white' : 'text-sky-700'}`}>
                           {option.label}
                         </Label>
                       </div>
@@ -348,23 +304,11 @@ export const GeographicHeight = () => {
               </RadioGroup>
             )}
           />
-          <ErrorMessage
-            errors={formState.errors}
-            name="elevation"
-            as={ErrorMessageTag}
-          />
-          <ErrorMessage
-            errors={formState.errors}
-            name="unit"
-            as={ErrorMessageTag}
-          />
+          <ErrorMessage errors={formState.errors} name="elevation" as={ErrorMessageTag} />
+          <ErrorMessage errors={formState.errors} name="unit" as={ErrorMessageTag} />
         </NumberedFormSection>
         <NumberedFormSection number={0}>
-          <Wizard
-            back={() => send({ type: 'BACK' })}
-            next={true}
-            clear={onReset}
-          />
+          <Wizard back={() => send({ type: 'BACK' })} next={true} clear={onReset} />
         </NumberedFormSection>
       </NumberedForm>
     </>
diff --git a/src/components/pageElements/CornerSubmission/GridCoordinates.jsx b/src/components/pageElements/CornerSubmission/GridCoordinates.jsx
index 46d388b0..93991856 100644
--- a/src/components/pageElements/CornerSubmission/GridCoordinates.jsx
+++ b/src/components/pageElements/CornerSubmission/GridCoordinates.jsx
@@ -1,23 +1,19 @@
-import { useContext, useEffect } from 'react';
 import { ErrorMessage } from '@hookform/error-message';
 import { yupResolver } from '@hookform/resolvers/yup';
+import { useContext, useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
+import { statePlaneZones, units, verticalDatums } from '../../../../functions/shared/cornerSubmission/Options.js';
+import { gridCoordinatesSchema } from '../../../../functions/shared/cornerSubmission/Schema.js';
+import { formatDatum } from '../../../../functions/shared/index.js';
+import { SubmissionContext } from '../../contexts/SubmissionContext.jsx';
+import { Button } from '../../formElements/Buttons.jsx';
+import { NumberedForm, NumberedFormSection } from '../../formElements/Form.jsx';
 import { Input } from '../../formElements/Inputs.jsx';
 import { Select } from '../../formElements/Select.jsx';
 import Spacer from '../../formElements/Spacer.jsx';
-import { NumberedForm, NumberedFormSection } from '../../formElements/Form.jsx';
+import usePageView from '../../hooks/usePageView.jsx';
 import ErrorMessageTag from '../../pageElements/ErrorMessage.jsx';
-import { SubmissionContext } from '../../contexts/SubmissionContext.jsx';
-import {
-  units,
-  statePlaneZones,
-  verticalDatums,
-} from '../../../../functions/shared/cornerSubmission/Options.js';
-import { gridCoordinatesSchema } from '../../../../functions/shared/cornerSubmission/Schema.js';
 import Wizard from './Wizard.jsx';
-import { formatDatum } from '../../../../functions/shared/index.js';
-import usePageView from '../../hooks/usePageView.jsx';
-import { Button } from '../../formElements/Buttons.jsx';
 
 const defaults = {
   zone: '',
@@ -38,11 +34,10 @@ const GridCoordinates = () => {
     defaultValues = defaults;
   }
 
-  const { control, formState, handleSubmit, register, reset, setFocus } =
-    useForm({
-      resolver: yupResolver(gridCoordinatesSchema),
-      defaultValues,
-    });
+  const { control, formState, handleSubmit, register, reset, setFocus } = useForm({
+    resolver: yupResolver(gridCoordinatesSchema),
+    defaultValues,
+  });
 
   useEffect(() => {
     setFocus('zone');
@@ -56,10 +51,7 @@ const GridCoordinates = () => {
   }, []);
 
   useEffect(() => {
-    if (
-      state.matches('form.entering alternate grid coordinates') &&
-      state.matches('projecting.done')
-    ) {
+    if (state.matches('form.entering alternate grid coordinates') && state.matches('projecting.done')) {
       reset({ ...state.context?.grid });
     }
   }, [state, reset]);
@@ -76,9 +68,7 @@ const GridCoordinates = () => {
   return (
     <>
       <h2 className="text-2xl font-semibold">Location Information</h2>
-      <p className="text-sm leading-none">
-        Grid coordinates for {formatDatum(state.context.datum)}
-      </p>
+      <p className="text-sm leading-none">Grid coordinates for {formatDatum(state.context.datum)}</p>
       <Spacer className="my-4" />
       {state.matches('projecting.rejected') && (
         <>
@@ -86,8 +76,7 @@ const GridCoordinates = () => {
           <Button onClick={() => send({ type: 'BACK' })}>Try again</Button>
         </>
       )}
-      {state.matches('form.entering alternate grid coordinates') &&
-      !state.matches('projecting.done') ? (
+      {state.matches('form.entering alternate grid coordinates') && !state.matches('projecting.done') ? (
         <div>Projecting Grid Coordinates...</div>
       ) : (
         <NumberedForm onSubmit={handleSubmit(onSubmit)}>
@@ -106,61 +95,27 @@ const GridCoordinates = () => {
                   />
                 )}
               />
-              <ErrorMessage
-                errors={formState.errors}
-                name="zone"
-                as={ErrorMessageTag}
-              />
+              <ErrorMessage errors={formState.errors} name="zone" as={ErrorMessageTag} />
             </div>
             <div>
               <Controller
                 control={control}
                 name="unit"
                 render={({ field }) => (
-                  <Select
-                    label="Units"
-                    placeholder="What are the units"
-                    options={units}
-                    required={true}
-                    {...field}
-                  />
+                  <Select label="Units" placeholder="What are the units" options={units} required={true} {...field} />
                 )}
               />
-              <ErrorMessage
-                errors={formState.errors}
-                name="unit"
-                as={ErrorMessageTag}
-              />
+              <ErrorMessage errors={formState.errors} name="unit" as={ErrorMessageTag} />
             </div>
           </NumberedFormSection>
           <NumberedFormSection number={3} title="Location">
             <div>
-              <Input
-                label="Northing"
-                type="number"
-                step="0.001"
-                required={true}
-                {...register('northing')}
-              />
-              <ErrorMessage
-                errors={formState.errors}
-                name="northing"
-                as={ErrorMessageTag}
-              />
+              <Input label="Northing" type="number" step="0.001" required={true} {...register('northing')} />
+              <ErrorMessage errors={formState.errors} name="northing" as={ErrorMessageTag} />
             </div>
             <div>
-              <Input
-                label="Easting"
-                type="number"
-                step="0.001"
-                required={true}
-                {...register('easting')}
-              />
-              <ErrorMessage
-                errors={formState.errors}
-                name="easting"
-                as={ErrorMessageTag}
-              />
+              <Input label="Easting" type="number" step="0.001" required={true} {...register('easting')} />
+              <ErrorMessage errors={formState.errors} name="easting" as={ErrorMessageTag} />
             </div>
           </NumberedFormSection>
           <NumberedFormSection number={4} title="Elevation">
@@ -178,33 +133,15 @@ const GridCoordinates = () => {
                   />
                 )}
               />
-              <ErrorMessage
-                errors={formState.errors}
-                name="verticalDatum"
-                as={ErrorMessageTag}
-              />
+              <ErrorMessage errors={formState.errors} name="verticalDatum" as={ErrorMessageTag} />
             </div>
             <div>
-              <Input
-                type="number"
-                label="Elevation"
-                step="0.001"
-                required={false}
-                {...register('elevation')}
-              />
-              <ErrorMessage
-                errors={formState.errors}
-                name="elevation"
-                as={ErrorMessageTag}
-              />
+              <Input type="number" label="Elevation" step="0.001" required={false} {...register('elevation')} />
+              <ErrorMessage errors={formState.errors} name="elevation" as={ErrorMessageTag} />
             </div>
           </NumberedFormSection>
           <NumberedFormSection number={0}>
-            <Wizard
-              back={() => send({ type: 'BACK' })}
-              next={true}
-              clear={onReset}
-            />
+            <Wizard back={() => send({ type: 'BACK' })} next={true} clear={onReset} />
           </NumberedFormSection>
         </NumberedForm>
       )}
diff --git a/src/components/pageElements/CornerSubmission/Images.jsx b/src/components/pageElements/CornerSubmission/Images.jsx
index 9a3af208..160a49e1 100644
--- a/src/components/pageElements/CornerSubmission/Images.jsx
+++ b/src/components/pageElements/CornerSubmission/Images.jsx
@@ -1,17 +1,17 @@
-import { Fragment, useContext, useState } from 'react';
-import { useUser } from 'reactfire';
-import { useForm, useWatch, Controller } from 'react-hook-form';
 import { ErrorMessage } from '@hookform/error-message';
 import { yupResolver } from '@hookform/resolvers/yup';
+import { Fragment, useContext, useState } from 'react';
+import { Controller, useForm, useWatch } from 'react-hook-form';
+import { useUser } from 'reactfire';
 import { imagesSchema as schema } from '../../../../functions/shared/cornerSubmission/Schema.js';
 import { SubmissionContext } from '../../contexts/SubmissionContext.jsx';
+import { Button } from '../../formElements/Buttons.jsx';
+import FileUpload from '../../formElements/FileUpload.jsx';
 import { NumberedForm, NumberedFormSection } from '../../formElements/Form.jsx';
 import Spacer from '../../formElements/Spacer.jsx';
+import usePageView from '../../hooks/usePageView.jsx';
 import ErrorMessageTag from '../../pageElements/ErrorMessage.jsx';
-import { Button } from '../../formElements/Buttons.jsx';
-import FileUpload from '../../formElements/FileUpload.jsx';
 import Wizard from './Wizard.jsx';
-import usePageView from '../../hooks/usePageView.jsx';
 
 const limit = 10;
 const defaults = {
@@ -90,11 +90,7 @@ export default function MonumentImages() {
               />
             )}
           />
-          <ErrorMessage
-            errors={formState.errors}
-            name="map"
-            as={ErrorMessageTag}
-          />
+          <ErrorMessage errors={formState.errors} name="map" as={ErrorMessageTag} />
         </NumberedFormSection>
         <NumberedFormSection number={2} title="Monument area">
           <Controller
@@ -114,11 +110,7 @@ export default function MonumentImages() {
               />
             )}
           />
-          <ErrorMessage
-            errors={formState.errors}
-            name="monument"
-            as={ErrorMessageTag}
-          />
+          <ErrorMessage errors={formState.errors} name="monument" as={ErrorMessageTag} />
         </NumberedFormSection>
         <NumberedFormSection number={3} title="Monument close-up">
           <Controller
@@ -138,11 +130,7 @@ export default function MonumentImages() {
               />
             )}
           />
-          <ErrorMessage
-            errors={formState.errors}
-            name="closeUp"
-            as={ErrorMessageTag}
-          />
+          <ErrorMessage errors={formState.errors} name="closeUp" as={ErrorMessageTag} />
         </NumberedFormSection>
         <NumberedFormSection number={4} title="Extra pages">
           {new Array(extraPageCount).fill().map((_, i) => (
@@ -165,11 +153,7 @@ export default function MonumentImages() {
                   />
                 )}
               />
-              <ErrorMessage
-                errors={formState.errors}
-                name={`extra${i}`}
-                as={ErrorMessageTag}
-              />
+              <ErrorMessage errors={formState.errors} name={`extra${i}`} as={ErrorMessageTag} />
             </Fragment>
           ))}
           {limit - extraPageCount} extra pages are allowed
diff --git a/src/components/pageElements/CornerSubmission/Metadata.jsx b/src/components/pageElements/CornerSubmission/Metadata.jsx
index c646b89b..dbbb2cf7 100644
--- a/src/components/pageElements/CornerSubmission/Metadata.jsx
+++ b/src/components/pageElements/CornerSubmission/Metadata.jsx
@@ -1,26 +1,22 @@
-import { useContext, useEffect } from 'react';
-import PropTypes from 'prop-types';
+import { ArrowTopRightOnSquareIcon } from '@heroicons/react/20/solid';
 import { ErrorMessage } from '@hookform/error-message';
 import { yupResolver } from '@hookform/resolvers/yup';
+import PropTypes from 'prop-types';
+import { useContext, useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { ArrowTopRightOnSquareIcon } from '@heroicons/react/20/solid';
+import { accuracy, corner, status } from '../../../../functions/shared/cornerSubmission/Options.js';
+import { metadataSchema as schema } from '../../../../functions/shared/cornerSubmission/Schema.js';
 import { SubmissionContext } from '../../contexts/SubmissionContext.jsx';
+import { Link } from '../../formElements/Buttons.jsx';
+import { NumberedForm, NumberedFormSection } from '../../formElements/Form.jsx';
+import { Input, Label } from '../../formElements/Inputs.jsx';
 import { LimitedTextarea } from '../../formElements/LimitedTextarea.jsx';
 import { Select } from '../../formElements/Select.jsx';
-import { Switch } from '../../formElements/Switch.jsx';
 import Spacer from '../../formElements/Spacer.jsx';
-import { Input, Label } from '../../formElements/Inputs.jsx';
-import { Link } from '../../formElements/Buttons.jsx';
-import { NumberedForm, NumberedFormSection } from '../../formElements/Form.jsx';
+import { Switch } from '../../formElements/Switch.jsx';
+import usePageView from '../../hooks/usePageView.jsx';
 import ErrorMessageTag from '../../pageElements/ErrorMessage.jsx';
-import {
-  accuracy,
-  status,
-  corner,
-} from '../../../../functions/shared/cornerSubmission/Options.js';
-import { metadataSchema as schema } from '../../../../functions/shared/cornerSubmission/Schema.js';
 import Wizard from './Wizard.jsx';
-import usePageView from '../../hooks/usePageView.jsx';
 
 const defaults = {
   section: '',
@@ -49,11 +45,10 @@ const Metadata = ({ dispatch }) => {
     defaultValues.mrrc = false;
   }
 
-  const { control, formState, handleSubmit, register, reset, setFocus } =
-    useForm({
-      resolver: yupResolver(schema),
-      defaultValues,
-    });
+  const { control, formState, handleSubmit, register, reset, setFocus } = useForm({
+    resolver: yupResolver(schema),
+    defaultValues,
+  });
 
   const onSubmit = (payload) => {
     payload.collected = dateFormatter.format(payload.collected);
@@ -86,11 +81,7 @@ const Metadata = ({ dispatch }) => {
               required={true}
               {...register('section')}
             />
-            <ErrorMessage
-              errors={formState.errors}
-              name="section"
-              as={ErrorMessageTag}
-            />
+            <ErrorMessage errors={formState.errors} name="section" as={ErrorMessageTag} />
           </div>
           <div>
             <Controller
@@ -106,11 +97,7 @@ const Metadata = ({ dispatch }) => {
                 />
               )}
             />
-            <ErrorMessage
-              errors={formState.errors}
-              name="corner"
-              as={ErrorMessageTag}
-            />
+            <ErrorMessage errors={formState.errors} name="corner" as={ErrorMessageTag} />
           </div>
         </NumberedFormSection>
         <NumberedFormSection number={2} title="Condition">
@@ -128,11 +115,7 @@ const Metadata = ({ dispatch }) => {
                 />
               )}
             />
-            <ErrorMessage
-              errors={formState.errors}
-              name="status"
-              as={ErrorMessageTag}
-            />
+            <ErrorMessage errors={formState.errors} name="status" as={ErrorMessageTag} />
           </div>
         </NumberedFormSection>
         <NumberedFormSection number={3} title="Collection">
@@ -144,11 +127,7 @@ const Metadata = ({ dispatch }) => {
               required={true}
               {...register('collected')}
             ></Input>
-            <ErrorMessage
-              errors={formState.errors}
-              name="collected"
-              as={ErrorMessageTag}
-            />
+            <ErrorMessage errors={formState.errors} name="collected" as={ErrorMessageTag} />
           </div>
           <div>
             <Controller
@@ -164,21 +143,14 @@ const Metadata = ({ dispatch }) => {
                 />
               )}
             />
-            <ErrorMessage
-              errors={formState.errors}
-              name="accuracy"
-              as={ErrorMessageTag}
-            />
+            <ErrorMessage errors={formState.errors} name="accuracy" as={ErrorMessageTag} />
           </div>
         </NumberedFormSection>
         <NumberedFormSection number={4} title="MRRC">
           <div>
             <label htmlFor="mrrc" className="font-semibold">
               Associated with a{' '}
-              <abbr
-                className="cursor-help"
-                title="Monument Replacement and Restoration Committee"
-              >
+              <abbr className="cursor-help" title="Monument Replacement and Restoration Committee">
                 MRRC
               </abbr>{' '}
               Project
@@ -203,20 +175,12 @@ const Metadata = ({ dispatch }) => {
                 <ArrowTopRightOnSquareIcon className="align-center not-sr-only ml-1 inline-flex h-5 w-5" />
               </Link>
             </div>
-            <ErrorMessage
-              errors={formState.errors}
-              name="mrrc"
-              as={ErrorMessageTag}
-            />
+            <ErrorMessage errors={formState.errors} name="mrrc" as={ErrorMessageTag} />
           </div>
         </NumberedFormSection>
         <NumberedFormSection number={5} title="Description">
           <div>
-            <Label
-              htmlFor="description"
-              className="font-semibold"
-              required={true}
-            >
+            <Label htmlFor="description" className="font-semibold" required={true}>
               Monument Description
             </Label>
             <Controller
@@ -257,11 +221,7 @@ const Metadata = ({ dispatch }) => {
           </div>
         </NumberedFormSection>
         <NumberedFormSection number={0}>
-          <Wizard
-            next={true}
-            back={() => dispatch({ type: 'menu/toggle', payload: 'identify' })}
-            clear={onReset}
-          />
+          <Wizard next={true} back={() => dispatch({ type: 'menu/toggle', payload: 'identify' })} clear={onReset} />
         </NumberedFormSection>
       </NumberedForm>
     </>
diff --git a/src/components/pageElements/CornerSubmission/Pdf.jsx b/src/components/pageElements/CornerSubmission/Pdf.jsx
index 6bba04ee..920cdefa 100644
--- a/src/components/pageElements/CornerSubmission/Pdf.jsx
+++ b/src/components/pageElements/CornerSubmission/Pdf.jsx
@@ -1,17 +1,17 @@
-import { useContext } from 'react';
+import { ErrorMessage } from '@hookform/error-message';
+import { yupResolver } from '@hookform/resolvers/yup';
 import PropTypes from 'prop-types';
+import { useContext } from 'react';
+import { Controller, useForm, useWatch } from 'react-hook-form';
 import { useUser } from 'reactfire';
-import { useForm, useWatch, Controller } from 'react-hook-form';
-import { yupResolver } from '@hookform/resolvers/yup';
-import { ErrorMessage } from '@hookform/error-message';
+import { existingSheetSchema } from '../../../../functions/shared/cornerSubmission/Schema.js';
 import { SubmissionContext } from '../../contexts/SubmissionContext.jsx';
 import FileUpload from '../../formElements/FileUpload.jsx';
 import { NumberedForm, NumberedFormSection } from '../../formElements/Form.jsx';
 import Spacer from '../../formElements/Spacer.jsx';
+import usePageView from '../../hooks/usePageView.jsx';
 import ErrorMessageTag from '../../pageElements/ErrorMessage.jsx';
 import Wizard from './Wizard.jsx';
-import { existingSheetSchema } from '../../../../functions/shared/cornerSubmission/Schema.js';
-import usePageView from '../../hooks/usePageView.jsx';
 
 export default function MonumentPdf({ dispatch }) {
   const { data: user } = useUser();
@@ -51,17 +51,10 @@ export default function MonumentPdf({ dispatch }) {
               />
             )}
           />
-          <ErrorMessage
-            errors={formState.errors}
-            name="pdf"
-            as={ErrorMessageTag}
-          />
+          <ErrorMessage errors={formState.errors} name="pdf" as={ErrorMessageTag} />
         </NumberedFormSection>
         <NumberedFormSection number={0}>
-          <Wizard
-            next={true}
-            back={() => dispatch({ type: 'menu/toggle', payload: 'identify' })}
-          />
+          <Wizard next={true} back={() => dispatch({ type: 'menu/toggle', payload: 'identify' })} />
         </NumberedFormSection>
       </NumberedForm>
     </>
diff --git a/src/components/pageElements/CornerSubmission/SubmissionNotice.jsx b/src/components/pageElements/CornerSubmission/SubmissionNotice.jsx
index 6e8cbbaf..4c6676be 100644
--- a/src/components/pageElements/CornerSubmission/SubmissionNotice.jsx
+++ b/src/components/pageElements/CornerSubmission/SubmissionNotice.jsx
@@ -1,20 +1,17 @@
-import Card from '../../formElements/Card.jsx';
-import Note from '../../formElements/Note.jsx';
-import { Button } from '../../formElements/Buttons.jsx';
-import extractTownshipInformation from '../../../../functions/shared/cornerSubmission/blmPointId.js';
+import { useQuery } from '@tanstack/react-query';
 import { httpsCallable } from 'firebase/functions';
-import { useUser, useFunctions } from 'reactfire';
 import PropTypes from 'prop-types';
 import { useMemo } from 'react';
-import { useQuery } from '@tanstack/react-query';
+import { useFunctions, useUser } from 'reactfire';
+import extractTownshipInformation from '../../../../functions/shared/cornerSubmission/blmPointId.js';
+import { Button } from '../../formElements/Buttons.jsx';
+import Card from '../../formElements/Card.jsx';
+import Note from '../../formElements/Note.jsx';
 
 export default function SubmissionNotice({ pointId, county, toggle }) {
   const { data: user } = useUser();
 
-  const townshipInformation = useMemo(
-    () => extractTownshipInformation(pointId),
-    [pointId],
-  );
+  const townshipInformation = useMemo(() => extractTownshipInformation(pointId), [pointId]);
 
   const functions = useFunctions();
   const getProfile = httpsCallable(functions, 'getProfile');
@@ -44,9 +41,8 @@ export default function SubmissionNotice({ pointId, county, toggle }) {
     <div className="mb-4 inline-grid">
       <Card>
         <Note>
-          This monument record information will be reviewed by the county
-          surveyor under stewardship of this corner to satisfy the requirements
-          of state code 17-23-17-7a.
+          This monument record information will be reviewed by the county surveyor under stewardship of this corner to
+          satisfy the requirements of state code 17-23-17-7a.
         </Note>
         <div className="flex justify-between">
           <span className="font-semibold">Submitted By</span>
diff --git a/src/components/pageElements/CornerSubmission/SubmissionReview.jsx b/src/components/pageElements/CornerSubmission/SubmissionReview.jsx
index 922d8f58..a41ba0ed 100644
--- a/src/components/pageElements/CornerSubmission/SubmissionReview.jsx
+++ b/src/components/pageElements/CornerSubmission/SubmissionReview.jsx
@@ -1,21 +1,21 @@
-import { useContext, useState } from 'react';
-import PropTypes from 'prop-types';
-import { ErrorBoundary } from 'react-error-boundary';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { httpsCallable } from 'firebase/functions';
+import { getDownloadURL, ref } from 'firebase/storage';
+import PropTypes from 'prop-types';
+import { useContext, useState } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
 import { useFunctions, useStorage } from 'reactfire';
-import { SubmissionContext } from '../../contexts/SubmissionContext.jsx';
-import Wizard from './Wizard.jsx';
-import { keyMap, formatDatum } from '../../../../functions/shared/index.js';
-import Card from '../../formElements/Card.jsx';
 import {
   geographic as geographicOptions,
   grid as gridOptions,
 } from '../../../../functions/shared/cornerSubmission/Options.js';
-import { ObjectPreview } from '../../formElements/FileUpload.jsx';
+import { formatDatum, keyMap } from '../../../../functions/shared/index.js';
+import { SubmissionContext } from '../../contexts/SubmissionContext.jsx';
 import { Link } from '../../formElements/Buttons.jsx';
-import { getDownloadURL, ref } from 'firebase/storage';
+import Card from '../../formElements/Card.jsx';
+import { ObjectPreview } from '../../formElements/FileUpload.jsx';
 import usePageView from '../../hooks/usePageView.jsx';
+import Wizard from './Wizard.jsx';
 
 const Review = () => {
   const [state, send] = useContext(SubmissionContext);
@@ -29,11 +29,7 @@ const Review = () => {
 
   const { data, status } = useQuery({
     enabled: state.context.type === 'new',
-    queryKey: [
-      'monument record sheet',
-      state.context.blmPointId,
-      { preview: true },
-    ],
+    queryKey: ['monument record sheet', state.context.blmPointId, { preview: true }],
     queryFn: () => generatePreview(state.context),
     staleTime: 5000, // 5 seconds,
   });
@@ -60,21 +56,11 @@ const Review = () => {
     <>
       <div className="grid gap-2">
         <div className="mb-1 flex flex-col text-center">
-          <h2 className="text-2xl font-bold uppercase">
-            Corner Submission Review
-          </h2>
-          <h3 className="ml-2 text-xl font-light">
-            {state.context.blmPointId}
-          </h3>
+          <h2 className="text-2xl font-bold uppercase">Corner Submission Review</h2>
+          <h3 className="ml-2 text-xl font-light">{state.context.blmPointId}</h3>
         </div>
-        {state.context.type !== 'existing' && (
-          <MetadataReview {...state.context.metadata} />
-        )}
-        <CoordinateReview
-          datum={state.context.datum}
-          grid={state.context.grid}
-          geographic={state.context.geographic}
-        />
+        {state.context.type !== 'existing' && <MetadataReview {...state.context.metadata} />}
+        <CoordinateReview datum={state.context.datum} grid={state.context.grid} geographic={state.context.geographic} />
         {state.context.type === 'existing' ? (
           <AttachmentReview path={state.context.existing.pdf} />
         ) : (
@@ -87,32 +73,19 @@ const Review = () => {
         )}
       </div>
       <div className="mt-8 flex justify-center">
-        <Wizard
-          back={() => send({ type: 'BACK' })}
-          status={mutationStatus}
-          finish={() => mutate(state.context)}
-        />
+        <Wizard back={() => send({ type: 'BACK' })} status={mutationStatus} finish={() => mutate(state.context)} />
       </div>
     </>
   );
 };
 
-const MetadataReview = ({
-  accuracy,
-  collected,
-  corner,
-  description,
-  mrrc,
-  notes,
-  section,
-  status,
-}) => {
+const MetadataReview = ({ accuracy, collected, corner, description, mrrc, notes, section, status }) => {
   return (
     <Card>
       <h4 className="relative -mt-2 text-lg font-bold">
         Metadata
         {mrrc && (
-          <div className="absolute top-0 right-0 rounded border border-sky-800 bg-sky-300 px-2 text-sm uppercase text-sky-800 shadow">
+          <div className="absolute right-0 top-0 rounded border border-sky-800 bg-sky-300 px-2 text-sm uppercase text-sky-800 shadow">
             MRRC
           </div>
         )}
@@ -190,9 +163,7 @@ const CoordinateReview = ({ datum, grid, geographic }) => {
           <span>{formatDatum(datum)}</span>
         </div>
         {coordinates[0]}
-        <h4 className="py-2 text-lg font-bold text-slate-400">
-          Calculated Coordinates
-        </h4>
+        <h4 className="py-2 text-lg font-bold text-slate-400">Calculated Coordinates</h4>
         <div className="flex justify-between">
           <span className="font-semibold">Datum</span>
           <span>{calculated}</span>
@@ -337,18 +308,12 @@ const AttachmentReview = ({ path }) => {
 
   return (
     <Card>
-      <h4 className="-mt-2 text-lg font-bold">
-        Existing Monument Record Sheet
-      </h4>
+      <h4 className="-mt-2 text-lg font-bold">Existing Monument Record Sheet</h4>
       <div className="h-[400px] max-w-[300px] justify-self-center">
         <Link href={data} target="_blank" rel="noopener noreferrer">
           Uploaded Tiesheet
         </Link>
-        {data ? (
-          <ObjectPreview url={data}>preview</ObjectPreview>
-        ) : (
-          'loading...'
-        )}
+        {data ? <ObjectPreview url={data}>preview</ObjectPreview> : 'loading...'}
       </div>
     </Card>
   );
@@ -364,11 +329,7 @@ const MonumentPreview = ({ status, children }) => {
       {status === 'pending' && 'generating preview...'}
       {status === 'success' && (
         <div className="h-[400px] max-w-[300px] justify-self-center border">
-          <ErrorBoundary
-            fallback={<div>The preview could not be accessed.</div>}
-          >
-            {children}
-          </ErrorBoundary>
+          <ErrorBoundary fallback={<div>The preview could not be accessed.</div>}>{children}</ErrorBoundary>
         </div>
       )}
       {status === 'error' && 'error generating preview'}
@@ -389,11 +350,7 @@ const PdfPreview = ({ path }) => {
     return <div className="flex flex-col items-center">Loading...</div>;
   }
 
-  return (
-    <div className="flex flex-col items-center">
-      {data && <ObjectPreview url={data}>preview</ObjectPreview>}
-    </div>
-  );
+  return <div className="flex flex-col items-center">{data && <ObjectPreview url={data}>preview</ObjectPreview>}</div>;
 };
 PdfPreview.propTypes = {
   path: PropTypes.string,
diff --git a/src/components/pageElements/CornerSubmission/SubmissionReview.stories.jsx b/src/components/pageElements/CornerSubmission/SubmissionReview.stories.jsx
index 54fc1247..7531dab9 100644
--- a/src/components/pageElements/CornerSubmission/SubmissionReview.stories.jsx
+++ b/src/components/pageElements/CornerSubmission/SubmissionReview.stories.jsx
@@ -1,14 +1,10 @@
-import Review from './SubmissionReview.jsx';
-import { SubmissionProvider } from '../../contexts/SubmissionContext.jsx';
-import {
-  FirebaseAppProvider,
-  FunctionsProvider,
-  StorageProvider,
-} from 'reactfire';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { initializeApp } from 'firebase/app';
 import { getFunctions } from 'firebase/functions';
 import { getStorage } from 'firebase/storage';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { FirebaseAppProvider, FunctionsProvider, StorageProvider } from 'reactfire';
+import { SubmissionProvider } from '../../contexts/SubmissionContext.jsx';
+import Review from './SubmissionReview.jsx';
 
 let config = {
   apiKey: '',
@@ -34,7 +30,7 @@ export default {
       const storage = getStorage(app);
 
       return (
-        <aside className="drawer max-w-screen z-10 flex flex-col overflow-scroll rounded-t-2xl bg-slate-50 px-4 py-4 text-sky-900 shadow-2xl sm:rounded-t-none md:pb-12 ">
+        <aside className="drawer max-w-screen z-10 flex flex-col overflow-scroll rounded-t-2xl bg-slate-50 px-4 py-4 text-sky-900 shadow-2xl sm:rounded-t-none md:pb-12">
           <QueryClientProvider client={new QueryClient()}>
             <FirebaseAppProvider firebaseConfig={config}>
               <FunctionsProvider sdk={functions}>
diff --git a/src/components/pageElements/CornerSubmission/SubmissionSuccess.jsx b/src/components/pageElements/CornerSubmission/SubmissionSuccess.jsx
index 7f83282a..3bf10ac2 100644
--- a/src/components/pageElements/CornerSubmission/SubmissionSuccess.jsx
+++ b/src/components/pageElements/CornerSubmission/SubmissionSuccess.jsx
@@ -12,29 +12,22 @@ export default function SubmissionSuccess({ dispatch }) {
         <p className="ml-3 text-sm leading-none">What happens next?</p>
       </div>
       <p className="ml-3">
-        The PLSS team at UGRC has been notified of your submission. They will
-        review the submission and approve the sheet if there are no errors.
+        The PLSS team at UGRC has been notified of your submission. They will review the submission and approve the
+        sheet if there are no errors.
       </p>
       <p className="ml-3">
-        Next, UGRC will share the approved sheet with the representative from
-        the county the monument is located in. The county representative will
-        then review the submission and approve the sheet if there are no errors.
-        They are provided 10 days to comment and after that time period they
-        implicitly approve the sheet.
+        Next, UGRC will share the approved sheet with the representative from the county the monument is located in. The
+        county representative will then review the submission and approve the sheet if there are no errors. They are
+        provided 10 days to comment and after that time period they implicitly approve the sheet.
       </p>
       <p className="ml-3">
-        Once the sheet is approved, the monument record sheet pdf will be
-        accessible through this PLSS website. UGRC will then use the submitted
-        coordinates to improve the PLSS point dataset and fabric.
+        Once the sheet is approved, the monument record sheet pdf will be accessible through this PLSS website. UGRC
+        will then use the submitted coordinates to improve the PLSS point dataset and fabric.
       </p>
       <h2 className="text-2xl font-semibold">Tracking progress</h2>
       <p className="ml-3">
-        You can track the progress of this submission and all of your prior
-        submissions by clicking on the{' '}
-        <Button
-          onClick={() => dispatch({ type: 'menu/toggle', payload: 'content' })}
-          style="link"
-        >
+        You can track the progress of this submission and all of your prior submissions by clicking on the{' '}
+        <Button onClick={() => dispatch({ type: 'menu/toggle', payload: 'content' })} style="link">
           My Content
         </Button>{' '}
         menu link.
diff --git a/src/components/pageElements/CornerSubmission/Wizard.jsx b/src/components/pageElements/CornerSubmission/Wizard.jsx
index 8cf71f2c..e05c94ce 100644
--- a/src/components/pageElements/CornerSubmission/Wizard.jsx
+++ b/src/components/pageElements/CornerSubmission/Wizard.jsx
@@ -1,13 +1,7 @@
-import { Button } from '../../formElements/Buttons.jsx';
 import PropTypes from 'prop-types';
+import { Button } from '../../formElements/Buttons.jsx';
 
-export default function Wizard({
-  back = false,
-  next = false,
-  finish,
-  clear,
-  status,
-}) {
+export default function Wizard({ back = false, next = false, finish, clear, status }) {
   return (
     <div className="flex justify-center">
       {back && (
@@ -33,12 +27,7 @@ export default function Wizard({
         </Button>
       )}
       {finish && (
-        <Button
-          buttonGroup={{ right: true }}
-          type="submit"
-          state={status}
-          onClick={finish}
-        >
+        <Button buttonGroup={{ right: true }} type="submit" state={status} onClick={finish}>
           {getButtonText(status)}
         </Button>
       )}
diff --git a/src/components/pageElements/ErrorBoundary.jsx b/src/components/pageElements/ErrorBoundary.jsx
index cccbec22..460640e7 100644
--- a/src/components/pageElements/ErrorBoundary.jsx
+++ b/src/components/pageElements/ErrorBoundary.jsx
@@ -1,7 +1,7 @@
+import { logEvent } from 'firebase/analytics';
 import PropTypes from 'prop-types';
-import { Button } from '../formElements/Buttons.jsx';
 import { useAnalytics } from 'reactfire';
-import { logEvent } from 'firebase/analytics';
+import { Button } from '../formElements/Buttons.jsx';
 
 export default function DefaultFallback({ error, resetErrorBoundary }) {
   const analytics = useAnalytics();
diff --git a/src/components/pageElements/Identify.jsx b/src/components/pageElements/Identify.jsx
index a9d635de..24a0c4b9 100644
--- a/src/components/pageElements/Identify.jsx
+++ b/src/components/pageElements/Identify.jsx
@@ -1,20 +1,15 @@
 import { ArrowDownCircleIcon } from '@heroicons/react/20/solid';
-import {
-  CheckIcon,
-  ExclamationCircleIcon,
-  XMarkIcon,
-} from '@heroicons/react/24/outline';
+import { CheckIcon, ExclamationCircleIcon, XMarkIcon } from '@heroicons/react/24/outline';
 import PropTypes from 'prop-types';
+import { getDefault } from '../../../functions/shared/index.js';
 import { Button, Link } from '../formElements/Buttons.jsx';
 import Card from '../formElements/Card.jsx';
 import Spacer from '../formElements/Spacer.jsx';
-import { getDefault } from '../../../functions/shared/index.js';
 import TieSheetList from './TieSheetList.jsx';
 
 const managed_counties = {
   UTAH: 'https://maps.utahcounty.gov/TieSheets/TieSheet.htm',
-  WASATCH:
-    'https://wasatch.maps.arcgis.com/apps/webappviewer/index.html?id=103db0251a5342f7bbd1462eb7a47440',
+  WASATCH: 'https://wasatch.maps.arcgis.com/apps/webappviewer/index.html?id=103db0251a5342f7bbd1462eb7a47440',
   DAVIS: 'http://www.co.davis.ut.us/surveyor/default.cfm',
   'SALT LAKE': 'https://slco.org/surveyor/apps/surveymonument/map.html',
   WEBER: 'https://www3.co.weber.ut.us/gis/maps/survey/index.html',
@@ -31,9 +26,7 @@ export default function Identify({ authenticated, graphic, dispatch }) {
   return (
     <>
       <h2 className="text-2xl font-semibold">PLSS Point Information</h2>
-      <h3 className="ml-2 mt-1 text-xl font-light">
-        {graphic.attributes.point_id}
-      </h3>
+      <h3 className="ml-2 mt-1 text-xl font-light">{graphic.attributes.point_id}</h3>
 
       <main className="inline-grid gap-3 text-sm">
         {graphic?.attributes?.point_id && (
@@ -59,9 +52,7 @@ export default function Identify({ authenticated, graphic, dispatch }) {
           </section>
           <section className="flex w-full justify-between">
             <span className="mr-2 font-bold">Elevation</span>
-            <span>
-              {getDefault(graphic.attributes.elevation, 'unknown', ' ft')}
-            </span>
+            <span>{getDefault(graphic.attributes.elevation, 'unknown', ' ft')}</span>
           </section>
           <section className="flex w-full justify-between">
             <span className="mr-2 font-bold">County</span>
@@ -114,9 +105,7 @@ export default function Identify({ authenticated, graphic, dispatch }) {
             </section>
             <section className="flex flex-col items-center">
               <span className="font-semibold">Category</span>
-              <span className="mt-1">
-                {getDefault(graphic.attributes.point_category)}
-              </span>
+              <span className="mt-1">{getDefault(graphic.attributes.point_category)}</span>
             </section>
           </div>
         </Card>
@@ -135,13 +124,8 @@ export default function Identify({ authenticated, graphic, dispatch }) {
             <section className="flex w-full justify-between">
               <span className="font-semibold">County managed</span>
               <span>
-                <Link
-                  href={managed_counties[graphic.attributes.managed_by]}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  {getDefault(graphic.attributes.managed_by)} county surveyor
-                  website
+                <Link href={managed_counties[graphic.attributes.managed_by]} target="_blank" rel="noopener noreferrer">
+                  {getDefault(graphic.attributes.managed_by)} county surveyor website
                 </Link>
               </span>
             </section>
@@ -179,8 +163,8 @@ const EmptyIdentify = ({ dispatch }) => {
         </div>
         <h3 className="text-xl">No corner point was found at this location.</h3>
         <p>
-          If you do not see any points, try zooming in and click on the point
-          again. Otherwise try clicking on the corner point again.
+          If you do not see any points, try zooming in and click on the point again. Otherwise try clicking on the
+          corner point again.
         </p>
         <div className="mt-6 flex justify-center">
           <Button
@@ -207,7 +191,7 @@ const SubmissionPicker = ({ authenticated, metadata, dispatch }) => {
         <>
           <h5 className="flex items-center justify-center font-light uppercase">
             <ArrowDownCircleIcon className="mr-1 h-4 w-4 items-center text-sky-400 motion-safe:animate-bounce" />
-            <span className=" text-slate-700">Submit your monument record</span>
+            <span className="text-slate-700">Submit your monument record</span>
             <ArrowDownCircleIcon className="ml-1 h-4 w-4 items-center text-sky-400 motion-safe:animate-bounce" />
           </h5>
           <Spacer />
diff --git a/src/components/pageElements/Identify.stories.jsx b/src/components/pageElements/Identify.stories.jsx
index eba9c866..17981072 100644
--- a/src/components/pageElements/Identify.stories.jsx
+++ b/src/components/pageElements/Identify.stories.jsx
@@ -1,9 +1,9 @@
-import Identify from './Identify.jsx';
-import { AuthProvider, FirebaseAppProvider, StorageProvider } from 'reactfire';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { initializeApp } from 'firebase/app';
 import { getAuth } from 'firebase/auth';
 import { getStorage } from 'firebase/storage';
-import { initializeApp } from 'firebase/app';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { AuthProvider, FirebaseAppProvider, StorageProvider } from 'reactfire';
+import Identify from './Identify.jsx';
 
 let config = {
   apiKey: '',
@@ -29,7 +29,7 @@ export default {
       const auth = getAuth(app);
 
       return (
-        <aside className="drawer max-w-screen z-10 flex flex-col overflow-scroll rounded-t-2xl border border-sky-700 bg-slate-600 px-4 py-4 text-white shadow-2xl sm:rounded-t-none md:pb-12 ">
+        <aside className="drawer max-w-screen z-10 flex flex-col overflow-scroll rounded-t-2xl border border-sky-700 bg-slate-600 px-4 py-4 text-white shadow-2xl sm:rounded-t-none md:pb-12">
           <QueryClientProvider client={new QueryClient()}>
             <FirebaseAppProvider firebaseConfig={config}>
               <AuthProvider sdk={auth}>
diff --git a/src/components/pageElements/Legend.jsx b/src/components/pageElements/Legend.jsx
index a74fcc9e..67e37be8 100644
--- a/src/components/pageElements/Legend.jsx
+++ b/src/components/pageElements/Legend.jsx
@@ -1,13 +1,7 @@
-import { Fragment } from 'react';
-import { contrastColor } from 'contrast-color';
+import { Popover, PopoverButton, PopoverGroup, PopoverPanel, Transition } from '@headlessui/react';
 import { QuestionMarkCircleIcon } from '@heroicons/react/24/outline';
-import {
-  Popover,
-  PopoverButton,
-  PopoverPanel,
-  PopoverGroup,
-  Transition,
-} from '@headlessui/react';
+import { contrastColor } from 'contrast-color';
+import { Fragment } from 'react';
 import Card from '../formElements/Card.jsx';
 import Spacer from '../formElements/Spacer.jsx';
 import usePageView from '../hooks/usePageView.jsx';
@@ -18,14 +12,9 @@ export default function Legend() {
   return (
     <Card>
       <h2 className="text-2xl font-semibold">PLSS Points Legend</h2>
-      <p className="text-sm leading-none">
-        What do the colors mean? Click on the question mark to learn more.
-      </p>
+      <p className="text-sm leading-none">What do the colors mean? Click on the question mark to learn more.</p>
       <Spacer />
-      <PopoverGroup
-        as="section"
-        className="flex flex-wrap justify-around gap-3"
-      >
+      <PopoverGroup as="section" className="flex flex-wrap justify-around gap-3">
         {layers.map((layer) => (
           <Popover key={layer.name}>
             <PopoverButton
@@ -59,9 +48,7 @@ export default function Legend() {
 
                   return (
                     <div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
-                      <div className="bg-white px-3 py-2 text-sm text-slate-800">
-                        {layer.about}
-                      </div>
+                      <div className="bg-white px-3 py-2 text-sm text-slate-800">{layer.about}</div>
                     </div>
                   );
                 }}
@@ -78,8 +65,7 @@ const layers = [
   {
     name: 'County Managed',
     color: '#7BE144',
-    about:
-      'PLSS points whose monument record sheets and information are managed on a county website.',
+    about: 'PLSS points whose monument record sheets and information are managed on a county website.',
   },
   {
     name: 'Monument Record',
@@ -89,8 +75,7 @@ const layers = [
   {
     name: 'Control',
     color: '#1A1A1A',
-    about:
-      'PLSS points that have been incorporated into the PLSS Fabric as control points.',
+    about: 'PLSS points that have been incorporated into the PLSS Fabric as control points.',
   },
   {
     name: 'Calculated',
diff --git a/src/components/pageElements/Login.jsx b/src/components/pageElements/Login.jsx
index 9d806fe4..dead3bd9 100644
--- a/src/components/pageElements/Login.jsx
+++ b/src/components/pageElements/Login.jsx
@@ -1,11 +1,11 @@
-import PropTypes from 'prop-types';
-import { httpsCallable } from 'firebase/functions';
-import { useFunctions, useSigninCheck, useUser } from 'reactfire';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { LogInButton, LogOutButton, Button } from '../formElements/Buttons.jsx';
-import Card from '../formElements/Card.jsx';
+import { httpsCallable } from 'firebase/functions';
 import md5 from 'md5';
+import PropTypes from 'prop-types';
 import { useEffect } from 'react';
+import { useFunctions, useSigninCheck, useUser } from 'reactfire';
+import { Button, LogInButton, LogOutButton } from '../formElements/Buttons.jsx';
+import Card from '../formElements/Card.jsx';
 import usePageView from '../hooks/usePageView.jsx';
 
 const size = 160;
@@ -28,9 +28,7 @@ export default function Login({ dispatch }) {
       });
     }
   }, [signedIn, queryClient]);
-  return (
-    <Card>{data?.signedIn ? <Profile dispatch={dispatch} /> : <SignIn />}</Card>
-  );
+  return <Card>{data?.signedIn ? <Profile dispatch={dispatch} /> : <SignIn />}</Card>;
 }
 Login.propTypes = {
   dispatch: PropTypes.func,
@@ -43,19 +41,16 @@ const SignIn = () => {
     <div className="grid flex-1 gap-4">
       <h2 className="text-2xl font-bold">Sign in to your account</h2>
       <p>
-        This app requires a UtahId account to submit monument record sheets.
-        Your name and email address will be shared with this application.
+        This app requires a UtahId account to submit monument record sheets. Your name and email address will be shared
+        with this application.
       </p>
       <p>
-        A surveyor license and seal will be displayed publicly on monument
-        record sheets if you choose to add them on your profile. Otherwise, no
-        other personal information will be shared or made public.
+        A surveyor license and seal will be displayed publicly on monument record sheets if you choose to add them on
+        your profile. Otherwise, no other personal information will be shared or made public.
       </p>
       <div className="flex items-center text-slate-500">
         <span className="h-px flex-1 bg-slate-200"></span>
-        <span className="mx-3 text-xs uppercase tracking-wide">
-          continue with
-        </span>
+        <span className="mx-3 text-xs uppercase tracking-wide">continue with</span>
         <span className="h-px flex-1 bg-slate-200"></span>
       </div>
       <div className="flex justify-center">
@@ -87,9 +82,7 @@ const Profile = ({ dispatch }) => {
 
   return (
     <div className="flex w-full flex-col items-center gap-6">
-      <h2 className="text-3xl font-semibold lg:text-2xl">
-        Welcome back, {response.data.displayName}
-      </h2>
+      <h2 className="text-3xl font-semibold lg:text-2xl">Welcome back, {response.data.displayName}</h2>
       <span className="relative">
         <span className="mr-2 inline-block h-40 w-40 overflow-hidden rounded-full border-2 border-sky-500 bg-slate-100 shadow-lg">
           {status === 'success' && <Gravatar email={response.data.email} />}
@@ -106,11 +99,7 @@ const Profile = ({ dispatch }) => {
       </span>
       <div className="flex w-full justify-around">
         <LogOutButton />
-        <Button
-          onClick={() => dispatch({ type: 'menu/toggle', payload: 'profile' })}
-        >
-          My Profile
-        </Button>
+        <Button onClick={() => dispatch({ type: 'menu/toggle', payload: 'profile' })}>My Profile</Button>
       </div>
     </div>
   );
@@ -120,9 +109,7 @@ Profile.propTypes = {
 };
 
 const Gravatar = ({ email }) => {
-  const gravatar = `https://www.gravatar.com/avatar/${md5(
-    email.toLowerCase(),
-  )}?s=${size}&default=${fallback}`;
+  const gravatar = `https://www.gravatar.com/avatar/${md5(email.toLowerCase())}?s=${size}&default=${fallback}`;
 
   return <img src={gravatar} alt="Gravatar" />;
 };
diff --git a/src/components/pageElements/Logo.jsx b/src/components/pageElements/Logo.jsx
index ab6ae71d..05b22132 100644
--- a/src/components/pageElements/Logo.jsx
+++ b/src/components/pageElements/Logo.jsx
@@ -3,11 +3,7 @@ import PropTypes from 'prop-types';
 export default function Logo({ version }) {
   return (
     <div className="mb-0 flex sm:mb-6">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 400.9 523.07"
-        className="mr-2 flex w-12 rounded-lg"
-      >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400.9 523.07" className="mr-2 flex w-12 rounded-lg">
         <g id="wavy_gravy">
           <path
             d="M31.29 442.24a256.8 256.8 0 0 1-1.23-30.45c.1-4.72.33-9.5.7-14.34 1.94-25.24 9.91-48.3 17.62-70.6 6.1-17.66 11.86-34.34 14.84-51.95a92.47 92.47 0 0 0 1.35-14.66c.02-6.69-.92-12.58-2.82-17.47-8.7-22.5-39.37-23.97-61.75-21.74v281.81a20.3 20.3 0 0 0 20.24 20.24h32.43c-9.72-22.38-18.23-49.62-21.38-80.84Z"
diff --git a/src/components/pageElements/Map.jsx b/src/components/pageElements/Map.jsx
index 94080566..53d1355d 100644
--- a/src/components/pageElements/Map.jsx
+++ b/src/components/pageElements/Map.jsx
@@ -5,21 +5,17 @@ import Graphic from '@arcgis/core/Graphic';
 import FeatureLayer from '@arcgis/core/layers/FeatureLayer';
 import VectorTileLayer from '@arcgis/core/layers/VectorTileLayer';
 import EsriMap from '@arcgis/core/Map';
-import Viewpoint from '@arcgis/core/Viewpoint';
-import MapView from '@arcgis/core/views/MapView';
 import UniqueValueRenderer from '@arcgis/core/renderers/UniqueValueRenderer.js';
 import PictureMarkerSymbol from '@arcgis/core/symbols/PictureMarkerSymbol.js';
 import SimpleMarkerSymbol from '@arcgis/core/symbols/SimpleMarkerSymbol.js';
+import Viewpoint from '@arcgis/core/Viewpoint';
+import MapView from '@arcgis/core/views/MapView';
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react';
 import { useWindowWidth } from '@react-hook/window-size';
 import { useQuery } from '@tanstack/react-query';
 import LayerSelector from '@ugrc/layer-selector';
 import '@ugrc/layer-selector/src/LayerSelector.css';
-import {
-  useGraphicManager,
-  useViewLoading,
-  useViewPointZooming,
-} from '@ugrc/utilities/hooks';
+import { useGraphicManager, useViewLoading, useViewPointZooming } from '@ugrc/utilities/hooks';
 import clsx from 'clsx';
 import { contrastColor } from 'contrast-color';
 import { logEvent } from 'firebase/analytics';
@@ -28,23 +24,21 @@ import PropTypes from 'prop-types';
 import { useEffect, useRef, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { useAnalytics, useFunctions, useSigninCheck } from 'reactfire';
+import DefaultFallback from './ErrorBoundary.jsx';
 import GroupButton from './mapElements/GroupButton.jsx';
+import HomeButton from './mapElements/HomeButton.jsx';
 import MonumentRecord from './mapElements/MonumentRecord.jsx';
 import MyLocation from './mapElements/MyLocation.jsx';
-import HomeButton from './mapElements/HomeButton.jsx';
 import Township from './mapElements/Township.jsx';
-import DefaultFallback from './ErrorBoundary.jsx';
 
 esriConfig.assetsPath = '/assets';
 
 const urls = {
   landownership:
     'https://gis.trustlands.utah.gov/hosting/rest/services/Hosted/Land_Ownership_WM_VectorTile/VectorTileServer',
-  parcels:
-    'https://services1.arcgis.com/99lidPhWCzftIe9K/arcgis/rest/services/UtahStatewideParcels/FeatureServer',
+  parcels: 'https://services1.arcgis.com/99lidPhWCzftIe9K/arcgis/rest/services/UtahStatewideParcels/FeatureServer',
   plss: 'https://tiles.arcgis.com/tiles/99lidPhWCzftIe9K/arcgis/rest/services/UtahPLSS/VectorTileServer',
-  points:
-    'https://services1.arcgis.com/99lidPhWCzftIe9K/arcgis/rest/services/PLSS_Monuments/FeatureServer/0',
+  points: 'https://services1.arcgis.com/99lidPhWCzftIe9K/arcgis/rest/services/PLSS_Monuments/FeatureServer/0',
 };
 
 const loadingCss =
@@ -372,8 +366,7 @@ export default function PlssMap({ color, dispatch, drawerOpen, state }) {
       filter: {
         objectIds: [identifyGraphic.attributes.OBJECTID],
       },
-      includedEffect:
-        'drop-shadow(0px 0px 10px white) saturate(200%) brightness(400%) opacity(100%)',
+      includedEffect: 'drop-shadow(0px 0px 10px white) saturate(200%) brightness(400%) opacity(100%)',
       excludedEffect: 'grayscale(70%) opacity(70%) invert(10%)',
     };
   }, [identifyGraphic]);
@@ -410,9 +403,7 @@ export default function PlssMap({ color, dispatch, drawerOpen, state }) {
         default: {
           const response = await mapView.current.hitTest(event);
 
-          const hits = response?.results?.filter(
-            (result) => result.layer?.id === 'PLSS Points',
-          );
+          const hits = response?.results?.filter((result) => result.layer?.id === 'PLSS Points');
 
           let payload = null;
           if (hits.length > 0) {
@@ -501,13 +492,7 @@ export default function PlssMap({ color, dispatch, drawerOpen, state }) {
       setUserGraphics();
       dispatch({ type: 'map/userPoints', payload: [] });
     }
-  }, [
-    dispatch,
-    setUserGraphics,
-    content?.data?.points,
-    status,
-    signInCheckResult?.signedIn,
-  ]);
+  }, [dispatch, setUserGraphics, content?.data?.points, status, signInCheckResult?.signedIn]);
 
   // add and zoom to gps location
   useEffect(() => {
@@ -567,23 +552,12 @@ export default function PlssMap({ color, dispatch, drawerOpen, state }) {
     <ErrorBoundary FallbackComponent={DefaultFallback}>
       <>
         <section className="ugrc__map">
-          <div
-            className={clsx(
-              loadingCss,
-              isLoading || mapState === 'loading' ? '' : 'opacity-0',
-            )}
-          ></div>
+          <div className={clsx(loadingCss, isLoading || mapState === 'loading' ? '' : 'opacity-0')}></div>
           <div ref={node} className="h-screen w-full bg-white"></div>
         </section>
-        {selectorOptions ? (
-          <LayerSelector {...selectorOptions}></LayerSelector>
-        ) : null}
+        {selectorOptions ? <LayerSelector {...selectorOptions}></LayerSelector> : null}
         <HomeButton view={mapView.current} extent={extent} width={onlyWidth} />
-        <MyLocation
-          view={mapView.current}
-          dispatch={dispatch}
-          width={onlyWidth}
-        />
+        <MyLocation view={mapView.current} dispatch={dispatch} width={onlyWidth} />
         <GroupButton view={mapView.current} width={onlyWidth}>
           <section className="mx-auto grid max-w-prose gap-2 text-sky-900">
             <h2 className="mb-2 text-2xl font-bold">Quick finder tools</h2>
@@ -608,10 +582,7 @@ export default function PlssMap({ color, dispatch, drawerOpen, state }) {
               </TabList>
               <TabPanels className="mx-4">
                 <TabPanel>
-                  <Township
-                    dispatch={dispatch}
-                    apiKey={import.meta.env.VITE_API_KEY}
-                  />
+                  <Township dispatch={dispatch} apiKey={import.meta.env.VITE_API_KEY} />
                 </TabPanel>
                 <TabPanel>
                   <MonumentRecord dispatch={dispatch} />
diff --git a/src/components/pageElements/MyContent.jsx b/src/components/pageElements/MyContent.jsx
index 15a3b1aa..15df4c32 100644
--- a/src/components/pageElements/MyContent.jsx
+++ b/src/components/pageElements/MyContent.jsx
@@ -2,11 +2,12 @@ import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react';
 import { ChevronRightIcon } from '@heroicons/react/20/solid';
 import { ArrowLeftCircleIcon } from '@heroicons/react/24/outline';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useOpenClosed } from '@ugrc/utilities/hooks';
 import clsx from 'clsx';
+import { logEvent } from 'firebase/analytics';
+import { deleteDoc, doc, getFirestore } from 'firebase/firestore';
 import { httpsCallable } from 'firebase/functions';
 import { getDownloadURL, ref } from 'firebase/storage';
-import { deleteDoc, doc, getFirestore } from 'firebase/firestore';
-import { logEvent } from 'firebase/analytics';
 import PropTypes from 'prop-types';
 import { useState } from 'react';
 import {
@@ -19,12 +20,11 @@ import {
   useStorage,
   useUser,
 } from 'reactfire';
-import { useOpenClosed } from '@ugrc/utilities/hooks';
+import { timeSince } from '../../../functions/shared/index.js';
 import { Button, Link } from '../formElements/Buttons.jsx';
 import Card from '../formElements/Card.jsx';
 import { ObjectPreview } from '../formElements/FileUpload.jsx';
 import { Select } from '../formElements/Select.jsx';
-import { timeSince } from '../../../functions/shared/index.js';
 import Spacer from '../formElements/Spacer.jsx';
 import usePageView from '../hooks/usePageView.jsx';
 
@@ -124,16 +124,10 @@ const MyContent = ({ dispatch }) => {
                   </Card>
                 )}
                 {status === 'success' && name === 'Submissions' && (
-                  <Submissions
-                    items={data.data.submissions}
-                    dispatch={dispatch}
-                  />
+                  <Submissions items={data.data.submissions} dispatch={dispatch} />
                 )}
                 {status === 'success' && name === 'Reference Points' && (
-                  <ReferencePoints
-                    items={data.data.points}
-                    dispatch={dispatch}
-                  />
+                  <ReferencePoints items={data.data.points} dispatch={dispatch} />
                 )}
               </TabPanel>
             ))}
@@ -158,10 +152,7 @@ const ReferencePoints = ({ items, dispatch }) => {
         <h4 className="text-xl">Your reference point list is empty</h4>
         <p>
           You can create reference points in the{' '}
-          <Button
-            style="link"
-            onClick={() => dispatch({ type: 'menu/toggle', payload: 'points' })}
-          >
+          <Button style="link" onClick={() => dispatch({ type: 'menu/toggle', payload: 'points' })}>
             Add Reference Point
           </Button>{' '}
           section
@@ -174,19 +165,10 @@ const ReferencePoints = ({ items, dispatch }) => {
     <FirestoreProvider sdk={firestore}>
       <section className="inline-grid w-full gap-2">
         <Card>
-          <Select
-            label="Sort order"
-            options={sortOrders}
-            value={sortOrder}
-            onChange={setSortOrder}
-          ></Select>
+          <Select label="Sort order" options={sortOrders} value={sortOrder} onChange={setSortOrder}></Select>
         </Card>
         <Card>
-          <ItemList
-            dispatch={dispatch}
-            items={items}
-            sortOrder={sortOrder}
-          ></ItemList>
+          <ItemList dispatch={dispatch} items={items} sortOrder={sortOrder}></ItemList>
         </Card>
       </section>
     </FirestoreProvider>
@@ -203,8 +185,8 @@ const Submissions = ({ items, dispatch }) => {
       <Card>
         <h4 className="text-xl">Your submission list is empty</h4>
         <p>
-          You haven&apos;t submitted any monument record sheets yet. Start a
-          submission by clicking on the corner points. Get out and survey!
+          You haven&apos;t submitted any monument record sheets yet. Start a submission by clicking on the corner
+          points. Get out and survey!
         </p>
       </Card>
     );
@@ -261,7 +243,7 @@ const Submission = ({ item, dispatch }) => {
 
   try {
     getDownloadURL(ref(storage, attributes.ref)).then(setUrl);
-  } catch (e) {
+  } catch {
     logEvent(analytics, 'download-submission-error', {
       document: item.key,
     });
@@ -271,10 +253,7 @@ const Submission = ({ item, dispatch }) => {
     <div className="relative flex flex-col text-base">
       <span className="font-semibold">{id}</span>
       <div className="absolute right-0 top-0">
-        <span
-          className="flex select-none flex-col text-xs text-slate-500"
-          alt={dateFormatter.format(submission)}
-        >
+        <span className="flex select-none flex-col text-xs text-slate-500" alt={dateFormatter.format(submission)}>
           <span>submitted</span>
           <span>{timeSince(submission)}</span>
         </span>
@@ -282,13 +261,7 @@ const Submission = ({ item, dispatch }) => {
       <SubmissionStatus status={status} label={label} />
       <div className="mt-3 flex justify-center">
         {(url?.length ?? 0) > 0 ? (
-          <Link
-            style="primary"
-            buttonGroup={{ left: true }}
-            href={url}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
+          <Link style="primary" buttonGroup={{ left: true }} href={url} target="_blank" rel="noopener noreferrer">
             Download
           </Link>
         ) : (
@@ -299,9 +272,7 @@ const Submission = ({ item, dispatch }) => {
         <Button
           style="alternate"
           buttonGroup={{ middle: true }}
-          onClick={() =>
-            dispatch({ type: 'map/center-and-zoom', payload: geometry })
-          }
+          onClick={() => dispatch({ type: 'map/center-and-zoom', payload: geometry })}
         >
           Zoom
         </Button>
@@ -356,9 +327,7 @@ const SubmissionStatus = ({ status, label }) => (
     <div className="grid auto-cols-max grid-flow-col items-center text-sm">
       <span className={getClassesForStatus(status.received)}>Received</span>
       <ChevronRightIcon className="h-4 w-4 text-slate-500" />
-      <span className={getClassesForStatus(status.reviewed)}>
-        {getReviewStatus(status.reviewed)}
-      </span>
+      <span className={getClassesForStatus(status.reviewed)}>{getReviewStatus(status.reviewed)}</span>
       <ChevronRightIcon className="h-4 w-4 text-slate-500" />
       <span className={getClassesForStatus(status.published)}>Published</span>
     </div>
@@ -371,10 +340,7 @@ SubmissionStatus.propTypes = {
 
 const SelectedItem = ({ item, dispatch }) => (
   <>
-    <ArrowLeftCircleIcon
-      className="h-10 w-10"
-      onClick={() => dispatch({ type: 'set_selection', payload: null })}
-    />
+    <ArrowLeftCircleIcon className="h-10 w-10" onClick={() => dispatch({ type: 'set_selection', payload: null })} />
     <h3 className="text-lg font-bold">{item.name}</h3>
     <div>{dateFormatter.format(item.when)}</div>
     <div className="flex justify-evenly">
@@ -405,12 +371,7 @@ SelectedItem.propTypes = {
   dispatch: PropTypes.func,
 };
 
-const sortOrders = [
-  'New to Old',
-  'Old to New',
-  'Ascending (0-9 A-Z)',
-  'Descending (Z-A 0-9)',
-];
+const sortOrders = ['New to Old', 'Old to New', 'Ascending (0-9 A-Z)', 'Descending (Z-A 0-9)'];
 
 const sortFunction = (sortOrder, transform) => {
   return (one, two) => {
@@ -438,10 +399,7 @@ const ItemList = ({ items, dispatch, sortOrder }) => {
       {clone
         .sort(
           sortFunction(sortOrder, (x, y) => {
-            if (
-              sortOrder === 'Ascending (0-9 A-Z)' ||
-              sortOrder === 'Descending (Z-A 0-9)'
-            ) {
+            if (sortOrder === 'Ascending (0-9 A-Z)' || sortOrder === 'Descending (Z-A 0-9)') {
               return { a: x.attributes.name, b: y.attributes.name };
             }
 
@@ -482,10 +440,7 @@ const Item = ({ item, dispatch }) => {
         {item.attributes.name}
       </p>
       <div className="absolute right-0 top-0">
-        <span
-          className="flex select-none flex-col text-xs text-slate-500"
-          alt={dateFormatter.format(date)}
-        >
+        <span className="flex select-none flex-col text-xs text-slate-500" alt={dateFormatter.format(date)}>
           <span>created</span>
           <span>{timeSince(date)}</span>
         </span>
@@ -507,9 +462,7 @@ const Item = ({ item, dispatch }) => {
           <div className="flex flex-wrap justify-center gap-2">
             {item.photos.length === 0 && (
               <Card>
-                <p className="text-center">
-                  No photos are attached to this point.
-                </p>
+                <p className="text-center">No photos are attached to this point.</p>
               </Card>
             )}
             {item.photos.map((path) => (
@@ -525,9 +478,7 @@ const Item = ({ item, dispatch }) => {
         <Button
           style="alternate"
           buttonGroup={{ middle: true }}
-          onClick={() =>
-            dispatch({ type: 'map/center-and-zoom', payload: item.geometry })
-          }
+          onClick={() => dispatch({ type: 'map/center-and-zoom', payload: item.geometry })}
         >
           Zoom
         </Button>
@@ -538,9 +489,7 @@ const Item = ({ item, dispatch }) => {
           onClick={async () => {
             try {
               setStatus('loading');
-              await deleteDoc(
-                doc(db, 'submitters', user.uid, 'points', item.attributes.id),
-              );
+              await deleteDoc(doc(db, 'submitters', user.uid, 'points', item.attributes.id));
               queryClient.invalidateQueries(['my content']);
               setStatus('success');
             } catch (error) {
diff --git a/src/components/pageElements/MyContent.stories.jsx b/src/components/pageElements/MyContent.stories.jsx
index 2d5b3571..9c09aa77 100644
--- a/src/components/pageElements/MyContent.stories.jsx
+++ b/src/components/pageElements/MyContent.stories.jsx
@@ -3,12 +3,7 @@ import { initializeApp } from 'firebase/app';
 import { getAuth } from 'firebase/auth';
 import { getFunctions } from 'firebase/functions';
 import { getStorage } from 'firebase/storage';
-import {
-  AuthProvider,
-  FirebaseAppProvider,
-  FunctionsProvider,
-  StorageProvider,
-} from 'reactfire';
+import { AuthProvider, FirebaseAppProvider, FunctionsProvider, StorageProvider } from 'reactfire';
 import './../../index.css';
 import MyContent from './MyContent.jsx';
 
diff --git a/src/components/pageElements/Profile.jsx b/src/components/pageElements/Profile.jsx
index 5d6a726d..3c36c873 100644
--- a/src/components/pageElements/Profile.jsx
+++ b/src/components/pageElements/Profile.jsx
@@ -1,19 +1,19 @@
+import { ErrorMessage } from '@hookform/error-message';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { httpsCallable } from 'firebase/functions';
 import PropTypes from 'prop-types';
 import { useEffect } from 'react';
-import { httpsCallable } from 'firebase/functions';
-import { useUser, useFunctions } from 'reactfire';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { Controller, useForm, useWatch } from 'react-hook-form';
-import { yupResolver } from '@hookform/resolvers/yup';
-import { ErrorMessage } from '@hookform/error-message';
-import ErrorMessageTag from './ErrorMessage.jsx';
+import { useFunctions, useUser } from 'reactfire';
 import { profileSchema as schema } from '../../../functions/shared/cornerSubmission/Schema.js';
-import { Input, Label } from '../formElements/Inputs.jsx';
-import Card from '../formElements/Card.jsx';
 import { Button } from '../formElements/Buttons.jsx';
+import Card from '../formElements/Card.jsx';
 import FileUpload from '../formElements/FileUpload.jsx';
+import { Input, Label } from '../formElements/Inputs.jsx';
 import Note from '../formElements/Note.jsx';
 import usePageView from '../hooks/usePageView.jsx';
+import ErrorMessageTag from './ErrorMessage.jsx';
 
 const defaultValues = {
   displayName: '',
@@ -46,11 +46,10 @@ export default function Profile({ dispatch }) {
     staleTime: Infinity,
   });
 
-  const { control, formState, handleSubmit, register, reset, setFocus } =
-    useForm({
-      resolver: yupResolver(schema),
-      defaultValues,
-    });
+  const { control, formState, handleSubmit, register, reset, setFocus } = useForm({
+    resolver: yupResolver(schema),
+    defaultValues,
+  });
   const fields = useWatch({ control });
 
   useEffect(() => {
@@ -89,32 +88,12 @@ export default function Profile({ dispatch }) {
             <p>Loading...</p>
           ) : (
             <>
-              <Input
-                label="Name"
-                required={true}
-                {...register('displayName')}
-              />
-              <ErrorMessage
-                errors={formState.errors}
-                name="name"
-                as={ErrorMessageTag}
-              />
+              <Input label="Name" required={true} {...register('displayName')} />
+              <ErrorMessage errors={formState.errors} name="name" as={ErrorMessageTag} />
               <Input label="Email" required={true} {...register('email')} />
-              <ErrorMessage
-                errors={formState.errors}
-                name="email"
-                as={ErrorMessageTag}
-              />
-              <Input
-                label="Surveyor License"
-                required={false}
-                {...register('license')}
-              />
-              <ErrorMessage
-                errors={formState.errors}
-                name="license"
-                as={ErrorMessageTag}
-              />
+              <ErrorMessage errors={formState.errors} name="email" as={ErrorMessageTag} />
+              <Input label="Surveyor License" required={false} {...register('license')} />
+              <ErrorMessage errors={formState.errors} name="license" as={ErrorMessageTag} />
               <Label htmlFor="seal" className="font-semibold">
                 Surveyor Seal Image
               </Label>
@@ -135,23 +114,16 @@ export default function Profile({ dispatch }) {
                   />
                 )}
               />
-              <ErrorMessage
-                errors={formState.errors}
-                name="seal"
-                as={ErrorMessageTag}
-              />
+              <ErrorMessage errors={formState.errors} name="seal" as={ErrorMessageTag} />
               <Note>
-                Your surveyor license and seal will be displayed publicly on
-                monument record sheets. No other personal information will be
-                shared or made public.
+                Your surveyor license and seal will be displayed publicly on monument record sheets. No other personal
+                information will be shared or made public.
               </Note>
               <div className="mt-4 flex justify-between">
                 <Button
                   type="button"
                   style="secondary"
-                  onClick={() =>
-                    dispatch({ type: 'menu/toggle', payload: 'login' })
-                  }
+                  onClick={() => dispatch({ type: 'menu/toggle', payload: 'login' })}
                 >
                   Back
                 </Button>
diff --git a/src/components/pageElements/TieSheetList.jsx b/src/components/pageElements/TieSheetList.jsx
index 6e077b32..9f51d873 100644
--- a/src/components/pageElements/TieSheetList.jsx
+++ b/src/components/pageElements/TieSheetList.jsx
@@ -42,19 +42,12 @@ const TieSheetList = ({ blmPointId, children }) => {
       <div>
         <h4 className="text-xl font-medium">Monument Records</h4>
         {status === 'pending' && <div>Loading...</div>}
-        {status === 'error' && (
-          <div>The monument records are currently not available</div>
-        )}
-        {status === 'success' && (data?.length ?? 0) === 0 && (
-          <div>This point has no monument records</div>
-        )}
+        {status === 'error' && <div>The monument records are currently not available</div>}
+        {status === 'success' && (data?.length ?? 0) === 0 && <div>This point has no monument records</div>}
         {status === 'success' && data.length > 0 && (
           <ul>
             {data.map((x) => (
-              <li
-                key={x.name}
-                className="group hover:rounded hover:bg-slate-100"
-              >
+              <li key={x.name} className="group hover:rounded hover:bg-slate-100">
                 <span className="inline-flex align-middle">
                   <ArrowDownOnSquareIcon className="mr-2 inline-block h-4 w-4 text-sky-600 group-hover:text-sky-800" />
                   <a href={x.url} target="_blank" rel="noopener noreferrer">
diff --git a/src/components/pageElements/Welcome.jsx b/src/components/pageElements/Welcome.jsx
index 4cfd75fc..7afa1bc8 100644
--- a/src/components/pageElements/Welcome.jsx
+++ b/src/components/pageElements/Welcome.jsx
@@ -8,33 +8,24 @@ export default function Welcome({ dispatch }) {
     <main className="mt-3 inline-grid gap-4">
       <h2 className="text-2xl font-semibold">What is the PLSS</h2>
       <p className="ml-3">
-        Section corners in the Public Land Survey System (PLSS) form the
-        foundation for all descriptions of private property and public land
-        boundaries in Utah. All legal property descriptions start from PLSS
-        section corner markers, also known as monuments. Keeping the correct,
-        precise location of these monuments accessible greatly reduces boundary
-        discrepancies and disputes.
+        Section corners in the Public Land Survey System (PLSS) form the foundation for all descriptions of private
+        property and public land boundaries in Utah. All legal property descriptions start from PLSS section corner
+        markers, also known as monuments. Keeping the correct, precise location of these monuments accessible greatly
+        reduces boundary discrepancies and disputes.
       </p>
       <h2 className="text-2xl font-semibold">What is a monument</h2>
       <p className="ml-3">
-        Monuments are physical objects that mark the corners of the PLSS
-        sections. The monuments are usually metal rods or brass disks in the
-        ground. Each year hundreds of section corners that are used to determine
-        property locations are in danger of being destroyed from land
-        disturbances like new road projects, property development, and even
-        conservation projects that rehabilitate vegetation after wild land and
-        forest fires.
+        Monuments are physical objects that mark the corners of the PLSS sections. The monuments are usually metal rods
+        or brass disks in the ground. Each year hundreds of section corners that are used to determine property
+        locations are in danger of being destroyed from land disturbances like new road projects, property development,
+        and even conservation projects that rehabilitate vegetation after wild land and forest fires.
       </p>
       <h2 className="text-2xl font-semibold">Getting started</h2>
       <p className="ml-3">
-        You can use this website to view the location of the monuments and the
-        information about them. Navigate around the map and click on the PLSS
-        points to see more information or to submit a monument record for that
-        location. You will need to{' '}
-        <Button
-          onClick={() => dispatch({ type: 'menu/toggle', payload: 'login' })}
-          style="link"
-        >
+        You can use this website to view the location of the monuments and the information about them. Navigate around
+        the map and click on the PLSS points to see more information or to submit a monument record for that location.
+        You will need to{' '}
+        <Button onClick={() => dispatch({ type: 'menu/toggle', payload: 'login' })} style="link">
           log in
         </Button>{' '}
         to submit a monument record.
@@ -43,11 +34,7 @@ export default function Welcome({ dispatch }) {
       <h2 className="text-2xl font-semibold">Where can I get the data</h2>
       <p className="ml-3">
         All of the data in this app and more is made available for{' '}
-        <Link
-          href="https://gis.utah.gov/products/sgid/cadastre/"
-          target="_blank"
-          rel="noreferrer"
-        >
+        <Link href="https://gis.utah.gov/products/sgid/cadastre/" target="_blank" rel="noreferrer">
           download
         </Link>{' '}
         on the{' '}
diff --git a/src/components/pageElements/mapElements/GroupButton.jsx b/src/components/pageElements/mapElements/GroupButton.jsx
index d57c3ecf..c107f2ba 100644
--- a/src/components/pageElements/mapElements/GroupButton.jsx
+++ b/src/components/pageElements/mapElements/GroupButton.jsx
@@ -1,13 +1,8 @@
+import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react';
+import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
+import { useMapReady, useOpenClosed } from '@ugrc/utilities/hooks';
 import PropTypes from 'prop-types';
 import { Fragment, useEffect, useRef } from 'react';
-import {
-  Dialog,
-  DialogPanel,
-  Transition,
-  TransitionChild,
-} from '@headlessui/react';
-import { useMapReady, useOpenClosed } from '@ugrc/utilities/hooks';
-import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 import { Button } from '../../formElements/Buttons.jsx';
 
 export default function GroupButton({ view, width, children }) {
@@ -21,15 +16,12 @@ export default function GroupButton({ view, width, children }) {
     }
     const handle = node.current;
 
-    () => view?.ui?.remove(handle);
+    return () => view?.ui?.remove(handle);
   }, [view, ready, width]);
 
   return (
     <>
-      <div
-        ref={node}
-        className="relative flex h-8 w-8 rounded-full bg-white shadow-sm"
-      >
+      <div ref={node} className="relative flex h-8 w-8 rounded-full bg-white shadow-sm">
         <button
           name="open map finding tools"
           aria-label="open map finding tools"
diff --git a/src/components/pageElements/mapElements/HomeButton.jsx b/src/components/pageElements/mapElements/HomeButton.jsx
index 7c9e6ee9..8c20fd07 100644
--- a/src/components/pageElements/mapElements/HomeButton.jsx
+++ b/src/components/pageElements/mapElements/HomeButton.jsx
@@ -1,9 +1,9 @@
 import Extent from '@arcgis/core/geometry/Extent';
 import { HomeModernIcon } from '@heroicons/react/24/outline';
-import PropTypes from 'prop-types';
-import { useEffect, useRef } from 'react';
 import { useMapReady } from '@ugrc/utilities/hooks';
 import { logEvent } from 'firebase/analytics';
+import PropTypes from 'prop-types';
+import { useEffect, useRef } from 'react';
 import { useAnalytics } from 'reactfire';
 
 const goHome = async (view, extent) => {
@@ -25,14 +25,11 @@ export default function HomeButton({ view, extent, width }) {
     }
     const handle = me.current;
 
-    () => view?.ui?.remove(handle);
+    return () => view?.ui?.remove(handle);
   }, [view, ready, width]);
 
   return (
-    <div
-      ref={me}
-      className="relative flex h-8 w-8 rounded-full bg-white shadow-sm"
-    >
+    <div ref={me} className="relative flex h-8 w-8 rounded-full bg-white shadow-sm">
       <button
         className="flex flex-1 cursor-pointer items-center justify-center rounded-full bg-white"
         name="default view"
diff --git a/src/components/pageElements/mapElements/MonumentRecord.jsx b/src/components/pageElements/mapElements/MonumentRecord.jsx
index 6bedb796..4a11760f 100644
--- a/src/components/pageElements/mapElements/MonumentRecord.jsx
+++ b/src/components/pageElements/mapElements/MonumentRecord.jsx
@@ -1,17 +1,16 @@
+import Point from '@arcgis/core/geometry/Point';
+import { Transition } from '@headlessui/react';
 import { useQuery } from '@tanstack/react-query';
+import { useOpenClosed } from '@ugrc/utilities/hooks';
 import ky from 'ky';
 import PropTypes from 'prop-types';
 import { useEffect, useState } from 'react';
-import { Transition } from '@headlessui/react';
-import { useOpenClosed } from '@ugrc/utilities/hooks';
-import { Input } from '../../formElements/Inputs.jsx';
 import { Button } from '../../formElements/Buttons.jsx';
-import TieSheetList from '../TieSheetList.jsx';
-import Point from '@arcgis/core/geometry/Point';
+import { Input } from '../../formElements/Inputs.jsx';
 import usePageView from '../../hooks/usePageView.jsx';
+import TieSheetList from '../TieSheetList.jsx';
 const client = ky.create({
-  prefixUrl:
-    'https://services1.arcgis.com/99lidPhWCzftIe9K/arcgis/rest/services/PLSS_Monuments/FeatureServer/0',
+  prefixUrl: 'https://services1.arcgis.com/99lidPhWCzftIe9K/arcgis/rest/services/PLSS_Monuments/FeatureServer/0',
 });
 
 export default function MonumentRecord({ dispatch }) {
diff --git a/src/components/pageElements/mapElements/MonumentRecord.stories.jsx b/src/components/pageElements/mapElements/MonumentRecord.stories.jsx
index cb9ee338..061abf54 100644
--- a/src/components/pageElements/mapElements/MonumentRecord.stories.jsx
+++ b/src/components/pageElements/mapElements/MonumentRecord.stories.jsx
@@ -1,8 +1,8 @@
-import MonumentRecord from './MonumentRecord.jsx';
-import { FirebaseAppProvider, StorageProvider } from 'reactfire';
-import { getStorage } from 'firebase/storage';
-import { initializeApp } from 'firebase/app';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { initializeApp } from 'firebase/app';
+import { getStorage } from 'firebase/storage';
+import { FirebaseAppProvider, StorageProvider } from 'reactfire';
+import MonumentRecord from './MonumentRecord.jsx';
 
 let config = {
   apiKey: '',
diff --git a/src/components/pageElements/mapElements/MyLocation.jsx b/src/components/pageElements/mapElements/MyLocation.jsx
index cf4a94eb..49a2783b 100644
--- a/src/components/pageElements/mapElements/MyLocation.jsx
+++ b/src/components/pageElements/mapElements/MyLocation.jsx
@@ -1,9 +1,9 @@
 import { ViewfinderCircleIcon } from '@heroicons/react/24/outline';
+import { useMapReady } from '@ugrc/utilities/hooks';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { forwardRef, useEffect, useRef } from 'react';
 import useGeolocation from './useGeoLocation.js';
-import { useMapReady } from '@ugrc/utilities/hooks';
 
 export default function MyLocation({ view, dispatch, width }) {
   const node = useRef();
@@ -31,7 +31,7 @@ export default function MyLocation({ view, dispatch, width }) {
     }
     const handle = node.current;
 
-    () => view?.ui?.remove(handle);
+    return () => view?.ui?.remove(handle);
   }, [view, ready, width]);
 
   if (!ready) {
@@ -48,10 +48,7 @@ MyLocation.propTypes = {
 
 export const GpsButton = forwardRef(({ state, send }, ref) => {
   return (
-    <div
-      className="relative flex h-8 w-8 rounded-full bg-white shadow-sm"
-      ref={ref}
-    >
+    <div className="relative flex h-8 w-8 rounded-full bg-white shadow-sm" ref={ref}>
       <button
         name="activate geolocation"
         aria-label="activate geolocation"
@@ -72,15 +69,12 @@ export const GpsButton = forwardRef(({ state, send }, ref) => {
 
           send({ type: 'START_TRACKING' });
         }}
-        className={clsx(
-          'flex flex-1 items-center justify-center rounded-full',
-          {
-            'cursor-pointer bg-white': state.matches('idle'),
-            'cursor-not-allowed bg-slate-300': state.matches('notSupported'),
-            'cursor-progress bg-sky-400': state.matches('tracking.requesting'),
-            'cursor-pointer bg-red-700': state.matches('error'),
-          },
-        )}
+        className={clsx('flex flex-1 items-center justify-center rounded-full', {
+          'cursor-pointer bg-white': state.matches('idle'),
+          'cursor-not-allowed bg-slate-300': state.matches('notSupported'),
+          'cursor-progress bg-sky-400': state.matches('tracking.requesting'),
+          'cursor-pointer bg-red-700': state.matches('error'),
+        })}
       >
         {state.matches('tracking.active') && (
           <span className="absolute flex h-6 w-6 justify-center">
@@ -90,13 +84,9 @@ export const GpsButton = forwardRef(({ state, send }, ref) => {
         )}
         <ViewfinderCircleIcon
           className={clsx('h-6 w-6', {
-            'text-slate-700':
-              state.matches('idle') || state.matches('tracking.active'),
-            'text-white motion-safe:animate-spin': state.matches(
-              'tracking.requesting',
-            ),
-            'text-white':
-              state.matches('rejected') || state.matches('notSupported'),
+            'text-slate-700': state.matches('idle') || state.matches('tracking.active'),
+            'text-white motion-safe:animate-spin': state.matches('tracking.requesting'),
+            'text-white': state.matches('rejected') || state.matches('notSupported'),
           })}
         />
       </button>
diff --git a/src/components/pageElements/mapElements/MyLocation.stories.jsx b/src/components/pageElements/mapElements/MyLocation.stories.jsx
index 84f41617..dfb12648 100644
--- a/src/components/pageElements/mapElements/MyLocation.stories.jsx
+++ b/src/components/pageElements/mapElements/MyLocation.stories.jsx
@@ -10,31 +10,11 @@ const Template = () => {
 
   return (
     <div className="flex gap-2 text-white" style={{ width: '320px' }}>
-      <GpsButton
-        fwdRef={node}
-        send={() => {}}
-        state={{ matches: (value) => value === 'idle' }}
-      />
-      <GpsButton
-        fwdRef={node}
-        send={() => {}}
-        state={{ matches: (value) => value === 'tracking.requesting' }}
-      />
-      <GpsButton
-        fwdRef={node}
-        send={() => {}}
-        state={{ matches: (value) => value === 'tracking.active' }}
-      />
-      <GpsButton
-        fwdRef={node}
-        send={() => {}}
-        state={{ matches: (value) => value === 'error' }}
-      />
-      <GpsButton
-        fwdRef={node}
-        send={() => {}}
-        state={{ matches: (value) => value === 'notSupported' }}
-      />
+      <GpsButton fwdRef={node} send={() => {}} state={{ matches: (value) => value === 'idle' }} />
+      <GpsButton fwdRef={node} send={() => {}} state={{ matches: (value) => value === 'tracking.requesting' }} />
+      <GpsButton fwdRef={node} send={() => {}} state={{ matches: (value) => value === 'tracking.active' }} />
+      <GpsButton fwdRef={node} send={() => {}} state={{ matches: (value) => value === 'error' }} />
+      <GpsButton fwdRef={node} send={() => {}} state={{ matches: (value) => value === 'notSupported' }} />
     </div>
   );
 };
diff --git a/src/components/pageElements/mapElements/Township.jsx b/src/components/pageElements/mapElements/Township.jsx
index b9a7de37..f51810b7 100644
--- a/src/components/pageElements/mapElements/Township.jsx
+++ b/src/components/pageElements/mapElements/Township.jsx
@@ -2,13 +2,13 @@ import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react';
 import { useQuery } from '@tanstack/react-query';
 import clsx from 'clsx';
 import ky from 'ky';
+import naturalCompare from 'natural-compare-lite';
 import PropTypes from 'prop-types';
 import { useState } from 'react';
-import { Select } from '../../formElements/Select.jsx';
-import { sl, ub } from './townships.js';
-import naturalCompare from 'natural-compare-lite';
 import { Button } from '../../formElements/Buttons.jsx';
+import { Select } from '../../formElements/Select.jsx';
 import usePageView from '../../hooks/usePageView.jsx';
+import { sl, ub } from './townships.js';
 
 const client = ky.create({
   prefixUrl: 'https://api.mapserv.utah.gov/api/v1/search',
@@ -97,12 +97,7 @@ export default function Township({ apiKey, dispatch }) {
   });
 
   const { data: sections } = useQuery({
-    queryKey: [
-      'sections',
-      tabs[selectedTabIndex].value,
-      selectedTownship,
-      selectedRange,
-    ],
+    queryKey: ['sections', tabs[selectedTabIndex].value, selectedTownship, selectedRange],
     queryFn: async () => {
       const predicate = `trname='${tabs[selectedTabIndex].value}T${selectedTownship}R${selectedRange}'`;
 
@@ -140,9 +135,7 @@ export default function Township({ apiKey, dispatch }) {
         throw new Error('An incorrect response count was received.', count);
       }
 
-      const data = response.result[0].attributes.pairswith
-        .split('|')
-        .sort(naturalCompare);
+      const data = response.result[0].attributes.pairswith.split('|').sort(naturalCompare);
 
       return data;
     },
@@ -151,13 +144,7 @@ export default function Township({ apiKey, dispatch }) {
   });
 
   const { data: location, status } = useQuery({
-    queryKey: [
-      'location',
-      tabs[selectedTabIndex].value,
-      selectedTownship,
-      selectedRange,
-      selectedSection,
-    ],
+    queryKey: ['location', tabs[selectedTabIndex].value, selectedTownship, selectedRange, selectedSection],
     queryFn: async () => {
       const predicate = composePredicate(
         tabs[selectedTabIndex].number,
@@ -260,11 +247,7 @@ export default function Township({ apiKey, dispatch }) {
                   <Select
                     label="Range"
                     disabled={selectedTownship.length < 1}
-                    placeholder={
-                      selectedTownship
-                        ? 'Select the range'
-                        : 'Select the township'
-                    }
+                    placeholder={selectedTownship ? 'Select the range' : 'Select the township'}
                     options={ranges}
                     value={selectedRange}
                     onChange={(e) => {
@@ -276,11 +259,7 @@ export default function Township({ apiKey, dispatch }) {
                 <div className="flex-1">
                   <Select
                     label="Section"
-                    placeholder={
-                      selectedTownship
-                        ? 'Select the section'
-                        : 'Select the township'
-                    }
+                    placeholder={selectedTownship ? 'Select the section' : 'Select the township'}
                     disabled={selectedRange.length < 1}
                     options={sections}
                     value={selectedSection}
@@ -301,12 +280,7 @@ export default function Township({ apiKey, dispatch }) {
               payload: location,
               meta: {
                 scale: 10000,
-                label: getLabel(
-                  tabs[selectedTabIndex].value,
-                  selectedTownship,
-                  selectedRange,
-                  selectedSection,
-                ),
+                label: getLabel(tabs[selectedTabIndex].value, selectedTownship, selectedRange, selectedSection),
               },
             })
           }
@@ -316,8 +290,7 @@ export default function Township({ apiKey, dispatch }) {
       </div>
       {status === 'error' && (
         <div className="rounded border border-rose-900 p-4 text-sm text-rose-800">
-          There was a problem with this combination. Try again or try something
-          near by to help you find your way.
+          There was a problem with this combination. Try again or try something near by to help you find your way.
         </div>
       )}
     </section>
diff --git a/src/components/pageElements/mapElements/Township.stories.jsx b/src/components/pageElements/mapElements/Township.stories.jsx
index 0783d25f..8dbddbf7 100644
--- a/src/components/pageElements/mapElements/Township.stories.jsx
+++ b/src/components/pageElements/mapElements/Township.stories.jsx
@@ -1,6 +1,6 @@
-import Township from './Township.jsx';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import Township from './Township.jsx';
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
diff --git a/src/components/pageElements/mapElements/townships.js b/src/components/pageElements/mapElements/townships.js
index b5a2d4bd..ef416cb4 100644
--- a/src/components/pageElements/mapElements/townships.js
+++ b/src/components/pageElements/mapElements/townships.js
@@ -1,17 +1,4 @@
-export const ub = [
-  '1N',
-  '2N',
-  '3N',
-  '4N',
-  '5N',
-  '1S',
-  '2S',
-  '3S',
-  '4S',
-  '5S',
-  '6S',
-  '7S',
-];
+export const ub = ['1N', '2N', '3N', '4N', '5N', '1S', '2S', '3S', '4S', '5S', '6S', '7S'];
 export const sl = [
   '1N',
   '2N',
diff --git a/src/components/reducers/AppReducer.js b/src/components/reducers/AppReducer.js
index 2b34ccca..72cbc37e 100644
--- a/src/components/reducers/AppReducer.js
+++ b/src/components/reducers/AppReducer.js
@@ -3,10 +3,7 @@ const toggleDrawer = (draft, action) => {
   if (action.payload === '') {
     draft.drawerOpen = false;
     draft.activeComponent = action.payload;
-  } else if (
-    draft.activeComponent === action.payload &&
-    action.payload !== 'identify'
-  ) {
+  } else if (draft.activeComponent === action.payload && action.payload !== 'identify') {
     draft.drawerOpen = !draft.drawerOpen;
     draft.activeComponent = null;
   } else {
@@ -71,8 +68,7 @@ expected
       break;
     }
     case 'add-point/activate': {
-      draft.map.activeTool =
-        draft.map.activeTool !== 'add-point' ? 'add-point' : null;
+      draft.map.activeTool = draft.map.activeTool !== 'add-point' ? 'add-point' : null;
       if (draft.map.activeTool === null) {
         draft.addPoint.geometry = null;
       }
@@ -80,7 +76,7 @@ expected
       break;
     }
     case 'add-point/reset': {
-      draft.map.activeTool === null;
+      draft.map.activeTool = null;
       draft.addPoint = {
         color: '',
         geometry: null,
diff --git a/src/emails/cancelled_submission.html b/src/emails/cancelled_submission.html
index 0b77c45a..1aa64cb7 100644
--- a/src/emails/cancelled_submission.html
+++ b/src/emails/cancelled_submission.html
@@ -1,18 +1,15 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" xmlns:v="urn:schemas-microsoft-com:vml">
-
-<head>
-  <meta charset="utf-8">
-  <meta name="x-apple-disable-message-reformatting">
-  <meta http-equiv="x-ua-compatible" content="ie=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="format-detection" content="telephone=no, date=no, address=no, email=no">
-  <!--[if mso]>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="x-apple-disable-message-reformatting" />
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="format-detection" content="telephone=no, date=no, address=no, email=no" />
+    <!--[if mso]>
       <noscript>
         <xml>
-          <o:OfficeDocumentSettings
-            xmlns:o="urn:schemas-microsoft-com:office:office"
-          >
+          <o:OfficeDocumentSettings xmlns:o="urn:schemas-microsoft-com:office:office">
             <o:PixelsPerInch>96</o:PixelsPerInch>
           </o:OfficeDocumentSettings>
         </xml>
@@ -29,55 +26,92 @@
         h4,
         h5,
         h6 {
-          font-family: "Segoe UI", sans-serif;
+          font-family: 'Segoe UI', sans-serif;
           mso-line-height-rule: exactly;
         }
       </style>
     <![endif]-->
-  <title>PLSS Corner Management - A monument submission was cancelled 😥️</title>
-</head>
+    <title>PLSS Corner Management - A monument submission was cancelled 😥️</title>
+  </head>
 
-<body
-  style="margin: 0; width: 100%; padding: 0; word-break: break-word; -webkit-font-smoothing: antialiased; background-color: #075985">
-  <div style="display: none">
-    🍃️ Just like that {{blmPointId}} is gone&#847; &#847; &#847; &#847; &#847; &#847; &#847;
-    &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
-    &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
-    &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
-    &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
-    &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &zwnj;
-    &#160;&#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
-    &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
-    &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
-    &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
-    &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
-    &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &zwnj;
-    &#160;&#847; &#847; &#847; &#847; &#847;
-  </div>
-  <div style="padding-top: 40px"></div>
-  <div role="article" aria-roledescription="email"
-    aria-label="PLSS Corner Management - A monument submission was cancelled 😥" lang="en"
-    style="margin-left: auto; margin-right: auto; max-width: 65ch; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji">
+  <body
+    style="
+      margin: 0;
+      width: 100%;
+      padding: 0;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+      background-color: #075985;
+    "
+  >
+    <div style="display: none">
+      🍃️ Just like that {{blmPointId}} is gone&#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
+      &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
+      &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
+      &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &zwnj;
+      &#160;&#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
+      &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
+      &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
+      &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &zwnj; &#160;&#847; &#847; &#847; &#847;
+      &#847;
+    </div>
+    <div style="padding-top: 40px"></div>
     <div
-      style=" border-radius: 8px; border-width: 8px; border-style: solid; border-color: #fb7185; background-color: #F8FAFC; padding-left: 48px; padding-right: 48px; color: #0c4a6e">
-      <div style="display: flex; flex-direction: row; gap: 16px; padding-top: 40px">
-        <img style="width: 56px;height:78px"
-          src="http://cdn.mcauto-images-production.sendgrid.net/c93fe25e6da3e6b7/c9fd6b90-9841-41d3-a607-96bff9e8417d/402x524.png" />
-        <div style="margin-left: 14px;line-height: 1;">
-          <div style="font-size: 25px; font-weight: 600">Monument Record Cancellation</div>
-          <div style="font-size: 36px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.025em">Utah PLSS
+      role="article"
+      aria-roledescription="email"
+      aria-label="PLSS Corner Management - A monument submission was cancelled 😥"
+      lang="en"
+      style="
+        margin-left: auto;
+        margin-right: auto;
+        max-width: 65ch;
+        font-family:
+          ui-sans-serif,
+          system-ui,
+          -apple-system,
+          BlinkMacSystemFont,
+          Segoe UI,
+          Roboto,
+          Helvetica Neue,
+          Arial,
+          Noto Sans,
+          sans-serif,
+          Apple Color Emoji,
+          Segoe UI Emoji,
+          Segoe UI Symbol,
+          Noto Color Emoji;
+      "
+    >
+      <div
+        style="
+          border-radius: 8px;
+          border-width: 8px;
+          border-style: solid;
+          border-color: #fb7185;
+          background-color: #f8fafc;
+          padding-left: 48px;
+          padding-right: 48px;
+          color: #0c4a6e;
+        "
+      >
+        <div style="display: flex; flex-direction: row; gap: 16px; padding-top: 40px">
+          <img
+            style="width: 56px; height: 78px"
+            src="http://cdn.mcauto-images-production.sendgrid.net/c93fe25e6da3e6b7/c9fd6b90-9841-41d3-a607-96bff9e8417d/402x524.png"
+          />
+          <div style="margin-left: 14px; line-height: 1">
+            <div style="font-size: 25px; font-weight: 600">Monument Record Cancellation</div>
+            <div style="font-size: 36px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.025em">
+              Utah PLSS
+            </div>
           </div>
         </div>
-      </div>
-      <p style="text-align: center; font-size: 20px;font-weight: 600;">{{blmPointId}}</p>
-      <div style="padding-bottom: 40px; line-height: 1.625">
-        <p>
-          A monument record ({{type}}) was cancelled by {{surveyor}}.
-        </p>
+        <p style="text-align: center; font-size: 20px; font-weight: 600">{{blmPointId}}</p>
+        <div style="padding-bottom: 40px; line-height: 1.625">
+          <p>A monument record ({{type}}) was cancelled by {{surveyor}}.</p>
+        </div>
       </div>
     </div>
-  </div>
-  <div style="padding-top: 40px"></div>
-</body>
-
+    <div style="padding-top: 40px"></div>
+  </body>
 </html>
diff --git a/src/emails/new_submission.html b/src/emails/new_submission.html
index c8a9881e..be062177 100644
--- a/src/emails/new_submission.html
+++ b/src/emails/new_submission.html
@@ -1,18 +1,15 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" xmlns:v="urn:schemas-microsoft-com:vml">
-
-<head>
-  <meta charset="utf-8">
-  <meta name="x-apple-disable-message-reformatting">
-  <meta http-equiv="x-ua-compatible" content="ie=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="format-detection" content="telephone=no, date=no, address=no, email=no">
-  <!--[if mso]>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="x-apple-disable-message-reformatting" />
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="format-detection" content="telephone=no, date=no, address=no, email=no" />
+    <!--[if mso]>
       <noscript>
         <xml>
-          <o:OfficeDocumentSettings
-            xmlns:o="urn:schemas-microsoft-com:office:office"
-          >
+          <o:OfficeDocumentSettings xmlns:o="urn:schemas-microsoft-com:office:office">
             <o:PixelsPerInch>96</o:PixelsPerInch>
           </o:OfficeDocumentSettings>
         </xml>
@@ -29,57 +26,95 @@
         h4,
         h5,
         h6 {
-          font-family: "Segoe UI", sans-serif;
+          font-family: 'Segoe UI', sans-serif;
           mso-line-height-rule: exactly;
         }
       </style>
     <![endif]-->
-  <title>PLSS Corner Management - A monument record was created 🙌</title>
-</head>
+    <title>PLSS Corner Management - A monument record was created 🙌</title>
+  </head>
 
-<body
-  style="margin: 0; width: 100%; padding: 0; word-break: break-word; -webkit-font-smoothing: antialiased; background-color: #075985">
-  <div style="display: none">
-    🏆 for {{surveyor}} submitting a record for {{blmPointId}}&#847; &#847; &#847; &#847; &#847; &#847; &#847;
-    &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
-    &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
-    &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
-    &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
-    &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &zwnj;
-    &#160;&#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
-    &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
-    &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
-    &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
-    &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
-    &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &zwnj;
-    &#160;&#847; &#847; &#847; &#847; &#847;
-  </div>
-  <div style="padding-top: 40px"></div>
-  <div role="article" aria-roledescription="email"
-    aria-label="PLSS Corner Management - A monument record was created 🙌" lang="en"
-    style="margin-left: auto; margin-right: auto; max-width: 65ch; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji">
+  <body
+    style="
+      margin: 0;
+      width: 100%;
+      padding: 0;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+      background-color: #075985;
+    "
+  >
+    <div style="display: none">
+      🏆 for {{surveyor}} submitting a record for {{blmPointId}}&#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
+      &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
+      &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
+      &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
+      &zwnj; &#160;&#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
+      &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
+      &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
+      &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &zwnj; &#160;&#847; &#847; &#847;
+      &#847; &#847;
+    </div>
+    <div style="padding-top: 40px"></div>
     <div
-      style=" border-radius: 8px; border-width: 8px; border-style: solid; border-color: #7dd3fc; background-color: #F8FAFC; padding-left: 48px; padding-right: 48px; color: #0c4a6e">
-      <div style="display: flex; flex-direction: row; gap: 16px; padding-top: 40px">
-        <img style="width: 56px;height:78px"
-          src="http://cdn.mcauto-images-production.sendgrid.net/c93fe25e6da3e6b7/c9fd6b90-9841-41d3-a607-96bff9e8417d/402x524.png" />
-        <div style="margin-left: 14px;line-height: 1;">
-          <div style="font-size: 25px; font-weight: 600">Monument Record Submission</div>
-          <div style="font-size: 36px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.025em">Utah PLSS
+      role="article"
+      aria-roledescription="email"
+      aria-label="PLSS Corner Management - A monument record was created 🙌"
+      lang="en"
+      style="
+        margin-left: auto;
+        margin-right: auto;
+        max-width: 65ch;
+        font-family:
+          ui-sans-serif,
+          system-ui,
+          -apple-system,
+          BlinkMacSystemFont,
+          Segoe UI,
+          Roboto,
+          Helvetica Neue,
+          Arial,
+          Noto Sans,
+          sans-serif,
+          Apple Color Emoji,
+          Segoe UI Emoji,
+          Segoe UI Symbol,
+          Noto Color Emoji;
+      "
+    >
+      <div
+        style="
+          border-radius: 8px;
+          border-width: 8px;
+          border-style: solid;
+          border-color: #7dd3fc;
+          background-color: #f8fafc;
+          padding-left: 48px;
+          padding-right: 48px;
+          color: #0c4a6e;
+        "
+      >
+        <div style="display: flex; flex-direction: row; gap: 16px; padding-top: 40px">
+          <img
+            style="width: 56px; height: 78px"
+            src="http://cdn.mcauto-images-production.sendgrid.net/c93fe25e6da3e6b7/c9fd6b90-9841-41d3-a607-96bff9e8417d/402x524.png"
+          />
+          <div style="margin-left: 14px; line-height: 1">
+            <div style="font-size: 25px; font-weight: 600">Monument Record Submission</div>
+            <div style="font-size: 36px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.025em">
+              Utah PLSS
+            </div>
           </div>
         </div>
-      </div>
-      <p style="text-align: center; font-size: 20px;font-weight: 600;">{{blmPointId}}</p>
-      <div style="padding-bottom: 40px; line-height: 1.625">
-        <p>
-          A monument record ({{type}}) was submitted in {{county}} by {{surveyor}}. The submission PDF is attached to
-          this
-          email.
-        </p>
+        <p style="text-align: center; font-size: 20px; font-weight: 600">{{blmPointId}}</p>
+        <div style="padding-bottom: 40px; line-height: 1.625">
+          <p>
+            A monument record ({{type}}) was submitted in {{county}} by {{surveyor}}. The submission PDF is attached to
+            this email.
+          </p>
+        </div>
       </div>
     </div>
-  </div>
-  <div style="padding-top: 40px"></div>
-</body>
-
+    <div style="padding-top: 40px"></div>
+  </body>
 </html>
diff --git a/src/main.jsx b/src/main.jsx
index a0eee1fc..23cb061c 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,10 +1,10 @@
-import { StrictMode } from 'react';
-import { createRoot } from 'react-dom/client';
+import '@arcgis/core/assets/esri/themes/light/main.css';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
 import { FirebaseAppProvider } from 'reactfire';
 import App from './components/app/App.jsx';
-import '@arcgis/core/assets/esri/themes/light/main.css';
 import './index.css';
 
 let firebaseConfig = {
diff --git a/storage.rules.test.mjs b/storage.rules.test.mjs
index ac2cf9d0..c05e133a 100644
--- a/storage.rules.test.mjs
+++ b/storage.rules.test.mjs
@@ -1,11 +1,7 @@
-import {
-  assertFails,
-  assertSucceeds,
-  initializeTestEnvironment,
-} from '@firebase/rules-unit-testing';
-import { afterAll, beforeAll, beforeEach, describe, it } from 'vitest';
-import { readFileSync } from 'fs';
+import { assertFails, assertSucceeds, initializeTestEnvironment } from '@firebase/rules-unit-testing';
 import { Buffer } from 'buffer';
+import { readFileSync } from 'fs';
+import { afterAll, beforeAll, beforeEach, describe, it } from 'vitest';
 
 let testEnv;
 const userId = 'user_abc';
@@ -20,9 +16,7 @@ const getPaths = (storage) => {
     submitter: storage.ref(`submitters/new`),
     userImage: storage.ref(`submitters/${userId}/new`).child('userFolder.png'),
     user: storage.ref(`submitters/${userId}/new`),
-    pointImage: storage
-      .ref(`submitters/${userId}/new/${blmPoint}`)
-      .child('pointFolder.png'),
+    pointImage: storage.ref(`submitters/${userId}/new/${blmPoint}`).child('pointFolder.png'),
     point: storage.ref(`submitters/${userId}/new/${blmPoint}`),
   };
 };
@@ -67,13 +61,9 @@ describe('storage', () => {
     const storage = testEnv.unauthenticatedContext().storage();
     const { submitter, user, point } = getPaths(storage);
 
-    await assertFails(
-      submitter.child('test.png').put(loadImage(), { contentType })
-    );
+    await assertFails(submitter.child('test.png').put(loadImage(), { contentType }));
     await assertFails(user.child('test.png').put(loadImage(), { contentType }));
-    await assertFails(
-      point.child('test.png').put(loadImage(), { contentType })
-    );
+    await assertFails(point.child('test.png').put(loadImage(), { contentType }));
   });
 
   it('disallows metadata access for unauthorized users', async () => {
@@ -98,42 +88,29 @@ describe('storage', () => {
     const storage = testEnv.authenticatedContext(userId).storage();
     const { submitter, user, point } = getPaths(storage);
 
-    await assertFails(
-      submitter
-        .child('test.doc')
-        .put(loadImage(), { contentType: 'text/plain' })
-    );
-    await assertFails(
-      user.child('test.doc').put(loadImage(), { contentType: 'text/plain' })
-    );
-    await assertFails(
-      point.child('test.doc').put(loadImage(), { contentType: 'text/plain' })
-    );
+    await assertFails(submitter.child('test.doc').put(loadImage(), { contentType: 'text/plain' }));
+    await assertFails(user.child('test.doc').put(loadImage(), { contentType: 'text/plain' }));
+    await assertFails(point.child('test.doc').put(loadImage(), { contentType: 'text/plain' }));
   });
 
   it('allows write access for authorized users to their folder when uploading image files', async () => {
     const storage = testEnv.authenticatedContext(userId).storage();
     const { submitter, user, point } = getPaths(storage);
 
-    await assertFails(
-      submitter.child('test.png').put(loadImage(), { contentType })
-    );
+    await assertFails(submitter.child('test.png').put(loadImage(), { contentType }));
     await assertFails(user.child('test.png').put(loadImage(), { contentType }));
-    await assertSucceeds(
-      point.child('test.png').put(loadImage(), { contentType })
-    );
+    await assertSucceeds(point.child('test.png').put(loadImage(), { contentType }));
   });
 
   it('disallows files greater than 5MB', async () => {
     const storage = testEnv.authenticatedContext(userId).storage();
 
-    const getRef = (submitter, imageName) =>
-      storage.ref(`submitters/${submitter}`).child(imageName);
+    const getRef = (submitter, imageName) => storage.ref(`submitters/${submitter}`).child(imageName);
 
     await assertFails(
       getRef(userId, 'big.png').put(createMBImage(5.1), {
         contentType,
-      })
+      }),
     );
   });
 });
diff --git a/vite.config.js b/vite.config.js
index 14771710..fb960a72 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,5 +1,5 @@
-import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react-swc';
+import { defineConfig } from 'vite';
 import eslintPlugin from 'vite-plugin-eslint';
 import loadVersion from 'vite-plugin-package-version';