diff --git a/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx b/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx
index 74fb99fa14..4cefdbb20b 100644
--- a/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx
@@ -7,6 +7,11 @@ import { MdDeviceHub } from 'react-icons/md';
 import 'reactflow/dist/style.css';
 import AddNodePopover from './flow/AddNodePopover/AddNodePopover';
 import { Flow } from './flow/Flow';
+import TopLeftPanel from './flow/panels/TopLeftPanel/TopLeftPanel';
+import TopCenterPanel from './flow/panels/TopCenterPanel/TopCenterPanel';
+import TopRightPanel from './flow/panels/TopRightPanel/TopRightPanel';
+import BottomLeftPanel from './flow/panels/BottomLeftPanel/BottomLeftPanel';
+import MinimapPanel from './flow/panels/MinimapPanel/MinimapPanel';
 
 const NodeEditor = () => {
   const isReady = useAppSelector((state) => state.nodes.isReady);
@@ -40,6 +45,11 @@ const NodeEditor = () => {
           >
             <Flow />
             <AddNodePopover />
+            <TopLeftPanel />
+            <TopCenterPanel />
+            <TopRightPanel />
+            <BottomLeftPanel />
+            <MinimapPanel />
           </motion.div>
         )}
       </AnimatePresence>
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/Flow.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/Flow.tsx
index dcd75e068b..e8fb66d074 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/Flow.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/Flow.tsx
@@ -42,11 +42,6 @@ import InvocationDefaultEdge from './edges/InvocationDefaultEdge';
 import CurrentImageNode from './nodes/CurrentImage/CurrentImageNode';
 import InvocationNodeWrapper from './nodes/Invocation/InvocationNodeWrapper';
 import NotesNode from './nodes/Notes/NotesNode';
-import BottomLeftPanel from './panels/BottomLeftPanel/BottomLeftPanel';
-import MinimapPanel from './panels/MinimapPanel/MinimapPanel';
-import TopCenterPanel from './panels/TopCenterPanel/TopCenterPanel';
-import TopLeftPanel from './panels/TopLeftPanel/TopLeftPanel';
-import TopRightPanel from './panels/TopRightPanel/TopRightPanel';
 
 const DELETE_KEYS = ['Delete', 'Backspace'];
 
@@ -196,11 +191,6 @@ export const Flow = () => {
       deleteKeyCode={DELETE_KEYS}
       selectionMode={selectionMode}
     >
-      <TopLeftPanel />
-      <TopCenterPanel />
-      <TopRightPanel />
-      <BottomLeftPanel />
-      <MinimapPanel />
       <Background />
     </ReactFlow>
   );
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/BottomLeftPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/BottomLeftPanel.tsx
index eccc4409af..c59557f1a0 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/BottomLeftPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/BottomLeftPanel.tsx
@@ -1,16 +1,13 @@
-import { memo } from 'react';
-import { Panel } from 'reactflow';
-import ViewportControls from './ViewportControls';
-import NodeOpacitySlider from './NodeOpacitySlider';
 import { Flex } from '@chakra-ui/react';
+import { memo } from 'react';
+import NodeOpacitySlider from './NodeOpacitySlider';
+import ViewportControls from './ViewportControls';
 
 const BottomLeftPanel = () => (
-  <Panel position="bottom-left">
-    <Flex sx={{ gap: 2 }}>
-      <ViewportControls />
-      <NodeOpacitySlider />
-    </Flex>
-  </Panel>
+  <Flex sx={{ gap: 2, position: 'absolute', bottom: 2, insetInlineStart: 2 }}>
+    <ViewportControls />
+    <NodeOpacitySlider />
+  </Flex>
 );
 
 export default memo(BottomLeftPanel);
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/MinimapPanel/MinimapPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/MinimapPanel/MinimapPanel.tsx
index 8b7fb942a6..d107444dfa 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/MinimapPanel/MinimapPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/MinimapPanel/MinimapPanel.tsx
@@ -1,6 +1,6 @@
 import { RootState } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { useColorModeValue } from '@chakra-ui/react';
+import { Flex, useColorModeValue } from '@chakra-ui/react';
 import { memo } from 'react';
 import { MiniMap } from 'reactflow';
 
@@ -29,7 +29,7 @@ const MinimapPanel = () => {
   );
 
   return (
-    <>
+    <Flex sx={{ gap: 2, position: 'absolute', bottom: 2, insetInlineEnd: 2 }}>
       {shouldShowMinimapPanel && (
         <MiniMap
           pannable
@@ -40,7 +40,7 @@ const MinimapPanel = () => {
           maskColor={maskColor}
         />
       )}
-    </>
+    </Flex>
   );
 };
 
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopCenterPanel/ResetWorkflowButton.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopCenterPanel/ResetWorkflowButton.tsx
index 62e8bf7b4b..129b7f72c9 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopCenterPanel/ResetWorkflowButton.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopCenterPanel/ResetWorkflowButton.tsx
@@ -6,10 +6,8 @@ import {
   AlertDialogHeader,
   AlertDialogOverlay,
   Button,
-  Divider,
   Flex,
   Text,
-  VStack,
   useDisclosure,
 } from '@chakra-ui/react';
 import { RootState } from 'app/store/store';
@@ -55,6 +53,7 @@ const ResetWorkflowButton = () => {
         aria-label={t('nodes.resetWorkflow')}
         onClick={onOpen}
         isDisabled={!nodesCount}
+        colorScheme="error"
       />
 
       <AlertDialog
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopCenterPanel/TopCenterPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopCenterPanel/TopCenterPanel.tsx
index 29e21acd03..3a2ac7ad89 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopCenterPanel/TopCenterPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopCenterPanel/TopCenterPanel.tsx
@@ -1,8 +1,25 @@
+import { Flex } from '@chakra-ui/layout';
 import { memo } from 'react';
-import { Panel } from 'reactflow';
+import LoadWorkflowButton from './LoadWorkflowButton';
+import ResetWorkflowButton from './ResetWorkflowButton';
+import SaveWorkflowButton from './SaveWorkflowButton';
 
 const TopCenterPanel = () => {
-  return <Panel position="top-center">{null}</Panel>;
+  return (
+    <Flex
+      sx={{
+        gap: 2,
+        position: 'absolute',
+        top: 2,
+        insetInlineStart: '50%',
+        transform: 'translate(-50%)',
+      }}
+    >
+      <SaveWorkflowButton />
+      <LoadWorkflowButton />
+      <ResetWorkflowButton />
+    </Flex>
+  );
 };
 
 export default memo(TopCenterPanel);
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopCenterPanel/WorkflowEditorControls.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopCenterPanel/WorkflowEditorControls.tsx
index dbe3886b74..3a72f52b0c 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopCenterPanel/WorkflowEditorControls.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopCenterPanel/WorkflowEditorControls.tsx
@@ -2,18 +2,12 @@ import { Flex } from '@chakra-ui/react';
 import CancelButton from 'features/parameters/components/ProcessButtons/CancelButton';
 import InvokeButton from 'features/parameters/components/ProcessButtons/InvokeButton';
 import { memo } from 'react';
-import LoadWorkflowButton from './LoadWorkflowButton';
-import ResetWorkflowButton from './ResetWorkflowButton';
-import SaveWorkflowButton from './SaveWorkflowButton';
 
 const WorkflowEditorControls = () => {
   return (
-    <Flex sx={{ gap: 2 }}>
+    <Flex layerStyle="first" sx={{ gap: 2, borderRadius: 'base', p: 2 }}>
       <InvokeButton />
       <CancelButton />
-      <ResetWorkflowButton />
-      <SaveWorkflowButton />
-      <LoadWorkflowButton />
     </Flex>
   );
 };
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopLeftPanel/TopLeftPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopLeftPanel/TopLeftPanel.tsx
index cee6de70a6..73296ef52d 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopLeftPanel/TopLeftPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopLeftPanel/TopLeftPanel.tsx
@@ -1,9 +1,9 @@
+import { Flex } from '@chakra-ui/layout';
 import { useAppDispatch } from 'app/store/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
 import { addNodePopoverOpened } from 'features/nodes/store/nodesSlice';
 import { memo, useCallback } from 'react';
 import { FaPlus } from 'react-icons/fa';
-import { Panel } from 'reactflow';
 
 const TopLeftPanel = () => {
   const dispatch = useAppDispatch();
@@ -13,14 +13,14 @@ const TopLeftPanel = () => {
   }, [dispatch]);
 
   return (
-    <Panel position="top-left">
+    <Flex sx={{ gap: 2, position: 'absolute', top: 2, insetInlineStart: 2 }}>
       <IAIIconButton
         tooltip="Add Node (Shift+A, Space)"
         aria-label="Add Node"
         icon={<FaPlus />}
         onClick={handleOpenAddNodePopover}
       />
-    </Panel>
+    </Flex>
   );
 };
 
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/TopRightPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/TopRightPanel.tsx
index a57b01c150..db8f544c2e 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/TopRightPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/TopRightPanel.tsx
@@ -1,6 +1,6 @@
+import { Flex } from '@chakra-ui/layout';
 import { useAppSelector } from 'app/store/storeHooks';
 import { memo } from 'react';
-import { Panel } from 'reactflow';
 import FieldTypeLegend from './FieldTypeLegend';
 import WorkflowEditorSettings from './WorkflowEditorSettings';
 
@@ -10,10 +10,10 @@ const TopRightPanel = () => {
   );
 
   return (
-    <Panel position="top-right">
+    <Flex sx={{ gap: 2, position: 'absolute', top: 2, insetInlineEnd: 2 }}>
       <WorkflowEditorSettings />
       {shouldShowFieldTypeLegend && <FieldTypeLegend />}
-    </Panel>
+    </Flex>
   );
 };
 
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/WorkflowEditorSettings.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/WorkflowEditorSettings.tsx
index 06a57bd875..c423750cd8 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/WorkflowEditorSettings.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/WorkflowEditorSettings.tsx
@@ -9,6 +9,7 @@ import {
   ModalContent,
   ModalHeader,
   ModalOverlay,
+  forwardRef,
   useDisclosure,
 } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
@@ -54,7 +55,7 @@ const selector = createSelector(
   defaultSelectorOptions
 );
 
-const WorkflowEditorSettings = () => {
+const WorkflowEditorSettings = forwardRef((_, ref) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const dispatch = useAppDispatch();
   const {
@@ -103,6 +104,7 @@ const WorkflowEditorSettings = () => {
   return (
     <>
       <IAIIconButton
+        ref={ref}
         aria-label="Workflow Editor Settings"
         tooltip="Workflow Editor Settings"
         icon={<FaCog />}
@@ -170,6 +172,6 @@ const WorkflowEditorSettings = () => {
       </Modal>
     </>
   );
-};
+});
 
 export default memo(WorkflowEditorSettings);
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/NodeEditorPanelGroup.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/NodeEditorPanelGroup.tsx
index 7b37453894..f40d5ddd80 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/NodeEditorPanelGroup.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/NodeEditorPanelGroup.tsx
@@ -1,4 +1,5 @@
 import { Flex } from '@chakra-ui/react';
+import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
 import ResizeHandle from 'features/ui/components/tabs/ResizeHandle';
 import { usePanelStorage } from 'features/ui/hooks/usePanelStorage';
 import { memo, useCallback, useRef, useState } from 'react';
@@ -8,7 +9,6 @@ import {
   PanelGroup,
 } from 'react-resizable-panels';
 import 'reactflow/dist/style.css';
-import WorkflowEditorControls from '../flow/panels/TopCenterPanel/WorkflowEditorControls';
 import InspectorPanel from './inspector/InspectorPanel';
 import WorkflowPanel from './workflow/WorkflowPanel';
 
@@ -26,7 +26,7 @@ const NodeEditorPanelGroup = () => {
 
   return (
     <Flex sx={{ flexDir: 'column', gap: 2, height: '100%', width: '100%' }}>
-      <WorkflowEditorControls />
+      <ProcessButtons />
       <PanelGroup
         ref={panelGroupRef}
         id="workflow-panel-group"
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorPanel.tsx
index 12970a0e66..22f3ad6bb5 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorPanel.tsx
@@ -20,7 +20,7 @@ const InspectorPanel = () => {
         w: 'full',
         h: 'full',
         borderRadius: 'base',
-        p: 4,
+        p: 2,
         gap: 2,
       }}
     >
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx
index 4028467e0e..4cf7b2e431 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx
@@ -20,7 +20,7 @@ const WorkflowPanel = () => {
         w: 'full',
         h: 'full',
         borderRadius: 'base',
-        p: 4,
+        p: 2,
         gap: 2,
       }}
     >
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImageDisplay.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImageDisplay.tsx
index 960b4cd773..ee08d4ca99 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImageDisplay.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImageDisplay.tsx
@@ -49,7 +49,7 @@ const InitialImageDisplay = () => {
         alignItems: 'center',
         justifyContent: 'center',
         borderRadius: 'base',
-        p: 4,
+        p: 2,
         gap: 4,
       }}
     >
@@ -64,6 +64,7 @@ const InitialImageDisplay = () => {
       >
         <Text
           sx={{
+            ps: 2,
             fontWeight: 600,
             userSelect: 'none',
             color: 'base.700',
diff --git a/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/ProcessButtons.tsx b/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/ProcessButtons.tsx
index ebd60b14bd..41f1f3c918 100644
--- a/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/ProcessButtons.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/ProcessButtons.tsx
@@ -1,14 +1,14 @@
 import { Flex } from '@chakra-ui/react';
+import { memo } from 'react';
 import CancelButton from './CancelButton';
 import InvokeButton from './InvokeButton';
-import { memo } from 'react';
 
 /**
  * Buttons to start and cancel image generation.
  */
 const ProcessButtons = () => {
   return (
-    <Flex gap={2}>
+    <Flex layerStyle="first" sx={{ gap: 2, borderRadius: 'base', p: 2 }}>
       <InvokeButton />
       <CancelButton />
     </Flex>
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabParameters.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabParameters.tsx
index 5c2df5c1bb..4667ca63c0 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabParameters.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabParameters.tsx
@@ -2,17 +2,15 @@ import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/Para
 import ParamLoraCollapse from 'features/lora/components/ParamLoraCollapse';
 import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse';
 import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
-import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
+import { memo } from 'react';
 import ParamSDXLPromptArea from './ParamSDXLPromptArea';
 import ParamSDXLRefinerCollapse from './ParamSDXLRefinerCollapse';
 import SDXLImageToImageTabCoreParameters from './SDXLImageToImageTabCoreParameters';
-import { memo } from 'react';
 
 const SDXLImageToImageTabParameters = () => {
   return (
     <>
       <ParamSDXLPromptArea />
-      <ProcessButtons />
       <SDXLImageToImageTabCoreParameters />
       <ParamSDXLRefinerCollapse />
       <ParamControlNetCollapse />
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLTextToImageTabParameters.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLTextToImageTabParameters.tsx
index 46d8ad3558..084c12af61 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLTextToImageTabParameters.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLTextToImageTabParameters.tsx
@@ -2,17 +2,15 @@ import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/Para
 import ParamLoraCollapse from 'features/lora/components/ParamLoraCollapse';
 import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse';
 import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
-import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
 import TextToImageTabCoreParameters from 'features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters';
+import { memo } from 'react';
 import ParamSDXLPromptArea from './ParamSDXLPromptArea';
 import ParamSDXLRefinerCollapse from './ParamSDXLRefinerCollapse';
-import { memo } from 'react';
 
 const SDXLTextToImageTabParameters = () => {
   return (
     <>
       <ParamSDXLPromptArea />
-      <ProcessButtons />
       <TextToImageTabCoreParameters />
       <ParamSDXLRefinerCollapse />
       <ParamControlNetCollapse />
diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabParameters.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabParameters.tsx
index 74833ebd70..9b0dfd87c8 100644
--- a/invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabParameters.tsx
+++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabParameters.tsx
@@ -5,7 +5,6 @@ import ParamMaskAdjustmentCollapse from 'features/parameters/components/Paramete
 import ParamSeamPaintingCollapse from 'features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamPaintingCollapse';
 import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse';
 import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
-import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
 import ParamSDXLPromptArea from './ParamSDXLPromptArea';
 import ParamSDXLRefinerCollapse from './ParamSDXLRefinerCollapse';
 import SDXLUnifiedCanvasTabCoreParameters from './SDXLUnifiedCanvasTabCoreParameters';
@@ -14,7 +13,6 @@ export default function SDXLUnifiedCanvasTabParameters() {
   return (
     <>
       <ParamSDXLPromptArea />
-      <ProcessButtons />
       <SDXLUnifiedCanvasTabCoreParameters />
       <ParamSDXLRefinerCollapse />
       <ParamControlNetCollapse />
diff --git a/invokeai/frontend/web/src/features/ui/components/ParametersPanel.tsx b/invokeai/frontend/web/src/features/ui/components/ParametersPanel.tsx
index ffd0090863..d3543db7bf 100644
--- a/invokeai/frontend/web/src/features/ui/components/ParametersPanel.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/ParametersPanel.tsx
@@ -1,6 +1,7 @@
 import { Box, Flex } from '@chakra-ui/react';
 import { RootState } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
+import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
 import SDXLImageToImageTabParameters from 'features/sdxl/components/SDXLImageToImageTabParameters';
 import SDXLTextToImageTabParameters from 'features/sdxl/components/SDXLTextToImageTabParameters';
 import SDXLUnifiedCanvasTabParameters from 'features/sdxl/components/SDXLUnifiedCanvasTabParameters';
@@ -62,46 +63,66 @@ const ParametersPanelWrapper = memo((props: PropsWithChildren) => {
       sx={{
         w: 'full',
         h: 'full',
-        position: 'relative',
-        borderRadius: 'base',
+        flexDir: 'column',
+        gap: 2,
       }}
     >
-      <Box
+      <ProcessButtons />
+      <Flex
+        layerStyle="first"
         sx={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
+          w: 'full',
+          h: 'full',
+          position: 'relative',
+          borderRadius: 'base',
+          p: 2,
         }}
       >
-        <OverlayScrollbarsComponent
-          defer
-          style={{ height: '100%', width: '100%' }}
-          options={{
-            scrollbars: {
-              visibility: 'auto',
-              autoHide: 'scroll',
-              autoHideDelay: 800,
-              theme: 'os-theme-dark',
-            },
-            overflow: {
-              x: 'hidden',
-            },
+        <Flex
+          sx={{
+            w: 'full',
+            h: 'full',
+            position: 'relative',
           }}
         >
-          <Flex
+          <Box
             sx={{
-              gap: 2,
-              flexDirection: 'column',
-              h: 'full',
-              w: 'full',
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
             }}
           >
-            {props.children}
-          </Flex>
-        </OverlayScrollbarsComponent>
-      </Box>
+            <OverlayScrollbarsComponent
+              defer
+              style={{ height: '100%', width: '100%' }}
+              options={{
+                scrollbars: {
+                  visibility: 'auto',
+                  autoHide: 'scroll',
+                  autoHideDelay: 800,
+                  theme: 'os-theme-dark',
+                },
+                overflow: {
+                  x: 'hidden',
+                },
+              }}
+            >
+              <Flex
+                sx={{
+                  gap: 2,
+                  flexDirection: 'column',
+                  h: 'full',
+                  w: 'full',
+                }}
+              >
+                {props.children}
+              </Flex>
+            </OverlayScrollbarsComponent>
+          </Box>
+        </Flex>
+      </Flex>
     </Flex>
   );
 });
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabParameters.tsx
index 49b4392362..47b509eb36 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabParameters.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabParameters.tsx
@@ -3,24 +3,20 @@ import ParamLoraCollapse from 'features/lora/components/ParamLoraCollapse';
 import ParamAdvancedCollapse from 'features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse';
 import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse';
 import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
+import ParamPromptArea from 'features/parameters/components/Parameters/Prompt/ParamPromptArea';
 import ParamSeamlessCollapse from 'features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse';
 import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse';
-// import ParamVariationCollapse from 'features/parameters/components/Parameters/Variations/ParamVariationCollapse';
-import ParamPromptArea from 'features/parameters/components/Parameters/Prompt/ParamPromptArea';
-import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
-import ImageToImageTabCoreParameters from './ImageToImageTabCoreParameters';
 import { memo } from 'react';
+import ImageToImageTabCoreParameters from './ImageToImageTabCoreParameters';
 
 const ImageToImageTabParameters = () => {
   return (
     <>
       <ParamPromptArea />
-      <ProcessButtons />
       <ImageToImageTabCoreParameters />
       <ParamControlNetCollapse />
       <ParamLoraCollapse />
       <ParamDynamicPromptsCollapse />
-      {/* <ParamVariationCollapse /> */}
       <ParamNoiseCollapse />
       <ParamSymmetryCollapse />
       <ParamSeamlessCollapse />
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabMain.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabMain.tsx
index d1b70196c1..1e603b1ee6 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabMain.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabMain.tsx
@@ -10,7 +10,7 @@ const TextToImageTabMain = () => {
         position: 'relative',
         width: '100%',
         height: '100%',
-        p: 4,
+        p: 2,
         borderRadius: 'base',
       }}
     >
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabParameters.tsx
index d9b9e0bc39..559ef0849a 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabParameters.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabParameters.tsx
@@ -5,22 +5,18 @@ import ParamControlNetCollapse from 'features/parameters/components/Parameters/C
 import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
 import ParamSeamlessCollapse from 'features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse';
 import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse';
-// import ParamVariationCollapse from 'features/parameters/components/Parameters/Variations/ParamVariationCollapse';
-import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
+import { memo } from 'react';
 import ParamPromptArea from '../../../../parameters/components/Parameters/Prompt/ParamPromptArea';
 import TextToImageTabCoreParameters from './TextToImageTabCoreParameters';
-import { memo } from 'react';
 
 const TextToImageTabParameters = () => {
   return (
     <>
       <ParamPromptArea />
-      <ProcessButtons />
       <TextToImageTabCoreParameters />
       <ParamControlNetCollapse />
       <ParamLoraCollapse />
       <ParamDynamicPromptsCollapse />
-      {/* <ParamVariationCollapse /> */}
       <ParamNoiseCollapse />
       <ParamSymmetryCollapse />
       <ParamSeamlessCollapse />
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx
index dcf3500239..e042261a69 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx
@@ -4,24 +4,20 @@ import ParamAdvancedCollapse from 'features/parameters/components/Parameters/Adv
 import ParamInfillAndScalingCollapse from 'features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse';
 import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse';
 import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse';
-// import ParamVariationCollapse from 'features/parameters/components/Parameters/Variations/ParamVariationCollapse';
 import ParamMaskAdjustmentCollapse from 'features/parameters/components/Parameters/Canvas/MaskAdjustment/ParamMaskAdjustmentCollapse';
 import ParamSeamPaintingCollapse from 'features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamPaintingCollapse';
 import ParamPromptArea from 'features/parameters/components/Parameters/Prompt/ParamPromptArea';
-import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
-import UnifiedCanvasCoreParameters from './UnifiedCanvasCoreParameters';
 import { memo } from 'react';
+import UnifiedCanvasCoreParameters from './UnifiedCanvasCoreParameters';
 
 const UnifiedCanvasParameters = () => {
   return (
     <>
       <ParamPromptArea />
-      <ProcessButtons />
       <UnifiedCanvasCoreParameters />
       <ParamControlNetCollapse />
       <ParamLoraCollapse />
       <ParamDynamicPromptsCollapse />
-      {/* <ParamVariationCollapse /> */}
       <ParamSymmetryCollapse />
       <ParamMaskAdjustmentCollapse />
       <ParamInfillAndScalingCollapse />