diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GenericBoard.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GenericBoard.tsx
index 99c0a4681f..fa7f944a24 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GenericBoard.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GenericBoard.tsx
@@ -17,7 +17,7 @@ type GenericBoardProps = {
   badgeCount?: number;
 };
 
-const formatBadgeCount = (count: number) =>
+export const formatBadgeCount = (count: number) =>
   Intl.NumberFormat('en-US', {
     notation: 'compact',
     maximumFractionDigits: 1,
diff --git a/invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx b/invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx
index 897cf4e7e8..2e2efb8e25 100644
--- a/invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx
@@ -4,7 +4,7 @@ import { createSelector } from '@reduxjs/toolkit';
 import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import { useBoardName } from 'services/api/hooks/useBoardName';
 
 const selector = createSelector(
@@ -26,6 +26,12 @@ const GalleryBoardName = (props: Props) => {
   const { isOpen, onToggle } = props;
   const { selectedBoardId } = useAppSelector(selector);
   const boardName = useBoardName(selectedBoardId);
+  const formattedBoardName = useMemo(() => {
+    if (boardName.length > 20) {
+      return `${boardName.substring(0, 20)}...`;
+    }
+    return boardName;
+  }, [boardName]);
 
   return (
     <Flex
@@ -58,9 +64,7 @@ const GalleryBoardName = (props: Props) => {
             },
           }}
         >
-          {boardName.length > 20
-            ? `${boardName.substring(0, 20)}...`
-            : boardName}
+          {formattedBoardName}
         </Text>
       </Box>
       <Spacer />
diff --git a/invokeai/frontend/web/src/services/api/hooks/useBoardTotal.ts b/invokeai/frontend/web/src/services/api/hooks/useBoardTotal.ts
new file mode 100644
index 0000000000..8deccd8947
--- /dev/null
+++ b/invokeai/frontend/web/src/services/api/hooks/useBoardTotal.ts
@@ -0,0 +1,53 @@
+import { skipToken } from '@reduxjs/toolkit/dist/query';
+import {
+  ASSETS_CATEGORIES,
+  BoardId,
+  IMAGE_CATEGORIES,
+  INITIAL_IMAGE_LIMIT,
+} from 'features/gallery/store/gallerySlice';
+import { useMemo } from 'react';
+import { ListImagesArgs, useListImagesQuery } from '../endpoints/images';
+
+const baseQueryArg: ListImagesArgs = {
+  offset: 0,
+  limit: INITIAL_IMAGE_LIMIT,
+  is_intermediate: false,
+};
+
+const imagesQueryArg: ListImagesArgs = {
+  categories: IMAGE_CATEGORIES,
+  ...baseQueryArg,
+};
+
+const assetsQueryArg: ListImagesArgs = {
+  categories: ASSETS_CATEGORIES,
+  ...baseQueryArg,
+};
+
+const noBoardQueryArg: ListImagesArgs = {
+  board_id: 'none',
+  ...baseQueryArg,
+};
+
+export const useBoardTotal = (board_id: BoardId | null | undefined) => {
+  const queryArg = useMemo(() => {
+    if (!board_id) {
+      return;
+    }
+    if (board_id === 'images') {
+      return imagesQueryArg;
+    } else if (board_id === 'assets') {
+      return assetsQueryArg;
+    } else if (board_id === 'no_board') {
+      return noBoardQueryArg;
+    } else {
+      return { board_id, ...baseQueryArg };
+    }
+  }, [board_id]);
+
+  const { total } = useListImagesQuery(queryArg ?? skipToken, {
+    selectFromResult: ({ currentData }) => ({ total: currentData?.total }),
+  });
+
+  return total;
+};