diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelList.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelList.tsx
index 4a12aad0bf..93cef98f80 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelList.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelList.tsx
@@ -3,7 +3,7 @@ import { EntityState } from '@reduxjs/toolkit';
 import IAIButton from 'common/components/IAIButton';
 import IAIInput from 'common/components/IAIInput';
 import { forEach } from 'lodash-es';
-import type { ChangeEvent } from 'react';
+import type { ChangeEvent, PropsWithChildren } from 'react';
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
@@ -44,13 +44,7 @@ const ModelList = (props: ModelListProps) => {
 
   return (
     <Flex flexDirection="column" rowGap={4} width="50%" minWidth="50%">
-      <Flex
-        flexDirection="column"
-        gap={4}
-        maxHeight={window.innerHeight - 240}
-        overflow="scroll"
-        paddingInlineEnd={4}
-      >
+      <Flex flexDirection="column" gap={4} paddingInlineEnd={4}>
         <ButtonGroup isAttached>
           <IAIButton
             onClick={() => setModelFormatFilter('all')}
@@ -83,35 +77,39 @@ const ModelList = (props: ModelListProps) => {
 
         {['all', 'diffusers'].includes(modelFormatFilter) &&
           filteredDiffusersModels.length > 0 && (
-            <Flex sx={{ gap: 2, flexDir: 'column' }}>
-              <Text variant="subtext" fontSize="sm">
-                Diffusers
-              </Text>
-              {filteredDiffusersModels.map((model) => (
-                <ModelListItem
-                  key={model.id}
-                  model={model}
-                  isSelected={selectedModelId === model.id}
-                  setSelectedModelId={setSelectedModelId}
-                />
-              ))}
-            </Flex>
+            <StyledModelContainer>
+              <Flex sx={{ gap: 2, flexDir: 'column' }}>
+                <Text variant="subtext" fontSize="sm">
+                  Diffusers
+                </Text>
+                {filteredDiffusersModels.map((model) => (
+                  <ModelListItem
+                    key={model.id}
+                    model={model}
+                    isSelected={selectedModelId === model.id}
+                    setSelectedModelId={setSelectedModelId}
+                  />
+                ))}
+              </Flex>
+            </StyledModelContainer>
           )}
         {['all', 'checkpoint'].includes(modelFormatFilter) &&
           filteredCheckpointModels.length > 0 && (
-            <Flex sx={{ gap: 2, flexDir: 'column' }}>
-              <Text variant="subtext" fontSize="sm">
-                Checkpoint
-              </Text>
-              {filteredCheckpointModels.map((model) => (
-                <ModelListItem
-                  key={model.id}
-                  model={model}
-                  isSelected={selectedModelId === model.id}
-                  setSelectedModelId={setSelectedModelId}
-                />
-              ))}
-            </Flex>
+            <StyledModelContainer>
+              <Flex sx={{ gap: 2, flexDir: 'column' }}>
+                <Text variant="subtext" fontSize="sm">
+                  Checkpoint
+                </Text>
+                {filteredCheckpointModels.map((model) => (
+                  <ModelListItem
+                    key={model.id}
+                    model={model}
+                    isSelected={selectedModelId === model.id}
+                    setSelectedModelId={setSelectedModelId}
+                  />
+                ))}
+              </Flex>
+            </StyledModelContainer>
           )}
       </Flex>
     </Flex>
@@ -143,3 +141,24 @@ const modelsFilter = (
   });
   return filteredModels;
 };
+
+const StyledModelContainer = (props: PropsWithChildren) => {
+  return (
+    <Flex
+      flexDirection="column"
+      maxHeight={window.innerHeight - 280}
+      overflow="scroll"
+      gap={4}
+      borderRadius={4}
+      p={4}
+      sx={{
+        bg: 'base.200',
+        _dark: {
+          bg: 'base.800',
+        },
+      }}
+    >
+      {props.children}
+    </Flex>
+  );
+};
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelListItem.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelListItem.tsx
index 3d2126dce7..24842d8eb2 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelListItem.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelListItem.tsx
@@ -20,6 +20,13 @@ type ModelListItemProps = {
   setSelectedModelId: (v: string | undefined) => void;
 };
 
+const modelBaseTypeMap = {
+  'sd-1': 'SD1',
+  'sd-2': 'SD2',
+  sdxl: 'SDXL',
+  'sdxl-refiner': 'SDXLR',
+};
+
 export default function ModelListItem(props: ModelListItemProps) {
   const isBusy = useAppSelector(selectIsBusy);
   const { t } = useTranslation();
@@ -76,7 +83,7 @@ export default function ModelListItem(props: ModelListItemProps) {
           bg: isSelected ? 'accent.400' : 'base.100',
           color: isSelected ? 'base.50' : 'base.800',
           _hover: {
-            bg: isSelected ? 'accent.500' : 'base.200',
+            bg: isSelected ? 'accent.500' : 'base.300',
             color: isSelected ? 'base.50' : 'base.800',
           },
           _dark: {
@@ -84,15 +91,34 @@ export default function ModelListItem(props: ModelListItemProps) {
             bg: isSelected ? 'accent.600' : 'base.850',
             _hover: {
               color: isSelected ? 'base.50' : 'base.100',
-              bg: isSelected ? 'accent.550' : 'base.800',
+              bg: isSelected ? 'accent.550' : 'base.700',
             },
           },
         }}
         onClick={handleSelectModel}
       >
-        <Tooltip label={model.description} hasArrow placement="bottom">
-          <Text sx={{ fontWeight: 500 }}>{model.model_name}</Text>
-        </Tooltip>
+        <Flex gap={4} alignItems="center">
+          <Text
+            fontSize="xs"
+            p={1}
+            borderRadius={2}
+            minWidth={14}
+            sx={{
+              bg: 'accent.350',
+              color: 'base.100',
+              _dark: { bg: 'accent.500' },
+            }}
+          >
+            {
+              modelBaseTypeMap[
+                model.base_model as keyof typeof modelBaseTypeMap
+              ]
+            }
+          </Text>
+          <Tooltip label={model.description} hasArrow placement="bottom">
+            <Text sx={{ fontWeight: 500 }}>{model.model_name}</Text>
+          </Tooltip>
+        </Flex>
       </Flex>
       <IAIAlertDialog
         title={t('modelManager.deleteModel')}