diff --git a/packages/block-editor/src/components/block-navigation/appender.js b/packages/block-editor/src/components/block-navigation/appender.js
index f31b8e793c8a29..8742fb31faf4cf 100644
--- a/packages/block-editor/src/components/block-navigation/appender.js
+++ b/packages/block-editor/src/components/block-navigation/appender.js
@@ -9,8 +9,8 @@ import { __, sprintf } from '@wordpress/i18n';
  * Internal dependencies
  */
 import BlockNavigationLeaf from './leaf';
-import ButtonBlockAppender from '../button-block-appender';
 import DescenderLines from './descender-lines';
+import Inserter from '../inserter';
 
 export default function BlockNavigationAppender( {
 	parentBlockClientId,
@@ -41,18 +41,18 @@ export default function BlockNavigationAppender( {
 				className="block-editor-block-navigation-appender__cell"
 				colSpan="3"
 			>
-				{ ( props ) => (
+				{ ( { ref, tabIndex, onFocus } ) => (
 					<div className="block-editor-block-navigation-appender__container">
 						<DescenderLines
 							level={ level }
 							isLastRow={ position === rowCount }
 							terminatedLevels={ terminatedLevels }
 						/>
-						<ButtonBlockAppender
+						<Inserter
 							rootClientId={ parentBlockClientId }
 							__experimentalSelectBlockOnInsert={ false }
 							aria-describedby={ descriptionId }
-							{ ...props }
+							toggleProps={ { ref, tabIndex, onFocus } }
 						/>
 						<div
 							className="block-editor-block-navigation-appender__description"
diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss
index 16f744c035c87a..f6342bf9414f4b 100644
--- a/packages/block-editor/src/components/block-navigation/style.scss
+++ b/packages/block-editor/src/components/block-navigation/style.scss
@@ -77,13 +77,16 @@ $tree-item-height: 36px;
 		height: $button-size;
 	}
 
-	.block-editor-button-block-appender {
-		outline: none;
-		background: none;
-		padding: $grid-unit-10;
-		padding: 6px;
-		margin-left: 0.8em;
-		width: calc(100% - 0.8em);
+	.block-editor-inserter__toggle {
+		background: $dark-gray-primary;
+		color: $white;
+		height: $grid-unit-30;
+		margin: 6px 6px 6px 0.8em;
+		min-width: $grid-unit-30;
+
+		&:active {
+			color: $white;
+		}
 	}
 }