diff --git a/invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts b/invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts
index afa0b3e08b..15fcc81fd9 100644
--- a/invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts
+++ b/invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts
@@ -597,9 +597,12 @@ export const canvasSlice = createSlice({
     },
     setScaledBoundingBoxDimensions: (
       state,
-      action: PayloadAction<Dimensions>
+      action: PayloadAction<Partial<Dimensions>>
     ) => {
-      state.scaledBoundingBoxDimensions = action.payload;
+      state.scaledBoundingBoxDimensions = {
+        ...state.scaledBoundingBoxDimensions,
+        ...action.payload,
+      };
     },
     setBoundingBoxDimensions: {
       reducer: (
diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledHeight.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledHeight.tsx
index 52bf6a590b..d518aa440b 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledHeight.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledHeight.tsx
@@ -3,8 +3,11 @@ import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InvControl } from 'common/components/InvControl/InvControl';
 import { InvSlider } from 'common/components/InvSlider/InvSlider';
-import { roundToMultiple } from 'common/util/roundDownToMultiple';
 import { setScaledBoundingBoxDimensions } from 'features/canvas/store/canvasSlice';
+import {
+  CANVAS_GRID_SIZE_COARSE,
+  CANVAS_GRID_SIZE_FINE,
+} from 'features/canvas/store/constants';
 import { selectOptimalDimension } from 'features/parameters/store/generationSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -12,75 +15,41 @@ import { useTranslation } from 'react-i18next';
 const selector = createMemoizedSelector(
   [stateSelector, selectOptimalDimension],
   ({ canvas }, optimalDimension) => {
-    const { scaledBoundingBoxDimensions, boundingBoxScaleMethod, aspectRatio } =
-      canvas;
+    const { scaledBoundingBoxDimensions, boundingBoxScaleMethod } = canvas;
 
     return {
       optimalDimension,
       scaledBoundingBoxDimensions,
       isManual: boundingBoxScaleMethod === 'manual',
-      aspectRatio,
     };
   }
 );
 
 const ParamScaledHeight = () => {
   const dispatch = useAppDispatch();
-  const {
-    isManual,
-    scaledBoundingBoxDimensions,
-    aspectRatio,
-    optimalDimension,
-  } = useAppSelector(selector);
+  const { isManual, scaledBoundingBoxDimensions, optimalDimension } =
+    useAppSelector(selector);
 
   const { t } = useTranslation();
 
   const handleChangeScaledHeight = useCallback(
-    (v: number) => {
-      let newWidth = scaledBoundingBoxDimensions.width;
-      const newHeight = Math.floor(v);
-
-      if (aspectRatio) {
-        newWidth = roundToMultiple(newHeight * aspectRatio.value, 64);
-      }
-
-      dispatch(
-        setScaledBoundingBoxDimensions({
-          width: newWidth,
-          height: newHeight,
-        })
-      );
+    (height: number) => {
+      dispatch(setScaledBoundingBoxDimensions({ height }));
     },
-    [aspectRatio, dispatch, scaledBoundingBoxDimensions.width]
+    [dispatch]
   );
 
   const handleResetScaledHeight = useCallback(() => {
-    let resetWidth = scaledBoundingBoxDimensions.width;
-    const resetHeight = Math.floor(optimalDimension);
-
-    if (aspectRatio) {
-      resetWidth = roundToMultiple(resetHeight * aspectRatio.value, 64);
-    }
-
-    dispatch(
-      setScaledBoundingBoxDimensions({
-        width: resetWidth,
-        height: resetHeight,
-      })
-    );
-  }, [
-    aspectRatio,
-    dispatch,
-    optimalDimension,
-    scaledBoundingBoxDimensions.width,
-  ]);
+    dispatch(setScaledBoundingBoxDimensions({ height: optimalDimension }));
+  }, [dispatch, optimalDimension]);
 
   return (
     <InvControl isDisabled={!isManual} label={t('parameters.scaledHeight')}>
       <InvSlider
         min={64}
         max={1536}
-        step={64}
+        step={CANVAS_GRID_SIZE_COARSE}
+        fineStep={CANVAS_GRID_SIZE_FINE}
         value={scaledBoundingBoxDimensions.height}
         onChange={handleChangeScaledHeight}
         marks
diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledWidth.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledWidth.tsx
index 28ff0d0f8b..02f03e2ad0 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledWidth.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamScaledWidth.tsx
@@ -3,8 +3,11 @@ import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InvControl } from 'common/components/InvControl/InvControl';
 import { InvSlider } from 'common/components/InvSlider/InvSlider';
-import { roundToMultiple } from 'common/util/roundDownToMultiple';
 import { setScaledBoundingBoxDimensions } from 'features/canvas/store/canvasSlice';
+import {
+  CANVAS_GRID_SIZE_COARSE,
+  CANVAS_GRID_SIZE_FINE,
+} from 'features/canvas/store/constants';
 import { selectOptimalDimension } from 'features/parameters/store/generationSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -12,13 +15,11 @@ import { useTranslation } from 'react-i18next';
 const selector = createMemoizedSelector(
   [stateSelector, selectOptimalDimension],
   ({ canvas }, optimalDimension) => {
-    const { boundingBoxScaleMethod, scaledBoundingBoxDimensions, aspectRatio } =
-      canvas;
+    const { boundingBoxScaleMethod, scaledBoundingBoxDimensions } = canvas;
 
     return {
-      initial: optimalDimension,
+      optimalDimension,
       scaledBoundingBoxDimensions,
-      aspectRatio,
       isManual: boundingBoxScaleMethod === 'manual',
     };
   }
@@ -26,52 +27,29 @@ const selector = createMemoizedSelector(
 
 const ParamScaledWidth = () => {
   const dispatch = useAppDispatch();
-  const { initial, isManual, scaledBoundingBoxDimensions, aspectRatio } =
+  const { optimalDimension, isManual, scaledBoundingBoxDimensions } =
     useAppSelector(selector);
 
   const { t } = useTranslation();
 
   const handleChangeScaledWidth = useCallback(
-    (v: number) => {
-      const newWidth = Math.floor(v);
-      let newHeight = scaledBoundingBoxDimensions.height;
-
-      if (aspectRatio) {
-        newHeight = roundToMultiple(newWidth / aspectRatio.value, 64);
-      }
-
-      dispatch(
-        setScaledBoundingBoxDimensions({
-          width: newWidth,
-          height: newHeight,
-        })
-      );
+    (width: number) => {
+      dispatch(setScaledBoundingBoxDimensions({ width }));
     },
-    [aspectRatio, dispatch, scaledBoundingBoxDimensions.height]
+    [dispatch]
   );
 
   const handleResetScaledWidth = useCallback(() => {
-    const resetWidth = Math.floor(initial);
-    let resetHeight = scaledBoundingBoxDimensions.height;
-
-    if (aspectRatio) {
-      resetHeight = roundToMultiple(resetWidth / aspectRatio.value, 64);
-    }
-
-    dispatch(
-      setScaledBoundingBoxDimensions({
-        width: resetWidth,
-        height: resetHeight,
-      })
-    );
-  }, [aspectRatio, dispatch, initial, scaledBoundingBoxDimensions.height]);
+    dispatch(setScaledBoundingBoxDimensions({ width: optimalDimension }));
+  }, [dispatch, optimalDimension]);
 
   return (
     <InvControl isDisabled={!isManual} label={t('parameters.scaledWidth')}>
       <InvSlider
         min={64}
         max={1536}
-        step={64}
+        step={CANVAS_GRID_SIZE_COARSE}
+        fineStep={CANVAS_GRID_SIZE_FINE}
         value={scaledBoundingBoxDimensions.width}
         onChange={handleChangeScaledWidth}
         numberInputMax={4096}