diff --git a/invokeai/frontend/web/src/app/components/App.tsx b/invokeai/frontend/web/src/app/components/App.tsx
index f9e53f2ddd..f281b92bb7 100644
--- a/invokeai/frontend/web/src/app/components/App.tsx
+++ b/invokeai/frontend/web/src/app/components/App.tsx
@@ -75,23 +75,9 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage }: Props) => {
     >
       <Grid w="100vw" h="100vh" position="relative" overflow="hidden">
         <ImageUploader>
-          <Grid
-            sx={{
-              gap: 4,
-              p: 4,
-              gridAutoRows: 'min-content auto',
-              w: 'full',
-              h: 'full',
-            }}
-          >
+          <Grid gap={4} p={4} gridAutoRows="min-content auto" w="full" h="full">
             {headerComponent || <SiteHeader />}
-            <Flex
-              sx={{
-                gap: 4,
-                w: 'full',
-                h: 'full',
-              }}
-            >
+            <Flex gap={4} w="full" h="full">
               <InvokeTabs />
             </Flex>
           </Grid>
diff --git a/invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx b/invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx
index 9a8a177f58..b2fd529848 100644
--- a/invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx
+++ b/invokeai/frontend/web/src/app/components/AppErrorBoundaryFallback.tsx
@@ -38,41 +38,35 @@ const AppErrorBoundaryFallback = ({ error, resetErrorBoundary }: Props) => {
   return (
     <Flex
       layerStyle="body"
-      sx={{
-        w: '100vw',
-        h: '100vh',
-        alignItems: 'center',
-        justifyContent: 'center',
-        p: 4,
-      }}
+      w="100vw"
+      h="100vh"
+      alignItems="center"
+      justifyContent="center"
+      p={4}
     >
       <Flex
         layerStyle="first"
-        sx={{
-          flexDir: 'column',
-          borderRadius: 'base',
-          justifyContent: 'center',
-          gap: 8,
-          p: 16,
-        }}
+        flexDir="column"
+        borderRadius="base"
+        justifyContent="center"
+        gap={8}
+        p={16}
       >
         <Heading>{t('common.somethingWentWrong')}</Heading>
         <Flex
           layerStyle="second"
-          sx={{
-            px: 8,
-            py: 4,
-            borderRadius: 'base',
-            gap: 4,
-            justifyContent: 'space-between',
-            alignItems: 'center',
-          }}
+          px={8}
+          py={4}
+          gap={4}
+          borderRadius="base"
+          justifyContent="space-between"
+          alignItems="center"
         >
           <InvText fontWeight="semibold" color="error.400">
             {error.name}: {error.message}
           </InvText>
         </Flex>
-        <Flex sx={{ gap: 4 }}>
+        <Flex gap={4}>
           <InvButton
             leftIcon={<FaArrowRotateLeft />}
             onClick={resetErrorBoundary}
diff --git a/invokeai/frontend/web/src/common/components/IAIDndImage.tsx b/invokeai/frontend/web/src/common/components/IAIDndImage.tsx
index 65c4a0e3bf..8fd4d66935 100644
--- a/invokeai/frontend/web/src/common/components/IAIDndImage.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIDndImage.tsx
@@ -1,4 +1,8 @@
-import type { ChakraProps, FlexProps } from '@chakra-ui/react';
+import type {
+  ChakraProps,
+  FlexProps,
+  SystemStyleObject,
+} from '@chakra-ui/react';
 import { Flex, Icon, Image } from '@chakra-ui/react';
 import {
   IAILoadingImageFallback,
@@ -17,7 +21,7 @@ import type {
   ReactNode,
   SyntheticEvent,
 } from 'react';
-import { memo, useCallback, useState } from 'react';
+import { memo, useCallback, useMemo, useState } from 'react';
 import { FaImage, FaUpload } from 'react-icons/fa';
 import type { ImageDTO, PostUploadAction } from 'services/api/types';
 
@@ -25,14 +29,7 @@ import IAIDraggable from './IAIDraggable';
 import IAIDroppable from './IAIDroppable';
 import SelectionOverlay from './SelectionOverlay';
 
-const defaultUploadElement = (
-  <Icon
-    as={FaUpload}
-    sx={{
-      boxSize: 16,
-    }}
-  />
-);
+const defaultUploadElement = <Icon as={FaUpload} boxSize={16} />;
 
 const defaultNoContentFallback = <IAINoContentFallback icon={FaImage} />;
 
@@ -115,16 +112,29 @@ const IAIDndImage = (props: IAIDndImageProps) => {
     isDisabled: isUploadDisabled,
   });
 
-  const uploadButtonStyles = isUploadDisabled
-    ? {}
-    : {
+  const uploadButtonStyles = useMemo(() => {
+    const styles: SystemStyleObject = {
+      minH: minSize,
+      w: 'full',
+      h: 'full',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: 'base',
+      transitionProperty: 'common',
+      transitionDuration: '0.1s',
+      color: 'base.500',
+    };
+    if (!isUploadDisabled) {
+      Object.assign(styles, {
         cursor: 'pointer',
         bg: 'base.700',
         _hover: {
           bg: 'base.650',
           color: 'base.300',
         },
-      };
+      });
+    }
+  }, [isUploadDisabled, minSize]);
 
   return (
     <ImageContextMenu imageDTO={imageDTO}>
@@ -133,27 +143,23 @@ const IAIDndImage = (props: IAIDndImageProps) => {
           ref={ref}
           onMouseOver={handleMouseOver}
           onMouseOut={handleMouseOut}
-          sx={{
-            width: 'full',
-            height: 'full',
-            alignItems: 'center',
-            justifyContent: 'center',
-            position: 'relative',
-            minW: minSize ? minSize : undefined,
-            minH: minSize ? minSize : undefined,
-            userSelect: 'none',
-            cursor: isDragDisabled || !imageDTO ? 'default' : 'pointer',
-          }}
+          width="full"
+          height="full"
+          alignItems="center"
+          justifyContent="center"
+          position="relative"
+          minW={minSize ? minSize : undefined}
+          minH={minSize ? minSize : undefined}
+          userSelect="none"
+          cursor={isDragDisabled || !imageDTO ? 'default' : 'pointer'}
         >
           {imageDTO && (
             <Flex
-              sx={{
-                w: 'full',
-                h: 'full',
-                position: fitContainer ? 'absolute' : 'relative',
-                alignItems: 'center',
-                justifyContent: 'center',
-              }}
+              w="full"
+              h="full"
+              position={fitContainer ? 'absolute' : 'relative'}
+              alignItems="center"
+              justifyContent="center"
             >
               <Image
                 src={thumbnail ? imageDTO.thumbnail_url : imageDTO.image_url}
@@ -168,14 +174,12 @@ const IAIDndImage = (props: IAIDndImageProps) => {
                 }
                 onError={onError}
                 draggable={false}
-                sx={{
-                  w: imageDTO.width,
-                  objectFit: 'contain',
-                  maxW: 'full',
-                  maxH: 'full',
-                  borderRadius: 'base',
-                  ...imageSx,
-                }}
+                w={imageDTO.width}
+                objectFit="contain"
+                maxW="full"
+                maxH="full"
+                borderRadius="base"
+                sx={imageSx}
                 data-testid={dataTestId}
               />
               {withMetadataOverlay && (
@@ -189,21 +193,7 @@ const IAIDndImage = (props: IAIDndImageProps) => {
           )}
           {!imageDTO && !isUploadDisabled && (
             <>
-              <Flex
-                sx={{
-                  minH: minSize,
-                  w: 'full',
-                  h: 'full',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  borderRadius: 'base',
-                  transitionProperty: 'common',
-                  transitionDuration: '0.1s',
-                  color: 'base.500',
-                  ...uploadButtonStyles,
-                }}
-                {...getUploadButtonProps()}
-              >
+              <Flex sx={uploadButtonStyles} {...getUploadButtonProps()}>
                 <input {...getUploadInputProps()} />
                 {uploadElement}
               </Flex>
diff --git a/invokeai/frontend/web/src/common/components/IAIDndImageIcon.tsx b/invokeai/frontend/web/src/common/components/IAIDndImageIcon.tsx
index 9975917203..ce0fecb20c 100644
--- a/invokeai/frontend/web/src/common/components/IAIDndImageIcon.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIDndImageIcon.tsx
@@ -1,6 +1,6 @@
 import type { SystemStyleObject } from '@chakra-ui/react';
 import type { MouseEvent, ReactElement } from 'react';
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 
 import { InvIconButton } from './InvIconButton/InvIconButton';
 
@@ -14,6 +14,25 @@ type Props = {
 const IAIDndImageIcon = (props: Props) => {
   const { onClick, tooltip, icon, styleOverrides } = props;
 
+  const sx = useMemo(
+    () => ({
+      position: 'absolute',
+      top: 1,
+      insetInlineEnd: 1,
+      p: 0,
+      minW: 0,
+      svg: {
+        transitionProperty: 'common',
+        transitionDuration: 'normal',
+        fill: 'base.100',
+        _hover: { fill: 'base.50' },
+        filter: 'drop-shadow(0px 0px 0.1rem var(--invokeai-colors-base-800))',
+      },
+      ...styleOverrides,
+    }),
+    [styleOverrides]
+  );
+
   return (
     <InvIconButton
       onClick={onClick}
@@ -22,21 +41,7 @@ const IAIDndImageIcon = (props: Props) => {
       icon={icon}
       size="sm"
       variant="link"
-      sx={{
-        position: 'absolute',
-        top: 1,
-        insetInlineEnd: 1,
-        p: 0,
-        minW: 0,
-        svg: {
-          transitionProperty: 'common',
-          transitionDuration: 'normal',
-          fill: 'base.100',
-          _hover: { fill: 'base.50' },
-          filter: 'drop-shadow(0px 0px 0.1rem var(--invokeai-colors-base-800))',
-        },
-        ...styleOverrides,
-      }}
+      sx={sx}
       data-testid={tooltip}
     />
   );
diff --git a/invokeai/frontend/web/src/common/components/IAIDropOverlay.tsx b/invokeai/frontend/web/src/common/components/IAIDropOverlay.tsx
index 83f4e8858c..8fa305323b 100644
--- a/invokeai/frontend/web/src/common/components/IAIDropOverlay.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIDropOverlay.tsx
@@ -27,59 +27,45 @@ export const IAIDropOverlay = (props: Props) => {
         transition: { duration: 0.1 },
       }}
     >
-      <Flex
-        sx={{
-          position: 'absolute',
-          top: 0,
-          insetInlineStart: 0,
-          w: 'full',
-          h: 'full',
-        }}
-      >
+      <Flex position="absolute" top={0} insetInlineStart={0} w="full" h="full">
         <Flex
-          sx={{
-            position: 'absolute',
-            top: 0,
-            insetInlineStart: 0,
-            w: 'full',
-            h: 'full',
-            bg: 'base.900',
-            opacity: 0.7,
-            borderRadius: 'base',
-            alignItems: 'center',
-            justifyContent: 'center',
-            transitionProperty: 'common',
-            transitionDuration: '0.1s',
-          }}
+          position="absolute"
+          top={0}
+          insetInlineStart={0}
+          w="full"
+          h="full"
+          bg="base.900"
+          opacity={0.7}
+          borderRadius="base"
+          alignItems="center"
+          justifyContent="center"
+          transitionProperty="common"
+          transitionDuration="0.1s"
         />
 
         <Flex
-          sx={{
-            position: 'absolute',
-            top: 0.5,
-            insetInlineStart: 0.5,
-            insetInlineEnd: 0.5,
-            bottom: 0.5,
-            opacity: 1,
-            borderWidth: 2,
-            borderColor: isOver ? 'base.50' : 'base.300',
-            borderRadius: 'lg',
-            borderStyle: 'dashed',
-            transitionProperty: 'common',
-            transitionDuration: '0.1s',
-            alignItems: 'center',
-            justifyContent: 'center',
-          }}
+          position="absolute"
+          top={0.5}
+          insetInlineStart={0.5}
+          insetInlineEnd={0.5}
+          bottom={0.5}
+          opacity={1}
+          borderWidth={2}
+          borderColor={isOver ? 'base.50' : 'base.300'}
+          borderRadius="lg"
+          borderStyle="dashed"
+          transitionProperty="common"
+          transitionDuration="0.1s"
+          alignItems="center"
+          justifyContent="center"
         >
           <Box
-            sx={{
-              fontSize: '2xl',
-              fontWeight: 'semibold',
-              transform: isOver ? 'scale(1.1)' : 'scale(1)',
-              color: isOver ? 'base.50' : 'base.300',
-              transitionProperty: 'common',
-              transitionDuration: '0.1s',
-            }}
+            fontSize="2xl"
+            fontWeight="semibold"
+            transform={isOver ? 'scale(1.1)' : 'scale(1)'}
+            color={isOver ? 'base.50' : 'base.300'}
+            transitionProperty="common"
+            transitionDuration="0.1s"
           >
             {label}
           </Box>
diff --git a/invokeai/frontend/web/src/common/components/IAIFillSkeleton.tsx b/invokeai/frontend/web/src/common/components/IAIFillSkeleton.tsx
index 8081714432..52d57398fe 100644
--- a/invokeai/frontend/web/src/common/components/IAIFillSkeleton.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIFillSkeleton.tsx
@@ -1,28 +1,27 @@
+import type { SystemStyleObject } from '@chakra-ui/react';
 import { Box, Skeleton } from '@chakra-ui/react';
 import { memo } from 'react';
 
+const skeletonStyles: SystemStyleObject = {
+  position: 'relative',
+  height: 'full',
+  width: 'full',
+  '::before': {
+    content: "''",
+    display: 'block',
+    pt: '100%',
+  },
+};
+
 const IAIFillSkeleton = () => {
   return (
-    <Skeleton
-      sx={{
-        position: 'relative',
-        height: 'full',
-        width: 'full',
-        '::before': {
-          content: "''",
-          display: 'block',
-          pt: '100%',
-        },
-      }}
-    >
+    <Skeleton sx={skeletonStyles}>
       <Box
-        sx={{
-          position: 'absolute',
-          top: 0,
-          insetInlineStart: 0,
-          height: 'full',
-          width: 'full',
-        }}
+        position="absolute"
+        top={0}
+        insetInlineStart={0}
+        height="full"
+        width="full"
       />
     </Skeleton>
   );
diff --git a/invokeai/frontend/web/src/common/components/IAIImageFallback.tsx b/invokeai/frontend/web/src/common/components/IAIImageFallback.tsx
index 83f3d79f4a..1c7775eb57 100644
--- a/invokeai/frontend/web/src/common/components/IAIImageFallback.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIImageFallback.tsx
@@ -1,5 +1,6 @@
 import type { As, FlexProps, StyleProps } from '@chakra-ui/react';
 import { Flex, Icon, Skeleton, Spinner } from '@chakra-ui/react';
+import { useMemo } from 'react';
 import { FaImage } from 'react-icons/fa';
 import type { ImageDTO } from 'services/api/types';
 
@@ -11,27 +12,23 @@ export const IAILoadingImageFallback = (props: Props) => {
   if (props.image) {
     return (
       <Skeleton
-        sx={{
-          w: `${props.image.width}px`,
-          h: 'auto',
-          objectFit: 'contain',
-          aspectRatio: `${props.image.width}/${props.image.height}`,
-        }}
+        w={`${props.image.width}px`}
+        h="auto"
+        objectFit="contain"
+        aspectRatio={`${props.image.width}/${props.image.height}`}
       />
     );
   }
 
   return (
     <Flex
-      sx={{
-        opacity: 0.7,
-        w: 'full',
-        h: 'full',
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderRadius: 'base',
-        bg: 'base.900',
-      }}
+      opacity={0.7}
+      w="full"
+      h="full"
+      alignItems="center"
+      justifyContent="center"
+      borderRadius="base"
+      bg="base.900"
     >
       <Spinner size="xl" />
     </Flex>
@@ -47,23 +44,25 @@ type IAINoImageFallbackProps = FlexProps & {
 export const IAINoContentFallback = (props: IAINoImageFallbackProps) => {
   const { icon = FaImage, boxSize = 16, sx, ...rest } = props;
 
+  const styles = useMemo(
+    () => ({
+      w: 'full',
+      h: 'full',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: 'base',
+      flexDir: 'column',
+      gap: 2,
+      userSelect: 'none',
+      opacity: 0.7,
+      color: 'base.500',
+      ...sx,
+    }),
+    [sx]
+  );
+
   return (
-    <Flex
-      sx={{
-        w: 'full',
-        h: 'full',
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderRadius: 'base',
-        flexDir: 'column',
-        gap: 2,
-        userSelect: 'none',
-        opacity: 0.7,
-        color: 'base.500',
-        ...sx,
-      }}
-      {...rest}
-    >
+    <Flex sx={styles} {...rest}>
       {icon && <Icon as={icon} boxSize={boxSize} opacity={0.7} />}
       {props.label && <InvText textAlign="center">{props.label}</InvText>}
     </Flex>
@@ -78,24 +77,25 @@ export const IAINoContentFallbackWithSpinner = (
   props: IAINoImageFallbackWithSpinnerProps
 ) => {
   const { sx, ...rest } = props;
+  const styles = useMemo(
+    () => ({
+      w: 'full',
+      h: 'full',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: 'base',
+      flexDir: 'column',
+      gap: 2,
+      userSelect: 'none',
+      opacity: 0.7,
+      color: 'base.500',
+      ...sx,
+    }),
+    [sx]
+  );
 
   return (
-    <Flex
-      sx={{
-        w: 'full',
-        h: 'full',
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderRadius: 'base',
-        flexDir: 'column',
-        gap: 2,
-        userSelect: 'none',
-        opacity: 0.7,
-        color: 'base.500',
-        ...sx,
-      }}
-      {...rest}
-    >
+    <Flex sx={styles} {...rest}>
       <Spinner size="xl" />
       {props.label && <InvText textAlign="center">{props.label}</InvText>}
     </Flex>
diff --git a/invokeai/frontend/web/src/common/components/IAIInformationalPopover/IAIInformationalPopover.tsx b/invokeai/frontend/web/src/common/components/IAIInformationalPopover/IAIInformationalPopover.tsx
index ed9ff41eb2..d57838678c 100644
--- a/invokeai/frontend/web/src/common/components/IAIInformationalPopover/IAIInformationalPopover.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIInformationalPopover/IAIInformationalPopover.tsx
@@ -103,13 +103,7 @@ const PopoverContent = ({ data, feature }: PopoverContentProps) => {
     <InvPopoverContent w={96}>
       <InvPopoverCloseButton />
       <InvPopoverBody>
-        <Flex
-          sx={{
-            gap: 2,
-            flexDirection: 'column',
-            alignItems: 'flex-start',
-          }}
-        >
+        <Flex gap={2} flexDirection="column" alignItems="flex-start">
           {heading && (
             <>
               <InvHeading size="sm">{heading}</InvHeading>
@@ -119,12 +113,10 @@ const PopoverContent = ({ data, feature }: PopoverContentProps) => {
           {data?.image && (
             <>
               <Image
-                sx={{
-                  objectFit: 'contain',
-                  maxW: '60%',
-                  maxH: '60%',
-                  backgroundColor: 'white',
-                }}
+                objectFit="contain"
+                maxW="60%"
+                maxH="60%"
+                backgroundColor="white"
                 src={data.image}
                 alt="Optional Image"
               />
diff --git a/invokeai/frontend/web/src/common/components/ImageMetadataOverlay.tsx b/invokeai/frontend/web/src/common/components/ImageMetadataOverlay.tsx
index 59291f5e1f..08226d6d48 100644
--- a/invokeai/frontend/web/src/common/components/ImageMetadataOverlay.tsx
+++ b/invokeai/frontend/web/src/common/components/ImageMetadataOverlay.tsx
@@ -9,16 +9,14 @@ type ImageMetadataOverlayProps = {
 const ImageMetadataOverlay = ({ imageDTO }: ImageMetadataOverlayProps) => {
   return (
     <Flex
-      sx={{
-        pointerEvents: 'none',
-        flexDirection: 'column',
-        position: 'absolute',
-        top: 0,
-        insetInlineStart: 0,
-        p: 2,
-        alignItems: 'flex-start',
-        gap: 2,
-      }}
+      pointerEvents="none"
+      flexDirection="column"
+      position="absolute"
+      top={0}
+      insetInlineStart={0}
+      p={2}
+      alignItems="flex-start"
+      gap={2}
     >
       <Badge variant="solid" colorScheme="base">
         {imageDTO.width} × {imageDTO.height}
diff --git a/invokeai/frontend/web/src/common/components/ImageUploadOverlay.tsx b/invokeai/frontend/web/src/common/components/ImageUploadOverlay.tsx
index 630b733013..5af456a5a2 100644
--- a/invokeai/frontend/web/src/common/components/ImageUploadOverlay.tsx
+++ b/invokeai/frontend/web/src/common/components/ImageUploadOverlay.tsx
@@ -23,57 +23,49 @@ const ImageUploadOverlay = (props: ImageUploadOverlayProps) => {
 
   return (
     <Box
-      sx={{
-        position: 'absolute',
-        top: 0,
-        insetInlineStart: 0,
-        width: '100vw',
-        height: '100vh',
-        zIndex: 999,
-        backdropFilter: 'blur(20px)',
-      }}
+      position="absolute"
+      top={0}
+      insetInlineStart={0}
+      width="100vw"
+      height="100vh"
+      zIndex={999}
+      backdropFilter="blur(20px)"
     >
       <Flex
-        sx={{
-          position: 'absolute',
-          top: 0,
-          insetInlineStart: 0,
-          w: 'full',
-          h: 'full',
-          bg: 'base.900',
-          opacity: 0.7,
-          alignItems: 'center',
-          justifyContent: 'center',
-          transitionProperty: 'common',
-          transitionDuration: '0.1s',
-        }}
+        position="absolute"
+        top={0}
+        insetInlineStart={0}
+        w="full"
+        h="full"
+        bg="base.900"
+        opacity={0.7}
+        alignItems="center"
+        justifyContent="center"
+        transitionProperty="common"
+        transitionDuration="0.1s"
       />
       <Flex
-        sx={{
-          position: 'absolute',
-          top: 0,
-          insetInlineStart: 0,
-          width: 'full',
-          height: 'full',
-          alignItems: 'center',
-          justifyContent: 'center',
-          p: 4,
-        }}
+        position="absolute"
+        top={0}
+        insetInlineStart={0}
+        width="full"
+        height="full"
+        alignItems="center"
+        justifyContent="center"
+        p={4}
       >
         <Flex
-          sx={{
-            width: 'full',
-            height: 'full',
-            alignItems: 'center',
-            justifyContent: 'center',
-            flexDir: 'column',
-            gap: 4,
-            borderWidth: 3,
-            borderRadius: 'xl',
-            borderStyle: 'dashed',
-            color: 'base.100',
-            borderColor: 'base.200',
-          }}
+          width="full"
+          height="full"
+          alignItems="center"
+          justifyContent="center"
+          flexDir="column"
+          gap={4}
+          borderWidth={3}
+          borderRadius="xl"
+          borderStyle="dashed"
+          color="base.100"
+          borderColor="base.200"
         >
           {isDragAccept ? (
             <Heading size="lg">{t('gallery.dropToUpload')}</Heading>
diff --git a/invokeai/frontend/web/src/common/components/InvEditable/theme.ts b/invokeai/frontend/web/src/common/components/InvEditable/theme.ts
index dc46be44ff..15ace5ccbf 100644
--- a/invokeai/frontend/web/src/common/components/InvEditable/theme.ts
+++ b/invokeai/frontend/web/src/common/components/InvEditable/theme.ts
@@ -20,7 +20,7 @@ const baseStyleInput = defineStyle(() => ({
   transitionProperty: 'common',
   transitionDuration: 'normal',
   width: 'full',
-  _focusVisible: { boxShadow: 'outline' },
+  _focusVisible: { boxShadow: 'none' },
   _placeholder: { opacity: 0.6 },
   '::selection': {
     color: 'blue.50',
diff --git a/invokeai/frontend/web/src/common/components/NodeSelectionOverlay.tsx b/invokeai/frontend/web/src/common/components/NodeSelectionOverlay.tsx
index bb3e9a6db5..58f17a2255 100644
--- a/invokeai/frontend/web/src/common/components/NodeSelectionOverlay.tsx
+++ b/invokeai/frontend/web/src/common/components/NodeSelectionOverlay.tsx
@@ -21,19 +21,17 @@ const SelectionOverlay = ({ isSelected, isHovered }: Props) => {
   return (
     <Box
       className="selection-box"
-      sx={{
-        position: 'absolute',
-        top: 0,
-        insetInlineEnd: 0,
-        bottom: 0,
-        insetInlineStart: 0,
-        borderRadius: 'base',
-        opacity: isSelected || isHovered ? 1 : 0.5,
-        transitionProperty: 'common',
-        transitionDuration: '0.1s',
-        pointerEvents: 'none',
-        shadow,
-      }}
+      position="absolute"
+      top={0}
+      insetInlineEnd={0}
+      bottom={0}
+      insetInlineStart={0}
+      borderRadius="base"
+      opacity={isSelected || isHovered ? 1 : 0.5}
+      transitionProperty="common"
+      transitionDuration="0.1s"
+      pointerEvents="none"
+      shadow={shadow}
     />
   );
 };
diff --git a/invokeai/frontend/web/src/common/components/OverlayScrollbars/ScrollableContent.tsx b/invokeai/frontend/web/src/common/components/OverlayScrollbars/ScrollableContent.tsx
index 1b18634d0d..12e83c43c5 100644
--- a/invokeai/frontend/web/src/common/components/OverlayScrollbars/ScrollableContent.tsx
+++ b/invokeai/frontend/web/src/common/components/OverlayScrollbars/ScrollableContent.tsx
@@ -1,46 +1,24 @@
 import type { StyleProps } from '@chakra-ui/react';
 import { Box, Flex } from '@chakra-ui/react';
+import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
-import type { PropsWithChildren } from 'react';
+import type { CSSProperties, PropsWithChildren } from 'react';
 import { memo } from 'react';
 
 type Props = PropsWithChildren & {
   maxHeight?: StyleProps['maxHeight'];
 };
 
+const styles: CSSProperties = { height: '100%', width: '100%' };
+
 const ScrollableContent = ({ children, maxHeight }: Props) => {
   return (
-    <Flex
-      sx={{
-        w: 'full',
-        h: 'full',
-        maxHeight,
-        position: 'relative',
-      }}
-    >
-      <Box
-        sx={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-        }}
-      >
+    <Flex w="full" h="full" maxHeight={maxHeight} position="relative">
+      <Box position="absolute" top={0} left={0} right={0} bottom={0}>
         <OverlayScrollbarsComponent
           defer
-          style={{ height: '100%', width: '100%' }}
-          options={{
-            scrollbars: {
-              visibility: 'auto',
-              autoHide: 'scroll',
-              autoHideDelay: 1300,
-              theme: 'os-theme-dark',
-            },
-            overflow: {
-              x: 'hidden',
-            },
-          }}
+          style={styles}
+          options={overlayScrollbarsParams.options}
         >
           {children}
         </OverlayScrollbarsComponent>
diff --git a/invokeai/frontend/web/src/common/components/SelectionOverlay.tsx b/invokeai/frontend/web/src/common/components/SelectionOverlay.tsx
index 30aabdd57c..2143b1615c 100644
--- a/invokeai/frontend/web/src/common/components/SelectionOverlay.tsx
+++ b/invokeai/frontend/web/src/common/components/SelectionOverlay.tsx
@@ -1,33 +1,37 @@
 import { Box } from '@chakra-ui/react';
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 
 type Props = {
   isSelected: boolean;
   isHovered: boolean;
 };
 const SelectionOverlay = ({ isSelected, isHovered }: Props) => {
+  const shadow = useMemo(() => {
+    if (isSelected && isHovered) {
+      return 'hoverSelected';
+    }
+    if (isSelected && !isHovered) {
+      return 'selected';
+    }
+    if (!isSelected && isHovered) {
+      return 'hoverUnselected';
+    }
+    return undefined;
+  }, [isHovered, isSelected]);
   return (
     <Box
       className="selection-box"
-      sx={{
-        position: 'absolute',
-        top: 0,
-        insetInlineEnd: 0,
-        bottom: 0,
-        insetInlineStart: 0,
-        borderRadius: 'base',
-        opacity: isSelected ? 1 : 0.7,
-        transitionProperty: 'common',
-        transitionDuration: '0.1s',
-        pointerEvents: 'none',
-        shadow: isSelected
-          ? isHovered
-            ? 'hoverSelected'
-            : 'selected'
-          : isHovered
-            ? 'hoverUnselected'
-            : undefined,
-      }}
+      position="absolute"
+      top={0}
+      insetInlineEnd={0}
+      bottom={0}
+      insetInlineStart={0}
+      borderRadius="base"
+      opacity={isSelected ? 1 : 0.7}
+      transitionProperty="common"
+      transitionDuration="0.1s"
+      pointerEvents="none"
+      shadow={shadow}
     />
   );
 };
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvas.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvas.tsx
index f62f0836c2..1f6bf151a6 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvas.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvas.tsx
@@ -18,7 +18,7 @@ import {
 import type Konva from 'konva';
 import type { KonvaEventObject } from 'konva/lib/Node';
 import type { Vector2d } from 'konva/lib/types';
-import { memo, useCallback, useEffect, useRef } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import { Layer, Stage } from 'react-konva';
 
 import IAICanvasBoundingBoxOverlay from './IAICanvasBoundingBoxOverlay';
@@ -163,35 +163,32 @@ const IAICanvas = () => {
     };
   }, [dispatch]);
 
+  const stageStyles = useMemo(
+    () => ({
+      outline: 'none',
+      overflow: 'hidden',
+      cursor: stageCursor ? stageCursor : undefined,
+      canvas: {
+        outline: 'none',
+      },
+    }),
+    [stageCursor]
+  );
+
   return (
     <Flex
       id="canvas-container"
       ref={containerRef}
-      sx={{
-        position: 'relative',
-        height: '100%',
-        width: '100%',
-        borderRadius: 'base',
-      }}
+      position="relative"
+      height="100%"
+      width="100%"
+      borderRadius="base"
     >
-      <Box
-        sx={{
-          position: 'absolute',
-          // top: 0,
-          // insetInlineStart: 0,
-        }}
-      >
+      <Box position="absolute">
         <ChakraStage
           tabIndex={-1}
           ref={canvasStageRefCallback}
-          sx={{
-            outline: 'none',
-            overflow: 'hidden',
-            cursor: stageCursor ? stageCursor : undefined,
-            canvas: {
-              outline: 'none',
-            },
-          }}
+          sx={stageStyles}
           x={stageCoordinates.x}
           y={stageCoordinates.y}
           width={stageDimensions.width}
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText.tsx
index e0c44d64f1..34604c806d 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText.tsx
@@ -83,56 +83,38 @@ const IAICanvasStatusText = () => {
 
   return (
     <Flex
-      sx={{
-        flexDirection: 'column',
-        position: 'absolute',
-        top: 0,
-        insetInlineStart: 0,
-        opacity: 0.65,
-        display: 'flex',
-        fontSize: 'sm',
-        padding: 1,
-        px: 2,
-        minWidth: 48,
-        margin: 1,
-        borderRadius: 'base',
-        pointerEvents: 'none',
-        bg: 'base.800',
-      }}
+      flexDirection="column"
+      position="absolute"
+      top={0}
+      insetInlineStart={0}
+      opacity={0.65}
+      display="flex"
+      fontSize="sm"
+      padding={1}
+      px={2}
+      minWidth={48}
+      margin={1}
+      borderRadius="base"
+      pointerEvents="none"
+      bg="base.800"
     >
       <GenerationModeStatusText />
-      <Box
-        style={{
-          color: activeLayerColor,
-        }}
-      >{`${t('unifiedCanvas.activeLayer')}: ${t(
+      <Box color={activeLayerColor}>{`${t('unifiedCanvas.activeLayer')}: ${t(
         `unifiedCanvas.${layer}`
       )}`}</Box>
       <Box>{`${t('unifiedCanvas.canvasScale')}: ${canvasScaleString}%`}</Box>
       {shouldPreserveMaskedArea && (
-        <Box
-          style={{
-            color: warningColor,
-          }}
-        >
+        <Box color={warningColor}>
           {t('unifiedCanvas.preserveMaskedArea')}: {t('common.on')}
         </Box>
       )}
       {shouldShowBoundingBox && (
-        <Box
-          style={{
-            color: boundingBoxColor,
-          }}
-        >{`${t(
+        <Box color={boundingBoxColor}>{`${t(
           'unifiedCanvas.boundingBox'
         )}: ${boundingBoxDimensionsString}`}</Box>
       )}
       {shouldShowScaledBoundingBox && (
-        <Box
-          style={{
-            color: boundingBoxColor,
-          }}
-        >{`${t(
+        <Box color={boundingBoxColor}>{`${t(
           'unifiedCanvas.scaledBoundingBox'
         )}: ${scaledBoundingBoxDimensionsString}`}</Box>
       )}
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx
index d96b434922..62f302ee32 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx
@@ -150,7 +150,7 @@ const IAICanvasMaskOptions = () => {
                 onChange={handleChangePreserveMaskedArea}
               />
             </InvControl>
-            <Box sx={{ paddingTop: 2, paddingBottom: 2 }}>
+            <Box pt={2} pb={2}>
               <IAIColorPicker
                 color={maskColor}
                 onChange={handleChangeMaskColor}
diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx
index f5a3e41a0e..3279f62325 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx
@@ -272,13 +272,7 @@ const IAICanvasToolChooserOptions = () => {
                   />
                 </InvControl>
               </Flex>
-              <Box
-                sx={{
-                  width: '100%',
-                  paddingTop: 2,
-                  paddingBottom: 2,
-                }}
-              >
+              <Box w="full" pt={2} pb={2}>
                 <IAIColorPicker
                   withNumberInput={true}
                   color={brushColor}
diff --git a/invokeai/frontend/web/src/features/changeBoardModal/components/ChangeBoardModal.tsx b/invokeai/frontend/web/src/features/changeBoardModal/components/ChangeBoardModal.tsx
index ededec1ec2..899ed0deb7 100644
--- a/invokeai/frontend/web/src/features/changeBoardModal/components/ChangeBoardModal.tsx
+++ b/invokeai/frontend/web/src/features/changeBoardModal/components/ChangeBoardModal.tsx
@@ -101,7 +101,7 @@ const ChangeBoardModal = () => {
       acceptButtonText={t('boards.move')}
       cancelButtonText={t('boards.cancel')}
     >
-      <Flex sx={{ flexDir: 'column', gap: 4 }}>
+      <Flex flexDir="column" gap={4}>
         <InvText>
           {t('boards.movingImagesToBoard', {
             count: imagesToChange.length,
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx
index f61ff6f567..cc5379b50d 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx
@@ -65,18 +65,14 @@ const ControlAdapterConfig = (props: { id: string; number: number }) => {
 
   return (
     <Flex
-      sx={{
-        flexDir: 'column',
-        gap: 3,
-        p: 2,
-        borderRadius: 'base',
-        position: 'relative',
-        bg: 'base.750',
-      }}
+      flexDir="column"
+      gap={3}
+      p={2}
+      borderRadius="base"
+      position="relative"
+      bg="base.750"
     >
-      <Flex
-        sx={{ gap: 2, alignItems: 'center', justifyContent: 'space-between' }}
-      >
+      <Flex gap={2} alignItems="center" justifyContent="space-between">
         <InvControl label={t(`controlnet.${controlAdapterType}`, { number })}>
           <InvSwitch
             aria-label={t('controlnet.toggleControlNet')}
@@ -85,14 +81,12 @@ const ControlAdapterConfig = (props: { id: string; number: number }) => {
           />
         </InvControl>
       </Flex>
-      <Flex sx={{ gap: 2, alignItems: 'center' }}>
+      <Flex gap={2} alignItems="center">
         <Box
-          sx={{
-            w: 'full',
-            minW: 0,
-            transitionProperty: 'common',
-            transitionDuration: '0.1s',
-          }}
+          minW={0}
+          w="full"
+          transitionProperty="common"
+          transitionDuration="0.1s"
         >
           <ParamControlAdapterModel id={id} />
         </Box>
@@ -128,57 +122,46 @@ const ControlAdapterConfig = (props: { id: string; number: number }) => {
           }
           onClick={toggleIsExpanded}
           variant="ghost"
-          sx={{
-            _hover: {
-              bg: 'none',
-            },
-          }}
           icon={
             <ChevronUpIcon
-              sx={{
-                boxSize: 4,
-                color: 'base.300',
-                transform: isExpanded ? 'rotate(0deg)' : 'rotate(180deg)',
-                transitionProperty: 'common',
-                transitionDuration: 'normal',
-              }}
+              boxSize={4}
+              color="base.300"
+              transform={isExpanded ? 'rotate(0deg)' : 'rotate(180deg)'}
+              transitionProperty="common"
+              transitionDuration="normal"
             />
           }
         />
       </Flex>
 
-      <Flex sx={{ w: 'full', flexDirection: 'column', gap: 3 }}>
-        <Flex sx={{ gap: 4, w: 'full', alignItems: 'center' }}>
+      <Flex w="full" flexDir="column" gap={3}>
+        <Flex gap={4} w="full" alignItems="center">
           <Flex
-            sx={{
-              flexDir: 'column',
-              gap: 3,
-              h: 28,
-              w: 'full',
-              paddingInlineStart: 1,
-              paddingInlineEnd: isExpanded ? 1 : 0,
-              pb: 2,
-              justifyContent: 'space-between',
-            }}
+            flexDir="column"
+            gap={3}
+            h={28}
+            w="full"
+            paddingInlineStart={1}
+            paddingInlineEnd={isExpanded ? 1 : 0}
+            pb={2}
+            justifyContent="space-between"
           >
             <ParamControlAdapterWeight id={id} />
             <ParamControlAdapterBeginEnd id={id} />
           </Flex>
           {!isExpanded && (
             <Flex
-              sx={{
-                alignItems: 'center',
-                justifyContent: 'center',
-                h: 28,
-                w: 28,
-                aspectRatio: '1/1',
-              }}
+              alignItems="center"
+              justifyContent="center"
+              h={28}
+              w={28}
+              aspectRatio="1/1"
             >
               <ControlAdapterImagePreview id={id} isSmall />
             </Flex>
           )}
         </Flex>
-        <Flex sx={{ gap: 2 }}>
+        <Flex gap={2}>
           <ParamControlAdapterControlMode id={id} />
           <ParamControlAdapterResizeMode id={id} />
         </Flex>
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterImagePreview.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterImagePreview.tsx
index 67034399ba..f6bcf6d587 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterImagePreview.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterImagePreview.tsx
@@ -177,13 +177,11 @@ const ControlAdapterImagePreview = ({ isSmall, id }: Props) => {
     <Flex
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
-      sx={{
-        position: 'relative',
-        w: 'full',
-        h: isSmall ? 28 : 366, // magic no touch
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
+      position="relative"
+      w="full"
+      h={isSmall ? 28 : 366} // magic no touch
+      alignItems="center"
+      justifyContent="center"
     >
       <IAIDndImage
         draggableData={draggableData}
@@ -194,17 +192,15 @@ const ControlAdapterImagePreview = ({ isSmall, id }: Props) => {
       />
 
       <Box
-        sx={{
-          position: 'absolute',
-          top: 0,
-          insetInlineStart: 0,
-          w: 'full',
-          h: 'full',
-          opacity: shouldShowProcessedImage ? 1 : 0,
-          transitionProperty: 'common',
-          transitionDuration: 'normal',
-          pointerEvents: 'none',
-        }}
+        position="absolute"
+        top={0}
+        insetInlineStart={0}
+        w="full"
+        h="full"
+        opacity={shouldShowProcessedImage ? 1 : 0}
+        transitionProperty="common"
+        transitionDuration="normal"
+        pointerEvents="none"
       >
         <IAIDndImage
           draggableData={draggableData}
@@ -236,20 +232,18 @@ const ControlAdapterImagePreview = ({ isSmall, id }: Props) => {
 
       {pendingControlImages.includes(id) && (
         <Flex
-          sx={{
-            position: 'absolute',
-            top: 0,
-            insetInlineStart: 0,
-            w: 'full',
-            h: 'full',
-            alignItems: 'center',
-            justifyContent: 'center',
-            opacity: 0.8,
-            borderRadius: 'base',
-            bg: 'base.900',
-          }}
+          position="absolute"
+          top={0}
+          insetInlineStart={0}
+          w="full"
+          h="full"
+          alignItems="center"
+          justifyContent="center"
+          opacity={0.8}
+          borderRadius="base"
+          bg="base.900"
         >
-          <Spinner size="xl" sx={{ color: 'base.400' }} />
+          <Spinner size="xl" color="base.400" />
         </Flex>
       )}
     </Flex>
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/imports/ControlNetCanvasImageImports.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/imports/ControlNetCanvasImageImports.tsx
index 41e1ec35c5..bde576ef12 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/imports/ControlNetCanvasImageImports.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/imports/ControlNetCanvasImageImports.tsx
@@ -29,11 +29,7 @@ const ControlNetCanvasImageImports = (
   }, [id, dispatch]);
 
   return (
-    <Flex
-      sx={{
-        gap: 2,
-      }}
-    >
+    <Flex gap={2}>
       <InvIconButton
         size="sm"
         icon={<FaImage />}
diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/common/ProcessorWrapper.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/common/ProcessorWrapper.tsx
index 8bfe7afa3d..6178b4f1c2 100644
--- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/common/ProcessorWrapper.tsx
+++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/common/ProcessorWrapper.tsx
@@ -5,7 +5,7 @@ type Props = PropsWithChildren;
 
 export default function ProcessorWrapper(props: Props) {
   return (
-    <Flex sx={{ flexDirection: 'column', gap: 2, pb: 2 }}>
+    <Flex flexDir="column" gap={2} pb={2}>
       {props.children}
     </Flex>
   );
diff --git a/invokeai/frontend/web/src/features/deleteImageModal/components/ImageUsageMessage.tsx b/invokeai/frontend/web/src/features/deleteImageModal/components/ImageUsageMessage.tsx
index 14c4ff7dc7..c39a7a97cd 100644
--- a/invokeai/frontend/web/src/features/deleteImageModal/components/ImageUsageMessage.tsx
+++ b/invokeai/frontend/web/src/features/deleteImageModal/components/ImageUsageMessage.tsx
@@ -29,7 +29,7 @@ const ImageUsageMessage = (props: Props) => {
   return (
     <>
       <InvText>{topMessage}</InvText>
-      <UnorderedList sx={{ paddingInlineStart: 6 }}>
+      <UnorderedList paddingInlineStart={6}>
         {imageUsage.isInitialImage && (
           <ListItem>{t('common.img2img')}</ListItem>
         )}
diff --git a/invokeai/frontend/web/src/features/dnd/components/DragPreview.tsx b/invokeai/frontend/web/src/features/dnd/components/DragPreview.tsx
index 22be340aa0..4647fd8c3f 100644
--- a/invokeai/frontend/web/src/features/dnd/components/DragPreview.tsx
+++ b/invokeai/frontend/web/src/features/dnd/components/DragPreview.tsx
@@ -11,7 +11,7 @@ type OverlayDragImageProps = {
 
 const BOX_SIZE = 28;
 
-const STYLES: ChakraProps['sx'] = {
+const imageStyles: ChakraProps['sx'] = {
   w: BOX_SIZE,
   h: BOX_SIZE,
   maxW: BOX_SIZE,
@@ -24,6 +24,14 @@ const STYLES: ChakraProps['sx'] = {
   color: 'base.100',
 };
 
+const multiImageStyles: ChakraProps['sx'] = {
+  position: 'relative',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexDir: 'column',
+  ...imageStyles,
+};
+
 const DragPreview = (props: OverlayDragImageProps) => {
   const { t } = useTranslation();
   if (!props.dragData) {
@@ -34,17 +42,15 @@ const DragPreview = (props: OverlayDragImageProps) => {
     const { field, fieldTemplate } = props.dragData.payload;
     return (
       <Box
-        sx={{
-          position: 'relative',
-          p: 2,
-          px: 3,
-          opacity: 0.7,
-          bg: 'base.300',
-          borderRadius: 'base',
-          boxShadow: 'dark-lg',
-          whiteSpace: 'nowrap',
-          fontSize: 'sm',
-        }}
+        position="relative"
+        p={2}
+        px={3}
+        opacity={0.7}
+        bg="base.300"
+        borderRadius="base"
+        boxShadow="dark-lg"
+        whiteSpace="nowrap"
+        fontSize="sm"
       >
         <InvText>{field.label || fieldTemplate.title}</InvText>
       </Box>
@@ -55,19 +61,15 @@ const DragPreview = (props: OverlayDragImageProps) => {
     const { thumbnail_url, width, height } = props.dragData.payload.imageDTO;
     return (
       <Box
-        sx={{
-          position: 'relative',
-          width: 'full',
-          height: 'full',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
+        position="relative"
+        width="full"
+        height="full"
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
       >
         <Image
-          sx={{
-            ...STYLES,
-          }}
+          sx={imageStyles}
           objectFit="contain"
           src={thumbnail_url}
           width={width}
@@ -79,15 +81,7 @@ const DragPreview = (props: OverlayDragImageProps) => {
 
   if (props.dragData.payloadType === 'IMAGE_DTOS') {
     return (
-      <Flex
-        sx={{
-          position: 'relative',
-          alignItems: 'center',
-          justifyContent: 'center',
-          flexDir: 'column',
-          ...STYLES,
-        }}
-      >
+      <Flex sx={multiImageStyles}>
         <Heading>{props.dragData.payload.imageDTOs.length}</Heading>
         <Heading size="sm">{t('parameters.images')}</Heading>
       </Flex>
diff --git a/invokeai/frontend/web/src/features/embedding/EmbeddingSelect.tsx b/invokeai/frontend/web/src/features/embedding/EmbeddingSelect.tsx
index 14141f42a1..46fbb6b0ca 100644
--- a/invokeai/frontend/web/src/features/embedding/EmbeddingSelect.tsx
+++ b/invokeai/frontend/web/src/features/embedding/EmbeddingSelect.tsx
@@ -68,7 +68,7 @@ export const EmbeddingSelect = ({
         onChange={onChange}
         onMenuClose={onClose}
         data-testid="add-embedding"
-        sx={{ w: 'full' }}
+        w="full"
       />
     </InvControl>
   );
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/AutoAddIcon.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/AutoAddIcon.tsx
index d50699a3fe..459f0e987e 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/AutoAddIcon.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/AutoAddIcon.tsx
@@ -5,15 +5,8 @@ import { useTranslation } from 'react-i18next';
 const AutoAddIcon = () => {
   const { t } = useTranslation();
   return (
-    <Flex
-      sx={{
-        position: 'absolute',
-        insetInlineEnd: 0,
-        top: 0,
-        p: 1,
-      }}
-    >
-      <Badge variant="solid" sx={{ bg: 'blue.500' }}>
+    <Flex position="absolute" insetInlineEnd={0} top={0} p={1}>
+      <Badge variant="solid" bg="blue.500">
         {t('common.auto')}
       </Badge>
     </Flex>
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx
index 17f3c3c225..d43666b795 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx
@@ -93,10 +93,7 @@ const BoardContextMenu = ({
 
   const renderMenuFunc = useCallback(
     () => (
-      <InvMenuList
-        sx={{ visibility: 'visible !important' }}
-        onContextMenu={skipEvent}
-      >
+      <InvMenuList visibility="visible !important" onContextMenu={skipEvent}>
         <InvMenuGroup title={boardName}>
           <InvMenuItem
             icon={<FaPlus />}
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx
index 08a261ac8f..feef52f4c3 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx
@@ -5,6 +5,7 @@ import { useAppSelector } from 'app/store/storeHooks';
 import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
 import DeleteBoardModal from 'features/gallery/components/Boards/DeleteBoardModal';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
+import type { CSSProperties} from 'react';
 import { memo, useState } from 'react';
 import { useListAllBoardsQuery } from 'services/api/endpoints/boards';
 import type { BoardDTO } from 'services/api/types';
@@ -14,6 +15,11 @@ import BoardsSearch from './BoardsSearch';
 import GalleryBoard from './GalleryBoard';
 import NoBoardBoard from './NoBoardBoard';
 
+const overlayScrollbarsStyles: CSSProperties = {
+  height: '100%',
+  width: '100%',
+};
+
 const selector = createMemoizedSelector([stateSelector], ({ gallery }) => {
   const { selectedBoardId, boardSearchText } = gallery;
   return { selectedBoardId, boardSearchText };
@@ -39,39 +45,35 @@ const BoardsList = (props: Props) => {
       <Collapse in={isOpen} animateOpacity>
         <Flex
           layerStyle="first"
-          sx={{
-            flexDir: 'column',
-            gap: 2,
-            p: 2,
-            mt: 2,
-            borderRadius: 'base',
-          }}
+          flexDir="column"
+          gap={2}
+          p={2}
+          mt={2}
+          borderRadius="base"
         >
-          <Flex sx={{ gap: 2, alignItems: 'center' }}>
+          <Flex gap={2} alignItems="center">
             <BoardsSearch />
             <AddBoardButton />
           </Flex>
           <OverlayScrollbarsComponent
             defer
-            style={{ height: '100%', width: '100%' }}
+            style={overlayScrollbarsStyles}
             options={overlayScrollbarsParams.options}
           >
             <Grid
               className="list-container"
               data-testid="boards-list"
-              sx={{
-                gridTemplateColumns: `repeat(auto-fill, minmax(108px, 1fr));`,
-                maxH: 346,
-              }}
+              gridTemplateColumns="repeat(auto-fill, minmax(108px, 1fr))"
+              maxH={346}
             >
-              <GridItem sx={{ p: 1.5 }} data-testid="no-board">
+              <GridItem p={1.5} data-testid="no-board">
                 <NoBoardBoard isSelected={selectedBoardId === 'none'} />
               </GridItem>
               {filteredBoards &&
                 filteredBoards.map((board, index) => (
                   <GridItem
                     key={board.board_id}
-                    sx={{ p: 1.5 }}
+                    p={1.5}
                     data-testid={`board-${index}`}
                   >
                     <GalleryBoard
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx
index 941136eb13..11cd901a4e 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx
@@ -1,3 +1,4 @@
+import type { SystemStyleObject } from '@chakra-ui/react';
 import {
   Box,
   Editable,
@@ -33,6 +34,14 @@ import {
 import { useGetImageDTOQuery } from 'services/api/endpoints/images';
 import type { BoardDTO } from 'services/api/types';
 
+const editableInputStyles: SystemStyleObject = {
+  p: 0,
+  _focusVisible: {
+    p: 0,
+    textAlign: 'center',
+  },
+};
+
 interface GalleryBoardProps {
   board: BoardDTO;
   isSelected: boolean;
@@ -140,18 +149,16 @@ const GalleryBoard = ({
   }, []);
   const { t } = useTranslation();
   return (
-    <Box sx={{ w: 'full', h: 'full', touchAction: 'none', userSelect: 'none' }}>
+    <Box w="full" h="full" userSelect="none">
       <Flex
         onMouseOver={handleMouseOver}
         onMouseOut={handleMouseOut}
-        sx={{
-          position: 'relative',
-          justifyContent: 'center',
-          alignItems: 'center',
-          aspectRatio: '1/1',
-          w: 'full',
-          h: 'full',
-        }}
+        position="relative"
+        justifyContent="center"
+        alignItems="center"
+        aspectRatio="1/1"
+        w="full"
+        h="full"
       >
         <BoardContextMenu
           board={board}
@@ -163,47 +170,39 @@ const GalleryBoard = ({
               <Flex
                 ref={ref}
                 onClick={handleSelectBoard}
-                sx={{
-                  w: 'full',
-                  h: 'full',
-                  position: 'relative',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  borderRadius: 'base',
-                  cursor: 'pointer',
-                  bg: 'base.800',
-                }}
+                w="full"
+                h="full"
+                position="relative"
+                justifyContent="center"
+                alignItems="center"
+                borderRadius="base"
+                cursor="pointer"
+                bg="base.800"
               >
                 {coverImage?.thumbnail_url ? (
                   <Image
                     src={coverImage?.thumbnail_url}
                     draggable={false}
-                    sx={{
-                      objectFit: 'cover',
-                      w: 'full',
-                      h: 'full',
-                      maxH: 'full',
-                      borderRadius: 'base',
-                      borderBottomRadius: 'lg',
-                    }}
+                    objectFit="cover"
+                    w="full"
+                    h="full"
+                    maxH="full"
+                    borderRadius="base"
+                    borderBottomRadius="lg"
                   />
                 ) : (
                   <Flex
-                    sx={{
-                      w: 'full',
-                      h: 'full',
-                      justifyContent: 'center',
-                      alignItems: 'center',
-                    }}
+                    w="full"
+                    h="full"
+                    justifyContent="center"
+                    alignItems="center"
                   >
                     <Icon
                       boxSize={12}
                       as={FaUser}
-                      sx={{
-                        mt: -6,
-                        opacity: 0.7,
-                        color: 'base.500',
-                      }}
+                      mt={-6}
+                      opacity={0.7}
+                      color="base.500"
                     />
                   </Flex>
                 )}
@@ -213,21 +212,19 @@ const GalleryBoard = ({
                   isHovered={isHovered}
                 />
                 <Flex
-                  sx={{
-                    position: 'absolute',
-                    bottom: 0,
-                    left: 0,
-                    p: 1,
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    w: 'full',
-                    maxW: 'full',
-                    borderBottomRadius: 'base',
-                    bg: isSelected ? 'blue.500' : 'base.600',
-                    color: isSelected ? 'base.50' : 'base.100',
-                    lineHeight: 'short',
-                    fontSize: 'xs',
-                  }}
+                  position="absolute"
+                  bottom={0}
+                  left={0}
+                  p={1}
+                  justifyContent="center"
+                  alignItems="center"
+                  w="full"
+                  maxW="full"
+                  borderBottomRadius="base"
+                  bg={isSelected ? 'blue.500' : 'base.600'}
+                  color={isSelected ? 'base.50' : 'base.100'}
+                  lineHeight="short"
+                  fontSize="xs"
                 >
                   <Editable
                     value={localBoardName}
@@ -235,31 +232,17 @@ const GalleryBoard = ({
                     submitOnBlur={true}
                     onChange={handleChange}
                     onSubmit={handleSubmit}
-                    sx={{
-                      w: 'full',
-                    }}
+                    w="full"
                   >
                     <EditablePreview
-                      sx={{
-                        p: 0,
-                        fontWeight: isSelected ? 'bold' : 'normal',
-                        textAlign: 'center',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                      }}
+                      p={0}
+                      fontWeight={isSelected ? 'bold' : 'normal'}
+                      textAlign="center"
+                      overflow="hidden"
+                      textOverflow="ellipsis"
                       noOfLines={1}
                     />
-                    <EditableInput
-                      sx={{
-                        p: 0,
-                        _focusVisible: {
-                          p: 0,
-                          textAlign: 'center',
-                          // get rid of the edit border
-                          boxShadow: 'none',
-                        },
-                      }}
-                    />
+                    <EditableInput sx={editableInputStyles} />
                   </Editable>
                 </Flex>
 
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx
index 9d7a1336a4..1484db850b 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx
@@ -71,19 +71,17 @@ const NoBoardBoard = memo(({ isSelected }: Props) => {
   );
   const { t } = useTranslation();
   return (
-    <Box sx={{ w: 'full', h: 'full', touchAction: 'none', userSelect: 'none' }}>
+    <Box w="full" h="full" userSelect="none">
       <Flex
         onMouseOver={handleMouseOver}
         onMouseOut={handleMouseOut}
-        sx={{
-          position: 'relative',
-          justifyContent: 'center',
-          alignItems: 'center',
-          aspectRatio: '1/1',
-          borderRadius: 'base',
-          w: 'full',
-          h: 'full',
-        }}
+        position="relative"
+        justifyContent="center"
+        alignItems="center"
+        aspectRatio="1/1"
+        borderRadius="base"
+        w="full"
+        h="full"
       >
         <BoardContextMenu board_id="none">
           {(ref) => (
@@ -91,58 +89,50 @@ const NoBoardBoard = memo(({ isSelected }: Props) => {
               <Flex
                 ref={ref}
                 onClick={handleSelectBoard}
-                sx={{
-                  w: 'full',
-                  h: 'full',
-                  position: 'relative',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  borderRadius: 'base',
-                  cursor: 'pointer',
-                  bg: 'base.800',
-                }}
+                w="full"
+                h="full"
+                position="relative"
+                justifyContent="center"
+                alignItems="center"
+                borderRadius="base"
+                cursor="pointer"
+                bg="base.800"
               >
                 <Flex
-                  sx={{
-                    w: 'full',
-                    h: 'full',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                  }}
+                  w="full"
+                  h="full"
+                  justifyContent="center"
+                  alignItems="center"
                 >
                   <Image
                     src={InvokeAILogoImage}
                     alt="invoke-ai-logo"
-                    sx={{
-                      opacity: 0.4,
-                      filter: 'grayscale(1)',
-                      mt: -6,
-                      w: 16,
-                      h: 16,
-                      minW: 16,
-                      minH: 16,
-                      userSelect: 'none',
-                    }}
+                    opacity={0.4}
+                    filter="grayscale(1)"
+                    mt={-6}
+                    w={16}
+                    h={16}
+                    minW={16}
+                    minH={16}
+                    userSelect="none"
                   />
                 </Flex>
                 {autoAddBoardId === 'none' && <AutoAddIcon />}
                 <Flex
-                  sx={{
-                    position: 'absolute',
-                    bottom: 0,
-                    left: 0,
-                    p: 1,
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    w: 'full',
-                    maxW: 'full',
-                    borderBottomRadius: 'base',
-                    bg: isSelected ? 'blue.500' : 'base.600',
-                    color: isSelected ? 'base.50' : 'base.100',
-                    lineHeight: 'short',
-                    fontSize: 'xs',
-                    fontWeight: isSelected ? 'bold' : 'normal',
-                  }}
+                  position="absolute"
+                  bottom={0}
+                  left={0}
+                  p={1}
+                  justifyContent="center"
+                  alignItems="center"
+                  w="full"
+                  maxW="full"
+                  borderBottomRadius="base"
+                  bg={isSelected ? 'blue.500' : 'base.600'}
+                  color={isSelected ? 'base.50' : 'base.100'}
+                  lineHeight="short"
+                  fontSize="xs"
+                  fontWeight={isSelected ? 'bold' : 'normal'}
                 >
                   {boardName}
                 </Flex>
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/DeleteBoardModal.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/DeleteBoardModal.tsx
index 85d26dbe96..9fb5771abd 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/DeleteBoardModal.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/DeleteBoardModal.tsx
@@ -139,9 +139,7 @@ const DeleteBoardModal = (props: Props) => {
             </Flex>
           </InvAlertDialogBody>
           <InvAlertDialogFooter>
-            <Flex
-              sx={{ justifyContent: 'space-between', width: 'full', gap: 2 }}
-            >
+            <Flex w="full" gap={2} justifyContent="space-between">
               <InvButton ref={cancelRef} onClick={handleClose}>
                 {t('boards.cancel')}
               </InvButton>
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/GalleryBoardContextMenuItems.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/GalleryBoardContextMenuItems.tsx
index c58e8455ed..0425ac1fa3 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/GalleryBoardContextMenuItems.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/GalleryBoardContextMenuItems.tsx
@@ -20,11 +20,7 @@ const GalleryBoardContextMenuItems = ({ board, setBoardToDelete }: Props) => {
 
   return (
     <>
-      <InvMenuItem
-        sx={{ color: 'error.300' }}
-        icon={<FaTrash />}
-        onClick={handleDelete}
-      >
+      <InvMenuItem color="error.300" icon={<FaTrash />} onClick={handleDelete}>
         {t('boards.deleteBoard')}
       </InvMenuItem>
     </>
diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageButtons.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageButtons.tsx
index 387291de9c..cd37070374 100644
--- a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageButtons.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageButtons.tsx
@@ -217,14 +217,7 @@ const CurrentImageButtons = () => {
 
   return (
     <>
-      <Flex
-        sx={{
-          flexWrap: 'wrap',
-          justifyContent: 'center',
-          alignItems: 'center',
-          gap: 2,
-        }}
-      >
+      <Flex flexWrap="wrap" justifyContent="center" alignItems="center" gap={2}>
         <InvButtonGroup isDisabled={shouldDisableToolbarButtons}>
           <InvMenu isLazy>
             <InvMenuButton
diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageDisplay.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageDisplay.tsx
index 797771d038..3341131a07 100644
--- a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageDisplay.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageDisplay.tsx
@@ -7,15 +7,13 @@ import CurrentImagePreview from './CurrentImagePreview';
 const CurrentImageDisplay = () => {
   return (
     <Flex
-      sx={{
-        position: 'relative',
-        flexDirection: 'column',
-        height: '100%',
-        width: '100%',
-        rowGap: 4,
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
+      position="relative"
+      flexDirection="column"
+      height="100%"
+      width="100%"
+      rowGap={4}
+      alignItems="center"
+      justifyContent="center"
     >
       <CurrentImageButtons />
       <CurrentImagePreview />
diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx
index ad14bba238..2599e9002c 100644
--- a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx
@@ -14,8 +14,17 @@ import ImageMetadataViewer from 'features/gallery/components/ImageMetadataViewer
 import NextPrevImageButtons from 'features/gallery/components/NextPrevImageButtons';
 import { useNextPrevImage } from 'features/gallery/hooks/useNextPrevImage';
 import { selectLastSelectedImage } from 'features/gallery/store/gallerySelectors';
+import type { AnimationProps} from 'framer-motion';
 import { AnimatePresence, motion } from 'framer-motion';
-import { memo, useCallback, useMemo, useRef, useState } from 'react';
+import type {
+  CSSProperties} from 'react';
+import {
+  memo,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { FaImage } from 'react-icons/fa';
@@ -128,13 +137,11 @@ const CurrentImagePreview = () => {
     <Flex
       onMouseOver={handleMouseOver}
       onMouseOut={handleMouseOut}
-      sx={{
-        width: 'full',
-        height: 'full',
-        alignItems: 'center',
-        justifyContent: 'center',
-        position: 'relative',
-      }}
+      width="full"
+      height="full"
+      alignItems="center"
+      justifyContent="center"
+      position="relative"
     >
       {hasDenoiseProgress && shouldShowProgressInViewer ? (
         <ProgressImage />
@@ -158,13 +165,11 @@ const CurrentImagePreview = () => {
       )}
       {shouldShowImageDetails && imageDTO && (
         <Box
-          sx={{
-            position: 'absolute',
-            top: '0',
-            width: 'full',
-            height: 'full',
-            borderRadius: 'base',
-          }}
+          position="absolute"
+          top="0"
+          width="full"
+          height="full"
+          borderRadius="base"
         >
           <ImageMetadataViewer image={imageDTO} />
         </Box>
@@ -173,24 +178,10 @@ const CurrentImagePreview = () => {
         {!shouldShowImageDetails && imageDTO && shouldShowNextPrevButtons && (
           <motion.div
             key="nextPrevButtons"
-            initial={{
-              opacity: 0,
-            }}
-            animate={{
-              opacity: 1,
-              transition: { duration: 0.1 },
-            }}
-            exit={{
-              opacity: 0,
-              transition: { duration: 0.1 },
-            }}
-            style={{
-              position: 'absolute',
-              top: '0',
-              width: '100%',
-              height: '100%',
-              pointerEvents: 'none',
-            }}
+            initial={initial}
+            animate={animate}
+            exit={exit}
+            style={motionStyles}
           >
             <NextPrevImageButtons />
           </motion.div>
@@ -201,3 +192,22 @@ const CurrentImagePreview = () => {
 };
 
 export default memo(CurrentImagePreview);
+
+const initial: AnimationProps['initial'] = {
+  opacity: 0,
+};
+const animate: AnimationProps['animate'] = {
+  opacity: 1,
+  transition: { duration: 0.1 },
+};
+const exit: AnimationProps['exit'] = {
+  opacity: 0,
+  transition: { duration: 0.1 },
+};
+const motionStyles: CSSProperties = {
+  position: 'absolute',
+  top: '0',
+  width: '100%',
+  height: '100%',
+  pointerEvents: 'none',
+};
diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/ProgressImage.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/ProgressImage.tsx
index dabc26743d..d36f6517b6 100644
--- a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/ProgressImage.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/ProgressImage.tsx
@@ -1,6 +1,7 @@
+import type { SystemStyleObject } from '@chakra-ui/react';
 import { Image } from '@chakra-ui/react';
 import { useAppSelector } from 'app/store/storeHooks';
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 
 const CurrentImagePreview = () => {
   const progress_image = useAppSelector(
@@ -10,6 +11,13 @@ const CurrentImagePreview = () => {
     (state) => state.system.shouldAntialiasProgressImage
   );
 
+  const sx = useMemo<SystemStyleObject>(
+    () => ({
+      imageRendering: shouldAntialiasProgressImage ? 'auto' : 'pixelated',
+    }),
+    [shouldAntialiasProgressImage]
+  );
+
   if (!progress_image) {
     return null;
   }
@@ -21,15 +29,12 @@ const CurrentImagePreview = () => {
       height={progress_image.height}
       draggable={false}
       data-testid="progress-image"
-      sx={{
-        objectFit: 'contain',
-        maxWidth: 'full',
-        maxHeight: 'full',
-        height: 'auto',
-        position: 'absolute',
-        borderRadius: 'base',
-        imageRendering: shouldAntialiasProgressImage ? 'auto' : 'pixelated',
-      }}
+      objectFit="contain"
+      maxWidth="full"
+      maxHeight="full"
+      position="absolute"
+      borderRadius="base"
+      sx={sx}
     />
   );
 };
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageContextMenu.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageContextMenu.tsx
index 672d920ba6..b46dfb2d03 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageContextMenu.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageContextMenu.tsx
@@ -36,20 +36,14 @@ const ImageContextMenu = ({ imageDTO, children }: Props) => {
 
     if (selectionCount > 1) {
       return (
-        <InvMenuList
-          sx={{ visibility: 'visible !important' }}
-          onContextMenu={skipEvent}
-        >
+        <InvMenuList visibility="visible" onContextMenu={skipEvent}>
           <MultipleSelectionMenuItems />
         </InvMenuList>
       );
     }
 
     return (
-      <InvMenuList
-        sx={{ visibility: 'visible !important' }}
-        onContextMenu={skipEvent}
-      >
+      <InvMenuList visibility="visible" onContextMenu={skipEvent}>
         <SingleSelectionMenuItems imageDTO={imageDTO} />
       </InvMenuList>
     );
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/MultipleSelectionMenuItems.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/MultipleSelectionMenuItems.tsx
index 91748ce1fb..1d32bac5b9 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/MultipleSelectionMenuItems.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/MultipleSelectionMenuItems.tsx
@@ -113,7 +113,7 @@ const MultipleSelectionMenuItems = () => {
         {t('boards.changeBoard')}
       </InvMenuItem>
       <InvMenuItem
-        sx={{ color: 'error.300' }}
+        color="error.300"
         icon={<FaTrash />}
         onClickCapture={handleDeleteSelection}
       >
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx
index 837488784f..aa80a206d6 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx
@@ -248,7 +248,7 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
         </InvMenuItem>
       )}
       <InvMenuItem
-        sx={{ color: 'error.300' }}
+        color="error.300"
         icon={<FaTrash />}
         onClickCapture={handleDelete}
       >
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
index 0cc96e4789..0b8b8b1055 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
@@ -50,22 +50,18 @@ const ImageGalleryContent = () => {
   return (
     <VStack
       layerStyle="first"
-      sx={{
-        flexDirection: 'column',
-        h: 'full',
-        w: 'full',
-        borderRadius: 'base',
-        p: 2,
-      }}
+      flexDirection="column"
+      h="full"
+      w="full"
+      borderRadius="base"
+      p={2}
     >
-      <Box sx={{ w: 'full' }}>
+      <Box w="full">
         <Flex
           ref={resizeObserverRef}
-          sx={{
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            gap: 2,
-          }}
+          alignItems="center"
+          justifyContent="space-between"
+          gap={2}
         >
           <GalleryBoardName
             isOpen={isBoardListOpen}
@@ -78,18 +74,12 @@ const ImageGalleryContent = () => {
         </Box>
       </Box>
       <Flex ref={galleryGridRef} direction="column" gap={2} h="full" w="full">
-        <Flex
-          sx={{
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            gap: 2,
-          }}
-        >
+        <Flex alignItems="center" justifyContent="space-between" gap={2}>
           <Tabs
             index={galleryView === 'images' ? 0 : 1}
             variant="unstyled"
             size="sm"
-            sx={{ w: 'full' }}
+            w="full"
           >
             <TabList>
               <InvButtonGroup w="full">
@@ -98,9 +88,7 @@ const ImageGalleryContent = () => {
                   size="sm"
                   isChecked={galleryView === 'images'}
                   onClick={handleClickImages}
-                  sx={{
-                    w: 'full',
-                  }}
+                  w="full"
                   leftIcon={<FaImages />}
                   data-testid="images-tab"
                 >
@@ -111,9 +99,7 @@ const ImageGalleryContent = () => {
                   size="sm"
                   isChecked={galleryView === 'assets'}
                   onClick={handleClickAssets}
-                  sx={{
-                    w: 'full',
-                  }}
+                  w="full"
                   leftIcon={<FaServer />}
                   data-testid="assets-tab"
                 >
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx
index 119d7bf265..87ca7a324b 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx
@@ -1,3 +1,4 @@
+import type { SystemStyleObject } from '@chakra-ui/react';
 import { Box, Flex } from '@chakra-ui/react';
 import { useStore } from '@nanostores/react';
 import { $customStarUI } from 'app/store/nanostores/customStarUI';
@@ -26,6 +27,11 @@ import {
   useUnstarImagesMutation,
 } from 'services/api/endpoints/images';
 
+const imageSx: SystemStyleObject = { w: 'full', h: 'full' };
+const imageIconStyleOverrides: SystemStyleObject = {
+  bottom: 2,
+  top: 'auto',
+};
 interface HoverableImageProps {
   imageName: string;
   index: number;
@@ -130,19 +136,14 @@ const GalleryImage = (props: HoverableImageProps) => {
   }
 
   return (
-    <Box
-      sx={{ w: 'full', h: 'full', touchAction: 'none' }}
-      data-testid={`image-${imageDTO.image_name}`}
-    >
+    <Box w="full" h="full" data-testid={`image-${imageDTO.image_name}`}>
       <Flex
         ref={imageContainerRef}
         userSelect="none"
-        sx={{
-          position: 'relative',
-          justifyContent: 'center',
-          alignItems: 'center',
-          aspectRatio: '1/1',
-        }}
+        position="relative"
+        justifyContent="center"
+        alignItems="center"
+        aspectRatio="1/1"
       >
         <IAIDndImage
           onClick={handleClick}
@@ -150,7 +151,7 @@ const GalleryImage = (props: HoverableImageProps) => {
           draggableData={draggableData}
           isSelected={isSelected}
           minSize={0}
-          imageSx={{ w: 'full', h: 'full' }}
+          imageSx={imageSx}
           isDropDisabled={true}
           isUploadDisabled={true}
           thumbnail={true}
@@ -170,10 +171,7 @@ const GalleryImage = (props: HoverableImageProps) => {
                 onClick={handleDelete}
                 icon={<FaTrash />}
                 tooltip={t('gallery.deleteImage')}
-                styleOverrides={{
-                  bottom: 2,
-                  top: 'auto',
-                }}
+                styleOverrides={imageIconStyleOverrides}
               />
             )}
           </>
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx
index 8576ebcdbc..bb181e6118 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx
@@ -9,10 +9,12 @@ import { $useNextPrevImageState } from 'features/gallery/hooks/useNextPrevImage'
 import { selectListImagesBaseQueryArgs } from 'features/gallery/store/gallerySelectors';
 import { IMAGE_LIMIT } from 'features/gallery/store/types';
 import { useOverlayScrollbars } from 'overlayscrollbars-react';
+import type { CSSProperties } from 'react';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaExclamationCircle, FaImage } from 'react-icons/fa';
 import type {
+  GridComponents,
   ItemContent,
   ListRange,
   VirtuosoGridHandle,
@@ -28,6 +30,13 @@ import GalleryImage from './GalleryImage';
 import ImageGridItemContainer from './ImageGridItemContainer';
 import ImageGridListContainer from './ImageGridListContainer';
 
+const components: GridComponents = {
+  Item: ImageGridItemContainer,
+  List: ImageGridListContainer,
+};
+
+const virtuosoStyles: CSSProperties = { height: '100%' };
+
 const GalleryImageGrid = () => {
   const { t } = useTranslation();
   const rootRef = useRef<HTMLDivElement>(null);
@@ -115,14 +124,7 @@ const GalleryImageGrid = () => {
 
   if (!currentData) {
     return (
-      <Flex
-        sx={{
-          w: 'full',
-          h: 'full',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
+      <Flex w="full" h="full" alignItems="center" justifyContent="center">
         <IAINoContentFallback label={t('gallery.loading')} icon={FaImage} />
       </Flex>
     );
@@ -130,14 +132,7 @@ const GalleryImageGrid = () => {
 
   if (isSuccess && currentData?.ids.length === 0) {
     return (
-      <Flex
-        sx={{
-          w: 'full',
-          h: 'full',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
+      <Flex w="full" h="full" alignItems="center" justifyContent="center">
         <IAINoContentFallback
           label={t('gallery.noImagesInGallery')}
           icon={FaImage}
@@ -151,13 +146,10 @@ const GalleryImageGrid = () => {
       <>
         <Box ref={rootRef} data-overlayscrollbars="" h="100%">
           <VirtuosoGrid
-            style={{ height: '100%' }}
+            style={virtuosoStyles}
             data={currentData.ids}
             endReached={handleLoadMoreImages}
-            components={{
-              Item: ImageGridItemContainer,
-              List: ImageGridListContainer,
-            }}
+            components={components}
             scrollerRef={setScroller}
             itemContent={itemContentFunc}
             ref={virtuosoRef}
@@ -181,7 +173,7 @@ const GalleryImageGrid = () => {
 
   if (isError) {
     return (
-      <Box sx={{ w: 'full', h: 'full' }}>
+      <Box w="full" h="full">
         <IAINoContentFallback
           label={t('gallery.unableToLoad')}
           icon={FaExclamationCircle}
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridListContainer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridListContainer.tsx
index 5891151c6f..5c008fda21 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridListContainer.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridListContainer.tsx
@@ -16,9 +16,7 @@ const ListContainer = forwardRef((props: ListContainerProps, ref) => {
       {...props}
       className="list-container"
       ref={ref}
-      sx={{
-        gridTemplateColumns: `repeat(auto-fill, minmax(${galleryImageMinimumWidth}px, 1fr));`,
-      }}
+      gridTemplateColumns={`repeat(auto-fill, minmax(${galleryImageMinimumWidth}px, 1fr))`}
       data-testid="image-list-container"
     >
       {props.children}
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx
index 68ee9a049a..786c74cd04 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx
@@ -4,6 +4,7 @@ import { InvTooltip } from 'common/components/InvTooltip/InvTooltip';
 import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
 import { isString } from 'lodash-es';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
+import type { CSSProperties} from 'react';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaCopy, FaDownload } from 'react-icons/fa';
@@ -42,35 +43,31 @@ const DataViewer = (props: Props) => {
   return (
     <Flex
       layerStyle="second"
-      sx={{
-        borderRadius: 'base',
-        flexGrow: 1,
-        w: 'full',
-        h: 'full',
-        position: 'relative',
-      }}
+      borderRadius="base"
+      flexGrow={1}
+      w="full"
+      h="full"
+      position="relative"
     >
       <Box
-        sx={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          overflow: 'auto',
-          p: 4,
-          fontSize: 'sm',
-        }}
+        position="absolute"
+        top={0}
+        left={0}
+        right={0}
+        bottom={0}
+        overflow="auto"
+        p={4}
+        fontSize="sm"
       >
         <OverlayScrollbarsComponent
           defer
-          style={{ height: '100%', width: '100%' }}
+          style={overlayScrollbarsStyles}
           options={overlayScrollbarsParams.options}
         >
           <pre>{dataString}</pre>
         </OverlayScrollbarsComponent>
       </Box>
-      <Flex sx={{ position: 'absolute', top: 0, insetInlineEnd: 0, p: 2 }}>
+      <Flex position="absolute" top={0} insetInlineEnd={0} p={2}>
         {withDownload && (
           <InvTooltip label={`${t('gallery.download')} ${label} JSON`}>
             <InvIconButton
@@ -99,3 +96,8 @@ const DataViewer = (props: Props) => {
 };
 
 export default memo(DataViewer);
+
+const overlayScrollbarsStyles: CSSProperties = {
+  height: '100%',
+  width: '100%',
+};
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx
index d1bbd2e6c7..f6ad443142 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx
@@ -37,16 +37,14 @@ const ImageMetadataViewer = ({ image }: ImageMetadataViewerProps) => {
   return (
     <Flex
       layerStyle="first"
-      sx={{
-        padding: 4,
-        gap: 1,
-        flexDirection: 'column',
-        width: 'full',
-        height: 'full',
-        borderRadius: 'base',
-        position: 'absolute',
-        overflow: 'hidden',
-      }}
+      padding={4}
+      gap={1}
+      flexDirection="column"
+      width="full"
+      height="full"
+      borderRadius="base"
+      position="absolute"
+      overflow="hidden"
     >
       <Flex gap={2}>
         <InvText fontWeight="semibold">{t('common.file')}:</InvText>
@@ -58,13 +56,11 @@ const ImageMetadataViewer = ({ image }: ImageMetadataViewerProps) => {
 
       <Tabs
         variant="line"
-        sx={{
-          display: 'flex',
-          flexDir: 'column',
-          w: 'full',
-          h: 'full',
-        }}
         isLazy={true}
+        display="flex"
+        flexDir="column"
+        w="full"
+        h="full"
       >
         <TabList>
           <Tab>{t('metadata.recallParameters')}</Tab>
diff --git a/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx b/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx
index c3db48814f..70514faad0 100644
--- a/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx
@@ -25,20 +25,12 @@ const NextPrevImageButtons = () => {
   } = useNextPrevImage();
 
   return (
-    <Box
-      sx={{
-        position: 'relative',
-        height: '100%',
-        width: '100%',
-      }}
-    >
+    <Box pos="relative" h="full" w="full">
       <Box
-        sx={{
-          pos: 'absolute',
-          top: '50%',
-          transform: 'translate(0, -50%)',
-          insetInlineStart: 0,
-        }}
+        pos="absolute"
+        top="50%"
+        transform="translate(0, -50%)"
+        insetInlineStart={0}
       >
         {!isOnFirstImage && (
           <InvIconButton
@@ -52,12 +44,10 @@ const NextPrevImageButtons = () => {
         )}
       </Box>
       <Box
-        sx={{
-          pos: 'absolute',
-          top: '50%',
-          transform: 'translate(0, -50%)',
-          insetInlineEnd: 0,
-        }}
+        pos="absolute"
+        top="50%"
+        transform="translate(0, -50%)"
+        insetInlineEnd={0}
       >
         {!isOnLastImage && (
           <InvIconButton
@@ -80,14 +70,7 @@ const NextPrevImageButtons = () => {
           />
         )}
         {isOnLastImage && areMoreImagesAvailable && isFetching && (
-          <Flex
-            sx={{
-              w: 16,
-              h: 16,
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}
-          >
+          <Flex w={16} h={16} alignItems="center" justifyContent="center">
             <Spinner opacity={0.5} size="xl" />
           </Flex>
         )}
diff --git a/invokeai/frontend/web/src/features/lora/components/LoRASelect.tsx b/invokeai/frontend/web/src/features/lora/components/LoRASelect.tsx
index d70d4b689b..ceca745596 100644
--- a/invokeai/frontend/web/src/features/lora/components/LoRASelect.tsx
+++ b/invokeai/frontend/web/src/features/lora/components/LoRASelect.tsx
@@ -69,7 +69,7 @@ const LoRASelect = () => {
         noOptionsMessage={noOptionsMessage}
         onChange={onChange}
         data-testid="add-lora"
-        sx={{ w: 'full' }}
+        w="full"
       />
     </InvControl>
   );
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AddModels.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AddModels.tsx
index 4ce311db4f..8746bc4dac 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AddModels.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AddModels.tsx
@@ -41,13 +41,7 @@ export default function AddModels() {
           {t('common.advanced')}
         </InvButton>
       </InvButtonGroup>
-      <Flex
-        sx={{
-          p: 4,
-          borderRadius: 4,
-          background: 'base.800',
-        }}
-      >
+      <Flex p={4} borderRadius={4} bg="base.800">
         {addModelMode === 'simple' && <SimpleAddModels />}
         {addModelMode === 'advanced' && <AdvancedAddModels />}
       </Flex>
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx
index 1bb0d58ac0..167977c8e4 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx
@@ -148,7 +148,7 @@ export default function AdvancedAddCheckpoint(
           {!useCustomConfig ? (
             <CheckpointConfigsSelect
               required
-              sx={{ w: 'full' }}
+              w="full"
               {...advancedAddCheckpointForm.getInputProps('config')}
             />
           ) : (
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddModels.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddModels.tsx
index 9def04b11b..cd98f8e11e 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddModels.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddModels.tsx
@@ -48,13 +48,7 @@ export default function AdvancedAddModels() {
         <InvSelect value={value} options={options} onChange={handleChange} />
       </InvControl>
 
-      <Flex
-        sx={{
-          p: 4,
-          borderRadius: 4,
-          bg: 'base.850',
-        }}
-      >
+      <Flex p={4} borderRadius={4} bg="base.850">
         {advancedAddMode === 'diffusers' && <AdvancedAddDiffusers />}
         {advancedAddMode === 'checkpoint' && <AdvancedAddCheckpoint />}
       </Flex>
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/FoundModelsList.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/FoundModelsList.tsx
index 7b3f09595a..d8c9adc6e7 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/FoundModelsList.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/FoundModelsList.tsx
@@ -110,25 +110,18 @@ export default function FoundModelsList() {
     return models.map((model) => {
       return (
         <Flex
-          sx={{
-            p: 4,
-            gap: 4,
-            alignItems: 'center',
-            borderRadius: 4,
-            bg: 'base.800',
-          }}
           key={model}
+          p={4}
+          gap={4}
+          alignItems="center"
+          borderRadius={4}
+          bg="base.800"
         >
-          <Flex w="100%" sx={{ flexDirection: 'column', minW: '25%' }}>
-            <InvText sx={{ fontWeight: 'semibold' }}>
+          <Flex w="full" minW="25%" flexDir="column">
+            <InvText fontWeight="semibold">
               {model.split('\\').slice(-1)[0]}
             </InvText>
-            <InvText
-              sx={{
-                fontSize: 'sm',
-                color: 'base.400',
-              }}
-            >
+            <InvText fontSize="sm" color="base.400">
               {model}
             </InvText>
           </Flex>
@@ -150,13 +143,11 @@ export default function FoundModelsList() {
             </Flex>
           ) : (
             <InvText
-              sx={{
-                fontWeight: 'semibold',
-                p: 2,
-                borderRadius: 4,
-                color: 'blue.100',
-                bg: 'blue.600',
-              }}
+              fontWeight="semibold"
+              p={2}
+              borderRadius={4}
+              color="blue.100"
+              bg="blue.600"
             >
               {t('common.installed')}
             </InvText>
@@ -174,15 +165,13 @@ export default function FoundModelsList() {
     if (!foundModels || foundModels.length === 0) {
       return (
         <Flex
-          sx={{
-            w: 'full',
-            h: 'full',
-            justifyContent: 'center',
-            alignItems: 'center',
-            height: 96,
-            userSelect: 'none',
-            bg: 'base.900',
-          }}
+          w="full"
+          h="full"
+          justifyContent="center"
+          alignItems="center"
+          height={96}
+          userSelect="none"
+          bg="base.900"
         >
           <InvText variant="subtext">{t('modelManager.noModels')}</InvText>
         </Flex>
@@ -190,27 +179,15 @@ export default function FoundModelsList() {
     }
 
     return (
-      <Flex
-        sx={{
-          flexDirection: 'column',
-          gap: 2,
-          w: '100%',
-          minW: '50%',
-        }}
-      >
+      <Flex flexDirection="column" gap={2} w="100%" minW="50%">
         <InvControl label={t('modelManager.search')}>
           <InvInput onChange={handleSearchFilter} />
         </InvControl>
         <Flex p={2} gap={2}>
-          <InvText sx={{ fontWeight: 'semibold' }}>
+          <InvText fontWeight="semibold">
             {t('modelManager.modelsFound')}: {foundModels.length}
           </InvText>
-          <InvText
-            sx={{
-              fontWeight: 'semibold',
-              color: 'blue.200',
-            }}
-          >
+          <InvText fontWeight="semibold" color="blue.200">
             {t('common.notInstalled')}: {filteredModels.length}
           </InvText>
         </Flex>
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx
index 0176892a76..d767655e6b 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx
@@ -10,7 +10,6 @@ import type {
 } from 'common/components/InvSelect/types';
 import { InvText } from 'common/components/InvText/wrapper';
 import { setAdvancedAddScanModel } from 'features/modelManager/store/modelManagerSlice';
-import { motion } from 'framer-motion';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaTimes } from 'react-icons/fa';
@@ -79,20 +78,15 @@ export default function ScanAdvancedAddModels() {
 
   return (
     <Box
-      as={motion.div}
-      initial={{ x: -100, opacity: 0 }}
-      animate={{ x: 0, opacity: 1, transition: { duration: 0.2 } }}
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        minWidth: '40%',
-        maxHeight: window.innerHeight - 300,
-        overflow: 'scroll',
-        p: 4,
-        gap: 4,
-        borderRadius: 4,
-        bg: 'base.800',
-      }}
+      display="flex"
+      flexDirection="column"
+      minWidth="40%"
+      maxHeight="calc(100vh - 300px)"
+      overflow="scroll"
+      p={4}
+      gap={4}
+      borderRadius={4}
+      bg="base.800"
     >
       <Flex justifyContent="space-between" alignItems="center">
         <InvText size="xl" fontWeight="semibold">
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanModels.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanModels.tsx
index 66be9de98a..9886cdaeb4 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanModels.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanModels.tsx
@@ -10,12 +10,10 @@ export default function ScanModels() {
       <SearchFolderForm />
       <Flex gap={4}>
         <Flex
-          sx={{
-            maxHeight: window.innerHeight - 300,
-            overflow: 'scroll',
-            gap: 4,
-            w: '100%',
-          }}
+          maxHeight="calc(100vh - 300px)"
+          overflow="scroll"
+          gap={4}
+          w="100%"
         >
           <FoundModelsList />
         </Flex>
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SearchFolderForm.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SearchFolderForm.tsx
index 0b9b9f186f..9781c81808 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SearchFolderForm.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SearchFolderForm.tsx
@@ -59,22 +59,13 @@ function SearchFolderForm() {
       )}
       style={{ width: '100%' }}
     >
-      <Flex
-        sx={{
-          w: '100%',
-          gap: 2,
-          borderRadius: 4,
-          alignItems: 'center',
-        }}
-      >
+      <Flex w="100%" gap={2} borderRadius={4} alignItems="center">
         <Flex w="100%" alignItems="center" gap={4} minH={12}>
           <InvText
-            sx={{
-              fontSize: 'sm',
-              fontWeight: 'semibold',
-              color: 'base.300',
-              minW: 'max-content',
-            }}
+            fontSize="sm"
+            fontWeight="semibold"
+            color="base.300"
+            minW="max-content"
           >
             {t('common.folder')}
           </InvText>
@@ -86,15 +77,13 @@ function SearchFolderForm() {
             />
           ) : (
             <Flex
-              sx={{
-                w: '100%',
-                p: 2,
-                px: 4,
-                bg: 'base.700',
-                borderRadius: 4,
-                fontSize: 'sm',
-                fontWeight: 'bold',
-              }}
+              w="100%"
+              p={2}
+              px={4}
+              bg="base.700"
+              borderRadius={4}
+              fontSize="sm"
+              fontWeight="bold"
             >
               {searchFolder}
             </Flex>
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/MergeModelsPanel.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/MergeModelsPanel.tsx
index 045321449f..cbfed933e6 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/MergeModelsPanel.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/MergeModelsPanel.tsx
@@ -259,13 +259,8 @@ export default function MergeModelsPanel() {
   ]);
 
   return (
-    <Flex flexDirection="column" rowGap={4}>
-      <Flex
-        sx={{
-          flexDirection: 'column',
-          rowGap: 1,
-        }}
-      >
+    <Flex flexDir="column" gap={4}>
+      <Flex flexDir="column" gap={1}>
         <InvText>{t('modelManager.modelMergeHeaderHelp1')}</InvText>
         <InvText fontSize="sm" variant="subtext">
           {t('modelManager.modelMergeHeaderHelp2')}
@@ -273,28 +268,28 @@ export default function MergeModelsPanel() {
       </Flex>
 
       <Flex columnGap={4}>
-        <InvControl label={t('modelManager.modelType')} sx={{ w: 'full' }}>
+        <InvControl label={t('modelManager.modelType')} w="full">
           <InvSelect
             options={baseModelTypeSelectOptions}
             value={valueBaseModel}
             onChange={onChangeBaseModel}
           />
         </InvControl>
-        <InvControl label={t('modelManager.modelOne')} sx={{ w: 'full' }}>
+        <InvControl label={t('modelManager.modelOne')} w="full">
           <InvSelect
             options={optionsModelOne}
             value={valueModelOne}
             onChange={onChangeModelOne}
           />
         </InvControl>
-        <InvControl label={t('modelManager.modelTwo')} sx={{ w: 'full' }}>
+        <InvControl label={t('modelManager.modelTwo')} w="full">
           <InvSelect
             options={optionsModelTwo}
             value={valueModelTwo}
             onChange={onChangeModelTwo}
           />
         </InvControl>
-        <InvControl label={t('modelManager.modelThree')} sx={{ w: 'full' }}>
+        <InvControl label={t('modelManager.modelThree')} w="full">
           <InvSelect
             options={optionsModelThree}
             value={valueModelThree}
@@ -312,13 +307,11 @@ export default function MergeModelsPanel() {
       </InvControl>
 
       <Flex
-        sx={{
-          flexDirection: 'column',
-          padding: 4,
-          borderRadius: 'base',
-          gap: 4,
-          bg: 'base.800',
-        }}
+        flexDirection="column"
+        padding={4}
+        borderRadius="base"
+        gap={4}
+        bg="base.800"
       >
         <InvControl
           label={t('modelManager.alpha')}
@@ -337,14 +330,7 @@ export default function MergeModelsPanel() {
         </InvControl>
       </Flex>
 
-      <Flex
-        sx={{
-          padding: 4,
-          borderRadius: 'base',
-          gap: 4,
-          bg: 'base.800',
-        }}
-      >
+      <Flex padding={4} gap={4} borderRadius="base" bg="base.800">
         <InvText fontSize="sm" variant="subtext">
           {t('modelManager.interpolationType')}
         </InvText>
@@ -382,13 +368,11 @@ export default function MergeModelsPanel() {
       </Flex>
 
       <Flex
-        sx={{
-          flexDirection: 'column',
-          padding: 4,
-          borderRadius: 'base',
-          gap: 4,
-          bg: 'base.900',
-        }}
+        flexDirection="column"
+        padding={4}
+        borderRadius="base"
+        gap={4}
+        bg="base.900"
       >
         <Flex columnGap={4}>
           <InvText fontSize="sm" variant="subtext">
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel.tsx
index 0dbc65f078..91ad0ec0fe 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel.tsx
@@ -34,7 +34,7 @@ export default function ModelManagerPanel() {
   const model = mainModel ? mainModel : loraModel;
 
   return (
-    <Flex sx={{ gap: 8, w: 'full', h: 'full' }}>
+    <Flex gap={8} w="full" h="full">
       <ModelList
         selectedModelId={selectedModelId}
         setSelectedModelId={setSelectedModelId}
@@ -71,14 +71,12 @@ const ModelEdit = (props: ModelEditProps) => {
 
   return (
     <Flex
-      sx={{
-        w: 'full',
-        h: 'full',
-        justifyContent: 'center',
-        alignItems: 'center',
-        maxH: 96,
-        userSelect: 'none',
-      }}
+      w="full"
+      h="full"
+      justifyContent="center"
+      alignItems="center"
+      maxH={96}
+      userSelect="none"
     >
       <InvText variant="subtext">{t('modelManager.noModelSelected')}</InvText>
     </Flex>
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx
index 18628e6196..f01a19fc17 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx
@@ -123,13 +123,7 @@ export default function CheckpointModelEdit(props: CheckpointModelEditProps) {
         {![''].includes(model.base_model) ? (
           <ModelConvert model={model} />
         ) : (
-          <Badge
-            sx={{
-              p: 2,
-              borderRadius: 4,
-              bg: 'error.400',
-            }}
-          >
+          <Badge p={2} borderRadius={4} bg="error.400">
             {t('modelManager.conversionNotSupported')}
           </Badge>
         )}
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelList.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelList.tsx
index d88cbaae5b..b2e012982f 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelList.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelList.tsx
@@ -272,15 +272,7 @@ const modelsFilter = <
 
 const StyledModelContainer = memo((props: PropsWithChildren) => {
   return (
-    <Flex
-      flexDirection="column"
-      gap={4}
-      borderRadius={4}
-      p={4}
-      sx={{
-        bg: 'base.800',
-      }}
-    >
+    <Flex flexDirection="column" gap={4} borderRadius={4} p={4} bg="base.800">
       {props.children}
     </Flex>
   );
@@ -301,7 +293,7 @@ const ModelListWrapper = memo((props: ModelListWrapperProps) => {
   const { title, modelList, selected } = props;
   return (
     <StyledModelContainer>
-      <Flex sx={{ gap: 2, flexDir: 'column' }}>
+      <Flex gap={2} flexDir="column">
         <InvText variant="subtext" fontSize="sm">
           {title}
         </InvText>
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelListItem.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelListItem.tsx
index 90a4e9f78a..7e23d0f7c6 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelListItem.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelListItem.tsx
@@ -84,23 +84,16 @@ export default function ModelListItem(props: ModelListItemProps) {
   ]);
 
   return (
-    <Flex sx={{ gap: 2, alignItems: 'center', w: 'full' }}>
+    <Flex gap={2} alignItems="center" w="full">
       <Flex
         as={InvButton}
         isChecked={isSelected}
-        sx={{
-          justifyContent: 'start',
-          p: 2,
-          borderRadius: 'base',
-          w: 'full',
-          alignItems: 'center',
-          color: isSelected ? 'base.50' : 'base.100',
-          bg: isSelected ? 'blue.600' : 'base.850',
-          _hover: {
-            color: isSelected ? 'base.50' : 'base.100',
-            bg: isSelected ? 'blue.550' : 'base.700',
-          },
-        }}
+        variant={isSelected ? 'solid' : 'ghost'}
+        justifyContent="start"
+        p={2}
+        borderRadius="base"
+        w="full"
+        alignItems="center"
         onClick={handleSelectModel}
       >
         <Flex gap={4} alignItems="center">
diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel/SyncModels.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel/SyncModels.tsx
index cd5c890cc9..494df74d95 100644
--- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel/SyncModels.tsx
+++ b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel/SyncModels.tsx
@@ -8,26 +8,17 @@ export default function SyncModels() {
 
   return (
     <Flex
-      sx={{
-        w: 'full',
-        p: 4,
-        borderRadius: 4,
-        gap: 4,
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        bg: 'base.800',
-      }}
+      w="full"
+      p={4}
+      borderRadius={4}
+      gap={4}
+      justifyContent="space-between"
+      alignItems="center"
+      bg="base.800"
     >
-      <Flex
-        sx={{
-          flexDirection: 'column',
-          gap: 2,
-        }}
-      >
-        <InvText sx={{ fontWeight: 'semibold' }}>
-          {t('modelManager.syncModels')}
-        </InvText>
-        <InvText fontSize="sm" sx={{ color: 'base.400' }}>
+      <Flex flexDirection="column" gap={2}>
+        <InvText fontWeight="semibold">{t('modelManager.syncModels')}</InvText>
+        <InvText fontSize="sm" variant="subtext">
           {t('modelManager.syncModelsDesc')}
         </InvText>
       </Flex>
diff --git a/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx b/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx
index 8ded58b72d..2a9682c7d2 100644
--- a/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx
@@ -20,14 +20,12 @@ const NodeEditor = () => {
   return (
     <Flex
       layerStyle="first"
-      sx={{
-        position: 'relative',
-        width: 'full',
-        height: 'full',
-        borderRadius: 'base',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
+      position="relative"
+      width="full"
+      height="full"
+      borderRadius="base"
+      alignItems="center"
+      justifyContent="center"
     >
       <AnimatePresence>
         {isReady && (
@@ -71,15 +69,13 @@ const NodeEditor = () => {
           >
             <Flex
               layerStyle="first"
-              sx={{
-                position: 'relative',
-                width: 'full',
-                height: 'full',
-                borderRadius: 'base',
-                alignItems: 'center',
-                justifyContent: 'center',
-                pointerEvents: 'none',
-              }}
+              position="relative"
+              width="full"
+              height="full"
+              borderRadius="base"
+              alignItems="center"
+              justifyContent="center"
+              pointerEvents="none"
             >
               <IAINoContentFallback
                 label={t('nodes.loadingNodes')}
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx
index 0367eb8075..f7e4458799 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx
@@ -230,9 +230,6 @@ const AddNodePopover = () => {
             onChange={onChange}
             onMenuClose={onClose}
             onKeyDown={onKeyDown}
-            sx={{
-              width: 'full',
-            }}
           />
         </InvPopoverBody>
       </InvPopoverContent>
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationCollapsedEdge.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationCollapsedEdge.tsx
index c5db3a84c3..2d2abf1cef 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationCollapsedEdge.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationCollapsedEdge.tsx
@@ -65,19 +65,15 @@ const InvocationCollapsedEdge = ({
       {data?.count && data.count > 1 && (
         <EdgeLabelRenderer>
           <Flex
-            sx={{
-              position: 'absolute',
-              transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
-            }}
+            position="absolute"
+            transform={`translate(-50%, -50%) translate(${labelX}px,${labelY}px)`}
             className="nodrag nopan"
           >
             <Badge
               variant="solid"
-              sx={{
-                bg: 'base.500',
-                opacity: isSelected ? 0.8 : 0.5,
-                boxShadow: 'base',
-              }}
+              bg="base.500"
+              opacity={isSelected ? 0.8 : 0.5}
+              boxShadow="base"
             >
               {data.count}
             </Badge>
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/CurrentImage/CurrentImageNode.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/CurrentImage/CurrentImageNode.tsx
index 628c818e88..e8a084f775 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/CurrentImage/CurrentImageNode.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/CurrentImage/CurrentImageNode.tsx
@@ -34,12 +34,10 @@ const CurrentImageNode = (props: NodeProps) => {
       <Wrapper nodeProps={props}>
         <Image
           src={progressImage.dataURL}
-          sx={{
-            w: 'full',
-            h: 'full',
-            objectFit: 'contain',
-            borderRadius: 'base',
-          }}
+          w="full"
+          h="full"
+          objectFit="contain"
+          borderRadius="base"
         />
       </Wrapper>
     );
@@ -83,38 +81,26 @@ const Wrapper = (props: PropsWithChildren<{ nodeProps: NodeProps }>) => {
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
         className={DRAG_HANDLE_CLASSNAME}
-        sx={{
-          position: 'relative',
-          flexDirection: 'column',
-        }}
+        position="relative"
+        flexDirection="column"
       >
         <Flex
           layerStyle="nodeHeader"
-          sx={{
-            borderTopRadius: 'base',
-            alignItems: 'center',
-            justifyContent: 'center',
-            h: 8,
-          }}
+          borderTopRadius="base"
+          alignItems="center"
+          justifyContent="center"
+          h={8}
         >
-          <InvText
-            sx={{
-              fontSize: 'sm',
-              fontWeight: 'semibold',
-              color: 'base.200',
-            }}
-          >
+          <InvText fontSize="sm" fontWeight="semibold" color="base.200">
             {t('nodes.currentImage')}
           </InvText>
         </Flex>
         <Flex
           layerStyle="nodeBody"
-          sx={{
-            w: 'full',
-            h: 'full',
-            borderBottomRadius: 'base',
-            p: 2,
-          }}
+          w="full"
+          h="full"
+          borderBottomRadius="base"
+          p={2}
         >
           {props.children}
           {isHovering && (
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNode.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNode.tsx
index 5cd420e3ce..9e55cc194f 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNode.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNode.tsx
@@ -38,16 +38,14 @@ const InvocationNode = ({ nodeId, isOpen, label, type, selected }: Props) => {
         <>
           <Flex
             layerStyle="nodeBody"
-            sx={{
-              flexDirection: 'column',
-              w: 'full',
-              h: 'full',
-              py: 2,
-              gap: 1,
-              borderBottomRadius: withFooter ? 0 : 'base',
-            }}
+            flexDirection="column"
+            w="full"
+            h="full"
+            py={2}
+            gap={1}
+            borderBottomRadius={withFooter ? 0 : 'base'}
           >
-            <Flex sx={{ flexDir: 'column', px: 2, w: 'full', h: 'full' }}>
+            <Flex flexDir="column" px={2} w="full" h="full">
               <Grid gridTemplateColumns="1fr auto" gridAutoRows="1fr">
                 {inputConnectionFieldNames.map((fieldName, i) => (
                   <GridItem
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeClassificationIcon.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeClassificationIcon.tsx
index d6d08f856f..0aa2316fa8 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeClassificationIcon.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeClassificationIcon.tsx
@@ -26,11 +26,9 @@ const InvocationNodeClassificationIcon = ({ nodeId }: Props) => {
     >
       <Icon
         as={getIcon(classification)}
-        sx={{
-          display: 'block',
-          boxSize: 4,
-          color: 'base.400',
-        }}
+        display="block"
+        boxSize={4}
+        color="base.400"
       />
     </InvTooltip>
   );
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeFooter.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeFooter.tsx
index 2c4efc746f..024c4122bd 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeFooter.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeFooter.tsx
@@ -18,14 +18,12 @@ const InvocationNodeFooter = ({ nodeId }: Props) => {
     <Flex
       className={DRAG_HANDLE_CLASSNAME}
       layerStyle="nodeFooter"
-      sx={{
-        w: 'full',
-        borderBottomRadius: 'base',
-        px: 2,
-        py: 0,
-        h: 8,
-        justifyContent: 'space-between',
-      }}
+      w="full"
+      borderBottomRadius="base"
+      px={2}
+      py={0}
+      h={8}
+      justifyContent="space-between"
     >
       {isCacheEnabled && <UseCacheCheckbox nodeId={nodeId} />}
       {hasImageOutput && <SaveToGalleryCheckbox nodeId={nodeId} />}
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeHeader.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeHeader.tsx
index e099d81360..a576f3e798 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeHeader.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeHeader.tsx
@@ -20,15 +20,13 @@ const InvocationNodeHeader = ({ nodeId, isOpen }: Props) => {
   return (
     <Flex
       layerStyle="nodeHeader"
-      sx={{
-        borderTopRadius: 'base',
-        borderBottomRadius: isOpen ? 0 : 'base',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        h: 8,
-        textAlign: 'center',
-        color: 'base.200',
-      }}
+      borderTopRadius="base"
+      borderBottomRadius={isOpen ? 0 : 'base'}
+      alignItems="center"
+      justifyContent="space-between"
+      h={8}
+      textAlign="center"
+      color="base.200"
     >
       <NodeCollapseButton nodeId={nodeId} isOpen={isOpen} />
       <InvocationNodeClassificationIcon nodeId={nodeId} />
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeInfoIcon.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeInfoIcon.tsx
index 4a8f716fe3..c210642ea3 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeInfoIcon.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeInfoIcon.tsx
@@ -25,12 +25,10 @@ const InvocationNodeInfoIcon = ({ nodeId }: Props) => {
     >
       <Icon
         as={FaInfoCircle}
-        sx={{
-          display: 'block',
-          boxSize: 4,
-          w: 8,
-          color: needsUpdate ? 'error.400' : 'base.400',
-        }}
+        display="block"
+        boxSize={4}
+        w={8}
+        color={needsUpdate ? 'error.400' : 'base.400'}
       />
     </InvTooltip>
   );
@@ -66,7 +64,7 @@ const TooltipContent = memo(({ nodeId }: { nodeId: string }) => {
 
     if (!data.version) {
       return (
-        <InvText as="span" sx={{ color: 'error.500' }}>
+        <InvText as="span" color="error.500">
           {t('nodes.versionUnknown')}
         </InvText>
       );
@@ -74,7 +72,7 @@ const TooltipContent = memo(({ nodeId }: { nodeId: string }) => {
 
     if (!nodeTemplate.version) {
       return (
-        <InvText as="span" sx={{ color: 'error.500' }}>
+        <InvText as="span" color="error.500">
           {t('nodes.version')} {data.version} ({t('nodes.unknownTemplate')})
         </InvText>
       );
@@ -82,7 +80,7 @@ const TooltipContent = memo(({ nodeId }: { nodeId: string }) => {
 
     if (compare(data.version, nodeTemplate.version, '<')) {
       return (
-        <InvText as="span" sx={{ color: 'error.500' }}>
+        <InvText as="span" color="error.500">
           {t('nodes.version')} {data.version} ({t('nodes.updateNode')})
         </InvText>
       );
@@ -90,7 +88,7 @@ const TooltipContent = memo(({ nodeId }: { nodeId: string }) => {
 
     if (compare(data.version, nodeTemplate.version, '>')) {
       return (
-        <InvText as="span" sx={{ color: 'error.500' }}>
+        <InvText as="span" color="error.500">
           {t('nodes.version')} {data.version} ({t('nodes.updateApp')})
         </InvText>
       );
@@ -104,16 +102,12 @@ const TooltipContent = memo(({ nodeId }: { nodeId: string }) => {
   }, [data, nodeTemplate, t]);
 
   if (!isInvocationNodeData(data)) {
-    return (
-      <InvText sx={{ fontWeight: 'semibold' }}>
-        {t('nodes.unknownNode')}
-      </InvText>
-    );
+    return <InvText fontWeight="semibold">{t('nodes.unknownNode')}</InvText>;
   }
 
   return (
-    <Flex sx={{ flexDir: 'column' }}>
-      <InvText as="span" sx={{ fontWeight: 'semibold' }}>
+    <Flex flexDir="column">
+      <InvText as="span" fontWeight="semibold">
         {title}
       </InvText>
       {nodeTemplate?.nodePack && (
@@ -121,7 +115,7 @@ const TooltipContent = memo(({ nodeId }: { nodeId: string }) => {
           {t('nodes.nodePack')}: {nodeTemplate.nodePack}
         </InvText>
       )}
-      <InvText sx={{ opacity: 0.7, fontStyle: 'oblique 5deg' }}>
+      <InvText opacity={0.7} fontStyle="oblique 5deg">
         {nodeTemplate?.description}
       </InvText>
       {versionComponent}
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeStatusIndicator.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeStatusIndicator.tsx
index fc4c2c0fad..186428f446 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeStatusIndicator.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeStatusIndicator.tsx
@@ -1,3 +1,4 @@
+import type { SystemStyleObject } from '@chakra-ui/react';
 import { Badge, CircularProgress, Flex, Icon, Image } from '@chakra-ui/react';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { stateSelector } from 'app/store/store';
@@ -16,7 +17,7 @@ type Props = {
 };
 
 const iconBoxSize = 3;
-const circleStyles = {
+const circleStyles: SystemStyleObject = {
   circle: {
     transitionProperty: 'none',
     transitionDuration: '0s',
@@ -47,12 +48,10 @@ const InvocationNodeStatusIndicator = ({ nodeId }: Props) => {
     >
       <Flex
         className={DRAG_HANDLE_CLASSNAME}
-        sx={{
-          w: 5,
-          h: 'full',
-          alignItems: 'center',
-          justifyContent: 'flex-end',
-        }}
+        w={5}
+        h="full"
+        alignItems="center"
+        justifyContent="flex-end"
       >
         <StatusIcon nodeExecutionState={nodeExecutionState} />
       </Flex>
@@ -75,16 +74,16 @@ const TooltipLabel = memo(({ nodeExecutionState }: TooltipLabelProps) => {
   if (status === zNodeStatus.enum.IN_PROGRESS) {
     if (progressImage) {
       return (
-        <Flex sx={{ pos: 'relative', pt: 1.5, pb: 0.5 }}>
+        <Flex pos="relative" pt={1.5} pb={0.5}>
           <Image
             src={progressImage.dataURL}
-            sx={{ w: 32, h: 32, borderRadius: 'base', objectFit: 'contain' }}
+            w={32}
+            h={32}
+            borderRadius="base"
+            objectFit="contain"
           />
           {progress !== null && (
-            <Badge
-              variant="solid"
-              sx={{ pos: 'absolute', top: 2.5, insetInlineEnd: 1 }}
-            >
+            <Badge variant="solid" pos="absolute" top={2.5} insetInlineEnd={1}>
               {Math.round(progress * 100)}%
             </Badge>
           )}
@@ -123,15 +122,7 @@ type StatusIconProps = {
 const StatusIcon = memo((props: StatusIconProps) => {
   const { progress, status } = props.nodeExecutionState;
   if (status === zNodeStatus.enum.PENDING) {
-    return (
-      <Icon
-        as={FaEllipsisH}
-        sx={{
-          boxSize: iconBoxSize,
-          color: 'base.300',
-        }}
-      />
-    );
+    return <Icon as={FaEllipsisH} boxSize={iconBoxSize} color="base.300" />;
   }
   if (status === zNodeStatus.enum.IN_PROGRESS) {
     return progress === null ? (
@@ -153,26 +144,10 @@ const StatusIcon = memo((props: StatusIconProps) => {
     );
   }
   if (status === zNodeStatus.enum.COMPLETED) {
-    return (
-      <Icon
-        as={FaCheck}
-        sx={{
-          boxSize: iconBoxSize,
-          color: 'ok.300',
-        }}
-      />
-    );
+    return <Icon as={FaCheck} boxSize={iconBoxSize} color="ok.300" />;
   }
   if (status === zNodeStatus.enum.FAILED) {
-    return (
-      <Icon
-        as={FaExclamation}
-        sx={{
-          boxSize: iconBoxSize,
-          color: 'error.300',
-        }}
-      />
-    );
+    return <Icon as={FaExclamation} boxSize={iconBoxSize} color="error.300" />;
   }
   return null;
 });
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeUnknownFallback.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeUnknownFallback.tsx
index 6c7bffc194..7a3bcbac92 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeUnknownFallback.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNodeUnknownFallback.tsx
@@ -29,40 +29,29 @@ const InvocationNodeUnknownFallback = ({
       <Flex
         className={DRAG_HANDLE_CLASSNAME}
         layerStyle="nodeHeader"
-        sx={{
-          borderTopRadius: 'base',
-          borderBottomRadius: isOpen ? 0 : 'base',
-          alignItems: 'center',
-          h: 8,
-          fontWeight: 'semibold',
-          fontSize: 'sm',
-        }}
+        borderTopRadius="base"
+        borderBottomRadius={isOpen ? 0 : 'base'}
+        alignItems="center"
+        h={8}
+        fontWeight="semibold"
+        fontSize="sm"
       >
         <NodeCollapseButton nodeId={nodeId} isOpen={isOpen} />
-        <InvText
-          sx={{
-            w: 'full',
-            textAlign: 'center',
-            pe: 8,
-            color: 'error.300',
-          }}
-        >
+        <InvText w="full" textAlign="center" pe={8} color="error.300">
           {label ? `${label} (${type})` : type}
         </InvText>
       </Flex>
       {isOpen && (
         <Flex
           layerStyle="nodeBody"
-          sx={{
-            userSelect: 'auto',
-            flexDirection: 'column',
-            w: 'full',
-            h: 'full',
-            p: 4,
-            gap: 1,
-            borderBottomRadius: 'base',
-            fontSize: 'sm',
-          }}
+          userSelect="auto"
+          flexDirection="column"
+          w="full"
+          h="full"
+          p={4}
+          gap={1}
+          borderBottomRadius="base"
+          fontSize="sm"
         >
           <Flex gap={2} flexDir="column">
             <InvText as="span">
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/EditableFieldTitle.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/EditableFieldTitle.tsx
index e9ce15ade0..0302ab968c 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/EditableFieldTitle.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/EditableFieldTitle.tsx
@@ -1,3 +1,4 @@
+import type { SystemStyleObject } from '@chakra-ui/react';
 import {
   Editable,
   EditableInput,
@@ -78,51 +79,28 @@ const EditableFieldTitle = forwardRef((props: Props, ref) => {
     >
       <Flex
         ref={ref}
-        sx={{
-          position: 'relative',
-          overflow: 'hidden',
-          alignItems: 'center',
-          justifyContent: 'flex-start',
-          gap: 1,
-          h: 'full',
-        }}
+        position="relative"
+        overflow="hidden"
+        alignItems="center"
+        justifyContent="flex-start"
+        gap={1}
+        h="full"
       >
         <Editable
           value={localTitle}
           onChange={handleChange}
           onSubmit={handleSubmit}
           as={Flex}
-          sx={{
-            position: 'relative',
-            alignItems: 'center',
-            h: 'full',
-          }}
+          position="relative"
+          alignItems="center"
+          h="full"
         >
           <EditablePreview
-            sx={{
-              p: 0,
-              fontWeight: isMissingInput ? 'bold' : 'normal',
-              textAlign: 'left',
-              _hover: {
-                fontWeight: 'semibold !important',
-              },
-            }}
+            fontWeight={isMissingInput ? 'bold' : 'normal'}
+            sx={editablePreviewStyles}
             noOfLines={1}
           />
-          <EditableInput
-            className="nodrag"
-            sx={{
-              p: 0,
-              w: 'full',
-              fontWeight: 'semibold',
-              color: 'base.100',
-              _focusVisible: {
-                p: 0,
-                textAlign: 'left',
-                boxShadow: 'none',
-              },
-            }}
-          />
+          <EditableInput className="nodrag" sx={editableInputStyles} />
           <EditableControls />
         </Editable>
       </Flex>
@@ -130,6 +108,25 @@ const EditableFieldTitle = forwardRef((props: Props, ref) => {
   );
 });
 
+const editableInputStyles: SystemStyleObject = {
+  p: 0,
+  w: 'full',
+  fontWeight: 'semibold',
+  color: 'base.100',
+  _focusVisible: {
+    p: 0,
+    textAlign: 'left',
+    boxShadow: 'none',
+  },
+};
+const editablePreviewStyles: SystemStyleObject = {
+  p: 0,
+  textAlign: 'left',
+  _hover: {
+    fontWeight: 'semibold !important',
+  },
+};
+
 export default memo(EditableFieldTitle);
 
 const EditableControls = memo(() => {
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldContextMenu.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldContextMenu.tsx
index 5973bcaa17..0afa3b8b1a 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldContextMenu.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldContextMenu.tsx
@@ -103,10 +103,7 @@ const FieldContextMenu = ({ nodeId, fieldName, kind, children }: Props) => {
   const renderMenuFunc = useCallback(
     () =>
       !menuItems.length ? null : (
-        <InvMenuList
-          sx={{ visibility: 'visible !important' }}
-          onContextMenu={skipEvent}
-        >
+        <InvMenuList visibility="visible" onContextMenu={skipEvent}>
           <InvMenuGroup
             title={label || fieldTemplateTitle || t('nodes.unknownField')}
           >
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldTitle.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldTitle.tsx
index b0b6a3f318..d7ccddcf8b 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldTitle.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldTitle.tsx
@@ -19,17 +19,15 @@ const FieldTitle = forwardRef((props: Props, ref) => {
   return (
     <Flex
       ref={ref}
-      sx={{
-        position: 'relative',
-        overflow: 'hidden',
-        alignItems: 'center',
-        justifyContent: 'flex-start',
-        gap: 1,
-        h: 'full',
-        w: 'full',
-      }}
+      position="relative"
+      overflow="hidden"
+      alignItems="center"
+      justifyContent="flex-start"
+      gap={1}
+      h="full"
+      w="full"
     >
-      <InvText sx={{ fontWeight: isMissingInput ? 'bold' : 'normal' }}>
+      <InvText fontWeight={isMissingInput ? 'bold' : 'normal'}>
         {label || fieldTemplateTitle}
       </InvText>
     </Flex>
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldTooltipContent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldTooltipContent.tsx
index 89fa50a5c3..90d870fdd1 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldTooltipContent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldTooltipContent.tsx
@@ -43,10 +43,10 @@ const FieldTooltipContent = ({ nodeId, fieldName, kind }: Props) => {
   }, [field, fieldTemplate, t]);
 
   return (
-    <Flex sx={{ flexDir: 'column' }}>
-      <InvText sx={{ fontWeight: 'semibold' }}>{fieldTitle}</InvText>
+    <Flex flexDir="column">
+      <InvText fontWeight="semibold">{fieldTitle}</InvText>
       {fieldTemplate && (
-        <InvText sx={{ opacity: 0.7, fontStyle: 'oblique 5deg' }}>
+        <InvText opacity={0.7} fontStyle="oblique 5deg">
           {fieldTemplate.description}
         </InvText>
       )}
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer.tsx
index dd094395d0..e59ab5b836 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer.tsx
@@ -292,13 +292,7 @@ const InputFieldRenderer = ({ nodeId, fieldName }: InputFieldProps) => {
 
   return (
     <Box p={1}>
-      <InvText
-        sx={{
-          fontSize: 'sm',
-          fontWeight: 'semibold',
-          color: 'error.300',
-        }}
-      >
+      <InvText fontSize="sm" fontWeight="semibold" color="error.300">
         {t('nodes.unknownFieldType', { type: fieldInstance?.type.name })}
       </InvText>
     </Box>
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputField.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputField.tsx
index df2ae5973f..18a91cbc0e 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputField.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/OutputField.tsx
@@ -97,16 +97,14 @@ type OutputFieldWrapperProps = PropsWithChildren<{
 const OutputFieldWrapper = memo(
   ({ shouldDim, children }: OutputFieldWrapperProps) => (
     <Flex
-      sx={{
-        position: 'relative',
-        minH: 8,
-        py: 0.5,
-        alignItems: 'center',
-        opacity: shouldDim ? 0.5 : 1,
-        transitionProperty: 'opacity',
-        transitionDuration: '0.1s',
-        justifyContent: 'flex-end',
-      }}
+      position="relative"
+      minH={8}
+      py={0.5}
+      alignItems="center"
+      opacity={shouldDim ? 0.5 : 1}
+      transitionProperty="opacity"
+      transitionDuration="0.1s"
+      justifyContent="flex-end"
     >
       {children}
     </Flex>
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/IPAdapterModelFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/IPAdapterModelFieldInputComponent.tsx
index 9fd27fd712..61c8484e63 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/IPAdapterModelFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/IPAdapterModelFieldInputComponent.tsx
@@ -56,7 +56,6 @@ const IPAdapterModelFieldInputComponent = (
           placeholder="Pick one"
           options={options}
           onChange={onChange}
-          sx={{ width: '100%' }}
         />
       </InvControl>
     </InvTooltip>
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldInputComponent.tsx
index ad5b70987f..cba0a9fb15 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldInputComponent.tsx
@@ -78,12 +78,10 @@ const ImageFieldInputComponent = (
   return (
     <Flex
       className="nodrag"
-      sx={{
-        w: 'full',
-        h: 'full',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
+      w="full"
+      h="full"
+      alignItems="center"
+      justifyContent="center"
     >
       <IAIDndImage
         imageDTO={imageDTO}
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/MainModelFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/MainModelFieldInputComponent.tsx
index a0fac5303a..a8bc974bee 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/MainModelFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/MainModelFieldInputComponent.tsx
@@ -48,7 +48,7 @@ const MainModelFieldInputComponent = (props: Props) => {
     });
 
   return (
-    <Flex sx={{ w: 'full', alignItems: 'center', gap: 2 }}>
+    <Flex w="full" alignItems="center" gap={2}>
       <InvControl
         className="nowheel nodrag"
         isDisabled={!options.length}
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/RefinerModelFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/RefinerModelFieldInputComponent.tsx
index 53026e2420..e7e403e81b 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/RefinerModelFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/RefinerModelFieldInputComponent.tsx
@@ -48,7 +48,7 @@ const RefinerModelFieldInputComponent = (props: Props) => {
     });
 
   return (
-    <Flex sx={{ w: 'full', alignItems: 'center', gap: 2 }}>
+    <Flex w="full" alignItems="center" gap={2}>
       <InvControl
         className="nowheel nodrag"
         isDisabled={!options.length}
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/SDXLMainModelFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/SDXLMainModelFieldInputComponent.tsx
index 8060dc16f8..253eba03e9 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/SDXLMainModelFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/SDXLMainModelFieldInputComponent.tsx
@@ -48,7 +48,7 @@ const SDXLMainModelFieldInputComponent = (props: Props) => {
     });
 
   return (
-    <Flex sx={{ w: 'full', alignItems: 'center', gap: 2 }}>
+    <Flex w="full" alignItems="center" gap={2}>
       <InvControl
         className="nowheel nodrag"
         isDisabled={!options.length}
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/T2IAdapterModelFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/T2IAdapterModelFieldInputComponent.tsx
index f5ed394ed7..a48de36d9c 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/T2IAdapterModelFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/T2IAdapterModelFieldInputComponent.tsx
@@ -57,7 +57,6 @@ const T2IAdapterModelFieldInputComponent = (
           placeholder="Pick one"
           options={options}
           onChange={onChange}
-          sx={{ width: '100%' }}
         />
       </InvControl>
     </InvTooltip>
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/VAEModelFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/VAEModelFieldInputComponent.tsx
index 1916054dfb..7bfe59acdc 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/VAEModelFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/VAEModelFieldInputComponent.tsx
@@ -48,7 +48,7 @@ const VAEModelFieldInputComponent = (props: Props) => {
     });
 
   return (
-    <Flex sx={{ w: 'full', alignItems: 'center', gap: 2 }}>
+    <Flex w="full" alignItems="center" gap={2}>
       <InvControl
         className="nowheel nodrag"
         isDisabled={!options.length}
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Notes/NotesNode.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Notes/NotesNode.tsx
index bef62bb067..ab790197cf 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Notes/NotesNode.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Notes/NotesNode.tsx
@@ -25,13 +25,11 @@ const NotesNode = (props: NodeProps<NotesNodeData>) => {
     <NodeWrapper nodeId={nodeId} selected={selected}>
       <Flex
         layerStyle="nodeHeader"
-        sx={{
-          borderTopRadius: 'base',
-          borderBottomRadius: isOpen ? 0 : 'base',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          h: 8,
-        }}
+        borderTopRadius="base"
+        borderBottomRadius={isOpen ? 0 : 'base'}
+        alignItems="center"
+        justifyContent="space-between"
+        h={8}
       >
         <NodeCollapseButton nodeId={nodeId} isOpen={isOpen} />
         <NodeTitle nodeId={nodeId} title="Notes" />
@@ -42,26 +40,21 @@ const NotesNode = (props: NodeProps<NotesNodeData>) => {
           <Flex
             layerStyle="nodeBody"
             className="nopan"
-            sx={{
-              cursor: 'auto',
-              flexDirection: 'column',
-              borderBottomRadius: 'base',
-              w: 'full',
-              h: 'full',
-              p: 2,
-              gap: 1,
-            }}
+            cursor="auto"
+            flexDirection="column"
+            borderBottomRadius="base"
+            w="full"
+            h="full"
+            p={2}
+            gap={1}
           >
-            <Flex
-              className="nopan"
-              sx={{ flexDir: 'column', w: 'full', h: 'full' }}
-            >
+            <Flex className="nopan" w="full" h="full" flexDir="column">
               <InvTextarea
                 value={notes}
                 onChange={handleChange}
                 rows={8}
                 resize="none"
-                sx={{ fontSize: 'xs' }}
+                fontSize="sm"
               />
             </Flex>
           </Flex>
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeCollapseButton.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeCollapseButton.tsx
index ba091e71bd..44a535d328 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeCollapseButton.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeCollapseButton.tsx
@@ -24,23 +24,15 @@ const NodeCollapseButton = ({ nodeId, isOpen }: Props) => {
       className="nodrag"
       onClick={handleClick}
       aria-label="Minimize"
-      sx={{
-        minW: 8,
-        w: 8,
-        h: 8,
-        color: 'base.500',
-        _hover: {
-          color: 'base.300',
-        },
-      }}
+      minW={8}
+      w={8}
+      h={8}
       variant="link"
       icon={
         <ChevronUpIcon
-          sx={{
-            transform: isOpen ? 'rotate(0deg)' : 'rotate(180deg)',
-            transitionProperty: 'common',
-            transitionDuration: 'normal',
-          }}
+          transform={isOpen ? 'rotate(0deg)' : 'rotate(180deg)'}
+          transitionProperty="common"
+          transitionDuration="normal"
         />
       }
     />
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeTitle.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeTitle.tsx
index 44248bf0b7..652eed8d45 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeTitle.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeTitle.tsx
@@ -1,3 +1,4 @@
+import type { SystemStyleObject } from '@chakra-ui/react';
 import {
   Box,
   Editable,
@@ -50,46 +51,28 @@ const NodeTitle = ({ nodeId, title }: Props) => {
 
   return (
     <Flex
-      sx={{
-        overflow: 'hidden',
-        w: 'full',
-        h: 'full',
-        alignItems: 'center',
-        justifyContent: 'center',
-        cursor: 'text',
-      }}
+      overflow="hidden"
+      w="full"
+      h="full"
+      alignItems="center"
+      justifyContent="center"
+      cursor="text"
     >
       <Editable
         as={Flex}
         value={localTitle}
         onChange={handleChange}
         onSubmit={handleSubmit}
-        sx={{
-          alignItems: 'center',
-          position: 'relative',
-          w: 'full',
-          h: 'full',
-        }}
+        alignItems="center"
+        position="relative"
+        w="full"
+        h="full"
       >
-        <EditablePreview
-          fontSize="sm"
-          sx={{
-            p: 0,
-            w: 'full',
-          }}
-          noOfLines={1}
-        />
+        <EditablePreview fontSize="sm" p={0} w="full" noOfLines={1} />
         <EditableInput
           className="nodrag"
           fontSize="sm"
-          sx={{
-            p: 0,
-            fontWeight: 'bold',
-            _focusVisible: {
-              p: 0,
-              boxShadow: 'none',
-            },
-          }}
+          sx={editableInputStyles}
         />
         <EditableControls />
       </Editable>
@@ -120,13 +103,19 @@ function EditableControls() {
     <Box
       className={DRAG_HANDLE_CLASSNAME}
       onDoubleClick={handleDoubleClick}
-      sx={{
-        position: 'absolute',
-        w: 'full',
-        h: 'full',
-        top: 0,
-        cursor: 'grab',
-      }}
+      position="absolute"
+      w="full"
+      h="full"
+      top={0}
+      cursor="grab"
     />
   );
 }
+
+const editableInputStyles: SystemStyleObject = {
+  p: 0,
+  fontWeight: 'bold',
+  _focusVisible: {
+    p: 0,
+  },
+};
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx
index e2bbbbdb83..e81ba17187 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx
@@ -18,7 +18,7 @@ import { memo, useCallback, useMemo } from 'react';
 type NodeWrapperProps = PropsWithChildren & {
   nodeId: string;
   selected: boolean;
-  width?: NonNullable<ChakraProps['sx']>['w'];
+  width?: ChakraProps['w'];
 };
 
 const NodeWrapper = (props: NodeWrapperProps) => {
@@ -65,45 +65,39 @@ const NodeWrapper = (props: NodeWrapperProps) => {
       onMouseEnter={handleMouseOver}
       onMouseLeave={handleMouseOut}
       className={DRAG_HANDLE_CLASSNAME}
-      sx={{
-        h: 'full',
-        position: 'relative',
-        borderRadius: 'base',
-        w: width ?? NODE_WIDTH,
-        transitionProperty: 'common',
-        transitionDuration: '0.1s',
-        cursor: 'grab',
-        opacity,
-      }}
+      h="full"
+      position="relative"
+      borderRadius="base"
+      w={width ? width : NODE_WIDTH}
+      transitionProperty="common"
+      transitionDuration="0.1s"
+      cursor="grab"
+      opacity={opacity}
     >
       <Box
-        sx={{
-          position: 'absolute',
-          top: 0,
-          insetInlineEnd: 0,
-          bottom: 0,
-          insetInlineStart: 0,
-          borderRadius: 'base',
-          pointerEvents: 'none',
-          shadow: `${shadowsXl}, ${shadowsBase}, ${shadowsBase}`,
-          zIndex: -1,
-        }}
+        position="absolute"
+        top={0}
+        insetInlineEnd={0}
+        bottom={0}
+        insetInlineStart={0}
+        borderRadius="base"
+        pointerEvents="none"
+        shadow={`${shadowsXl}, ${shadowsBase}, ${shadowsBase}`}
+        zIndex={-1}
       />
       <Box
-        sx={{
-          position: 'absolute',
-          top: 0,
-          insetInlineEnd: 0,
-          bottom: 0,
-          insetInlineStart: 0,
-          borderRadius: 'md',
-          pointerEvents: 'none',
-          transitionProperty: 'common',
-          transitionDuration: '0.1s',
-          opacity: 0.7,
-          shadow: isInProgress ? nodeInProgress : undefined,
-          zIndex: -1,
-        }}
+        position="absolute"
+        top={0}
+        insetInlineEnd={0}
+        bottom={0}
+        insetInlineStart={0}
+        borderRadius="md"
+        pointerEvents="none"
+        transitionProperty="common"
+        transitionDuration="0.1s"
+        opacity={0.7}
+        shadow={isInProgress ? nodeInProgress : undefined}
+        zIndex={-1}
       />
       {children}
       <NodeSelectionOverlay isSelected={selected} isHovered={isMouseOverNode} />
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 732c2bf14c..60ffd1430a 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
@@ -5,7 +5,7 @@ import NodeOpacitySlider from './NodeOpacitySlider';
 import ViewportControls from './ViewportControls';
 
 const BottomLeftPanel = () => (
-  <Flex sx={{ gap: 2, position: 'absolute', bottom: 2, insetInlineStart: 2 }}>
+  <Flex gap={2} position="absolute" bottom={2} insetInlineStart={2}>
     <ViewportControls />
     <NodeOpacitySlider />
   </Flex>
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 23eca32329..2906d5f140 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,3 +1,4 @@
+import type { SystemStyleObject } from '@chakra-ui/react';
 import { chakra, Flex } from '@chakra-ui/react';
 import type { RootState } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
@@ -6,26 +7,28 @@ import { MiniMap } from 'reactflow';
 
 const ChakraMiniMap = chakra(MiniMap);
 
+const minimapStyles: SystemStyleObject = {
+  m: '0 !important',
+  borderRadius: 'base',
+  backgroundColor: 'base.500 !important',
+  svg: {
+    borderRadius: 'inherit',
+  },
+};
+
 const MinimapPanel = () => {
   const shouldShowMinimapPanel = useAppSelector(
     (state: RootState) => state.nodes.shouldShowMinimapPanel
   );
 
   return (
-    <Flex sx={{ gap: 2, position: 'absolute', bottom: 2, insetInlineEnd: 2 }}>
+    <Flex gap={2} position="absolute" bottom={2} insetInlineEnd={2}>
       {shouldShowMinimapPanel && (
         <ChakraMiniMap
           pannable
           zoomable
           nodeBorderRadius={15}
-          sx={{
-            m: '0 !important',
-            borderRadius: 'base',
-            backgroundColor: 'base.500 !important',
-            svg: {
-              borderRadius: 'inherit',
-            },
-          }}
+          sx={minimapStyles}
           nodeColor="var(--invokeai-colors-blue-600)"
           maskColor="var(--invokeai-colors-blackAlpha-600)"
         />
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/TopPanel.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/TopPanel.tsx
index 2e79ea9763..3fcff30958 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/TopPanel.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/TopPanel.tsx
@@ -13,15 +13,13 @@ const TopCenterPanel = () => {
 
   return (
     <Flex
-      sx={{
-        gap: 2,
-        top: 2,
-        left: 2,
-        right: 2,
-        position: 'absolute',
-        alignItems: 'center',
-        pointerEvents: 'none',
-      }}
+      gap={2}
+      top={2}
+      left={2}
+      right={2}
+      position="absolute"
+      alignItems="center"
+      pointerEvents="none"
     >
       <AddNodeButton />
       <UpdateNodesButton />
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 ece2f153df..b446559cf7 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
@@ -9,7 +9,7 @@ const TopRightPanel = () => {
     useFeatureStatus('workflowLibrary').isFeatureEnabled;
 
   return (
-    <Flex sx={{ gap: 2, position: 'absolute', top: 2, insetInlineEnd: 2 }}>
+    <Flex gap={2} position="absolute" top={2} insetInlineEnd={2}>
       {isWorkflowLibraryEnabled && <WorkflowLibraryButton />}
       <WorkflowLibraryMenu />
     </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 587b3a93b5..2f55ace94a 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
@@ -104,13 +104,7 @@ const WorkflowEditorSettings = ({ children }: Props) => {
           <InvModalHeader>{t('nodes.workflowSettings')}</InvModalHeader>
           <InvModalCloseButton />
           <InvModalBody>
-            <Flex
-              sx={{
-                flexDirection: 'column',
-                gap: 4,
-                py: 4,
-              }}
-            >
+            <Flex flexDirection="column" gap={4} py={4}>
               <Heading size="sm">{t('parameters.general')}</Heading>
               <InvControl
                 label={t('nodes.animatedEdges')}
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 d8dcfd8a53..92a8dd4208 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/NodeEditorPanelGroup.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/NodeEditorPanelGroup.tsx
@@ -24,7 +24,7 @@ const NodeEditorPanelGroup = () => {
   }, []);
 
   return (
-    <Flex sx={{ flexDir: 'column', gap: 2, height: '100%', width: '100%' }}>
+    <Flex w="full" h="full" gap={2} flexDir="column">
       <QueueControls />
       <PanelGroup
         ref={panelGroupRef}
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorOutputsTab.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorOutputsTab.tsx
index 8f7c8f4262..86aada12da 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorOutputsTab.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorOutputsTab.tsx
@@ -52,24 +52,16 @@ const InspectorOutputsTab = () => {
   }
 
   return (
-    <Box
-      sx={{
-        position: 'relative',
-        w: 'full',
-        h: 'full',
-      }}
-    >
+    <Box position="relative" w="full" h="full">
       <ScrollableContent>
         <Flex
-          sx={{
-            position: 'relative',
-            flexDir: 'column',
-            alignItems: 'flex-start',
-            p: 1,
-            gap: 2,
-            h: 'full',
-            w: 'full',
-          }}
+          position="relative"
+          flexDir="column"
+          alignItems="flex-start"
+          p={1}
+          gap={2}
+          h="full"
+          w="full"
         >
           {template?.outputType === 'image_output' ? (
             nes.outputs.map((result, i) => (
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 492084a182..49522013bb 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
@@ -19,19 +19,14 @@ const InspectorPanel = () => {
   return (
     <Flex
       layerStyle="first"
-      sx={{
-        flexDir: 'column',
-        w: 'full',
-        h: 'full',
-        borderRadius: 'base',
-        p: 2,
-        gap: 2,
-      }}
+      flexDir="column"
+      w="full"
+      h="full"
+      borderRadius="base"
+      p={2}
+      gap={2}
     >
-      <Tabs
-        variant="line"
-        sx={{ display: 'flex', flexDir: 'column', w: 'full', h: 'full' }}
-      >
+      <Tabs variant="line" display="flex" flexDir="column" w="full" h="full">
         <TabList>
           <Tab>{t('common.details')}</Tab>
           <Tab>{t('common.outputs')}</Tab>
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowGeneralTab.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowGeneralTab.tsx
index 4813062f26..235ae8acbc 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowGeneralTab.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowGeneralTab.tsx
@@ -87,16 +87,9 @@ const WorkflowGeneralTab = () => {
 
   return (
     <ScrollableContent>
-      <Flex
-        sx={{
-          flexDir: 'column',
-          alignItems: 'flex-start',
-          gap: 2,
-          h: 'full',
-        }}
-      >
+      <Flex flexDir="column" alignItems="flex-start" gap={2} h="full">
         <InvControlGroup orientation="vertical">
-          <Flex sx={{ gap: 2, w: 'full' }}>
+          <Flex gap={2} w="full">
             <InvControl label={t('nodes.workflowName')}>
               <InvInput value={name} onChange={handleChangeName} />
             </InvControl>
@@ -104,7 +97,7 @@ const WorkflowGeneralTab = () => {
               <InvInput value={version} onChange={handleChangeVersion} />
             </InvControl>
           </Flex>
-          <Flex sx={{ gap: 2, w: 'full' }}>
+          <Flex gap={2} w="full">
             <InvControl label={t('nodes.workflowAuthor')}>
               <InvInput value={author} onChange={handleChangeAuthor} />
             </InvControl>
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowJSONTab.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowJSONTab.tsx
index 49a1fb1d21..b51100306f 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowJSONTab.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowJSONTab.tsx
@@ -9,14 +9,7 @@ const WorkflowJSONTab = () => {
   const { t } = useTranslation();
 
   return (
-    <Flex
-      sx={{
-        flexDir: 'column',
-        alignItems: 'flex-start',
-        gap: 2,
-        h: 'full',
-      }}
-    >
+    <Flex flexDir="column" alignItems="flex-start" gap={2} h="full">
       <DataViewer data={workflow} label={t('nodes.workflow')} />
     </Flex>
   );
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLinearTab.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLinearTab.tsx
index 2196af81f8..fdfc46ef6f 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLinearTab.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLinearTab.tsx
@@ -19,24 +19,16 @@ const WorkflowLinearTab = () => {
   const { t } = useTranslation();
 
   return (
-    <Box
-      sx={{
-        position: 'relative',
-        w: 'full',
-        h: 'full',
-      }}
-    >
+    <Box position="relative" w="full" h="full">
       <ScrollableContent>
         <Flex
-          sx={{
-            position: 'relative',
-            flexDir: 'column',
-            alignItems: 'flex-start',
-            p: 1,
-            gap: 2,
-            h: 'full',
-            w: 'full',
-          }}
+          position="relative"
+          flexDir="column"
+          alignItems="flex-start"
+          p={1}
+          gap={2}
+          h="full"
+          w="full"
         >
           {fields.length ? (
             fields.map(({ nodeId, fieldName }) => (
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 06dde276ce..096059dc83 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
@@ -18,19 +18,14 @@ const WorkflowPanel = () => {
   return (
     <Flex
       layerStyle="first"
-      sx={{
-        flexDir: 'column',
-        w: 'full',
-        h: 'full',
-        borderRadius: 'base',
-        p: 2,
-        gap: 2,
-      }}
+      flexDir="column"
+      w="full"
+      h="full"
+      borderRadius="base"
+      p={2}
+      gap={2}
     >
-      <Tabs
-        variant="line"
-        sx={{ display: 'flex', flexDir: 'column', w: 'full', h: 'full' }}
-      >
+      <Tabs variant="line" display="flex" w="full" h="full" flexDir="column">
         <TabList>
           <Tab>{t('common.linear')}</Tab>
           <Tab>{t('common.details')}</Tab>
diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioSelect.tsx b/invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioSelect.tsx
index da47ff338a..f256703223 100644
--- a/invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioSelect.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioSelect.tsx
@@ -1,3 +1,4 @@
+import type { SystemStyleObject } from '@chakra-ui/styled-system';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import type { SingleValue } from 'chakra-react-select';
 import { InvControl } from 'common/components/InvControl/InvControl';
@@ -41,7 +42,7 @@ export const AspectRatioSelect = () => {
         value={value}
         onChange={onChange}
         options={ASPECT_RATIO_OPTIONS}
-        sx={{ minW: 48 }}
+        sx={selectStyles}
       />
       <SwapDimensionsButton />
       <LockAspectRatioButton />
@@ -49,3 +50,5 @@ export const AspectRatioSelect = () => {
     </InvControl>
   );
 };
+
+const selectStyles: SystemStyleObject = { minW: 48 };
diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageToImage/InitialImageDisplay.tsx b/invokeai/frontend/web/src/features/parameters/components/ImageToImage/InitialImageDisplay.tsx
index 184ba821a2..2816925168 100644
--- a/invokeai/frontend/web/src/features/parameters/components/ImageToImage/InitialImageDisplay.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/ImageToImage/InitialImageDisplay.tsx
@@ -52,34 +52,28 @@ const InitialImageDisplay = () => {
   return (
     <Flex
       layerStyle="first"
-      sx={{
-        position: 'relative',
-        flexDirection: 'column',
-        height: 'full',
-        width: 'full',
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderRadius: 'base',
-        p: 2,
-        gap: 4,
-      }}
+      position="relative"
+      flexDirection="column"
+      height="full"
+      width="full"
+      alignItems="center"
+      justifyContent="center"
+      borderRadius="base"
+      p={2}
+      gap={4}
     >
       <Flex
-        sx={{
-          w: 'full',
-          flexWrap: 'wrap',
-          justifyContent: 'center',
-          alignItems: 'center',
-          gap: 2,
-        }}
+        w="full"
+        flexWrap="wrap"
+        justifyContent="center"
+        alignItems="center"
+        gap={2}
       >
         <InvText
-          sx={{
-            ps: 2,
-            fontWeight: 'semibold',
-            userSelect: 'none',
-            color: 'base.200',
-          }}
+          ps={2}
+          fontWeight="semibold"
+          userSelect="none"
+          color="base.200"
         >
           {t('metadata.initImage')}
         </InvText>
diff --git a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamUpscaleSettings.tsx b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamUpscaleSettings.tsx
index 43377a6734..149c226dea 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamUpscaleSettings.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamUpscaleSettings.tsx
@@ -48,12 +48,7 @@ const ParamUpscalePopover = (props: Props) => {
       </InvPopoverTrigger>
       <InvPopoverContent>
         <InvPopoverBody>
-          <Flex
-            sx={{
-              flexDirection: 'column',
-              gap: 4,
-            }}
-          >
+          <Flex flexDirection="column" gap={4}>
             <ParamESRGANModel />
             <InvButton
               tooltip={detail}
diff --git a/invokeai/frontend/web/src/features/queue/components/QueueControls.tsx b/invokeai/frontend/web/src/features/queue/components/QueueControls.tsx
index 8f712873c5..36350b799f 100644
--- a/invokeai/frontend/web/src/features/queue/components/QueueControls.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueControls.tsx
@@ -12,13 +12,11 @@ const QueueControls = () => {
   const isPrependEnabled = useFeatureStatus('prependQueue').isFeatureEnabled;
   return (
     <Flex
-      sx={{
-        w: 'full',
-        position: 'relative',
-        borderRadius: 'base',
-        gap: 2,
-        flexDir: 'column',
-      }}
+      w="full"
+      position="relative"
+      borderRadius="base"
+      gap={2}
+      flexDir="column"
     >
       <InvButtonGroup size="lg" isAttached={false}>
         {isPrependEnabled && <QueueFrontButton />}
diff --git a/invokeai/frontend/web/src/features/settingsAccordions/ControlSettingsAccordion/ControlSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/ControlSettingsAccordion/ControlSettingsAccordion.tsx
index f060f99553..34bed38a1c 100644
--- a/invokeai/frontend/web/src/features/settingsAccordions/ControlSettingsAccordion/ControlSettingsAccordion.tsx
+++ b/invokeai/frontend/web/src/features/settingsAccordions/ControlSettingsAccordion/ControlSettingsAccordion.tsx
@@ -94,7 +94,7 @@ export const ControlSettingsAccordion: React.FC = memo(() => {
       defaultIsOpen={true}
       badges={badges}
     >
-      <Flex sx={{ flexDir: 'column', gap: 2, p: 4 }}>
+      <Flex gap={2} p={4} flexDir="column">
         <InvButtonGroup
           size="sm"
           w="full"
diff --git a/invokeai/frontend/web/src/features/settingsAccordions/RefinerSettingsAccordion/RefinerSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/RefinerSettingsAccordion/RefinerSettingsAccordion.tsx
index 370ce3d344..ab3b68c616 100644
--- a/invokeai/frontend/web/src/features/settingsAccordions/RefinerSettingsAccordion/RefinerSettingsAccordion.tsx
+++ b/invokeai/frontend/web/src/features/settingsAccordions/RefinerSettingsAccordion/RefinerSettingsAccordion.tsx
@@ -58,8 +58,8 @@ RefinerSettingsAccordion.displayName = 'RefinerSettingsAccordion';
 const RefinerSettingsAccordionNoRefiner: React.FC = memo(() => {
   const { t } = useTranslation();
   return (
-    <Flex sx={{ justifyContent: 'center', p: 4 }}>
-      <InvText sx={{ fontSize: 'sm', color: 'base.500' }}>
+    <Flex justifyContent="center" p={4}>
+      <InvText fontSize="sm" color="base.500">
         {t('models.noRefinerModelsInstalled')}
       </InvText>
     </Flex>
diff --git a/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeysModalItem.tsx b/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeysModalItem.tsx
index eebf01637a..06c86cb211 100644
--- a/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeysModalItem.tsx
+++ b/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeysModalItem.tsx
@@ -11,33 +11,15 @@ export default function HotkeysModalItem(props: HotkeysModalProps) {
   const { title, hotkey, description } = props;
   return (
     <Grid
-      sx={{
-        gridTemplateColumns: 'auto max-content',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-      }}
+      gridTemplateColumns="auto max-content"
+      justifyContent="space-between"
+      alignItems="center"
     >
       <Grid>
         <InvText fontWeight="semibold">{title}</InvText>
-        {description && (
-          <InvText
-            sx={{
-              fontSize: 'sm',
-            }}
-            variant="subtext"
-          >
-            {description}
-          </InvText>
-        )}
+        {description && <InvText variant="subtext">{description}</InvText>}
       </Grid>
-      <Box
-        sx={{
-          fontSize: 'sm',
-          fontWeight: 'semibold',
-          px: 2,
-          py: 1,
-        }}
-      >
+      <Box fontSize="sm" fontWeight="semibold" px={2} py={1}>
         {hotkey}
       </Box>
     </Grid>
diff --git a/invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx b/invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx
index c0d7918542..83a96ee9dd 100644
--- a/invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx
+++ b/invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx
@@ -21,16 +21,14 @@ const InvokeAILogoComponent = ({ showVersion = true }: Props) => {
       <Image
         src={InvokeAILogoImage}
         alt="invoke-ai-logo"
-        sx={{
-          w: '32px',
-          h: '32px',
-          minW: '32px',
-          minH: '32px',
-          userSelect: 'none',
-        }}
+        w="32px"
+        h="32px"
+        minW="32px"
+        minH="32px"
+        userSelect="none"
       />
-      <Flex sx={{ gap: 3, alignItems: 'center' }}>
-        <InvText sx={{ fontSize: 'xl', userSelect: 'none' }}>
+      <Flex gap={3} alignItems="center">
+        <InvText fontSize="xl" userSelect="none">
           invoke <strong>ai</strong>
         </InvText>
         <AnimatePresence>
@@ -50,13 +48,10 @@ const InvokeAILogoComponent = ({ showVersion = true }: Props) => {
               }}
             >
               <InvText
-                sx={{
-                  fontWeight: 'semibold',
-                  marginTop: 1,
-                  color: 'base.300',
-                  fontSize: 14,
-                }}
-                variant="subtext"
+                fontWeight="semibold"
+                marginTop={1}
+                color="base.300"
+                fontSize={14}
               >
                 {appVersion.version}
               </InvText>
diff --git a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx
index 747fae85b3..97cba57fcf 100644
--- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx
+++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx
@@ -233,7 +233,7 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
           <InvModalHeader bg="none">{t('common.settingsLabel')}</InvModalHeader>
           <InvModalCloseButton />
           <InvModalBody>
-            <Flex sx={{ gap: 4, flexDirection: 'column' }}>
+            <Flex gap={4} flexDir="column">
               <StyledFlex>
                 <InvHeading size="sm">{t('settings.general')}</InvHeading>
                 <InvControl label={t('settings.confirmOnDelete')}>
diff --git a/invokeai/frontend/web/src/features/system/components/SettingsModal/StyledFlex.tsx b/invokeai/frontend/web/src/features/system/components/SettingsModal/StyledFlex.tsx
index 298ed4e483..fa622d94d0 100644
--- a/invokeai/frontend/web/src/features/system/components/SettingsModal/StyledFlex.tsx
+++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/StyledFlex.tsx
@@ -5,13 +5,11 @@ import { memo } from 'react';
 const StyledFlex = (props: PropsWithChildren) => {
   return (
     <Flex
-      sx={{
-        flexDirection: 'column',
-        gap: 2,
-        p: 4,
-        borderRadius: 'base',
-        bg: 'base.900',
-      }}
+      flexDirection="column"
+      gap={2}
+      p={4}
+      borderRadius="base"
+      bg="base.900"
     >
       {props.children}
     </Flex>
diff --git a/invokeai/frontend/web/src/features/system/components/SiteHeader.tsx b/invokeai/frontend/web/src/features/system/components/SiteHeader.tsx
index 339e127051..5c7b5285a4 100644
--- a/invokeai/frontend/web/src/features/system/components/SiteHeader.tsx
+++ b/invokeai/frontend/web/src/features/system/components/SiteHeader.tsx
@@ -38,12 +38,7 @@ const SiteHeader = () => {
   const discordLink = 'https://discord.gg/ZmtBAhwWhy';
 
   return (
-    <Flex
-      sx={{
-        gap: 2,
-        alignItems: 'center',
-      }}
-    >
+    <Flex gap={2} alignItems="center">
       <InvokeAILogoComponent />
       <Spacer />
       <StatusIndicator />
@@ -54,7 +49,7 @@ const SiteHeader = () => {
           variant="link"
           aria-label={t('accessibility.menu')}
           icon={<FaBars />}
-          sx={{ boxSize: 8 }}
+          boxSize={8}
         />
         <InvMenuList>
           <InvMenuGroup title={t('common.communityLabel')}>
diff --git a/invokeai/frontend/web/src/features/system/components/StatusIndicator.tsx b/invokeai/frontend/web/src/features/system/components/StatusIndicator.tsx
index 5058762a34..9a940ba96d 100644
--- a/invokeai/frontend/web/src/features/system/components/StatusIndicator.tsx
+++ b/invokeai/frontend/web/src/features/system/components/StatusIndicator.tsx
@@ -71,26 +71,18 @@ const StatusIndicator = () => {
             }}
           >
             <InvText
-              sx={{
-                fontSize: 'sm',
-                fontWeight: 'semibold',
-                pb: '1px',
-                userSelect: 'none',
-                color: COLOR_MAP[statusColor],
-              }}
+              fontSize="sm"
+              fontWeight="semibold"
+              pb="1px"
+              userSelect="none"
+              color={COLOR_MAP[statusColor]}
             >
               {t(statusTranslationKey as ResourceKey)}
             </InvText>
           </motion.div>
         )}
       </AnimatePresence>
-      <Icon
-        as={FaCircle}
-        sx={{
-          boxSize: '0.5rem',
-          color: COLOR_MAP[statusColor],
-        }}
-      />
+      <Icon as={FaCircle} boxSize="0.5rem" color={COLOR_MAP[statusColor]} />
     </Flex>
   );
 };
diff --git a/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx b/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx
index 2a2e6edf94..1c55e6efa5 100644
--- a/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx
@@ -40,12 +40,10 @@ const FloatingGalleryButton = ({
           aria-label={t('accessibility.showGalleryPanel')}
           onClick={handleShowGallery}
           icon={<MdPhotoLibrary />}
-          sx={{
-            p: 0,
-            px: 3,
-            h: 48,
-            borderEndRadius: 0,
-          }}
+          p={0}
+          px={3}
+          h={48}
+          borderEndRadius={0}
         />
       </Flex>
     </Portal>
diff --git a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
index bc91b74a86..857154ea29 100644
--- a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
@@ -210,18 +210,11 @@ const InvokeTabs = () => {
       defaultIndex={activeTabIndex}
       index={activeTabIndex}
       onChange={handleTabChange}
-      sx={{
-        flexGrow: 1,
-        gap: 4,
-      }}
+      flexGrow={1}
+      gap={4}
       isLazy
     >
-      <InvTabList
-        sx={{
-          gap: 4,
-          flexDir: 'column',
-        }}
-      >
+      <InvTabList gap={4} flexDir="column">
         {tabs}
         <Spacer />
       </InvTabList>
diff --git a/invokeai/frontend/web/src/features/ui/components/ParametersPanel.tsx b/invokeai/frontend/web/src/features/ui/components/ParametersPanel.tsx
index 5fc01c3310..66065fa137 100644
--- a/invokeai/frontend/web/src/features/ui/components/ParametersPanel.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/ParametersPanel.tsx
@@ -22,44 +22,16 @@ const ParametersPanel = () => {
   );
 
   return (
-    <Flex
-      sx={{
-        w: 'full',
-        h: 'full',
-        flexDir: 'column',
-        gap: 2,
-      }}
-    >
+    <Flex w="full" h="full" flexDir="column" gap={2}>
       <QueueControls />
-      <Flex
-        sx={{
-          w: 'full',
-          h: 'full',
-          position: 'relative',
-        }}
-      >
-        <Box
-          sx={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-          }}
-        >
+      <Flex w="full" h="full" position="relative">
+        <Box position="absolute" top={0} left={0} right={0} bottom={0}>
           <OverlayScrollbarsComponent
             defer
             style={{ height: '100%', width: '100%' }}
             options={overlayScrollbarsParams.options}
           >
-            <Flex
-              sx={{
-                gap: 2,
-                flexDirection: 'column',
-                h: 'full',
-                w: 'full',
-              }}
-            >
+            <Flex gap={2} flexDirection="column" h="full" w="full">
               {isSDXL ? <SDXLPrompts /> : <Prompts />}
               <ImageSettingsAccordion />
               <GenerationSettingsAccordion />
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImageTab.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImageTab.tsx
index ddb56af44f..100861ed67 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImageTab.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImageTab.tsx
@@ -20,7 +20,7 @@ const ImageToImageTab = () => {
   const panelStorage = usePanelStorage();
 
   return (
-    <Box sx={{ w: 'full', h: 'full' }}>
+    <Box w="full" h="full">
       <PanelGroup
         ref={panelGroupRef}
         autoSaveId="imageTab.content"
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 f9216d53e9..d98b69b612 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManagerTab.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManagerTab.tsx
@@ -52,18 +52,22 @@ const ModelManagerTab = () => {
       isLazy
       variant="line"
       layerStyle="first"
-      sx={{ w: 'full', h: 'full', p: 4, gap: 4, borderRadius: 'base' }}
+      w="full"
+      h="full"
+      p={4}
+      gap={4}
+      borderRadius="base"
     >
       <TabList>
         {tabs.map((tab) => (
-          <Tab sx={{ borderTopRadius: 'base' }} key={tab.id}>
+          <Tab borderTopRadius="base" key={tab.id}>
             {tab.label}
           </Tab>
         ))}
       </TabList>
-      <TabPanels sx={{ w: 'full', h: 'full' }}>
+      <TabPanels w="full" h="full">
         {tabs.map((tab) => (
-          <TabPanel sx={{ w: 'full', h: 'full' }} key={tab.id}>
+          <TabPanel w="full" h="full" key={tab.id}>
             {tab.content}
           </TabPanel>
         ))}
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ResizeHandle.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ResizeHandle.tsx
index ffc64601cc..20f6d2db43 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/ResizeHandle.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/ResizeHandle.tsx
@@ -1,6 +1,7 @@
-import type { FlexProps } from '@chakra-ui/react';
+import type { FlexProps, SystemStyleObject } from '@chakra-ui/react';
 import { Box, Flex } from '@chakra-ui/react';
-import { memo } from 'react';
+import type { CSSProperties} from 'react';
+import { memo, useMemo } from 'react';
 import { PanelResizeHandle } from 'react-resizable-panels';
 
 type ResizeHandleProps = Omit<FlexProps, 'direction'> & {
@@ -17,84 +18,83 @@ const ResizeHandle = (props: ResizeHandleProps) => {
     ...rest
   } = props;
 
-  if (direction === 'horizontal') {
-    return (
-      <PanelResizeHandle
-        style={{
-          visibility: isCollapsed ? 'hidden' : 'visible',
-          width: isCollapsed ? 0 : 'auto',
-        }}
-      >
-        <Flex
-          className="resize-handle-horizontal"
-          sx={{
-            w: collapsedDirection ? 2.5 : 4,
-            h: 'full',
-            justifyContent: collapsedDirection
-              ? collapsedDirection === 'left'
-                ? 'flex-start'
-                : 'flex-end'
-              : 'center',
-            alignItems: 'center',
-            div: {
-              bg: 'base.850',
-            },
-            _hover: {
-              div: { bg: 'base.700' },
-            },
-          }}
-          {...rest}
-        >
-          <Box
-            sx={{
-              w: 1,
-              h: 'calc(100% - 1rem)',
-              borderRadius: 'base',
-              transitionProperty: 'common',
-              transitionDuration: 'normal',
-            }}
-          />
-        </Flex>
-      </PanelResizeHandle>
-    );
-  }
-
-  return (
-    <PanelResizeHandle
-      style={{
+  const resizeHandleStyles = useMemo<CSSProperties>(() => {
+    if (direction === 'horizontal') {
+      return {
         visibility: isCollapsed ? 'hidden' : 'visible',
         width: isCollapsed ? 0 : 'auto',
-      }}
-    >
+      };
+    }
+    return {
+      visibility: isCollapsed ? 'hidden' : 'visible',
+      width: isCollapsed ? 0 : 'auto',
+    };
+  }, [direction, isCollapsed]);
+
+  const resizeHandleWrapperStyles = useMemo<SystemStyleObject>(() => {
+    if (direction === 'horizontal') {
+      return {
+        w: collapsedDirection ? 2.5 : 4,
+        h: 'full',
+        justifyContent: collapsedDirection
+          ? collapsedDirection === 'left'
+            ? 'flex-start'
+            : 'flex-end'
+          : 'center',
+        alignItems: 'center',
+        div: {
+          bg: 'base.850',
+        },
+        _hover: {
+          div: { bg: 'base.700' },
+        },
+      };
+    }
+    return {
+      w: 'full',
+      h: collapsedDirection ? 2.5 : 4,
+      alignItems: collapsedDirection
+        ? collapsedDirection === 'top'
+          ? 'flex-start'
+          : 'flex-end'
+        : 'center',
+      justifyContent: 'center',
+      div: {
+        bg: 'base.850',
+      },
+      _hover: {
+        div: { bg: 'base.700' },
+      },
+    };
+  }, [collapsedDirection, direction]);
+  const resizeInnerStyles = useMemo<SystemStyleObject>(() => {
+    if (direction === 'horizontal') {
+      return {
+        w: 1,
+        h: 'calc(100% - 1rem)',
+        borderRadius: 'base',
+        transitionProperty: 'common',
+        transitionDuration: 'normal',
+      };
+    }
+
+    return {
+      h: 1,
+      w: 'calc(100% - 1rem)',
+      borderRadius: 'base',
+      transitionProperty: 'common',
+      transitionDuration: 'normal',
+    };
+  }, [direction]);
+
+  return (
+    <PanelResizeHandle style={resizeHandleStyles}>
       <Flex
-        className="resize-handle-vertical"
-        sx={{
-          w: 'full',
-          h: collapsedDirection ? 2.5 : 4,
-          alignItems: collapsedDirection
-            ? collapsedDirection === 'top'
-              ? 'flex-start'
-              : 'flex-end'
-            : 'center',
-          justifyContent: 'center',
-          div: {
-            bg: 'base.850',
-          },
-          _hover: {
-            div: { bg: 'base.700' },
-          },
-        }}
+        className="resize-handle-horizontal"
+        sx={resizeHandleWrapperStyles}
         {...rest}
       >
-        <Box
-          sx={{
-            h: 1,
-            w: 'calc(100% - 1rem)',
-            borderRadius: 'base',
-            transitionProperty: 'common',
-            transitionDuration: 'normal',
-          }}
-        />
+        <Box sx={resizeInnerStyles} />
       </Flex>
     </PanelResizeHandle>
   );
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImageTab.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImageTab.tsx
index dc1139d79e..51f1b1f2d5 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImageTab.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImageTab.tsx
@@ -6,20 +6,13 @@ const TextToImageTab = () => {
   return (
     <Box
       layerStyle="first"
-      sx={{
-        position: 'relative',
-        width: '100%',
-        height: '100%',
-        p: 2,
-        borderRadius: 'base',
-      }}
+      position="relative"
+      w="full"
+      h="full"
+      p={2}
+      borderRadius="base"
     >
-      <Flex
-        sx={{
-          width: '100%',
-          height: '100%',
-        }}
-      >
+      <Flex w="full" h="full">
         <CurrentImageDisplay />
       </Flex>
     </Box>
diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvasTab.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvasTab.tsx
index 96d9b27859..8b4622fb2e 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvasTab.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvasTab.tsx
@@ -29,15 +29,13 @@ const UnifiedCanvasTab = () => {
       layerStyle="first"
       ref={setDroppableRef}
       tabIndex={-1}
-      sx={{
-        flexDirection: 'column',
-        alignItems: 'center',
-        gap: 4,
-        p: 2,
-        borderRadius: 'base',
-        w: 'full',
-        h: 'full',
-      }}
+      flexDirection="column"
+      alignItems="center"
+      gap={4}
+      p={2}
+      borderRadius="base"
+      w="full"
+      h="full"
     >
       <IAICanvasToolbar />
       <IAICanvas />