diff --git a/src/components/app-bars/GridItemActionBar/GridItemActionBar.tsx b/src/components/app-bars/GridItemActionBar/GridItemActionBar.tsx
deleted file mode 100644
index 1e1b699d..00000000
--- a/src/components/app-bars/GridItemActionBar/GridItemActionBar.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-import React from "react";
-import { useDispatch, useSelector } from "react-redux";
-import { useNavigate } from "react-router-dom";
-
-import {
-  AppBar,
-  Chip,
-  IconButton,
-  Slide,
-  Toolbar,
-  Tooltip,
-  Typography,
-  Box,
-} from "@mui/material";
-
-import {
-  Clear as ClearIcon,
-  Delete as DeleteIcon,
-  Deselect as DeselectIcon,
-  Gesture as GestureIcon,
-  LabelOutlined as LabelOutlinedIcon,
-  SelectAll as SelectAllIcon,
-} from "@mui/icons-material";
-
-import { ImageCategoryMenu } from "components/menus";
-import { TooltipTitle } from "components/tooltips";
-
-import { applicationSettingsSlice } from "store/applicationSettings";
-
-import { HotkeyView } from "utils/common/enums";
-import { dataSlice } from "store/data/dataSlice";
-import { Partition } from "utils/models/enums";
-import { selectActiveCategories } from "store/project/reselectors";
-
-type GridItemActionBarProps = {
-  allSelected: boolean;
-  selectedThings: string[];
-  selectAllThings: any;
-  deselectAllThings: any;
-  handleOpenDeleteDialog: any;
-  onOpenImageViewer: any;
-};
-
-export const GridItemActionBar = ({
-  allSelected,
-  selectedThings,
-  selectAllThings,
-  deselectAllThings,
-  handleOpenDeleteDialog,
-  onOpenImageViewer: handleOpenImageViewer,
-}: GridItemActionBarProps) => {
-  const dispatch = useDispatch();
-  const navigate = useNavigate();
-
-  const [categoryMenuAnchorEl, setCategoryMenuAnchorEl] =
-    React.useState<null | HTMLElement>(null);
-
-  const categories = useSelector(selectActiveCategories);
-
-  const handleSelectAllObjects = () => {
-    selectAllThings();
-  };
-
-  const handleDeselectAllObjects = () => {
-    deselectAllThings();
-  };
-
-  const onOpenCategoriesMenu = (event: React.MouseEvent<HTMLDivElement>) => {
-    setCategoryMenuAnchorEl(event.currentTarget);
-  };
-
-  const onCloseCategoryMenu = () => {
-    setCategoryMenuAnchorEl(null);
-  };
-  const handleUpdateCategories = (categoryId: string) => {
-    const updates = selectedThings.map((thingId) => ({
-      id: thingId,
-      categoryId: categoryId,
-      partition: Partition.Unassigned,
-    }));
-    dispatch(
-      dataSlice.actions.updateThings({
-        updates,
-        isPermanent: true,
-      })
-    );
-  };
-
-  const handleNavigateImageViewer = () => {
-    handleOpenImageViewer();
-    dispatch(
-      applicationSettingsSlice.actions.unregisterHotkeyView({
-        hotkeyView: HotkeyView.MainImageGridAppBar,
-      })
-    );
-    navigate("/imageviewer");
-  };
-
-  return (
-    <>
-      <Slide appear={false} direction="down" in={selectedThings.length > 0}>
-        <AppBar color="inherit" position="fixed">
-          <Toolbar>
-            <Tooltip
-              placement="bottom"
-              title={TooltipTitle("Unselect images", "esc")}
-            >
-              <IconButton
-                sx={{ marginRight: (theme) => theme.spacing(2) }}
-                edge="start"
-                color="inherit"
-                onClick={handleDeselectAllObjects}
-              >
-                <ClearIcon />
-              </IconButton>
-            </Tooltip>
-
-            <Typography sx={{ flexGrow: 1 }}>
-              {`${selectedThings.length} selected `}
-            </Typography>
-
-            <Box sx={{ flexGrow: 1 }} />
-
-            <Chip
-              avatar={<LabelOutlinedIcon color="inherit" />}
-              label="Categorize"
-              onClick={onOpenCategoriesMenu}
-              variant="outlined"
-              style={{ marginRight: 15 }}
-            />
-            <Chip
-              avatar={<GestureIcon color="inherit" />}
-              label="Annotate"
-              onClick={handleNavigateImageViewer}
-              variant="outlined"
-            />
-
-            {!allSelected ? (
-              <Tooltip
-                placement="bottom"
-                title={TooltipTitle(`Select all`, "control", "a")}
-              >
-                <IconButton color="inherit" onClick={handleSelectAllObjects}>
-                  <SelectAllIcon />
-                </IconButton>
-              </Tooltip>
-            ) : (
-              <Tooltip
-                placement="bottom"
-                title={TooltipTitle(`Unselect`, "esc")}
-              >
-                <IconButton color="inherit" onClick={handleDeselectAllObjects}>
-                  <DeselectIcon />
-                </IconButton>
-              </Tooltip>
-            )}
-
-            <Tooltip
-              placement="bottom"
-              title={TooltipTitle(`Delete selected`, "delete")}
-            >
-              <IconButton color="inherit" onClick={handleOpenDeleteDialog}>
-                <DeleteIcon />
-              </IconButton>
-            </Tooltip>
-          </Toolbar>
-        </AppBar>
-      </Slide>
-
-      <ImageCategoryMenu
-        anchorEl={categoryMenuAnchorEl as HTMLElement}
-        selectedIds={selectedThings}
-        onClose={onCloseCategoryMenu}
-        open={Boolean(categoryMenuAnchorEl as HTMLElement)}
-        onUpdateCategories={handleUpdateCategories}
-        categories={categories}
-      />
-    </>
-  );
-};
diff --git a/src/components/app-bars/GridItemActionBar/index.ts b/src/components/app-bars/GridItemActionBar/index.ts
deleted file mode 100644
index d4a29b3c..00000000
--- a/src/components/app-bars/GridItemActionBar/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { GridItemActionBar } from "./GridItemActionBar";
diff --git a/src/components/app-bars/ProjectToolbar/ProjectToolbar.tsx b/src/components/app-bars/ProjectToolbar/ProjectToolbar.tsx
index adc7d228..aa7f1709 100644
--- a/src/components/app-bars/ProjectToolbar/ProjectToolbar.tsx
+++ b/src/components/app-bars/ProjectToolbar/ProjectToolbar.tsx
@@ -5,18 +5,26 @@ import {
   Slider,
   Toolbar,
   Box,
-  Button,
   Typography,
   TextField,
   FormControl,
   Menu,
+  Tooltip,
+  IconButton,
+  Chip,
+  Divider,
+  Badge,
 } from "@mui/material";
 import {
-  ZoomOut as ZoomOutIcon,
   ZoomIn as ZoomInIcon,
-  Search as SearchIcon,
   Add as AddIcon,
   Remove as RemoveIcon,
+  Delete as DeleteIcon,
+  Deselect as DeselectIcon,
+  Gesture as GestureIcon,
+  LabelOutlined as LabelOutlinedIcon,
+  SelectAll as SelectAllIcon,
+  Straighten as StraightenIcon,
 } from "@mui/icons-material";
 
 import { LogoLoader } from "components/styled-components";
@@ -25,24 +33,205 @@ import { applicationSettingsSlice } from "store/applicationSettings";
 import { projectSlice } from "store/project";
 import { SortSelection } from "components/styled-components";
 import {
+  selectActiveKindId,
   selectLoadMessage,
   selectLoadPercent,
   selectProjectName,
 } from "store/project/selectors";
-import { useMenu, useMobileView } from "hooks";
+import {
+  useDialogHotkey,
+  useMenu,
+  useMobileView,
+  useThingSelection,
+} from "hooks";
+import { TooltipTitle } from "components/tooltips";
+import { HotkeyView } 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 { ImageCategoryMenu } from "components/menus";
+import { Partition } from "utils/models/enums";
+import { dataSlice } from "store/data";
+import { pluralize } from "utils/common/helpers";
 
 const minZoom = 0.6;
 const maxZoom = 4;
 
 export const ProjectToolbar = () => {
   const dispatch = useDispatch();
+  const activeKind = useSelector(selectActiveKindId);
   const loadPercent = useSelector(selectLoadPercent);
-  const loadMessage = useSelector(selectLoadMessage);
-  const projectName = useSelector(selectProjectName);
-  const [value, setValue] = useState<number>(1);
-  const [newProjectName, setNewProjectName] = useState<string>(projectName);
-  const inputRef = useRef<HTMLInputElement>(null);
   const isMobile = useMobileView();
+  const navigate = useNavigate();
+
+  const {
+    allSelected,
+    unfilteredSelectedThings,
+    allSelectedThingIds,
+    handleDeselectAll,
+    handleSelectAll,
+  } = useThingSelection();
+
+  const {
+    onClose: handleCloseDeleteImagesDialog,
+    onOpen: onOpenDeleteImagesDialog,
+    open: deleteImagesDialogisOpen,
+  } = useDialogHotkey(HotkeyView.DialogWithAction);
+
+  const handleDelete = () => {
+    dispatch(
+      dataSlice.actions.deleteThings({
+        thingIds: unfilteredSelectedThings,
+        disposeColorTensors: true,
+        isPermanent: true,
+      })
+    );
+  };
+
+  const handleNavigateImageViewer = () => {
+    dispatch(
+      imageViewerSlice.actions.prepareImageViewer({
+        selectedThingIds: allSelectedThingIds,
+      })
+    );
+    dispatch(
+      applicationSettingsSlice.actions.unregisterHotkeyView({
+        hotkeyView: HotkeyView.MainImageGridAppBar,
+      })
+    );
+    navigate("/imageviewer");
+  };
+
+  const handleNavigateMeasurements = () => {
+    dispatch(
+      applicationSettingsSlice.actions.unregisterHotkeyView({
+        hotkeyView: HotkeyView.MainImageGridAppBar,
+      })
+    );
+    navigate("/measurements");
+  };
+
+  return (
+    <>
+      <Toolbar>
+        <LogoLoader width={250} height={50} loadPercent={loadPercent} />
+
+        <ProjectTextField />
+
+        <Box sx={{ flexGrow: 1 }} />
+
+        {isMobile ? (
+          <ZoomControl />
+        ) : (
+          <>
+            <SortSelection />
+            <Divider
+              variant="middle"
+              orientation="vertical"
+              flexItem
+              sx={{ ml: 2 }}
+            />
+            <ZoomControl />
+
+            <TooltipButton
+              tooltipTitle={TooltipTitle(`Select all`, "control", "a")}
+              color="inherit"
+              onClick={handleSelectAll}
+              disabled={allSelected}
+              icon={true}
+            >
+              <Badge
+                badgeContent={unfilteredSelectedThings.length}
+                color="primary"
+              >
+                <SelectAllIcon />
+              </Badge>
+            </TooltipButton>
+
+            <TooltipButton
+              tooltipTitle={TooltipTitle(`Deselect`, "esc")}
+              color="inherit"
+              onClick={handleDeselectAll}
+              disabled={unfilteredSelectedThings.length === 0}
+              icon={true}
+            >
+              <DeselectIcon />
+            </TooltipButton>
+
+            <TooltipButton
+              tooltipTitle={TooltipTitle(`Delete selected`, "delete")}
+              color="inherit"
+              disabled={unfilteredSelectedThings.length === 0}
+              onClick={onOpenDeleteImagesDialog}
+              icon={true}
+            >
+              <DeleteIcon />
+            </TooltipButton>
+
+            <Divider
+              variant="middle"
+              orientation="vertical"
+              flexItem
+              sx={{ mr: 2 }}
+            />
+            <CategorizeChip
+              unfilteredSelectedThings={unfilteredSelectedThings}
+            />
+            <Tooltip
+              title={
+                allSelectedThingIds.length === 0
+                  ? "Select Objects to Annotate"
+                  : "Annotate Selection"
+              }
+            >
+              <span>
+                <Chip
+                  avatar={<GestureIcon color="inherit" />}
+                  label="Annotate"
+                  onClick={handleNavigateImageViewer}
+                  variant="outlined"
+                  sx={{ marginRight: 1 }}
+                  disabled={allSelectedThingIds.length === 0}
+                />
+              </span>
+            </Tooltip>
+            <Tooltip title="Go to Measurements">
+              <span>
+                <Chip
+                  avatar={<StraightenIcon color="inherit" />}
+                  label="Measurements"
+                  onClick={handleNavigateMeasurements}
+                  variant="outlined"
+                />
+              </span>
+            </Tooltip>
+          </>
+        )}
+      </Toolbar>
+
+      <DialogWithAction
+        title={`Delete ${pluralize(
+          "Object",
+          unfilteredSelectedThings.length
+        )}?`}
+        content={`Objects will be deleted from the project. ${
+          activeKind === "Image"
+            ? "Associated annotations will also be removed."
+            : ""
+        } `}
+        onConfirm={handleDelete}
+        isOpen={deleteImagesDialogisOpen}
+        onClose={handleCloseDeleteImagesDialog}
+      />
+    </>
+  );
+};
+
+const ZoomControl = () => {
+  const dispatch = useDispatch();
+  const [value, setValue] = useState<number>(1);
   const { onOpen, onClose, open, anchorEl } = useMenu();
 
   const handleSizeChange = (event: Event, newValue: number | number[]) => {
@@ -74,6 +263,99 @@ export const ProjectToolbar = () => {
     );
   };
 
+  return (
+    <>
+      <IconButton color="inherit" onClick={onOpen}>
+        <ZoomInIcon />
+      </IconButton>
+      <Menu anchorEl={anchorEl} open={open} onClose={onClose}>
+        <Box display="flex" flexDirection="column" alignItems="center">
+          <AddIcon onClick={onZoomIn} />
+          <Slider
+            orientation="vertical"
+            value={value}
+            min={minZoom}
+            max={maxZoom}
+            step={0.1}
+            onChange={handleSizeChange}
+            sx={{ height: (maxZoom - minZoom) * 20 + "px", my: 1, mr: 0 }}
+          />
+          <RemoveIcon onClick={onZoomOut} />
+        </Box>
+      </Menu>
+    </>
+  );
+};
+
+const CategorizeChip = ({
+  unfilteredSelectedThings,
+}: {
+  unfilteredSelectedThings: string[];
+}) => {
+  const dispatch = useDispatch();
+  const categories = useSelector(selectActiveCategories);
+  const [categoryMenuAnchorEl, setCategoryMenuAnchorEl] =
+    React.useState<null | HTMLElement>(null);
+  const onOpenCategoriesMenu = (event: React.MouseEvent<HTMLDivElement>) => {
+    setCategoryMenuAnchorEl(event.currentTarget);
+  };
+
+  const onCloseCategoryMenu = () => {
+    setCategoryMenuAnchorEl(null);
+  };
+  const handleUpdateCategories = (categoryId: string) => {
+    const updates = unfilteredSelectedThings.map((thingId) => ({
+      id: thingId,
+      categoryId: categoryId,
+      partition: Partition.Unassigned,
+    }));
+    dispatch(
+      dataSlice.actions.updateThings({
+        updates,
+        isPermanent: true,
+      })
+    );
+  };
+  return (
+    <>
+      <Tooltip
+        title={
+          unfilteredSelectedThings.length === 0
+            ? "Select Objects to Categorize"
+            : "Categorize Selection"
+        }
+      >
+        <span>
+          <Chip
+            avatar={<LabelOutlinedIcon color="inherit" />}
+            label="Categorize"
+            onClick={onOpenCategoriesMenu}
+            variant="outlined"
+            sx={{ marginRight: 1 }}
+            disabled={unfilteredSelectedThings.length === 0}
+          />
+        </span>
+      </Tooltip>
+      <ImageCategoryMenu
+        anchorEl={categoryMenuAnchorEl as HTMLElement}
+        selectedIds={unfilteredSelectedThings}
+        onClose={onCloseCategoryMenu}
+        open={Boolean(categoryMenuAnchorEl as HTMLElement)}
+        onUpdateCategories={handleUpdateCategories}
+        categories={categories}
+      />
+    </>
+  );
+};
+
+const ProjectTextField = () => {
+  const dispatch = useDispatch();
+
+  const loadMessage = useSelector(selectLoadMessage);
+  const projectName = useSelector(selectProjectName);
+  const [newProjectName, setNewProjectName] = useState<string>(projectName);
+  const inputRef = useRef<HTMLInputElement>(null);
+
   const handleTextFieldBlur = () => {
     if (projectName === newProjectName) return;
     dispatch(projectSlice.actions.setProjectName({ name: newProjectName }));
@@ -95,9 +377,7 @@ export const ProjectToolbar = () => {
   };
 
   return (
-    <Toolbar>
-      <LogoLoader width={250} height={50} loadPercent={loadPercent} />
-
+    <>
       {loadMessage ? (
         <Typography ml={5} sx={{ flexGrow: 1 }}>
           {loadMessage}
@@ -115,58 +395,6 @@ export const ProjectToolbar = () => {
           />
         </FormControl>
       )}
-
-      <Box sx={{ flexGrow: 1 }} />
-
-      {isMobile ? (
-        <>
-          <Button onClick={onOpen}>
-            <SearchIcon />
-          </Button>
-          <Menu anchorEl={anchorEl} open={open} onClose={onClose}>
-            <Box display="flex" flexDirection="column" alignItems="center">
-              <AddIcon />
-              <Slider
-                orientation="vertical"
-                value={value}
-                min={minZoom}
-                max={maxZoom}
-                step={0.1}
-                onChange={handleSizeChange}
-                sx={{ height: (maxZoom - minZoom) * 20 + "px", my: 1, mr: 0 }}
-              />
-              <RemoveIcon />
-            </Box>
-          </Menu>
-        </>
-      ) : (
-        <>
-          <SortSelection />
-          <Button onClick={onZoomOut}>
-            <ZoomOutIcon
-              sx={(theme) => ({
-                marginLeft: theme.spacing(1),
-              })}
-            />
-          </Button>
-
-          <Slider
-            value={value}
-            min={minZoom}
-            max={maxZoom}
-            step={0.1}
-            onChange={handleSizeChange}
-            sx={{ width: "10%" }}
-          />
-          <Button onClick={onZoomIn}>
-            <ZoomInIcon
-              sx={(theme) => ({
-                marginRight: theme.spacing(1),
-              })}
-            />
-          </Button>
-        </>
-      )}
-    </Toolbar>
+    </>
   );
 };
diff --git a/src/components/app-bars/index.ts b/src/components/app-bars/index.ts
index 3eee7495..75cf6d62 100644
--- a/src/components/app-bars/index.ts
+++ b/src/components/app-bars/index.ts
@@ -2,6 +2,5 @@ export { ImageViewerAppBar } from "./ImageViewerAppBar";
 export { ProjectAppBar } from "./ProjectAppBar";
 export { FitSegmenterDialogAppBar } from "./FitSegmenterDialogAppBar";
 export { FitClassifierDialogAppBar } from "./FitClassifierDialogAppBar";
-export { GridItemActionBar } from "./GridItemActionBar";
 export { AlertBar } from "./AlertBar";
 export { MeasurementsAppBar } from "./MeasurementsAppBar";
diff --git a/src/components/drawers/ImageToolDrawer/ImageToolDrawer.tsx b/src/components/drawers/ImageToolDrawer/ImageToolDrawer.tsx
index 0247612b..d1dbc047 100644
--- a/src/components/drawers/ImageToolDrawer/ImageToolDrawer.tsx
+++ b/src/components/drawers/ImageToolDrawer/ImageToolDrawer.tsx
@@ -71,6 +71,7 @@ const imageTools: Record<string, OperationType> = {
     description: "-",
     options: <MeasurementOptions />,
     hotkey: "M",
+    mobile: true,
   },
   learning: {
     icon: (color) => <ScatterPlotIcon sx={{ color }} />,
diff --git a/src/components/image-grids/ImageGrid/ImageGrid.tsx b/src/components/image-grids/ImageGrid/ImageGrid.tsx
index eb595d04..b73f24e4 100644
--- a/src/components/image-grids/ImageGrid/ImageGrid.tsx
+++ b/src/components/image-grids/ImageGrid/ImageGrid.tsx
@@ -3,24 +3,14 @@ import { useDispatch, useSelector } from "react-redux";
 
 import { Container, Grid } from "@mui/material";
 
-import { useDialogHotkey } from "hooks";
-
 import { projectSlice } from "store/project";
 
-import { HotkeyView } from "utils/common/enums";
-import { imageViewerSlice } from "store/imageViewer";
-import { DialogWithAction } from "components/dialogs";
 import { selectThingsOfKind } from "store/data";
 import { ProjectGridItem } from "../ProjectGridItem";
 import { useSortFunction } from "hooks/useSortFunction/useSortFunction";
-import { GridItemActionBar } from "components/app-bars";
 import { DropBox } from "components/styled-components/DropBox/DropBox";
-import {
-  selectActiveKindId,
-  selectThingFilters,
-} from "store/project/selectors";
+import { selectThingFilters } from "store/project/selectors";
 import { isFiltered } from "utils/common/helpers";
-import { dataSlice } from "store/data/dataSlice";
 import { selectActiveSelectedThingIds } from "store/project/reselectors";
 import { AnnotationObject, ImageObject } from "store/data/types";
 
@@ -31,7 +21,6 @@ const max_images = 1000; //number of images from the project that we'll show
 
 export const ImageGrid = ({ kind }: { kind: string }) => {
   const dispatch = useDispatch();
-  const activeKind = useSelector(selectActiveKindId);
   const things = useSelector(selectThingsOfKind)(kind);
   const thingFilters = useSelector(selectThingFilters)[kind];
   const selectedThingIds = useSelector(selectActiveSelectedThingIds);
@@ -39,38 +28,6 @@ export const ImageGrid = ({ kind }: { kind: string }) => {
 
   //const { contextMenu, handleContextMenu, closeContextMenu } = useContextMenu();
 
-  const {
-    onClose: handleCloseDeleteImagesDialog,
-    onOpen: onOpenDeleteImagesDialog,
-    open: deleteImagesDialogisOpen,
-  } = useDialogHotkey(HotkeyView.DialogWithAction);
-
-  const handleSelectAll = useCallback(() => {
-    dispatch(
-      projectSlice.actions.selectThings({
-        ids: things.map((thing) => thing.id),
-      })
-    );
-  }, [things, dispatch]);
-
-  const handleDeselectAll = () => {
-    dispatch(
-      projectSlice.actions.deselectThings({
-        ids: things.map((thing) => thing.id),
-      })
-    );
-  };
-
-  const handleDelete = () => {
-    dispatch(
-      dataSlice.actions.deleteThings({
-        thingIds: selectedThingIds,
-        disposeColorTensors: true,
-        isPermanent: true,
-      })
-    );
-  };
-
   const handleSelectThing = useCallback(
     (id: string, selected: boolean) => {
       if (selected) {
@@ -82,10 +39,6 @@ export const ImageGrid = ({ kind }: { kind: string }) => {
     [dispatch]
   );
 
-  const handleOpenImageViewer = () => {
-    dispatch(imageViewerSlice.actions.prepareImageViewer({ selectedThingIds }));
-  };
-
   //   useHotkeys("esc", () => handleDeselectAll(), HotkeyView.ProjectView, {
   //     enabled: tabIndex === 0,
   //   });
@@ -114,73 +67,29 @@ export const ImageGrid = ({ kind }: { kind: string }) => {
           })}
           maxWidth={false}
         >
-          <div
-            onClick={() => {
-              dispatch(
-                projectSlice.actions.deselectThings({ ids: selectedThingIds })
-              );
+          <Grid
+            container
+            gap={2}
+            sx={{
+              transform: "translateZ(0)",
+              height: "100%",
+              overflowY: "scroll",
             }}
           >
-            <Grid
-              container
-              gap={2}
-              sx={{
-                transform: "translateZ(0)",
-                height: "100%",
-                overflowY: "scroll",
-              }}
-            >
-              {things
-                .slice(0, max_images)
-                .sort(sortFunction)
-                .map((thing: ImageObject | AnnotationObject) => (
-                  <ProjectGridItem
-                    key={thing.id}
-                    thing={thing}
-                    handleClick={handleSelectThing}
-                    selected={selectedThingIds.includes(thing.id)}
-                    filtered={isFiltered(thing, thingFilters ?? {})}
-                  />
-                ))}
-            </Grid>
-
-            {/*<ImageCategoryMenu
-            open={contextMenu !== null}
-            onClose={closeContextMenu}
-            anchorReference="anchorPosition"
-            imageIds={selectedImageIds}
-            anchorPosition={
-              contextMenu !== null
-                ? { top: contextMenu.mouseY, left: contextMenu.mouseX }
-                : undefined
-            }
-          />*/}
-          </div>
+            {things
+              .slice(0, max_images)
+              .sort(sortFunction)
+              .map((thing: ImageObject | AnnotationObject) => (
+                <ProjectGridItem
+                  key={thing.id}
+                  thing={thing}
+                  handleClick={handleSelectThing}
+                  selected={selectedThingIds.includes(thing.id)}
+                  filtered={isFiltered(thing, thingFilters ?? {})}
+                />
+              ))}
+          </Grid>
         </Container>
-        {kind === activeKind && (
-          <GridItemActionBar
-            allSelected={selectedThingIds.length === things.length}
-            selectedThings={selectedThingIds}
-            selectAllThings={handleSelectAll}
-            deselectAllThings={handleDeselectAll}
-            handleOpenDeleteDialog={onOpenDeleteImagesDialog}
-            onOpenImageViewer={handleOpenImageViewer}
-          />
-        )}
-
-        <DialogWithAction
-          title={`Delete ${selectedThingIds.length} Object${
-            selectedThingIds.length > 1 ? "s" : ""
-          }?`}
-          content={`Objects will be deleted from the project. ${
-            kind === "Image"
-              ? "Associated annotations will also be removed."
-              : ""
-          } `}
-          onConfirm={handleDelete}
-          isOpen={deleteImagesDialogisOpen}
-          onClose={handleCloseDeleteImagesDialog}
-        />
       </>
     </DropBox>
   );
diff --git a/src/components/styled-components/SortSelection/SortSelection.tsx b/src/components/styled-components/SortSelection/SortSelection.tsx
index 625bacfa..0a2ca729 100644
--- a/src/components/styled-components/SortSelection/SortSelection.tsx
+++ b/src/components/styled-components/SortSelection/SortSelection.tsx
@@ -28,7 +28,7 @@ export const SortSelection = () => {
       <Select //TODO: This should be a styled component. Styling keeps label in border
         size="small"
         sx={{
-          width: 200,
+          width: 120,
           "& legend": {
             visibility: "visible",
             maxWidth: "100%",
@@ -50,7 +50,12 @@ export const SortSelection = () => {
         onChange={onSortKeyChange}
       >
         {Object.values(ThingSortKey).map((sortType) => (
-          <MenuItem key={sortType} value={sortType} dense>
+          <MenuItem
+            key={sortType}
+            value={sortType}
+            dense
+            sx={{ width: "120px" }}
+          >
             {sortType}
           </MenuItem>
         ))}
diff --git a/src/components/styled-components/TooltipButton/TooltipButton.tsx b/src/components/styled-components/TooltipButton/TooltipButton.tsx
index 2bf7b00a..d07aee80 100644
--- a/src/components/styled-components/TooltipButton/TooltipButton.tsx
+++ b/src/components/styled-components/TooltipButton/TooltipButton.tsx
@@ -1,11 +1,13 @@
-import { Button, ButtonProps, Tooltip } from "@mui/material";
+import { Button, ButtonProps, IconButton, Tooltip } from "@mui/material";
 import React, { ReactNode } from "react";
 
 type TooltipButtonProps = ButtonProps & {
   tooltipTitle: string | ReactNode;
+  icon?: boolean;
 };
 export const TooltipButton = ({
   tooltipTitle,
+  icon,
   ...props
 }: TooltipButtonProps) => {
   return (
@@ -21,9 +23,7 @@ export const TooltipButton = ({
       title={tooltipTitle}
       disableInteractive
     >
-      <span>
-        <Button {...props} />
-      </span>
+      <span>{icon ? <IconButton {...props} /> : <Button {...props} />}</span>
     </Tooltip>
   );
 };
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index 87a63f49..6f7ba758 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -18,6 +18,7 @@ export { useErrorHandler } from "./useErrorHandler";
 export { useUnloadConfirmation } from "./useUnloadConfirmation";
 export { useBreakpointObserver } from "./useBreakpointObserver";
 export { useMobileView } from "./useMobileView";
+export { useThingSelection } from "./useThingSelection";
 
 // useDefaultImage not included to encourage use of
 // import {useDefaultImage, DispatchLocation} from "hooks/useDefaultImage"
diff --git a/src/hooks/useThingSelection/index.ts b/src/hooks/useThingSelection/index.ts
new file mode 100644
index 00000000..a9889960
--- /dev/null
+++ b/src/hooks/useThingSelection/index.ts
@@ -0,0 +1 @@
+export { useThingSelection } from "./useThingSelection";
diff --git a/src/hooks/useThingSelection/useThingSelection.ts b/src/hooks/useThingSelection/useThingSelection.ts
new file mode 100644
index 00000000..7bac2d8d
--- /dev/null
+++ b/src/hooks/useThingSelection/useThingSelection.ts
@@ -0,0 +1,65 @@
+import { intersection } from "lodash";
+import { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { projectSlice } from "store/project";
+import { selectActiveThings } from "store/project/reselectors";
+import {
+  selectActiveKindId,
+  selectActiveThingFilters,
+  selectSelectedThingIds,
+} from "store/project/selectors";
+import { isFiltered } from "utils/common/helpers";
+
+export const useThingSelection = () => {
+  const dispatch = useDispatch();
+  const activeKind = useSelector(selectActiveKindId);
+  const activeThings = useSelector(selectActiveThings);
+  const thingFilters = useSelector(selectActiveThingFilters);
+  const selectedThingIds = useSelector(selectSelectedThingIds);
+  const [unfilteredThings, setUnfilteredThings] = useState<string[]>([]);
+  const [allSelected, setAllSelected] = useState<boolean>(false);
+  const [unfilteredSelectedThings, setUnfilteredSelectedThings] = useState<
+    string[]
+  >([]);
+
+  const handleSelectAll = () => {
+    dispatch(projectSlice.actions.selectThings({ ids: unfilteredThings }));
+  };
+  const handleDeselectAll = () => {
+    dispatch(projectSlice.actions.deselectThings({ ids: unfilteredThings }));
+  };
+
+  useEffect(() => {
+    if (activeKind) {
+      const _unfilteredThingIds = activeThings.reduce(
+        (thingIds: string[], thing) => {
+          if (!isFiltered(thing, thingFilters ?? {})) {
+            thingIds.push(thing.id);
+          }
+          return thingIds;
+        },
+        []
+      );
+      setUnfilteredThings(_unfilteredThingIds);
+    }
+  }, [activeKind, activeThings, thingFilters]);
+
+  useEffect(() => {
+    const _unfilteredSelectedThings = intersection(
+      selectedThingIds,
+      unfilteredThings
+    );
+    setUnfilteredSelectedThings(_unfilteredSelectedThings);
+    setAllSelected(
+      _unfilteredSelectedThings.length === unfilteredThings.length
+    );
+  }, [selectedThingIds, unfilteredThings]);
+
+  return {
+    allSelected,
+    unfilteredSelectedThings,
+    allSelectedThingIds: selectedThingIds,
+    handleSelectAll,
+    handleDeselectAll,
+  };
+};
diff --git a/src/utils/common/helpers.ts b/src/utils/common/helpers.ts
index bf0031b1..0517aab8 100644
--- a/src/utils/common/helpers.ts
+++ b/src/utils/common/helpers.ts
@@ -255,6 +255,14 @@ export class PseudoFileList {
   }
 }
 
+/*
+  STRING HELPERS
+*/
+
+export const pluralize = (word: string, count: number) => {
+  return `${count > 1 ? word + "s" : word}`;
+};
+
 /*
  =======================
  General Utility Methods