diff --git a/src/components/app-bars/ImageViewerAppBar/ImageViewerAppBar.tsx b/src/components/app-bars/ImageViewerAppBar/ImageViewerAppBar.tsx
index 4c7a5c49..0eddc8f5 100644
--- a/src/components/app-bars/ImageViewerAppBar/ImageViewerAppBar.tsx
+++ b/src/components/app-bars/ImageViewerAppBar/ImageViewerAppBar.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 import { ArrowBack } from "@mui/icons-material";
@@ -10,26 +10,32 @@ import {
   Typography,
 } from "@mui/material";
 
-import { useDialog } from "hooks";
+import { useDialogHotkey } from "hooks";
 
 import { ExitAnnotatorDialog } from "components/dialogs";
 
 import { LogoLoader } from "components/styled-components";
+import { HotkeyContext } from "utils/common/enums";
 
 export const ImageViewerAppBar = () => {
+  const [returnToProject, setReturnToProject] = useState(false);
   const {
     onClose: onCloseExitAnnotatorDialog,
     onOpen: onOpenExitAnnotatorDialog,
-    open: openExitAnnotatorDialog,
-  } = useDialog();
+    open: ExitAnnotatorDialogOpen,
+  } = useDialogHotkey(HotkeyContext.ConfirmationDialog);
 
   const navigate = useNavigate();
 
   const onReturnToMainProject = () => {
-    onCloseExitAnnotatorDialog();
-    navigate("/");
+    setReturnToProject(true);
   };
 
+  useEffect(() => {
+    //NOTE: Wait until ExitAnnotatorDialogOpen is finished updating. Otherwise unmounted component access warning
+    if (returnToProject && !ExitAnnotatorDialogOpen) navigate("/");
+  }, [returnToProject, ExitAnnotatorDialogOpen, navigate]);
+
   return (
     <>
       <AppBar
@@ -58,9 +64,9 @@ export const ImageViewerAppBar = () => {
       </AppBar>
 
       <ExitAnnotatorDialog
-        onReturnToProject={onReturnToMainProject}
+        returnToProject={onReturnToMainProject}
         onClose={onCloseExitAnnotatorDialog}
-        open={openExitAnnotatorDialog}
+        open={ExitAnnotatorDialogOpen}
       />
     </>
   );
diff --git a/src/components/app-bars/ProjectToolbar/ProjectToolbar.tsx b/src/components/app-bars/ProjectToolbar/ProjectToolbar.tsx
index aa7f1709..eae96f53 100644
--- a/src/components/app-bars/ProjectToolbar/ProjectToolbar.tsx
+++ b/src/components/app-bars/ProjectToolbar/ProjectToolbar.tsx
@@ -45,12 +45,12 @@ import {
   useThingSelection,
 } from "hooks";
 import { TooltipTitle } from "components/tooltips";
-import { HotkeyView } from "utils/common/enums";
+import { HotkeyContext } from "utils/common/enums";
 import { useNavigate } from "react-router-dom";
 import { selectActiveCategories } from "store/project/reselectors";
 import { imageViewerSlice } from "store/imageViewer";
 import { TooltipButton } from "components/styled-components/TooltipButton/TooltipButton";
-import { DialogWithAction } from "components/dialogs";
+import { ConfirmationDialog } from "components/dialogs";
 import { ImageCategoryMenu } from "components/menus";
 import { Partition } from "utils/models/enums";
 import { dataSlice } from "store/data";
@@ -78,7 +78,7 @@ export const ProjectToolbar = () => {
     onClose: handleCloseDeleteImagesDialog,
     onOpen: onOpenDeleteImagesDialog,
     open: deleteImagesDialogisOpen,
-  } = useDialogHotkey(HotkeyView.DialogWithAction);
+  } = useDialogHotkey(HotkeyContext.ConfirmationDialog);
 
   const handleDelete = () => {
     dispatch(
@@ -96,20 +96,11 @@ export const ProjectToolbar = () => {
         selectedThingIds: allSelectedThingIds,
       })
     );
-    dispatch(
-      applicationSettingsSlice.actions.unregisterHotkeyView({
-        hotkeyView: HotkeyView.MainImageGridAppBar,
-      })
-    );
+
     navigate("/imageviewer");
   };
 
   const handleNavigateMeasurements = () => {
-    dispatch(
-      applicationSettingsSlice.actions.unregisterHotkeyView({
-        hotkeyView: HotkeyView.MainImageGridAppBar,
-      })
-    );
     navigate("/measurements");
   };
 
@@ -211,7 +202,7 @@ export const ProjectToolbar = () => {
         )}
       </Toolbar>
 
-      <DialogWithAction
+      <ConfirmationDialog
         title={`Delete ${pluralize(
           "Object",
           unfilteredSelectedThings.length
@@ -392,6 +383,8 @@ const ProjectTextField = () => {
             inputRef={inputRef}
             size="small"
             sx={{ ml: 5 }}
+            variant="standard"
+            inputProps={{ min: 0, style: { textAlign: "center" } }}
           />
         </FormControl>
       )}
diff --git a/src/components/cards/ExampleProjectCard/ExampleProjectCard.tsx b/src/components/cards/ExampleProjectCard/ExampleProjectCard.tsx
index ea5331bc..29795987 100644
--- a/src/components/cards/ExampleProjectCard/ExampleProjectCard.tsx
+++ b/src/components/cards/ExampleProjectCard/ExampleProjectCard.tsx
@@ -125,10 +125,7 @@ export const ExampleProjectCard = ({
       );
       if (!deserializedProject) return;
 
-      const project = deserializedProject.project;
-      const data = deserializedProject.data;
-
-      const classifier = deserializedProject.classifier;
+      const { project, data, classifier } = deserializedProject;
 
       batch(() => {
         // loadPercent will be set to 1 here
diff --git a/src/components/dialogs/BaseExampleDialog/index.ts b/src/components/dialogs/BaseExampleDialog/index.ts
deleted file mode 100644
index 598dcbf1..00000000
--- a/src/components/dialogs/BaseExampleDialog/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { BaseExampleDialog } from "./BaseExampleDialog";
diff --git a/src/components/dialogs/CategoryDialog/CategoryDialog.tsx b/src/components/dialogs/CategoryDialog/CategoryDialog.tsx
index 9a766da3..5c1b0f64 100644
--- a/src/components/dialogs/CategoryDialog/CategoryDialog.tsx
+++ b/src/components/dialogs/CategoryDialog/CategoryDialog.tsx
@@ -1,6 +1,6 @@
 import { TextField, Box } from "@mui/material";
 
-import { DialogWithAction } from "../DialogWithAction";
+import { ConfirmationDialog } from "../ConfirmationDialog";
 import { useCategoryValidation } from "hooks/useCategoryValidation/useCategoryValidation";
 import { ColorIcon } from "components/controls";
 
@@ -37,7 +37,9 @@ export const CategoryDialog = ({
   } = useCategoryValidation({ kind, initName, initColor });
 
   const handleConfirm = () => {
-    onConfirm(name, color, kind);
+    if (!isInvalidName) {
+      onConfirm(name, color, kind);
+    }
   };
 
   const handleClose = () => {
@@ -46,7 +48,7 @@ export const CategoryDialog = ({
   };
 
   return (
-    <DialogWithAction
+    <ConfirmationDialog
       onClose={handleClose}
       isOpen={open}
       title={`${action} Category`}
diff --git a/src/components/dialogs/CreateCategoryDialog/CreateCategoryDialog.tsx b/src/components/dialogs/CategoryDialog/CreateCategoryDialog.tsx
similarity index 93%
rename from src/components/dialogs/CreateCategoryDialog/CreateCategoryDialog.tsx
rename to src/components/dialogs/CategoryDialog/CreateCategoryDialog.tsx
index 8a30ec6a..b22d4869 100644
--- a/src/components/dialogs/CreateCategoryDialog/CreateCategoryDialog.tsx
+++ b/src/components/dialogs/CategoryDialog/CreateCategoryDialog.tsx
@@ -1,6 +1,6 @@
 import { useDispatch } from "react-redux";
 import { dataSlice } from "store/data/dataSlice";
-import { CategoryDialog } from "../CategoryDialog";
+import { CategoryDialog } from "./CategoryDialog";
 
 type CreateCategoriesDialogProps = {
   onClose: () => void;
diff --git a/src/components/dialogs/UpdateCategoryDialog/UpdateCategoryDialog.tsx b/src/components/dialogs/CategoryDialog/UpdateCategoryDialog.tsx
similarity index 94%
rename from src/components/dialogs/UpdateCategoryDialog/UpdateCategoryDialog.tsx
rename to src/components/dialogs/CategoryDialog/UpdateCategoryDialog.tsx
index 23ee5d23..1f1bb45b 100644
--- a/src/components/dialogs/UpdateCategoryDialog/UpdateCategoryDialog.tsx
+++ b/src/components/dialogs/CategoryDialog/UpdateCategoryDialog.tsx
@@ -1,6 +1,6 @@
 import { useDispatch } from "react-redux";
 import { dataSlice } from "store/data/dataSlice";
-import { CategoryDialog } from "../CategoryDialog";
+import { CategoryDialog } from "./CategoryDialog";
 import { Category } from "store/data/types";
 
 type UpdateCategoriesDialogProps = {
diff --git a/src/components/dialogs/CategoryDialog/index.ts b/src/components/dialogs/CategoryDialog/index.ts
index 3b8d775a..4677acd5 100644
--- a/src/components/dialogs/CategoryDialog/index.ts
+++ b/src/components/dialogs/CategoryDialog/index.ts
@@ -1 +1,2 @@
-export { CategoryDialog } from "./CategoryDialog";
+export { CreateCategoryDialog } from "./CreateCategoryDialog";
+export { UpdateCategoryDialog } from "./UpdateCategoryDialog";
diff --git a/src/components/dialogs/DialogWithAction/DialogWithAction.stories.tsx b/src/components/dialogs/ConfirmationDialog/ConfirmationDialog.stories.tsx
similarity index 72%
rename from src/components/dialogs/DialogWithAction/DialogWithAction.stories.tsx
rename to src/components/dialogs/ConfirmationDialog/ConfirmationDialog.stories.tsx
index db0e1adc..25cf943a 100644
--- a/src/components/dialogs/DialogWithAction/DialogWithAction.stories.tsx
+++ b/src/components/dialogs/ConfirmationDialog/ConfirmationDialog.stories.tsx
@@ -1,9 +1,10 @@
+// ignore-no-logs
 import type { Meta, StoryObj } from "@storybook/react";
-import { DialogWithActionSHK } from "./DialogWithActionSHK";
+import { ConfirmationDialogSHK } from "./ConfirmationDialogSHK";
 
-const meta: Meta<typeof DialogWithActionSHK> = {
-  title: "Common/DialogWithAction",
-  component: DialogWithActionSHK,
+const meta: Meta<typeof ConfirmationDialogSHK> = {
+  title: "Common/ConfirmationDialog",
+  component: ConfirmationDialogSHK,
   tags: ["autodocs"],
   parameters: {
     docs: {
@@ -16,11 +17,11 @@ const meta: Meta<typeof DialogWithActionSHK> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof DialogWithActionSHK>;
+type Story = StoryObj<typeof ConfirmationDialogSHK>;
 
 export const Default: Story = {
   args: {
-    title: "Dialog with Action",
+    title: "Confirmation Dialog",
     content: "Dialog content",
     onConfirm: () => {
       console.log("I'm confirmed");
@@ -34,7 +35,7 @@ export const Default: Story = {
 
 export const AltText: Story = {
   args: {
-    title: "Dialog with Action",
+    title: "Confirmation Dialog",
     content: "Dialog content",
     onConfirm: () => {
       console.log("I'm confirmed");
@@ -49,7 +50,7 @@ export const AltText: Story = {
 
 export const WithReject: Story = {
   args: {
-    title: "Dialog with Action",
+    title: "Confirmation Dialog",
     content: "Dialog content",
     onConfirm: () => {
       console.log("I'm confirmed");
diff --git a/src/components/dialogs/DialogWithAction/DialogWithAction.tsx b/src/components/dialogs/ConfirmationDialog/ConfirmationDialog.tsx
similarity index 73%
rename from src/components/dialogs/DialogWithAction/DialogWithAction.tsx
rename to src/components/dialogs/ConfirmationDialog/ConfirmationDialog.tsx
index 0672808c..89d0a0b8 100644
--- a/src/components/dialogs/DialogWithAction/DialogWithAction.tsx
+++ b/src/components/dialogs/ConfirmationDialog/ConfirmationDialog.tsx
@@ -10,10 +10,10 @@ import {
 } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 import { useHotkeys } from "hooks";
-import { HotkeyView } from "utils/common/enums";
+import { HotkeyContext } from "utils/common/enums";
 import { ReactElement } from "react";
 
-type DialogWithActionProps = Omit<
+type ConfirmationDialogProps = Omit<
   DialogProps,
   "children" | "open" | "content"
 > & {
@@ -26,34 +26,40 @@ type DialogWithActionProps = Omit<
   confirmText?: string;
   rejectText?: string;
   confirmDisabled?: boolean;
+  disableHotkeyOnInput?: boolean;
 };
 
-export const DialogWithAction = ({
+export const ConfirmationDialog = ({
   title,
   content,
   onConfirm,
   onClose: handleClose,
-  onReject: handleReject,
+  onReject,
   confirmText = "Confirm",
   rejectText = "Reject",
   isOpen,
   confirmDisabled,
+  disableHotkeyOnInput,
   ...rest
-}: DialogWithActionProps) => {
+}: ConfirmationDialogProps) => {
   const handleConfirm = () => {
+    handleClose();
     onConfirm();
+  };
 
+  const handleReject = () => {
+    onReject && onReject();
     handleClose();
   };
 
   useHotkeys(
     "enter",
     () => {
-      handleConfirm();
+      !confirmDisabled && handleConfirm();
     },
-    HotkeyView.DialogWithAction,
-    { enableOnTags: ["INPUT"], enabled: isOpen },
-    [handleConfirm]
+    HotkeyContext.ConfirmationDialog,
+    { enableOnTags: disableHotkeyOnInput ? [] : ["INPUT"], enabled: isOpen },
+    [handleConfirm, confirmDisabled]
   );
 
   return (
@@ -77,26 +83,26 @@ export const DialogWithAction = ({
         </IconButton>
       </Box>
 
-      {content && <DialogContent sx={{ py: 0 }}>{content}</DialogContent>}
+      {content && <DialogContent>{content}</DialogContent>}
 
       <DialogActions>
+        <Button onClick={handleClose} color="primary">
+          Cancel
+        </Button>
+
+        {onReject && (
+          <Button onClick={handleReject} color="primary">
+            {rejectText}
+          </Button>
+        )}
         <Button
           onClick={handleConfirm}
           color="primary"
+          variant="contained"
           disabled={confirmDisabled}
         >
           {confirmText}
         </Button>
-        {handleReject ? (
-          <Button onClick={handleReject} color="primary">
-            {rejectText}
-          </Button>
-        ) : (
-          <></>
-        )}
-        <Button onClick={handleClose} color="primary">
-          Cancel
-        </Button>
       </DialogActions>
     </Dialog>
   );
diff --git a/src/components/dialogs/DialogWithAction/DialogWithActionSHK.tsx b/src/components/dialogs/ConfirmationDialog/ConfirmationDialogSHK.tsx
similarity index 75%
rename from src/components/dialogs/DialogWithAction/DialogWithActionSHK.tsx
rename to src/components/dialogs/ConfirmationDialog/ConfirmationDialogSHK.tsx
index e556113e..627ba631 100644
--- a/src/components/dialogs/DialogWithAction/DialogWithActionSHK.tsx
+++ b/src/components/dialogs/ConfirmationDialog/ConfirmationDialogSHK.tsx
@@ -1,9 +1,9 @@
 import { useHotkeys } from "hooks";
 
-import { HotkeyView } from "utils/common/enums";
-import { DialogWithAction } from "./DialogWithAction";
+import { HotkeyContext } from "utils/common/enums";
+import { ConfirmationDialog } from "./ConfirmationDialog";
 
-type DialogWithActionHKProps = {
+type ConfirmationDialogProps = {
   title: string;
   content: string;
   onConfirm: () => void;
@@ -16,7 +16,7 @@ type DialogWithActionHKProps = {
 
 //NOTE: SHK : Sans Hotkey for storybook
 
-export const DialogWithActionSHK = ({
+export const ConfirmationDialogSHK = ({
   title,
   content,
   onConfirm,
@@ -25,7 +25,7 @@ export const DialogWithActionSHK = ({
   confirmText = "Confirm",
   rejectText = "Reject",
   isOpen,
-}: DialogWithActionHKProps) => {
+}: ConfirmationDialogProps) => {
   const handleConfirm = () => {
     onConfirm();
 
@@ -37,13 +37,13 @@ export const DialogWithActionSHK = ({
     () => {
       handleConfirm();
     },
-    HotkeyView.DeleteCategoryDialog,
+    HotkeyContext.ConfirmationDialog,
     { enableOnTags: ["INPUT"] },
     [handleConfirm]
   );
 
   return (
-    <DialogWithAction
+    <ConfirmationDialog
       title={title}
       content={content}
       onConfirm={handleConfirm}
diff --git a/src/components/dialogs/ConfirmationDialog/index.ts b/src/components/dialogs/ConfirmationDialog/index.ts
new file mode 100644
index 00000000..00ea3e21
--- /dev/null
+++ b/src/components/dialogs/ConfirmationDialog/index.ts
@@ -0,0 +1 @@
+export { ConfirmationDialog } from "./ConfirmationDialog";
diff --git a/src/components/dialogs/CreateCategoryDialog/index.ts b/src/components/dialogs/CreateCategoryDialog/index.ts
deleted file mode 100644
index 852a00c9..00000000
--- a/src/components/dialogs/CreateCategoryDialog/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { CreateCategoryDialog } from "./CreateCategoryDialog";
diff --git a/src/components/dialogs/CreateKindDialog/CreateKindDialog.tsx b/src/components/dialogs/CreateKindDialog/CreateKindDialog.tsx
index 83b6f1fa..014cd2f2 100644
--- a/src/components/dialogs/CreateKindDialog/CreateKindDialog.tsx
+++ b/src/components/dialogs/CreateKindDialog/CreateKindDialog.tsx
@@ -1,6 +1,6 @@
 import { batch, useDispatch, useSelector } from "react-redux";
 import { dataSlice } from "store/data/dataSlice";
-import { DialogWithAction } from "../DialogWithAction";
+import { ConfirmationDialog } from "../ConfirmationDialog";
 import { Box, TextField } from "@mui/material";
 import { selectAllKindIds } from "store/data/selectors";
 import { ChangeEvent, useCallback, useState } from "react";
@@ -88,7 +88,7 @@ export const CreateKindDialog = ({
   };
 
   return (
-    <DialogWithAction
+    <ConfirmationDialog
       onClose={onClose}
       isOpen={open}
       title={"Create Kind"}
diff --git a/src/components/dialogs/DialogWithAction/index.ts b/src/components/dialogs/DialogWithAction/index.ts
deleted file mode 100644
index 55555d00..00000000
--- a/src/components/dialogs/DialogWithAction/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { DialogWithAction } from "./DialogWithAction";
-export { DialogWithActionSHK } from "./DialogWithActionSHK";
diff --git a/src/components/dialogs/ExampleImageDialog/index.ts b/src/components/dialogs/ExampleImageDialog/index.ts
deleted file mode 100644
index c90b7521..00000000
--- a/src/components/dialogs/ExampleImageDialog/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { ExampleImageDialog } from "./ExampleImageDialog";
diff --git a/src/components/dialogs/ExitAnnotatorDialog/ExitAnnotatorDialog.tsx b/src/components/dialogs/ExitAnnotatorDialog/ExitAnnotatorDialog.tsx
index 3d338edf..f562c745 100644
--- a/src/components/dialogs/ExitAnnotatorDialog/ExitAnnotatorDialog.tsx
+++ b/src/components/dialogs/ExitAnnotatorDialog/ExitAnnotatorDialog.tsx
@@ -1,17 +1,17 @@
 import { batch, useDispatch, useSelector } from "react-redux";
-import { DialogWithAction } from "../DialogWithAction";
+import { ConfirmationDialog } from "../ConfirmationDialog";
 import { imageViewerSlice } from "store/imageViewer";
 import { dataSlice } from "store/data/dataSlice";
 import { selectActiveImageId } from "store/imageViewer/selectors";
 
 type ExitAnnotatorDialogProps = {
-  onReturnToProject: () => void;
+  returnToProject: () => void;
   onClose: () => void;
   open: boolean;
 };
 
 export const ExitAnnotatorDialog = ({
-  onReturnToProject,
+  returnToProject,
   onClose,
   open,
 }: ExitAnnotatorDialogProps) => {
@@ -19,7 +19,7 @@ export const ExitAnnotatorDialog = ({
 
   const activeImageId = useSelector(selectActiveImageId);
 
-  const onSaveChanges = () => {
+  const handleSaveChanges = () => {
     batch(() => {
       dispatch(
         imageViewerSlice.actions.setActiveImageId({
@@ -30,11 +30,10 @@ export const ExitAnnotatorDialog = ({
       dispatch(dataSlice.actions.reconcile({ keepChanges: true }));
       dispatch(imageViewerSlice.actions.setImageStack({ imageIds: [] }));
     });
-
-    onReturnToProject();
+    returnToProject();
   };
 
-  const onDiscardChanges = () => {
+  const handleDiscardChanges = () => {
     batch(() => {
       dispatch(
         imageViewerSlice.actions.setActiveImageId({
@@ -44,19 +43,22 @@ export const ExitAnnotatorDialog = ({
       );
       dispatch(dataSlice.actions.reconcile({ keepChanges: false }));
     });
+    returnToProject();
+  };
 
-    onReturnToProject();
+  const handleClose = () => {
+    onClose();
   };
 
   return (
-    <DialogWithAction
+    <ConfirmationDialog
       title="Save Changes?"
       content="Would you like to save the changes to these annotations and return to the project page?"
-      onConfirm={onSaveChanges}
+      onConfirm={handleSaveChanges}
       confirmText="SAVE"
-      onReject={onDiscardChanges}
+      onReject={handleDiscardChanges}
       rejectText="DISCARD"
-      onClose={onClose}
+      onClose={handleClose}
       isOpen={open}
     />
   );
diff --git a/src/components/dialogs/ExportAnnotationsDialog/ExportAnnotationsDialog.tsx b/src/components/dialogs/ExportAnnotationsDialog/ExportAnnotationsDialog.tsx
index 904275e3..83edf73f 100644
--- a/src/components/dialogs/ExportAnnotationsDialog/ExportAnnotationsDialog.tsx
+++ b/src/components/dialogs/ExportAnnotationsDialog/ExportAnnotationsDialog.tsx
@@ -1,11 +1,7 @@
 import React, { ChangeEvent, useState } from "react";
 
 import { Grid, TextField } from "@mui/material";
-
-import { useHotkeys } from "hooks";
-
-import { HotkeyView } from "utils/common/enums";
-import { DialogWithAction } from "../DialogWithAction";
+import { ConfirmationDialog } from "../ConfirmationDialog";
 
 type ExportAnnotationsDialogProps = {
   onClose: () => void;
@@ -22,28 +18,17 @@ export const ExportAnnotationsDialog = ({
 }: ExportAnnotationsDialogProps) => {
   const [projectName, setProjectName] = useState<string>(defaultName);
 
-  const onCancel = () => {
+  const handleCancel = () => {
     setProjectName(defaultName);
     onClose();
   };
 
-  const onNameChange = (event: ChangeEvent<HTMLInputElement>) => {
+  const handleNameChange = (event: ChangeEvent<HTMLInputElement>) => {
     setProjectName(event.target.value);
   };
 
-  useHotkeys(
-    "enter",
-    () => {
-      handleSave(projectName);
-      onClose();
-    },
-    HotkeyView.ExportAnnotationsDialog,
-    { enableOnTags: ["INPUT"] },
-    [handleSave]
-  );
-
   return (
-    <DialogWithAction
+    <ConfirmationDialog
       title="Export Annotations"
       content={
         <Grid container spacing={1}>
@@ -54,13 +39,14 @@ export const ExportAnnotationsDialog = ({
               id="name"
               label="Project file name"
               margin="dense"
+              variant="standard"
               defaultValue={projectName}
-              onChange={onNameChange}
+              onChange={handleNameChange}
             />
           </Grid>
         </Grid>
       }
-      onClose={onCancel}
+      onClose={handleCancel}
       onConfirm={() => handleSave(projectName)}
       confirmText="Export Annotations"
       isOpen={open}
diff --git a/src/components/dialogs/FallbackDialog/FallBackDialog.tsx b/src/components/dialogs/FallbackDialog/FallBackDialog.tsx
index 85d51e03..dce28829 100644
--- a/src/components/dialogs/FallbackDialog/FallBackDialog.tsx
+++ b/src/components/dialogs/FallbackDialog/FallBackDialog.tsx
@@ -27,7 +27,7 @@ import { useDialogHotkey } from "hooks";
 
 import { SaveFittedModelDialog, SaveProjectDialog } from "components/dialogs";
 
-import { HotkeyView } from "utils/common/enums";
+import { HotkeyContext } from "utils/common/enums";
 
 import { ModelStatus } from "utils/models/enums";
 import { APPLICATION_COLORS } from "utils/common/constants";
@@ -74,7 +74,7 @@ export const FallBackDialog = (props: any) => {
     onClose: onSaveProjectDialogClose,
     onOpen: onSaveProjectDialogOpen,
     open: openSaveProjectDialog,
-  } = useDialogHotkey(HotkeyView.SaveProjectDialog);
+  } = useDialogHotkey(HotkeyContext.ConfirmationDialog);
 
   // const routePath = useLocation().pathname;
   // const inAnnotator = routePath === "/annotator";
@@ -83,13 +83,13 @@ export const FallBackDialog = (props: any) => {
     onClose: onSaveClassifierDialogClose,
     onOpen: onSaveClassifierDialogOpen,
     open: openSaveClassifierDialog,
-  } = useDialogHotkey(HotkeyView.SaveFittedModelDialog);
+  } = useDialogHotkey(HotkeyContext.ConfirmationDialog);
 
   const {
     onClose: onSaveSegmenterDialogClose,
     onOpen: onSaveSegmenterDialogOpen,
     open: openSaveSegmenterDialog,
-  } = useDialogHotkey(HotkeyView.SaveFittedModelDialog);
+  } = useDialogHotkey(HotkeyContext.ConfirmationDialog);
 
   const selectedClassifierModel = useSelector(selectClassifierSelectedModel);
   const classifierModelStatus = useSelector(selectClassifierModelStatus);
diff --git a/src/components/dialogs/ImportTensorflowModelDialog/CloudUpload.tsx b/src/components/dialogs/ImportTensorflowModelDialog/CloudUpload.tsx
index 8ce85a26..593d6718 100644
--- a/src/components/dialogs/ImportTensorflowModelDialog/CloudUpload.tsx
+++ b/src/components/dialogs/ImportTensorflowModelDialog/CloudUpload.tsx
@@ -3,11 +3,9 @@ import React, { useState } from "react";
 import {
   Button,
   Checkbox,
-  DialogContent,
   FormControl,
   FormControlLabel,
   InputAdornment,
-  MenuItem,
   TextField,
   Typography,
 } from "@mui/material";
@@ -103,63 +101,62 @@ export const CloudUpload = ({
 
   return (
     <>
-      <DialogContent>
-        <Typography>{"Upload a model from the internet."}</Typography>
-      </DialogContent>
-      <MenuItem>
-        <FormControl sx={{ width: "75%", ml: 2, pr: 1 }}>
-          <TextField
-            variant={"standard"}
-            id="web-upload-input-label"
-            InputProps={{
-              startAdornment: (
-                <InputAdornment position="start">
-                  <LanguageIcon />
-                </InputAdornment>
-              ),
-            }}
-            size={"small"}
-            value={modelUrl}
-            onChange={handleModelUrlChange}
-            error={errMessage.length > 0}
-          />
-          <Typography
-            style={{
-              whiteSpace: "pre-line",
-              fontSize: "0.75rem",
-              color: "red",
-            }}
-          >
-            {errMessage}
-          </Typography>
-          <Typography
-            style={{
-              whiteSpace: "pre-line",
-              fontSize: "0.75rem",
-              color: "green",
-            }}
-          >
-            {successMessage}
-          </Typography>
-          <FormControlLabel
-            control={
-              <Checkbox
-                size="small"
-                checked={isFromTFHub}
-                onChange={handleSourceChange}
-              />
-            }
-            label="From TF Hub?"
-          />
-        </FormControl>
-        <Button
-          onClick={async () => loadModel()}
-          color="primary"
-          disabled={errMessage.length !== 0 || modelUrl.length === 0}
+      <Typography gutterBottom>
+        {"Upload a model from the internet."}
+      </Typography>
+
+      <FormControl sx={{ ml: 2, pr: 1 }}>
+        <TextField
+          variant={"standard"}
+          id="web-upload-input-label"
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <LanguageIcon />
+              </InputAdornment>
+            ),
+          }}
+          size={"small"}
+          value={modelUrl}
+          onChange={handleModelUrlChange}
+          error={errMessage.length > 0}
+        />
+        <Typography
+          style={{
+            whiteSpace: "pre-line",
+            fontSize: "0.75rem",
+            color: "red",
+          }}
         >
-          Load Model
-        </Button>
-      </MenuItem>
+          {errMessage}
+        </Typography>
+        <Typography
+          style={{
+            whiteSpace: "pre-line",
+            fontSize: "0.75rem",
+            color: "green",
+          }}
+        >
+          {successMessage}
+        </Typography>
+        <FormControlLabel
+          control={
+            <Checkbox
+              size="small"
+              checked={isFromTFHub}
+              onChange={handleSourceChange}
+            />
+          }
+          label="From TF Hub?"
+        />
+      </FormControl>
+      <Button
+        onClick={async () => loadModel()}
+        color="primary"
+        disabled={errMessage.length !== 0 || modelUrl.length === 0}
+      >
+        Load Model
+      </Button>
     </>
   );
 };
diff --git a/src/components/dialogs/ImportTensorflowModelDialog/ImportTensorflowModelDialog.tsx b/src/components/dialogs/ImportTensorflowModelDialog/ImportTensorflowModelDialog.tsx
index 11852928..e3597bc3 100644
--- a/src/components/dialogs/ImportTensorflowModelDialog/ImportTensorflowModelDialog.tsx
+++ b/src/components/dialogs/ImportTensorflowModelDialog/ImportTensorflowModelDialog.tsx
@@ -7,6 +7,7 @@ import {
   Collapse,
   Dialog,
   DialogActions,
+  DialogContent,
   DialogTitle,
   IconButton,
   Tab,
@@ -30,7 +31,7 @@ import { Cellpose } from "utils/models/Cellpose";
 import { ModelTask } from "utils/models/enums";
 import { availableClassifierModels } from "utils/models/availableClassificationModels";
 import { availableSegmenterModels } from "utils/models/availableSegmentationModels";
-import { HotkeyView } from "utils/common/enums";
+import { HotkeyContext } from "utils/common/enums";
 import { Shape } from "store/data/types";
 import { selectProjectImageChannels } from "store/project/selectors";
 import { useSelector } from "react-redux";
@@ -76,7 +77,7 @@ type ImportTensorflowModelDialogProps = {
   loadedModel?: Model;
   open: boolean;
   modelTask: ModelTask;
-  dispatchFunction: (model: Model, inputShape: Shape) => void;
+  dispatchFunction: (model: Model, inputShape: Shape) => Promise<void>;
 };
 
 export const ImportTensorflowModelDialog = ({
@@ -117,14 +118,14 @@ export const ImportTensorflowModelDialog = ({
     }
   }, []);
 
-  const dispatchModelToStore = () => {
+  const dispatchModelToStore = async () => {
     if (!selectedModel) {
       process.env.NODE_ENV !== "production" &&
         console.warn("Attempting to dispatch undefined model");
       return;
     }
 
-    dispatchFunction(selectedModel, inputShape);
+    await dispatchFunction(selectedModel, inputShape);
 
     setCloudWarning(false);
     setInvalidModel(false);
@@ -144,10 +145,12 @@ export const ImportTensorflowModelDialog = ({
 
   useHotkeys(
     "enter",
-    () => dispatchModelToStore(),
-    HotkeyView.ImportTensorflowModelDialog,
-    { enableOnTags: ["INPUT"] },
-    [dispatchModelToStore]
+    (event) => {
+      selectedModel && !invalidModel && dispatchModelToStore();
+    },
+    HotkeyContext.ConfirmationDialog,
+
+    [dispatchModelToStore, selectedModel, invalidModel]
   );
 
   useEffect(() => {
@@ -232,51 +235,51 @@ export const ImportTensorflowModelDialog = ({
           disabled={modelTask === ModelTask.Segmentation}
         />
       </Tabs>
-
-      <Box hidden={tabVal !== "1"}>
-        <PretrainedModelSelector
-          values={pretrainedModels}
-          initModel={
-            selectedModel
-              ? pretrainedModels.findIndex(
-                  (model) => model.name === selectedModel.name
-                ) + ""
-              : "-1"
-          }
-          setModel={onModelChange}
-          error={invalidModel}
-          errorText={
-            !selectedModel
-              ? "Select a Model"
-              : invalidModel
-              ? `Model requires ${selectedModel.requiredChannels}-channel images`
-              : ""
-          }
-        />
-      </Box>
-
-      <Box hidden={tabVal !== "2" && tabVal !== "3"}>
-        <ModelFormatSelection isGraph={isGraph} setIsGraph={setIsGraph} />
-      </Box>
-
-      <Box hidden={tabVal !== "2"}>
-        <LocalFileUpload
-          modelTask={modelTask}
-          isGraph={isGraph}
-          setModel={onModelChange}
-          setInputShape={setInputShape}
-        />
-      </Box>
-
-      <Box hidden={tabVal !== "3"}>
-        <CloudUpload
-          modelTask={modelTask}
-          isGraph={isGraph}
-          setModel={onModelChange}
-          setInputShape={setInputShape}
-        />
-      </Box>
-
+      <DialogContent>
+        <Box hidden={tabVal !== "1"}>
+          <PretrainedModelSelector
+            values={pretrainedModels}
+            initModel={
+              selectedModel
+                ? pretrainedModels.findIndex(
+                    (model) => model.name === selectedModel.name
+                  ) + ""
+                : "-1"
+            }
+            setModel={onModelChange}
+            error={invalidModel}
+            errorText={
+              !selectedModel
+                ? "Select a Model"
+                : invalidModel
+                ? `Model requires ${selectedModel.requiredChannels}-channel images`
+                : ""
+            }
+          />
+        </Box>
+
+        <Box hidden={tabVal !== "2" && tabVal !== "3"} pb={2}>
+          <ModelFormatSelection isGraph={isGraph} setIsGraph={setIsGraph} />
+        </Box>
+
+        <Box hidden={tabVal !== "2"}>
+          <LocalFileUpload
+            modelTask={modelTask}
+            isGraph={isGraph}
+            setModel={onModelChange}
+            setInputShape={setInputShape}
+          />
+        </Box>
+
+        <Box hidden={tabVal !== "3"}>
+          <CloudUpload
+            modelTask={modelTask}
+            isGraph={isGraph}
+            setModel={onModelChange}
+            setInputShape={setInputShape}
+          />
+        </Box>
+      </DialogContent>
       <DialogActions>
         <Button onClick={closeDialog} color="primary">
           Cancel
diff --git a/src/components/dialogs/ImportTensorflowModelDialog/LocalFileUpload.tsx b/src/components/dialogs/ImportTensorflowModelDialog/LocalFileUpload.tsx
index 8d4aa1ea..505273db 100644
--- a/src/components/dialogs/ImportTensorflowModelDialog/LocalFileUpload.tsx
+++ b/src/components/dialogs/ImportTensorflowModelDialog/LocalFileUpload.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 
 import {
-  DialogContent,
   ListItemIcon,
   ListItemText,
   MenuItem,
@@ -114,13 +113,11 @@ export const LocalFileUpload = ({
 
   return (
     <>
-      <DialogContent>
-        <Typography>Upload model files from your computer.</Typography>
-        <Typography gutterBottom fontSize={"small"} sx={{ ml: 1 }}>
-          Tensorflow requires a .json files containing the model description as
-          well as the corresponding model weights (.bin file(s)).
-        </Typography>
-      </DialogContent>
+      <Typography>Upload model files from your computer.</Typography>
+      <Typography gutterBottom fontSize={"small"}>
+        Tensorflow requires a .json files containing the model description as
+        well as the corresponding model weights (.bin file(s)).
+      </Typography>
 
       <label htmlFor="open-model-file">
         <MenuItem component="span" dense sx={{ ml: 2 }}>
diff --git a/src/components/dialogs/ImportTensorflowModelDialog/ModelFormatSelection.tsx b/src/components/dialogs/ImportTensorflowModelDialog/ModelFormatSelection.tsx
index df471ec7..6b6a2ada 100644
--- a/src/components/dialogs/ImportTensorflowModelDialog/ModelFormatSelection.tsx
+++ b/src/components/dialogs/ImportTensorflowModelDialog/ModelFormatSelection.tsx
@@ -2,7 +2,6 @@ import {
   FormControl,
   FormControlLabel,
   FormLabel,
-  MenuItem,
   Radio,
   RadioGroup,
 } from "@mui/material";
@@ -19,30 +18,38 @@ export const ModelFormatSelection = ({
   ) => setIsGraph(event.target.value === "Graph");
 
   return (
-    <MenuItem>
-      <FormControl>
-        <FormLabel id="model-type-radio-buttons-group-label">
-          Model Format
-        </FormLabel>
-        <RadioGroup
-          row
-          aria-labelledby="model-type-radio-buttons-group-label"
-          name="model-type-radio-buttons-group"
-          value={isGraph ? "Graph" : "Layers"}
-          onChange={handleModelFormatChange}
-        >
-          <FormControlLabel
-            value="Graph"
-            control={<Radio />}
-            label="Graph Model"
-          />
-          <FormControlLabel
-            value="Layers"
-            control={<Radio />}
-            label="Layers Model"
-          />
-        </RadioGroup>
-      </FormControl>
-    </MenuItem>
+    <FormControl
+      size="small"
+      sx={{
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+      }}
+    >
+      <FormLabel id="model-type-radio-buttons-group-label">
+        Model Format:
+      </FormLabel>
+      <RadioGroup
+        row
+        aria-labelledby="model-type-radio-buttons-group-label"
+        name="model-type-radio-buttons-group"
+        value={isGraph ? "Graph" : "Layers"}
+        onChange={handleModelFormatChange}
+      >
+        <FormControlLabel
+          value="Graph"
+          control={<Radio size="small" sx={{ py: 0, px: 1 }} />}
+          label="Graph Model"
+          componentsProps={{ typography: { variant: "body2" } }}
+        />
+        <FormControlLabel
+          value="Layers"
+          control={<Radio size="small" sx={{ py: 0, px: 1 }} />}
+          label="Layers Model"
+          componentsProps={{ typography: { variant: "body2" } }}
+        />
+      </RadioGroup>
+    </FormControl>
   );
 };
diff --git a/src/components/dialogs/ImportTensorflowModelDialog/PretrainedModelSelector.tsx b/src/components/dialogs/ImportTensorflowModelDialog/PretrainedModelSelector.tsx
index f7fcfef3..1f3b51e3 100644
--- a/src/components/dialogs/ImportTensorflowModelDialog/PretrainedModelSelector.tsx
+++ b/src/components/dialogs/ImportTensorflowModelDialog/PretrainedModelSelector.tsx
@@ -1,19 +1,19 @@
-import React, { useEffect, useState } from "react";
+import React, { useMemo, useState } from "react";
 
 import {
-  DialogContent,
+  Autocomplete,
   FormControl,
   FormHelperText,
-  InputLabel,
-  MenuItem,
-  Select,
-  SelectChangeEvent,
+  TextField,
   Typography,
 } from "@mui/material";
 
 import { Model } from "utils/models/Model/Model";
-import { range } from "lodash";
 
+interface ModelOptionType {
+  label: string;
+  id: number;
+}
 export const PretrainedModelSelector = ({
   values,
   setModel,
@@ -27,50 +27,47 @@ export const PretrainedModelSelector = ({
   errorText?: string;
   initModel: string;
 }) => {
-  const [modelIdxs, setModelIdxs] = useState<number[]>(
-    range(-1, values.length)
-  );
-  const [selectedIdxVal, setSelectedIdxVal] = useState(initModel);
-
-  useEffect(() => {
-    setModelIdxs(range(-1, values.length));
+  const modelOptions: ModelOptionType[] = useMemo(() => {
+    return values.map((value, idx) => ({ label: value.name, id: idx }));
   }, [values]);
+  const [selectedModel, setSelectedModel] = useState<ModelOptionType | null>(
+    modelOptions[+initModel] ?? null
+  );
 
-  const handlePreTrainedModelChange = async (event: SelectChangeEvent) => {
-    const idxVal = event.target.value;
-    setSelectedIdxVal(idxVal);
-    const idx = Number(idxVal);
-    setModel(idx >= 0 ? values[idx] : undefined);
+  const handlePreTrainedModelChange = (
+    event: React.SyntheticEvent<Element, Event>,
+    newValue: ModelOptionType | null
+  ) => {
+    setSelectedModel(newValue ? modelOptions[newValue.id] : null);
+    setModel(newValue ? values[newValue.id] : undefined);
   };
 
   return (
     <>
-      <DialogContent>
-        <Typography gutterBottom>
-          Choose from a provided pre-trained model
-        </Typography>
-      </DialogContent>
+      <Typography gutterBottom sx={{ pb: 2 }}>
+        Choose from a provided pre-trained model
+      </Typography>
       <FormControl
         sx={{ width: "75%", ml: 2, pb: 2 }}
         size="small"
         error={error}
       >
-        <InputLabel id="pretrained-select-label">Pre-trained Models</InputLabel>
-        <Select
-          labelId="pretrained-select-label"
-          id="pretrained-simple-select"
-          value={selectedIdxVal}
-          label="Pre-trained Models"
+        <Autocomplete
+          id="pre-trained-model-select"
+          options={modelOptions}
+          value={selectedModel}
           onChange={handlePreTrainedModelChange}
-          error={error}
-        >
-          {modelIdxs.map((idx) => (
-            <MenuItem key={`Pretrained-${idx}`} value={String(idx)}>
-              {idx === -1 ? "None" : values[idx].name}
-            </MenuItem>
-          ))}
-        </Select>
-        <FormHelperText>{errorText}</FormHelperText>
+          sx={{ width: 300 }}
+          // eslint-disable-next-line react/jsx-no-undef
+          renderInput={(params) => (
+            <TextField {...params} label="Pre-trained Models" />
+          )}
+          blurOnSelect
+          openOnFocus
+          size="small"
+        />
+
+        <FormHelperText>{errorText ?? " "}</FormHelperText>
       </FormControl>
     </>
   );
diff --git a/src/components/dialogs/NewProjectDialog/NewProjectDialog.tsx b/src/components/dialogs/NewProjectDialog/NewProjectDialog.tsx
index ec2392fa..1f447a17 100644
--- a/src/components/dialogs/NewProjectDialog/NewProjectDialog.tsx
+++ b/src/components/dialogs/NewProjectDialog/NewProjectDialog.tsx
@@ -1,14 +1,16 @@
 import React, { ChangeEvent } from "react";
 import { useDispatch } from "react-redux";
-import { useHotkeys } from "hooks";
 
 import { TextField } from "@mui/material";
 
 import { classifierSlice } from "store/classifier";
 import { projectSlice } from "store/project";
-import { HotkeyView } from "utils/common/enums";
-import { DialogWithAction } from "../DialogWithAction";
+import { ConfirmationDialog } from "../ConfirmationDialog";
 import { dataSlice } from "store/data/dataSlice";
+import { annotatorSlice } from "store/annotator";
+import { imageViewerSlice } from "store/imageViewer";
+import { measurementsSlice } from "store/measurements/measurementsSlice";
+import { segmenterSlice } from "store/segmenter";
 
 type NewProjectDialogProps = {
   onClose: () => void;
@@ -36,8 +38,10 @@ export const NewProjectDialog = ({ onClose, open }: NewProjectDialogProps) => {
     );
     dispatch(dataSlice.actions.resetData());
     dispatch(classifierSlice.actions.resetClassifier());
-
-    closeDialog();
+    dispatch(annotatorSlice.actions.resetAnnotator());
+    dispatch(imageViewerSlice.actions.resetImageViewer());
+    dispatch(measurementsSlice.actions.resetMeasurements());
+    dispatch(segmenterSlice.actions.resetSegmenter());
   };
 
   const onChangeClassifierName = (event: ChangeEvent<HTMLInputElement>) => {
@@ -58,16 +62,8 @@ export const NewProjectDialog = ({ onClose, open }: NewProjectDialogProps) => {
     onClose();
   };
 
-  useHotkeys(
-    "enter",
-    () => onCreateNewProject(),
-    HotkeyView.NewProjectDialog,
-    { enableOnTags: ["INPUT"] },
-    [onCreateNewProject]
-  );
-
   return (
-    <DialogWithAction
+    <ConfirmationDialog
       onClose={closeDialog}
       isOpen={open}
       title="New Project"
@@ -78,6 +74,7 @@ export const NewProjectDialog = ({ onClose, open }: NewProjectDialogProps) => {
           id="name"
           label="Name"
           margin="dense"
+          variant="standard"
           value={projectName}
           onChange={onChangeClassifierName}
           error={invalidProjectName}
diff --git a/src/components/dialogs/BaseExampleDialog/BaseExampleDialog.tsx b/src/components/dialogs/OpenExampleDialog/BaseExampleDialog.tsx
similarity index 97%
rename from src/components/dialogs/BaseExampleDialog/BaseExampleDialog.tsx
rename to src/components/dialogs/OpenExampleDialog/BaseExampleDialog.tsx
index 0fa52c27..3b7ecd7a 100644
--- a/src/components/dialogs/BaseExampleDialog/BaseExampleDialog.tsx
+++ b/src/components/dialogs/OpenExampleDialog/BaseExampleDialog.tsx
@@ -2,7 +2,6 @@ import { ReactElement } from "react";
 import {
   Box,
   Dialog,
-  DialogActions,
   DialogContent,
   DialogTitle,
   IconButton,
@@ -69,7 +68,6 @@ export const BaseExampleDialog = ({
           {children}
         </Box>
       </DialogContent>
-      <DialogActions />
     </Dialog>
   );
 };
diff --git a/src/components/dialogs/ExampleImageDialog/ExampleImageDialog.tsx b/src/components/dialogs/OpenExampleDialog/ExampleImageDialog.tsx
similarity index 97%
rename from src/components/dialogs/ExampleImageDialog/ExampleImageDialog.tsx
rename to src/components/dialogs/OpenExampleDialog/ExampleImageDialog.tsx
index 769f3bd4..5b575f31 100644
--- a/src/components/dialogs/ExampleImageDialog/ExampleImageDialog.tsx
+++ b/src/components/dialogs/OpenExampleDialog/ExampleImageDialog.tsx
@@ -1,4 +1,4 @@
-import { BaseExampleDialog } from "../BaseExampleDialog";
+import { BaseExampleDialog } from "./BaseExampleDialog";
 
 import malaria from "images/malaria.png";
 import cellPainting from "images/cell-painting.png";
diff --git a/src/components/dialogs/ExampleProjectDialog/ExampleProjectDialog.tsx b/src/components/dialogs/OpenExampleDialog/ExampleProjectDialog.tsx
similarity index 96%
rename from src/components/dialogs/ExampleProjectDialog/ExampleProjectDialog.tsx
rename to src/components/dialogs/OpenExampleDialog/ExampleProjectDialog.tsx
index ac79bcdb..e7ab1e93 100644
--- a/src/components/dialogs/ExampleProjectDialog/ExampleProjectDialog.tsx
+++ b/src/components/dialogs/OpenExampleDialog/ExampleProjectDialog.tsx
@@ -4,8 +4,9 @@ import cElegansExampleIcon from "data/exampleProjects/cElegansExampleProjectIcon
 import humanU2OSCellsExampleIcon from "data/exampleProjects/humanU2OSCellsExampleProjectIcon.png";
 import BBBC013ExampleIcon from "data/exampleProjects/BBBC013ExampleProjectIcon.png";
 import PLP1ExampleIcon from "data/exampleProjects/PLP1ExampleProjectIcon.png";
-import { BaseExampleDialog } from "../BaseExampleDialog";
+import { BaseExampleDialog } from "./BaseExampleDialog";
 import { ExampleProjectCard } from "components/cards/";
+import { Stack } from "@mui/material";
 
 const exampleProjects = [
   {
@@ -101,7 +102,7 @@ export const ExampleProjectDialog = (props: ExampleProjectDialogProps) => {
       open={open}
       onClose={onClose}
     >
-      <>
+      <Stack>
         {exampleProjects.map((exampleProject, index) => {
           return (
             <ExampleProjectCard
@@ -111,7 +112,7 @@ export const ExampleProjectDialog = (props: ExampleProjectDialogProps) => {
             />
           );
         })}
-      </>
+      </Stack>
     </BaseExampleDialog>
   );
 };
diff --git a/src/components/dialogs/ExampleProjectDialog/index.ts b/src/components/dialogs/OpenExampleDialog/index.ts
similarity index 51%
rename from src/components/dialogs/ExampleProjectDialog/index.ts
rename to src/components/dialogs/OpenExampleDialog/index.ts
index 7b8a1a1a..891111d9 100644
--- a/src/components/dialogs/ExampleProjectDialog/index.ts
+++ b/src/components/dialogs/OpenExampleDialog/index.ts
@@ -1 +1,2 @@
+export { ExampleImageDialog } from "./ExampleImageDialog";
 export { ExampleProjectDialog } from "./ExampleProjectDialog";
diff --git a/src/components/dialogs/SaveFittedModelDialog/SaveFittedModelDialog.tsx b/src/components/dialogs/SaveFittedModelDialog/SaveFittedModelDialog.tsx
index 8ab88978..69153d0d 100644
--- a/src/components/dialogs/SaveFittedModelDialog/SaveFittedModelDialog.tsx
+++ b/src/components/dialogs/SaveFittedModelDialog/SaveFittedModelDialog.tsx
@@ -1,11 +1,9 @@
 import { ChangeEvent, useState } from "react";
-import { useHotkeys } from "hooks";
 
 import { Grid, TextField } from "@mui/material";
 
-import { HotkeyView } from "utils/common/enums";
 import { Model } from "utils/models/Model/Model";
-import { DialogWithAction } from "../DialogWithAction";
+import { ConfirmationDialog } from "../ConfirmationDialog";
 import { ModelStatus } from "utils/models/enums";
 
 type SaveFittedModelDialogProps = {
@@ -33,18 +31,8 @@ export const SaveFittedModelDialog = ({
     setName(event.target.value);
   };
 
-  useHotkeys(
-    "enter",
-    () => {
-      onSaveClassifierClick();
-    },
-    HotkeyView.SaveFittedModelDialog,
-    { enableOnTags: ["INPUT"] },
-    [onSaveClassifierClick]
-  );
-
   return (
-    <DialogWithAction
+    <ConfirmationDialog
       isOpen={open}
       onClose={onClose}
       title={`Save ${model.name}`}
@@ -59,6 +47,7 @@ export const SaveFittedModelDialog = ({
               value={name}
               defaultValue={model.name}
               margin="dense"
+              variant="standard"
               onChange={onNameChange}
               helperText={
                 modelStatus !== ModelStatus.Trained
diff --git a/src/components/dialogs/SaveProjectDialog/SaveProjectDialog.tsx b/src/components/dialogs/SaveProjectDialog/SaveProjectDialog.tsx
index de6c884e..57dbe909 100644
--- a/src/components/dialogs/SaveProjectDialog/SaveProjectDialog.tsx
+++ b/src/components/dialogs/SaveProjectDialog/SaveProjectDialog.tsx
@@ -6,11 +6,9 @@ import { Grid, TextField } from "@mui/material";
 import { projectSlice } from "store/project";
 // TODO: implement segmenter serialization
 
-import { HotkeyView } from "utils/common/enums";
-import { useHotkeys } from "hooks";
 import { saveAs } from "file-saver";
 import { applicationSettingsSlice } from "store/applicationSettings";
-import { DialogWithAction } from "../DialogWithAction";
+import { ConfirmationDialog } from "../ConfirmationDialog";
 import { selectDataProject } from "store/data/selectors";
 import { logger } from "utils/common/helpers";
 import { serializeProject } from "utils/file-io/serialize";
@@ -109,18 +107,8 @@ export const SaveProjectDialog = ({
     setProjectName(event.target.value);
   };
 
-  useHotkeys(
-    "enter",
-    () => {
-      onSaveProjectClick();
-    },
-    HotkeyView.SaveProjectDialog,
-    { enableOnTags: ["INPUT"] },
-    [onSaveProjectClick]
-  );
-
   return (
-    <DialogWithAction
+    <ConfirmationDialog
       isOpen={open}
       onClose={onCancel}
       title="Save Project"
@@ -133,6 +121,7 @@ export const SaveProjectDialog = ({
               id="name"
               label="Project file name"
               margin="dense"
+              variant="standard"
               value={projectName}
               onChange={onNameChange}
             />
diff --git a/src/components/dialogs/SelectDialog/SelectDialog.tsx b/src/components/dialogs/SelectDialog/SelectDialog.tsx
index 3c05c34a..3278ad05 100644
--- a/src/components/dialogs/SelectDialog/SelectDialog.tsx
+++ b/src/components/dialogs/SelectDialog/SelectDialog.tsx
@@ -1,16 +1,8 @@
 import React, { useState } from "react";
-import { useHotkeys } from "hooks";
 
-import {
-  FormControl,
-  InputLabel,
-  MenuItem,
-  Select,
-  SelectChangeEvent,
-} from "@mui/material";
+import { Autocomplete, FormControl, TextField } from "@mui/material";
 
-import { HotkeyView } from "utils/common/enums";
-import { DialogWithAction } from "../DialogWithAction";
+import { ConfirmationDialog } from "../ConfirmationDialog";
 
 type SelectDialogProps = {
   options: string[];
@@ -30,48 +22,42 @@ export const SelectDialog = ({
   title,
   open,
 }: SelectDialogProps) => {
-  const [currentOption, setCurrentOption] = useState(options[0]);
+  const [currentOption, setCurrentOption] = useState<string>(options[0]);
 
-  const handleChange = (event: SelectChangeEvent) => {
-    setCurrentOption(event.target.value as string);
+  const handleOptionsChange = (
+    event: React.SyntheticEvent<Element, Event>,
+    newValue: string | null
+  ) => {
+    if (!newValue) return;
+    setCurrentOption(newValue);
   };
 
-  useHotkeys(
-    "enter",
-    () => onConfirm(currentOption),
-    HotkeyView.NewProjectDialog,
-    { enableOnTags: ["INPUT"] },
-    [onConfirm]
-  );
-
   return (
-    <DialogWithAction
+    <ConfirmationDialog
       onClose={onClose}
       isOpen={open}
       title={title}
       content={
-        <FormControl fullWidth>
-          <InputLabel id="dialog-select-label">{selectLabel}</InputLabel>
-          <Select
-            labelId="dialog-select-label"
-            id="dialog-select"
+        <FormControl>
+          <Autocomplete
+            id={`${selectLabel}-select`}
+            options={options}
+            sx={{ width: 300 }}
+            // eslint-disable-next-line react/jsx-no-undef
             value={currentOption}
-            label={selectLabel}
-            onChange={handleChange}
-          >
-            {options.map((option) => (
-              <MenuItem
-                key={`${title}-select-dialog-menu-item-${option}`}
-                value={option}
-              >
-                {option}
-              </MenuItem>
-            ))}
-          </Select>
+            onChange={handleOptionsChange}
+            renderInput={(params) => (
+              <TextField {...params} label={selectLabel} />
+            )}
+            blurOnSelect
+            openOnFocus
+            size="small"
+          />
         </FormControl>
       }
       onConfirm={() => onConfirm(currentOption)}
       confirmText="Confirm"
+      disableHotkeyOnInput
     />
   );
 };
diff --git a/src/components/dialogs/SendFeedbackDialog/SendFeedbackDialog.tsx b/src/components/dialogs/SendFeedbackDialog/SendFeedbackDialog.tsx
index 71b38882..ff2010b9 100644
--- a/src/components/dialogs/SendFeedbackDialog/SendFeedbackDialog.tsx
+++ b/src/components/dialogs/SendFeedbackDialog/SendFeedbackDialog.tsx
@@ -4,7 +4,7 @@ import { DialogContentText, TextField } from "@mui/material";
 
 import { useTranslation } from "hooks";
 
-import { DialogWithAction } from "../DialogWithAction";
+import { ConfirmationDialog } from "../ConfirmationDialog";
 import { createGitHubIssue } from "utils/common/helpers";
 import { AlertType } from "utils/common/enums";
 
@@ -24,7 +24,6 @@ export const SendFeedbackDialog = ({
 
   const openGitHubIssue = () => {
     createGitHubIssue(issueTitle, issueComment, AlertType.Warning);
-
     setIssueTitle("");
     setIssueComment("");
 
@@ -32,13 +31,12 @@ export const SendFeedbackDialog = ({
   };
 
   return (
-    <DialogWithAction
+    <ConfirmationDialog
       isOpen={open}
       onClose={onClose}
       title={t("Send feedback")}
       content={
         <>
-          {" "}
           <DialogContentText
             sx={{
               "& a": { color: "deepskyblue" },
@@ -61,25 +59,28 @@ export const SendFeedbackDialog = ({
             margin="dense"
             label="Title"
             id="issue-title"
+            value={issueTitle}
             onChange={(e) => setIssueTitle(e.target.value)}
-            multiline
             rows={1}
             fullWidth
+            size="small"
           />
           <TextField
-            autoFocus
             margin="dense"
             label="Description"
             id="issue-comment"
+            value={issueComment}
             onChange={(e) => setIssueComment(e.target.value)}
             multiline
             rows={10}
             fullWidth
+            size="small"
           />
         </>
       }
       onConfirm={openGitHubIssue}
       confirmText="Create Github Issue"
+      confirmDisabled={issueTitle.length === 0 || issueComment.length === 0}
     />
   );
 };
diff --git a/src/components/dialogs/SettingsDialog/SettingsDialog.tsx b/src/components/dialogs/SettingsDialog/SettingsDialog.tsx
index 28b7233e..a4a3a20b 100644
--- a/src/components/dialogs/SettingsDialog/SettingsDialog.tsx
+++ b/src/components/dialogs/SettingsDialog/SettingsDialog.tsx
@@ -35,6 +35,8 @@ import {
   selectSoundEnabled,
   selectThemeMode,
 } from "store/applicationSettings/selectors";
+import { useHotkeys } from "hooks";
+import { HotkeyContext } from "utils/common/enums";
 
 const SettingsItem = ({
   title,
@@ -66,39 +68,40 @@ export const SettingsDialog = ({ onClose, open }: SettingsDialogProps) => {
   const dispatch = useDispatch();
 
   const themeMode = useSelector(selectThemeMode);
-
+  const soundEnabled = useSelector(selectSoundEnabled);
   const initialSelectedImageBorderWidth = useSelector(
     selectSelectedImageBorderWidth
   );
+  const initialSelectionColor = useSelector(selectImageSelectionColor);
+  const availableColors = useSelector(selectActiveCategoryColors);
+
   const [selectionSize, setSelectionSize] = useState<number>(
     initialSelectedImageBorderWidth
   );
-
-  const initialSelectionColor = useSelector(selectImageSelectionColor);
   const [selectionColor, setSelectionColor] = useState<string>(
     initialSelectionColor
   );
-  const availableColors = useSelector(selectActiveCategoryColors);
   const [colorMenuAnchorEl, setColorMenuAnchorEl] =
     React.useState<null | HTMLButtonElement>(null);
   const colorPopupOpen = Boolean(colorMenuAnchorEl);
 
-  const soundEnabled = useSelector(selectSoundEnabled);
-
   const preClose = () => {
     batch(() => {
-      dispatch(
-        applicationSettingsSlice.actions.setSelectedImageBorderWidth({
-          selectionSize,
-        })
-      );
-      dispatch(
-        applicationSettingsSlice.actions.setImageSelectionColor({
-          selectionColor,
-        })
-      );
+      if (selectionSize !== initialSelectedImageBorderWidth) {
+        dispatch(
+          applicationSettingsSlice.actions.setSelectedImageBorderWidth({
+            selectionSize,
+          })
+        );
+      }
+      if (selectionColor !== initialSelectionColor) {
+        dispatch(
+          applicationSettingsSlice.actions.setImageSelectionColor({
+            selectionColor,
+          })
+        );
+      }
     });
-
     onClose();
   };
 
@@ -131,6 +134,16 @@ export const SettingsDialog = ({ onClose, open }: SettingsDialogProps) => {
     );
   };
 
+  useHotkeys(
+    "enter",
+    () => {
+      preClose();
+    },
+    HotkeyContext.AppSettingsDialog,
+    { enableOnTags: ["INPUT"], enabled: open },
+    [preClose]
+  );
+
   return (
     <Dialog onClose={preClose} open={open}>
       <Toolbar sx={{ backgroundColor: "inherit" }}>
@@ -177,6 +190,7 @@ export const SettingsDialog = ({ onClose, open }: SettingsDialogProps) => {
                 inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }}
                 InputLabelProps={{ shrink: true }}
                 size="small"
+                variant="standard"
                 sx={{ maxWidth: "80px", marginLeft: "10px" }}
               />
             </SettingsItem>
diff --git a/src/components/dialogs/UpdateCategoryDialog/index.ts b/src/components/dialogs/UpdateCategoryDialog/index.ts
deleted file mode 100644
index 33a150f8..00000000
--- a/src/components/dialogs/UpdateCategoryDialog/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { UpdateCategoryDialog } from "./UpdateCategoryDialog";
diff --git a/src/components/dialogs/index.ts b/src/components/dialogs/index.ts
index a2ff711a..68848697 100644
--- a/src/components/dialogs/index.ts
+++ b/src/components/dialogs/index.ts
@@ -1,4 +1,4 @@
-export { DialogWithAction } from "./DialogWithAction";
+export { ConfirmationDialog } from "./ConfirmationDialog";
 export { DialogTransitionSlide } from "./DialogTransitionSlide";
 export { FallBackDialog } from "./FallbackDialog";
 export { ImportTensorflowModelDialog } from "./ImportTensorflowModelDialog";
@@ -11,8 +11,8 @@ export { ExportAnnotationsDialog } from "./ExportAnnotationsDialog";
 export { CreateKindDialog } from "./CreateKindDialog";
 export { EvaluateClassifierDialog } from "./EvaluateClassifierDialog";
 export { FitClassifierDialog } from "./FitClassifierDialog";
-export { ExampleImageDialog } from "./ExampleImageDialog";
-export { ExampleProjectDialog } from "./ExampleProjectDialog";
 export { FitSegmenterDialog } from "./FitSegmenterDialog";
 export { NewProjectDialog } from "./NewProjectDialog";
 export { SelectDialog } from "./SelectDialog";
+export { ExampleImageDialog, ExampleProjectDialog } from "./OpenExampleDialog";
+export { CreateCategoryDialog, UpdateCategoryDialog } from "./CategoryDialog";
diff --git a/src/components/drawers/AnnotatorToolDrawer/AnnotatorToolDrawer.tsx b/src/components/drawers/AnnotatorToolDrawer/AnnotatorToolDrawer.tsx
index cffa396e..cae49dd7 100644
--- a/src/components/drawers/AnnotatorToolDrawer/AnnotatorToolDrawer.tsx
+++ b/src/components/drawers/AnnotatorToolDrawer/AnnotatorToolDrawer.tsx
@@ -14,14 +14,14 @@ import {
   LockOpen as LockOpenIcon,
 } from "@mui/icons-material";
 
-import { useHotkeys, useTranslation } from "hooks";
+import { useAnnotatorToolShortcuts, useHotkeys, useTranslation } from "hooks";
 
 import { Tool } from "../../stage/Tool";
 
 import { annotatorSlice } from "store/annotator";
 import { selectToolType } from "store/annotator/selectors";
 
-import { HotkeyView } from "utils/common/enums";
+import { HotkeyContext } from "utils/common/enums";
 import { ToolType as OperationType } from "utils/annotator/enums";
 
 import {
@@ -115,12 +115,14 @@ export const AnnotatorToolDrawer = ({
     setPersistOptions((visible) => !visible);
   };
 
+  useAnnotatorToolShortcuts();
   useHotkeys(
     "shift+o",
     () => {
       togglePersistHandler();
     },
-    HotkeyView.Annotator
+    HotkeyContext.AnnotatorView,
+    [persistOptions]
   );
   const t = useTranslation();
 
diff --git a/src/components/drawers/ImageToolDrawer/tool-options-drawer/MeasurementOptions/MeasurementOptions.tsx b/src/components/drawers/ImageToolDrawer/tool-options-drawer/MeasurementOptions/MeasurementOptions.tsx
index 62e0f63e..d230b50e 100644
--- a/src/components/drawers/ImageToolDrawer/tool-options-drawer/MeasurementOptions/MeasurementOptions.tsx
+++ b/src/components/drawers/ImageToolDrawer/tool-options-drawer/MeasurementOptions/MeasurementOptions.tsx
@@ -1,19 +1,11 @@
 import React from "react";
-import { useDispatch } from "react-redux";
+
 import { Box, Button } from "@mui/material";
-import { applicationSettingsSlice } from "store/applicationSettings";
 import { useNavigate } from "react-router-dom";
-import { HotkeyView } from "utils/common/enums";
 
 export const MeasurementOptions = () => {
-  const dispatch = useDispatch();
   const navigate = useNavigate();
   const handleNavigateMeasurements = () => {
-    dispatch(
-      applicationSettingsSlice.actions.unregisterHotkeyView({
-        hotkeyView: HotkeyView.MainImageGridAppBar,
-      })
-    );
     navigate("/measurements");
   };
   return (
diff --git a/src/components/drawers/ImageViewerDrawer/ImageViewerDrawer.tsx b/src/components/drawers/ImageViewerDrawer/ImageViewerDrawer.tsx
index e8750b05..66c783ac 100644
--- a/src/components/drawers/ImageViewerDrawer/ImageViewerDrawer.tsx
+++ b/src/components/drawers/ImageViewerDrawer/ImageViewerDrawer.tsx
@@ -20,7 +20,7 @@ import { selectImageViewerImages } from "store/imageViewer/reselectors";
 import { ImageList } from "components/lists/ImageList";
 import { ImageViewerCategoryList } from "components/lists/ImageViewerCategoryList";
 import { useDialogHotkey } from "hooks";
-import { HotkeyView } from "utils/common/enums";
+import { HotkeyContext } from "utils/common/enums";
 import { CreateKindDialog } from "components/dialogs";
 
 export const ImageViewerDrawer = () => {
@@ -31,7 +31,7 @@ export const ImageViewerDrawer = () => {
     onClose: handleCloseCreateKindDialog,
     onOpen: handleOpenCreateKindDialog,
     open: isCreateKindDialogOpen,
-  } = useDialogHotkey(HotkeyView.DialogWithAction);
+  } = useDialogHotkey(HotkeyContext.ConfirmationDialog);
 
   return (
     <>
diff --git a/src/components/drawers/MeasurementsDrawer/measurement-tables/MeasurementTableOptionsContainer.tsx b/src/components/drawers/MeasurementsDrawer/measurement-tables/MeasurementTableOptionsContainer.tsx
index 16c639a6..baa8bd8d 100644
--- a/src/components/drawers/MeasurementsDrawer/measurement-tables/MeasurementTableOptionsContainer.tsx
+++ b/src/components/drawers/MeasurementsDrawer/measurement-tables/MeasurementTableOptionsContainer.tsx
@@ -11,8 +11,9 @@ import {
   selectThingsDictionary,
 } from "store/data/selectors";
 import { measurementsSlice } from "store/measurements/measurementsSlice";
-import { useDialog } from "hooks";
+import { useDialogHotkey } from "hooks";
 import { DataArray } from "utils/file-io/types";
+import { HotkeyContext } from "utils/common/enums";
 
 export const MeasurementTableOptionsContainer = () => {
   const tables = useSelector(selectMeasurementTables);
@@ -32,7 +33,7 @@ export const MeasurementTableOptionsContainer = () => {
     onClose: handleCloseTableDialog,
     onOpen: handleOpenTableDialog,
     open: isTableDialogOpen,
-  } = useDialog();
+  } = useDialogHotkey(HotkeyContext.ConfirmationDialog);
 
   const handleCreateTable = (kind: string) => {
     const thingIds = kinds[kind].containing;
diff --git a/src/components/forms/ArchitectureSettings/ArchitectureSettings.tsx b/src/components/forms/ArchitectureSettings/ArchitectureSettings.tsx
index 9fe7f07c..0546a29f 100644
--- a/src/components/forms/ArchitectureSettings/ArchitectureSettings.tsx
+++ b/src/components/forms/ArchitectureSettings/ArchitectureSettings.tsx
@@ -13,15 +13,10 @@ import {
 
 import { CustomNumberTextField } from "..";
 
-import { DialogWithAction } from "components/dialogs";
-import { useDialog } from "hooks";
+import { ConfirmationDialog } from "components/dialogs";
+import { useDialogHotkey } from "hooks";
 import { Shape } from "store/data/types";
-
-enum ClearOptions {
-  cancel,
-  keep,
-  discard,
-}
+import { HotkeyContext } from "utils/common/enums";
 
 type SelectedModelType = {
   name: string;
@@ -57,25 +52,25 @@ export const ArchitectureSettings = ({
   const [fixedNumberOfChannelsHelperText, setFixedNumberOfChannelsHelperText] =
     useState<string>("");
 
-  const [clearModel, setClearModel] = useState(ClearOptions.keep);
+  const [clearDialogText, setClearDialogText] = useState(
+    `Keep ${selectedModel.model.name} training history?`
+  );
 
   const {
-    onClose: onCloseClearDialog,
-    open: openClearDialog,
-    onOpen: onOpenClearDialog,
-  } = useDialog();
+    onClose: handleCloseClearDialog,
+    open: clearDialogOpen,
+    onOpen: handleOpenClearDialog,
+  } = useDialogHotkey(HotkeyContext.ConfirmationDialog);
 
   const dispatchModelOnExit = () => {
-    if (clearModel !== ClearOptions.cancel) {
-      dispatchModel(clearModel === ClearOptions.discard, nextModelIdx);
-    }
+    // "selectedModel" updates before the dialog's onClose() method is called
+    // resulting in next model name appearing briefly.
+    // This will update the dialog text after closing
+    setClearDialogText(`Keep ${selectedModel.model.name} training history?`);
   };
 
-  const handleClearSelect = (_clearModel: ClearOptions) => {
-    onCloseClearDialog();
-    // don't call dispatchModel directly here
-    // it needs to be triggered on dialog exit
-    setClearModel(_clearModel);
+  const handleModelDispatch = (dialogAction: "keep" | "discard") => {
+    dispatchModel(dialogAction === "discard", nextModelIdx);
   };
 
   const handleSelectedModelChange = (event: SelectChangeEvent) => {
@@ -83,7 +78,7 @@ export const ArchitectureSettings = ({
     if (Number.isNaN(modelIdx)) return;
     setNextModelIdx(modelIdx);
     if (selectedModel.model.modelLoaded) {
-      onOpenClearDialog();
+      handleOpenClearDialog();
     } else {
       // if not loaded skip the clear dialog
       dispatchModel(false, modelIdx);
@@ -171,14 +166,14 @@ export const ArchitectureSettings = ({
           )}
         </Grid>
       </Grid>
-      <DialogWithAction
-        title={`Keep ${selectedModel.model.name} training history?`}
-        onClose={() => handleClearSelect(ClearOptions.cancel)}
-        onConfirm={() => handleClearSelect(ClearOptions.keep)}
+      <ConfirmationDialog
+        title={clearDialogText}
+        onClose={handleCloseClearDialog}
+        onConfirm={() => handleModelDispatch("keep")}
+        onReject={() => handleModelDispatch("discard")}
         confirmText="Keep"
-        onReject={() => handleClearSelect(ClearOptions.discard)}
         rejectText="Discard"
-        isOpen={openClearDialog}
+        isOpen={clearDialogOpen}
         TransitionComponent={Fade}
         TransitionProps={{ onExited: dispatchModelOnExit }}
       />
diff --git a/src/components/list-items/CategoryItem/CategoryItem.tsx b/src/components/list-items/CategoryItem/CategoryItem.tsx
index cfa03f05..6c74a278 100644
--- a/src/components/list-items/CategoryItem/CategoryItem.tsx
+++ b/src/components/list-items/CategoryItem/CategoryItem.tsx
@@ -12,8 +12,11 @@ import { selectActiveKindId } from "store/project/selectors";
 import { CountChip } from "components/styled-components";
 import { APPLICATION_COLORS } from "utils/common/constants";
 import { Category } from "store/data/types";
+import { Tooltip } from "@mui/material";
 
 type CategoryItemProps = {
+  showHK?: boolean;
+  HKIndex?: number;
   category: Category;
   isSelected: boolean;
   isHighlighted: boolean;
@@ -25,12 +28,16 @@ type CategoryItemProps = {
 };
 
 export const CategoryItem = ({
+  showHK,
+  HKIndex,
   category,
   isSelected,
   isHighlighted,
   handleOpenCategoryMenu,
   selectCategory,
 }: CategoryItemProps) => {
+  const tipRef = React.useRef(null);
+  const [inView, setInView] = React.useState(false);
   const numThings = useSelector(selectNumThingsByCatAndKind);
   const activeKind = useSelector(selectActiveKindId);
 
@@ -40,25 +47,56 @@ export const CategoryItem = ({
   const handleSelect = () => {
     selectCategory(category);
   };
+  const cb = (entries: any) => {
+    const [entry] = entries;
+    entry.isIntersecting ? setInView(true) : setInView(false);
+  };
+
+  React.useEffect(() => {
+    const options = {
+      root: null,
+      rootMargin: "0px",
+    };
+    const ref = tipRef.current;
+    const observer = new IntersectionObserver(cb, options);
+
+    if (ref) observer.observe(ref);
+
+    return () => {
+      if (ref) observer.unobserve(ref);
+    };
+  }, [tipRef]);
 
   return (
-    <CustomListItemButton
-      selected={isSelected}
-      primaryText={category.name}
-      icon={<LabelIcon sx={{ color: category.color }} />}
-      sx={{
-        backgroundColor: isHighlighted ? category.color + "33" : "inherit",
+    <Tooltip
+      ref={tipRef}
+      open={showHK}
+      title={HKIndex}
+      placement="right"
+      PopperProps={{
+        sx: { display: inView ? "block" : "none" },
       }}
-      onClick={handleSelect}
-      secondaryIcon={<MoreHorizIcon />}
-      onSecondary={handleOpenMenu}
-      additionalComponent={
-        <CountChip
-          count={numThings(category.id, activeKind)}
-          backgroundColor={APPLICATION_COLORS.highlightColor}
+    >
+      <span>
+        <CustomListItemButton
+          selected={isSelected}
+          primaryText={category.name}
+          icon={<LabelIcon sx={{ color: category.color }} />}
+          sx={{
+            backgroundColor: isHighlighted ? category.color + "33" : "inherit",
+          }}
+          onClick={handleSelect}
+          secondaryIcon={<MoreHorizIcon />}
+          onSecondary={handleOpenMenu}
+          additionalComponent={
+            <CountChip
+              count={numThings(category.id, activeKind)}
+              backgroundColor={APPLICATION_COLORS.highlightColor}
+            />
+          }
+          dense
         />
-      }
-      dense
-    />
+      </span>
+    </Tooltip>
   );
 };
diff --git a/src/components/list-items/NewProjectListItem/NewProjectListItem.tsx b/src/components/list-items/NewProjectListItem/NewProjectListItem.tsx
index 6b16bc06..0f5133dd 100644
--- a/src/components/list-items/NewProjectListItem/NewProjectListItem.tsx
+++ b/src/components/list-items/NewProjectListItem/NewProjectListItem.tsx
@@ -4,13 +4,13 @@ import AddIcon from "@mui/icons-material/Add";
 
 import { useDialogHotkey } from "hooks";
 
-import { HotkeyView } from "utils/common/enums";
+import { HotkeyContext } from "utils/common/enums";
 import { CustomListItemButton } from "../CustomListItemButton";
 import { NewProjectDialog } from "components/dialogs";
 
 export const NewProjectListItem = () => {
   const { onClose, onOpen, open } = useDialogHotkey(
-    HotkeyView.NewProjectDialog
+    HotkeyContext.ConfirmationDialog
   );
 
   return (
diff --git a/src/components/list-items/SaveProjectListItem/SaveProjectListItem.tsx b/src/components/list-items/SaveProjectListItem/SaveProjectListItem.tsx
index 8c8e4c21..22fe52e7 100644
--- a/src/components/list-items/SaveProjectListItem/SaveProjectListItem.tsx
+++ b/src/components/list-items/SaveProjectListItem/SaveProjectListItem.tsx
@@ -2,16 +2,17 @@ import React from "react";
 
 import DownloadIcon from "@mui/icons-material/Download";
 
-import { useDialog } from "hooks";
+import { useDialogHotkey } from "hooks";
 import { CustomListItemButton } from "../CustomListItemButton";
 import { SaveProjectDialog } from "components/dialogs";
+import { HotkeyContext } from "utils/common/enums";
 
 export const SaveProjectListItem = () => {
   const {
     onClose: onSaveProjectDialogClose,
     onOpen: onSaveProjectDialogOpen,
     open: openSaveProjectDialog,
-  } = useDialog();
+  } = useDialogHotkey(HotkeyContext.ConfirmationDialog);
 
   return (
     <>
diff --git a/src/components/list-items/SettingsListItem/SettingsListItem.tsx b/src/components/list-items/SettingsListItem/SettingsListItem.tsx
index aeacf791..670d1bdd 100644
--- a/src/components/list-items/SettingsListItem/SettingsListItem.tsx
+++ b/src/components/list-items/SettingsListItem/SettingsListItem.tsx
@@ -2,13 +2,16 @@ import React from "react";
 
 import SettingsIcon from "@mui/icons-material/Settings";
 
-import { useDialog } from "hooks";
+import { useDialogHotkey } from "hooks";
 
 import { SettingsDialog } from "components/dialogs";
 import { CustomListItemButton } from "../CustomListItemButton";
+import { HotkeyContext } from "utils/common/enums";
 
 export const SettingsListItem = () => {
-  const { onClose, onOpen, open } = useDialog();
+  const { onClose, onOpen, open } = useDialogHotkey(
+    HotkeyContext.AppSettingsDialog
+  );
 
   return (
     <>
diff --git a/src/components/lists/CategoriesList/CategoriesList.tsx b/src/components/lists/CategoriesList/CategoriesList.tsx
index 87522dc7..ed13c635 100644
--- a/src/components/lists/CategoriesList/CategoriesList.tsx
+++ b/src/components/lists/CategoriesList/CategoriesList.tsx
@@ -6,7 +6,7 @@ import { Delete as DeleteIcon, Add as AddIcon } from "@mui/icons-material";
 
 import { useDialogHotkey, useHotkeys } from "hooks";
 
-import { DialogWithAction } from "components/dialogs";
+import { ConfirmationDialog } from "components/dialogs";
 
 import { CustomListItemButton } from "components/list-items";
 import { useDispatch, useSelector } from "react-redux";
@@ -15,12 +15,12 @@ import { CategoryItemMenu } from "components/menus";
 import { projectSlice } from "store/project";
 import { selectHighlightedCategory } from "store/project/selectors";
 import { selectActiveKindId } from "store/project/selectors";
-import { CreateCategoryDialog } from "components/dialogs/CreateCategoryDialog/CreateCategoryDialog";
+import { CreateCategoryDialog } from "components/dialogs";
 import { dataSlice } from "store/data/dataSlice";
 import { PredictionListItems } from "components/list-items";
 import { isUnknownCategory } from "utils/common/helpers";
 import { ModelStatus, Partition } from "utils/models/enums";
-import { HotkeyView } from "utils/common/enums";
+import { HotkeyContext } from "utils/common/enums";
 import { Category } from "store/data/types";
 import {
   selectActiveCategories,
@@ -35,6 +35,8 @@ export const CategoriesList = () => {
 
   const [selectedCategory, setSelectedCategory] = useState<Category>();
   const [categoryIndex, setCategoryIndex] = useState("");
+  const [showHK, setShowHK] = useState(false);
+
   const highlightedCategory = useSelector(selectHighlightedCategory);
 
   const modelStatus = useSelector(selectClassifierModelStatus);
@@ -47,13 +49,13 @@ export const CategoriesList = () => {
     onClose: handleCloseCreateCategoryDialog,
     onOpen: handleOpenCreateCategoryDialog,
     open: isCreateCategoryDialogOpen,
-  } = useDialogHotkey(HotkeyView.DialogWithAction);
+  } = useDialogHotkey(HotkeyContext.ConfirmationDialog);
 
   const {
     onClose: handleCloseDeleteCategoryDialog,
     onOpen: handleOpenDeleteCategoryDialog,
     open: isDeleteCategoryDialogOpen,
-  } = useDialogHotkey(HotkeyView.DialogWithAction);
+  } = useDialogHotkey(HotkeyContext.ConfirmationDialog);
 
   const selectCategory = useCallback(
     (category: Category) => {
@@ -98,7 +100,7 @@ export const CategoriesList = () => {
         });
       }
     },
-    [HotkeyView.Annotator, HotkeyView.ProjectView],
+    [HotkeyContext.ProjectView],
 
     []
   );
@@ -112,13 +114,14 @@ export const CategoriesList = () => {
         });
       }
     },
-    [HotkeyView.ProjectView],
+    [HotkeyContext.ProjectView],
     []
   );
 
   useHotkeys(
     "shift",
     () => {
+      setShowHK(false);
       if (
         categoryIndex.length !== 0 &&
         !Number.isNaN(+categoryIndex) &&
@@ -130,27 +133,37 @@ export const CategoriesList = () => {
           })
         );
         setSelectedCategory(categories[+categoryIndex]);
-      }
-      if (selectedImageIds.length > 0) {
-        dispatch(
-          dataSlice.actions.updateThings({
-            updates: selectedImageIds.map((imageId) => ({
-              id: imageId,
-              categoryId: highlightedCategory,
-              partition: Partition.Unassigned,
-            })),
-            isPermanent: true,
-          })
-        );
+        if (selectedImageIds.length > 0) {
+          dispatch(
+            dataSlice.actions.updateThings({
+              updates: selectedImageIds.map((imageId) => ({
+                id: imageId,
+                categoryId: highlightedCategory,
+                partition: Partition.Unassigned,
+              })),
+              isPermanent: true,
+            })
+          );
+        }
       }
 
       setCategoryIndex("");
     },
-    [HotkeyView.Annotator, HotkeyView.ProjectView],
+    [HotkeyContext.ProjectView],
     { keyup: true, enabled: true },
     [dispatch, selectedImageIds]
   );
 
+  useHotkeys(
+    "shift",
+    () => {
+      setShowHK(true);
+    },
+    [HotkeyContext.ProjectView],
+    { enabled: true },
+    [dispatch, selectedImageIds]
+  );
+
   useEffect(() => {
     const allCategories = categories;
     if (
@@ -171,9 +184,11 @@ export const CategoriesList = () => {
     <>
       <List dense>
         <List dense sx={{ maxHeight: "20rem", overflowY: "scroll" }}>
-          {categories.map((category: Category) => {
+          {categories.map((category: Category, idx) => {
             return (
               <CategoryItem
+                showHK={showHK}
+                HKIndex={idx}
                 category={category}
                 key={category.id}
                 isSelected={
@@ -227,7 +242,7 @@ export const CategoriesList = () => {
         changesPermanent={true}
       />
 
-      <DialogWithAction
+      <ConfirmationDialog
         title="Delete All Categories"
         content={`Affected objects will NOT be deleted, and instead be labelled as "Unknown"`}
         onConfirm={handleRemoveAllCategories}
diff --git a/src/components/lists/ClassifierList/ClassifierList.tsx b/src/components/lists/ClassifierList/ClassifierList.tsx
index f0a29abf..9c563607 100644
--- a/src/components/lists/ClassifierList/ClassifierList.tsx
+++ b/src/components/lists/ClassifierList/ClassifierList.tsx
@@ -15,7 +15,7 @@ import { ModelExecButtonGroup } from "components/list-items/ClassifierExecListIt
 
 import { ModelIOButtonGroup } from "components/list-items/ModelIOButtonGroup/ModelIOButtonGroup";
 import { useClassificationModel } from "hooks/useLearningModel/useClassifierModel";
-import { HotkeyView } from "utils/common/enums";
+import { HotkeyContext } from "utils/common/enums";
 import { ModelStatus, ModelTask } from "utils/models/enums";
 
 export const ClassifierList = () => {
@@ -39,7 +39,7 @@ export const ClassifierList = () => {
     onClose: handleCloseImportClassifierDialog,
     onOpen: handleOpenImportClassifierDialog,
     open: ImportClassifierDialogOpen,
-  } = useDialogHotkey(HotkeyView.ImportTensorflowModelDialog);
+  } = useDialogHotkey(HotkeyContext.ConfirmationDialog);
   const {
     onClose: handleCloseSaveClassifierDialog,
     onOpen: handleOpenSaveClassifierDialog,
@@ -49,7 +49,7 @@ export const ClassifierList = () => {
     onClose: handleCloseFitClassifierDialog,
     onOpen: handleOpenFitClassifierDialog,
     open: fitClassifierDialogOpen,
-  } = useDialogHotkey(HotkeyView.Classifier, false);
+  } = useDialogHotkey(HotkeyContext.ClassifierDialog, false);
 
   useEffect(() => {
     if (modelStatus === ModelStatus.Trained && waitingForResults) {
diff --git a/src/components/lists/ClearAnnotationsGroup/ClearAnnotationsGroup.tsx b/src/components/lists/ClearAnnotationsGroup/ClearAnnotationsGroup.tsx
index 39ccdc7d..0d6c4bc9 100644
--- a/src/components/lists/ClearAnnotationsGroup/ClearAnnotationsGroup.tsx
+++ b/src/components/lists/ClearAnnotationsGroup/ClearAnnotationsGroup.tsx
@@ -4,9 +4,9 @@ import { batch, useDispatch, useSelector } from "react-redux";
 import { List } from "@mui/material";
 import { Delete as DeleteIcon } from "@mui/icons-material";
 
-import { useDialog, useTranslation } from "hooks";
+import { useDialogHotkey, useTranslation } from "hooks";
 
-import { DialogWithAction } from "components/dialogs";
+import { ConfirmationDialog } from "components/dialogs";
 import { imageViewerSlice } from "store/imageViewer";
 import { CustomListItemButton } from "components/list-items";
 import { dataSlice } from "store/data";
@@ -14,6 +14,7 @@ import {
   selectActiveAnnotationIds,
   selectSelectedAnnotationIds,
 } from "store/imageViewer/selectors";
+import { HotkeyContext } from "utils/common/enums";
 
 type DeleteType = "ALL" | "SELECTED";
 export const ClearAnnotationsGroup = () => {
@@ -26,7 +27,7 @@ export const ClearAnnotationsGroup = () => {
     onClose: handleCloseDeleteAnnotationsDialog,
     onOpen: handleOpenDeleteAnnotationsDialog,
     open: isDeleteAnnotationsDialogOpen,
-  } = useDialog();
+  } = useDialogHotkey(HotkeyContext.ConfirmationDialog);
 
   const handleOpenAndTrack = (deleteType: DeleteType) => {
     setDeleteOp(deleteType);
@@ -89,7 +90,7 @@ export const ClearAnnotationsGroup = () => {
         icon={<DeleteIcon color="disabled" />}
       />
 
-      <DialogWithAction
+      <ConfirmationDialog
         title={`Delete ${deleteOp}  annotations`}
         content={`${
           deleteOp === "ALL"
diff --git a/src/components/lists/ImageViewerCategoryList/ImageViewerCategoryList.tsx b/src/components/lists/ImageViewerCategoryList/ImageViewerCategoryList.tsx
index 86a38958..d9cc46c0 100644
--- a/src/components/lists/ImageViewerCategoryList/ImageViewerCategoryList.tsx
+++ b/src/components/lists/ImageViewerCategoryList/ImageViewerCategoryList.tsx
@@ -5,9 +5,9 @@ import { ImageViewerCategoryItem } from "components/list-items/CategoryItem/Imag
 import { CollapsibleListItem } from "components/list-items/CollapsibleListItem";
 import { useDispatch, useSelector } from "react-redux";
 import { imageViewerSlice } from "store/imageViewer";
-import { CreateCategoryDialog } from "components/dialogs/CreateCategoryDialog/CreateCategoryDialog";
+import { CreateCategoryDialog } from "components/dialogs";
 import { useDialogHotkey } from "hooks";
-import { HotkeyView } from "utils/common/enums";
+import { HotkeyContext } from "utils/common/enums";
 import { KindWithCategories } from "store/data/types";
 import { selectFilteredImageViewerCategoryIds } from "store/imageViewer/selectors";
 import { selectImageViewerActiveKindsWithFullCat } from "store/imageViewer/reselectors";
@@ -24,7 +24,7 @@ export const ImageViewerCategoryList = () => {
     onClose: handleCloseCreateCategoryDialog,
     onOpen: handleOpenCreateCategoryDialog,
     open: isCreateCategoryDialogOpen,
-  } = useDialogHotkey(HotkeyView.DialogWithAction);
+  } = useDialogHotkey(HotkeyContext.ConfirmationDialog);
 
   const isKindFiltered = (kind: KindWithCategories) => {
     //HACK: refactor -- O(n*m)
diff --git a/src/components/lists/SegmenterList/SegmenterList.tsx b/src/components/lists/SegmenterList/SegmenterList.tsx
index 9de24f38..83d42cb2 100644
--- a/src/components/lists/SegmenterList/SegmenterList.tsx
+++ b/src/components/lists/SegmenterList/SegmenterList.tsx
@@ -9,7 +9,7 @@ import {
   SaveFittedModelDialog,
 } from "components/dialogs";
 
-import { HotkeyView } from "utils/common/enums";
+import { HotkeyContext } from "utils/common/enums";
 import { ModelIOButtonGroup } from "components/list-items/ModelIOButtonGroup/ModelIOButtonGroup";
 import { ModelExecButtonGroup } from "components/list-items/ClassifierExecListItem/ModelExecButtonGroup";
 import { useSegmentationModel } from "hooks/useLearningModel/useSegmentationModel";
@@ -31,19 +31,21 @@ export const SegmenterList = () => {
   const {
     onClose: onCloseImportSegmenterDialog,
     onOpen: onOpenImportSegmenterDialog,
-    open: openImportSegmenterDialog,
-  } = useDialogHotkey(HotkeyView.ImportTensorflowModelDialog);
+    open: importSegmenterDialogOpen,
+  } = useDialogHotkey(HotkeyContext.ConfirmationDialog);
 
   const {
     onClose: onCloseSaveSegmenterDialog,
     onOpen: onOpenSaveSegmenterDialog,
     open: openSaveSegmenterDialog,
   } = useDialog();
+
   const {
     onClose: handleCloseFitModelDialog,
     onOpen: handleOpenFitModelDialog,
     open: fittingOpen,
-  } = useDialogHotkey(HotkeyView.Segmenter, false);
+  } = useDialogHotkey(HotkeyContext.SegmenterDialog, false);
+
   useEffect(() => {
     if (modelStatus === ModelStatus.Trained && waitingForResults) {
       setWaitingForResults(false);
@@ -75,7 +77,7 @@ export const SegmenterList = () => {
             : selectedModel
         }
         onClose={onCloseImportSegmenterDialog}
-        open={openImportSegmenterDialog}
+        open={importSegmenterDialogOpen}
         modelTask={ModelTask.Segmentation}
         dispatchFunction={handleImportModel}
       />
diff --git a/src/components/menus/AddKindMenu/AddKindMenu.tsx b/src/components/menus/AddKindMenu/AddKindMenu.tsx
index 0d2ef85c..308bacf6 100644
--- a/src/components/menus/AddKindMenu/AddKindMenu.tsx
+++ b/src/components/menus/AddKindMenu/AddKindMenu.tsx
@@ -2,10 +2,11 @@ import React from "react";
 import { BaseMenu } from "../BaseMenu";
 import { MenuItem, Typography } from "@mui/material";
 import { CreateKindDialog } from "components/dialogs";
-import { useDialog, useMobileView } from "hooks";
+import { useDialogHotkey, useMobileView } from "hooks";
 import { useDispatch, useSelector } from "react-redux";
 import { projectSlice } from "store/project";
 import { selectActiveKindId } from "store/project/selectors";
+import { HotkeyContext } from "utils/common/enums";
 
 export const AddKindMenu = ({
   anchor,
@@ -25,7 +26,7 @@ export const AddKindMenu = ({
     onOpen: handleOpenCreateKindDialog,
     onClose: handleCloseCreateKindDialog,
     open: isCreateKindDialogOpen,
-  } = useDialog();
+  } = useDialogHotkey(HotkeyContext.ConfirmationDialog);
 
   const handleUnfilterKind = (kindId: string) => {
     dispatch(projectSlice.actions.removeKindTabFilter({ kindId }));
diff --git a/src/components/menus/CategoryItemMenu/CategoryItemMenu.tsx b/src/components/menus/CategoryItemMenu/CategoryItemMenu.tsx
index e9837b14..41cebbff 100644
--- a/src/components/menus/CategoryItemMenu/CategoryItemMenu.tsx
+++ b/src/components/menus/CategoryItemMenu/CategoryItemMenu.tsx
@@ -3,14 +3,14 @@ import React from "react";
 import { Box, Menu, MenuItem, MenuList, Typography } from "@mui/material";
 
 import { useDialogHotkey } from "hooks";
-import { DialogWithAction } from "components/dialogs";
+import { ConfirmationDialog } from "components/dialogs";
 
-import { UpdateCategoryDialog } from "components/dialogs/UpdateCategoryDialog";
+import { UpdateCategoryDialog } from "components/dialogs";
 import { selectActiveKindId } from "store/project/selectors";
 import { useDispatch, useSelector } from "react-redux";
 import { dataSlice } from "store/data/dataSlice";
 import { imageViewerSlice } from "store/imageViewer";
-import { HotkeyView } from "utils/common/enums";
+import { HotkeyContext } from "utils/common/enums";
 import { Category } from "store/data/types";
 import { UNKNOWN_CATEGORY_NAME } from "store/data/constants";
 
@@ -41,18 +41,18 @@ export const CategoryItemMenu = ({
     onClose: handleCloseEditCategoryDialog,
     onOpen: handleOpenEditCategoryDialog,
     open: isEditCategoryDialogOpen,
-  } = useDialogHotkey(HotkeyView.EditCategoryDialog);
+  } = useDialogHotkey(HotkeyContext.ConfirmationDialog);
   const {
     onClose: handleCloseDeleteCategoryDialog,
     onOpen: handleOpenDeleteCategoryDialog,
     open: isDeleteCategoryDialogOpen,
-  } = useDialogHotkey(HotkeyView.DeleteCategoryDialog);
+  } = useDialogHotkey(HotkeyContext.ConfirmationDialog);
 
   const {
     onClose: handleCloseDeleteObjectsDialog,
     onOpen: handleOpenDeleteObjectsDialog,
     open: isDeleteObjectsDialogOpen,
-  } = useDialogHotkey(HotkeyView.DeleteCategoryDialog);
+  } = useDialogHotkey(HotkeyContext.ConfirmationDialog);
 
   const handleRemoveCategory = () => {
     dispatch(
@@ -123,7 +123,7 @@ export const CategoryItemMenu = ({
         open={isEditCategoryDialogOpen}
         kind={activeKind}
       />
-      <DialogWithAction
+      <ConfirmationDialog
         title={`Delete "${category.name}" Category`}
         content={`Objects categorized as "${category.name}" will NOT be deleted, and instead will be labeled as
         "Unknown".`}
@@ -131,7 +131,7 @@ export const CategoryItemMenu = ({
         onClose={() => handleMenuCloseWith(handleCloseDeleteCategoryDialog)}
         isOpen={isDeleteCategoryDialogOpen}
       />
-      <DialogWithAction
+      <ConfirmationDialog
         title={`Delete All "${category.name}" Objects`}
         content={`Objects categorized as "${category.name}" will be deleted. ${
           activeKind === "Image"
diff --git a/src/components/menus/ExportAnnotationsMenu/ExportAnnotationsMenu.tsx b/src/components/menus/ExportAnnotationsMenu/ExportAnnotationsMenu.tsx
index b87a2239..84bb8448 100644
--- a/src/components/menus/ExportAnnotationsMenu/ExportAnnotationsMenu.tsx
+++ b/src/components/menus/ExportAnnotationsMenu/ExportAnnotationsMenu.tsx
@@ -18,7 +18,7 @@ import { selectProjectName } from "store/project/selectors";
 
 import { ExportAnnotationsDialog } from "components/dialogs";
 
-import { HotkeyView } from "utils/common/enums";
+import { HotkeyContext } from "utils/common/enums";
 import { selectImageViewerImages } from "store/imageViewer/reselectors";
 import {
   selectAllObjectCategories,
@@ -89,7 +89,7 @@ export const ExportAnnotationsMenu = ({
     onClose: onCloseSaveAnnotatorDialog,
     onOpen: onOpenSaveAnnotatorDialog,
     open: openSaveAnnotatorDialog,
-  } = useDialogHotkey(HotkeyView.ExportAnnotationsDialog);
+  } = useDialogHotkey(HotkeyContext.ConfirmationDialog);
 
   const onMenusClose = useCallback(() => {
     onCloseSaveAnnotatorDialog();
diff --git a/src/components/menus/OpenProjectMenu/OpenProjectMenu.tsx b/src/components/menus/OpenProjectMenu/OpenProjectMenu.tsx
index 5c311474..daf40d66 100644
--- a/src/components/menus/OpenProjectMenu/OpenProjectMenu.tsx
+++ b/src/components/menus/OpenProjectMenu/OpenProjectMenu.tsx
@@ -4,7 +4,7 @@ import { Menu, MenuItem } from "@mui/material";
 
 import { useDialogHotkey } from "hooks";
 
-import { HotkeyView } from "utils/common/enums";
+import { HotkeyContext } from "utils/common/enums";
 import { ExampleProjectDialog } from "components/dialogs";
 import { OpenProjectMenuItem } from "../OpenProjectMenuItem";
 
@@ -20,41 +20,40 @@ export const OpenProjectMenu = ({
   open,
 }: OpenProjectMenuProps) => {
   const {
-    onClose: onCloseExampleProjectDialog,
-    onOpen: onExampleProjectDialog,
-    open: openExampleProject,
-  } = useDialogHotkey(HotkeyView.ExampleClassifierDialog);
-
-  const onMenuDialogClose = (onDialogClose: () => void) => {
-    return () => {
-      onDialogClose();
-      onClose();
-    };
+    onClose: handleCloseCloseExampleProjectDialog,
+    onOpen: handleOpenExampleProjectDialog,
+    open: ExampleProjectOpen,
+  } = useDialogHotkey(HotkeyContext.ExampleProjectDialog);
+
+  const handleCloseDialog = () => {
+    handleCloseCloseExampleProjectDialog();
+    onClose();
   };
 
   return (
-    <Menu
-      anchorEl={anchorEl}
-      open={open}
-      onClose={onClose}
-      anchorOrigin={{
-        vertical: "top",
-        horizontal: "right",
-      }}
-      transformOrigin={{
-        vertical: "top",
-        horizontal: "left",
-      }}
-    >
-      <OpenProjectMenuItem onMenuClose={onClose} />
-      <MenuItem onClick={onExampleProjectDialog} dense>
-        Example Project
-      </MenuItem>
-
+    <>
+      <Menu
+        anchorEl={anchorEl}
+        open={open}
+        onClose={onClose}
+        anchorOrigin={{
+          vertical: "top",
+          horizontal: "right",
+        }}
+        transformOrigin={{
+          vertical: "top",
+          horizontal: "left",
+        }}
+      >
+        <OpenProjectMenuItem onMenuClose={onClose} />
+        <MenuItem onClick={handleOpenExampleProjectDialog} dense>
+          Example Project
+        </MenuItem>
+      </Menu>
       <ExampleProjectDialog
-        onClose={onMenuDialogClose(onCloseExampleProjectDialog)}
-        open={openExampleProject}
+        onClose={handleCloseDialog}
+        open={ExampleProjectOpen}
       />
-    </Menu>
+    </>
   );
 };
diff --git a/src/components/stage/Stage/Annotations/AnnotationTransformer/AnnotationTransformer.tsx b/src/components/stage/Stage/Annotations/AnnotationTransformer/AnnotationTransformer.tsx
index 6ff31687..c17bbd20 100644
--- a/src/components/stage/Stage/Annotations/AnnotationTransformer/AnnotationTransformer.tsx
+++ b/src/components/stage/Stage/Annotations/AnnotationTransformer/AnnotationTransformer.tsx
@@ -28,6 +28,8 @@ import {
   selectWorkingAnnotation,
 } from "store/imageViewer/selectors";
 import { selectSoundEnabled } from "store/applicationSettings/selectors";
+import { useHotkeys } from "hooks";
+import { HotkeyContext } from "utils/common/enums";
 
 const buttonWidth = 65;
 const buttonHeight = 26;
@@ -99,7 +101,7 @@ export const AnnotationTransformer = ({
   };
 
   const handleConfirmOrDeleteAnnotation = (
-    event: Konva.KonvaEventObject<Event>
+    event?: Konva.KonvaEventObject<Event>
   ) => {
     if (!activeImageId) return;
     const container = stageRef!.current!.container();
@@ -141,7 +143,7 @@ export const AnnotationTransformer = ({
     clearAnnotation();
   };
 
-  const cancelAnnotationHandler = (event: Konva.KonvaEventObject<Event>) => {
+  const cancelAnnotationHandler = (event?: Konva.KonvaEventObject<Event>) => {
     const container = stageRef!.current!.container();
     container.style.cursor = cursor;
     clearAnnotation();
@@ -218,6 +220,31 @@ export const AnnotationTransformer = ({
     };
   }, [annotationId, stageRef]);
 
+  useHotkeys(
+    "enter",
+    (event) => {
+      if (!event.repeat) {
+        if (workingAnnotation.saved?.id === annotationId) {
+          handleConfirmOrDeleteAnnotation();
+        }
+      }
+    },
+    HotkeyContext.AnnotatorView,
+    [workingAnnotation.saved]
+  );
+  useHotkeys(
+    "esc",
+    (event) => {
+      if (!event.repeat) {
+        if (workingAnnotation.saved?.id === annotationId) {
+          cancelAnnotationHandler();
+        }
+      }
+    },
+    HotkeyContext.AnnotatorView,
+    [workingAnnotation.saved]
+  );
+
   return (
     <>
       <ReactKonva.Group>
@@ -229,82 +256,82 @@ export const AnnotationTransformer = ({
           borderStrokeWidth={1}
           borderStroke="white" //TODO: It would be pretty cool if the border color could set depending on the primary color of the underlying image for contrast
         />
-        {workingAnnotation && (
-          <>
-            <ReactKonva.Group
-              id={"label-group"}
-              position={{ x: xPos, y: yPos }}
-              scaleX={1 / (stageRef?.current?.scaleX() ?? 1)}
-              scaleY={1 / (stageRef?.current?.scaleX() ?? 1)}
+        {/* {workingAnnotation && ( */}
+        <>
+          <ReactKonva.Group
+            id={"label-group"}
+            position={{ x: xPos, y: yPos }}
+            scaleX={1 / (stageRef?.current?.scaleX() ?? 1)}
+            scaleY={1 / (stageRef?.current?.scaleX() ?? 1)}
+          >
+            <ReactKonva.Label
+              position={{
+                x: labelPosition.x,
+                y: labelPosition.y1,
+              }}
+              onClick={handleConfirmOrDeleteAnnotation}
+              onTap={handleConfirmOrDeleteAnnotation}
+              id={"label"}
+              onMouseEnter={handleMouseEnter}
+              onMouseLeave={handleMouseLeave}
+            >
+              <ReactKonva.Tag
+                cornerRadius={3}
+                fill={"darkgreen"}
+                lineJoin={"round"}
+                shadowColor={"black"}
+                shadowBlur={10}
+                shadowOffset={{ x: 5, y: 5 }}
+              />
+              <ReactKonva.Text
+                fill={"white"}
+                fontSize={14}
+                padding={6}
+                text={
+                  activeAnnotationIds.includes(annotationId) &&
+                  Object.keys(workingAnnotation.changes).length === 0
+                    ? "Delete"
+                    : "Confirm"
+                }
+                width={buttonWidth}
+                height={buttonHeight}
+                align={"center"}
+                name={"transformer-button"}
+              />
+            </ReactKonva.Label>
+            <ReactKonva.Label
+              position={{
+                x: labelPosition.x,
+                y: labelPosition.y2,
+              }}
+              onClick={cancelAnnotationHandler}
+              onTap={cancelAnnotationHandler}
+              id={"label"}
+              onMouseEnter={handleMouseEnter}
+              onMouseLeave={handleMouseLeave}
             >
-              <ReactKonva.Label
-                position={{
-                  x: labelPosition.x,
-                  y: labelPosition.y1,
-                }}
-                onClick={handleConfirmOrDeleteAnnotation}
-                onTap={handleConfirmOrDeleteAnnotation}
-                id={"label"}
-                onMouseEnter={handleMouseEnter}
-                onMouseLeave={handleMouseLeave}
-              >
-                <ReactKonva.Tag
-                  cornerRadius={3}
-                  fill={"darkgreen"}
-                  lineJoin={"round"}
-                  shadowColor={"black"}
-                  shadowBlur={10}
-                  shadowOffset={{ x: 5, y: 5 }}
-                />
-                <ReactKonva.Text
-                  fill={"white"}
-                  fontSize={14}
-                  padding={6}
-                  text={
-                    activeAnnotationIds.includes(annotationId) &&
-                    Object.keys(workingAnnotation.changes).length === 0
-                      ? "Delete"
-                      : "Confirm"
-                  }
-                  width={buttonWidth}
-                  height={buttonHeight}
-                  align={"center"}
-                  name={"transformer-button"}
-                />
-              </ReactKonva.Label>
-              <ReactKonva.Label
-                position={{
-                  x: labelPosition.x,
-                  y: labelPosition.y2,
-                }}
-                onClick={cancelAnnotationHandler}
-                onTap={cancelAnnotationHandler}
-                id={"label"}
-                onMouseEnter={handleMouseEnter}
-                onMouseLeave={handleMouseLeave}
-              >
-                <ReactKonva.Tag
-                  cornerRadius={3}
-                  fill={"darkred"}
-                  lineJoin={"round"}
-                  shadowColor={"black"}
-                  shadowBlur={10}
-                  shadowOffset={{ x: 5, y: 5 }}
-                />
-                <ReactKonva.Text
-                  fill={"white"}
-                  fontSize={14}
-                  padding={6}
-                  text={"Cancel"}
-                  width={buttonWidth}
-                  height={buttonHeight}
-                  align={"center"}
-                  name={"transformer-button"}
-                />
-              </ReactKonva.Label>
-            </ReactKonva.Group>
-          </>
-        )}
+              <ReactKonva.Tag
+                cornerRadius={3}
+                fill={"darkred"}
+                lineJoin={"round"}
+                shadowColor={"black"}
+                shadowBlur={10}
+                shadowOffset={{ x: 5, y: 5 }}
+              />
+              <ReactKonva.Text
+                fill={"white"}
+                fontSize={14}
+                padding={6}
+                text={"Cancel"}
+                width={buttonWidth}
+                height={buttonHeight}
+                align={"center"}
+                name={"transformer-button"}
+              />
+            </ReactKonva.Label>
+          </ReactKonva.Group>
+        </>
+        {/* )} */}
       </ReactKonva.Group>
     </>
   );
diff --git a/src/components/stage/Stage/Stage.tsx b/src/components/stage/Stage/Stage.tsx
index bb3b5d15..80b8fa7a 100644
--- a/src/components/stage/Stage/Stage.tsx
+++ b/src/components/stage/Stage/Stage.tsx
@@ -26,7 +26,7 @@ import { selectActiveImage } from "store/imageViewer/reselectors";
 import { useStageHandlers, useAnnotationTool } from "hooks";
 import { StageContext } from "contexts";
 import { AnnotationState, ToolType } from "utils/annotator/enums";
-import { HotkeyView } from "utils/common/enums";
+import { HotkeyContext } from "utils/common/enums";
 import {
   selectActiveImageId,
   selectActiveImageRenderedSrcs,
@@ -141,7 +141,7 @@ export const Stage = ({
     (event) => {
       setDraggable(event.type === "keydown" ? true : false);
     },
-    HotkeyView.Annotator,
+    HotkeyContext.AnnotatorView,
     { keydown: true, keyup: true }
   );
 
diff --git a/src/contexts/FileUploadProvider.tsx b/src/contexts/FileUploadProvider.tsx
index f9ecb55c..81aee25c 100644
--- a/src/contexts/FileUploadProvider.tsx
+++ b/src/contexts/FileUploadProvider.tsx
@@ -43,7 +43,7 @@ import {
   selectProjectImageChannels,
 } from "store/project/selectors";
 import { projectSlice } from "store/project";
-import { DialogWithAction } from "components/dialogs";
+import { ConfirmationDialog } from "components/dialogs";
 
 type ImageShapeInfoImage = ImageFileShapeInfo & {
   fileName: string;
@@ -403,7 +403,7 @@ const ImageShapeDialog = ({
   }, [referenceHyperStack]);
 
   return (
-    <DialogWithAction
+    <ConfirmationDialog
       title={"Select Channels"}
       isOpen={open}
       content={
@@ -411,7 +411,7 @@ const ImageShapeDialog = ({
           <Typography>{promptMessage}</Typography>
           {channelOptions ? (
             <Box sx={{ pt: 1 }}>
-              <FormControl size="small" sx={{ width: "15ch", py: "20px" }}>
+              <FormControl size="small" sx={{ width: "15ch" }}>
                 <Select value={"" + channels} onChange={handleSelectChange}>
                   {channelOptions.map((channel) => {
                     return (
@@ -424,27 +424,22 @@ const ImageShapeDialog = ({
               </FormControl>
             </Box>
           ) : (
-            <Box sx={{ pt: 2, pb: 0 }}>
-              <FormControl size="small" sx={{ width: "15ch", py: "20px" }}>
+            <Box>
+              <FormControl size="small" sx={{ width: "15ch" }}>
                 <TextField
                   id="channels-c"
                   label="Channels"
                   error={invalidImageShape}
                   value={channelsString}
                   onChange={onTextFieldChange}
+                  variant="standard"
                   type="text"
                   margin="normal"
                   autoComplete="off"
                   size="small"
                 />
               </FormControl>
-              <Box
-                width="100%"
-                display="flex"
-                justifyContent="center"
-                height="2em"
-                alignContent="center"
-              >
+              <Box position="absolute">
                 {invalidImageShape && (
                   <Typography
                     variant="body2"
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index 04cd824e..52562a8e 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -3,7 +3,7 @@ export { useContextMenu } from "./useContextMenu";
 export { useDebounce } from "./useDebounce";
 export { useDialog, useDialogHotkey } from "./useDialog";
 export { useDndFileDrop } from "./useDndFileDrop";
-export { useAnnotatorKeyboardShortcuts } from "./useKeyboardShortcuts";
+export { useAnnotatorToolShortcuts } from "./useKeyboardShortcuts";
 export { useMarchingAnts } from "./useMarchingAnts";
 export { useMenu } from "./useMenu";
 export { useStageHandlers } from "./useStageHandlers";
diff --git a/src/hooks/useCategoryValidation/useCategoryValidation.tsx b/src/hooks/useCategoryValidation/useCategoryValidation.tsx
index 62946b31..ef643ac0 100644
--- a/src/hooks/useCategoryValidation/useCategoryValidation.tsx
+++ b/src/hooks/useCategoryValidation/useCategoryValidation.tsx
@@ -31,34 +31,32 @@ export function useCategoryValidation({
 
   const handleNameChange = (event: ChangeEvent<HTMLInputElement>) => {
     setName(event.target.value);
-    validateInput(event.target.value);
   };
 
   const validateInput = useCallback(
     (categoryName: string) => {
-      let validInput = true;
+      let invalidInput = false;
       let helperText = " ";
 
       if (categoryName === "") {
         helperText = "Please type a category name.";
-        validInput = false;
+        invalidInput = true;
       } else if (
         categoryName !== initName &&
         unavailableNames.includes(categoryName)
       ) {
-        helperText =
-          "Category names must be unique. A category with this name already exits.";
-        validInput = false;
+        helperText = "A category with this name already exits.";
+        invalidInput = true;
       }
-      setErrorHelperText(helperText);
-      setIsInvalidName(!validInput);
-      return validInput;
+      return { isInvalid: invalidInput, helperText };
     },
     [initName, unavailableNames]
   );
 
   useEffect(() => {
-    validateInput(name);
+    const { isInvalid, helperText } = validateInput(name);
+    setErrorHelperText(helperText);
+    setIsInvalidName(isInvalid);
   }, [name, validateInput]);
 
   useEffect(() => {
diff --git a/src/hooks/useDialog/useDialog.ts b/src/hooks/useDialog/useDialog.ts
index e0694cce..b0990ab6 100644
--- a/src/hooks/useDialog/useDialog.ts
+++ b/src/hooks/useDialog/useDialog.ts
@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from "react-redux";
 
 import { applicationSettingsSlice } from "store/applicationSettings";
 import { selectAlertState } from "store/applicationSettings/selectors";
-import { AlertType, HotkeyView } from "utils/common/enums";
+import { AlertType, HotkeyContext } from "utils/common/enums";
 
 export const useDialog = (closeOnError: boolean = true) => {
   const [open, setOpen] = useState(false);
@@ -32,7 +32,7 @@ export const useDialog = (closeOnError: boolean = true) => {
 };
 
 export const useDialogHotkey = (
-  view?: HotkeyView,
+  view?: HotkeyContext,
   closeOnError: boolean = true
 ) => {
   const dispatch = useDispatch();
@@ -45,15 +45,20 @@ export const useDialogHotkey = (
   const onOpen = () => {
     view &&
       dispatch(
-        applicationSettingsSlice.actions.registerHotkeyView({
-          hotkeyView: view,
+        applicationSettingsSlice.actions.registerHotkeyContext({
+          context: view,
         })
       );
     onDialogOpen();
   };
 
   const onClose = () => {
-    view && dispatch(applicationSettingsSlice.actions.unregisterHotkeyView({}));
+    view &&
+      dispatch(
+        applicationSettingsSlice.actions.unregisterHotkeyContext({
+          context: view,
+        })
+      );
     onDialogClose();
   };
 
diff --git a/src/hooks/useHotkeys/useHotkeys.ts b/src/hooks/useHotkeys/useHotkeys.ts
index 520acb3d..397eb4f5 100644
--- a/src/hooks/useHotkeys/useHotkeys.ts
+++ b/src/hooks/useHotkeys/useHotkeys.ts
@@ -8,8 +8,8 @@ import {
   HotkeysEvent,
   HotkeyKeyHandler,
 } from "utils/common/types";
-import { selectHotkeyView } from "store/applicationSettings/selectors";
-import { HotkeyView } from "utils/common/enums";
+import { selectHotkeyContext } from "store/applicationSettings/selectors";
+import { HotkeyContext } from "utils/common/enums";
 
 // We implement our own custom filter system.
 
@@ -33,26 +33,26 @@ const isKeyboardEventTriggeredByInput = (ev: KeyboardEvent) => {
 export function useHotkeys(
   keys: string,
   callback: HotkeyKeyHandler,
-  hotkeyView: HotkeyView | Array<HotkeyView>,
+  hotkeyContext: HotkeyContext | Array<HotkeyContext>,
   options?: HotkeyOptions
 ): void;
 export function useHotkeys(
   keys: string,
   callback: HotkeyKeyHandler,
-  hotkeyView: HotkeyView | Array<HotkeyView>,
+  hotkeyContext: HotkeyContext | Array<HotkeyContext>,
   deps?: any[]
 ): void;
 export function useHotkeys(
   keys: string,
   callback: HotkeyKeyHandler,
-  hotkeyView: HotkeyView | Array<HotkeyView>,
+  hotkeycontext: HotkeyContext | Array<HotkeyContext>,
   options?: HotkeyOptions,
   deps?: any[]
 ): void;
 export function useHotkeys(
   keys: string,
   callback: () => void,
-  hotkeyView: HotkeyView | Array<HotkeyView>,
+  hotkeyContext: HotkeyContext | Array<HotkeyContext>,
   options?: any[] | HotkeyOptions,
   deps?: any[]
 ): void {
@@ -70,7 +70,7 @@ export function useHotkeys(
     enabled = true,
     enableOnContentEditable = false,
   } = (options as HotkeyOptions) || {};
-  const currentHotkeyView = useSelector(selectHotkeyView);
+  const currentHotkeyContext = useSelector(selectHotkeyContext);
   // The return value of this callback determines if the browsers default behavior is prevented.
 
   const memoisedCallback = useCallback(
@@ -90,8 +90,10 @@ export function useHotkeys(
       }
 
       if (
-        (Array.isArray(hotkeyView) && hotkeyView.includes(currentHotkeyView)) ||
-        (!Array.isArray(hotkeyView) && hotkeyView === currentHotkeyView)
+        (Array.isArray(hotkeyContext) &&
+          hotkeyContext.includes(currentHotkeyContext)) ||
+        (!Array.isArray(hotkeyContext) &&
+          hotkeyContext === currentHotkeyContext)
       ) {
         callback(keyboardEvent, hotkeysEvent);
         return true;
@@ -100,8 +102,8 @@ export function useHotkeys(
       return false;
     }, //eslint-disable-next-line react-hooks/exhaustive-deps
     deps
-      ? [hotkeyView, currentHotkeyView, enableOnTags, filter, ...deps]
-      : [hotkeyView, currentHotkeyView, enableOnTags, filter]
+      ? [hotkeyContext, currentHotkeyContext, enableOnTags, filter, ...deps]
+      : [hotkeyContext, currentHotkeyContext, enableOnTags, filter]
   );
 
   useEffect(() => {
@@ -116,9 +118,10 @@ export function useHotkeys(
     if (keyup && keydown !== true) {
       (options as HotkeyOptions).keydown = false;
     }
-
     hotkeys(keys, (options as HotkeyOptions) || {}, memoisedCallback);
 
-    return () => hotkeys.unbind(keys, memoisedCallback);
+    return () => {
+      hotkeys.unbind(keys, memoisedCallback);
+    };
   }, [keyup, keydown, options, memoisedCallback, keys, enabled]);
 }
diff --git a/src/hooks/useKeyboardShortcuts/index.ts b/src/hooks/useKeyboardShortcuts/index.ts
index ca9e28e9..34bb3eab 100644
--- a/src/hooks/useKeyboardShortcuts/index.ts
+++ b/src/hooks/useKeyboardShortcuts/index.ts
@@ -1 +1 @@
-export { useAnnotatorKeyboardShortcuts } from "./useAnnotatorKeyboardShortcuts";
+export { useAnnotatorToolShortcuts } from "./useAnnotatorToolShortcuts";
diff --git a/src/hooks/useKeyboardShortcuts/useAnnotatorKeyboardShortcuts.tsx b/src/hooks/useKeyboardShortcuts/useAnnotatorKeyboardShortcuts.tsx
deleted file mode 100644
index 75eee705..00000000
--- a/src/hooks/useKeyboardShortcuts/useAnnotatorKeyboardShortcuts.tsx
+++ /dev/null
@@ -1,380 +0,0 @@
-import { useDispatch, useSelector } from "react-redux";
-import { useHotkeys } from "hooks";
-
-import { imageViewerSlice } from "store/imageViewer";
-
-import { annotatorSlice } from "store/annotator";
-
-import {
-  selectActiveAnnotations,
-  selectImageViewerImages,
-  selectSelectedActiveAnnotations,
-} from "store/imageViewer/reselectors";
-import {
-  AnnotationMode,
-  AnnotationState,
-  ToolType,
-} from "utils/annotator/enums";
-import { AnnotationTool } from "utils/annotator/tools";
-import { HotkeyView } from "utils/common/enums";
-import {
-  OldDecodedAnnotationType,
-  DecodedAnnotationObject,
-} from "store/data/types";
-import { selectActiveImageId } from "store/imageViewer/selectors";
-import { selectSoundEnabled } from "store/applicationSettings/selectors";
-
-type useAnnotatorHotkeysProps = {
-  annotationTool: AnnotationTool;
-  deleteAnnotations: (
-    annotationIds: Array<string>,
-    activeAnnotations: Array<DecodedAnnotationObject>
-  ) => void;
-  deselectAllAnnotations: () => void;
-  deselectAnnotation: () => void;
-  resetZoomSelection: () => void;
-  workingAnnotationEntity: {
-    saved: OldDecodedAnnotationType | undefined;
-    changes: Partial<OldDecodedAnnotationType>;
-  };
-  selectedAnnotationsIds: string[];
-  selectionMode: AnnotationMode;
-  toolType: ToolType;
-};
-
-export const useAnnotatorKeyboardShortcuts = ({
-  annotationTool,
-  deleteAnnotations,
-  deselectAllAnnotations,
-  deselectAnnotation,
-  resetZoomSelection,
-  workingAnnotationEntity,
-  selectedAnnotationsIds,
-  selectionMode,
-  toolType,
-}: useAnnotatorHotkeysProps) => {
-  const dispatch = useDispatch();
-
-  const images = useSelector(selectImageViewerImages);
-  const activeImageId = useSelector(selectActiveImageId);
-  const selectedAnnotations = useSelector(selectSelectedActiveAnnotations);
-  const activeAnnotations = useSelector(selectActiveAnnotations);
-
-  const confirmAnnotations = () => {
-    if (
-      !workingAnnotationEntity.saved ||
-      annotationTool.annotationState === AnnotationState.Annotating ||
-      !activeImageId
-    )
-      return;
-
-    deselectAnnotation();
-
-    if (selectionMode !== AnnotationMode.New)
-      dispatch(
-        annotatorSlice.actions.setSelectionMode({
-          selectionMode: AnnotationMode.New,
-        })
-      );
-
-    if (!selectedAnnotationsIds.length) return;
-
-    deselectAllAnnotations();
-  };
-
-  const soundEnabled = useSelector(selectSoundEnabled);
-  /*
-   * Select category (1-9)
-   */
-  // useHotkeys(
-  //   "shift+1,shift+2,shit+3,shift+4,shift+5,shift+6,shift+7,shift+8,shift+9",
-  //   (event: KeyboardEvent, handler) => {
-  //     const index = parseInt(handler.key.slice(-1));
-
-  //     const selectedCategory = annotationCategories[index];
-
-  //     if (!selectedCategory) return;
-
-  //     dispatch(
-  //       setSelectedCategoryId({
-  //         selectedCategoryId: selectedCategory.id,
-  //       })
-  //     );
-  //   },
-  //   HotkeyView.Annotator
-  // );
-  /*
-   * Select color tool (C)
-   */
-  useHotkeys(
-    "shift+c",
-    () => {
-      dispatch(
-        annotatorSlice.actions.setToolType({
-          operation: ToolType.ColorAnnotation,
-        })
-      );
-    },
-    HotkeyView.Annotator
-  );
-  /*
-   * Select pencil tool (D)
-   */
-  useHotkeys(
-    "shift+d",
-    () => {
-      dispatch(
-        annotatorSlice.actions.setToolType({
-          operation: ToolType.PenAnnotation,
-        })
-      );
-    },
-    HotkeyView.Annotator
-  );
-  /*
-   * Select elliptical tool (E)
-   */
-  useHotkeys(
-    "shift+e",
-    () => {
-      dispatch(
-        annotatorSlice.actions.setToolType({
-          operation: ToolType.EllipticalAnnotation,
-        })
-      );
-    },
-    HotkeyView.Annotator
-  );
-  /*
-   * Select hand tool (H)
-   */
-  useHotkeys(
-    "shift+h",
-    () => {
-      dispatch(
-        annotatorSlice.actions.setToolType({ operation: ToolType.Hand })
-      );
-    },
-    HotkeyView.Annotator
-  );
-  /*
-   * Select intensity adjustment tool (I)
-   */
-  useHotkeys(
-    "shift+i",
-    () => {
-      dispatch(
-        annotatorSlice.actions.setToolType({
-          operation: ToolType.ColorAdjustment,
-        })
-      );
-    },
-    HotkeyView.Annotator
-  );
-  /*
-   * Select lasso tool (L)
-   */
-  useHotkeys(
-    "shift+l",
-    () => {
-      dispatch(
-        annotatorSlice.actions.setToolType({
-          operation: ToolType.LassoAnnotation,
-        })
-      );
-    },
-    HotkeyView.Annotator
-  );
-  /*
-   * Select magnetic tool (M)
-   */
-  useHotkeys(
-    "shift+m",
-    () => {
-      dispatch(
-        annotatorSlice.actions.setToolType({
-          operation: ToolType.MagneticAnnotation,
-        })
-      );
-    },
-    HotkeyView.Annotator
-  );
-  /*
-   * Select polygonal tool (P)
-   */
-  useHotkeys(
-    "shift+p",
-    () => {
-      dispatch(
-        annotatorSlice.actions.setToolType({
-          operation: ToolType.PolygonalAnnotation,
-        })
-      );
-    },
-    HotkeyView.Annotator
-  );
-  /*
-   * Select quick tool (Q)
-   */
-  useHotkeys(
-    "shift+q",
-    () => {
-      dispatch(
-        annotatorSlice.actions.setToolType({
-          operation: ToolType.QuickAnnotation,
-        })
-      );
-    },
-    HotkeyView.Annotator
-  );
-  /*
-   * Select rectangular tool (R)
-   */
-  useHotkeys(
-    "shift+r",
-    () => {
-      dispatch(
-        annotatorSlice.actions.setToolType({
-          operation: ToolType.RectangularAnnotation,
-        })
-      );
-    },
-    HotkeyView.Annotator
-  );
-  /*
-   * Select arrange tool (S)
-   */
-  useHotkeys(
-    "shift+s",
-    () => {
-      dispatch(
-        annotatorSlice.actions.setToolType({ operation: ToolType.Pointer })
-      );
-    },
-    HotkeyView.Annotator
-  );
-
-  /*
-   * Select threshold tool (T)
-   */
-  useHotkeys(
-    "shift+t",
-    () => {
-      dispatch(
-        annotatorSlice.actions.setToolType({
-          operation: ToolType.ThresholdAnnotation,
-        })
-      );
-    },
-    HotkeyView.Annotator
-  );
-
-  /*
-   * Select zoom tool (Z)
-   */
-  useHotkeys(
-    "shift+z",
-    () => {
-      dispatch(
-        annotatorSlice.actions.setToolType({ operation: ToolType.Zoom })
-      );
-    },
-    HotkeyView.Annotator
-  );
-  useHotkeys(
-    "enter",
-    () => {
-      confirmAnnotations();
-    },
-    HotkeyView.Annotator,
-    [
-      activeImageId,
-      annotationTool,
-      annotationTool.annotationState,
-      selectedAnnotations,
-      activeAnnotations,
-      selectionMode,
-      selectedAnnotationsIds,
-      soundEnabled,
-      toolType,
-    ]
-  );
-
-  useHotkeys(
-    "escape",
-    () => {
-      deselectAllAnnotations();
-
-      deselectAnnotation();
-
-      if (toolType !== ToolType.Zoom) return;
-      resetZoomSelection();
-    },
-    HotkeyView.Annotator,
-    [annotationTool, soundEnabled, toolType]
-  );
-
-  useHotkeys(
-    "backspace, delete",
-    () => {
-      deleteAnnotations(selectedAnnotationsIds, activeAnnotations);
-      deselectAllAnnotations();
-
-      deselectAnnotation();
-    },
-    HotkeyView.Annotator,
-    [selectedAnnotationsIds, soundEnabled]
-  );
-
-  useHotkeys(
-    "up",
-    () => {
-      if (!activeImageId) {
-        return;
-      }
-
-      const activeImageIdx = images.findIndex(
-        (image) => image.id === activeImageId
-      );
-      if (activeImageIdx < 1) {
-        return;
-      }
-
-      const newActiveImageId = images[activeImageIdx - 1].id;
-      dispatch(
-        imageViewerSlice.actions.setActiveImageId({
-          imageId: newActiveImageId,
-          prevImageId: activeImageId,
-        })
-      );
-    },
-    HotkeyView.Annotator,
-    [images, activeImageId]
-  );
-
-  useHotkeys(
-    "down",
-    () => {
-      if (!activeImageId) {
-        return;
-      }
-
-      const activeImageIdx = images.findIndex(
-        (image) => image.id === activeImageId
-      );
-      if (activeImageIdx === -1 || activeImageIdx === images.length - 1) {
-        return;
-      }
-
-      const newActiveImageId = images[activeImageIdx + 1].id;
-      dispatch(
-        imageViewerSlice.actions.setActiveImageId({
-          imageId: newActiveImageId,
-          prevImageId: activeImageId,
-        })
-      );
-    },
-    HotkeyView.Annotator,
-    [images, activeImageId]
-  );
-};
diff --git a/src/hooks/useKeyboardShortcuts/useAnnotatorToolShortcuts.tsx b/src/hooks/useKeyboardShortcuts/useAnnotatorToolShortcuts.tsx
new file mode 100644
index 00000000..aafc4a2d
--- /dev/null
+++ b/src/hooks/useKeyboardShortcuts/useAnnotatorToolShortcuts.tsx
@@ -0,0 +1,167 @@
+import { useDispatch, useSelector } from "react-redux";
+import { useHotkeys } from "hooks";
+
+import { imageViewerSlice } from "store/imageViewer";
+
+import { annotatorSlice } from "store/annotator";
+
+import { selectImageViewerImages } from "store/imageViewer/reselectors";
+import { ToolType } from "utils/annotator/enums";
+import { HotkeyContext } from "utils/common/enums";
+import { selectActiveImageId } from "store/imageViewer/selectors";
+
+export const useAnnotatorToolShortcuts = () => {
+  const dispatch = useDispatch();
+
+  const images = useSelector(selectImageViewerImages);
+  const activeImageId = useSelector(selectActiveImageId);
+
+  /*
+   * Select color tool (C)
+   */
+  useHotkeys(
+    "shift+C,shift+D,shift+E,shift+H,shift+I,shift+L,shift+M,shift+P,shift+Q,shift+R,shift+S,shift+T,shift+Z",
+    (event, _handler) => {
+      if (!event.repeat) {
+        const key = event.key;
+        switch (key) {
+          case "C":
+            dispatch(
+              annotatorSlice.actions.setToolType({
+                operation: ToolType.ColorAnnotation,
+              })
+            );
+            break;
+          case "D":
+            dispatch(
+              annotatorSlice.actions.setToolType({
+                operation: ToolType.PenAnnotation,
+              })
+            );
+            break;
+          case "E":
+            dispatch(
+              annotatorSlice.actions.setToolType({
+                operation: ToolType.EllipticalAnnotation,
+              })
+            );
+            break;
+          case "I":
+            dispatch(
+              annotatorSlice.actions.setToolType({
+                operation: ToolType.ColorAdjustment,
+              })
+            );
+            break;
+          case "L":
+            dispatch(
+              annotatorSlice.actions.setToolType({
+                operation: ToolType.LassoAnnotation,
+              })
+            );
+            break;
+          case "M":
+            dispatch(
+              annotatorSlice.actions.setToolType({
+                operation: ToolType.MagneticAnnotation,
+              })
+            );
+            break;
+          case "P":
+            dispatch(
+              annotatorSlice.actions.setToolType({
+                operation: ToolType.PolygonalAnnotation,
+              })
+            );
+            break;
+          case "Q":
+            dispatch(
+              annotatorSlice.actions.setToolType({
+                operation: ToolType.QuickAnnotation,
+              })
+            );
+            break;
+          case "R":
+            dispatch(
+              annotatorSlice.actions.setToolType({
+                operation: ToolType.RectangularAnnotation,
+              })
+            );
+            break;
+          case "S":
+            dispatch(
+              annotatorSlice.actions.setToolType({
+                operation: ToolType.Pointer,
+              })
+            );
+            break;
+          case "T":
+            dispatch(
+              annotatorSlice.actions.setToolType({
+                operation: ToolType.ThresholdAnnotation,
+              })
+            );
+            break;
+          case "Z":
+            dispatch(
+              annotatorSlice.actions.setToolType({ operation: ToolType.Zoom })
+            );
+            break;
+        }
+      }
+    },
+    HotkeyContext.AnnotatorView
+  );
+
+  useHotkeys(
+    "up",
+    () => {
+      if (!activeImageId) {
+        return;
+      }
+
+      const activeImageIdx = images.findIndex(
+        (image) => image.id === activeImageId
+      );
+      if (activeImageIdx < 1) {
+        return;
+      }
+
+      const newActiveImageId = images[activeImageIdx - 1].id;
+      dispatch(
+        imageViewerSlice.actions.setActiveImageId({
+          imageId: newActiveImageId,
+          prevImageId: activeImageId,
+        })
+      );
+    },
+    HotkeyContext.AnnotatorView,
+    [images, activeImageId]
+  );
+
+  useHotkeys(
+    "down",
+    () => {
+      if (!activeImageId) {
+        return;
+      }
+
+      const activeImageIdx = images.findIndex(
+        (image) => image.id === activeImageId
+      );
+      if (activeImageIdx === -1 || activeImageIdx === images.length - 1) {
+        return;
+      }
+
+      const newActiveImageId = images[activeImageIdx + 1].id;
+      dispatch(
+        imageViewerSlice.actions.setActiveImageId({
+          imageId: newActiveImageId,
+          prevImageId: activeImageId,
+        })
+      );
+    },
+    HotkeyContext.AnnotatorView,
+    [images, activeImageId]
+  );
+};
diff --git a/src/hooks/useLearningModel/useClassifierModel.tsx b/src/hooks/useLearningModel/useClassifierModel.tsx
index 9245300d..27c36d8d 100644
--- a/src/hooks/useLearningModel/useClassifierModel.tsx
+++ b/src/hooks/useLearningModel/useClassifierModel.tsx
@@ -36,7 +36,7 @@ export const useClassificationModel = () => {
       })
     );
   };
-  const handleImportModel = (model: Model, inputShape: Shape) => {
+  const handleImportModel = async (model: Model, inputShape: Shape) => {
     if (model instanceof SequentialClassifier) {
       dispatch(
         classifierSlice.actions.loadUserSelectedModel({
diff --git a/src/hooks/usePointerTool/usePointerTool.ts b/src/hooks/usePointerTool/usePointerTool.ts
index c03babbc..331fc5f0 100644
--- a/src/hooks/usePointerTool/usePointerTool.ts
+++ b/src/hooks/usePointerTool/usePointerTool.ts
@@ -7,7 +7,7 @@ import { getOverlappingAnnotations } from "utils/annotator";
 import { getAnnotationsInBox } from "utils/annotator/imageHelper";
 import { Point } from "utils/annotator/types";
 import { ToolType } from "utils/annotator/enums";
-import { HotkeyView } from "utils/common/enums";
+import { HotkeyContext } from "utils/common/enums";
 import { DecodedAnnotationObject } from "store/data/types";
 import { selectActiveImageId } from "store/imageViewer/selectors";
 import { selectActiveAnnotations } from "store/imageViewer/reselectors";
@@ -39,8 +39,9 @@ export const usePointerTool = (
         setShift(false);
       }
     },
-    HotkeyView.Annotator,
-    { keyup: true, keydown: true }
+    HotkeyContext.AnnotatorView,
+    { keyup: true, keydown: true },
+    []
   );
 
   /*
diff --git a/src/hooks/useStageHandlers/useStageHandlers.ts b/src/hooks/useStageHandlers/useStageHandlers.ts
index 94479243..b772efd9 100644
--- a/src/hooks/useStageHandlers/useStageHandlers.ts
+++ b/src/hooks/useStageHandlers/useStageHandlers.ts
@@ -5,10 +5,7 @@ import { KonvaEventObject } from "konva/lib/Node";
 import Konva from "konva";
 import { throttle } from "lodash";
 
-import {
-  useZoom,
-  //useAnnotatorKeyboardShortcuts
-} from "hooks";
+import { useZoom } from "hooks";
 
 import {
   imageViewerSlice,
@@ -266,18 +263,6 @@ export const useStageHandlers = (
     setCurrentMousePosition();
   };
 
-  //   useAnnotatorKeyboardShortcuts({
-  //     annotationTool,
-  //     deleteAnnotations,
-  //     deselectAllAnnotations,
-  //     deselectAnnotation,
-  //     resetZoomSelection,
-  //     workingAnnotationEntity,
-  //     selectedAnnotationsIds,
-  //     selectionMode,
-  //     toolType,
-  //   });
-
   return {
     onPointerMouseDown,
     handleMouseUp,
diff --git a/src/store/applicationSettings/applicationSettingsSlice.ts b/src/store/applicationSettings/applicationSettingsSlice.ts
index 86bcbbf2..7164f2ed 100644
--- a/src/store/applicationSettings/applicationSettingsSlice.ts
+++ b/src/store/applicationSettings/applicationSettingsSlice.ts
@@ -1,9 +1,10 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { defaultAlert } from "utils/common/constants";
 import { AlertState } from "utils/common/types";
-import { HotkeyView, Languages } from "utils/common/enums";
+import { HotkeyContext, Languages } from "utils/common/enums";
 import { ThemeMode } from "themes/enums";
 import { AppSettingsState } from "store/types";
+import { logger } from "utils/common/helpers";
 
 const initialState: AppSettingsState = {
   init: false,
@@ -31,12 +32,7 @@ export const applicationSettingsSlice = createSlice({
     hideAlertState(state, action: PayloadAction<{}>) {
       state.alertState.visible = false;
     },
-    registerHotkeyView(
-      state,
-      action: PayloadAction<{ hotkeyView: HotkeyView }>
-    ) {
-      state.hotkeyStack.push(action.payload.hotkeyView);
-    },
+
     setLanguage(state, action: PayloadAction<{ language: Languages }>) {
       state.language = action.payload.language;
     },
@@ -61,8 +57,24 @@ export const applicationSettingsSlice = createSlice({
     setSoundEnabled(state, action: PayloadAction<{ soundEnabled: boolean }>) {
       state.soundEnabled = action.payload.soundEnabled;
     },
-    unregisterHotkeyView(state, action: PayloadAction<{}>) {
-      state.hotkeyStack.pop();
+    registerHotkeyContext(
+      state,
+      action: PayloadAction<{ context: HotkeyContext }>
+    ) {
+      state.hotkeyStack.push(action.payload.context);
+    },
+    unregisterHotkeyContext(
+      state,
+      action: PayloadAction<{ context: HotkeyContext }>
+    ) {
+      if (
+        state.hotkeyStack[state.hotkeyStack.length - 1] ===
+        action.payload.context
+      ) {
+        state.hotkeyStack.pop();
+      } else {
+        logger("Hotkey not at top of stack. Nothing popped.", { dev: true });
+      }
     },
     updateAlertState(state, action: PayloadAction<{ alertState: AlertState }>) {
       state.alertState = action.payload.alertState;
diff --git a/src/store/applicationSettings/selectors.ts b/src/store/applicationSettings/selectors.ts
index 20c3cd8f..86e45f5d 100644
--- a/src/store/applicationSettings/selectors.ts
+++ b/src/store/applicationSettings/selectors.ts
@@ -1,6 +1,6 @@
 import { AppSettingsState } from "store/types";
 import { ThemeMode } from "themes/enums";
-import { HotkeyView } from "utils/common/enums";
+import { HotkeyContext } from "utils/common/enums";
 import { AlertState } from "utils/common/types";
 
 export const selectAlertState = ({
@@ -11,11 +11,11 @@ export const selectAlertState = ({
   return applicationSettings.alertState;
 };
 
-export const selectHotkeyView = ({
+export const selectHotkeyContext = ({
   applicationSettings,
 }: {
   applicationSettings: AppSettingsState;
-}): HotkeyView => {
+}): HotkeyContext => {
   return applicationSettings.hotkeyStack.at(-1)!;
 };
 
diff --git a/src/store/classifier/classiferListener.ts b/src/store/classifier/classifierListener.ts
similarity index 100%
rename from src/store/classifier/classiferListener.ts
rename to src/store/classifier/classifierListener.ts
diff --git a/src/store/productionStore.ts b/src/store/productionStore.ts
index 408576e0..ddf4bb20 100644
--- a/src/store/productionStore.ts
+++ b/src/store/productionStore.ts
@@ -18,7 +18,7 @@ import { imageViewerSlice } from "./imageViewer";
 import { dataSlice } from "./data/dataSlice";
 import { projectSlice } from "./project";
 import { segmenterSlice } from "./segmenter";
-import { classifierMiddleware } from "./classifier/classiferListener";
+import { classifierMiddleware } from "./classifier/classifierListener";
 import { segmenterMiddleware } from "./segmenter/segmenterListeners";
 import { measurementsSlice } from "./measurements/measurementsSlice";
 import { measurementsMiddleware } from "./measurements/measurementListeners";
diff --git a/src/store/types.ts b/src/store/types.ts
index d2c1c055..96d78312 100644
--- a/src/store/types.ts
+++ b/src/store/types.ts
@@ -11,7 +11,7 @@ import {
 } from "utils/annotator/types";
 
 import { AlertState, FilterType } from "utils/common/types";
-import { HotkeyView, Languages, ThingSortKey } from "utils/common/enums";
+import { HotkeyContext, Languages, ThingSortKey } from "utils/common/enums";
 import { ThemeMode } from "themes/enums";
 
 import {
@@ -141,7 +141,7 @@ export type AppSettingsState = {
   imageSelectionColor: string;
   selectedImageBorderWidth: number;
   alertState: AlertState;
-  hotkeyStack: HotkeyView[];
+  hotkeyStack: HotkeyContext[];
   language: Languages;
   soundEnabled: boolean;
 };
diff --git a/src/utils/annotator/enums.ts b/src/utils/annotator/enums.ts
index 5239ec63..c21d4bf7 100644
--- a/src/utils/annotator/enums.ts
+++ b/src/utils/annotator/enums.ts
@@ -17,7 +17,6 @@ export enum ToolType {
   ColorAdjustment,
   ColorAnnotation,
   EllipticalAnnotation,
-  Hand,
   LassoAnnotation,
   MagneticAnnotation,
   ObjectAnnotation,
diff --git a/src/utils/annotator/imageHelper.ts b/src/utils/annotator/imageHelper.ts
index 8cd316f3..8ae69c4f 100644
--- a/src/utils/annotator/imageHelper.ts
+++ b/src/utils/annotator/imageHelper.ts
@@ -235,14 +235,14 @@ export const colorOverlayROI = (
     }).resize({ factor: scalingFactor });
   } catch (err) {
     if (process.env.NODE_ENV !== "production") {
-      logger("could not create crop", "error");
+      logger("could not create crop", { level: "error" });
       logger(`boundingbox: ${boundingBox}`);
       logger(`boxWidth: ${boxWidth}`);
       logger(`boxHeight: ${boxHeight}`);
       logger(`bwxbh: ${boxHeight * boxWidth}`);
       logger(`decodedMask length: ${decodedMask.length}`);
       logger(`diff: ${boxHeight * boxWidth - decodedMask.length}`);
-      logger(err, "error");
+      logger(err, { level: "error" });
     }
   }
 
diff --git a/src/utils/common/enums.ts b/src/utils/common/enums.ts
index bc83deb0..529c4675 100644
--- a/src/utils/common/enums.ts
+++ b/src/utils/common/enums.ts
@@ -4,27 +4,16 @@ export enum AlertType {
   Info,
 }
 
-export enum HotkeyView {
-  Annotator,
-  Classifier,
-  Segmenter,
-  CreateCategoryDialog,
-  DeleteAnnotationCategoryDialog,
-  DeleteAllCategoriesDialog,
-  DeleteCategoryDialog,
-  DeleteImagesDialog,
-  EditCategoryDialog,
-  ExampleClassifierDialog,
-  ImageShapeDialog,
-  ImportTensorflowModelDialog,
-  MainImageGrid,
-  MainImageGridAppBar,
-  NewProjectDialog,
-  ExportAnnotationsDialog,
-  SaveFittedModelDialog,
-  SaveProjectDialog,
+export enum HotkeyContext {
   ProjectView,
-  DialogWithAction,
+  AnnotatorView,
+  MeasurementsView,
+  ClassifierDialog,
+  SegmenterDialog,
+  ExampleProjectDialog,
+  ImportTensorflowModelDialog,
+  ConfirmationDialog,
+  AppSettingsDialog,
 }
 
 export enum Languages {
diff --git a/src/utils/common/helpers.ts b/src/utils/common/helpers.ts
index 2b71dcc3..918fa980 100644
--- a/src/utils/common/helpers.ts
+++ b/src/utils/common/helpers.ts
@@ -51,23 +51,48 @@ export const createGitHubIssue = (
 
 export const logger = (
   message: any | any[],
-  level: "log" | "warn" | "error" = "log"
+  options?: { level?: "log" | "warn" | "error"; dev?: boolean }
 ) => {
+  if (!options) {
+    options = { level: "log" };
+  } else {
+    if (!options.level) {
+      options.level = "log";
+    }
+  }
   if (Array.isArray(message)) {
     message = message.join("");
   }
-  switch (level) {
-    case "log":
-      console.log(message);
-      break;
-    case "warn":
-      console.warn(message);
-      break;
-    case "error":
-      console.error(message);
-      break;
-    default:
-      break;
+  if (options?.dev) {
+    if (process.env.NODE_ENV !== "production") {
+      switch (options.level) {
+        case "log":
+          console.log(message);
+          break;
+        case "warn":
+          console.warn(message);
+          break;
+        case "error":
+          console.error(message);
+          break;
+        default:
+          break;
+      }
+    }
+  } else {
+    switch (options.level) {
+      case "log":
+        console.log(message);
+        break;
+      case "warn":
+        console.warn(message);
+        break;
+      case "error":
+        console.error(message);
+        break;
+      default:
+        break;
+    }
   }
 };
 
diff --git a/src/views/ImageViewer/ImageViewer.tsx b/src/views/ImageViewer/ImageViewer.tsx
index 15e88ac5..e50dbd70 100644
--- a/src/views/ImageViewer/ImageViewer.tsx
+++ b/src/views/ImageViewer/ImageViewer.tsx
@@ -18,14 +18,14 @@ import { StageContext } from "contexts";
 import { AnnotatorToolDrawer } from "components/drawers";
 import { APPLICATION_COLORS } from "utils/common/constants";
 import { getStackTraceFromError } from "utils/common/helpers";
-import { AlertType, HotkeyView } from "utils/common/enums";
+import { AlertType, HotkeyContext } from "utils/common/enums";
 import { selectAlertState } from "store/applicationSettings/selectors";
 
 export const ImageViewer = () => {
   const dispatch = useDispatch();
   const stageRef = useRef<Konva.Stage>(null);
 
-  const [optionsVisible, setOptionsVisibile] = useState<boolean>(true);
+  const [optionsVisible, setOptionsVisibile] = useState<boolean>(false);
   const [persistOptions, setPersistOptions] = useState<boolean>(false);
   const isMobile = useMobileView();
   const alertState = useSelector(selectAlertState);
@@ -83,12 +83,16 @@ export const ImageViewer = () => {
   }, []);
   useEffect(() => {
     dispatch(
-      applicationSettingsSlice.actions.registerHotkeyView({
-        hotkeyView: HotkeyView.Annotator,
+      applicationSettingsSlice.actions.registerHotkeyContext({
+        context: HotkeyContext.AnnotatorView,
       })
     );
     return () => {
-      dispatch(applicationSettingsSlice.actions.unregisterHotkeyView({}));
+      dispatch(
+        applicationSettingsSlice.actions.unregisterHotkeyContext({
+          context: HotkeyContext.AnnotatorView,
+        })
+      );
     };
   }, [dispatch]);
 
diff --git a/src/views/MeasurementView/MeasurementView.tsx b/src/views/MeasurementView/MeasurementView.tsx
index 8717e955..3e52faaa 100644
--- a/src/views/MeasurementView/MeasurementView.tsx
+++ b/src/views/MeasurementView/MeasurementView.tsx
@@ -10,7 +10,7 @@ import { useUnloadConfirmation } from "hooks";
 
 import { selectProjectImageChannels } from "store/project/selectors";
 import { dimensions } from "utils/common/constants";
-import { HotkeyView } from "utils/common/enums";
+import { HotkeyContext } from "utils/common/enums";
 import { applicationSettingsSlice } from "store/applicationSettings";
 import { measurementsSlice } from "store/measurements/measurementsSlice";
 
@@ -23,14 +23,14 @@ export const MeasurementView = () => {
 
   useEffect(() => {
     dispatch(
-      applicationSettingsSlice.actions.registerHotkeyView({
-        hotkeyView: HotkeyView.ProjectView,
+      applicationSettingsSlice.actions.registerHotkeyContext({
+        context: HotkeyContext.MeasurementsView,
       })
     );
     return () => {
       dispatch(
-        applicationSettingsSlice.actions.unregisterHotkeyView({
-          hotkeyView: HotkeyView.ProjectView,
+        applicationSettingsSlice.actions.unregisterHotkeyContext({
+          context: HotkeyContext.MeasurementsView,
         })
       );
     };
diff --git a/src/views/ProjectViewer/ProjectViewer.tsx b/src/views/ProjectViewer/ProjectViewer.tsx
index ab296441..c8a82474 100644
--- a/src/views/ProjectViewer/ProjectViewer.tsx
+++ b/src/views/ProjectViewer/ProjectViewer.tsx
@@ -20,7 +20,7 @@ import { dimensions } from "utils/common/constants";
 import { InteractiveTabbedView } from "components/styled-components";
 import { ImageGrid } from "components/image-grids";
 import { ProjectAppBar } from "components/app-bars/";
-import { HotkeyView } from "utils/common/enums";
+import { HotkeyContext } from "utils/common/enums";
 import { dataSlice } from "store/data/dataSlice";
 import { selectVisibleKinds } from "store/project/reselectors";
 import {
@@ -78,18 +78,19 @@ export const ProjectViewer = () => {
 
   useEffect(() => {
     dispatch(
-      applicationSettingsSlice.actions.registerHotkeyView({
-        hotkeyView: HotkeyView.ProjectView,
+      applicationSettingsSlice.actions.registerHotkeyContext({
+        context: HotkeyContext.ProjectView,
       })
     );
     return () => {
       dispatch(
-        applicationSettingsSlice.actions.unregisterHotkeyView({
-          hotkeyView: HotkeyView.ProjectView,
+        applicationSettingsSlice.actions.unregisterHotkeyContext({
+          context: HotkeyContext.ProjectView,
         })
       );
     };
   }, [dispatch]);
+
   useEffect(() => {
     if (isMobile) {
       const minimizeOnResize = visibleKinds.filter(