diff --git a/wp-admin/css/customize-controls.css b/wp-admin/css/customize-controls.css
index 8c5cc10050..e558471842 100644
--- a/wp-admin/css/customize-controls.css
+++ b/wp-admin/css/customize-controls.css
@@ -1761,6 +1761,14 @@ p.customize-section-description {
 	z-index: 20;
 }
 
+@media screen and (min-width: 1670px) {
+	.control-panel-themes .customize-themes-full-container {
+		width: 82%;
+		right: 0;
+		left: initial;
+	}
+}
+
 .modal-open .control-panel-themes .customize-themes-full-container {
 	overflow-y: visible;
 }
@@ -1835,7 +1843,7 @@ p.customize-section-description {
 	display: none;
 }
 
-.themes-filter-bar .filter-drawer {
+.filter-drawer {
 	box-sizing: border-box;
 	width: 100%;
 	position: absolute;
@@ -1848,7 +1856,7 @@ p.customize-section-description {
 	border-bottom: 1px solid #ddd;
 }
 
-.themes-filter-bar .filter-group {
+.filter-drawer .filter-group {
 	margin: 0 25px 0 0;
 	width: calc( (100% - 75px) / 3);
 	min-width: 200px;
@@ -2111,6 +2119,14 @@ p.customize-section-description {
 	border-bottom: 1px solid #ddd;
 }
 
+@media screen and (min-width: 1670px) {
+	.customize-preview-header.themes-filter-bar {
+		width: 82%;
+		right: 0;
+		left: initial;
+	}
+}
+
 .themes-filter-bar .themes-filter-container {
 	margin: 0;
 	padding: 0;
@@ -2136,6 +2152,9 @@ p.customize-section-description {
 		width: 100%;
 		margin: 0 0 25px 0;
 	}
+	.filter-drawer {
+		top: 46px;
+	}
 	.wp-customizer .theme-browser .themes {
 		padding: 0 0 25px 25px;
 		overflow: hidden;
@@ -2150,7 +2169,7 @@ p.customize-section-description {
 }
 
 @media screen and (max-width:1018px) {
-	.themes-filter-bar .filter-group {
+	.filter-drawer .filter-group {
 		width: calc( (100% - 50px) / 2);
 	}
 }
@@ -2167,7 +2186,7 @@ p.customize-section-description {
 		min-width: 200px;
 	}
 
-	.themes-filter-bar .filter-drawer {
+	.filter-drawer {
 		top: 86px;
 	}
 
@@ -2177,7 +2196,7 @@ p.customize-section-description {
 }
 
 @media screen and (max-width:792px) {
-	.themes-filter-bar .filter-group {
+	.filter-drawer .filter-group {
 		width: calc( 100% - 25px);
 	}
 }
@@ -2892,7 +2911,6 @@ body.adding-widget .add-new-widget:before,
 		vertical-align: middle;
 		height: auto;
 		margin-bottom: 4px;
-		margin-top: 12px;
 	}
 
 	#publish-settings {
diff --git a/wp-admin/js/customize-controls.js b/wp-admin/js/customize-controls.js
index c2a63b068f..0f059579cc 100644
--- a/wp-admin/js/customize-controls.js
+++ b/wp-admin/js/customize-controls.js
@@ -1799,23 +1799,35 @@
 
 			// Toggle feature filters.
 			section.contentContainer.on( 'click', '.feature-filter-toggle', function( e ) {
-				$( e.currentTarget )
-					.toggleClass( 'open' )
-					.attr( 'aria-expanded', function( i, attr ) {
-						return 'true' === attr ? 'false' : 'true';
-					})
-					.next( '.filter-drawer' ).slideToggle( 180, 'linear', function() {
-						if ( 0 === section.filtersHeight ) {
-							section.filtersHeight = $( this ).height();
+				scrollDistance = $( '.customize-themes-full-container' ).scrollTop();
+				togglefilterdrawer = function() {
+					$( e.currentTarget )
+						.toggleClass( 'open' )
+						.attr( 'aria-expanded', function( i, attr ) {
+							return 'true' === attr ? 'false' : 'true';
+						})
+						.parent().next( '.filter-drawer' ).slideToggle( 180, 'linear', function() {
+							if ( 0 === section.filtersHeight ) {
+								section.filtersHeight = $( this ).height();
 
-							// First time, so it's opened.
-							section.contentContainer.find( '.themes' ).css( 'margin-top', section.filtersHeight + 76 );
-						}
-					});
-				if ( $( e.currentTarget ).hasClass( 'open' ) ) {
-					section.contentContainer.find( '.themes' ).css( 'margin-top', section.filtersHeight + 76 );
+								// First time, so it's opened.
+								section.contentContainer.find( '.themes' ).css( 'margin-top', section.filtersHeight + 50 );
+							}
+						});
+					if ( $( e.currentTarget ).hasClass( 'open' ) ) {
+						section.contentContainer.find( '.themes' ).css( 'margin-top', section.filtersHeight + 50 );
+					} else {
+						section.contentContainer.find( '.themes' ).css( 'margin-top', 0 );
+					}
+				}
+
+				if ( 0 < scrollDistance ) {
+					$('.customize-themes-full-container').animate( { scrollTop: 0 }, 800 );
+					if ( ! $( e.currentTarget ).hasClass( 'open' ) ) {
+						togglefilterdrawer();
+					}
 				} else {
-					section.contentContainer.find( '.themes' ).css( 'margin-top', 0 );
+					togglefilterdrawer();
 				}
 			});
 
diff --git a/wp-includes/customize/class-wp-customize-themes-section.php b/wp-includes/customize/class-wp-customize-themes-section.php
index a89439a60d..806de25295 100644
--- a/wp-includes/customize/class-wp-customize-themes-section.php
+++ b/wp-includes/customize/class-wp-customize-themes-section.php
@@ -80,6 +80,9 @@ class WP_Customize_Themes_Section extends WP_Customize_Section {
 					<div class="customize-preview-header themes-filter-bar">
 						<?php $this->filter_bar_content_template(); ?>
 					</div>
+					<# if ( 'wporg' === data.action ) { #>
+						<?php $this->filter_drawer_content_template(); ?>
+					<# } #>
 					<div class="error unexpected-error" style="display: none; "><p><?php _e( 'An unexpected error occurred. Something may be wrong with WordPress.org or this server&#8217;s configuration. If you continue to have problems, please try the <a href="https://wordpress.org/support/">support forums</a>.' ); ?></p></div>
 					<ul class="themes">
 					</ul>
@@ -124,22 +127,6 @@ class WP_Customize_Themes_Section extends WP_Customize_Section {
 				?>
 				</span>
 			</button>
-			<div class="filter-drawer filter-details">
-				<?php
-				$feature_list = get_theme_feature_list( false ); // @todo: Use the .org API instead of the local core feature list. The .org API is currently outdated and will be reconciled when the .org themes directory is next redesigned.
-				foreach ( $feature_list as $feature_name => $features ) {
-					echo '<fieldset class="filter-group">';
-					echo '<legend>' . esc_html( $feature_name ) . '</legend>';
-					echo '<div class="filter-group-feature">';
-					foreach ( $features as $feature => $feature_name ) {
-						echo '<input type="checkbox" id="filter-id-' . esc_attr( $feature ) . '" value="' . esc_attr( $feature ) . '" /> ';
-						echo '<label for="filter-id-' . esc_attr( $feature ) . '">' . esc_html( $feature_name ) . '</label><br>';
-					}
-					echo '</div>';
-					echo '</fieldset>';
-				}
-				?>
-			</div>
 		<# } else { #>
 			<div class="themes-filter-container">
 				<label for="{{ data.id }}-themes-filter" class="screen-reader-text"><?php _e( 'Search themes&hellip;' ); ?></label>
@@ -157,4 +144,33 @@ class WP_Customize_Themes_Section extends WP_Customize_Section {
 		</div>
 		<?php
 	}
+
+	/**
+	 * Render the filter drawer portion of a themes section as a JS template.
+	 *
+	 * The template is only rendered by PHP once, so all actions are prepared at once on the server side.
+	 * The filter bar container is rendered by @see `render_template()`.
+	 *
+	 * @since 4.9.0
+	 */
+	protected function filter_drawer_content_template() {
+		?>
+		<div class="filter-drawer filter-details">
+			<?php
+			$feature_list = get_theme_feature_list( false ); // @todo: Use the .org API instead of the local core feature list. The .org API is currently outdated and will be reconciled when the .org themes directory is next redesigned.
+			foreach ( $feature_list as $feature_name => $features ) {
+				echo '<fieldset class="filter-group">';
+				echo '<legend>' . esc_html( $feature_name ) . '</legend>';
+				echo '<div class="filter-group-feature">';
+				foreach ( $features as $feature => $feature_name ) {
+					echo '<input type="checkbox" id="filter-id-' . esc_attr( $feature ) . '" value="' . esc_attr( $feature ) . '" /> ';
+					echo '<label for="filter-id-' . esc_attr( $feature ) . '">' . esc_html( $feature_name ) . '</label><br>';
+				}
+				echo '</div>';
+				echo '</fieldset>';
+			}
+			?>
+		</div>
+		<?php
+	}
 }