diff --git a/invokeai/frontend/web/src/features/ui/components/AppContent.tsx b/invokeai/frontend/web/src/features/ui/components/AppContent.tsx
index f810d8e1e4..7952177192 100644
--- a/invokeai/frontend/web/src/features/ui/components/AppContent.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/AppContent.tsx
@@ -1,7 +1,7 @@
 import 'dockview/dist/styles/dockview.css';
 import 'features/ui/styles/dockview-theme-invoke.css';
 
-import { TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
+import { TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useDndMonitor } from 'features/dnd/useDndMonitor';
 import { VerticalNavBar } from 'features/ui/components/VerticalNavBar';
@@ -22,9 +22,7 @@ export const AppContent = memo(() => {
 
   return (
     <Tabs index={tabIndex} display="flex" w="full" h="full" p={0} overflow="hidden">
-      <TabList>
-        <VerticalNavBar />
-      </TabList>
+      <VerticalNavBar />
       <TabPanels w="full" h="full" p={0}>
         <TabMountGate tab="generate">
           <TabPanel w="full" h="full" p={0}>
diff --git a/invokeai/frontend/web/src/features/ui/components/TabButton.tsx b/invokeai/frontend/web/src/features/ui/components/TabButton.tsx
index 6bcc351618..a112ac9fb5 100644
--- a/invokeai/frontend/web/src/features/ui/components/TabButton.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/TabButton.tsx
@@ -1,5 +1,5 @@
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
-import { IconButton, Tab, Tooltip } from '@invoke-ai/ui-library';
+import { IconButton, Tooltip } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useCallbackOnDragEnter } from 'common/hooks/useCallbackOnDragEnter';
 import { selectActiveTab } from 'features/ui/store/uiSelectors';
@@ -26,7 +26,6 @@ export const TabButton = memo(({ tab, icon, label }: { tab: TabName; icon: React
   return (
     <Tooltip label={label} placement="end">
       <IconButton
-        as={Tab}
         p={0}
         ref={ref}
         onClick={selectTab}
diff --git a/invokeai/frontend/web/src/features/ui/components/VerticalNavBar.tsx b/invokeai/frontend/web/src/features/ui/components/VerticalNavBar.tsx
index 5fd9baae8f..8923707569 100644
--- a/invokeai/frontend/web/src/features/ui/components/VerticalNavBar.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/VerticalNavBar.tsx
@@ -27,7 +27,7 @@ export const VerticalNavBar = memo(() => {
   return (
     <Flex flexDir="column" alignItems="center" py={6} px={4} gap={4} minW={0}>
       <InvokeAILogoComponent />
-      <Flex gap={4} pt={6} h="full" flexDir="column">
+      <Flex gap={6} pt={6} h="full" flexDir="column">
         <TabMountGate tab="generate">
           <TabButton tab="generate" icon={<PiTextAaBold />} label="Generate" />
         </TabMountGate>