diff --git a/packages/block-editor/src/components/block-drop-zone/index.js b/packages/block-editor/src/components/block-drop-zone/index.js
index e0a0d1060ce4f..adac488e4c3d7 100644
--- a/packages/block-editor/src/components/block-drop-zone/index.js
+++ b/packages/block-editor/src/components/block-drop-zone/index.js
@@ -58,7 +58,7 @@ class BlockDropZone extends Component {
 		const { clientId, rootClientId, getBlockIndex } = this.props;
 		if ( clientId !== undefined ) {
 			const index = getBlockIndex( clientId, rootClientId );
-			return position.y === 'top' ? index : index + 1;
+			return ( position && position.y === 'top' ) ? index : index + 1;
 		}
 	}
 
@@ -111,10 +111,12 @@ class BlockDropZone extends Component {
 	}
 
 	render() {
-		const { isLockedAll, index } = this.props;
+		const { isLockedAll } = this.props;
 		if ( isLockedAll ) {
 			return null;
 		}
+
+		const index = this.getInsertIndex();
 		const isAppender = index === undefined;
 
 		return (
diff --git a/packages/block-editor/src/components/block-drop-zone/style.scss b/packages/block-editor/src/components/block-drop-zone/style.scss
index 5eef575111152..8135c66f32ffa 100644
--- a/packages/block-editor/src/components/block-drop-zone/style.scss
+++ b/packages/block-editor/src/components/block-drop-zone/style.scss
@@ -8,16 +8,20 @@
 		display: none;
 	}
 
-	&.is-close-to-bottom {
+	&.is-close-to-bottom,
+	&.is-close-to-top {
 		background: none;
-		border-bottom: 3px solid theme(primary);
 	}
 
-	&.is-close-to-top,
-	&.is-appender.is-close-to-top,
-	&.is-appender.is-close-to-bottom {
-		background: none;
+	&.is-close-to-top {
 		border-top: 3px solid theme(primary);
+	}
+
+	&.is-close-to-bottom {
+		border-bottom: 3px solid theme(primary);
+	}
+
+	&.is-appender.is-active.is-dragging-over-document {
 		border-bottom: none;
 	}
 }