diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ImportModels.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ImportModels.tsx
new file mode 100644
index 0000000000..2325fcf7dc
--- /dev/null
+++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ImportModels.tsx
@@ -0,0 +1,10 @@
+import { Box } from '@invoke-ai/ui-library';
+
+//jenn's workspace
+export const ImportModels = () => {
+ return (
+
+ Import Models
+
+ );
+};
diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManager.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManager.tsx
new file mode 100644
index 0000000000..59b01de0c0
--- /dev/null
+++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManager.tsx
@@ -0,0 +1,44 @@
+import {
+ Box,
+ Button,
+ Flex,
+ Heading,
+ IconButton,
+ Input,
+ InputGroup,
+ InputRightElement,
+ Spacer,
+} from '@invoke-ai/ui-library';
+import { t } from 'i18next';
+import { PiXBold } from 'react-icons/pi';
+import { SyncModelsIconButton } from '../../modelManager/components/SyncModels/SyncModelsIconButton';
+
+export const ModelManager = () => {
+ return (
+
+
+
+ Model Manager
+
+
+
+
+
+
+
+
+
+
+
+
+ (
+
+ } />
+
+ )
+
+
+
+
+ );
+};
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManagerTab.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManagerTab.tsx
index 124c9b31a5..50db10fb57 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManagerTab.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManagerTab.tsx
@@ -1,65 +1,17 @@
-import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
-import ImportModelsPanel from 'features/modelManager/subpanels/ImportModelsPanel';
-import MergeModelsPanel from 'features/modelManager/subpanels/MergeModelsPanel';
-import ModelManagerPanel from 'features/modelManager/subpanels/ModelManagerPanel';
-import ModelManagerSettingsPanel from 'features/modelManager/subpanels/ModelManagerSettingsPanel';
-import type { ReactNode } from 'react';
-import { memo, useMemo } from 'react';
+import { Flex, Box } from '@invoke-ai/ui-library';
+import { memo } from 'react';
import { useTranslation } from 'react-i18next';
-
-type ModelManagerTabName = 'modelManager' | 'importModels' | 'mergeModels' | 'settings';
-
-type ModelManagerTabInfo = {
- id: ModelManagerTabName;
- label: string;
- content: ReactNode;
-};
+import { ImportModels } from '../../../modelManagerV2/subpanels/ImportModels';
+import { ModelManager } from '../../../modelManagerV2/subpanels/ModelManager';
const ModelManagerTab = () => {
- const { t } = useTranslation();
-
- const tabs: ModelManagerTabInfo[] = useMemo(
- () => [
- {
- id: 'modelManager',
- label: t('modelManager.modelManager'),
- content: ,
- },
- {
- id: 'importModels',
- label: t('modelManager.importModels'),
- content: ,
- },
- {
- id: 'mergeModels',
- label: t('modelManager.mergeModels'),
- content: ,
- },
- {
- id: 'settings',
- label: t('modelManager.settings'),
- content: ,
- },
- ],
- [t]
- );
return (
-
-
- {tabs.map((tab) => (
-
- {tab.label}
-
- ))}
-
-
- {tabs.map((tab) => (
-
- {tab.content}
-
- ))}
-
-
+
+
+
+
+
+
);
};