diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index 74b36c913d7..7b1e24457f3 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -114,6 +114,9 @@
         "t2iAdapter": "T2I Adapter",
         "positivePrompt": "Positive Prompt",
         "negativePrompt": "Negative Prompt",
+        "removeNegativePrompt": "Remove Negative Prompt",
+        "addNegativePrompt": "Add Negative Prompt",
+        "selectYourModel": "Select Your Model",
         "discordLabel": "Discord",
         "dontAskMeAgain": "Don't ask me again",
         "dontShowMeThese": "Don't show me these",
diff --git a/invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover/GallerySettingsPopover.tsx b/invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover/GallerySettingsPopover.tsx
index 0fea664eb90..f7c8591cd22 100644
--- a/invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover/GallerySettingsPopover.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover/GallerySettingsPopover.tsx
@@ -40,7 +40,7 @@ export const GallerySettingsPopover = memo(() => {
           <PopoverBody>
             <Flex direction="column" gap={2}>
               <Text fontWeight="semibold" color="base.300">
-                Gallery Settings
+                {t('gallery.gallerySettings')}
               </Text>
 
               <Divider />
diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/NegativePromptToggleButton.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/NegativePromptToggleButton.tsx
index 9733abf7122..9dc09f802d0 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Core/NegativePromptToggleButton.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Core/NegativePromptToggleButton.tsx
@@ -2,9 +2,11 @@ import { IconButton, Tooltip } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { negativePromptChanged, selectHasNegativePrompt } from 'features/controlLayers/store/paramsSlice';
 import { memo, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { PiPlusMinusBold } from 'react-icons/pi';
 
 export const NegativePromptToggleButton = memo(() => {
+  const { t } = useTranslation();
   const hasNegativePrompt = useAppSelector(selectHasNegativePrompt);
 
   const dispatch = useAppDispatch();
@@ -18,8 +20,8 @@ export const NegativePromptToggleButton = memo(() => {
   }, [dispatch, hasNegativePrompt]);
 
   const label = useMemo(
-    () => (hasNegativePrompt ? 'Remove Negative Prompt' : 'Add Negative Prompt'),
-    [hasNegativePrompt]
+    () => (hasNegativePrompt ? t('common.removeNegativePrompt') : t('common.addNegativePrompt')),
+    [hasNegativePrompt, t]
   );
 
   return (
diff --git a/invokeai/frontend/web/src/features/ui/layouts/AutoLayoutPanelContainer.tsx b/invokeai/frontend/web/src/features/ui/layouts/AutoLayoutPanelContainer.tsx
index 3a3da6b80cd..88e66f425b3 100644
--- a/invokeai/frontend/web/src/features/ui/layouts/AutoLayoutPanelContainer.tsx
+++ b/invokeai/frontend/web/src/features/ui/layouts/AutoLayoutPanelContainer.tsx
@@ -3,7 +3,7 @@ import { useAppSelector } from 'app/store/storeHooks';
 import { useFocusRegion, useIsRegionFocused } from 'common/hooks/focus';
 import type { IDockviewPanelProps, IGridviewPanelProps } from 'dockview';
 import { selectSystemShouldEnableHighlightFocusedRegions } from 'features/system/store/systemSlice';
-import type { PanelParameters } from 'features/ui/layouts/auto-layout-context';
+import type { DockviewPanelParameters, GridviewPanelParameters } from 'features/ui/layouts/auto-layout-context';
 import type { PropsWithChildren } from 'react';
 import { memo, useRef } from 'react';
 
@@ -30,8 +30,8 @@ const sx: SystemStyleObject = {
 export const AutoLayoutPanelContainer = memo(
   (
     props:
-      | PropsWithChildren<IDockviewPanelProps<PanelParameters>>
-      | PropsWithChildren<IGridviewPanelProps<PanelParameters>>
+      | PropsWithChildren<IDockviewPanelProps<DockviewPanelParameters>>
+      | PropsWithChildren<IGridviewPanelProps<GridviewPanelParameters>>
   ) => {
     const ref = useRef<HTMLDivElement>(null);
     const shouldHighlightFocusedRegions = useAppSelector(selectSystemShouldEnableHighlightFocusedRegions);
diff --git a/invokeai/frontend/web/src/features/ui/layouts/DockviewTab.tsx b/invokeai/frontend/web/src/features/ui/layouts/DockviewTab.tsx
index 44427fed8cb..06b7f2b7de1 100644
--- a/invokeai/frontend/web/src/features/ui/layouts/DockviewTab.tsx
+++ b/invokeai/frontend/web/src/features/ui/layouts/DockviewTab.tsx
@@ -3,10 +3,12 @@ import { setFocusedRegion } from 'common/hooks/focus';
 import { useCallbackOnDragEnter } from 'common/hooks/useCallbackOnDragEnter';
 import type { IDockviewPanelHeaderProps } from 'dockview';
 import { memo, useCallback, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 
-import type { PanelParameters } from './auto-layout-context';
+import type { DockviewPanelParameters } from './auto-layout-context';
 
-export const DockviewTab = memo((props: IDockviewPanelHeaderProps<PanelParameters>) => {
+export const DockviewTab = memo((props: IDockviewPanelHeaderProps<DockviewPanelParameters>) => {
+  const { t } = useTranslation();
   const ref = useRef<HTMLDivElement>(null);
   const setActive = useCallback(() => {
     if (!props.api.isActive) {
@@ -23,7 +25,7 @@ export const DockviewTab = memo((props: IDockviewPanelHeaderProps<PanelParameter
   return (
     <Flex ref={ref} alignItems="center" h="full" onPointerDown={onPointerDown}>
       <Text userSelect="none" px={4}>
-        {props.api.title ?? props.api.id}
+        {t(props.params.i18nKey)}
       </Text>
     </Flex>
   );
diff --git a/invokeai/frontend/web/src/features/ui/layouts/DockviewTabCanvasViewer.tsx b/invokeai/frontend/web/src/features/ui/layouts/DockviewTabCanvasViewer.tsx
index 1fa3506bc66..80f851ab7af 100644
--- a/invokeai/frontend/web/src/features/ui/layouts/DockviewTabCanvasViewer.tsx
+++ b/invokeai/frontend/web/src/features/ui/layouts/DockviewTabCanvasViewer.tsx
@@ -5,11 +5,13 @@ import type { IDockviewPanelHeaderProps } from 'dockview';
 import { useCurrentQueueItemDestination } from 'features/queue/hooks/useCurrentQueueItemDestination';
 import ProgressBar from 'features/system/components/ProgressBar';
 import { memo, useCallback, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useIsGenerationInProgress } from 'services/api/endpoints/queue';
 
-import type { PanelParameters } from './auto-layout-context';
+import type { DockviewPanelParameters } from './auto-layout-context';
 
-export const DockviewTabCanvasViewer = memo((props: IDockviewPanelHeaderProps<PanelParameters>) => {
+export const DockviewTabCanvasViewer = memo((props: IDockviewPanelHeaderProps<DockviewPanelParameters>) => {
+  const { t } = useTranslation();
   const isGenerationInProgress = useIsGenerationInProgress();
   const currentQueueItemDestination = useCurrentQueueItemDestination();
 
@@ -29,7 +31,7 @@ export const DockviewTabCanvasViewer = memo((props: IDockviewPanelHeaderProps<Pa
   return (
     <Flex ref={ref} position="relative" alignItems="center" h="full" onPointerDown={onPointerDown}>
       <Text userSelect="none" px={4}>
-        {props.api.title ?? props.api.id}
+        {t(props.params.i18nKey)}
       </Text>
       {currentQueueItemDestination === 'canvas' && isGenerationInProgress && (
         <ProgressBar position="absolute" bottom={0} left={0} right={0} h={1} borderRadius="none" />
diff --git a/invokeai/frontend/web/src/features/ui/layouts/DockviewTabCanvasWorkspace.tsx b/invokeai/frontend/web/src/features/ui/layouts/DockviewTabCanvasWorkspace.tsx
index ad6155a252c..440847d7451 100644
--- a/invokeai/frontend/web/src/features/ui/layouts/DockviewTabCanvasWorkspace.tsx
+++ b/invokeai/frontend/web/src/features/ui/layouts/DockviewTabCanvasWorkspace.tsx
@@ -7,11 +7,13 @@ import { selectCanvasSessionId } from 'features/controlLayers/store/canvasStagin
 import { useCurrentQueueItemDestination } from 'features/queue/hooks/useCurrentQueueItemDestination';
 import ProgressBar from 'features/system/components/ProgressBar';
 import { memo, useCallback, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useIsGenerationInProgress } from 'services/api/endpoints/queue';
 
-import type { PanelParameters } from './auto-layout-context';
+import type { DockviewPanelParameters } from './auto-layout-context';
 
-export const DockviewTabCanvasWorkspace = memo((props: IDockviewPanelHeaderProps<PanelParameters>) => {
+export const DockviewTabCanvasWorkspace = memo((props: IDockviewPanelHeaderProps<DockviewPanelParameters>) => {
+  const { t } = useTranslation();
   const isGenerationInProgress = useIsGenerationInProgress();
   const canvasSessionId = useAppSelector(selectCanvasSessionId);
   const currentQueueItemDestination = useCurrentQueueItemDestination();
@@ -32,7 +34,7 @@ export const DockviewTabCanvasWorkspace = memo((props: IDockviewPanelHeaderProps
   return (
     <Flex ref={ref} position="relative" alignItems="center" h="full" onPointerDown={onPointerDown}>
       <Text userSelect="none" px={4}>
-        {props.api.title ?? props.api.id}
+        {t(props.params.i18nKey)}
       </Text>
       {currentQueueItemDestination === canvasSessionId && isGenerationInProgress && (
         <ProgressBar position="absolute" bottom={0} left={0} right={0} h={1} borderRadius="none" />
diff --git a/invokeai/frontend/web/src/features/ui/layouts/DockviewTabLaunchpad.tsx b/invokeai/frontend/web/src/features/ui/layouts/DockviewTabLaunchpad.tsx
index 43236ef7349..fe7588aaeda 100644
--- a/invokeai/frontend/web/src/features/ui/layouts/DockviewTabLaunchpad.tsx
+++ b/invokeai/frontend/web/src/features/ui/layouts/DockviewTabLaunchpad.tsx
@@ -6,6 +6,7 @@ import type { IDockviewPanelHeaderProps } from 'dockview';
 import { selectActiveTab } from 'features/ui/store/uiSelectors';
 import type { TabName } from 'features/ui/store/uiTypes';
 import { memo, useCallback, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 import type { IconType } from 'react-icons';
 import {
   PiBoundingBoxBold,
@@ -16,6 +17,8 @@ import {
   PiTextAaBold,
 } from 'react-icons/pi';
 
+import type { DockviewPanelParameters } from './auto-layout-context';
+
 const TAB_ICONS: Record<TabName, IconType> = {
   generate: PiTextAaBold,
   canvas: PiBoundingBoxBold,
@@ -25,7 +28,8 @@ const TAB_ICONS: Record<TabName, IconType> = {
   queue: PiQueueBold,
 };
 
-export const DockviewTabLaunchpad = memo((props: IDockviewPanelHeaderProps) => {
+export const DockviewTabLaunchpad = memo((props: IDockviewPanelHeaderProps<DockviewPanelParameters>) => {
+  const { t } = useTranslation();
   const ref = useRef<HTMLDivElement>(null);
   const activeTab = useAppSelector(selectActiveTab);
 
@@ -44,7 +48,7 @@ export const DockviewTabLaunchpad = memo((props: IDockviewPanelHeaderProps) => {
   return (
     <Flex ref={ref} alignItems="center" h="full" px={4} gap={3} onPointerDown={onPointerDown}>
       <Icon as={TAB_ICONS[activeTab]} color="invokeYellow.300" boxSize={5} />
-      <Text userSelect="none">{props.api.title ?? props.api.id}</Text>
+      <Text userSelect="none">{t(props.params.i18nKey)}</Text>
     </Flex>
   );
 });
diff --git a/invokeai/frontend/web/src/features/ui/layouts/DockviewTabProgress.tsx b/invokeai/frontend/web/src/features/ui/layouts/DockviewTabProgress.tsx
index 7b685ed37ac..1d997caaf78 100644
--- a/invokeai/frontend/web/src/features/ui/layouts/DockviewTabProgress.tsx
+++ b/invokeai/frontend/web/src/features/ui/layouts/DockviewTabProgress.tsx
@@ -4,11 +4,13 @@ import { useCallbackOnDragEnter } from 'common/hooks/useCallbackOnDragEnter';
 import type { IDockviewPanelHeaderProps } from 'dockview';
 import ProgressBar from 'features/system/components/ProgressBar';
 import { memo, useCallback, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useIsGenerationInProgress } from 'services/api/endpoints/queue';
 
-import type { PanelParameters } from './auto-layout-context';
+import type { DockviewPanelParameters } from './auto-layout-context';
 
-export const DockviewTabProgress = memo((props: IDockviewPanelHeaderProps<PanelParameters>) => {
+export const DockviewTabProgress = memo((props: IDockviewPanelHeaderProps<DockviewPanelParameters>) => {
+  const { t } = useTranslation();
   const isGenerationInProgress = useIsGenerationInProgress();
 
   const ref = useRef<HTMLDivElement>(null);
@@ -27,7 +29,7 @@ export const DockviewTabProgress = memo((props: IDockviewPanelHeaderProps<PanelP
   return (
     <Flex ref={ref} position="relative" alignItems="center" h="full" onPointerDown={onPointerDown}>
       <Text userSelect="none" px={4}>
-        {props.api.title ?? props.api.id}
+        {t(props.params.i18nKey)}
       </Text>
       {isGenerationInProgress && (
         <ProgressBar position="absolute" bottom={0} left={0} right={0} h={1} borderRadius="none" />
diff --git a/invokeai/frontend/web/src/features/ui/layouts/InitialStateMainModelPicker.tsx b/invokeai/frontend/web/src/features/ui/layouts/InitialStateMainModelPicker.tsx
index c827c05094a..9807ae9e690 100644
--- a/invokeai/frontend/web/src/features/ui/layouts/InitialStateMainModelPicker.tsx
+++ b/invokeai/frontend/web/src/features/ui/layouts/InitialStateMainModelPicker.tsx
@@ -4,12 +4,14 @@ import { InformationalPopover } from 'common/components/InformationalPopover/Inf
 import { ModelPicker } from 'features/parameters/components/ModelPicker';
 import { modelSelected } from 'features/parameters/store/actions';
 import { memo, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { MdMoneyOff } from 'react-icons/md';
 import { useMainModels } from 'services/api/hooks/modelsByType';
 import { useSelectedModelConfig } from 'services/api/hooks/useSelectedModelConfig';
 import { type AnyModelConfig, isCheckpointMainModelConfig } from 'services/api/types';
 
 export const InitialStateMainModelPicker = memo(() => {
+  const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const [modelConfigs] = useMainModels();
   const selectedModelConfig = useSelectedModelConfig();
@@ -31,7 +33,7 @@ export const InitialStateMainModelPicker = memo(() => {
   return (
     <FormControl orientation="vertical" alignItems="unset">
       <FormLabel display="flex" fontSize="md" gap={2}>
-        Select your Model{' '}
+        {t('common.selectYourModel')}{' '}
         {isFluxDevSelected && (
           <InformationalPopover feature="fluxDevLicense" hideDisable={true}>
             <Flex justifyContent="flex-start">
diff --git a/invokeai/frontend/web/src/features/ui/layouts/auto-layout-context.tsx b/invokeai/frontend/web/src/features/ui/layouts/auto-layout-context.tsx
index 1c99b388571..cbb489bdb96 100644
--- a/invokeai/frontend/web/src/features/ui/layouts/auto-layout-context.tsx
+++ b/invokeai/frontend/web/src/features/ui/layouts/auto-layout-context.tsx
@@ -27,15 +27,30 @@ export const useAutoLayoutContext = () => {
   return value;
 };
 
-export type PanelParameters = {
+export type DockviewPanelParameters = {
   tab: TabName;
   focusRegion: FocusRegionName;
+  i18nKey: string;
 };
 
-export type AutoLayoutGridviewComponents = Record<string, FunctionComponent<IGridviewPanelProps<PanelParameters>>>;
-export type AutoLayoutDockviewComponents = Record<string, FunctionComponent<IDockviewPanelProps<PanelParameters>>>;
-export type RootLayoutGridviewComponents = Record<string, FunctionComponent<IGridviewPanelProps<PanelParameters>>>;
-type PanelProps = IDockviewPanelProps<PanelParameters> | IGridviewPanelProps<PanelParameters>;
+export type GridviewPanelParameters = {
+  tab: TabName;
+  focusRegion: FocusRegionName;
+};
+
+export type AutoLayoutGridviewComponents = Record<
+  string,
+  FunctionComponent<IGridviewPanelProps<GridviewPanelParameters>>
+>;
+export type AutoLayoutDockviewComponents = Record<
+  string,
+  FunctionComponent<IDockviewPanelProps<DockviewPanelParameters>>
+>;
+export type RootLayoutGridviewComponents = Record<
+  string,
+  FunctionComponent<IGridviewPanelProps<GridviewPanelParameters>>
+>;
+type PanelProps = IDockviewPanelProps<DockviewPanelParameters> | IGridviewPanelProps<GridviewPanelParameters>;
 
 export const withPanelContainer = (Component: FunctionComponent) =>
   /* eslint-disable-next-line  react/display-name */
diff --git a/invokeai/frontend/web/src/features/ui/layouts/canvas-tab-auto-layout.tsx b/invokeai/frontend/web/src/features/ui/layouts/canvas-tab-auto-layout.tsx
index cb9023256d3..b622b77e4de 100644
--- a/invokeai/frontend/web/src/features/ui/layouts/canvas-tab-auto-layout.tsx
+++ b/invokeai/frontend/web/src/features/ui/layouts/canvas-tab-auto-layout.tsx
@@ -9,7 +9,8 @@ import { FloatingRightPanelButtons } from 'features/ui/components/FloatingRightP
 import type {
   AutoLayoutDockviewComponents,
   AutoLayoutGridviewComponents,
-  PanelParameters,
+  DockviewPanelParameters,
+  GridviewPanelParameters,
   RootLayoutGridviewComponents,
 } from 'features/ui/layouts/auto-layout-context';
 import { AutoLayoutProvider, useAutoLayoutContext, withPanelContainer } from 'features/ui/layouts/auto-layout-context';
@@ -63,7 +64,7 @@ const mainPanelComponents: AutoLayoutDockviewComponents = {
 
 const initializeCenterPanelLayout = (tab: TabName, api: DockviewApi) => {
   navigationApi.registerContainer(tab, 'main', api, () => {
-    const launchpad = api.addPanel<PanelParameters>({
+    const launchpad = api.addPanel<DockviewPanelParameters>({
       id: LAUNCHPAD_PANEL_ID,
       component: LAUNCHPAD_PANEL_ID,
       title: t('ui.panels.launchpad'),
@@ -71,10 +72,11 @@ const initializeCenterPanelLayout = (tab: TabName, api: DockviewApi) => {
       params: {
         tab,
         focusRegion: 'launchpad',
+        i18nKey: 'ui.panels.launchpad',
       },
     });
 
-    api.addPanel<PanelParameters>({
+    api.addPanel<DockviewPanelParameters>({
       id: WORKSPACE_PANEL_ID,
       component: WORKSPACE_PANEL_ID,
       title: t('ui.panels.canvas'),
@@ -82,6 +84,7 @@ const initializeCenterPanelLayout = (tab: TabName, api: DockviewApi) => {
       params: {
         tab,
         focusRegion: 'canvas',
+        i18nKey: 'ui.panels.canvas',
       },
       position: {
         direction: 'within',
@@ -89,7 +92,7 @@ const initializeCenterPanelLayout = (tab: TabName, api: DockviewApi) => {
       },
     });
 
-    api.addPanel<PanelParameters>({
+    api.addPanel<DockviewPanelParameters>({
       id: VIEWER_PANEL_ID,
       component: VIEWER_PANEL_ID,
       title: t('ui.panels.imageViewer'),
@@ -97,6 +100,7 @@ const initializeCenterPanelLayout = (tab: TabName, api: DockviewApi) => {
       params: {
         tab,
         focusRegion: 'viewer',
+        i18nKey: 'ui.panels.imageViewer',
       },
       position: {
         direction: 'within',
@@ -145,7 +149,7 @@ const rightPanelComponents: AutoLayoutGridviewComponents = {
 
 const initializeRightPanelLayout = (tab: TabName, api: GridviewApi) => {
   navigationApi.registerContainer(tab, 'right', api, () => {
-    const gallery = api.addPanel<PanelParameters>({
+    const gallery = api.addPanel<GridviewPanelParameters>({
       id: GALLERY_PANEL_ID,
       component: GALLERY_PANEL_ID,
       minimumWidth: RIGHT_PANEL_MIN_SIZE_PX,
@@ -156,7 +160,7 @@ const initializeRightPanelLayout = (tab: TabName, api: GridviewApi) => {
       },
     });
 
-    const boards = api.addPanel<PanelParameters>({
+    const boards = api.addPanel<GridviewPanelParameters>({
       id: BOARDS_PANEL_ID,
       component: BOARDS_PANEL_ID,
       minimumHeight: BOARD_PANEL_MIN_HEIGHT_PX,
@@ -170,7 +174,7 @@ const initializeRightPanelLayout = (tab: TabName, api: GridviewApi) => {
       },
     });
 
-    api.addPanel<PanelParameters>({
+    api.addPanel<GridviewPanelParameters>({
       id: LAYERS_PANEL_ID,
       component: LAYERS_PANEL_ID,
       minimumHeight: LAYERS_PANEL_MIN_HEIGHT_PX,
@@ -215,7 +219,7 @@ const leftPanelComponents: AutoLayoutGridviewComponents = {
 
 const initializeLeftPanelLayout = (tab: TabName, api: GridviewApi) => {
   navigationApi.registerContainer(tab, 'left', api, () => {
-    api.addPanel<PanelParameters>({
+    api.addPanel<GridviewPanelParameters>({
       id: SETTINGS_PANEL_ID,
       component: SETTINGS_PANEL_ID,
       params: {
diff --git a/invokeai/frontend/web/src/features/ui/layouts/generate-tab-auto-layout.tsx b/invokeai/frontend/web/src/features/ui/layouts/generate-tab-auto-layout.tsx
index aaea3372d5b..81cf2885474 100644
--- a/invokeai/frontend/web/src/features/ui/layouts/generate-tab-auto-layout.tsx
+++ b/invokeai/frontend/web/src/features/ui/layouts/generate-tab-auto-layout.tsx
@@ -8,7 +8,8 @@ import { FloatingRightPanelButtons } from 'features/ui/components/FloatingRightP
 import type {
   AutoLayoutDockviewComponents,
   AutoLayoutGridviewComponents,
-  PanelParameters,
+  DockviewPanelParameters,
+  GridviewPanelParameters,
   RootLayoutGridviewComponents,
 } from 'features/ui/layouts/auto-layout-context';
 import { AutoLayoutProvider, useAutoLayoutContext, withPanelContainer } from 'features/ui/layouts/auto-layout-context';
@@ -57,7 +58,7 @@ const mainPanelComponents: AutoLayoutDockviewComponents = {
 
 const initializeMainPanelLayout = (tab: TabName, api: DockviewApi) => {
   navigationApi.registerContainer(tab, 'main', api, () => {
-    const launchpad = api.addPanel<PanelParameters>({
+    const launchpad = api.addPanel<DockviewPanelParameters>({
       id: LAUNCHPAD_PANEL_ID,
       component: LAUNCHPAD_PANEL_ID,
       title: t('ui.panels.launchpad'),
@@ -65,10 +66,11 @@ const initializeMainPanelLayout = (tab: TabName, api: DockviewApi) => {
       params: {
         tab,
         focusRegion: 'launchpad',
+        i18nKey: 'ui.panels.launchpad',
       },
     });
 
-    api.addPanel<PanelParameters>({
+    api.addPanel<DockviewPanelParameters>({
       id: VIEWER_PANEL_ID,
       component: VIEWER_PANEL_ID,
       title: t('ui.panels.imageViewer'),
@@ -76,6 +78,7 @@ const initializeMainPanelLayout = (tab: TabName, api: DockviewApi) => {
       params: {
         tab,
         focusRegion: 'viewer',
+        i18nKey: 'ui.panels.imageViewer',
       },
       position: {
         direction: 'within',
@@ -123,7 +126,7 @@ const rightPanelComponents: AutoLayoutGridviewComponents = {
 
 const initializeRightPanelLayout = (tab: TabName, api: GridviewApi) => {
   navigationApi.registerContainer(tab, 'right', api, () => {
-    const gallery = api.addPanel<PanelParameters>({
+    const gallery = api.addPanel<GridviewPanelParameters>({
       id: GALLERY_PANEL_ID,
       component: GALLERY_PANEL_ID,
       minimumWidth: RIGHT_PANEL_MIN_SIZE_PX,
@@ -134,7 +137,7 @@ const initializeRightPanelLayout = (tab: TabName, api: GridviewApi) => {
       },
     });
 
-    const boards = api.addPanel<PanelParameters>({
+    const boards = api.addPanel<GridviewPanelParameters>({
       id: BOARDS_PANEL_ID,
       component: BOARDS_PANEL_ID,
       minimumHeight: BOARD_PANEL_MIN_HEIGHT_PX,
@@ -179,7 +182,7 @@ const leftPanelComponents: AutoLayoutGridviewComponents = {
 
 const initializeLeftPanelLayout = (tab: TabName, api: GridviewApi) => {
   navigationApi.registerContainer(tab, 'left', api, () => {
-    api.addPanel<PanelParameters>({
+    api.addPanel<GridviewPanelParameters>({
       id: SETTINGS_PANEL_ID,
       component: SETTINGS_PANEL_ID,
       params: {
@@ -218,13 +221,13 @@ const rootPanelComponents: RootLayoutGridviewComponents = {
 
 const initializeRootPanelLayout = (tab: TabName, api: GridviewApi) => {
   navigationApi.registerContainer(tab, 'root', api, () => {
-    const main = api.addPanel<PanelParameters>({
+    const main = api.addPanel<GridviewPanelParameters>({
       id: MAIN_PANEL_ID,
       component: MAIN_PANEL_ID,
       priority: LayoutPriority.High,
     });
 
-    const left = api.addPanel<PanelParameters>({
+    const left = api.addPanel<GridviewPanelParameters>({
       id: LEFT_PANEL_ID,
       component: LEFT_PANEL_ID,
       minimumWidth: LEFT_PANEL_MIN_SIZE_PX,
@@ -234,7 +237,7 @@ const initializeRootPanelLayout = (tab: TabName, api: GridviewApi) => {
       },
     });
 
-    const right = api.addPanel<PanelParameters>({
+    const right = api.addPanel<GridviewPanelParameters>({
       id: RIGHT_PANEL_ID,
       component: RIGHT_PANEL_ID,
       minimumWidth: RIGHT_PANEL_MIN_SIZE_PX,
diff --git a/invokeai/frontend/web/src/features/ui/layouts/upscaling-tab-auto-layout.tsx b/invokeai/frontend/web/src/features/ui/layouts/upscaling-tab-auto-layout.tsx
index 7d585343338..7820187119c 100644
--- a/invokeai/frontend/web/src/features/ui/layouts/upscaling-tab-auto-layout.tsx
+++ b/invokeai/frontend/web/src/features/ui/layouts/upscaling-tab-auto-layout.tsx
@@ -8,7 +8,8 @@ import { FloatingRightPanelButtons } from 'features/ui/components/FloatingRightP
 import type {
   AutoLayoutDockviewComponents,
   AutoLayoutGridviewComponents,
-  PanelParameters,
+  DockviewPanelParameters,
+  GridviewPanelParameters,
   RootLayoutGridviewComponents,
 } from 'features/ui/layouts/auto-layout-context';
 import { AutoLayoutProvider, useAutoLayoutContext, withPanelContainer } from 'features/ui/layouts/auto-layout-context';
@@ -57,7 +58,7 @@ const mainPanelComponents: AutoLayoutDockviewComponents = {
 
 const initializeMainPanelLayout = (tab: TabName, api: DockviewApi) => {
   navigationApi.registerContainer(tab, 'main', api, () => {
-    const launchpad = api.addPanel<PanelParameters>({
+    const launchpad = api.addPanel<DockviewPanelParameters>({
       id: LAUNCHPAD_PANEL_ID,
       component: LAUNCHPAD_PANEL_ID,
       title: t('ui.panels.launchpad'),
@@ -65,10 +66,11 @@ const initializeMainPanelLayout = (tab: TabName, api: DockviewApi) => {
       params: {
         tab,
         focusRegion: 'launchpad',
+        i18nKey: 'ui.panels.launchpad',
       },
     });
 
-    api.addPanel<PanelParameters>({
+    api.addPanel<DockviewPanelParameters>({
       id: VIEWER_PANEL_ID,
       component: VIEWER_PANEL_ID,
       title: t('ui.panels.imageViewer'),
@@ -76,6 +78,7 @@ const initializeMainPanelLayout = (tab: TabName, api: DockviewApi) => {
       params: {
         tab,
         focusRegion: 'viewer',
+        i18nKey: 'ui.panels.imageViewer',
       },
       position: {
         direction: 'within',
@@ -121,7 +124,7 @@ const rightPanelComponents: AutoLayoutGridviewComponents = {
 
 const initializeRightPanelLayout = (tab: TabName, api: GridviewApi) => {
   navigationApi.registerContainer(tab, 'right', api, () => {
-    const gallery = api.addPanel<PanelParameters>({
+    const gallery = api.addPanel<GridviewPanelParameters>({
       id: GALLERY_PANEL_ID,
       component: GALLERY_PANEL_ID,
       minimumWidth: RIGHT_PANEL_MIN_SIZE_PX,
@@ -132,7 +135,7 @@ const initializeRightPanelLayout = (tab: TabName, api: GridviewApi) => {
       },
     });
 
-    const boards = api.addPanel<PanelParameters>({
+    const boards = api.addPanel<GridviewPanelParameters>({
       id: BOARDS_PANEL_ID,
       component: BOARDS_PANEL_ID,
       minimumHeight: BOARD_PANEL_MIN_HEIGHT_PX,
@@ -177,7 +180,7 @@ const leftPanelComponents: AutoLayoutGridviewComponents = {
 
 const initializeLeftPanelLayout = (tab: TabName, api: GridviewApi) => {
   navigationApi.registerContainer(tab, 'left', api, () => {
-    api.addPanel<PanelParameters>({
+    api.addPanel<GridviewPanelParameters>({
       id: SETTINGS_PANEL_ID,
       component: SETTINGS_PANEL_ID,
       params: {
diff --git a/invokeai/frontend/web/src/features/ui/layouts/workflows-tab-auto-layout.tsx b/invokeai/frontend/web/src/features/ui/layouts/workflows-tab-auto-layout.tsx
index 5019aca4782..06ae423e447 100644
--- a/invokeai/frontend/web/src/features/ui/layouts/workflows-tab-auto-layout.tsx
+++ b/invokeai/frontend/web/src/features/ui/layouts/workflows-tab-auto-layout.tsx
@@ -10,7 +10,8 @@ import { FloatingRightPanelButtons } from 'features/ui/components/FloatingRightP
 import type {
   AutoLayoutDockviewComponents,
   AutoLayoutGridviewComponents,
-  PanelParameters,
+  DockviewPanelParameters,
+  GridviewPanelParameters,
   RootLayoutGridviewComponents,
 } from 'features/ui/layouts/auto-layout-context';
 import { AutoLayoutProvider, useAutoLayoutContext, withPanelContainer } from 'features/ui/layouts/auto-layout-context';
@@ -60,7 +61,7 @@ const mainPanelComponents: AutoLayoutDockviewComponents = {
 
 const initializeMainPanelLayout = (tab: TabName, api: DockviewApi) => {
   navigationApi.registerContainer(tab, 'main', api, () => {
-    const launchpad = api.addPanel<PanelParameters>({
+    const launchpad = api.addPanel<DockviewPanelParameters>({
       id: LAUNCHPAD_PANEL_ID,
       component: LAUNCHPAD_PANEL_ID,
       title: t('ui.panels.launchpad'),
@@ -68,10 +69,11 @@ const initializeMainPanelLayout = (tab: TabName, api: DockviewApi) => {
       params: {
         tab,
         focusRegion: 'launchpad',
+        i18nKey: 'ui.panels.launchpad',
       },
     });
 
-    api.addPanel<PanelParameters>({
+    api.addPanel<DockviewPanelParameters>({
       id: WORKSPACE_PANEL_ID,
       component: WORKSPACE_PANEL_ID,
       title: t('ui.panels.workflowEditor'),
@@ -79,6 +81,7 @@ const initializeMainPanelLayout = (tab: TabName, api: DockviewApi) => {
       params: {
         tab,
         focusRegion: 'workflows',
+        i18nKey: 'ui.panels.workflowEditor',
       },
       position: {
         direction: 'within',
@@ -86,7 +89,7 @@ const initializeMainPanelLayout = (tab: TabName, api: DockviewApi) => {
       },
     });
 
-    api.addPanel<PanelParameters>({
+    api.addPanel<DockviewPanelParameters>({
       id: VIEWER_PANEL_ID,
       component: VIEWER_PANEL_ID,
       title: t('ui.panels.imageViewer'),
@@ -94,6 +97,7 @@ const initializeMainPanelLayout = (tab: TabName, api: DockviewApi) => {
       params: {
         tab,
         focusRegion: 'viewer',
+        i18nKey: 'ui.panels.imageViewer',
       },
       position: {
         direction: 'within',
@@ -141,7 +145,7 @@ const rightPanelComponents: AutoLayoutGridviewComponents = {
 
 const initializeRightPanelLayout = (tab: TabName, api: GridviewApi) => {
   navigationApi.registerContainer(tab, 'right', api, () => {
-    const gallery = api.addPanel<PanelParameters>({
+    const gallery = api.addPanel<GridviewPanelParameters>({
       id: GALLERY_PANEL_ID,
       component: GALLERY_PANEL_ID,
       minimumWidth: RIGHT_PANEL_MIN_SIZE_PX,
@@ -152,7 +156,7 @@ const initializeRightPanelLayout = (tab: TabName, api: GridviewApi) => {
       },
     });
 
-    const boards = api.addPanel<PanelParameters>({
+    const boards = api.addPanel<GridviewPanelParameters>({
       id: BOARDS_PANEL_ID,
       component: BOARDS_PANEL_ID,
       minimumHeight: BOARD_PANEL_MIN_HEIGHT_PX,
@@ -197,7 +201,7 @@ const leftPanelComponents: AutoLayoutGridviewComponents = {
 
 const initializeLeftPanelLayout = (tab: TabName, api: GridviewApi) => {
   navigationApi.registerContainer(tab, 'left', api, () => {
-    api.addPanel<PanelParameters>({
+    api.addPanel<GridviewPanelParameters>({
       id: SETTINGS_PANEL_ID,
       component: SETTINGS_PANEL_ID,
       params: {
diff --git a/invokeai/frontend/web/src/features/ui/store/uiSlice.ts b/invokeai/frontend/web/src/features/ui/store/uiSlice.ts
index f0e88cc8fe0..4f9828a4879 100644
--- a/invokeai/frontend/web/src/features/ui/store/uiSlice.ts
+++ b/invokeai/frontend/web/src/features/ui/store/uiSlice.ts
@@ -105,6 +105,10 @@ export const uiSliceConfig: SliceConfig<typeof slice> = {
         state.activeTab = 'canvas';
         state._version = 3;
       }
+      if (state._version === 3) {
+        state.panels = {};
+        state._version = 4;
+      }
       return zUIState.parse(state);
     },
     persistDenylist: ['shouldShowImageDetails'],
diff --git a/invokeai/frontend/web/src/features/ui/store/uiTypes.ts b/invokeai/frontend/web/src/features/ui/store/uiTypes.ts
index e36c0b1cdbf..c6f5399b588 100644
--- a/invokeai/frontend/web/src/features/ui/store/uiTypes.ts
+++ b/invokeai/frontend/web/src/features/ui/store/uiTypes.ts
@@ -13,7 +13,7 @@ const zSerializable = z.any().refine(isPlainObject);
 export type Serializable = z.infer<typeof zSerializable>;
 
 export const zUIState = z.object({
-  _version: z.literal(3),
+  _version: z.literal(4),
   activeTab: zTabName,
   shouldShowImageDetails: z.boolean(),
   shouldShowProgressInViewer: z.boolean(),
@@ -26,7 +26,7 @@ export const zUIState = z.object({
 });
 export type UIState = z.infer<typeof zUIState>;
 export const getInitialUIState = (): UIState => ({
-  _version: 3 as const,
+  _version: 4 as const,
   activeTab: 'generate' as const,
   shouldShowImageDetails: false,
   shouldShowProgressInViewer: true,