diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/ModelManagerTab.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/ModelManagerTab.tsx
index 70de375774..9aced0dda8 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/ModelManagerTab.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/ModelManagerTab.tsx
@@ -46,9 +46,11 @@ const ModelManagerTab = () => {
           </Tab>
         ))}
       </TabList>
-      <TabPanels sx={{ p: 4 }}>
+      <TabPanels sx={{ w: 'full', h: 'full', p: 4 }}>
         {tabs.map((tab) => (
-          <TabPanel key={tab.id}>{tab.content}</TabPanel>
+          <TabPanel sx={{ w: 'full', h: 'full' }} key={tab.id}>
+            {tab.content}
+          </TabPanel>
         ))}
       </TabPanels>
     </Tabs>
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel.tsx
index d2beb3a674..f49294cfb0 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel.tsx
@@ -18,7 +18,7 @@ export default function ModelManagerPanel() {
   });
 
   return (
-    <Flex width="100%" columnGap={8}>
+    <Flex sx={{ gap: 8, w: 'full', h: 'full' }}>
       <ModelList
         selectedModelId={selectedModelId}
         setSelectedModelId={setSelectedModelId}
@@ -46,14 +46,15 @@ const ModelEdit = (props: ModelEditProps) => {
   return (
     <Flex
       sx={{
-        width: '100%',
+        w: 'full',
+        h: 'full',
         justifyContent: 'center',
         alignItems: 'center',
-        borderRadius: 'base',
-        bg: 'base.900',
+        maxH: 96,
+        userSelect: 'none',
       }}
     >
-      <Text fontWeight={500}>Pick A Model To Edit</Text>
+      <Text variant="subtext">No Model Selected</Text>
     </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 84ed784d1e..5ad0016fea 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
@@ -1,13 +1,11 @@
 import { DeleteIcon } from '@chakra-ui/icons';
-import { Box, Flex, Spacer, Text, Tooltip } from '@chakra-ui/react';
+import { Button, Flex, Text, Tooltip } from '@chakra-ui/react';
 import { useAppSelector } from 'app/store/storeHooks';
 import IAIAlertDialog from 'common/components/IAIAlertDialog';
-import IAIButton from 'common/components/IAIButton';
 import IAIIconButton from 'common/components/IAIIconButton';
 import { selectIsBusy } from 'features/system/store/systemSelectors';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaEdit } from 'react-icons/fa';
 import {
   MainModelConfigEntity,
   useDeleteMainModelsMutation,
@@ -38,40 +36,33 @@ export default function ModelListItem(props: ModelListItemProps) {
   return (
     <Flex sx={{ gap: 2, alignItems: 'center', w: 'full' }}>
       <Flex
-        as={IAIButton}
-        isChecked={isSelected}
+        as={Button}
         sx={{
+          justifyContent: 'start',
           p: 2,
           borderRadius: 'base',
           w: 'full',
           alignItems: 'center',
-          bg: isSelected ? 'accent.200' : 'base.100',
+          bg: isSelected ? 'accent.400' : 'base.100',
+          color: isSelected ? 'base.50' : 'base.800',
           _hover: {
-            bg: isSelected ? 'accent.250' : 'base.150',
+            bg: isSelected ? 'accent.500' : 'base.200',
+            color: isSelected ? 'base.50' : 'base.800',
           },
           _dark: {
+            color: isSelected ? 'base.50' : 'base.100',
             bg: isSelected ? 'accent.600' : 'base.850',
             _hover: {
+              color: isSelected ? 'base.50' : 'base.100',
               bg: isSelected ? 'accent.550' : 'base.800',
             },
           },
         }}
         onClick={handleSelectModel}
       >
-        <Box cursor="pointer">
-          <Tooltip label={model.description} hasArrow placement="bottom">
-            <Text fontWeight="600">{model.model_name}</Text>
-          </Tooltip>
-        </Box>
-        <Spacer onClick={handleSelectModel} cursor="pointer" />
-        <IAIIconButton
-          icon={<FaEdit />}
-          size="sm"
-          onClick={handleSelectModel}
-          aria-label={t('accessibility.modifyConfig')}
-          isDisabled={isBusy}
-          variant="link"
-        />
+        <Tooltip label={model.description} hasArrow placement="bottom">
+          <Text sx={{ fontWeight: 500 }}>{model.model_name}</Text>
+        </Tooltip>
       </Flex>
       <IAIAlertDialog
         title={t('modelManager.deleteModel')}