diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ScanModels/ScanModelsForm.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ScanModels/ScanModelsForm.tsx
index 48b8bb0dda..7e243e6c60 100644
--- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ScanModels/ScanModelsForm.tsx
+++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ScanModels/ScanModelsForm.tsx
@@ -3,6 +3,7 @@ import { ChangeEventHandler, useCallback, useState } from 'react';
 import { useLazyScanModelsQuery } from '../../../../../services/api/endpoints/models';
 import { useTranslation } from 'react-i18next';
 import { ScanModelsResults } from './ScanModelsResults';
+import ScrollableContent from '../../../../../common/components/OverlayScrollbars/ScrollableContent';
 
 export const ScanModelsForm = () => {
   const [scanPath, setScanPath] = useState('');
@@ -31,7 +32,7 @@ export const ScanModelsForm = () => {
   }, []);
 
   return (
-    <>
+    <Flex flexDir="column" height="100%">
       <FormControl isInvalid={!!errorMessage.length} w="full">
         <Flex flexDir="column" w="full">
           <Flex gap={2} alignItems="flex-end" justifyContent="space-between">
@@ -47,8 +48,7 @@ export const ScanModelsForm = () => {
           {!!errorMessage.length && <FormErrorMessage>{errorMessage}</FormErrorMessage>}
         </Flex>
       </FormControl>
-
       {results && <ScanModelsResults results={results} />}
-    </>
+    </Flex>
   );
 };
diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ScanModels/ScanModelsResults.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ScanModels/ScanModelsResults.tsx
index 9bccf8a0d7..58cddda2ec 100644
--- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ScanModels/ScanModelsResults.tsx
+++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ScanModels/ScanModelsResults.tsx
@@ -12,6 +12,7 @@ import {
 import { t } from 'i18next';
 import { ChangeEventHandler, useCallback, useMemo, useState } from 'react';
 import { PiXBold } from 'react-icons/pi';
+import ScrollableContent from '../../../../../common/components/OverlayScrollbars/ScrollableContent';
 
 export const ScanModelsResults = ({ results }: { results: string[] }) => {
   const [searchTerm, setSearchTerm] = useState('');
@@ -37,8 +38,8 @@ export const ScanModelsResults = ({ results }: { results: string[] }) => {
   return (
     <>
       <Divider mt={4} />
-      <Flex flexDir="column" gap={2} mt={4}>
-        <Flex justifyContent="space-between" alignItems="center" mb={4}>
+      <Flex flexDir="column" gap={2} mt={4} height="100%">
+        <Flex justifyContent="space-between" alignItems="center">
           <Heading fontSize="md" as="h4">
             Scan Results
           </Heading>
@@ -64,13 +65,16 @@ export const ScanModelsResults = ({ results }: { results: string[] }) => {
             )}
           </InputGroup>
         </Flex>
-
-        {filteredResults.map((result) => (
-          <Flex key={result} fontSize="sm" flexDir="column">
-            <Text fontWeight="semibold">{result.split('\\').slice(-1)[0]}</Text>
-            <Text variant="subtext">{result}</Text>
-          </Flex>
-        ))}
+        <Flex height="100%" layerStyle="third" borderRadius="base" p={4} mt={4} mb={4}>
+          <ScrollableContent>
+            {filteredResults.map((result) => (
+              <Flex key={result} fontSize="sm" flexDir="column">
+                <Text fontWeight="semibold">{result.split('\\').slice(-1)[0]}</Text>
+                <Text variant="subtext">{result}</Text>
+              </Flex>
+            ))}
+          </ScrollableContent>
+        </Flex>
       </Flex>
     </>
   );
diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ImportModels.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ImportModels.tsx
index 88423758e6..2c95de4827 100644
--- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ImportModels.tsx
+++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ImportModels.tsx
@@ -1,4 +1,4 @@
-import { Box, Divider, Heading, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
+import { Box, Divider, Heading, Tab, Flex, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
 
 import { ImportQueue } from './AddModelPanel/ImportQueue';
 import { SimpleImport } from './AddModelPanel/SimpleImport';
@@ -6,31 +6,31 @@ import { ScanModels } from './AddModelPanel/ScanModels/ScanModels';
 
 export const ImportModels = () => {
   return (
-    <Box layerStyle="first" p={3} borderRadius="base" w="full" h="full">
-      <Box w="full" p={4}>
+    <Flex layerStyle="first" p={3} borderRadius="base" w="full" h="full" flexDir="column" gap={2}>
+      <Box w="full" p={2}>
         <Heading fontSize="xl">Add Model</Heading>
       </Box>
-      <Box layerStyle="second" borderRadius="base" w="full">
-        <Tabs variant="collapse">
+      <Box layerStyle="second" borderRadius="base" w="full" h="50%" overflow="hidden">
+        <Tabs variant="collapse" height="100%">
           <TabList>
             <Tab>Simple</Tab>
             <Tab>Advanced</Tab>
             <Tab>Scan</Tab>
           </TabList>
-          <TabPanels p={3}>
+          <TabPanels p={3} height="100%">
             <TabPanel>
               <SimpleImport />
             </TabPanel>
             <TabPanel>Advanced Import Placeholder</TabPanel>
-            <TabPanel>
+            <TabPanel height="100%">
               <ScanModels />
             </TabPanel>
           </TabPanels>
         </Tabs>
-
-        <Divider mt="5" mb="3" />
+      </Box>
+      <Box layerStyle="second" borderRadius="base" w="full" h="50%">
         <ImportQueue />
       </Box>
-    </Box>
+    </Flex>
   );
 };