diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/NodeDropArea.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/NodeDropArea.tsx
index b086afc76d7..d04f261c88b 100644
--- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/NodeDropArea.tsx
+++ b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/NodeDropArea.tsx
@@ -1,6 +1,8 @@
import * as React from 'react';
import clsx from 'clsx';
import { styled } from '@mui/material';
+import Typography from '@mui/material/Typography';
+import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
import { FlowDirection } from '../../../../types';
import * as appDom from '../../../../appDom';
@@ -102,10 +104,12 @@ const EmptySlot = styled('div')({
border: '1px dashed green',
color: 'green',
display: 'flex',
- fontSize: 20,
+ flexDirection: 'column',
justifyContent: 'center',
position: 'absolute',
opacity: 0.75,
+ textAlign: 'center',
+ fontSize: 30,
});
function getChildNodeHighlightedZone(parentFlowDirection: FlowDirection): DropZone | null {
@@ -356,7 +360,10 @@ export default function NodeDropArea({
}}
/>
{isEmptySlot && slotRect ? (
-