diff --git a/src/wp-admin/css/wp-admin.css b/src/wp-admin/css/wp-admin.css
index 698c5ef9f0..5ff644d69d 100644
--- a/src/wp-admin/css/wp-admin.css
+++ b/src/wp-admin/css/wp-admin.css
@@ -6454,7 +6454,7 @@ span.imgedit-scale-warn {
 	background: #fff;
 }
 
-.theme-browser .theme:hover .theme-screenshot img {
+.theme-browser.rendered .theme:hover .theme-screenshot img {
 	opacity: 0.4;
 }
 
@@ -6477,7 +6477,7 @@ span.imgedit-scale-warn {
 	transition:         opacity 0.1s ease-in-out;
 }
 
-.theme-browser .theme:hover .more-details {
+.theme-browser.rendered .theme:hover .more-details {
 	opacity: 1;
 }
 
diff --git a/src/wp-admin/includes/theme.php b/src/wp-admin/includes/theme.php
index 618ad896b3..9ed912c9ec 100644
--- a/src/wp-admin/includes/theme.php
+++ b/src/wp-admin/includes/theme.php
@@ -378,9 +378,11 @@ function themes_api( $action, $args = null ) {
  * @return array An associative array of theme data, sorted by name.
  */
 function wp_prepare_themes_for_js( $themes = null ) {
-	$prepared_themes = array();
 	$current_theme = get_stylesheet();
 
+	// Make sure the current theme is listed first.
+	$prepared_themes = array( $current_theme => array() );
+
 	if ( null === $themes ) {
 		$themes = wp_get_themes( array( 'allowed' => true ) );
 		if ( ! isset( $themes[ $current_theme ] ) ) {
@@ -406,7 +408,7 @@ function wp_prepare_themes_for_js( $themes = null ) {
 		$slug = $theme->get_stylesheet();
 		$encoded_slug = urlencode( $slug );
 
-		$prepared_themes[] = array(
+		$prepared_themes[ $slug ] = array(
 			'id'           => $slug,
 			'name'         => $theme->display( 'Name' ),
 			'screenshot'   => array( $theme->get_screenshot() ), // @todo multiple
@@ -422,6 +424,13 @@ function wp_prepare_themes_for_js( $themes = null ) {
 			'actions'      => array(
 				'activate' => current_user_can( 'switch_themes' ) ? wp_nonce_url( admin_url( 'themes.php?action=activate&stylesheet=' . $encoded_slug ), 'switch-theme_' . $slug ) : null,
 				'customize'=> current_user_can( 'edit_theme_options' ) ? wp_customize_url( $slug ) : null,
+				'preview'   => add_query_arg( array(
+					'preview'        => 1,
+					'template'       => urlencode( $theme->get_template() ),
+					'stylesheet'     => urlencode( $slug ),
+					'preview_iframe' => true,
+					'TB_iframe'      => true,
+				), home_url( '/' ) ),
 				'delete'   => current_user_can( 'delete_themes' ) ? wp_nonce_url( admin_url( 'themes.php?action=delete&stylesheet=' . $encoded_slug ), 'delete-theme_' . $slug ) : null,
 			),
 		);
@@ -436,5 +445,6 @@ function wp_prepare_themes_for_js( $themes = null ) {
 	 *
 	 * @param array $prepared_themes Array of themes.
 	 */
-	return apply_filters( 'wp_prepare_themes_for_js', $prepared_themes );
+	$prepared_themes = apply_filters( 'wp_prepare_themes_for_js', $prepared_themes );
+	return array_values( $prepared_themes );
 }
\ No newline at end of file
diff --git a/src/wp-admin/js/theme.js b/src/wp-admin/js/theme.js
index 1739b086db..ef2dee786c 100644
--- a/src/wp-admin/js/theme.js
+++ b/src/wp-admin/js/theme.js
@@ -51,7 +51,7 @@ themes.view.Appearance = wp.Backbone.View.extend({
 
 		// Render and append
 		this.view.render();
-		this.$el.append( this.view.el );
+		this.$el.empty().append( this.view.el ).addClass('rendered');
 		this.$el.append( '<br class="clear"/>' );
 	},
 
diff --git a/src/wp-admin/network/themes.php b/src/wp-admin/network/themes.php
index 135c1e4138..aada6edb70 100644
--- a/src/wp-admin/network/themes.php
+++ b/src/wp-admin/network/themes.php
@@ -218,7 +218,7 @@ get_current_screen()->set_help_sidebar(
 $title = __('Themes');
 $parent_file = 'themes.php';
 
-wp_enqueue_script( 'theme' );
+wp_enqueue_script( 'theme-preview' );
 
 require_once(ABSPATH . 'wp-admin/admin-header.php');
 
diff --git a/src/wp-admin/theme-install.php b/src/wp-admin/theme-install.php
index 55d6de99c4..45fb870856 100644
--- a/src/wp-admin/theme-install.php
+++ b/src/wp-admin/theme-install.php
@@ -30,7 +30,7 @@ if ( !is_network_admin() )
 	$submenu_file = 'themes.php';
 
 wp_enqueue_script( 'theme-install' );
-wp_enqueue_script( 'theme' );
+wp_enqueue_script( 'theme-preview' );
 
 $body_id = $tab;
 
diff --git a/src/wp-admin/themes.php b/src/wp-admin/themes.php
index 2351b84dab..fa532548e6 100644
--- a/src/wp-admin/themes.php
+++ b/src/wp-admin/themes.php
@@ -116,7 +116,7 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );
 
 <div class="wrap">
 	<h2><?php esc_html_e( 'Themes' ); ?>
-		<span class="theme-count"></span>
+		<span class="theme-count"><?php echo count( $themes ); ?></span>
 	<?php if ( ! is_multisite() && current_user_can( 'install_themes' ) ) : ?>
 		<a href="<?php echo admin_url( 'theme-install.php' ); ?>" class="add-new-h2"><?php echo esc_html( _x( 'Add New', 'Add new theme' ) ); ?></a>
 	<?php endif; ?>
@@ -179,7 +179,54 @@ if ( ! $ct->errors() || ( 1 == count( $ct->errors()->get_error_codes() )
 
 ?>
 
-<div class="theme-browser"></div>
+<div class="theme-browser">
+	<div class="themes">
+
+<?php
+/*
+ * This PHP is synchronized with the tmpl-theme template below!
+ */
+
+foreach ( $themes as $theme ) : ?>
+<div class="theme<?php if ( $theme['active'] ) echo ' active'; ?>">
+	<?php if ( ! empty( $theme['screenshot'][0] ) ) { ?>
+		<div class="theme-screenshot">
+			<img src="<?php echo $theme['screenshot'][0]; ?>" alt="" />
+		</div>
+	<?php } else { ?>
+		<div class="theme-screenshot blank"></div>
+	<?php } ?>
+	<span class="more-details"><?php _e( 'Theme Details' ); ?></span>
+	<div class="theme-author"><?php printf( __( 'By %s' ), $theme['author'] ); ?></div>
+
+	<?php if ( $theme['active'] ) { ?>
+		<h3 class="theme-name"><span><?php _ex( 'Active:', 'theme' ); ?></span> <?php echo $theme['name']; ?></h3>
+	<?php } else { ?>
+		<h3 class="theme-name"><?php echo $theme['name']; ?></h3>
+	<?php } ?>
+
+	<div class="theme-actions">
+
+	<?php if ( $theme['active'] ) { ?>
+		<?php if ( $theme['actions']['customize'] ) { ?>
+			<a class="button button-primary customize load-customize hide-if-no-customize" href="<?php echo $theme['actions']['customize']; ?>"><?php _e( 'Customize' ); ?></a>
+		<?php } ?>
+	<?php } else { ?>
+		<a class="button button-primary activate" href="<?php echo $theme['actions']['activate']; ?>"><?php _e( 'Activate' ); ?></a>
+		<a class="button button-secondary load-customize hide-if-no-customize" href="<?php echo $theme['actions']['customize']; ?>"><?php _e( 'Live Preview' ); ?></a>
+		<a class="button button-secondary hide-if-customize" href="<?php echo $theme['actions']['preview']; ?>"><?php _e( 'Preview' ); ?></a>
+	<?php } ?>
+
+	</div>
+
+	<?php if ( $theme['hasUpdate'] ) { ?>
+		<div class="theme-update"><?php _e( 'Update Available' ); ?></div>
+	<?php } ?>
+</div>
+<?php endforeach; ?>
+	<br class="clear" />
+	</div>
+</div>
 
 <?php
 // List broken themes, if any.
@@ -212,6 +259,11 @@ if ( ! is_multisite() && current_user_can('edit_themes') && $broken_themes = wp_
 ?>
 </div><!-- .wrap -->
 
+<?php
+/*
+ * The tmpl-theme template is synchronized with PHP above!
+ */
+?>
 <script id="tmpl-theme" type="text/template">
 	<# if ( data.screenshot[0] ) { #>
 		<div class="theme-screenshot">
@@ -233,11 +285,12 @@ if ( ! is_multisite() && current_user_can('edit_themes') && $broken_themes = wp_
 
 	<# if ( data.active ) { #>
 		<# if ( data.actions.customize ) { #>
-			<a class="button button-primary hide-if-no-customize" href="{{ data.actions.customize }}"><?php _e( 'Customize' ); ?></a>
+			<a class="button button-primary customize load-customize hide-if-no-customize" href="{{ data.actions.customize }}"><?php _e( 'Customize' ); ?></a>
 		<# } #>
 	<# } else { #>
 		<a class="button button-primary activate" href="{{{ data.actions.activate }}}"><?php _e( 'Activate' ); ?></a>
-		<a class="button button-secondary preview" href="{{{ data.actions.customize }}}"><?php _e( 'Live Preview' ); ?></a>
+		<a class="button button-secondary load-customize hide-if-no-customize" href="{{{ data.actions.customize }}}"><?php _e( 'Live Preview' ); ?></a>
+		<a class="button button-secondary hide-if-customize" href="{{{ data.actions.preview }}}"><?php _e( 'Preview' ); ?></a>
 	<# } #>
 
 	</div>
@@ -296,14 +349,15 @@ if ( ! is_multisite() && current_user_can('edit_themes') && $broken_themes = wp_
 
 		<div class="theme-actions">
 			<div class="active-theme">
-				<a href="{{{ data.actions.customize }}}" class="button button-primary hide-if-no-customize"><?php _e( 'Customize' ); ?></a>
+				<a href="{{{ data.actions.customize }}}" class="button button-primary customize load-customize hide-if-no-customize"><?php _e( 'Customize' ); ?></a>
 				<?php echo implode( ' ', $current_theme_actions ); ?>
 			</div>
 			<div class="inactive-theme">
 				<# if ( data.actions.activate ) { #>
-					<a href="{{{ data.actions.activate }}}" class="button button-primary"><?php _e( 'Activate' ); ?></a>
+					<a href="{{{ data.actions.activate }}}" class="button button-primary activate"><?php _e( 'Activate' ); ?></a>
 				<# } #>
-				<a href="{{{ data.actions.customize }}}" class="button button-secondary"><?php _e( 'Live Preview' ); ?></a>
+				<a href="{{{ data.actions.customize }}}" class="button button-secondary load-customize hide-if-no-customize"><?php _e( 'Live Preview' ); ?></a>
+				<a href="{{{ data.actions.preview }}}" class="button button-secondary hide-if-customize"><?php _e( 'Preview' ); ?></a>
 			</div>
 
 			<# if ( ! data.active && data.actions.delete ) { #>