diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 928d646d4082..055b6413e673 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -126,6 +126,7 @@ interface GridResizingControlProps {
   setResizingIndex: (v: number | null) => void
   resizeLocked: boolean
   stripedAreaLength: number | null
+  labelsHovered: [boolean, React.Dispatch<React.SetStateAction<boolean>>]
 }
 
 const GridResizingControl = React.memo((props: GridResizingControlProps) => {
@@ -211,6 +212,12 @@ const GridResizingControl = React.memo((props: GridResizingControlProps) => {
     [scale, props.padding],
   )
 
+  const [labelsHovered, setLabelsHovered] = props.labelsHovered
+
+  const onMouseOver = React.useCallback(() => {
+    setLabelsHovered(true)
+  }, [setLabelsHovered])
+
   return (
     <div
       key={containerId}
@@ -225,27 +232,49 @@ const GridResizingControl = React.memo((props: GridResizingControlProps) => {
       }}
     >
       <div
-        data-testid={labelId}
         style={{
-          zoom: 1 / scale,
-          height: GRID_RESIZE_HANDLE_SIZE,
-          borderRadius: 3,
-          padding: '0 4px',
-          border: `.1px solid ${colorTheme.white.value}`,
-          background: colorTheme.primary.value,
-          color: colorTheme.white.value,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          cursor: canResize
-            ? gridEdgeToCSSCursor(props.axis === 'column' ? 'column-start' : 'row-start')
-            : 'default',
-          pointerEvents: 'initial',
+          // display: 'flex',
+          justifyContent: 'flex-end',
+          width: 0,
+          height: 0,
+          alignSelf: 'center',
+          justifySelf: 'center',
+          overflow: 'visible',
         }}
-        onMouseDown={mouseDownHandler}
-        onMouseMove={onMouseMove}
       >
-        {getLabelForAxis(props.dimension, props.dimensionIndex, props.fromPropsAxisValues)}
+        <div
+          data-testid={labelId}
+          style={{
+            position: 'absolute',
+            right: props.axis === 'row' ? 0 : undefined,
+            zoom: 1 / scale,
+            height: GRID_RESIZE_HANDLE_SIZE,
+            borderRadius: 3,
+            // padding: '0 4px',
+            border: `.1px solid ${colorTheme.white.value}`,
+            background: colorTheme.primary.value,
+            color: colorTheme.white.value,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            cursor: canResize
+              ? gridEdgeToCSSCursor(props.axis === 'column' ? 'column-start' : 'row-start')
+              : 'default',
+            pointerEvents: 'initial',
+            width: labelsHovered ? `calc-size(min-content, size)` : 4, // FIXME
+            overflow: 'hidden',
+            rotate: props.axis === 'column' ? (labelsHovered ? '-45deg' : '-90deg') : '0deg',
+            transformOrigin: 'left center',
+            transition: 'width 0.0s ease',
+          }}
+          onMouseDown={mouseDownHandler}
+          onMouseMove={onMouseMove}
+          onMouseOver={onMouseOver}
+        >
+          {!labelsHovered
+            ? ''
+            : getLabelForAxis(props.dimension, props.dimensionIndex, props.fromPropsAxisValues)}
+        </div>
       </div>
       {when(
         props.resizing !== 'not-resizing',
@@ -314,6 +343,7 @@ interface GridResizingProps {
   padding: Sides | null
   justifyContent: string | null
   alignContent: string | null
+  labelsHovered: [boolean, React.Dispatch<React.SetStateAction<boolean>>]
 }
 
 const GridResizing = React.memo((props: GridResizingProps) => {
@@ -440,6 +470,7 @@ const GridResizing = React.memo((props: GridResizingProps) => {
                     ? props.padding.top ?? 0
                     : props.padding.left ?? 0
                 }
+                labelsHovered={props.labelsHovered}
               />
             )
           })}
@@ -519,44 +550,50 @@ export const GridRowColumnResizingControlsComponent = ({
     })
   }, [scale, grids])
 
+  const labelsHovered = React.useState(false)
+
   return (
     <CanvasOffsetWrapper>
-      {gridsWithVisibleResizeControls.flatMap((grid) => {
-        return (
-          <GridResizing
-            key={`grid-resizing-column-${EP.toString(grid.elementPath)}`}
-            axisValues={grid.gridTemplateColumns}
-            fromPropsAxisValues={grid.gridTemplateColumnsFromProps}
-            containingFrame={grid.frame}
-            axis={'column'}
-            gap={grid.columnGap ?? grid.gap}
-            padding={grid.padding}
-            stripedAreaLength={
-              getStripedAreaLength(grid.gridTemplateRows, grid.gap ?? 0) ?? grid.frame.height
-            }
-            alignContent={grid.justifyContent}
-            justifyContent={grid.alignContent}
-          />
-        )
-      })}
-      {gridsWithVisibleResizeControls.flatMap((grid) => {
-        return (
-          <GridResizing
-            key={`grid-resizing-row-${EP.toString(grid.elementPath)}`}
-            axisValues={grid.gridTemplateRows}
-            fromPropsAxisValues={grid.gridTemplateRowsFromProps}
-            containingFrame={grid.frame}
-            axis={'row'}
-            gap={grid.rowGap ?? grid.gap}
-            padding={grid.padding}
-            stripedAreaLength={
-              getStripedAreaLength(grid.gridTemplateColumns, grid.gap ?? 0) ?? grid.frame.width
-            }
-            alignContent={grid.alignContent}
-            justifyContent={grid.justifyContent}
-          />
-        )
-      })}
+      <div onMouseLeave={() => labelsHovered[1](false)}>
+        {gridsWithVisibleResizeControls.flatMap((grid) => {
+          return (
+            <GridResizing
+              key={`grid-resizing-column-${EP.toString(grid.elementPath)}`}
+              axisValues={grid.gridTemplateColumns}
+              fromPropsAxisValues={grid.gridTemplateColumnsFromProps}
+              containingFrame={grid.frame}
+              axis={'column'}
+              gap={grid.columnGap ?? grid.gap}
+              padding={grid.padding}
+              stripedAreaLength={
+                getStripedAreaLength(grid.gridTemplateRows, grid.gap ?? 0) ?? grid.frame.height
+              }
+              alignContent={grid.justifyContent}
+              justifyContent={grid.alignContent}
+              labelsHovered={labelsHovered}
+            />
+          )
+        })}
+        {gridsWithVisibleResizeControls.flatMap((grid) => {
+          return (
+            <GridResizing
+              key={`grid-resizing-row-${EP.toString(grid.elementPath)}`}
+              axisValues={grid.gridTemplateRows}
+              fromPropsAxisValues={grid.gridTemplateRowsFromProps}
+              containingFrame={grid.frame}
+              axis={'row'}
+              gap={grid.rowGap ?? grid.gap}
+              padding={grid.padding}
+              stripedAreaLength={
+                getStripedAreaLength(grid.gridTemplateColumns, grid.gap ?? 0) ?? grid.frame.width
+              }
+              alignContent={grid.alignContent}
+              justifyContent={grid.justifyContent}
+              labelsHovered={labelsHovered}
+            />
+          )
+        })}
+      </div>
     </CanvasOffsetWrapper>
   )
 }