Index: wp-admin/includes/theme.php
===================================================================
--- wp-admin/includes/theme.php	(revision 27124)
+++ wp-admin/includes/theme.php	(working copy)
@@ -452,4 +452,37 @@
 	 */
 	$prepared_themes = apply_filters( 'wp_prepare_themes_for_js', $prepared_themes );
 	return array_values( $prepared_themes );
+}
+
+
+/**
+ * Get public themes from the themes directory
+ * and prepare them for JavaScript
+ *
+ * @since 3.8.0
+ *
+ * @uses themes_api themes_directory_sections
+ * @return array with $theme objects
+ */
+function prepare_public_themes_for_js( $themes = array() ) {
+
+	$sections = array(
+		'featured' => __( 'Featured Themes' ),
+		'popular'  => __( 'Popular Themes' ),
+		'new'      => __( 'Newest Themes' ),
+	);
+
+	$sections = array_keys( $sections );
+
+	$args = array(
+		'page' => 1,
+		'per_page' => 12,
+	);
+
+	foreach ( $sections as $section ) {
+		$args['browse'] = $section;
+		$themes[ $section ] = themes_api( 'query_themes', $args );
+	}
+
+	return $themes;
 }
\ No newline at end of file
Index: wp-admin/js/theme.js
===================================================================
--- wp-admin/js/theme.js	(revision 27124)
+++ wp-admin/js/theme.js	(working copy)
@@ -12,6 +12,9 @@
 themes.data = _wpThemeSettings;
 l10n = themes.data.l10n;
 
+// Shortcut for (bool) isBrowsing check
+themes.isInstall = themes.data.settings.isBrowsing;
+
 // Setup app structure
 _.extend( themes, { model: {}, view: {}, routes: {}, router: {}, template: wp.template });
 
@@ -55,6 +58,9 @@
 		this.$el.append( '<br class="clear"/>' );
 	},
 
+	// Defines search element container
+	searchContainer: $( '#wpbody h2:first' ),
+
 	// Search input and view
 	// for current theme collection
 	search: function() {
@@ -70,7 +76,7 @@
 
 		// Render and append after screen title
 		view.render();
-		$('#wpbody h2:first')
+		this.searchContainer
 			.append( $.parseHTML( '<label class="screen-reader-text" for="theme-search-input">' + l10n.search + '</label>' ) )
 			.append( view.el );
 	},
@@ -749,6 +755,118 @@
 	}
 };
 
+// --------------------
+// PUBLIC THEME BROWSER
+// --------------------
+//
+// The public theme browser relies on the basic structure of the script
+// but overwrites some aspects of the main views
+//
+// The theme collection is the same but models have different attributes
+// as determined by the public themes_api
+//
+// @ bool check if it's the 'browsing themes' screen
+if ( themes.isInstall ) {
+
+	// Extend the main view controller
+	// @see themes.view.Appearance {}
+	//
+	// Overwrites properties and functions as needed
+	_.extend( themes.view.Appearance.prototype, {
+
+		el: '#wpbody-content .wrap',
+
+		// Register events for sorting and filters in theme-navigation
+		events: {
+			'click .theme-section': 'setSort',
+			'click .theme-filter': 'setFilter'
+		},
+
+		// Handles all the rendering of the public theme directory
+		install: function( section ) {
+			// Create a new collection with the proper theme data
+			// for each section
+			this.collection = new themes.Collection( themes.data.browse.publicThemes[ section ].themes );
+
+			// Set ups the view and passes the section argument
+			this.view = new themes.view.Themes({
+				collection: this.collection,
+				section: section,
+				parent: this
+			});
+
+			// Reset pagination every time the install view handler is run
+			this.page = 0;
+
+			// Render and append
+			this.$el.find( '.themes' ).remove();
+			this.view.render();
+			this.$el.find( '.theme-browser' ).append( this.view.el );
+		},
+
+		// Initial render method
+		render: function() {
+			this.search();
+			return this.install( this.options.section );
+		},
+
+		// Sorting navigation
+		setSort: function( event ) {
+			var $el = $( event.target ),
+				sort = $el.data( 'sort' );
+
+			// Bail if this is already active
+			if ( $el.hasClass( this.activeClass ) ) {
+				return;
+			}
+
+			$( '.theme-section' ).removeClass( this.activeClass );
+			$el.addClass( this.activeClass );
+
+			this.install( sort );
+		},
+
+		// Top filters
+		setFilter: function( event ) {
+			var $el = $( event.target ),
+				filter = $el.data( 'filter' );
+
+			// Bail if this is already active
+			if ( $el.hasClass( this.activeClass ) ) {
+				return;
+			}
+
+			$( '.theme-filter' ).removeClass( this.activeClass );
+			$el.addClass( this.activeClass );
+
+			//
+		},
+
+		activeClass: 'current',
+
+		// Overwrite search container class to append search
+		// in new location
+		searchContainer: $( '.theme-navigation' )
+	});
+
+	// Overwrite main application initializer
+	themes.Run.init = function() {
+		// Initializes the main view
+		// and bootstraps the default sorting section
+
+		// Set up the view
+		// Passes the default 'section' as an option
+		this.view = new themes.view.Appearance({
+			el: $( '#appearance' ),
+			section: 'featured'
+		});
+
+		// Render results
+		this.render();
+	}
+
+}
+
 // Ready...
 jQuery( document ).ready(
 
Index: wp-admin/css/wp-admin.css
===================================================================
--- wp-admin/css/wp-admin.css	(revision 27124)
+++ wp-admin/css/wp-admin.css	(working copy)
@@ -7990,151 +7990,124 @@
 
 
 /*------------------------------------------------------------------------------
-  16.2 - Install Themes
+  16.1 - Install Themes
 ------------------------------------------------------------------------------*/
-
-.theme-install-php h4 {
-	margin: 2.5em 0 8px;
+.theme-install-php h2 .upload {
+	margin-left: 10px;
 }
-
-.theme-install-php .tablenav {
-	height: auto;
+.theme-navigation {
+	background: #fff;
+	box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+	color: #555;
+	display: inline-block;
+	font-size: 13px;
+	margin: 20px 0 30px;
+	padding: 0 20px;
+	position: relative;
+	width: 100%;
 }
-
-.theme-install-php .spinner {
-	margin-top: 9px;
-}
-
-.available-theme {
+.theme-section {
+	color: #666;
+	cursor: pointer;
 	display: inline-block;
-	margin-right: 10px;
-	overflow: hidden;
-	padding: 20px 20px 20px 0;
-	vertical-align: top;
-	width: 300px;
+	margin: 0 10px;
+	padding: 15px 0;
 }
-
-.available-theme .screenshot {
-	width: 300px;
-	height: 225px;
-	display: block;
-	border: 1px solid #ccc;
-	margin-bottom: 10px;
-	overflow: hidden;
-	background-color: #fff;
+.theme-section.current {
+	border-bottom: 4px solid #666;
+	color: #222;
 }
-
-.available-theme img {
-	width: 300px;
+.theme-top-filters {
+	display: inline-block;
+	border-left: 1px solid #ddd;
+	padding-bottom: 4px;
+	padding-left: 20px;
+	margin-left: 20px;
 }
-
-.available-theme h3 {
-	margin: 15px 0 0;
+.theme-navigation .theme-filter {
+	color: #666;
+	cursor: pointer;
+	display: inline-block;
+	margin: 0 10px;
+	padding: 4px 5px;
 }
-
-.available-theme .theme-author {
-	line-height: 18px;
+.theme-navigation .theme-filter.current {
+	background: rgb(46, 162, 204);
+	border-radius: 3px;
+	color: #fff;
 }
-
-.available-theme .action-links {
-	margin-top: 10px;
-	overflow: hidden;
+.theme-install-php .theme-search {
+	position: absolute;
+		right: 10px;
+		top: 9px;
+	font-size: 16px;
+	font-weight: 300;
+	line-height: 1.5;
+	width: 280px;
 }
-
-.available-theme a.screenshot:focus {
-	border-color: #777;
+.add-new-theme {
+	display: none !important;
 }
 
-.available-theme .action-links li {
-	float: left;
-	padding-right: 10px;
-	margin-right: 10px;
-	border-right: 1px solid #dfdfdf;
+.rating {
+	margin: 30px 0;
 }
-
-.available-theme .action-links li {
-	padding-right: 8px;
-	margin-right: 8px;
+.rating span:before {
+	color: #E6B800;
+	content: "\f154";
+	display: inline-block;
+	-webkit-font-smoothing: antialiased;
+	font: normal 20px/1 'dashicons';
+	vertical-align: top;
 }
-
-.ie8 .available-theme .action-links li {
-	padding-right: 7px;
-	margin-right: 7px;
+/* Half stars */
+.rating-10 span.one:before,
+.rating-30 span.two:before,
+.rating-50 span.three:before,
+.rating-70 span.four:before,
+.rating-90 span.five:before {
+	content: "\f459";
 }
-
-.available-theme .action-links li:last-child {
-	padding-right: 0;
-	margin-right: 0;
-	border-right: 0;
+/* Full stars */
+.rating-20 span.one:before {
+	content: "\f155";
 }
-
-.available-theme .action-links .delete-theme {
-	float: right;
-	margin-left: 8px;
-	margin-right: 0;
+.rating-30 span.one:before,
+.rating-40 span.one:before,
+.rating-40 span.two:before {
+	content: "\f155";
 }
-
-.available-theme .action-links .delete-theme a {
-	color: red;
-	padding: 2px;
+.rating-50 span.one:before,
+.rating-50 span.two:before,
+.rating-60 span.one:before,
+.rating-60 span.two:before,
+.rating-60 span.three:before {
+	content: "\f155";
 }
-
-.available-theme .action-links .delete-theme a:hover {
-	background: red;
-	color: #fff;
-	text-decoration: none;
+.rating-70 span.one:before,
+.rating-70 span.two:before,
+.rating-70 span.three:before,
+.rating-80 span.one:before,
+.rating-80 span.two:before,
+.rating-80 span.three:before,
+.rating-80 span.four:before {
+	content: "\f155";
 }
 
-.available-theme .action-links p {
-	float: left;
+.rating-90 span.one:before,
+.rating-90 span.two:before,
+.rating-90 span.three:before,
+.rating-90 span.four:before,
+.rating-100 span.one:before,
+.rating-100 span.two:before,
+.rating-100 span.three:before,
+.rating-100 span.four:before,
+.rating-100 span.five:before {
+	content: "\f155";
 }
 
-/* Allow for three-up in small windows when sidebar is collapsed */
-@media only screen and (max-width: 1200px) {
-	.folded .available-theme,
-	.folded .available-theme .screenshot {
-		width: 300px;
-	}
-
-	.folded .available-theme .screenshot {
-		height: 225px;
-	}
-}
-
-/* Adjust three-up display in smaller windows when sidebar is collapsed */
-@media only screen and (max-width: 1079px) {
-	.folded .available-theme,
-	.folded .available-theme .screenshot {
-		width: 270px;
-	}
-
-	.folded .available-theme .screenshot {
-		height: 203px;
-	}
-}
-
-/* Allow for three-up on 1024px wide screens, e.g. tablets */
-@media only screen and (max-width: 1200px) {
-	.available-theme,
-	.available-theme .screenshot {
-		width: 240px;
-	}
-
-	.available-theme .screenshot {
-		height: 180px;
-	}
-
-	.available-theme img {
-		width: 100%;
-	}
-}
-
-/* @todo: surely this belongs elsewhere */
-#post-body ul.add-menu-item-tabs li.tabs a {
-	font-weight: 600;
-	text-decoration: none;
-}
-
 #TB_window {
 	border: 1px solid #333;
 }
Index: wp-admin/theme-install.php
===================================================================
--- wp-admin/theme-install.php	(revision 27124)
+++ wp-admin/theme-install.php	(working copy)
@@ -20,20 +20,47 @@
 	exit();
 }
 
-$wp_list_table = _get_list_table('WP_Theme_Install_List_Table');
-$pagenum = $wp_list_table->get_pagenum();
-$wp_list_table->prepare_items();
+// $wp_list_table = _get_list_table('WP_Theme_Install_List_Table');
+// $pagenum = $wp_list_table->get_pagenum();
+// $wp_list_table->prepare_items();
 
-$title = __('Install Themes');
+$title = __( 'Add Themes' );
 $parent_file = 'themes.php';
-if ( !is_network_admin() )
+
+if ( ! is_network_admin() ) {
 	$submenu_file = 'themes.php';
+}
 
-wp_enqueue_script( 'theme-install' );
+// wp_enqueue_script( 'theme-install' );
 wp_enqueue_script( 'theme-preview' );
 
-$body_id = $tab;
+wp_localize_script( 'theme', '_wpThemeSettings', array(
+	'themes'   => false,
+	'settings' => array(
+		'isBrowsing'    => (bool) ( get_current_screen()->id == 'theme-install' ),
+		'canInstall'    => ( ! is_multisite() && current_user_can( 'install_themes' ) ),
+		'installURI'    => ( ! is_multisite() && current_user_can( 'install_themes' ) ) ? admin_url( 'theme-install.php' ) : null,
+		'root'          => parse_url( admin_url( 'theme-install.php' ), PHP_URL_PATH ),
+	),
+	'l10n' => array(
+		'addNew' => __( 'Add New Theme' ),
+		'search'  => __( 'Search Themes' ),
+		'searchPlaceholder' => __( 'Search themes...' ),
+	),
+	'browse' => array(
+		'sections' => apply_filters( 'install_theme_sections', array(
+			'featured' => __( 'Featured Themes' ),
+			'popular'  => __( 'Popular Themes' ),
+			'new'      => __( 'Newest Themes' ),
+		) ),
+		'publicThemes' => ( get_current_screen()->id == 'theme-install' ) ? prepare_public_themes_for_js() : null,
+	),
+) );
 
+wp_enqueue_script( 'theme' );
+
+// $body_id = $tab;
+
 /**
  * Fires before each of the tabs are rendered on the Install Themes page.
  *
@@ -43,7 +70,7 @@
  *
  * @since 2.8.0
  */
-do_action( "install_themes_pre_{$tab}" );
+// do_action( "install_themes_pre_{$tab}" );
 
 $help_overview =
 	'<p>' . sprintf(__('You can find additional themes for your site by using the Theme Browser/Installer on this screen, which will display themes from the <a href="%s" target="_blank">WordPress.org Theme Directory</a>. These themes are designed and developed by third parties, are available free of charge, and are compatible with the license WordPress uses.'), 'http://wordpress.org/themes/') . '</p>' .
@@ -74,13 +101,28 @@
 
 include(ABSPATH . 'wp-admin/admin-header.php');
 ?>
-<div class="wrap">
-<h2><?php echo esc_html( $title ); ?></h2>
-<?php
+<div id="appearance" class="wrap">
+	<h2>
+		<?php echo esc_html( $title ); ?>
+		<a class="upload button button-secondary"><?php esc_html_e( 'Upload Theme' ); ?></a>
+	</h2>
 
-$wp_list_table->views(); ?>
+	<div class="theme-navigation">
+		<span class="theme-section current" data-sort="featured"><?php esc_html_e( 'Featured' ); ?></span>
+		<span class="theme-section" data-sort="popular"><?php esc_html_e( 'Popular' ); ?></span>
+		<span class="theme-section" data-sort="new"><?php esc_html_e( 'New' ); ?></span>
+		<div class="theme-top-filters">
+			<span class="theme-filter current" data-sort="all">All</span>
+			<span class="theme-filter" data-sort="photography">Photography</span>
+			<span class="theme-filter" data-sort="magazine">Magazine</span>
+			<span class="theme-filter" data-sort="blogging">Blogging</span>
+			<span class="theme-filter" data-sort="responsive">Responsive</span>
+		</div>
+	</div>
+	<div class="theme-browser"></div>
+	<div class="theme-overlay"></div>
 
-<br class="clear" />
+	<br class="clear" />
 <?php
 /**
  * Fires at the top of each of the tabs on the Install Themes page.
@@ -93,8 +135,68 @@
  *
  * @param int $paged Number of the current page of results being viewed.
  */
-do_action( "install_themes_{$tab}", $paged );
+// do_action( "install_themes_{$tab}", $paged );
 ?>
 </div>
+
+
+<script id="tmpl-theme" type="text/template">
+	<# if ( data.screenshot_url ) { #>
+		<div class="theme-screenshot">
+			<img src="{{ data.screenshot_url }}" alt="" />
+		</div>
+	<# } else { #>
+		<div class="theme-screenshot blank"></div>
+	<# } #>
+	<span class="more-details"><?php _e( 'Theme Details' ); ?></span>
+	<div class="theme-author"><?php printf( __( 'By %s' ), '{{{ data.author }}}' ); ?></div>
+	<h3 class="theme-name">{{{ data.name }}}</h3>
+
+	<div class="theme-actions">
+		<a class="button button-primary"><?php esc_html_e( 'Install' ); ?></a>
+		<a class="button button-secondary preview"><?php esc_html_e( 'Preview' ); ?></a>
+	</div>
+</script>
+
+<script id="tmpl-theme-single" type="text/template">
+	<div class="theme-backdrop"></div>
+	<div class="theme-wrap">
+		<div class="theme-header">
+			<button alt="<?php _e( 'Show previous theme' ); ?>" class="left dashicons dashicons-no"></button>
+			<button alt="<?php _e( 'Show next theme' ); ?>" class="right dashicons dashicons-no"></button>
+			<button alt="<?php _e( 'Close overlay' ); ?>" class="close dashicons dashicons-no"></button>
+		</div>
+		<div class="theme-about">
+			<div class="theme-screenshots">
+			<# if ( data.screenshot_url ) { #>
+				<div class="screenshot"><img src="{{ data.screenshot_url }}" alt="" /></div>
+			<# } else { #>
+				<div class="screenshot blank"></div>
+			<# } #>
+			</div>
+
+			<div class="theme-info">
+				<h3 class="theme-name">{{{ data.name }}}<span class="theme-version"><?php printf( __( 'Version: %s' ), '{{{ data.version }}}' ); ?></span></h3>
+				<h4 class="theme-author"><?php printf( __( 'By %s' ), '{{{ data.author }}}' ); ?></h4>
+				<p class="theme-description">{{{ data.description }}}</p>
+
+				<div class="rating rating-{{ Math.round( data.rating / 10 ) * 10 }}">
+					<span class="one"></span>
+					<span class="two"></span>
+					<span class="three"></span>
+					<span class="four"></span>
+					<span class="five"></span>
+				</div>
+			</div>
+		</div>
+
+		<div class="theme-actions">
+			<a href="" class="button button-primary"><?php _e( 'Install' ); ?></a>
+			<a href="" class="button button-secondary"><?php _e( 'Preview' ); ?></a>
+			<a href="" class="button button-secondary"><?php _e( 'Download' ); ?></a>
+		</div>
+	</div>
+</script>
+
 <?php
 include(ABSPATH . 'wp-admin/admin-footer.php');