diff --git a/packages/block-editor/src/components/block-navigation/block-select-button.js b/packages/block-editor/src/components/block-navigation/block-select-button.js
index 2e9956d5387e1..da3a49606e713 100644
--- a/packages/block-editor/src/components/block-navigation/block-select-button.js
+++ b/packages/block-editor/src/components/block-navigation/block-select-button.js
@@ -19,6 +19,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import BlockIcon from '../block-icon';
+import DescenderLines from './descender-lines';
 import { getBlockPositionDescription } from './utils';
 
 function BlockNavigationBlockSelectButton(
@@ -66,6 +67,7 @@ function BlockNavigationBlockSelectButton(
 				onDragEnd={ onDragEnd }
 				draggable={ draggable }
 			>
+				<DescenderLines level={ level } />
 				<BlockIcon icon={ blockType.icon } showColors />
 				{ blockDisplayName }
 				{ isSelected && (
diff --git a/packages/block-editor/src/components/block-navigation/block.js b/packages/block-editor/src/components/block-navigation/block.js
index da24893d49d0d..79b06b7d42922 100644
--- a/packages/block-editor/src/components/block-navigation/block.js
+++ b/packages/block-editor/src/components/block-navigation/block.js
@@ -25,7 +25,6 @@ import {
 	BlockMoverUpButton,
 	BlockMoverDownButton,
 } from '../block-mover/button';
-import DescenderLines from './descender-lines';
 import BlockNavigationBlockContents from './block-contents';
 import BlockSettingsDropdown from '../block-settings-menu/block-settings-dropdown';
 import { useBlockNavigationContext } from './context';
@@ -39,7 +38,6 @@ export default function BlockNavigationBlock( {
 	rowCount,
 	siblingBlockCount,
 	showBlockMovers,
-	terminatedLevels,
 	path,
 } ) {
 	const cellRef = useRef( null );
@@ -66,18 +64,15 @@ export default function BlockNavigationBlock( {
 
 	const hasSiblings = siblingBlockCount > 0;
 	const hasRenderedMovers = showBlockMovers && hasSiblings;
+
+	// I'm not using the classnames that come from this,
+	// but maybe I should? -shaun
 	const hasVisibleMovers = isHovered || isFocused;
-	const moverCellClassName = classnames(
-		'block-editor-block-navigation-block__mover-cell',
-		{ 'is-visible': hasVisibleMovers }
-	);
+
 	const {
 		__experimentalFeatures: withExperimentalFeatures,
 	} = useBlockNavigationContext();
-	const blockNavigationBlockSettingsClassName = classnames(
-		'block-editor-block-navigation-block__menu-cell',
-		{ 'is-visible': hasVisibleMovers }
-	);
+	
 	useEffect( () => {
 		if ( withExperimentalFeatures && isSelected ) {
 			cellRef.current.focus();
@@ -103,16 +98,10 @@ export default function BlockNavigationBlock( {
 		>
 			<TreeGridCell
 				className="block-editor-block-navigation-block__contents-cell"
-				colSpan={ hasRenderedMovers ? undefined : 2 }
 				ref={ cellRef }
 			>
 				{ ( { ref, tabIndex, onFocus } ) => (
 					<div className="block-editor-block-navigation-block__contents-container">
-						<DescenderLines
-							level={ level }
-							isLastRow={ position === rowCount }
-							terminatedLevels={ terminatedLevels }
-						/>
 						<BlockNavigationBlockContents
 							block={ block }
 							onClick={ () => onClick( block.clientId ) }
@@ -127,42 +116,36 @@ export default function BlockNavigationBlock( {
 					</div>
 				) }
 			</TreeGridCell>
-			{ hasRenderedMovers && (
-				<>
-					<TreeGridCell
-						className={ moverCellClassName }
-						withoutGridItem
-					>
-						<TreeGridItem>
-							{ ( { ref, tabIndex, onFocus } ) => (
-								<BlockMoverUpButton
-									orientation="vertical"
-									clientIds={ [ clientId ] }
-									ref={ ref }
-									tabIndex={ tabIndex }
-									onFocus={ onFocus }
-								/>
-							) }
-						</TreeGridItem>
-						<TreeGridItem>
-							{ ( { ref, tabIndex, onFocus } ) => (
-								<BlockMoverDownButton
-									orientation="vertical"
-									clientIds={ [ clientId ] }
-									ref={ ref }
-									tabIndex={ tabIndex }
-									onFocus={ onFocus }
-								/>
-							) }
-						</TreeGridItem>
-					</TreeGridCell>
-				</>
-			) }
 
-			{ withExperimentalFeatures && (
-				<TreeGridCell
-					className={ blockNavigationBlockSettingsClassName }
-				>
+			<TreeGridCell
+				className="block-editor-block-navigation-block__options-cell"
+				withoutGridItem
+			>
+				<TreeGridItem>
+					{ ( { ref, tabIndex, onFocus } ) => (
+						<BlockMoverUpButton
+							orientation="vertical"
+							clientIds={ [ clientId ] }
+							ref={ ref }
+							tabIndex={ tabIndex }
+							onFocus={ onFocus }
+						/>
+					) }
+				</TreeGridItem>
+
+				<TreeGridItem>
+					{ ( { ref, tabIndex, onFocus } ) => (
+						<BlockMoverDownButton
+							orientation="vertical"
+							clientIds={ [ clientId ] }
+							ref={ ref }
+							tabIndex={ tabIndex }
+							onFocus={ onFocus }
+						/>
+					) }
+				</TreeGridItem>
+
+				<TreeGridItem>
 					{ ( { ref, tabIndex, onFocus } ) => (
 						<BlockSettingsDropdown
 							clientIds={ [ clientId ] }
@@ -192,8 +175,8 @@ export default function BlockNavigationBlock( {
 							) }
 						</BlockSettingsDropdown>
 					) }
-				</TreeGridCell>
-			) }
+				</TreeGridItem>
+			</TreeGridCell>
 		</BlockNavigationLeaf>
 	);
 }
diff --git a/packages/block-editor/src/components/block-navigation/descender-lines.js b/packages/block-editor/src/components/block-navigation/descender-lines.js
index 58b7144bd6dd8..1a08955de9c3b 100644
--- a/packages/block-editor/src/components/block-navigation/descender-lines.js
+++ b/packages/block-editor/src/components/block-navigation/descender-lines.js
@@ -6,11 +6,7 @@ import classnames from 'classnames';
 
 const lineClassName = 'block-editor-block-navigator-descender-line';
 
-export default function DescenderLines( {
-	level,
-	isLastRow,
-	terminatedLevels,
-} ) {
+export default function DescenderLines( { level } ) {
 	return times( level - 1, ( index ) => {
 		// The first 'level' that has a descender line is level 2.
 		// Add 2 to the zero-based index below to reflect that.
@@ -22,8 +18,6 @@ export default function DescenderLines( {
 				aria-hidden="true"
 				className={ classnames( lineClassName, {
 					'has-item': hasItem,
-					'is-last-row': isLastRow,
-					'is-terminated': terminatedLevels.includes( currentLevel ),
 				} ) }
 			/>
 		);
diff --git a/packages/block-editor/src/components/block-navigation/index.js b/packages/block-editor/src/components/block-navigation/index.js
index 4e18231de1d66..0933b79ec4599 100644
--- a/packages/block-editor/src/components/block-navigation/index.js
+++ b/packages/block-editor/src/components/block-navigation/index.js
@@ -8,7 +8,6 @@ import { noop } from 'lodash';
  */
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -33,9 +32,6 @@ function BlockNavigation( {
 
 	return (
 		<div className="block-editor-block-navigation__container">
-			<p className="block-editor-block-navigation__label">
-				{ __( 'List view' ) }
-			</p>
 			{ hasHierarchy && (
 				<BlockNavigationTree
 					blocks={ [ rootBlock ] }
@@ -51,6 +47,7 @@ function BlockNavigation( {
 					selectedBlockClientId={ selectedBlockClientId }
 					selectBlock={ selectBlock }
 					__experimentalFeatures={ __experimentalFeatures }
+					showNestedBlocks
 				/>
 			) }
 		</div>
diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss
index bb63301ccf8d2..9db98db93fcad 100644
--- a/packages/block-editor/src/components/block-navigation/style.scss
+++ b/packages/block-editor/src/components/block-navigation/style.scss
@@ -1,291 +1,154 @@
-$tree-border-width: 2px;
-$tree-item-height: 36px;
-
-.block-editor-block-navigation__container {
-	padding: $grid-unit-10 - $border-width;
-}
-
-.block-editor-block-navigation__label {
-	margin: 0 0 $grid-unit-15;
-	color: $gray-700;
-	text-transform: uppercase;
-	font-size: 11px;
-	font-weight: 500;
-}
-
+/*
+General structure. I'll delete this at some point. -shaun
+
+block-editor-block-navigation__container
+	block-editor-block-navigation-tree
+		div
+			block-editor-block-navigation-leaf
+				block-editor-block-navigation-block__contents-cell
+					block-editor-block-navigation-block__contents-container
+						block-editor-block-navigation-block-contents (block-editor-block-navigation-block-select-button)
+							block-editor-block-icon
+							(text - block label)
+							block-editor-block-navigation-block-select-button__description
+				block-editor-block-navigation-block__mover-cell
+					components-button block-editor-block-mover-button is-up-button has-icon
+				block-editor-block-navigation-block__mover-cell
+					components-button block-editor-block-mover-button is-down-button has-icon
+*/
+
+// The root container for the tree.
 .block-editor-block-navigation__container {
-	padding: $grid-unit - $border-width;
-}
-
-.block-editor-block-navigation-tree {
-	width: 100%;
-	border-collapse: collapse;
-	padding: 0;
-	margin: 0;
+	min-width: $sidebar-width;
 }
 
+// Each row within the tree.
 .block-editor-block-navigation-leaf {
-	// Use position relative for row animation.
 	position: relative;
+	border-radius: 2px;
+	border: 1px solid transparent;
 
-	&.is-dragging {
-		display: none;
+	// Hide block options by default. We use opacity so
+	// you can still use the keyboard to navigate.
+	.block-editor-block-navigation-block__options-cell {
+		opacity: 0;
 	}
 
-	.block-editor-block-navigation-block-contents {
-		display: flex;
-		align-items: center;
-		width: 100%;
-		height: auto;
-		padding: $grid-unit-15 ($grid-unit-15 / 2);
-		margin-top: auto;
-		margin-bottom: auto;
-		text-align: left;
-		color: $dark-gray-600;
-		border-radius: 2px;
-		position: relative;
+	&:hover {
+		border: 1px solid var(--wp-admin-theme-color);
 
-		&.is-dropping-before::before {
-			content: "";
-			position: absolute;
-			pointer-events: none;
-			transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear;
-			top: -2px;
-			right: 0;
-			left: 0;
-			border-top: 4px solid var(--wp-admin-theme-color);
+		// Descender indicators are darker when the row has
+		// focus or is hovered.
+		.block-editor-block-navigator-descender-line {
+			border-left-color: $gray-900;
 		}
 
-		&.is-dropping-after::before {
-			content: "";
-			position: absolute;
-			pointer-events: none;
-			transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear;
-			bottom: -2px;
-			right: 0;
-			left: 0;
-			border-bottom: 4px solid var(--wp-admin-theme-color);
-		}
-
-		&.is-dropping-to-inner-blocks::before {
-			content: "";
-			position: absolute;
-			pointer-events: none;
-			transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear;
-			bottom: -2px;
-			right: 0;
-			left: $icon-size;
-			border-bottom: 4px solid var(--wp-admin-theme-color);
-		}
-
-		.components-modal__content & {
-			padding-left: 0;
-			padding-right: 0;
+		// Show the block options when the row is hovered.
+		.block-editor-block-navigation-block__options-cell {
+			opacity: 1;
 		}
 	}
 
-	&.is-visible .block-editor-block-navigation-block-contents {
-		opacity: 1;
-		@include edit-post__fade-in-animation;
-	}
+	&:focus-within {
+		border: 1px solid $gray-200;
 
-	.block-editor-block-icon {
-		align-self: flex-start;
-		margin-right: 6px;
-	}
-
-	&.is-selected .block-editor-block-icon svg,
-	&.is-selected:focus .block-editor-block-icon svg {
-		color: $white;
-		background: $gray-900;
-		box-shadow: 0 0 0 $border-width $gray-900;
-		border-radius: $border-width;
-	}
-
-	.block-editor-block-navigation-block__menu-cell,
-	.block-editor-block-navigation-block__mover-cell,
-	.block-editor-block-navigation-block__contents-cell {
-		padding-top: 0;
-		padding-bottom: 0;
-	}
-
-	.block-editor-block-navigation-block__menu-cell,
-	.block-editor-block-navigation-block__mover-cell {
-		line-height: 0;
-		width: $button-size;
-		opacity: 0;
-		vertical-align: top;
-		@include reduce-motion("transition");
-
-		&.is-visible {
+		// Show the block options when any element in
+		// the row is focused.
+		.block-editor-block-navigation-block__options-cell {
 			opacity: 1;
-			@include edit-post__fade-in-animation;
 		}
-
-		&,
-		.components-button.has-icon {
-			width: 24px;
-			min-width: 24px;
-			padding: 0;
-		}
-	}
-
-	.block-editor-block-navigation-block__menu-cell {
-		padding-top: $grid-unit-10;
 	}
 
-	.block-editor-block-navigation-block__mover-cell-alignment-wrapper {
-		display: flex;
-		height: 100%;
-		flex-direction: column;
-		align-items: center;
-	}
-
-	// Keep the tap target large but the focus target small
-	.block-editor-block-mover-button {
-		position: relative;
-		width: $button-size;
-		height: $button-size-small;
-
-		// Position the icon
-		svg {
-			position: relative;
-			height: $button-size-small;
+	&.is-selected,
+	&.is-selected:hover {
+		&,
+		.block-editor-block-navigation-block-contents,
+		.block-editor-block-navigation-block__options-cell .components-button {
+			background: $gray-900;
+			color: $white;
 		}
 
-		&.is-up-button {
-			align-items: flex-end;
-			svg {
-				bottom: -4px;
-			}
+		.block-editor-block-navigator-descender-line {
+			border-left-color: $white;
 		}
 
-		&.is-down-button {
-			align-items: flex-start;
-			svg {
-				top: -4px;
-			}
+		// Always show the options for the selected block.
+		.block-editor-block-navigation-block__options-cell {
+			opacity: 1;
 		}
+	}
+}
 
-		// Don't show the focus inherited by the Button component.
-		&:focus:enabled {
-			box-shadow: none;
-			outline: none;
-		}
+// The main block button, containing the block icon
+// and label. Pressing this selects the block.
+.block-editor-block-navigation-block-contents {
+	width: 100%;
+	position: relative;
 
-		// Focus style.
-		&:focus {
-			box-shadow: none;
-			outline: none;
-		}
+	.block-editor-block-icon {
+		margin-right: $grid-unit-15;
+	}
 
-		&:focus::before {
-			@include block-toolbar-button-style__focus();
-		}
+	&:hover {
+		color: $gray-900;
+	}
 
-		// Focus and toggle pseudo elements.
-		&::before {
-			content: "";
-			position: absolute;
-			display: block;
-			border-radius: $radius-block-ui;
-			height: 16px;
-			min-width: 100%;
+	&.is-dropping-before::before {
+		content: "";
+		position: absolute;
+		pointer-events: none;
+		transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear;
+		top: -2px;
+		right: 0;
+		left: 0;
+		border-top: 4px solid var(--wp-admin-theme-color);
+	}
 
-			// Position the focus rectangle.
-			left: 0;
-			right: 0;
+	&.is-dropping-after::before {
+		content: "";
+		position: absolute;
+		pointer-events: none;
+		transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear;
+		bottom: -2px;
+		right: 0;
+		left: 0;
+		border-bottom: 4px solid var(--wp-admin-theme-color);
+	}
 
-			// Animate in.
-			animation: components-button__appear-animation 0.1s ease;
-			animation-fill-mode: forwards;
-			@include reduce-motion("animation");
-		}
+	&.is-dropping-to-inner-blocks::before {
+		content: "";
+		position: absolute;
+		pointer-events: none;
+		transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear;
+		bottom: -2px;
+		right: 0;
+		left: $icon-size;
+		border-bottom: 4px solid var(--wp-admin-theme-color);
 	}
+}
 
-	.block-editor-inserter__toggle {
-		background: $gray-900;
-		color: $white;
-		height: $grid-unit-30;
-		margin: 6px 6px 6px 1px;
-		min-width: $grid-unit-30;
+// The block options, including the movers and more menu.
+.block-editor-block-navigation-block__options-cell {
+	position: absolute;
+	top: 0;
+	right: 0;
+}
 
-		&:active {
-			color: $white;
-		}
-	}
+// This is used to indent nested blocks. They stack
+// as nesting increases, creating a larger indentation.
+.block-editor-block-navigator-descender-line {
+	position: relative;
+	flex-shrink: 0;
+	width: 2px;
+	height: 2px;
+	border-left: 2px solid $gray-700;
+	margin: 0 6px 0;
 }
 
+// Hide block number and level description. (i.e. Block 2 of
+// 3, Level 2). This is mostly useful for screen readers.
 .block-editor-block-navigation-block-slot__description,
 .block-editor-block-navigation-block-select-button__description,
 .block-editor-block-navigation-appender__description {
 	display: none;
 }
-
-.block-editor-block-navigation-block__contents-cell,
-.block-editor-block-navigation-appender__cell {
-	.block-editor-block-navigation-block__contents-container,
-	.block-editor-block-navigation-appender__container {
-		display: flex;
-	}
-
-	.block-editor-block-navigation-block__contents-container {
-		min-height: $grid-unit-60;
-	}
-
-	.block-editor-block-navigator-descender-line {
-		position: relative;
-		flex-shrink: 0;
-		width: ( $button-size / 2 ) + 6px;
-
-		&:first-child {
-			width: ( $button-size / 2 );
-		}
-
-		&.has-item {
-			margin-right: 6px;
-		}
-
-		// Draw a vertical line using border-right.
-		&::before {
-			content: "";
-			display: block;
-			position: absolute;
-			top: 1px;
-			bottom: -2px;
-			right: -1px;
-			border-right: 2px solid $light-gray-900;
-		}
-
-		// If a vertical line has terminated, don't draw it.
-		&.is-terminated::before {
-			border-color: transparent;
-		}
-
-		// Make the last vertical line half-height.
-		&.has-item.is-last-row {
-			height: 26px;
-		}
-
-		// Draw a horizontal line using border-bottom.
-		&.has-item::after {
-			content: "";
-			display: block;
-			position: absolute;
-			top: 26px;
-			left: 100%;
-			width: 5px;
-			border-bottom: 2px solid $light-gray-900;
-		}
-	}
-}
-
-// Position the horizontal line in the middle of appender's height
-.block-editor-block-navigation-appender__cell .block-editor-block-navigator-descender-line {
-	&.has-item.is-last-row {
-		height: $grid-unit-20;
-		&::after {
-			top: 100%;
-		}
-	}
-}
diff --git a/packages/components/src/tree-grid/cell.js b/packages/components/src/tree-grid/cell.js
index dd4e2654d64e5..60baafa11a697 100644
--- a/packages/components/src/tree-grid/cell.js
+++ b/packages/components/src/tree-grid/cell.js
@@ -13,12 +13,12 @@ export default forwardRef( function TreeGridCell(
 	ref
 ) {
 	return (
-		<td { ...props } role="gridcell">
+		<div { ...props } role="gridcell">
 			{ withoutGridItem ? (
 				children
 			) : (
 				<TreeGridItem ref={ ref }>{ children }</TreeGridItem>
 			) }
-		</td>
+		</div>
 	);
 } );
diff --git a/packages/components/src/tree-grid/index.js b/packages/components/src/tree-grid/index.js
index cd5d6bb2a3cd3..dbf1c02f06e33 100644
--- a/packages/components/src/tree-grid/index.js
+++ b/packages/components/src/tree-grid/index.js
@@ -151,14 +151,14 @@ function TreeGrid( { children, ...props }, ref ) {
 	/* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */
 	return (
 		<RovingTabIndexContainer>
-			<table
-				{ ...props }
-				role="treegrid"
-				onKeyDown={ onKeyDown }
-				ref={ ref }
-			>
-				<tbody>{ children }</tbody>
-			</table>
+			<div
+        { ...props }
+        role="treegrid"
+        onKeyDown={ onKeyDown }
+        ref={ ref }
+      >
+				<div>{ children }</div>
+			</div>
 		</RovingTabIndexContainer>
 	);
 	/* eslint-enable jsx-a11y/no-noninteractive-element-to-interactive-role */
diff --git a/packages/components/src/tree-grid/row.js b/packages/components/src/tree-grid/row.js
index 744055194ad22..43af081fbb37a 100644
--- a/packages/components/src/tree-grid/row.js
+++ b/packages/components/src/tree-grid/row.js
@@ -14,7 +14,7 @@ function TreeGridRow(
 		// linting rule fails when validating this markup.
 		//
 		// eslint-disable-next-line jsx-a11y/role-supports-aria-props
-		<tr
+		<div
 			{ ...props }
 			ref={ ref }
 			role="row"
@@ -24,7 +24,7 @@ function TreeGridRow(
 			aria-expanded={ isExpanded }
 		>
 			{ children }
-		</tr>
+		</div>
 	);
 }