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 e2e98a3c3e..892516a3cc 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageMetaDataViewer/ImageMetadataViewer.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetaDataViewer/ImageMetadataViewer.tsx
@@ -9,9 +9,9 @@ import {
   Tooltip,
 } from '@chakra-ui/react';
 import { useAppDispatch } from 'app/store/storeHooks';
-import IAIScrollArea from 'common/components/IAIScrollArea';
 import { useRecallParameters } from 'features/parameters/hooks/useRecallParameters';
 import { setShouldShowImageDetails } from 'features/ui/store/uiSlice';
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 import { memo } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
@@ -317,7 +317,7 @@ const ImageMetadataViewer = memo(({ image }: ImageMetadataViewerProps) => {
           </Tooltip>
           <Text fontWeight="semibold">Metadata JSON:</Text>
         </Flex>
-        <IAIScrollArea>
+        <OverlayScrollbarsComponent defer>
           <Box
             sx={{
               padding: 4,
@@ -329,7 +329,7 @@ const ImageMetadataViewer = memo(({ image }: ImageMetadataViewerProps) => {
           >
             <pre>{metadataJSON}</pre>
           </Box>
-        </IAIScrollArea>
+        </OverlayScrollbarsComponent>
       </Flex>
     </Flex>
   );
diff --git a/invokeai/frontend/web/src/features/ui/components/ParametersDrawer.tsx b/invokeai/frontend/web/src/features/ui/components/ParametersDrawer.tsx
index 764dbdd216..b41017c2c9 100644
--- a/invokeai/frontend/web/src/features/ui/components/ParametersDrawer.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/ParametersDrawer.tsx
@@ -2,7 +2,6 @@ import { Flex } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import IAIScrollArea from 'common/components/IAIScrollArea';
 import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors';
 import InvokeAILogoComponent from 'features/system/components/InvokeAILogoComponent';
 import {
@@ -13,6 +12,7 @@ import { setShouldShowParametersPanel } from 'features/ui/store/uiSlice';
 import { memo, useMemo } from 'react';
 import { PARAMETERS_PANEL_WIDTH } from 'theme/util/constants';
 import PinParametersPanelButton from './PinParametersPanelButton';
+import OverlayScrollable from './common/OverlayScrollable';
 import ResizableDrawer from './common/ResizableDrawer/ResizableDrawer';
 import ImageToImageTabParameters from './tabs/ImageToImage/ImageToImageTabParameters';
 import TextToImageTabParameters from './tabs/TextToImage/TextToImageTabParameters';
@@ -82,11 +82,9 @@ const ParametersDrawer = () => {
           <InvokeAILogoComponent />
           <PinParametersPanelButton />
         </Flex>
-        <IAIScrollArea>
-          <Flex sx={{ flexDir: 'column', gap: 2, paddingLeft: 2 }}>
-            {drawerContent}
-          </Flex>
-        </IAIScrollArea>
+        <OverlayScrollable>
+          <Flex sx={{ flexDir: 'column', gap: 2 }}>{drawerContent}</Flex>
+        </OverlayScrollable>
       </Flex>
     </ResizableDrawer>
   );
diff --git a/invokeai/frontend/web/src/features/ui/components/ParametersPinnedWrapper.tsx b/invokeai/frontend/web/src/features/ui/components/ParametersPinnedWrapper.tsx
index 945169ce0c..d47ca3e1ba 100644
--- a/invokeai/frontend/web/src/features/ui/components/ParametersPinnedWrapper.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/ParametersPinnedWrapper.tsx
@@ -1,11 +1,11 @@
 import { Box, Flex } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
-import IAIScrollArea from 'common/components/IAIScrollArea';
 import { PropsWithChildren, memo } from 'react';
 import { PARAMETERS_PANEL_WIDTH } from 'theme/util/constants';
 import { uiSelector } from '../store/uiSelectors';
 import PinParametersPanelButton from './PinParametersPanelButton';
+import OverlayScrollable from './common/OverlayScrollable';
 
 const selector = createSelector(uiSelector, (ui) => {
   const { shouldPinParametersPanel, shouldShowParametersPanel } = ui;
@@ -37,12 +37,14 @@ const ParametersPinnedWrapper = (props: ParametersPinnedWrapperProps) => {
     >
       <Flex
         sx={{
+          gap: 2,
+          flexDirection: 'column',
           h: 'full',
           w: 'full',
           position: 'absolute',
         }}
       >
-        <IAIScrollArea>
+        <OverlayScrollable>
           <Flex
             sx={{
               flexDirection: 'column',
@@ -51,7 +53,7 @@ const ParametersPinnedWrapper = (props: ParametersPinnedWrapperProps) => {
           >
             {props.children}
           </Flex>
-        </IAIScrollArea>
+        </OverlayScrollable>
       </Flex>
 
       <PinParametersPanelButton
diff --git a/invokeai/frontend/web/src/features/ui/components/common/OverlayScrollable.tsx b/invokeai/frontend/web/src/features/ui/components/common/OverlayScrollable.tsx
new file mode 100644
index 0000000000..722ee46fd5
--- /dev/null
+++ b/invokeai/frontend/web/src/features/ui/components/common/OverlayScrollable.tsx
@@ -0,0 +1,22 @@
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
+import { PropsWithChildren, memo } from 'react';
+const OverlayScrollable = (props: PropsWithChildren) => {
+  return (
+    <OverlayScrollbarsComponent
+      defer
+      style={{ height: '100%', width: '100%' }}
+      options={{
+        scrollbars: {
+          visibility: 'auto',
+          autoHide: 'move',
+          autoHideDelay: 1300,
+          theme: 'os-theme-dark',
+        },
+        overflow: { x: 'hidden' },
+      }}
+    >
+      {props.children}
+    </OverlayScrollbarsComponent>
+  );
+};
+export default memo(OverlayScrollable);