diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index 048b1b4fd9..daa229e7c5 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -370,6 +370,7 @@
         "deleteImage_other": "Delete {{count}} Images",
         "deleteImageBin": "Deleted images will be sent to your operating system's Bin.",
         "deleteImagePermanent": "Deleted images cannot be restored.",
+        "displayBoardSearch": "Display Board Search",
         "displaySearch": "Display Search",
         "download": "Download",
         "featuresWillReset": "If you delete this image, those features will immediately be reset.",
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx
index 9dfb4a2860..1395248950 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx
@@ -1,4 +1,4 @@
-import { Flex, Icon, Text, useDisclosure } from '@invoke-ai/ui-library';
+import { Flex, Text } from '@invoke-ai/ui-library';
 import { EMPTY_ARRAY } from 'app/store/constants';
 import { useAppSelector } from 'app/store/storeHooks';
 import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
@@ -8,12 +8,10 @@ import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 import type { CSSProperties } from 'react';
 import { memo, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiCaretUpBold } from 'react-icons/pi';
 import { useListAllBoardsQuery } from 'services/api/endpoints/boards';
 import type { BoardDTO } from 'services/api/types';
 
 import AddBoardButton from './AddBoardButton';
-import BoardsSearch from './BoardsSearch';
 import GalleryBoard from './GalleryBoard';
 import NoBoardBoard from './NoBoardBoard';
 
@@ -42,8 +40,7 @@ const BoardsList = () => {
 
   return (
     <>
-      <Flex layerStyle="first" flexDir="column" gap={2} p={2} my={2} borderRadius="base">
-        <BoardsSearch />
+      <Flex layerStyle="first" flexDir="column" gap={2} p={2} my={2} borderRadius="base" maxHeight="100%">
         <OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
           {allowPrivateBoards && (
             <>
@@ -53,7 +50,7 @@ const BoardsList = () => {
                 </Text>
                 <AddBoardButton isPrivateBoard={true} />
               </Flex>
-              <Flex direction="column" maxH={346} gap={1}>
+              <Flex direction="column" maxH={100} gap={1}>
                 <NoBoardBoard isSelected={selectedBoardId === 'none'} />
                 {filteredPrivateBoards.map((board) => (
                   <GalleryBoard
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
index 74901b0f58..1988653eea 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
@@ -4,11 +4,14 @@ import { useStore } from '@nanostores/react';
 import { $galleryHeader } from 'app/store/nanostores/galleryHeader';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { galleryViewChanged } from 'features/gallery/store/gallerySlice';
-import { memo, useCallback } from 'react';
+import ResizeHandle from 'features/ui/components/tabs/ResizeHandle';
+import { memo, useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiImagesBold, PiMagnifyingGlassBold } from 'react-icons/pi';
+import { Panel, PanelGroup } from 'react-resizable-panels';
 
 import BoardsList from './Boards/BoardsList/BoardsList';
+import BoardsSearch from './Boards/BoardsList/BoardsSearch';
 import GalleryBoardName from './GalleryBoardName';
 import GallerySettingsPopover from './GallerySettingsPopover/GallerySettingsPopover';
 import GalleryImageGrid from './ImageGrid/GalleryImageGrid';
@@ -41,6 +44,7 @@ const ImageGalleryContent = () => {
   const dispatch = useAppDispatch();
   const galleryHeader = useStore($galleryHeader);
   const searchDisclosure = useDisclosure({ defaultIsOpen: false });
+  const boardSearchDisclosure = useDisclosure({ defaultIsOpen: false });
 
   const handleClickImages = useCallback(() => {
     dispatch(galleryViewChanged('images'));
@@ -50,51 +54,73 @@ const ImageGalleryContent = () => {
     dispatch(galleryViewChanged('assets'));
   }, [dispatch]);
 
+  const panelGroupRef = useRef(null);
+
   return (
     <Flex layerStyle="first" position="relative" flexDirection="column" h="full" w="full" p={2} gap={2}>
-      {galleryHeader}
       <Flex alignItems="center" justifyContent="space-between" gap={2}>
-          <GalleryBoardName />
-          <GallerySettingsPopover />
-        </Flex>
-      <BoardsList />
-      <Flex alignItems="center" justifyContent="space-between" gap={2}>
-        <Tabs isFitted index={galleryView === 'images' ? 0 : 1} variant="enclosed" size="sm" w="full" mb="2">
-          <TabList fontSize="sm" borderBottom="none">
-            <Tab sx={baseStyles} _selected={selectedStyles} onClick={handleClickImages} data-testid="images-tab">
-              <Flex alignItems="center" justifyContent="center" gap="2" w="full">
-                <PiImagesBold size="16px" />
-                {t('parameters.images')}
-              </Flex>
-            </Tab>
-            <Tab sx={baseStyles} _selected={selectedStyles} onClick={handleClickAssets} data-testid="assets-tab">
-              <Flex alignItems="center" justifyContent="center" gap="2" w="full">
-                <PiImagesBold size="16px" />
-                {t('gallery.assets')}
-              </Flex>
-            </Tab>
-            <Tab sx={searchIconStyles} onClick={searchDisclosure.onToggle}>
-            <IconButton
-                tooltip={`${t('gallery.displaySearch')}`}
-                aria-label={t('gallery.displaySearch')}
-                icon={<PiMagnifyingGlassBold />}
-                fontSize={16}
-                textAlign="center"
-                color="base.400"
-                variant="unstyled"
-                minW="unset"
-              />
-            </Tab>
-          </TabList>
-        </Tabs>
+        {galleryHeader}
+        <GalleryBoardName />
+        <GalleryBoardName />
+        <GallerySettingsPopover />
+        <IconButton
+          onClick={boardSearchDisclosure.onToggle}
+          tooltip={`${t('gallery.displayBoardSearch')}`}
+          aria-label={t('gallery.displayBoardSearch')}
+          icon={<PiMagnifyingGlassBold />}
+          size="sm"
+        />
       </Flex>
-      <Box mb="1">
-        <Collapse in={searchDisclosure.isOpen}>
-          <GallerySearch />
-        </Collapse>
-      </Box>
-      <GalleryImageGrid />
-      <GalleryPagination />
+      <PanelGroup ref={panelGroupRef} direction="vertical">
+        <Panel>
+          <Collapse in={boardSearchDisclosure.isOpen} >
+          <Box mt="2">
+            <BoardsSearch />
+          </Box>
+          </Collapse>
+          <BoardsList />
+        </Panel>
+        <ResizeHandle orientation="horizontal" />
+        <Panel>
+          <Flex flexDirection="column" alignItems="center" justifyContent="space-between" gap={2} h="full">
+            <Tabs isFitted index={galleryView === 'images' ? 0 : 1} variant="enclosed" size="sm" w="full" my="2">
+              <TabList fontSize="sm" borderBottom="none">
+                <Tab sx={baseStyles} _selected={selectedStyles} onClick={handleClickImages} data-testid="images-tab">
+                  <Flex alignItems="center" justifyContent="center" gap="2" w="full">
+                    <PiImagesBold size="16px" />
+                    {t('parameters.images')}
+                  </Flex>
+                </Tab>
+                <Tab sx={baseStyles} _selected={selectedStyles} onClick={handleClickAssets} data-testid="assets-tab">
+                  <Flex alignItems="center" justifyContent="center" gap="2" w="full">
+                    <PiImagesBold size="16px" />
+                    {t('gallery.assets')}
+                  </Flex>
+                </Tab>
+                <Tab sx={searchIconStyles} onClick={searchDisclosure.onToggle}>
+                  <IconButton
+                    tooltip={`${t('gallery.displaySearch')}`}
+                    aria-label={t('gallery.displaySearch')}
+                    icon={<PiMagnifyingGlassBold />}
+                    fontSize={16}
+                    textAlign="center"
+                    color="base.400"
+                    variant="unstyled"
+                    minW="unset"
+                  />
+                </Tab>
+              </TabList>
+            </Tabs>
+            <Box mb="2" w="full">
+              <Collapse in={searchDisclosure.isOpen}>
+                <GallerySearch />
+              </Collapse>
+            </Box>
+            <GalleryImageGrid />
+            <GalleryPagination />
+          </Flex>
+        </Panel>
+      </PanelGroup>
     </Flex>
   );
 };