diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbar.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbar.tsx
index aea5695aba..dd863f67e3 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbar.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbar.tsx
@@ -26,13 +26,11 @@ export const CanvasToolbar = memo(() => {
   return (
     <Flex w="full" gap={2} alignItems="center">
       <ToolChooser />
-      <Spacer />
+      <ToolColorPicker />
       <ToolSettings />
       <Spacer />
       <CanvasToolbarScale />
       <CanvasToolbarResetViewButton />
-      <Spacer />
-      <ToolColorPicker />
       <CanvasToolbarFitBboxToLayersButton />
       <CanvasToolbarSaveToGalleryButton />
       <CanvasToolbarResetCanvasButton />