diff --git a/assets/stylesheets/_components.scss b/assets/stylesheets/_components.scss
index b24b202f4a2742..093aaafd066bc4 100644
--- a/assets/stylesheets/_components.scss
+++ b/assets/stylesheets/_components.scss
@@ -385,7 +385,6 @@
 @import 'my-sites/upgrades/domain-management/style';
 @import 'my-sites/upgrades/domain-management/components/icann-verification/style';
 @import 'post-editor/style';
-@import 'post-editor/drafts-button/style';
 @import 'post-editor/edit-post-status/style';
 @import 'post-editor/editor-action-bar/style';
 @import 'post-editor/editor-author/style';
@@ -400,7 +399,6 @@
 @import 'post-editor/editor-ground-control/style';
 @import 'post-editor/editor-html-toolbar/style';
 @import 'post-editor/editor-location/style';
-@import 'post-editor/editor-mobile-navigation/style';
 @import 'post-editor/editor-notice/style';
 @import 'post-editor/editor-more-options/style';
 @import 'post-editor/editor-notice/style';
diff --git a/assets/stylesheets/shared/functions/_z-index.scss b/assets/stylesheets/shared/functions/_z-index.scss
index 56c27051789875..d5b038f7dd9159 100644
--- a/assets/stylesheets/shared/functions/_z-index.scss
+++ b/assets/stylesheets/shared/functions/_z-index.scss
@@ -100,6 +100,7 @@ $z-layers: (
 		'.main': 20, //TODO: this doesn't always have a stacking context
 		//'tinymce-toolbar': 20, client/components/tinymce/index.jsx
 		'.search': 22,
+		'.editor-ground-control': 22,
 		'.reader-mobile-sidebar': 23,
 		'.community-translator': 99,
 		'.author-selector__popover.popover': 100,
diff --git a/assets/stylesheets/shared/mixins/_clear-fix.scss b/assets/stylesheets/shared/mixins/_clear-fix.scss
index 5a69a1ef735868..93461769b9291b 100644
--- a/assets/stylesheets/shared/mixins/_clear-fix.scss
+++ b/assets/stylesheets/shared/mixins/_clear-fix.scss
@@ -7,6 +7,7 @@
 		content: ".";
 		display: block;
 		height: 0;
+		width: 0;
 		clear: both;
 		visibility: hidden;
 	}
diff --git a/client/blocks/author-selector/index.jsx b/client/blocks/author-selector/index.jsx
index 13dcdeb9c79af6..97ceec099887af 100644
--- a/client/blocks/author-selector/index.jsx
+++ b/client/blocks/author-selector/index.jsx
@@ -94,6 +94,7 @@ const SwitcherShell = React.createClass( {
 					ignoreContext={ this.props.ignoreContext } >
 					{ ( this.props.fetchOptions.search || users.length > 10 ) &&
 						<Search
+							compact
 							onSearch={ this._onSearch }
 							placeholder={ this.translate( 'Find Author…', { context: 'search label' } ) }
 							delaySearch={ true }
diff --git a/client/blocks/author-selector/style.scss b/client/blocks/author-selector/style.scss
index d9a589e08341d8..a53cda47a5973b 100644
--- a/client/blocks/author-selector/style.scss
+++ b/client/blocks/author-selector/style.scss
@@ -40,6 +40,10 @@
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
+
+	.user__name {
+		font-size: 13px;
+	}
 }
 
 .author-selector__popover.popover {
@@ -51,16 +55,10 @@
 		border-top: 0px;
 		border-bottom: 1px solid lighten( $gray, 30 );
 		border-radius: 5px;
-		// .search should be cleaned up to not force height
-		height: 43px;
 		margin-bottom: 0;
 
-	&.is-open {
-		width: 200px;
-	}
-
-		.search__input[type="search"] {
-			font-size: 14px;
+		&.is-open {
+			width: 200px;
 		}
 
 		& + .author-selector__infinite-list {
diff --git a/client/blocks/site/index.jsx b/client/blocks/site/index.jsx
index 2c7e91d50a1d92..ff9681a098654a 100644
--- a/client/blocks/site/index.jsx
+++ b/client/blocks/site/index.jsx
@@ -33,7 +33,9 @@ export default React.createClass( {
 			isSelected: false,
 
 			homeLink: false,
-			showHomeIcon: true // if homeLink is enabled
+			// if homeLink is enabled
+			showHomeIcon: true,
+			compact: false
 		};
 	},
 
@@ -48,7 +50,8 @@ export default React.createClass( {
 		isHighlighted: React.PropTypes.bool,
 		site: React.PropTypes.object,
 		homeLink: React.PropTypes.bool,
-		showHomeIcon: React.PropTypes.bool
+		showHomeIcon: React.PropTypes.bool,
+		compact: React.PropTypes.bool
 	},
 
 	onSelect( event ) {
@@ -78,7 +81,8 @@ export default React.createClass( {
 			'is-private': site.is_private,
 			'is-redirect': site.options && site.options.is_redirect,
 			'is-selected': this.props.isSelected,
-			'is-highlighted': this.props.isHighlighted
+			'is-highlighted': this.props.isHighlighted,
+			'is-compact': this.props.compact,
 		} );
 
 		return (
@@ -103,7 +107,7 @@ export default React.createClass( {
 						} )
 					}
 				>
-					<SiteIcon site={ site } />
+					<SiteIcon site={ site } size={ this.props.compact ? 24 : null } />
 					<div className="site__info">
 						<div className="site__title">
 							{ /* eslint-disable wpcalypso/jsx-gridicon-size */ }
diff --git a/client/blocks/site/style.scss b/client/blocks/site/style.scss
index 47a5d5f2d3d3d2..80fc3b90b9d77c 100644
--- a/client/blocks/site/style.scss
+++ b/client/blocks/site/style.scss
@@ -35,6 +35,30 @@
 		}
 
 	}
+
+	&.is-compact {
+		.site__content {
+			padding: 0 16px;
+		}
+
+		.site__domain {
+			display: none;
+		}
+
+		.site__title {
+			line-height: 46px;
+		}
+
+		.site__home {
+			top: 11px;
+			line-height: 18px;
+		}
+
+		.site__home .gridicon {
+			margin-top: 0;
+		}
+
+	}
 }
 
 // Wraps the anchor element
@@ -114,6 +138,11 @@
 		vertical-align: middle;
 	}
 
+	.site.is-compact & {
+		width: 24px;
+		height: 24px;
+	}
+
 	&:hover {
 		color: $white;
 	}
diff --git a/client/blocks/term-tree-selector/index.jsx b/client/blocks/term-tree-selector/index.jsx
index af4afccaa7c6b3..4831f32a4a3ae2 100644
--- a/client/blocks/term-tree-selector/index.jsx
+++ b/client/blocks/term-tree-selector/index.jsx
@@ -21,6 +21,7 @@ export default React.createClass( {
 		analyticsPrefix: PropTypes.string,
 		taxonomy: PropTypes.string,
 		height: PropTypes.number,
+		compact: PropTypes.bool,
 	},
 
 	getDefaultProps() {
@@ -54,7 +55,7 @@ export default React.createClass( {
 	},
 
 	render() {
-		const { className, taxonomy, onChange, selected, createLink, multiple, height } = this.props;
+		const { className, taxonomy, onChange, selected, createLink, multiple, height, compact } = this.props;
 
 		const classes = classNames( className );
 		const { search } = this.state;
@@ -74,6 +75,7 @@ export default React.createClass( {
 					createLink={ createLink }
 					multiple={ multiple }
 					height={ height }
+					compact={ compact }
 				/>
 			</div>
 		);
diff --git a/client/blocks/term-tree-selector/style.scss b/client/blocks/term-tree-selector/style.scss
index 0d6bfd8c627b1b..5b6f2b5917b460 100644
--- a/client/blocks/term-tree-selector/style.scss
+++ b/client/blocks/term-tree-selector/style.scss
@@ -5,7 +5,7 @@
 	background-color: $white;
 	border: 1px solid lighten( $gray, 20% );
 
-	&.is-compact {
+	&.is-small {
 		background-color: transparent;
 		border: none;
 	}
@@ -52,14 +52,18 @@ input[type=checkbox].term-tree-selector__input {
 }
 
 .term-tree-selector__nested-list {
-	margin-left: 1em;
+	margin-left: 24px;
 }
 
 .term-tree-selector__list-item {
 	position: relative;
-	padding: 2px 8px;
+	padding: 4px 8px;
 	font-size: 13px;
 
+	.term-tree-selector.is-compact.is-small & {
+		padding-left: 0;
+	}
+
 	&.is-empty {
 		padding-top: 4px;
 	}
@@ -77,7 +81,7 @@ input[type=checkbox].term-tree-selector__input {
 	margin-top: 2px;
 
 	.term-tree-selector.is-compact & {
-		font-size: 14px;
+		font-size: 12px;
 		margin-top: 0;
 	}
 
diff --git a/client/blocks/term-tree-selector/terms.jsx b/client/blocks/term-tree-selector/terms.jsx
index 6cf4ddd0db5e39..f3283469b91aef 100644
--- a/client/blocks/term-tree-selector/terms.jsx
+++ b/client/blocks/term-tree-selector/terms.jsx
@@ -128,9 +128,9 @@ const TermTreeSelectorList = React.createClass( {
 
 		this.list.recomputeRowHeights();
 
-		// Compact mode passes the height of the scrollable region as a derived
+		// Small mode passes the height of the scrollable region as a derived
 		// number, and will not be updated unless our component re-renders
-		if ( this.isCompact() ) {
+		if ( this.isSmall() ) {
 			this.forceUpdate();
 		}
 	},
@@ -202,7 +202,7 @@ const TermTreeSelectorList = React.createClass( {
 		}
 	},
 
-	isCompact() {
+	isSmall() {
 		if ( ! this.props.terms || this.state.searchTerm ) {
 			return false;
 		}
@@ -400,15 +400,16 @@ const TermTreeSelectorList = React.createClass( {
 
 	render() {
 		const rowCount = this.getRowCount();
-		const isCompact = this.isCompact();
+		const isSmall = this.isSmall();
 		const searchLength = this.state.searchTerm.length;
-		const showSearch = ( searchLength > 0 || ! isCompact ) &&
+		const showSearch = ( searchLength > 0 || ! isSmall ) &&
 			( this.props.terms || ( ! this.props.terms && searchLength > 0 ) );
 		const { className, isError, loading, siteId, taxonomy, query, height } = this.props;
 		const classes = classNames( 'term-tree-selector', className, {
 			'is-loading': loading,
-			'is-compact': isCompact,
-			'is-error': isError
+			'is-small': isSmall,
+			'is-error': isError,
+			'is-compact': this.props.compact,
 		} );
 
 		return (
@@ -428,7 +429,7 @@ const TermTreeSelectorList = React.createClass( {
 				<List
 					ref={ this.setListRef }
 					width={ this.getResultsWidth() }
-					height={ isCompact ? this.getCompactContainerHeight() : height }
+					height={ isSmall ? this.getCompactContainerHeight() : height }
 					onRowsRendered={ this.setRequestedPages }
 					rowCount={ rowCount }
 					estimatedRowSize={ ITEM_HEIGHT }
diff --git a/client/components/accordion/index.jsx b/client/components/accordion/index.jsx
index 305ff2086914d4..cda82ed57d4468 100644
--- a/client/components/accordion/index.jsx
+++ b/client/components/accordion/index.jsx
@@ -4,6 +4,7 @@
 import React, { Component, PropTypes } from 'react';
 import { noop } from 'lodash';
 import classNames from 'classnames';
+import Gridicon from 'gridicons';
 
 /**
  * Internal dependencies
@@ -55,6 +56,7 @@ export default class Accordion extends Component {
 						{ icon && <span className="accordion__icon">{ icon }</span> }
 						<span className="accordion__title">{ title }</span>
 						{ subtitle && <span className="accordion__subtitle">{ subtitle }</span> }
+						<span className="accordion__arrow"><Gridicon icon="dropdown" /></span>
 					</button>
 					{ status && <AccordionStatus { ...status } /> }
 				</header>
diff --git a/client/components/accordion/style.scss b/client/components/accordion/style.scss
index ca317e3fa0ac47..43b7bb7e4dd10d 100644
--- a/client/components/accordion/style.scss
+++ b/client/components/accordion/style.scss
@@ -1,7 +1,7 @@
 $accordion-padding: 16px;
 $accordion-subtitle-height: 16px;
-$accordion-background-collapsed: $gray-light; // same as body
-$accordion-background-hover: lighten( $gray, 30% );
+$accordion-background-collapsed: $white; // same as body
+$accordion-background-hover: $white;
 $accordion-background-expanded: $white;
 
 .accordion {
@@ -30,13 +30,16 @@ $accordion-background-expanded: $white;
 		background-color: $accordion-background-hover;
 	}
 
-	&::after {
-		@include noticon( '\f431', 22px );
+	.accordion__arrow {
 		position: absolute;
 			top: 50%;
-			right: $accordion-padding;
+			right: ( $accordion-padding - 4px );
 		transform: translateY( -50% );
-		color: lighten( $gray, 10% );
+		color: darken( $gray, 10% );
+		height: 24px;
+		.gridicon {
+			transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.2s ease-in;
+		}
 	}
 
 	.accordion.has-subtitle & {
@@ -46,14 +49,14 @@ $accordion-background-expanded: $white;
 }
 
 .accordion.is-expanded {
-	box-shadow: 0 0 0 1px lighten( $gray, 20% );
 
 	.accordion__toggle {
 		background-color: $accordion-background-expanded;
-		box-shadow: 0 0 0 1px lighten( $gray, 20% );
 
-		&::after {
-			content: '\f432';
+		.accordion__arrow {
+			.gridicon {
+				transform: rotate( 180deg );
+			}
 		}
 	}
 
@@ -78,6 +81,9 @@ $accordion-background-expanded: $white;
 .accordion__title,
 .accordion__subtitle {
 	display: block;
+	font-size: 13px;
+	font-weight: 500;
+	line-height: $accordion-subtitle-height;
 
 	.accordion.has-icon & {
 		padding-left: 28px;
@@ -89,9 +95,9 @@ $accordion-background-expanded: $white;
 }
 
 .accordion__subtitle {
-	font-size: 0.8em;
-	font-style: italic;
-	color: $gray-dark;
+	font-size: 11px;
+	color: $gray-text-min;
+	font-weight: 400;
 	white-space: nowrap;
 	overflow: hidden;
 	position: relative;
@@ -127,7 +133,7 @@ $accordion-background-expanded: $white;
 }
 
 .accordion__content-wrap {
-	padding: $accordion-padding;
+	padding: 0 $accordion-padding $accordion-padding $accordion-padding;
 }
 
 .accordion__section {
diff --git a/client/components/happychat/style.scss b/client/components/happychat/style.scss
index 35dab25fbe833b..c040d72325e2f1 100644
--- a/client/components/happychat/style.scss
+++ b/client/components/happychat/style.scss
@@ -172,6 +172,10 @@
 
 }
 
+.layout.is-group-editor .happychat .happychat__container.is-open.is-minimizing {
+	animation: happychat-minimize-right .5s 1 forwards;
+}
+
 @keyframes happychat-disappear {
 	0% {
 		top: 0px;
@@ -201,6 +205,23 @@
 	}
 }
 
+@keyframes happychat-minimize-right {	// for right hand sidebars
+	0% {
+		max-height: 220px;
+		bottom: 0px;
+	}
+	99%, 100% {
+		right: 273px;	// 273 (sidebar width) + 40 (button width)
+		width: 34px;
+		max-height: 34px;
+		bottom: 0px;
+	}
+	100% {
+		max-height: 0;
+		bottom: -34px;
+	}
+}
+
 @include breakpoint( ">960px" ) {
 	@keyframes happychat-minimize {
 		0% {
@@ -474,10 +495,6 @@
 	}
 
 	// add space in the editor for the docked sidebar
-	.has-chat.is-group-editor .layout__content {
-		padding: 47px 272px 0 0;
-	}
-
 	.has-chat.is-group-editor .editor__header,
 	.has-chat.is-group-editor .editor .mce-edit-area {
 	    padding: 0 16px;
@@ -500,6 +517,31 @@
 	    right: 32px;
 	}
 
+	.has-chat.is-group-editor .editor-ground-control,
+	.has-chat.is-group-editor .editor-action-bar,
+	.has-chat.is-group-editor .post-editor_inner {
+		margin-right: 273px;
+	}
+
+	// make room when the sidebar is open
+	.has-chat.is-group-editor.focus-sidebar .post-editor__content {
+	    margin-right: 544px;	// 272 * 2
+	}
+
+	.has-chat.is-group-editor.focus-sidebar .post-editor__sidebar {
+	    transform: translateX( -545px );	// 272 * 2 + 1
+	}
+
+	// make room when the sidebar is closed
+	.has-chat.is-group-editor .post-editor__content {
+	    margin-right: 272px;
+	}
+
+	.has-chat.is-group-editor .post-editor__sidebar {
+	    transform: translateX( -273px );
+	}
+
+
 	// make space in customizer
 	.has-chat .main.customize.is-iframe {
 		right: 272px;
diff --git a/client/components/search/index.jsx b/client/components/search/index.jsx
index 0a9ddb0216a10a..103c955c5ed77f 100644
--- a/client/components/search/index.jsx
+++ b/client/components/search/index.jsx
@@ -63,7 +63,8 @@ const Search = React.createClass( {
 		dir: PropTypes.oneOf( [ 'ltr', 'rtl' ] ),
 		fitsContainer: PropTypes.bool,
 		maxLength: PropTypes.number,
-		hideClose: PropTypes.bool
+		hideClose: PropTypes.bool,
+		compact: PropTypes.bool
 	},
 
 	getInitialState: function() {
@@ -94,7 +95,8 @@ const Search = React.createClass( {
 			isOpen: false,
 			dir: undefined,
 			fitsContainer: false,
-			hideClose: false
+			hideClose: false,
+			compact: false
 		};
 	},
 
@@ -320,6 +322,7 @@ const Search = React.createClass( {
 			'is-expanded-to-container': this.props.fitsContainer,
 			'is-open': isOpenUnpinnedOrQueried,
 			'is-searching': this.props.searching,
+			'is-compact': this.props.compact,
 			'has-focus': this.state.hasFocus,
 			search: true
 		} );
diff --git a/client/components/search/style.scss b/client/components/search/style.scss
index 50f046fb037805..419c035d9ca58f 100644
--- a/client/components/search/style.scss
+++ b/client/components/search/style.scss
@@ -48,6 +48,24 @@
 	.accessible-focus &.has-focus {
 		box-shadow: 0 0 0 1px $blue-wordpress, 0 0 0 4px $blue-light;
 	}
+
+	&.is-compact {
+		height: 36px;
+		.search__input {
+			height: 36px;
+			font-size: 12px;
+		}
+
+		.search__open-icon {
+			margin: 0 4px 0 8px;
+			width: 18px;
+		}
+
+		.search__close-icon {
+			width: 18px;
+			margin-right: 8px;
+		}
+	}
 }
 
 // Position collapsed search-button to the right
diff --git a/client/components/tinymce/style.scss b/client/components/tinymce/style.scss
index de3fe1857952f8..c1376a56407f91 100644
--- a/client/components/tinymce/style.scss
+++ b/client/components/tinymce/style.scss
@@ -43,24 +43,26 @@
 		& > .mce-toolbar-grp,
 		&:after {
 			position: fixed;
-				top: 47px;
+				top: 94px;
 			border-top-width: 0;
 			border-left-width: 0;
 			border-right-width: 0;
+
+			.focus-sidebar &,
+			.has-chat & {
+				width: calc( 100% - ( #{ $sidebar-width-max + 1 } ) );
+				margin: 0;
+			}
+
+			.focus-sidebar.has-chat & {
+				width: calc( 100% - ( #{ ( $sidebar-width-max * 2 ) + 1 } ) )
+			}
 		}
 
 		& > .mce-toolbar-grp > .mce-container-body > .mce-container {
 			padding-left: 1px;
 			padding-right: 1px;
 		}
-
-		& > .mce-toolbar-grp {
-			left: ( $sidebar-width-min + 1 );
-
-			@include breakpoint( ">960px" ) {
-				left: ( $sidebar-width-max + 1 );
-			}
-		}
 	}
 }
 
@@ -68,7 +70,7 @@
 .mce-inline-toolbar-grp {
 	div.mce-toolbar-grp {
 		background-color: rgba( $white, 0.92 );
-		border-color: lighten( $gray, 20% );
+		border-color: lighten( $gray, 25% );
 		border-style: solid;
 		padding: 0;
 		overflow-x: auto;
diff --git a/client/layout/sidebar/style.scss b/client/layout/sidebar/style.scss
index 03a5f3b65a6361..b22257d119897c 100644
--- a/client/layout/sidebar/style.scss
+++ b/client/layout/sidebar/style.scss
@@ -315,6 +315,7 @@ a.sidebar__button {
 }
 
 .sidebar .sidebar__footer {
+	align-items: center;
 	padding: 0;
 	border-top: 1px solid darken( $sidebar-bg-color, 10% );
 	margin: auto 0 0;
@@ -400,32 +401,6 @@ a.sidebar__button {
 
 }
 
-.sidebar__drafts-button {
-	margin-left: auto;
-}
-
-.layout.is-group-sites .sidebar .drafts-button.button.is-borderless {
-	color: darken( $gray, 10% );
-	line-height: 0;
-	padding: 0;
-	margin: 0;
-	text-transform: none;
-
-	.count {
-		color: darken( $gray, 10% );
-	}
-
-	&:hover {
-		color: $blue-medium;
-
-		.count {
-			background: $blue-medium;
-			border-color: $blue-medium;
-			color: $white;
-		}
-	}
-}
-
 .layout.is-section-help .sidebar .sidebar__footer-help {
 	background-color: $sidebar-selected-color;
 	color: $white;
diff --git a/client/my-sites/sidebar/test/sidebar.jsx b/client/my-sites/sidebar/test/sidebar.jsx
index d4f87a3fa4a26d..4928f05627f0a5 100644
--- a/client/my-sites/sidebar/test/sidebar.jsx
+++ b/client/my-sites/sidebar/test/sidebar.jsx
@@ -18,7 +18,6 @@ describe( 'MySitesSidebar', () => {
 		mockery.registerMock( 'my-sites/current-site', EmptyComponent );
 		mockery.registerMock( './publish-menu', EmptyComponent );
 		mockery.registerMock( 'layout/sidebar', EmptyComponent );
-		mockery.registerMock( 'post-editor/drafts-button', EmptyComponent );
 		mockery.registerMock( 'components/tooltip', EmptyComponent );
 
 		MySitesSidebar = require( '../sidebar' ).MySitesSidebar;
diff --git a/client/post-editor/drafts-button/index.jsx b/client/post-editor/drafts-button/index.jsx
deleted file mode 100644
index bbac8425d3ca55..00000000000000
--- a/client/post-editor/drafts-button/index.jsx
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * External dependencies
- */
-import React, { PropTypes } from 'react';
-import { connect } from 'react-redux';
-import { translate } from 'i18n-calypso';
-
-/**
- * Internal dependencies
- */
-import Button from 'components/button';
-import Count from 'components/count';
-import QueryPostCounts from 'components/data/query-post-counts';
-import { getSelectedSiteId } from 'state/ui/selectors';
-import { isJetpackSite } from 'state/sites/selectors';
-import { getAllPostCount } from 'state/posts/counts/selectors';
-
-function EditorDraftsButton( { count, onClick, jetpack, siteId, hideText } ) {
-	return (
-		<Button
-			compact borderless
-			className="drafts-button"
-			onClick={ onClick }
-			disabled={ ! count && ! jetpack }
-			aria-label={ translate( 'View all drafts' ) }
-		>
-			{ siteId && (
-				<QueryPostCounts siteId={ siteId } type="post" />
-			) }
-			{ ! hideText && <span>{ translate( 'Drafts' ) }</span> }
-			{ count && ! jetpack ? <Count count={ count } /> : null }
-		</Button>
-	);
-};
-
-EditorDraftsButton.propTypes = {
-	count: PropTypes.number,
-	onClick: PropTypes.func,
-	jetpack: PropTypes.bool,
-	siteId: PropTypes.number,
-	hideText: PropTypes.bool
-};
-
-export default connect( ( state ) => {
-	const siteId = getSelectedSiteId( state );
-
-	return {
-		jetpack: isJetpackSite( state, siteId ),
-		count: getAllPostCount( state, siteId, 'post', 'draft' ),
-		siteId
-	};
-} )( EditorDraftsButton );
diff --git a/client/post-editor/drafts-button/style.scss b/client/post-editor/drafts-button/style.scss
deleted file mode 100644
index c7934176c822ba..00000000000000
--- a/client/post-editor/drafts-button/style.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.drafts-button.button.is-borderless {
-	line-height: 22px;
-	white-space: nowrap;
-
-	&[disabled],
-	&:disabled {
-		cursor: not-allowed;
-		color: lighten( $gray, 10% );
-	}
-
-	&:hover {
-		.count {
-			border-color: $gray-dark;
-			color: $gray-dark;
-		}
-	}
-
-	.count {
-		margin-left: 4px;
-	}
-}
diff --git a/client/post-editor/edit-post-status/index.jsx b/client/post-editor/edit-post-status/index.jsx
index c99cd2abfc6426..7b293d260d8217 100644
--- a/client/post-editor/edit-post-status/index.jsx
+++ b/client/post-editor/edit-post-status/index.jsx
@@ -25,12 +25,14 @@ import { editPost } from 'state/posts/actions';
 import { getSelectedSiteId } from 'state/ui/selectors';
 import { getEditorPostId } from 'state/ui/editor/selectors';
 import { getEditedPost } from 'state/posts/selectors';
+import EditorVisibility from 'post-editor/editor-visibility';
+import utils from 'lib/posts/utils';
 
 class EditPostStatus extends Component {
 
 	static propTypes = {
 		moment: PropTypes.func,
-		onDateChange: PropTypes.func,
+		setPostDate: PropTypes.func,
 		onSave: PropTypes.func,
 		post: PropTypes.object,
 		savedPost: PropTypes.object,
@@ -38,14 +40,14 @@ class EditPostStatus extends Component {
 		translate: PropTypes.func,
 		type: PropTypes.string,
 		postDate: PropTypes.string,
+		onPrivatePublish: PropTypes.func,
 	};
 
 	constructor( props ) {
 		super( props );
 		this.state = {
 			showTZTooltip: false,
-			showPostSchedulePopover: false,
-			onDateChange: noop
+			showPostSchedulePopover: false
 		};
 	}
 
@@ -105,7 +107,7 @@ class EditPostStatus extends Component {
 			isSticky = this.props.post.sticky;
 			isPending = postUtils.isPending( this.props.post );
 			isPublished = postUtils.isPublished( this.props.savedPost );
-			isScheduled = this.props.savedPost.status === 'future';
+			isScheduled = this.props.savedPost && this.props.savedPost.status === 'future';
 			canPublish = siteUtils.userCan( 'publish_posts', this.props.site );
 		}
 
@@ -140,9 +142,6 @@ class EditPostStatus extends Component {
 					{ this.renderTZTooltop() }
 					{ this.renderPostSchedulePopover() }
 				</span>
-				<Revisions
-						revisions={ this.props.post && this.props.post.revisions }
-						adminUrl={ adminUrl } />
 				{ this.props.type === 'post' &&
 					<label className="edit-post-status__sticky">
 						<span className="edit-post-status__label-text">
@@ -182,10 +181,40 @@ class EditPostStatus extends Component {
 						<Gridicon icon="undo" size={ 18 } /> { translate( 'Revert to draft' ) }
 					</Button>
 				}
+				{ this.renderPostVisibility() }
+				<Revisions
+					revisions={ this.props.post && this.props.post.revisions }
+					adminUrl={ adminUrl }
+				/>
 			</div>
 		);
 	}
 
+	renderPostVisibility() {
+		if ( ! this.props.post ) {
+			return;
+		}
+
+		const { status, password, type } = this.props.post || {};
+		const isPrivateSite = this.props.site && this.props.site.is_private;
+		const savedStatus = this.props.savedPost ? this.props.savedPost.status : null;
+		const savedPassword = this.props.savedPost ? this.props.savedPost.password : null;
+		const props = {
+			visibility: utils.getVisibility( this.props.post ),
+			onPrivatePublish: this.props.onPrivatePublish,
+			isPrivateSite,
+			type,
+			status,
+			password,
+			savedStatus,
+			savedPassword
+		};
+
+		return (
+			<EditorVisibility { ...props } />
+		);
+	}
+
 	renderPostSchedulePopover() {
 		const tz = siteUtils.timezone( this.props.site ),
 			gmt = siteUtils.gmtOffset( this.props.site ),
@@ -206,7 +235,7 @@ class EditPostStatus extends Component {
 						selectedDay={ selectedDay }
 						timezone={ tz }
 						gmtOffset={ gmt }
-						onDateChange={ this.props.onDateChange }
+						onDateChange={ this.props.setPostDate }
 					/>
 				</div>
 			</Popover>
@@ -229,7 +258,7 @@ class EditPostStatus extends Component {
 			<Tooltip
 				context={ this.refs && this.refs.postStatusTooltip }
 				isVisible={ this.state.showTZTooltip }
-				position="right"
+				position="left"
 				onClose={ noop }
 			>
 				<div className="edit-post-status__full-date__tooltip">
diff --git a/client/post-editor/edit-post-status/style.scss b/client/post-editor/edit-post-status/style.scss
index 6f2e5f77654308..3258e338e23c51 100644
--- a/client/post-editor/edit-post-status/style.scss
+++ b/client/post-editor/edit-post-status/style.scss
@@ -16,9 +16,19 @@
 }
 
 .edit-post-status__label-text {
-	color: darken( $gray, 10% );
+	color: $gray-text;
 	font-size: 13px;
 	line-height: 1.7;
+
+	@include breakpoint( ">660px" ) {
+		.info-popover {
+			display: none;
+		}
+
+		&:hover .info-popover {
+			display: inline-block;
+		}
+	}
 }
 
 .edit-post-status .select-dropdown__container {
@@ -33,7 +43,7 @@
 }
 
 .edit-post-status__full-date {
-	color: darken( $gray, 10% );
+	color: $gray-text;
 	font-size: 13px;
 	display: inline-block;
 	margin-bottom: 12px;
@@ -41,20 +51,11 @@
 	cursor: pointer;
 
 	.gridicon {
-		color: $gray;
+		color: $gray-text;
 		margin-left: -2px;
 		margin-right: 6px;
 		vertical-align: top;
 	}
-
-	&:hover,
-	&:focus {
-		color: $gray-dark;
-
-		.gridicon {
-			color: $gray-dark;
-		}
-	}
 }
 
 .edit-post-status__future-label {
@@ -83,3 +84,7 @@
 		width: auto;
 	}
 }
+
+.edit-post-status .form-toggle__label .form-toggle__label-content {
+	margin: 0;
+}
diff --git a/client/post-editor/editor-action-bar/index.jsx b/client/post-editor/editor-action-bar/index.jsx
index 643767ba76a252..66c8a298a7cfcb 100644
--- a/client/post-editor/editor-action-bar/index.jsx
+++ b/client/post-editor/editor-action-bar/index.jsx
@@ -8,14 +8,12 @@ import Gridicon from 'gridicons';
  * Internal dependencies
  */
 import AsyncLoad from 'components/async-load';
-import EditorDeletePost from 'post-editor/editor-delete-post';
-import EditorPostType from 'post-editor/editor-post-type';
 import EditorSticky from 'post-editor/editor-sticky';
-import EditorVisibility from 'post-editor/editor-visibility';
 import utils from 'lib/posts/utils';
 import Tooltip from 'components/tooltip';
 import Button from 'components/button';
 import EditorActionBarViewLabel from './view-label';
+import EditorStatusLabel from 'post-editor/editor-status-label';
 
 export default React.createClass( {
 
@@ -23,7 +21,6 @@ export default React.createClass( {
 
 	propTypes: {
 		isNew: React.PropTypes.bool,
-		onTrashingPost: React.PropTypes.func,
 		onPrivatePublish: React.PropTypes.func,
 		post: React.PropTypes.object,
 		savedPost: React.PropTypes.object,
@@ -37,37 +34,19 @@ export default React.createClass( {
 		};
 	},
 
-	renderPostVisibility() {
-		if ( ! this.props.post ) {
-			return;
-		}
-
-		const { status, password, type } = this.props.post || {};
-		const isPrivateSite = this.props.site && this.props.site.is_private;
-		const savedStatus = this.props.savedPost ? this.props.savedPost.status : null;
-		const savedPassword = this.props.savedPost ? this.props.savedPost.password : null;
-		const props = {
-			visibility: utils.getVisibility( this.props.post ),
-			onPrivatePublish: this.props.onPrivatePublish,
-			isPrivateSite,
-			type,
-			status,
-			password,
-			savedStatus,
-			savedPassword
-		};
-
-		return (
-			<EditorVisibility { ...props } />
-		);
-	},
-
 	render() {
 		const multiUserSite = this.props.site && ! this.props.site.single_user_site;
 
 		return (
 			<div className="editor-action-bar">
 				<div className="editor-action-bar__cell is-left">
+					<EditorStatusLabel
+						post={ this.props.savedPost }
+						advancedStatus
+						type={ this.props.type }
+					/>
+				</div>
+				<div className="editor-action-bar__cell is-center">
 					{ multiUserSite &&
 						<AsyncLoad
 							require="post-editor/editor-author"
@@ -76,16 +55,8 @@ export default React.createClass( {
 						/>
 					}
 				</div>
-				<div className="editor-action-bar__cell is-center">
-					<EditorPostType />
-				</div>
 				<div className="editor-action-bar__cell is-right">
 					{ this.props.post && this.props.type === 'post' && <EditorSticky /> }
-					{ this.renderPostVisibility() }
-					<EditorDeletePost
-						post={ this.props.post }
-						onTrashingPost={ this.props.onTrashingPost }
-					/>
 					{ utils.isPublished( this.props.savedPost ) && (
 						<Button
 							href={ this.props.savedPost.URL }
diff --git a/client/post-editor/editor-action-bar/style.scss b/client/post-editor/editor-action-bar/style.scss
index 75e2ad6c14a359..1a34b0236f2bdc 100644
--- a/client/post-editor/editor-action-bar/style.scss
+++ b/client/post-editor/editor-action-bar/style.scss
@@ -9,6 +9,12 @@
 	@include breakpoint( "<660px" ) {
 		margin-bottom: 8px;
 	}
+
+	.editor-status-label {
+		position: fixed;
+		bottom: 12px;
+		left: 16px;
+	}
 }
 
 .editor-action-bar__cell {
diff --git a/client/post-editor/editor-categories-tags/accordion.jsx b/client/post-editor/editor-categories-tags/accordion.jsx
index cea84496805abd..9c238b4bb04d8f 100644
--- a/client/post-editor/editor-categories-tags/accordion.jsx
+++ b/client/post-editor/editor-categories-tags/accordion.jsx
@@ -6,7 +6,6 @@ import { connect } from 'react-redux';
 import classNames from 'classnames';
 import { localize } from 'i18n-calypso';
 import { get, toArray } from 'lodash';
-import Gridicon from 'gridicons';
 
 /**
  * Internal dependencies
@@ -63,7 +62,7 @@ export class EditorCategoriesTagsAccordion extends Component {
 					helpText={ translate( 'Use categories to group your posts by topic.' ) }
 					labelText={ translate( 'Categories' ) } />
 				{ isTermsSupported
-					? <TermSelector taxonomyName="category" />
+					? <TermSelector compact taxonomyName="category" />
 					: this.renderJetpackNotice()
 				}
 			</AccordionSection>
@@ -179,7 +178,6 @@ export class EditorCategoriesTagsAccordion extends Component {
 			<Accordion
 				title={ this.getTitle() }
 				subtitle={ this.getSubtitle() }
-				icon={ <Gridicon icon="tag" /> }
 				className={ classes }
 			>
 				{ this.renderCategories() }
diff --git a/client/post-editor/editor-delete-post/index.jsx b/client/post-editor/editor-delete-post/index.jsx
index 2bff283813a664..988b1196444ad2 100644
--- a/client/post-editor/editor-delete-post/index.jsx
+++ b/client/post-editor/editor-delete-post/index.jsx
@@ -12,7 +12,6 @@ import actions from 'lib/posts/actions';
 import accept from 'lib/accept';
 import utils from 'lib/posts/utils';
 import Button from 'components/button';
-import Tooltip from 'components/tooltip';
 
 export default React.createClass( {
 	displayName: 'EditorDeletePost',
@@ -26,7 +25,6 @@ export default React.createClass( {
 	getInitialState: function() {
 		return {
 			isTrashing: false,
-			tooltip: false
 		};
 	},
 
@@ -38,7 +36,9 @@ export default React.createClass( {
 				this.setState( { isTrashing: false } );
 			}
 
-			this.props.onTrashingPost( error );
+			if ( this.props.onTrashingPost ) {
+				this.props.onTrashingPost( error );
+			}
 		}.bind( this );
 
 		if ( utils.userCan( 'delete_post', this.props.post ) ) {
@@ -72,33 +72,21 @@ export default React.createClass( {
 			return null;
 		}
 
-		const classes = classnames( 'editor-delete-post', { 'is-trashing': this.state.isTrashing } );
-		let tooltipText = this.translate( 'Send post to the trash' );
-
-		if ( post.type === 'page' ) {
-			tooltipText = this.translate( 'Send page to the trash' );
-		}
+		const classes = classnames( 'editor-delete-post__button', { 'is-trashing': this.state.isTrashing } );
+		const label = this.state.isTrashing ? this.translate( 'Trashing...' ) : this.translate( 'Move to trash' );
 
 		return (
-			<Button
-				borderless
-				className={ classes }
-				onClick={ this.onSendToTrash }
-				onMouseEnter={ () => this.setState( { tooltip: true } ) }
-				onMouseLeave={ () => this.setState( { tooltip: false } ) }
-				aria-label={ tooltipText }
-				ref="deletePostTooltip"
-			>
-				<Gridicon icon="trash" />
-				<Tooltip
-					className="editor-delete-post__tooltip"
-					context={ this.refs && this.refs.deletePostTooltip }
-					isVisible={ this.state.tooltip }
-					position="bottom left"
+			<div className="editor-delete-post">
+				<Button
+					borderless
+					className={ classes }
+					onClick={ this.onSendToTrash }
+					aria-label={ label }
 				>
-					{ tooltipText }
-				</Tooltip>
-			</Button>
+					<Gridicon icon="trash" size={ 18 } />
+					{ label }
+				</Button>
+			</div>
 		);
 	}
 } );
diff --git a/client/post-editor/editor-delete-post/style.scss b/client/post-editor/editor-delete-post/style.scss
index ca70933fb6673e..9248f239372918 100644
--- a/client/post-editor/editor-delete-post/style.scss
+++ b/client/post-editor/editor-delete-post/style.scss
@@ -1,14 +1,35 @@
-.editor-delete-post.button {
-	&:hover {
+.editor-delete-post__tooltip .popover__inner {
+	white-space: nowrap;
+}
+
+
+.editor-delete-post {
+	display: block;
+}
+
+.editor-delete-post__button.button.is-borderless {
+	color: $gray-text-min;
+	padding: 0;
+
+	&.is-trashing {
 		color: $orange-fire;
+		.gridicon {
+			color: $orange-fire;
+		}
 	}
 
-	&.is-trashing {
+	&:hover,
+	&:focus {
 		color: $orange-fire;
-		animation: loading-dot-pulse 0.8s ease-in-out infinite;
+		outline: none;
+
+		.gridicon {
+			color: $orange-fire;
+		}
 	}
-}
 
-.editor-delete-post__tooltip .popover__inner {
-	white-space: nowrap;
+	.gridicon {
+		color: $gray-text-min;
+		margin-right: 4px;
+	}
 }
diff --git a/client/post-editor/editor-discussion/style.scss b/client/post-editor/editor-discussion/style.scss
index d156d490bee145..17addbcbf7ce2f 100644
--- a/client/post-editor/editor-discussion/style.scss
+++ b/client/post-editor/editor-discussion/style.scss
@@ -3,6 +3,6 @@
 	color: $gray;
 	.gridicon {
 		vertical-align: top;
-		margin-top: 2px;
+		margin-top: -2px;
 	}
 }
diff --git a/client/post-editor/editor-drawer-well/index.jsx b/client/post-editor/editor-drawer-well/index.jsx
index bdc2bcddd1a619..9ce798724774d5 100644
--- a/client/post-editor/editor-drawer-well/index.jsx
+++ b/client/post-editor/editor-drawer-well/index.jsx
@@ -45,6 +45,7 @@ export default React.createClass( {
 					{ onRemove && (
 						<Button
 							onClick={ onRemove }
+							compact
 							className="editor-drawer-well__remove">
 							<span className="screen-reader-text">
 								{ this.translate( 'Remove' ) }
@@ -67,7 +68,7 @@ export default React.createClass( {
 								icon={ icon }
 								className="editor-drawer-well__icon" />
 						) }
-						<span className="editor-drawer-well__button button is-secondary">
+						<span className="editor-drawer-well__button button is-secondary is-compact">
 							{ label }
 						</span>
 					</button>
diff --git a/client/post-editor/editor-drawer/featured-image.jsx b/client/post-editor/editor-drawer/featured-image.jsx
index a9d34ed300e808..13fc0a92bed54c 100644
--- a/client/post-editor/editor-drawer/featured-image.jsx
+++ b/client/post-editor/editor-drawer/featured-image.jsx
@@ -3,7 +3,6 @@
  */
 import React, { Component, PropTypes } from 'react';
 import { localize } from 'i18n-calypso';
-import Gridicon from 'gridicons';
 
 /**
  * Internal dependencies
@@ -36,11 +35,8 @@ class EditorDrawerFeaturedImage extends Component {
 		const { translate, site, post } = this.props;
 
 		return (
-			<Accordion
-				title={ translate( 'Featured Image' ) }
-				icon={ <Gridicon icon="image" /> }>
+			<Accordion title={ translate( 'Featured Image' ) }>
 				<EditorDrawerWell
-					icon="image"
 					label={ translate( 'Set Featured Image' ) }
 					empty={ ! site || ! post || ! getFeaturedImageId( post ) }
 					onClick={ this.startSelecting }
diff --git a/client/post-editor/editor-drawer/index.jsx b/client/post-editor/editor-drawer/index.jsx
index 30642b9d24d520..483edd53007250 100644
--- a/client/post-editor/editor-drawer/index.jsx
+++ b/client/post-editor/editor-drawer/index.jsx
@@ -4,7 +4,6 @@
 import React from 'react';
 import createFragment from 'react-addons-create-fragment';
 import { connect } from 'react-redux';
-import Gridicon from 'gridicons';
 
 /**
  * Internal dependencies
@@ -33,6 +32,7 @@ import EditorDrawerTaxonomies from './taxonomies';
 import EditorDrawerPageOptions from './page-options';
 import EditorDrawerLabel from './label';
 import EditorMoreOptionsCopyPost from 'post-editor/editor-more-options/copy-post';
+import EditPostStatus from 'post-editor/edit-post-status';
 
 /**
  * Constants
@@ -67,11 +67,13 @@ const POST_TYPE_SUPPORTS = {
 const EditorDrawer = React.createClass( {
 	propTypes: {
 		site: React.PropTypes.object,
+		savedPost: React.PropTypes.object,
 		post: React.PropTypes.object,
 		canJetpackUseTaxonomies: React.PropTypes.bool,
 		typeObject: React.PropTypes.object,
 		isNew: React.PropTypes.bool,
-		type: React.PropTypes.string
+		type: React.PropTypes.string,
+		setPostDate: React.PropTypes.func,
 	},
 
 	onExcerptChange: function( event ) {
@@ -280,7 +282,6 @@ const EditorDrawer = React.createClass( {
 		return (
 			<Accordion
 				title={ this.translate( 'More Options' ) }
-				icon={ <Gridicon icon="ellipsis" /> }
 				className="editor-drawer__more-options"
 			>
 				{ siteUtils.isPermalinkEditable( this.props.site ) && <EditorMoreOptionsSlug /> }
@@ -300,6 +301,28 @@ const EditorDrawer = React.createClass( {
 		return <EditorDrawerPageOptions />;
 	},
 
+	renderStatus() {
+		// TODO: REDUX - remove this logic and prop for EditPostStatus when date is moved to redux
+		const postDate = this.props.post && this.props.post.date
+				? this.props.post.date
+				: null;
+
+		return (
+			<Accordion title={ this.translate( 'Status' ) }>
+				<EditPostStatus
+					savedPost={ this.props.savedPost }
+					postDate={ postDate }
+					type={ this.props.type }
+					onSave={ this.props.onSave }
+					onTrashingPost={ this.props.onTrashingPost }
+					onPrivatePublish={ this.props.onPrivatePublish }
+					setPostDate={ this.props.setPostDate }
+					site={ this.props.site }>
+				</EditPostStatus>
+			</Accordion>
+		);
+	},
+
 	render: function() {
 		const { site } = this.props;
 
@@ -308,6 +331,7 @@ const EditorDrawer = React.createClass( {
 				{ site && (
 					<QueryPostTypes siteId={ site.ID } />
 				) }
+				{ this.renderStatus() }
 				{ this.renderTaxonomies() }
 				{ this.renderFeaturedImage() }
 				{ this.renderPageOptions() }
diff --git a/client/post-editor/editor-drawer/page-options.jsx b/client/post-editor/editor-drawer/page-options.jsx
index f64ec5577e1b8d..95038326b52796 100644
--- a/client/post-editor/editor-drawer/page-options.jsx
+++ b/client/post-editor/editor-drawer/page-options.jsx
@@ -5,7 +5,6 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { localize } from 'i18n-calypso';
 import { get } from 'lodash';
-import Gridicon from 'gridicons';
 
 /**
  * Internal dependencies
@@ -28,7 +27,7 @@ function EditorDrawerPageOptions( { translate, postType, hierarchical } ) {
 	}
 
 	return (
-		<Accordion title={ title } icon={ <Gridicon icon="pages" /> }>
+		<Accordion title={ title }>
 			{ hierarchical && (
 				<PageParent />
 			) }
diff --git a/client/post-editor/editor-drawer/style.scss b/client/post-editor/editor-drawer/style.scss
index 0b4108446882ee..ee999e6b7a72ef 100644
--- a/client/post-editor/editor-drawer/style.scss
+++ b/client/post-editor/editor-drawer/style.scss
@@ -1,5 +1,6 @@
 .editor-drawer {
-	padding-bottom: 16px;
+	font-size: 13px;
+	background: white;
 }
 
 .editor-drawer__description {
@@ -7,21 +8,13 @@
 	font-size: 12px;
 }
 
-.editor-drawer .accordion__toggle {
-	background: lighten( $gray, 30% );
-}
-
 .editor-drawer .accordion:not( .is-expanded ) .accordion__toggle {
-	&:hover {
-		background: $gray-light;
-	}
-
 	.accordion__subtitle::after {
-		@include long-content-fade( $color: lighten( $gray, 30% ) );
+		@include long-content-fade( $color: $white );
 	}
 
 	&:hover .accordion__subtitle::after {
-		@include long-content-fade( $color: $gray-light );
+		@include long-content-fade( $color: $white );
 	}
 }
 
@@ -45,12 +38,11 @@
 }
 
 .editor-drawer__label-text {
-	color: $gray;
+	color: $gray-text;
 	display: block;
-	font-size: 11px;
+	font-size: 12px;
 	line-height: 18px;
 	margin-bottom: 4px;
-	text-transform: uppercase;
 }
 
 .editor-drawer__label-text .info-popover {
@@ -58,7 +50,8 @@
 }
 
 .editor-drawer__heading {
-	font-weight: 600;
+	font-weight: 400;
+	font-size: 12px;
 	margin-bottom: 4px;
 }
 
@@ -88,3 +81,8 @@
 	margin-top: 16px;
 	width: 100%;
 }
+
+.editor-drawer .editor-categories-tags__accordion .accordion__content-wrap,
+.editor-drawer .editor-drawer__more-options .accordion__content-wrap {
+	padding-top: 8px;
+}
diff --git a/client/post-editor/editor-drawer/taxonomies.jsx b/client/post-editor/editor-drawer/taxonomies.jsx
index b35ad95fac6089..1feb1dac920e6c 100644
--- a/client/post-editor/editor-drawer/taxonomies.jsx
+++ b/client/post-editor/editor-drawer/taxonomies.jsx
@@ -5,7 +5,6 @@ import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { reduce, size, map, get, includes } from 'lodash';
 import { localize } from 'i18n-calypso';
-import Gridicon from 'gridicons';
 
 /**
  * Internal dependencies
@@ -71,10 +70,9 @@ function EditorDrawerTaxonomies( { translate, siteId, postType, isSupported, tax
 						key={ name }
 						title={ label }
 						subtitle={ subtitle }
-						icon={ <Gridicon icon={ hierarchical ? 'folder' : 'tag' } /> }
 					>
 					{ hierarchical
-						? <TermSelector taxonomyName={ name } />
+						? <TermSelector compact taxonomyName={ name } />
 						: <TermTokenField taxonomyName={ name } />
 					}
 					</Accordion>
diff --git a/client/post-editor/editor-featured-image/index.jsx b/client/post-editor/editor-featured-image/index.jsx
index 3b1abd6d2fb701..48bdd3e648d369 100644
--- a/client/post-editor/editor-featured-image/index.jsx
+++ b/client/post-editor/editor-featured-image/index.jsx
@@ -113,6 +113,7 @@ export default React.createClass( {
 			<Button
 				onClick={ this.showMediaModal }
 				borderless
+				compact
 				className={ classes }>
 				{ this.renderMediaModal() }
 				<div className="editor-featured-image__current-image">
diff --git a/client/post-editor/editor-fieldset/style.scss b/client/post-editor/editor-fieldset/style.scss
index 691d414030a340..cd3f283fb76fac 100644
--- a/client/post-editor/editor-fieldset/style.scss
+++ b/client/post-editor/editor-fieldset/style.scss
@@ -13,11 +13,11 @@
 .editor-fieldset__legend,
 .editor-fieldset__option {
 	margin: 4px 0;
+	font-size: 12px;
 }
 
 .editor-fieldset__legend {
-	color: $gray;
+	color: $gray-text;
 	display: block;
-	font-size: 11px;
-	text-transform: uppercase;
+	font-size: 12px;
 }
diff --git a/client/post-editor/editor-ground-control/index.jsx b/client/post-editor/editor-ground-control/index.jsx
index 2c25a9f560a26a..3ab10e064a3afc 100644
--- a/client/post-editor/editor-ground-control/index.jsx
+++ b/client/post-editor/editor-ground-control/index.jsx
@@ -5,25 +5,24 @@ const noop = require( 'lodash/noop' ),
 	React = require( 'react' ),
 	PureRenderMixin = require( 'react-pure-render/mixin' ),
 	i18n = require( 'i18n-calypso' );
+import page from 'page';
 
 /**
  * Internal dependencies
  */
 const Card = require( 'components/card' ),
-	EditPostStatus = require( 'post-editor/edit-post-status' ),
 	Gridicon = require( 'gridicons' ),
 	Popover = require( 'components/popover' ),
 	Site = require( 'blocks/site' ),
-	StatusLabel = require( 'post-editor/editor-status-label' ),
 	postUtils = require( 'lib/posts/utils' ),
 	siteUtils = require( 'lib/site/utils' ),
-	postActions = require( 'lib/posts/actions' ),
-	Tooltip = require( 'components/tooltip' ),
 	PostListFetcher = require( 'components/post-list-fetcher' ),
 	stats = require( 'lib/posts/stats' );
 
 import AsyncLoad from 'components/async-load';
 import EditorPublishButton, { getPublishButtonStatus } from 'post-editor/editor-publish-button';
+import Button from 'components/button';
+import EditorPostType from 'post-editor/editor-post-type';
 
 export default React.createClass( {
 	displayName: 'EditorGroundControl',
@@ -41,9 +40,11 @@ export default React.createClass( {
 		onMoreInfoAboutEmailVerify: React.PropTypes.func,
 		post: React.PropTypes.object,
 		savedPost: React.PropTypes.object,
+		setPostDate: React.PropTypes.func,
 		site: React.PropTypes.object,
 		user: React.PropTypes.object,
 		userUtils: React.PropTypes.object,
+		toggleSidebar: React.PropTypes.func,
 		type: React.PropTypes.string
 	},
 
@@ -63,7 +64,7 @@ export default React.createClass( {
 			site: {},
 			user: null,
 			userUtils: null,
-			setDate: noop
+			setPostDate: noop
 		};
 	},
 
@@ -97,7 +98,6 @@ export default React.createClass( {
 		return {
 			showSchedulePopover: false,
 			showAdvanceStatus: false,
-			showDateTooltip: false,
 			firstDayOfTheMonth: this.getFirstDayOfTheMonth(),
 			lastDayOfTheMonth: this.getLastDayOfTheMonth(),
 			needsVerification: this.props.userUtils && this.props.userUtils.needsVerificationForSite( this.props.site ),
@@ -122,13 +122,6 @@ export default React.createClass( {
 		}
 	},
 
-	setPostDate: function( date ) {
-		const dateValue = date ? date.format() : null;
-		// TODO: REDUX - remove flux actions when whole post-editor is reduxified
-		postActions.edit( { date: dateValue } );
-		this.checkForDateChange( dateValue );
-	},
-
 	setCurrentMonth: function( date ) {
 		this.setState( {
 			firstDayOfTheMonth: this.getFirstDayOfTheMonth( date ),
@@ -136,24 +129,6 @@ export default React.createClass( {
 		} );
 	},
 
-	checkForDateChange( date ) {
-		const { savedPost, warnPublishDateChange } = this.props;
-
-		if ( ! savedPost ) {
-			return;
-		}
-
-		const currentDate = this.moment( date );
-		const ModifiedDate = this.moment( savedPost.date );
-		const diff = !! currentDate.diff( ModifiedDate );
-
-		if ( savedPost.type === 'post' && postUtils.isPublished( savedPost ) && diff ) {
-			warnPublishDateChange();
-		} else {
-			warnPublishDateChange( { clearWarning: true } );
-		}
-	},
-
 	getPreviewLabel: function() {
 		if ( postUtils.isPublished( this.props.savedPost ) && this.props.site.jetpack ) {
 			return this.translate( 'View' );
@@ -203,7 +178,7 @@ export default React.createClass( {
 				selectedDay={ postDate }
 				timezone={ tz }
 				gmtOffset={ gmtOffset }
-				onDateChange={ this.setPostDate }
+				onDateChange={ this.props.setPostDate }
 				onMonthChange={ this.setCurrentMonth }
 				site={ this.props.site }
 			/>
@@ -260,6 +235,18 @@ export default React.createClass( {
 			.second( -1 );
 	},
 
+	getSaveStatusLabel: function() {
+		if ( this.props.isSaving ) {
+			return this.translate( 'Saving…' );
+		}
+
+		if ( ! this.props.post || postUtils.isPublished( this.props.post ) || ! this.props.post.ID ) {
+			return null;
+		}
+
+		return this.translate( 'Saved' );
+	},
+
 	isSaveEnabled: function() {
 		return ! this.props.isSaving &&
 			! this.props.isSaveBlocked &&
@@ -296,52 +283,26 @@ export default React.createClass( {
 		stats.recordEvent( eventLabel );
 	},
 
-	renderDateTooltip: function() {
-		if ( this.state.showSchedulePopover ) {
-			return null;
-		}
-
-		return (
-			<Tooltip
-				context={ this.refs && this.refs.schedulePost }
-				isVisible={ this.state.showDateTooltip }
-				position="top"
-				onClose={ noop }
-			>
-				{ this.translate( 'Set date and time' ) }
-			</Tooltip>
-		);
-	},
-
-	showDateTooltip: function() {
-		this.setState( { showDateTooltip: true } );
-	},
-
-	hideDateTooltip: function() {
-		this.setState( { showDateTooltip: false } );
-	},
-
 	render: function() {
-		// TODO: REDUX - remove this logic and prop for EditPostStatus when date is moved to redux
-		const postDate = this.props.post && this.props.post.date
-				? this.props.post.date
-				: null;
 		return (
 			<Card className="editor-ground-control">
+				<Button
+					borderless
+					className="editor-ground-control__back"
+					href={ '' }
+					onClick={ page.back.bind( page, this.props.allPostsUrl ) }
+					aria-label={ this.translate( 'Go back' ) }
+				>
+					<Gridicon icon="arrow-left" />
+				</Button>
 				<Site
+					compact
 					site={ this.props.site }
 					indicator={ false }
 					homeLink={ true }
 					externalLink={ true }
 				/>
-				<hr className="editor-ground-control__separator" />
 				<div className="editor-ground-control__status">
-					<StatusLabel
-						post={ this.props.savedPost }
-						onClick={ this.toggleAdvancedStatus }
-						advancedStatus={ this.state.showAdvanceStatus }
-						type={ this.props.type }
-					/>
 					{ this.isSaveEnabled() &&
 						<button
 							className="editor-ground-control__save button is-link"
@@ -351,33 +312,29 @@ export default React.createClass( {
 							{ this.translate( 'Save' ) }
 						</button>
 					}
-					{ this.props.isSaving &&
-						<span className="editor-ground-control__saving">
-							{ this.translate( 'Saving…' ) }
+					{ ! this.isSaveEnabled() &&
+						<span className="editor-ground-control__save-status">
+							{ this.getSaveStatusLabel() }
 						</span>
 					}
 				</div>
-				{
-					this.state.showAdvanceStatus &&
-						<EditPostStatus
-							savedPost={ this.props.savedPost }
-							postDate={ postDate }
-							type={ this.props.type }
-							onSave={ this.props.onSave }
-							onTrashingPost={ this.props.onTrashingPost }
-							onDateChange={ this.setPostDate }
-							site={ this.props.site }>
-						</EditPostStatus>
-				}
 				<div className="editor-ground-control__action-buttons">
-					<button
-						className="editor-ground-control__preview-button button"
+					<Button
+						borderless
+						className="editor-ground-control__preview-button"
 						disabled={ ! this.isPreviewEnabled() }
 						onClick={ this.onPreviewButtonClick }
 						tabIndex={ 4 }
 					>
-						{ this.getPreviewLabel() }
-					</button>
+						<Gridicon icon="visible" /> <span className="editor-ground-control__button-label">{ this.getPreviewLabel() }</span>
+					</Button>
+					<Button
+						borderless
+						className="editor-ground-control__toggle-sidebar"
+						onClick={ this.props.toggleSidebar }
+					>
+						<Gridicon icon="cog" /> <span className="editor-ground-control__button-label"><EditorPostType isSettings /></span>
+					</Button>
 					<div className="editor-ground-control__publish-combo">
 						<EditorPublishButton
 							site={ this.props.site }
@@ -392,19 +349,20 @@ export default React.createClass( {
 							needsVerification={ this.state.needsVerification }
 						/>
 						{ this.canPublishPost() &&
-							<button
+							<Button
+								primary
+								compact
 								ref="schedulePost"
-								className="editor-ground-control__time-button button"
+								className="editor-ground-control__time-button"
 								onClick={ this.toggleSchedulePopover }
-								onMouseEnter={ this.showDateTooltip }
-								onMouseLeave={ this.hideDateTooltip }
 								aria-label={ this.translate( 'Schedule date and time to publish post.' ) }
 								aria-pressed={ !! this.state.showSchedulePopover }
+								title={ this.translate( 'Set date and time' ) }
 								tabIndex={ 6 }
 							>
 								{ postUtils.isFutureDated( this.props.post )
-									? <Gridicon icon="scheduled" size={ 18 } />
-									: <Gridicon icon="calendar" size={ 18 } />
+									? <Gridicon icon="scheduled" />
+									: <Gridicon icon="calendar" />
 								}
 								<span className="editor-ground-control__time-button-label">
 									{ postUtils.isFutureDated( this.props.post )
@@ -412,9 +370,8 @@ export default React.createClass( {
 										: this.translate( 'Choose Date' )
 									}
 								</span>
-							</button>
+							</Button>
 						}
-						{ this.renderDateTooltip() }
 					</div>
 					{ this.canPublishPost() &&
 						this.schedulePostPopover()
diff --git a/client/post-editor/editor-ground-control/style.scss b/client/post-editor/editor-ground-control/style.scss
index 4d220371dd3579..944ee2e13a3c89 100644
--- a/client/post-editor/editor-ground-control/style.scss
+++ b/client/post-editor/editor-ground-control/style.scss
@@ -1,22 +1,44 @@
 .editor-ground-control {
-	padding: 16px;
+	display: flex;
+	align-items: center;
+	padding: 0;
 	margin-bottom: 0;
 	transition: 0.3s box-shadow;
+	position: fixed;
+	top: 47px;
+	left: 0;
+	right: 0;
+	z-index: z-index( 'root', '.editor-ground-control' );
 
 	@include breakpoint( "<660px" ) {
 		padding-top: 0;
 	}
 }
 
+.editor-ground-control .site,
+.editor-ground-control .editor-ground-control__status,
+.editor-ground-control .editor-ground-control__action-buttons {
+	height: 46px;
+	line-height: 46px;
+}
+
 .editor-ground-control .site {
-	margin: -16px;
-	margin-bottom: 0;
+	flex: 0 0 auto;
 
 	@include breakpoint( "<660px" ) {
 		display: none;
 	}
 }
 
+.editor-ground-control .site .site__title::after,
+.editor-ground-control .site .site__domain::after {
+	width: 16px;
+}
+
+.editor-ground-control .site .site__info {
+	width: auto;
+}
+
 .editor-ground-control__separator {
 	margin: 0 -16px;
 	background: lighten( $gray, 30 );
@@ -26,72 +48,87 @@
 	display: flex;
 	min-height: 20px;
 	justify-content: space-between;
-	margin: 16px 0;
+	margin: 0 auto 0 0;
+	position: relative;
+	border-left: 1px solid lighten( $gray, 25% );
+	padding-left: 16px;
+
+	@include breakpoint( "<660px" ) {
+		border-left: none;
+	}
 }
 
 .editor-ground-control__action-buttons {
+	align-items: center;
 	display: flex;
 	flex-wrap: wrap;
-	margin: 0 -4px -8px;
+	padding: 0 12px;
+	line-height: 32px;
+}
+
+.editor-ground-control__action-buttons .button.is-borderless {
+	padding: 0 12px;
+	line-height: 46px;
+}
+
+.editor-ground-control__action-buttons .button.is-borderless svg {
+	top: 7px;
 }
 
 .editor-ground-control__preview-button {
 	display: block;
 	flex-grow: 1;
-	margin: 0 4px 8px;
+}
+
+.editor-ground-control__toggle-sidebar {
+	margin-right: 8px;
+}
+
+.focus-sidebar .editor-ground-control__toggle-sidebar:hover,
+.focus-sidebar .editor-ground-control__toggle-sidebar:focus,
+.focus-sidebar .editor-ground-control__toggle-sidebar {
+	color: $blue-medium;
+	box-shadow: inset 0 -3px $blue-medium;
+}
+
+.editor-ground-control__toggle-sidebar.button.is-borderless,
+.editor-ground-control__preview-button.button.is-borderless {
+	font-size: 13px;
 }
 
 .editor-ground-control__publish-combo {
 	flex-grow: 1;
 	display: flex;
-	margin: 0 4px 8px;
+	margin: 0 4px;
 }
 
 .editor-ground-control .editor-publish-button {
 	border-radius: 4px 0 0 4px;
 	flex-grow: 1;
-
-	@include breakpoint( "<660px" ) {
-		display: none;
-	}
+	padding: 5px 14px 7px;
 }
 
 .editor-ground-control__time-button {
-	@include breakpoint( ">660px" ) {
-		@include button-is-primary;
-
-		border-radius: 0 4px 4px 0;
-		padding-left: 8px;
-		padding-right: 8px;
-		margin-left: -1px;
-	}
-
-	@include breakpoint( "<660px" ) {
-		width: 100%;
-	}
+	border-radius: 0 4px 4px 0;
+	padding-left: 8px;
+	padding-right: 8px;
+	margin-left: -1px;
 }
 
 .editor-ground-control__time-button-label {
 	padding-left: 8px;
-
-	@include breakpoint( ">660px" ) {
-		display: none;
-	}
+	display: none;
 }
 
 .editor-ground-control__save.button.is-link,
-.editor-ground-control__saving {
-	font-size: 11px;
-	font-weight: 600;
-	height: 15px;
+.editor-ground-control__save-status {
 	text-decoration: underline;
-	text-transform: uppercase;
+	font-size: 13px;
 }
 
-.editor-ground-control__saving {
-	color: $alert-green;
-	line-height: 1.8;
+.editor-ground-control__save-status {
 	text-decoration: none;
+	color: lighten( $gray, 20% );
 }
 
 .editor-ground-control__schedule-post {
@@ -175,3 +212,24 @@
 .editor-ground-control__email-verification-notice-more {
 	text-decoration: underline;
 }
+
+.editor-ground-control__back.button.is-borderless {
+	border-right: 1px solid lighten( $gray, 25% );
+	padding: 6px 10px;
+	height: 46px;
+
+	.gridicon {
+		top: 4px;
+	}
+}
+
+.editor-ground-control__button-label {
+	@include breakpoint( "<960px" ) {
+		display: none;
+	}
+
+	.post-status {
+		display: none;
+	}
+
+}
diff --git a/client/post-editor/editor-html-toolbar/style.scss b/client/post-editor/editor-html-toolbar/style.scss
index a075c4aa6605a9..6ec0e89d8a9ad5 100644
--- a/client/post-editor/editor-html-toolbar/style.scss
+++ b/client/post-editor/editor-html-toolbar/style.scss
@@ -24,16 +24,21 @@
 		border-left-width: 0;
 		border-right-width: 0;
 		border-top-width: 0;
-		left: ( $sidebar-width-min + 1 );
 		max-width: none;
 		position: fixed;
-		top: 47px;
-		width: calc( 100% - ( #{ $sidebar-width-min + 1 } ) );
+		top: 94px;
+		width: 100%;
+		z-index: 2;
 
-		@include breakpoint( ">960px" ) {
-			left: ( $sidebar-width-max + 1 );
+		.focus-sidebar &,
+		.has-chat & {
 			width: calc( 100% - ( #{ $sidebar-width-max + 1 } ) );
 		}
+
+		.focus-sidebar.has-chat & {
+			width: calc( 100% - ( #{ ( $sidebar-width-max * 2 ) + 1 } ) );
+			left: 0;
+		}
 	}
 
 	.editor-html-toolbar__wrapper-buttons {
diff --git a/client/post-editor/editor-location/search.jsx b/client/post-editor/editor-location/search.jsx
index 7ac383bed02261..27a06166de5530 100644
--- a/client/post-editor/editor-location/search.jsx
+++ b/client/post-editor/editor-location/search.jsx
@@ -94,7 +94,9 @@ export default React.createClass( {
 					ref="search"
 					onSearch={ this.geocode }
 					searching={ isSearching }
-					delaySearch />
+					delaySearch
+					compact
+				/>
 				<ul className="editor-location__search-results">
 					{ results.map( ( result ) => {
 						return (
diff --git a/client/post-editor/editor-location/style.scss b/client/post-editor/editor-location/style.scss
index b55e0b9c86cdc5..ccf2e575e32175 100644
--- a/client/post-editor/editor-location/style.scss
+++ b/client/post-editor/editor-location/style.scss
@@ -7,20 +7,7 @@
 }
 
 .editor-location__search .search-card {
-	margin-bottom: 1px;;
-}
-
-.editor-location__search .search__open-icon {
-	width: 40px;
-}
-
-.editor-location__search .search,
-.editor-location__search .search__input {
-	height: 40px;
-}
-
-.editor-location__search .search__close-icon {
-	width: 40px;
+	margin-bottom: 1px;
 }
 
 .editor-location__search-results {
diff --git a/client/post-editor/editor-mobile-navigation/index.jsx b/client/post-editor/editor-mobile-navigation/index.jsx
deleted file mode 100644
index b06542841ca3b9..00000000000000
--- a/client/post-editor/editor-mobile-navigation/index.jsx
+++ /dev/null
@@ -1,91 +0,0 @@
-/**
- * External dependencies
- */
-import React, { PropTypes } from 'react';
-import { connect } from 'react-redux';
-import classnames from 'classnames';
-import Gridicon from 'gridicons';
-
-/**
- * Internal dependencies
- */
-import { setLayoutFocus } from 'state/ui/layout-focus/actions';
-import { getCurrentLayoutFocus } from 'state/ui/layout-focus/selectors';
-import EditorPublishButton from 'post-editor/editor-publish-button';
-import Button from 'components/button';
-
-const EditorMobileNavigation = React.createClass( {
-
-	propTypes: {
-		site: PropTypes.object,
-		post: PropTypes.object,
-		savedPost: PropTypes.object,
-		onSave: PropTypes.func,
-		onPublish: PropTypes.func,
-		tabIndex: PropTypes.number,
-		isPublishing: PropTypes.bool,
-		isSaveBlocked: PropTypes.bool,
-		hasContent: PropTypes.bool,
-		onTabChange: PropTypes.func,
-		onClose: PropTypes.func
-	},
-
-	openSidebar: function() {
-		if ( 'sidebar' !== this.props.currentLayoutFocus ) {
-			this.props.setLayoutFocus( 'sidebar' );
-			this.props.onTabChange();
-		}
-	},
-
-	closeSidebar: function() {
-		if ( 'content' !== this.props.currentLayoutFocus ) {
-			this.props.setLayoutFocus( 'content' );
-			this.props.onTabChange();
-		}
-	},
-
-	render: function() {
-		return (
-			<div className="editor-mobile-navigation">
-				<div className="editor-mobile-navigation__actions">
-					<Button borderless onClick={ this.props.onClose }>
-						<Gridicon
-							icon="chevron-left"
-							className="editor-mobile-navigation__icon" />
-					</Button>
-					<div className="editor-mobile-navigation__tabs">
-						<Button borderless onClick={ this.closeSidebar }>
-							<Gridicon
-								icon="pencil"
-								className={ classnames( 'editor-mobile-navigation__icon', {
-									'is-selected': 'content' === this.props.currentLayoutFocus
-								} ) } />
-						</Button>
-						<Button borderless onClick={ this.openSidebar }>
-							<Gridicon
-								icon="cog"
-								className={ classnames( 'editor-mobile-navigation__icon', {
-									'is-selected': 'sidebar' === this.props.currentLayoutFocus
-								} ) } />
-						</Button>
-					</div>
-				</div>
-				<EditorPublishButton
-					site={ this.props.site }
-					post={ this.props.post }
-					savedPost={ this.props.savedPost }
-					onSave={ this.props.onSave }
-					onPublish={ this.props.onPublish }
-					isPublishing={ this.props.isPublishing }
-					isSaveBlocked={ this.props.isSaveBlocked }
-					hasContent={ this.props.hasContent }
-				/>
-			</div>
-		);
-	}
-} );
-
-module.exports = connect(
-	( state ) => ( { currentLayoutFocus: getCurrentLayoutFocus( state ) } ),
-	{ setLayoutFocus }
-)( EditorMobileNavigation );
diff --git a/client/post-editor/editor-mobile-navigation/style.scss b/client/post-editor/editor-mobile-navigation/style.scss
deleted file mode 100644
index b5a80dddad2ca4..00000000000000
--- a/client/post-editor/editor-mobile-navigation/style.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-.editor-mobile-navigation {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	background-color: $white;
-	border-bottom: 1px lighten( $gray, 20% ) solid;
-
-	@include breakpoint( ">660px" ) {
-		display: none;
-	}
-}
-
-.editor-mobile-navigation__actions {
-	display: inline;
-	line-height: 0;
-}
-
-.editor-mobile-navigation__tabs {
-	display: inline-block;
-	border-left: 1px lighten( $gray, 20% ) solid;
-	border-right: 1px lighten( $gray, 20% ) solid;
-}
-
-.editor-mobile-navigation__icon {
-	cursor: pointer;
-	padding: 4px 12px;
-	color: lighten( $gray, 10% );
-
-	&:hover {
-		color: $gray-dark;
-	}
-
-	&.is-selected {
-		cursor: default;
-		color: $gray-dark;
-	}
-}
-
-.editor-mobile-navigation .editor-publish-button {
-	margin-right: 12px;
-}
diff --git a/client/post-editor/editor-notice/index.jsx b/client/post-editor/editor-notice/index.jsx
index 279015c66930de..46cf7e000057c3 100644
--- a/client/post-editor/editor-notice/index.jsx
+++ b/client/post-editor/editor-notice/index.jsx
@@ -16,6 +16,7 @@ import { getEditedPost } from 'state/posts/selectors';
 import { getPostType } from 'state/post-types/selectors';
 import QueryPostTypes from 'components/data/query-post-types';
 import { setLayoutFocus } from 'state/ui/layout-focus/actions';
+import { isMobile } from 'lib/viewport';
 
 export class EditorNotice extends Component {
 	static propTypes = {
@@ -33,8 +34,8 @@ export class EditorNotice extends Component {
 	}
 
 	componentWillReceiveProps( nextProps ) {
-		if ( ( ! this.props.message && nextProps.message ) ||
-			( ! this.props.error && nextProps.error ) ) {
+		if ( isMobile() &&
+			( ( ! this.props.message && nextProps.message ) || ( ! this.props.error && nextProps.error ) ) ) {
 			// If we are showing a notice that didn't exist before, switch to the main editor view to show it
 			this.props.setLayoutFocus( 'content' );
 		}
@@ -201,7 +202,7 @@ export class EditorNotice extends Component {
 				{ text && (
 					<Notice
 						{ ...{ status, text, onDismissClick } }
-						showDismiss={ 'is-success' !== status }>
+						showDismiss={ true }>
 						{ link && (
 							<NoticeAction href={ link } external>
 								{ this.getText( action ) }
diff --git a/client/post-editor/editor-notice/test/index.jsx b/client/post-editor/editor-notice/test/index.jsx
index 00feba78e13b76..0a75c948f35b08 100644
--- a/client/post-editor/editor-notice/test/index.jsx
+++ b/client/post-editor/editor-notice/test/index.jsx
@@ -73,7 +73,6 @@ describe( 'EditorNotice', () => {
 			} )
 		);
 		expect( wrapper.find( Notice ) ).to.have.prop( 'status' ).equal( 'is-success' );
-		expect( wrapper.find( Notice ) ).to.have.prop( 'showDismiss' ).be.false;
 		expect( wrapper.find( NoticeAction ) ).to.have.prop( 'href' ).equal( 'https://example.wordpress.com/published-page' );
 		expect( wrapper.find( NoticeAction ) ).to.have.prop( 'children' ).equal( 'View Page' );
 	} );
@@ -106,7 +105,6 @@ describe( 'EditorNotice', () => {
 			} )
 		);
 		expect( wrapper.find( Notice ) ).to.have.prop( 'status' ).equal( 'is-success' );
-		expect( wrapper.find( Notice ) ).to.have.prop( 'showDismiss' ).be.false;
 		expect( wrapper.find( NoticeAction ) ).to.have.prop( 'href' ).equal( 'https://example.wordpress.com/published-project' );
 		expect( wrapper.find( NoticeAction ) ).to.have.prop( 'children' ).equal( 'View Project' );
 	} );
diff --git a/client/post-editor/editor-post-formats/accordion.jsx b/client/post-editor/editor-post-formats/accordion.jsx
index f4db237566f358..1b2df4c0a5c5cf 100644
--- a/client/post-editor/editor-post-formats/accordion.jsx
+++ b/client/post-editor/editor-post-formats/accordion.jsx
@@ -5,7 +5,6 @@ import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { has, isEmpty } from 'lodash';
 import classNames from 'classnames';
-import Gridicon from 'gridicons';
 
 /**
  * Internal dependencies
@@ -68,7 +67,6 @@ const EditorPostFormatsAccordion = React.createClass( {
 					<Accordion
 						title={ this.translate( 'Post Format' ) }
 						subtitle={ this.getSubtitle() }
-						icon={ <Gridicon icon="types" /> }
 						className={ classes }>
 						<PostFormats value={ this.getFormatValue() } />
 					</Accordion>
diff --git a/client/post-editor/editor-post-formats/style.scss b/client/post-editor/editor-post-formats/style.scss
index 86d0d08732cbe1..b15b07d2823dc2 100644
--- a/client/post-editor/editor-post-formats/style.scss
+++ b/client/post-editor/editor-post-formats/style.scss
@@ -4,12 +4,12 @@
 }
 
 .editor-post-formats__format {
-	margin: 8px 0;
+	margin: 12px 0;
 }
 
 .editor-post-formats__format-label {
-	color: darken( $gray, 20% );
-	font-size: 14px;
+	color: $gray-text;
+	font-size: 12px;
 	position: relative;
 	padding-left: 26px;
 	cursor: pointer;
diff --git a/client/post-editor/editor-post-type/index.jsx b/client/post-editor/editor-post-type/index.jsx
index 7a0fddd854f464..2c75ba54b9232b 100644
--- a/client/post-editor/editor-post-type/index.jsx
+++ b/client/post-editor/editor-post-type/index.jsx
@@ -11,29 +11,32 @@ import { localize } from 'i18n-calypso';
  */
 import { getEditedPost } from 'state/posts/selectors';
 import { getSelectedSite } from 'state/ui/selectors';
-import { getEditorPostId, isEditorNewPost } from 'state/ui/editor/selectors';
+import { getEditorPostId } from 'state/ui/editor/selectors';
 import { getPostType } from 'state/post-types/selectors';
 import QueryPostTypes from 'components/data/query-post-types';
 import { decodeEntities } from 'lib/formatting';
 import PostStatus from 'blocks/post-status';
 
-function EditorPostType( { translate, siteId, isNew, typeSlug, type, globalId } ) {
+function EditorPostType( { translate, siteId, typeSlug, type, globalId, isSettings } ) {
 	let label;
 	if ( 'page' === typeSlug ) {
-		if ( isNew ) {
-			label = translate( 'New Page' );
+		if ( isSettings ) {
+			label = translate( 'Page Settings' );
 		} else {
 			label = translate( 'Page', { context: 'noun' } );
 		}
 	} else if ( 'post' === typeSlug ) {
-		if ( isNew ) {
-			label = translate( 'New Post' );
+		if ( isSettings ) {
+			label = translate( 'Post Settings' );
 		} else {
 			label = translate( 'Post', { context: 'noun' } );
 		}
 	} else if ( type ) {
-		if ( isNew ) {
-			label = type.labels.new_item;
+		if ( isSettings ) {
+			label = translate( '%s: Settings', {
+				args: type.labels.singular_name,
+				comment: "type refers to a post type's singular noun",
+			} );
 		} else {
 			label = type.labels.singular_name;
 		}
@@ -60,14 +63,14 @@ function EditorPostType( { translate, siteId, isNew, typeSlug, type, globalId }
 EditorPostType.propTypes = {
 	translate: PropTypes.func,
 	siteId: PropTypes.number,
-	isNew: PropTypes.bool,
 	typeSlug: PropTypes.string,
 	type: PropTypes.object,
-	globalId: PropTypes.string
+	globalId: PropTypes.string,
+	isSettings: PropTypes.bool,
 };
 
 export default connect( ( state ) => {
-	const props = { isNew: isEditorNewPost( state ) };
+	const props = {};
 	const site = getSelectedSite( state );
 	if ( ! site ) {
 		return props;
diff --git a/client/post-editor/editor-post-type/style.scss b/client/post-editor/editor-post-type/style.scss
index 4c817adadc894c..f3e2cbec8bcc41 100644
--- a/client/post-editor/editor-post-type/style.scss
+++ b/client/post-editor/editor-post-type/style.scss
@@ -1,23 +1,13 @@
 .editor-post-type {
-	color: lighten( $gray, 10% );
-	font-size: 11px;
-	font-weight: 500;
-	margin: 5px 0;
-	text-align: center;
-	text-transform: uppercase;
-
 	&.is-loading {
 		@include placeholder;
 	}
 
 	.post-status__text {
+		display: none;
 		color: darken( $gray, 10% );
 		margin-left: 4px;
 		vertical-align: baseline;
-		&::before {
-			content: '– ';
-			margin-right: 4px;
-		}
 	}
 }
 
diff --git a/client/post-editor/editor-publish-button/index.jsx b/client/post-editor/editor-publish-button/index.jsx
index 8dad9d4810e544..a1b135fb01aaca 100644
--- a/client/post-editor/editor-publish-button/index.jsx
+++ b/client/post-editor/editor-publish-button/index.jsx
@@ -122,6 +122,7 @@ export class EditorPublishButton extends Component {
 			<Button
 				className="editor-publish-button"
 				primary
+				compact
 				onClick={ this.onClick }
 				disabled={ ! this.isEnabled() }
 				tabIndex={ this.props.tabIndex }
diff --git a/client/post-editor/editor-revisions/index.jsx b/client/post-editor/editor-revisions/index.jsx
index c75e74787e5cd6..430b7079782ff6 100644
--- a/client/post-editor/editor-revisions/index.jsx
+++ b/client/post-editor/editor-revisions/index.jsx
@@ -23,7 +23,7 @@ export default React.createClass( {
 	},
 
 	render() {
-		if ( ! this.props.revisions.length ) {
+		if ( ! this.props.revisions || ! this.props.revisions.length ) {
 			return null;
 		}
 
diff --git a/client/post-editor/editor-revisions/style.scss b/client/post-editor/editor-revisions/style.scss
index 6a85cdbae88d64..6ed84c3e3c2a70 100644
--- a/client/post-editor/editor-revisions/style.scss
+++ b/client/post-editor/editor-revisions/style.scss
@@ -1,11 +1,13 @@
 .editor-revisions {
-	color: darken( $gray, 10% );
+	color: $gray-text;
 	display: block;
 	font-size: 13px;
-	margin-bottom: 12px;
+	margin: 16px -16px -16px;
+	padding: 16px;
+	border-top: 1px solid darken( $sidebar-bg-color, 5% );
 
 	&:visited {
-		color: darken( $gray, 10% );
+		color: $gray-text;
 	}
 
 	&:hover,
@@ -19,7 +21,7 @@
 	}
 
 	.gridicon {
-		color: $gray;
+		color: $gray-text;
 		margin-left: -2px;
 		margin-right: 8px;
 		vertical-align: bottom;
diff --git a/client/post-editor/editor-seo-accordion/index.jsx b/client/post-editor/editor-seo-accordion/index.jsx
index 1b28a7cb0992f9..978a484783cbc1 100644
--- a/client/post-editor/editor-seo-accordion/index.jsx
+++ b/client/post-editor/editor-seo-accordion/index.jsx
@@ -5,7 +5,6 @@ import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import identity from 'lodash/identity';
 import { localize } from 'i18n-calypso';
-import Gridicon from 'gridicons';
 
 /**
  * Internal dependencies
@@ -55,7 +54,6 @@ class EditorSeoAccordion extends Component {
 		return (
 			<Accordion
 				title={ translate( 'SEO Description' ) }
-				icon={ <Gridicon icon="search" /> }
 				className="editor-seo-accordion"
 			>
 				<AccordionSection>
diff --git a/client/post-editor/editor-sharing/accordion.jsx b/client/post-editor/editor-sharing/accordion.jsx
index 393fc88d60bb6e..4be619f9a2e976 100644
--- a/client/post-editor/editor-sharing/accordion.jsx
+++ b/client/post-editor/editor-sharing/accordion.jsx
@@ -5,7 +5,6 @@ import React, { PropTypes } from 'react';
 import classNames from 'classnames';
 import { connect } from 'react-redux';
 import { includes, reduce } from 'lodash';
-import Gridicon from 'gridicons';
 
 /**
  * Internal dependencies
@@ -120,7 +119,6 @@ const EditorSharingAccordion = React.createClass( {
 			<Accordion
 				title={ this.translate( 'Sharing' ) }
 				subtitle={ this.getSubtitle() }
-				icon={ <Gridicon icon="share" /> }
 				status={ status }
 				className={ classes }>
 				{ this.props.site && (
diff --git a/client/post-editor/editor-sharing/publicize-connection.jsx b/client/post-editor/editor-sharing/publicize-connection.jsx
index a58af284d3ae65..751d85a90a1de3 100644
--- a/client/post-editor/editor-sharing/publicize-connection.jsx
+++ b/client/post-editor/editor-sharing/publicize-connection.jsx
@@ -13,6 +13,7 @@ import PostMetadata from 'lib/post-metadata';
 import PostActions from 'lib/posts/actions';
 import * as PostStats from 'lib/posts/stats';
 import Notice from 'components/notice';
+import NoticeAction from 'components/notice/notice-action';
 
 export default React.createClass( {
 	displayName: 'EditorSharingPublicizeConnection',
@@ -70,21 +71,9 @@ export default React.createClass( {
 		}
 
 		return (
-			<Notice className="editor-sharing__broken-publicize-connection" status="is-warning" showDismiss={ false }>
-				{ this.translate( 'There is an issue connecting to %s. {{button}}Reconnect {{icon/}}{{/button}}', {
-					args: connection.label,
-					components: {
-						button: (
-							<button
-								type="button"
-								onClick={ this.props.onRefresh }
-								className="editor-sharing__broken-publicize-connection-button" />
-						),
-						icon: (
-							<Gridicon icon="external" size={ 18 } />
-						)
-					}
-				} ) }
+			<Notice isCompact className="editor-sharing__broken-publicize-connection" status="is-warning" showDismiss={ false }>
+				{ this.translate( 'There is an issue connecting to %s.', { args: connection.label } ) }
+				<NoticeAction onClick={ this.props.onRefresh }>Reconnect <Gridicon icon="external" size={ 18 } /></NoticeAction>
 			</Notice>
 		);
 	},
diff --git a/client/post-editor/editor-sharing/publicize-options.scss b/client/post-editor/editor-sharing/publicize-options.scss
index 70b72de1f8252a..14f31a72196e40 100644
--- a/client/post-editor/editor-sharing/publicize-options.scss
+++ b/client/post-editor/editor-sharing/publicize-options.scss
@@ -14,7 +14,7 @@
 		vertical-align: text-top;
 	}
 	.notice.is-compact {
-		margin-bottom: 8px
+		margin: 8px 0;
 	}
 }
 
@@ -33,7 +33,8 @@
 }
 
 .editor-sharing__publicize-disabled {
-	text-align: center;
+	color: $gray-text-min;
+	font-size: 13px;
 	span {
 		display: block;
 	}
diff --git a/client/post-editor/editor-sharing/publicize-services.scss b/client/post-editor/editor-sharing/publicize-services.scss
index df5dd61e7b702e..ef4cb0edbf8214 100644
--- a/client/post-editor/editor-sharing/publicize-services.scss
+++ b/client/post-editor/editor-sharing/publicize-services.scss
@@ -8,5 +8,6 @@
 }
 
 .editor-sharing__publicize-service-heading {
-	font-weight: bold;
+	font-size: 12px;
+	font-weight: 400;
 }
diff --git a/client/post-editor/editor-sharing/style.scss b/client/post-editor/editor-sharing/style.scss
index ea11d1b8a565a0..0aa04dae818a8c 100644
--- a/client/post-editor/editor-sharing/style.scss
+++ b/client/post-editor/editor-sharing/style.scss
@@ -39,6 +39,7 @@ input[type="text"].editor-sharing__shortlink-field {
 
 .editor-sharing__publicize-connection {
 	display: block;
+	font-size: 12px;
 	padding: 2px 0;
 }
 
diff --git a/client/post-editor/editor-sidebar/header.jsx b/client/post-editor/editor-sidebar/header.jsx
index fcd72945bc4e19..22a3c309f905e0 100644
--- a/client/post-editor/editor-sidebar/header.jsx
+++ b/client/post-editor/editor-sidebar/header.jsx
@@ -2,84 +2,34 @@
  * External dependencies
  */
 import React, { PropTypes } from 'react';
-import classnames from 'classnames';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-import get from 'lodash/get';
-import page from 'page';
 import { localize } from 'i18n-calypso';
 import Gridicon from 'gridicons';
 
 /**
  * Internal dependencies
  */
-import { getSelectedSiteId } from 'state/ui/selectors';
-import { getEditedPost } from 'state/posts/selectors';
-import { getEditorPostId, isEditorDraftsVisible } from 'state/ui/editor/selectors';
-import { toggleEditorDraftsVisible } from 'state/ui/editor/actions';
 import Button from 'components/button';
-import AsyncLoad from 'components/async-load';
-
-function EditorSidebarHeader( { translate, type, showDrafts, toggleDrafts, allPostsUrl } ) {
-	const className = classnames( 'editor-sidebar__header', {
-		'is-drafts-visible': showDrafts
-	} );
-	const closeLabel = translate( 'Back' );
-	const closeButtonAction = page.back.bind( page, allPostsUrl );
-	const closeButtonUrl = '';
-	const closeButtonAriaLabel = translate( 'Go back' );
+import EditorPostType from 'post-editor/editor-post-type';
 
+function EditorSidebarHeader( { translate, toggleSidebar } ) {
 	return (
-		<div className={ className }>
-			{ showDrafts && (
-				<Button
-					compact borderless
-					className="editor-sidebar__close"
-					onClick={ toggleDrafts }
-					aria-label={ translate( 'Close drafts list' ) }>
-					<Gridicon icon="cross" />
-					{ translate( 'Close' ) }
-				</Button>
-			) }
-			{ ! showDrafts && (
-				<Button
-					compact borderless
-					className="editor-sidebar__close"
-					href={ closeButtonUrl }
-					onClick={ closeButtonAction }
-					aria-label={ closeButtonAriaLabel }>
-					<Gridicon icon="arrow-left" size={ 18 } />
-					{ closeLabel }
-				</Button>
-			) }
-			{ type === 'post' && (
-				<AsyncLoad require="post-editor/drafts-button" onClick={ toggleDrafts } />
-			) }
+		<div className="editor-sidebar__header">
+			<EditorPostType isSettings />
+			<Button
+				compact borderless
+				className="editor-sidebar__back"
+				onClick={ toggleSidebar }
+				title={ translate( 'Close sidebar' ) }
+				aria-label={ translate( 'Close sidebar' ) }>
+				<Gridicon icon="cross" />
+			</Button>
 		</div>
 	);
 }
 
 EditorSidebarHeader.propTypes = {
 	translate: PropTypes.func,
-	type: PropTypes.string,
-	showDrafts: PropTypes.bool,
-	toggleDrafts: PropTypes.func,
-	allPostsUrl: PropTypes.string
+	toggleSidebar: PropTypes.func,
 };
 
-export default connect(
-	( state ) => {
-		const siteId = getSelectedSiteId( state );
-		const postId = getEditorPostId( state );
-
-		return {
-			type: get( getEditedPost( state, siteId, postId ), 'type' ),
-			showDrafts: isEditorDraftsVisible( state )
-		};
-	},
-	( dispatch ) => {
-		return bindActionCreators( {
-			toggleDrafts: toggleEditorDraftsVisible
-		}, dispatch );
-	}
-)( localize( EditorSidebarHeader ) );
+export default localize( EditorSidebarHeader );
diff --git a/client/post-editor/editor-sidebar/index.jsx b/client/post-editor/editor-sidebar/index.jsx
index 6f94c77887195b..fe4ae3a1999e32 100644
--- a/client/post-editor/editor-sidebar/index.jsx
+++ b/client/post-editor/editor-sidebar/index.jsx
@@ -7,99 +7,51 @@ import React, { PropTypes, Component } from 'react';
  * Internal dependencies
  */
 import EditorDrawer from 'post-editor/editor-drawer';
-import EditorGroundControl from 'post-editor/editor-ground-control';
-import AsyncLoad from 'components/async-load';
 import EditorSidebarHeader from './header';
 import SidebarFooter from 'layout/sidebar/footer';
 import EditorActionBar from 'post-editor/editor-action-bar';
+import EditorDeletePost from 'post-editor/editor-delete-post';
 
 export default class EditorSidebar extends Component {
 	static propTypes = {
-		allPostsUrl: PropTypes.string,
-		sites: PropTypes.object,
-		onTitleClick: PropTypes.func,
 		savedPost: PropTypes.object,
 		post: PropTypes.object,
 		isNew: PropTypes.bool,
-		isDirty: PropTypes.bool,
-		isSaveBlocked: PropTypes.bool,
-		hasContent: PropTypes.bool,
-		isSaving: PropTypes.bool,
-		isPublishing: PropTypes.bool,
-		onSave: PropTypes.func,
-		onPreview: PropTypes.func,
 		onPublish: PropTypes.func,
 		onTrashingPost: PropTypes.func,
 		site: PropTypes.object,
-		user: PropTypes.object,
-		userUtils: PropTypes.object,
 		type: PropTypes.string,
-		showDrafts: PropTypes.bool,
-		onMoreInfoAboutEmailVerify: PropTypes.func,
-		warnPublishDateChange: PropTypes.func
+		toggleSidebar: PropTypes.func,
+		setPostDate: PropTypes.func,
 	}
 
-	renderDraftsList() {
-		return (
-			<AsyncLoad
-				require="my-sites/drafts/draft-list"
-				sites={ this.props.sites }
-				onTitleClick={ this.props.onTitleClick }
-				showAllActionsMenu={ false }
-				siteID={ this.props.site ? this.props.site.ID : null }
-				selectedId={ this.props.post ? this.props.post.ID : null }
-			/>
-		);
-	}
-
-	renderSidebar() {
+	render() {
+		const { toggleSidebar, isNew, onTrashingPost, onPublish, post, savedPost, site, type, setPostDate } = this.props;
 		return (
-			<div>
+			<div className="post-editor__sidebar">
+				<EditorSidebarHeader toggleSidebar={ toggleSidebar } />
 				<EditorActionBar
-					isNew={ this.props.isNew }
-					onTrashingPost={ this.props.onTrashingPost }
-					onPrivatePublish={ this.props.onPublish }
-					post={ this.props.post }
-					savedPost={ this.props.savedPost }
-					site={ this.props.site }
-					type={ this.props.type }
-				/>
-				<EditorGroundControl
-					warnPublishDateChange={ this.props.warnPublishDateChange }
-					hasContent={ this.props.hasContent }
-					isDirty={ this.props.isDirty }
-					isSaveBlocked={ this.props.isSaveBlocked }
-					isPublishing={ this.props.isPublishing }
-					isSaving={ this.props.isSaving }
-					onPreview={ this.props.onPreview }
-					onPublish={ this.props.onPublish }
-					onSave={ this.props.onSave }
-					onSaveDraft={ this.props.onSaveDraft }
-					post={ this.props.post }
-					savedPost={ this.props.savedPost }
-					site={ this.props.site }
-					user={ this.props.user }
-					userUtils={ this.props.userUtils }
-					type={ this.props.type }
-					onMoreInfoAboutEmailVerify={ this.props.onMoreInfoAboutEmailVerify }
+					isNew={ isNew }
+					post={ post }
+					savedPost={ savedPost }
+					site={ site }
+					type={ type }
 				/>
 				<EditorDrawer
-					site={ this.props.site }
-					post={ this.props.post }
-					isNew={ this.props.isNew }
-					type={ this.props.type }
+					site={ site }
+					savedPost={ savedPost }
+					post={ post }
+					isNew={ isNew }
+					type={ type }
+					setPostDate={ setPostDate }
+					onPrivatePublish={ onPublish }
 				/>
-			</div>
-		);
-	}
-
-	render() {
-		return (
-			<div className="post-editor__sidebar">
-				<EditorSidebarHeader
-					allPostsUrl={ this.props.allPostsUrl } />
-				{ this.props.showDrafts ? this.renderDraftsList() : this.renderSidebar() }
-				<SidebarFooter />
+				<SidebarFooter>
+					<EditorDeletePost
+						post={ post }
+						onTrashingPost={ onTrashingPost }
+					/>
+				</SidebarFooter>
 			</div>
 		);
 	}
diff --git a/client/post-editor/editor-sidebar/style.scss b/client/post-editor/editor-sidebar/style.scss
index 19c60cac8d4941..8a99eedb088fae 100644
--- a/client/post-editor/editor-sidebar/style.scss
+++ b/client/post-editor/editor-sidebar/style.scss
@@ -1,5 +1,21 @@
 .post-editor__sidebar {
 	@extend .sidebar;
+	background: lighten( $gray, 30% );
+	left: auto;
+	right: -273px;
+	border-left: 1px solid darken( $sidebar-bg-color, 5% );
+	border-top: 1px solid darken( $sidebar-bg-color, 5% );
+	border-right: none;
+	top: 93px;
+	transition: all 0.15s cubic-bezier(0.075, 0.82, 0.165, 1);
+
+	.focus-sidebar & {
+		transform: translateX(-273px);
+	}
+
+	.focus-sidebar .is-loading & {
+		transition: none;
+	}
 
 	@include breakpoint( "<660px" ) {
 		position: relative;
@@ -17,14 +33,18 @@
 }
 
 .editor-sidebar__header {
+	background: lighten( $gray, 30% );
 	display: none;
+	font-size: 13px;
+	color: $gray-dark;
+	font-weight: 500;
 
 	@include breakpoint( ">660px" ) {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 		flex-shrink: 0;
-		padding: 8px;
+		padding: 11px 15px 11px 16px;
 	}
 }
 
diff --git a/client/post-editor/editor-slug/style.scss b/client/post-editor/editor-slug/style.scss
index 389cc48a1e33fe..ea8c237767c152 100644
--- a/client/post-editor/editor-slug/style.scss
+++ b/client/post-editor/editor-slug/style.scss
@@ -1,5 +1,5 @@
 .editor-slug {
-	margin-left: -20px;
+	margin-left: 10px;
 	margin-top: -4px;
 
 	@include breakpoint( "<480px" ) {
diff --git a/client/post-editor/editor-status-label/index.jsx b/client/post-editor/editor-status-label/index.jsx
index 2309fc3ce766d4..0ec8f37df01212 100644
--- a/client/post-editor/editor-status-label/index.jsx
+++ b/client/post-editor/editor-status-label/index.jsx
@@ -125,7 +125,7 @@ export default React.createClass( {
 				} );
 				break;
 			case 'draft':
-				label = this.translate( '{{strong}}Draft saved{{/strong}} %(relativeTimeFromNow)s', {
+				label = this.translate( '{{strong}}Saved{{/strong}} %(relativeTimeFromNow)s', {
 					args: { relativeTimeFromNow: timeFromNow },
 					components: {
 						strong: <strong />
diff --git a/client/post-editor/editor-status-label/style.scss b/client/post-editor/editor-status-label/style.scss
index 84d1d3079a6e29..b4e35303df0381 100644
--- a/client/post-editor/editor-status-label/style.scss
+++ b/client/post-editor/editor-status-label/style.scss
@@ -17,7 +17,6 @@
 
 	strong {
 		color: darken( $gray, 10% );
-		display: block;
 	}
 
 	&.is-publish strong {
@@ -35,10 +34,6 @@
 	&.is-plain {
 		padding-left: 0;
 		cursor: default;
-
-		strong {
-			display: block;
-		}
 	}
 }
 
diff --git a/client/post-editor/editor-sticky/index.jsx b/client/post-editor/editor-sticky/index.jsx
index 903a2ddb7ffc1c..a3f610e6b88b86 100644
--- a/client/post-editor/editor-sticky/index.jsx
+++ b/client/post-editor/editor-sticky/index.jsx
@@ -70,22 +70,16 @@ const EditorSticky = React.createClass( {
 				ref="stickyPostButton"
 			>
 				<Gridicon icon="bookmark" />
-				<Tooltip
-					className="editor-sticky__tooltip"
-					context={ this.refs && this.refs.stickyPostButton }
-					isVisible={ this.state.tooltip }
-					position="bottom left"
-				>
-					{ this.props.sticky
-						? <span>{ this.translate( 'Marked as sticky' ) }</span>
-						: <div>
-							{ this.translate( 'Mark as sticky' ) }
-							<span className="editor-sticky__explanation">
-								{ this.translate( 'Displayed at top' ) }
-							</span>
-						</div>
-					}
-				</Tooltip>
+				{ this.props.sticky &&
+					<Tooltip
+						className="editor-sticky__tooltip"
+						context={ this.refs && this.refs.stickyPostButton }
+						isVisible={ this.state.tooltip }
+						position="bottom left"
+					>
+						<span>{ this.translate( 'Marked as sticky' ) }</span>
+					</Tooltip>
+				}
 			</Button>
 		);
 	}
diff --git a/client/post-editor/editor-sticky/style.scss b/client/post-editor/editor-sticky/style.scss
index 6565fc4cdd1954..1af18257ddb0a5 100644
--- a/client/post-editor/editor-sticky/style.scss
+++ b/client/post-editor/editor-sticky/style.scss
@@ -1,6 +1,11 @@
 .editor-sticky.button {
+	opacity: 0;
+	cursor: default;
+	transition: opacity 200ms;
 	&.is-sticky {
 		color: $orange-jazzy;
+		opacity: 1;
+		cursor: pointer;
 	}
 }
 
diff --git a/client/post-editor/editor-term-selector/add-term.scss b/client/post-editor/editor-term-selector/add-term.scss
index c61da77c21d5fd..0c8d6ea33cf2cb 100644
--- a/client/post-editor/editor-term-selector/add-term.scss
+++ b/client/post-editor/editor-term-selector/add-term.scss
@@ -6,5 +6,6 @@
 
 	&.is-compact {
 		border: 0;
+		padding: 8px 0;
 	}
 }
diff --git a/client/post-editor/editor-term-selector/index.jsx b/client/post-editor/editor-term-selector/index.jsx
index fefe4026afcf92..697b2af957666a 100644
--- a/client/post-editor/editor-term-selector/index.jsx
+++ b/client/post-editor/editor-term-selector/index.jsx
@@ -23,7 +23,8 @@ class EditorTermSelector extends Component {
 		postTerms: PropTypes.object,
 		postType: PropTypes.string,
 		taxonomyName: PropTypes.string,
-		canEditTerms: PropTypes.bool
+		canEditTerms: PropTypes.bool,
+		compact: PropTypes.bool,
 	};
 
 	constructor( props ) {
@@ -63,7 +64,7 @@ class EditorTermSelector extends Component {
 	}
 
 	render() {
-		const { postType, siteId, taxonomyName, canEditTerms } = this.props;
+		const { postType, siteId, taxonomyName, canEditTerms, compact } = this.props;
 
 		return (
 			<div>
@@ -74,6 +75,7 @@ class EditorTermSelector extends Component {
 					taxonomy={ taxonomyName }
 					siteId={ siteId }
 					multiple={ true }
+					compact={ compact }
 				/>
 				{ canEditTerms &&
 					<AddTerm
diff --git a/client/post-editor/editor-title/style.scss b/client/post-editor/editor-title/style.scss
index 5891eb133d2fc5..0ab7288968f42a 100644
--- a/client/post-editor/editor-title/style.scss
+++ b/client/post-editor/editor-title/style.scss
@@ -12,12 +12,14 @@
 		background: lighten( $gray, 20% );
 	}
 
-	@include breakpoint( ">660px" ) {
-		margin-left: 52px;
-	}
-
-	@include breakpoint( ">1040px" ) {
-		margin-left: 0;
+	.focus-sidebar & {
+		@include breakpoint( ">660px" ) {
+			margin-left: 52px;
+		}
+
+		@include breakpoint( ">1040px" ) {
+			margin-left: 0;
+		}
 	}
 }
 
diff --git a/client/post-editor/editor-visibility/index.jsx b/client/post-editor/editor-visibility/index.jsx
index d6238cde3fee65..f5ee15a1bd1aa7 100644
--- a/client/post-editor/editor-visibility/index.jsx
+++ b/client/post-editor/editor-visibility/index.jsx
@@ -20,7 +20,6 @@ import FormSettingExplanation from 'components/forms/form-setting-explanation';
 import Button from 'components/button';
 import Popover from 'components/popover';
 import touchDetect from 'lib/touch-detect';
-import Tooltip from 'components/tooltip';
 import postActions from 'lib/posts/actions';
 import { recordEvent, recordStat } from 'lib/posts/stats';
 import accept from 'lib/accept';
@@ -51,7 +50,6 @@ export default React.createClass( {
 		return {
 			showPopover: false,
 			passwordIsValid: true,
-			tooltip: false,
 			showVisibilityInfotips: false,
 			visibility: 'public',
 		};
@@ -277,22 +275,6 @@ export default React.createClass( {
 		);
 	},
 
-	showTooltip() {
-		if ( this.state.tooltip ) {
-			return;
-		}
-
-		this.setState( { tooltip: true } );
-	},
-
-	hideTooltip() {
-		if ( ! this.state.tooltip ) {
-			return;
-		}
-
-		this.setState( { tooltip: false } );
-	},
-
 	toggleVisibilityInfotips() {
 		if ( this.state.showVisibilityInfotips ) {
 			recordEvent( 'InfoPopover: Visibility Closed' );
@@ -324,84 +306,76 @@ export default React.createClass( {
 		} );
 
 		return (
-			<Button
-				borderless
-				className={ classes }
-				onClick={ this.togglePopover }
-				onMouseEnter={ this.showTooltip }
-				onMouseLeave={ this.hideTooltip }
-				ref="setVisibility"
-			>
-				<Gridicon icon={ icons[ visibility ] || 'visible' } />
-				<Tooltip
-					className="editor-visibility__tooltip"
-					context={ this.refs && this.refs.setVisibility }
-					isVisible={ this.state.tooltip && ! this.state.showPopover }
-					position="bottom left"
-				>
-					{ this.translate( 'Edit visibility', { context: 'Editor: Tooltip shown on icon to change the post\'s visibility.' } ) }
-				</Tooltip>
-				<Popover
-					className="editor-visibility__popover"
-					isVisible={ this.state.showPopover }
-					onClose={ this.closePopover }
-					position={ 'bottom left' }
-					context={ this.refs && this.refs.setVisibility }
-				>
-					<div className="editor-visibility__dialog">
-						<FormFieldset className="editor-fieldset">
-							<FormLegend className="editor-fieldset__legend">
-								{ this.translate( 'Post Visibility' ) }
-								<Gridicon
-									icon="info-outline"
-									size={ 18 }
-									className={ classNames( 'editor-visibility__dialog-info', { is_active: this.state.showVisibilityInfotips } ) }
-									onClick={ this.toggleVisibilityInfotips }
-								/>
-							</FormLegend>
-							<FormLabel>
-								<FormRadio
-									name="site-visibility"
-									value="public"
-									onChange={ this.updateVisibility }
-									checked={ 'public' === visibility }
-								/>
-								<span>
-									{
-										this.props.isPrivateSite
-										? this.translate( 'Visible for members of the site', { context: 'Editor: Radio label to set post visibility' } )
-										: this.translate( 'Public', { context: 'Editor: Radio label to set post visible to public' } )
-									}
-								</span>
-							</FormLabel>
-							{ this.renderVisibilityTip( 'public' ) }
-
-							<FormLabel>
-								<FormRadio
-									name="site-visibility"
-									value="private"
-									onChange={ this.onSetToPrivate }
-									checked={ 'private' === visibility }
-								/>
-								<span>{ this.translate( 'Private', { context: 'Editor: Radio label to set post to private' } ) }</span>
-							</FormLabel>
-							{ this.renderVisibilityTip( 'private' ) }
-
-							<FormLabel>
-								<FormRadio
-									name="site-visibility"
-									value="password"
-									onChange={ this.updateVisibility }
-									checked={ 'password' === visibility }
-								/>
-								<span>{ this.translate( 'Password Protected', { context: 'Editor: Radio label to set post to password protected' } ) }</span>
-							</FormLabel>
-							{ this.renderVisibilityTip( 'password' ) }
-							{ visibility === 'password' ? this.renderPasswordInput() : null }
-						</FormFieldset>
-					</div>
-				</Popover>
-			</Button>
+				<div className={ classes }>
+					{ this.translate( 'Visibility' ) }
+					<Button
+						compact
+						borderless
+						onClick={ this.togglePopover }
+						ref="setVisibility"
+					>
+					<Gridicon icon={ icons[ visibility ] || 'visible' } /> { visibility }
+					<Popover
+						className="editor-visibility__popover"
+						isVisible={ this.state.showPopover }
+						onClose={ this.closePopover }
+						position={ 'bottom left' }
+						context={ this.refs && this.refs.setVisibility }
+					>
+						<div className="editor-visibility__dialog">
+							<FormFieldset className="editor-fieldset">
+								<FormLegend className="editor-fieldset__legend">
+									{ this.translate( 'Post Visibility' ) }
+									<Gridicon
+										icon="info-outline"
+										size={ 18 }
+										className={ classNames( 'editor-visibility__dialog-info', { is_active: this.state.showVisibilityInfotips } ) }
+										onClick={ this.toggleVisibilityInfotips }
+									/>
+								</FormLegend>
+								<FormLabel>
+									<FormRadio
+										name="site-visibility"
+										value="public"
+										onChange={ this.updateVisibility }
+										checked={ 'public' === visibility }
+									/>
+									<span>
+										{
+											this.props.isPrivateSite
+											? this.translate( 'Visible for members of the site', { context: 'Editor: Radio label to set post visibility' } )
+											: this.translate( 'Public', { context: 'Editor: Radio label to set post visible to public' } )
+										}
+									</span>
+								</FormLabel>
+								{ this.renderVisibilityTip( 'public' ) }
+
+								<FormLabel>
+									<FormRadio
+										name="site-visibility"
+										value="private"
+										onChange={ this.onSetToPrivate }
+										checked={ 'private' === visibility }
+									/>
+									<span>{ this.translate( 'Private', { context: 'Editor: Radio label to set post to private' } ) }</span>
+								</FormLabel>
+								{ this.renderVisibilityTip( 'private' ) }
+								<FormLabel>
+									<FormRadio
+										name="site-visibility"
+										value="password"
+										onChange={ this.updateVisibility }
+										checked={ 'password' === visibility }
+									/>
+									<span>{ this.translate( 'Password Protected', { context: 'Editor: Radio label to set post to password protected' } ) }</span>
+								</FormLabel>
+								{ this.renderVisibilityTip( 'password' ) }
+								{ visibility === 'password' ? this.renderPasswordInput() : null }
+							</FormFieldset>
+						</div>
+					</Popover>
+				</Button>
+			</div>
 		);
 	}
 
diff --git a/client/post-editor/editor-visibility/style.scss b/client/post-editor/editor-visibility/style.scss
index 0e248f8dcb9476..3c5601a15b00dd 100644
--- a/client/post-editor/editor-visibility/style.scss
+++ b/client/post-editor/editor-visibility/style.scss
@@ -1,4 +1,12 @@
-.editor-visibility.button {
+.editor-visibility {
+	display: flex;
+	font-size: 13px;
+	justify-content: space-between;
+	align-items: center;
+	margin: 8px 0 0;
+}
+
+.editor-visibility .button {
 	&.is-dialog-open,
 	&.is-touch,
 	&:hover {
@@ -6,6 +14,10 @@
 			color: darken( $gray, 10% );
 		}
 	}
+
+	.gridicon {
+		margin-right: 4px;
+	}
 }
 
 .editor-visibility__dialog{
diff --git a/client/post-editor/editor-word-count/style.scss b/client/post-editor/editor-word-count/style.scss
index ef7c1216fc20c2..2149893c8fd754 100644
--- a/client/post-editor/editor-word-count/style.scss
+++ b/client/post-editor/editor-word-count/style.scss
@@ -10,6 +10,10 @@
 	color: lighten( $gray, 10% );
 	pointer-events: none;
 
+	.focus-sidebar & {
+		right: 272px;
+	}
+
 	@include breakpoint( ">960px" ) {
 		padding: 16px;
 	}
diff --git a/client/post-editor/post-editor.jsx b/client/post-editor/post-editor.jsx
index 79bd76c7fef153..ec9c47815c4fae 100644
--- a/client/post-editor/post-editor.jsx
+++ b/client/post-editor/post-editor.jsx
@@ -8,6 +8,7 @@ import { debounce, throttle, get } from 'lodash';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { localize } from 'i18n-calypso';
+import classNames from 'classnames';
 
 /**
  * Internal dependencies
@@ -23,7 +24,6 @@ const actions = require( 'lib/posts/actions' ),
 	EditorWordCount = require( 'post-editor/editor-word-count' ),
 	SegmentedControl = require( 'components/segmented-control' ),
 	SegmentedControlItem = require( 'components/segmented-control/item' ),
-	EditorMobileNavigation = require( 'post-editor/editor-mobile-navigation' ),
 	observe = require( 'lib/mixins/data-observe' ),
 	InvalidURLDialog = require( 'post-editor/invalid-url-dialog' ),
 	RestorePostDialog = require( 'post-editor/restore-post-dialog' ),
@@ -35,10 +35,11 @@ const actions = require( 'lib/posts/actions' ),
 
 import { getSelectedSiteId } from 'state/ui/selectors';
 import { setEditorLastDraft, resetEditorLastDraft } from 'state/ui/editor/last-draft/actions';
-import { isEditorDraftsVisible, getEditorPostId, getEditorPath } from 'state/ui/editor/selectors';
-import { toggleEditorDraftsVisible } from 'state/ui/editor/actions';
+import { getEditorPostId, getEditorPath } from 'state/ui/editor/selectors';
 import { receivePost, savePostSuccess } from 'state/posts/actions';
 import { getPostEdits, isEditedPostDirty } from 'state/posts/selectors';
+import { getCurrentUserId } from 'state/current-user/selectors';
+import { hasBrokenSiteUserConnection } from 'state/selectors';
 import EditorDocumentHead from 'post-editor/editor-document-head';
 import EditorPostTypeUnsupported from 'post-editor/editor-post-type-unsupported';
 import EditorForbidden from 'post-editor/editor-forbidden';
@@ -47,26 +48,32 @@ import { savePreference } from 'state/preferences/actions';
 import { getPreference } from 'state/preferences/selectors';
 import QueryPreferences from 'components/data/query-preferences';
 import { setLayoutFocus } from 'state/ui/layout-focus/actions';
+import { getCurrentLayoutFocus } from 'state/ui/layout-focus/selectors';
 import { protectForm } from 'lib/protect-form';
 import EditorSidebar from 'post-editor/editor-sidebar';
 import Site from 'blocks/site';
 import StatusLabel from 'post-editor/editor-status-label';
 import { editedPostHasContent } from 'state/selectors';
+import EditorGroundControl from 'post-editor/editor-ground-control';
+import { isMobile } from 'lib/viewport';
 
 export const PostEditor = React.createClass( {
 	propTypes: {
 		siteId: React.PropTypes.number,
 		preferences: React.PropTypes.object,
 		setEditorModePreference: React.PropTypes.func,
+		setEditorSidebar: React.PropTypes.func,
 		setLayoutFocus: React.PropTypes.func.isRequired,
 		editorModePreference: React.PropTypes.string,
+		editorSidebarPreference: React.PropTypes.string,
 		sites: React.PropTypes.object,
 		user: React.PropTypes.object,
 		userUtils: React.PropTypes.object,
 		editPath: React.PropTypes.string,
 		markChanged: React.PropTypes.func.isRequired,
 		markSaved: React.PropTypes.func.isRequired,
-		translate: React.PropTypes.func.isRequired
+		translate: React.PropTypes.func.isRequired,
+		hasBrokenPublicizeConnection: React.PropTypes.bool,
 	},
 
 	_previewWindow: null,
@@ -110,6 +117,7 @@ export const PostEditor = React.createClass( {
 		this.debouncedAutosave = debounce( this.throttledAutosave, 3000 );
 		this.switchEditorVisualMode = this.switchEditorMode.bind( this, 'tinymce' );
 		this.switchEditorHtmlMode = this.switchEditorMode.bind( this, 'html' );
+		this.useDefaultSidebarFocus();
 
 		this.setState( {
 			isEditorInitialized: false
@@ -147,7 +155,6 @@ export const PostEditor = React.createClass( {
 		this.debouncedSaveRawContent.cancel();
 		this._previewWindow = null;
 		clearTimeout( this._switchEditorTimeout );
-		this.hideDrafts();
 	},
 
 	componentWillReceiveProps: function( nextProps ) {
@@ -156,20 +163,35 @@ export const PostEditor = React.createClass( {
 			// make sure the history entry has the post ID in it, but don't dispatch
 			page.replace( nextProps.editPath, null, false, false );
 		}
+
+		if ( nextProps.siteId !== siteId ||
+			( nextProps.siteId === siteId && nextProps.postId !== postId ) ) {
+			this.useDefaultSidebarFocus( nextProps );
+		}
+	},
+
+	useDefaultSidebarFocus( nextProps ) {
+		const props = nextProps || this.props;
+		if ( ! isMobile() && ( props.editorSidebarPreference === 'open' || props.hasBrokenPublicizeConnection ) ) {
+			this.props.setLayoutFocus( 'sidebar' );
+		}
 	},
 
 	hideNotice: function() {
 		this.setState( { notice: null } );
 	},
 
-	toggleSidebar: function() {
-		this.hideDrafts();
-		this.props.setLayoutFocus( 'content' );
+	getLayout() {
+		return this.props.setLayoutFocus( 'content' );
 	},
 
-	hideDrafts() {
-		if ( this.props.showDrafts ) {
-			this.props.toggleDrafts();
+	toggleSidebar: function() {
+		if ( this.props.layoutFocus === 'sidebar' ) {
+			this.props.setEditorSidebar( 'closed' );
+			this.props.setLayoutFocus( 'content' );
+		} else {
+			this.props.setEditorSidebar( 'open' );
+			this.props.setLayoutFocus( 'sidebar' );
 		}
 	},
 
@@ -187,29 +209,44 @@ export const PostEditor = React.createClass( {
 			isTrashed = this.state.post.status === 'trash';
 			hasAutosave = get( this.state.post.meta, [ 'data', 'autosave' ] );
 		}
+		const classes = classNames( 'post-editor', {
+			'is-loading': ! this.state.isEditorInitialized
+		} );
 		return (
-			<div className="post-editor">
+			<div className={ classes }>
 				<QueryPreferences />
 				<EditorDocumentHead />
 				<EditorPostTypeUnsupported />
 				<EditorForbidden />
 				<div className="post-editor__inner">
-					<EditorMobileNavigation
-						site={ site }
+					<EditorGroundControl
+						setPostDate={ this.setPostDate }
+						hasContent={ this.state.hasContent }
+						isDirty={ this.state.isDirty || this.props.dirty }
+						isSaveBlocked={ this.state.isSaveBlocked }
+						isPublishing={ this.state.isPublishing }
+						isSaving={ this.state.isSaving }
+						onPreview={ this.onPreview }
+						onPublish={ this.onPublish }
+						onSave={ this.onSave }
+						onSaveDraft={ this.props.onSaveDraft }
 						post={ this.state.post }
 						savedPost={ this.state.savedPost }
-						onSave={ this.onSave }
-						onPublish={ this.onPublish }
-						isPublishing={ this.state.isPublishing }
-						isSaveBlocked={ this.state.isSaveBlocked }
-						hasContent={ this.state.hasContent || this.props.hasContent }
-						onClose={ this.onClose }
-						onTabChange={ this.hideNotice } />
+						site={ site }
+						user={ this.props.user }
+						userUtils={ this.props.userUtils }
+						toggleSidebar={ this.toggleSidebar }
+						type={ this.props.type }
+						onMoreInfoAboutEmailVerify={ this.onMoreInfoAboutEmailVerify }
+						allPostsUrl={ this.getAllPostsUrl() }
+					/>
 					<div className="post-editor__content">
 						<div className="editor">
+							<EditorNotice
+								{ ...this.state.notice }
+								onDismissClick={ this.hideNotice } />
 							<EditorActionBar
 								isNew={ this.state.isNew }
-								onTrashingPost={ this.onTrashingPost }
 								onPrivatePublish={ this.onPublish }
 								post={ this.state.post }
 								savedPost={ this.state.savedPost }
@@ -218,6 +255,7 @@ export const PostEditor = React.createClass( {
 							/>
 							<div className="post-editor__site">
 								<Site
+									compact
 									site={ site }
 									indicator={ false }
 									homeLink={ true }
@@ -228,9 +266,6 @@ export const PostEditor = React.createClass( {
 									type={ this.props.type }
 								/>
 							</div>
-							<EditorNotice
-								{ ...this.state.notice }
-								onDismissClick={ this.hideNotice } />
 							<FeaturedImage
 								site={ site }
 								post={ this.state.post }
@@ -279,28 +314,15 @@ export const PostEditor = React.createClass( {
 						<EditorWordCount />
 					</div>
 					<EditorSidebar
-						allPostsUrl={ this.getAllPostsUrl() }
-						sites={ this.props.sites }
-						onTitleClick={ this.toggleSidebar }
+						toggleSidebar={ this.toggleSidebar }
 						savedPost={ this.state.savedPost }
 						post={ this.state.post }
 						isNew={ this.state.isNew }
-						isDirty={ this.state.isDirty || this.props.dirty }
-						isSaveBlocked={ this.state.isSaveBlocked }
-						hasContent={ this.state.hasContent || this.props.hasContent }
-						isSaving={ this.state.isSaving }
-						isPublishing={ this.state.isPublishing }
-						onSave={ this.onSave }
-						onPreview={ this.onPreview }
 						onPublish={ this.onPublish }
 						onTrashingPost={ this.onTrashingPost }
 						site={ site }
-						user={ this.props.user }
-						userUtils={ this.props.userUtils }
 						type={ this.props.type }
-						showDrafts={ this.props.showDrafts }
-						onMoreInfoAboutEmailVerify={ this.onMoreInfoAboutEmailVerify }
-						warnPublishDateChange={ this.warnPublishDateChange }
+						setPostDate={ this.setPostDate }
 						/>
 					{ this.iframePreviewEnabled() ?
 						<EditorPreview
@@ -518,7 +540,6 @@ export const PostEditor = React.createClass( {
 	},
 
 	onSaveTrashed: function( status, callback ) {
-		this.hideDrafts();
 		this.onSave( status, callback );
 	},
 
@@ -654,7 +675,6 @@ export const PostEditor = React.createClass( {
 
 	onPublishFailure: function( error ) {
 		this.onSaveFailure( error, 'publishFailure' );
-		this.toggleSidebar();
 	},
 
 	onPublishSuccess: function() {
@@ -670,7 +690,6 @@ export const PostEditor = React.createClass( {
 		}
 
 		this.onSaveSuccess( message, ( message === 'published' ? 'view' : 'preview' ), savedPost.URL );
-		this.toggleSidebar();
 	},
 
 	onSaveFailure: function( error, message ) {
@@ -687,9 +706,34 @@ export const PostEditor = React.createClass( {
 		window.scrollTo( 0, 0 );
 	},
 
+	setPostDate: function( date ) {
+		const dateValue = date ? date.format() : null;
+		// TODO: REDUX - remove flux actions when whole post-editor is reduxified
+		actions.edit( { date: dateValue } );
+		this.checkForDateChange( dateValue );
+	},
+
+	checkForDateChange( date ) {
+		const { savedPost } = this.state;
+
+		if ( ! savedPost ) {
+			return;
+		}
+
+		const currentDate = this.moment( date );
+		const ModifiedDate = this.moment( savedPost.date );
+		const diff = !! currentDate.diff( ModifiedDate );
+
+		if ( savedPost.type === 'post' && utils.isPublished( savedPost ) && diff ) {
+			this.warnPublishDateChange();
+		} else {
+			this.warnPublishDateChange( { clearWarning: true } );
+		}
+	},
+
 	// when a post that is published, modifies its date, this updates the post url
 	// we should warn users of this case
-	warnPublishDateChange( { clearWarning = false } = {} )  {
+	warnPublishDateChange( { clearWarning = false } = {} ) {
 		if ( clearWarning ) {
 			if ( get( this.state, 'notice.message' ) === 'warnPublishDateChange' ) {
 				this.hideNotice();
@@ -784,26 +828,29 @@ export default connect(
 	( state ) => {
 		const siteId = getSelectedSiteId( state );
 		const postId = getEditorPostId( state );
+		const userId = getCurrentUserId( state );
 
 		return {
 			siteId,
 			postId,
-			showDrafts: isEditorDraftsVisible( state ),
 			editorModePreference: getPreference( state, 'editor-mode' ),
+			editorSidebarPreference: getPreference( state, 'editor-sidebar' ) || 'open',
 			editPath: getEditorPath( state, siteId, postId ),
 			edits: getPostEdits( state, siteId, postId ),
 			dirty: isEditedPostDirty( state, siteId, postId ),
-			hasContent: editedPostHasContent( state, siteId, postId )
+			hasContent: editedPostHasContent( state, siteId, postId ),
+			layoutFocus: getCurrentLayoutFocus( state ),
+			hasBrokenPublicizeConnection: hasBrokenSiteUserConnection( state, siteId, userId ),
 		};
 	},
 	( dispatch ) => {
 		return bindActionCreators( {
-			toggleDrafts: toggleEditorDraftsVisible,
 			setEditorLastDraft,
 			resetEditorLastDraft,
 			receivePost,
 			savePostSuccess,
 			setEditorModePreference: savePreference.bind( null, 'editor-mode' ),
+			setEditorSidebar: savePreference.bind( null, 'editor-sidebar' ),
 			setLayoutFocus,
 		}, dispatch );
 	},
diff --git a/client/post-editor/style.scss b/client/post-editor/style.scss
index 20b4d45d21d23b..3a4b895f698b17 100644
--- a/client/post-editor/style.scss
+++ b/client/post-editor/style.scss
@@ -18,10 +18,18 @@
 
 .is-group-editor .layout__content {
 	padding: 47px 0 0;
+	overflow: inherit;
 }
 
 .post-editor__inner {
 	position: relative;
+	top: 47px;
+
+	@include breakpoint( "<660px" ) {
+		overflow-x: hidden;
+		margin-bottom: 47px;
+		border-bottom: 1px solid lighten( $gray, 20 );
+	}
 }
 
 .post-editor__content {
@@ -43,15 +51,83 @@
 }
 
 .post-editor__content {
-	@include breakpoint( ">660px" ) {
-		margin-left: ( $sidebar-width-min + 1 );
+	margin: 0 auto;					// born centered, so when width collapses for sidebar anim it doesn't move
+	left: 0;
+	@include breakpoint( ">960px" ) {
+		animation: closedsidebar 0.15s cubic-bezier(0.075, 0.82, 0.165, 1) normal 1 forwards;
+	}
+	@include breakpoint( "<960px" ) {
+		animation: closedsidebar-min 0.15s cubic-bezier(0.075, 0.82, 0.165, 1) normal 1 forwards;
 	}
 
-	@include breakpoint( ">960px" ) {
-		margin-left: ( $sidebar-width-max + 1 );
+	.focus-sidebar & {
+		@include breakpoint( ">960px" ) {
+			animation: opensidebar 0.15s cubic-bezier(0.075, 0.82, 0.165, 1) normal 1 forwards;
+			width: calc( 100% - ( #{ $sidebar-width-max } ) );		// subtract sidebar width
+		}
+
+		@include breakpoint( "<960px" ) {
+			animation: opensidebar-min 0.15s cubic-bezier(0.075, 0.82, 0.165, 1) normal 1 forwards;
+			width: calc( 100% - ( #{ $sidebar-width-min } ) );		// subtract sidebar width
+		}
 	}
 }
 
+@keyframes opensidebar {
+	0% {
+		transform: translateX( 0 );
+	}
+	99.9% {
+		left: 0;
+		transform: translateX( -#{ $sidebar-width-max / 2 } );
+	}
+	100% {
+		left: -#{ $sidebar-width-max / 2 };
+		transform: none;
+	}
+}
+
+@keyframes closedsidebar {
+	0% {
+		transform: translateX( -#{ $sidebar-width-max / 2 } );
+	}
+	99.9% {
+		transform: translateX( 0 );
+	}
+	100% {
+		left: 0;
+		transform: none;
+	}
+}
+
+@keyframes opensidebar-min {
+	0% {
+		transform: translateX( 0 );
+	}
+	99.9% {
+		left: 0;
+		transform: translateX( -#{ $sidebar-width-min / 2 } );
+	}
+	100% {
+		left: -#{ $sidebar-width-min / 2 };
+		transform: none;
+	}
+}
+
+@keyframes closedsidebar-min {
+	0% {
+		transform: translateX( -#{ $sidebar-width-min / 2 } );
+	}
+	99.9% {
+		transform: translateX( 0 );
+	}
+	100% {
+		left: 0;
+		transform: none;
+	}
+}
+
+
 .post-editor__site {
 	display:  flex;
 	background: lighten( $gray, 30% );
@@ -90,6 +166,12 @@
 	}
 }
 
+.focus-content .editor__header {
+	@include breakpoint( ">660px" ) {
+		width: 700px;
+	}
+}
+
 .editor__header,
 .editor .mce-edit-area {
 	padding: 0 16px;
@@ -99,10 +181,6 @@
 	}
 }
 
-.post-editor .drafts-button {
-	padding: 3px 8px;
-}
-
 .post-editor .draft .post-relative-time-status {
 	display: none;
 }
@@ -112,6 +190,12 @@
 	position: relative;
 }
 
+.editor .editor-notice .notice {
+	@include breakpoint( ">660px" ) {
+		margin: 0;
+	}
+}
+
 .editor .tinymce {
 	min-height: 100vh;
 	resize: none;
diff --git a/client/state/action-types.js b/client/state/action-types.js
index e1c72275ebeda7..cfb4ab84190941 100644
--- a/client/state/action-types.js
+++ b/client/state/action-types.js
@@ -85,7 +85,6 @@ export const EDITOR_CONTACT_FORM_SETTINGS_UPDATE = 'EDITOR_CONTACT_FORM_SETTINGS
 export const EDITOR_LAST_DRAFT_SET = 'EDITOR_LAST_DRAFT_SET';
 export const EDITOR_MEDIA_EDIT_ITEM_SET = 'EDITOR_MEDIA_EDIT_ITEM_SET';
 export const EDITOR_PASTE_EVENT = 'EDITOR_PASTE_EVENT';
-export const EDITOR_SHOW_DRAFTS_TOGGLE = 'EDITOR_SHOW_DRAFTS_TOGGLE';
 export const EDITOR_START = 'EDITOR_START';
 export const EDITOR_STOP = 'EDITOR_STOP';
 export const EXPORT_ADVANCED_SETTINGS_FETCH = 'EXPORT_ADVANCED_SETTINGS_FETCH';
diff --git a/client/state/ui/editor/actions.js b/client/state/ui/editor/actions.js
index c2cea794124c8b..ca49d01311f73d 100644
--- a/client/state/ui/editor/actions.js
+++ b/client/state/ui/editor/actions.js
@@ -3,7 +3,6 @@
  */
 import {
 	EDITOR_PASTE_EVENT,
-	EDITOR_SHOW_DRAFTS_TOGGLE,
 	EDITOR_START,
 	EDITOR_STOP,
 } from 'state/action-types';
@@ -55,18 +54,6 @@ export function stopEditingPost( siteId, postId ) {
 	};
 }
 
-/**
- * Returns an action object to be used in signalling that the editor draft
- * drawer visibility state should be toggled.
- *
- * @return {Object} Action object
- */
-export function toggleEditorDraftsVisible() {
-	return {
-		type: EDITOR_SHOW_DRAFTS_TOGGLE
-	};
-}
-
 /**
  * Returns an action object to be used in signalling that the user has pasted
  * some content from source.
diff --git a/client/state/ui/editor/reducer.js b/client/state/ui/editor/reducer.js
index 992a21ba9cc220..13d52a4d2e4f79 100644
--- a/client/state/ui/editor/reducer.js
+++ b/client/state/ui/editor/reducer.js
@@ -6,7 +6,7 @@ import { combineReducers } from 'redux';
 /**
  * Internal dependencies
  */
-import { EDITOR_SHOW_DRAFTS_TOGGLE, EDITOR_START, POST_SAVE_SUCCESS } from 'state/action-types';
+import { EDITOR_START, POST_SAVE_SUCCESS } from 'state/action-types';
 import imageEditor from './image-editor/reducer';
 import lastDraft from './last-draft/reducer';
 import contactForm from './contact-form/reducer';
@@ -30,26 +30,8 @@ export function postId( state = null, action ) {
 	return state;
 }
 
-/**
- * Returns the updated editor draft drawer visibility state after an action
- * has been dispatched.
- *
- * @param  {Object} state  Current state
- * @param  {Object} action Action payload
- * @return {Object}        Updated state
- */
-export function showDrafts( state = false, action ) {
-	switch ( action.type ) {
-		case EDITOR_SHOW_DRAFTS_TOGGLE:
-			return ! state;
-	}
-
-	return state;
-}
-
 export default combineReducers( {
 	postId,
-	showDrafts,
 	imageEditor,
 	lastDraft,
 	contactForm
diff --git a/client/state/ui/editor/selectors.js b/client/state/ui/editor/selectors.js
index d3183ecc4c00e6..8e1a811c3564f0 100644
--- a/client/state/ui/editor/selectors.js
+++ b/client/state/ui/editor/selectors.js
@@ -29,16 +29,6 @@ export function isEditorNewPost( state ) {
 	return ! getEditorPostId( state );
 }
 
-/**
- * Returns whether the editor drafts drawer is visible.
- *
- * @param  {Object}  state Global state tree
- * @return {Boolean}       Whether drafts are visible
- */
-export function isEditorDraftsVisible( state ) {
-	return state.ui.editor.showDrafts;
-}
-
 /**
  * Returns the editor new post URL path for the given site ID and type.
  *
diff --git a/client/state/ui/editor/test/actions.js b/client/state/ui/editor/test/actions.js
index f5b0adef8bd053..1dd2ef3c4e7e11 100644
--- a/client/state/ui/editor/test/actions.js
+++ b/client/state/ui/editor/test/actions.js
@@ -9,13 +9,11 @@ import { forEach } from 'lodash';
  */
 import {
 	ANALYTICS_STAT_BUMP,
-	EDITOR_SHOW_DRAFTS_TOGGLE,
 	EDITOR_START,
 	EDITOR_STOP,
 } from 'state/action-types';
 import {
 	MODAL_VIEW_STAT_MAPPING,
-	toggleEditorDraftsVisible,
 	setEditorMediaModalView,
 	startEditingPost,
 	stopEditingPost,
@@ -48,16 +46,6 @@ describe( 'actions', () => {
 		} );
 	} );
 
-	describe( '#toggleEditorDraftsVisible()', () => {
-		it( 'should return an action object', () => {
-			const action = toggleEditorDraftsVisible();
-
-			expect( action ).to.eql( {
-				type: EDITOR_SHOW_DRAFTS_TOGGLE
-			} );
-		} );
-	} );
-
 	describe( 'setEditorMediaModalView()', () => {
 		it( 'should dispatch setMediaModalView with analytics', () => {
 			forEach( MODAL_VIEW_STAT_MAPPING, ( stat, view ) => {
diff --git a/client/state/ui/editor/test/reducer.js b/client/state/ui/editor/test/reducer.js
index 6fcfc7b2abcd32..ee398762fab2d1 100644
--- a/client/state/ui/editor/test/reducer.js
+++ b/client/state/ui/editor/test/reducer.js
@@ -6,14 +6,13 @@ import { expect } from 'chai';
 /**
  * Internal dependencies
  */
-import { EDITOR_SHOW_DRAFTS_TOGGLE, EDITOR_START, POST_SAVE_SUCCESS } from 'state/action-types';
-import reducer, { postId, showDrafts } from '../reducer';
+import { EDITOR_START, POST_SAVE_SUCCESS } from 'state/action-types';
+import reducer, { postId } from '../reducer';
 
 describe( 'reducer', () => {
 	it( 'should export expected reducer keys', () => {
 		expect( reducer( undefined, {} ) ).to.have.keys( [
 			'postId',
-			'showDrafts',
 			'lastDraft',
 			'contactForm',
 			'imageEditor'
@@ -65,20 +64,4 @@ describe( 'reducer', () => {
 			expect( state ).to.equal( 10 );
 		} );
 	} );
-
-	describe( '#showDrafts()', () => {
-		it( 'should default to false', () => {
-			const state = showDrafts( undefined, {} );
-
-			expect( state ).to.be.false;
-		} );
-
-		it( 'should track toggled state', () => {
-			const state = showDrafts( undefined, {
-				type: EDITOR_SHOW_DRAFTS_TOGGLE
-			} );
-
-			expect( state ).to.be.true;
-		} );
-	} );
 } );
diff --git a/client/state/ui/editor/test/selectors.js b/client/state/ui/editor/test/selectors.js
index af76649dc08e7f..2521b427479e07 100644
--- a/client/state/ui/editor/test/selectors.js
+++ b/client/state/ui/editor/test/selectors.js
@@ -10,7 +10,6 @@ import PostQueryManager from 'lib/query-manager/post';
 import {
 	getEditorPostId,
 	isEditorNewPost,
-	isEditorDraftsVisible,
 	getEditorNewPostPath,
 	getEditorPath
 } from '../selectors';
@@ -56,20 +55,6 @@ describe( 'selectors', () => {
 		} );
 	} );
 
-	describe( '#isEditorDraftsVisible()', () => {
-		it( 'should return the current drafts visible state', () => {
-			const showDrafts = isEditorDraftsVisible( {
-				ui: {
-					editor: {
-						showDrafts: true
-					}
-				}
-			} );
-
-			expect( showDrafts ).to.be.true;
-		} );
-	} );
-
 	describe( 'getEditorNewPostPath()', () => {
 		it( 'should return the post path with the site ID if site unknown', () => {
 			const path = getEditorNewPostPath( {