diff --git a/css/customize-snapshots.css b/css/customize-snapshots.css
index 53c8ee3a..ccdb2469 100644
--- a/css/customize-snapshots.css
+++ b/css/customize-snapshots.css
@@ -1,10 +1,10 @@
-#snapshot-preview-link, #snapshot-edit-link {
+#snapshot-preview-link, #snapshot-toggle-button {
 	float: right;
 	margin-top: 13px;
 	margin-right: 4px;
 	color: #656a6f;
 }
-#snapshot-edit-link{
+#snapshot-toggle-button{
 	display: block;
 }
 
@@ -53,4 +53,70 @@
 		margin-top: 6px;
 		margin-right: 6px;
 	}
+}
+
+#customize-snapshot-control select,
+#customize-snapshot-control input[type="text"] {
+	min-width: 10%;
+	width: auto;
+}
+
+#customize-snapshot-control{
+	padding: 5px;
+}
+
+#customize-snapshot-control input[type="text"].error {
+	border-color: #dc3232 !important;
+	-webkit-box-shadow: 0 0 2px rgba( 204, 0, 0, 0.8 );
+	box-shadow: 0 0 2px rgba( 204, 0, 0, 0.8 );
+}
+
+#customize-schedule-box{
+	background: #fff !important;
+	margin-bottom: 10px;
+	padding-bottom: 10px;
+}
+
+#customize-schedule-box .accordion-section-title{
+	background: #fff;
+	color: #555;
+	border-left: none;
+	border-right: none;
+	border-bottom: none;
+	cursor: default;
+}
+
+#customize-schedule-box .accordion-section-title:after{
+	z-index: -1;
+}
+#customize-schedule-box a{
+	position: absolute;
+	top: 4px;
+	right: 1px;
+	width: 20px;
+	height: 20px;
+	cursor: pointer;
+	-webkit-box-shadow: none;
+	box-shadow: none;
+	-webkit-appearance: none;
+	background: transparent;
+	color: #555;
+	border: none;
+	padding: 10px;
+}
+
+#customize-schedule-box span{
+	font-size: 13px;
+	line-height: 24px;
+}
+#customize-schedule-box .customize-snapshot-control{
+	padding: 5px;
+}
+#customize-schedule-box .accordion-section-title{
+	padding: 10px;
+}
+.in-sub-panel #customize-schedule-box {
+	left: -100%;
+	width: 100%;
+	position: relative;
 }
\ No newline at end of file
diff --git a/js/customize-snapshots.js b/js/customize-snapshots.js
index 946b2430..a0fed96b 100644
--- a/js/customize-snapshots.js
+++ b/js/customize-snapshots.js
@@ -159,8 +159,9 @@
 	component.addButtons = function() {
 		var header = $( '#customize-header-actions' ),
 			publishButton = header.find( '#save' ),
-			snapshotEditLinkTemplate = wp.template( 'snapshot-edit-link' ),
-			snapshotButton, submitButton, data, setPreviewLinkHref, snapshotEditLinkEl;
+			snapshotDropDownToggleTemplate = wp.template( 'snapshot-toggle-button' ),
+			snapshotScheduleBoxTemplate = wp.template( 'snapshot-schedule-accordion' ),
+			snapshotScheduleBox, snapshotButton, submitButton, data, setPreviewLinkHref, snapshotDropDownToggle, snapshotEditLink;
 
 		// Save/update button.
 		snapshotButton = wp.template( 'snapshot-save' );
@@ -174,19 +175,34 @@
 		snapshotButton.prop( 'disabled', true );
 		snapshotButton.insertAfter( publishButton );
 
-		snapshotEditLinkEl = $( $.trim( snapshotEditLinkTemplate( component.data ) ) );
-		snapshotEditLinkEl.insertAfter( snapshotButton );
+		snapshotDropDownToggle = $( $.trim( snapshotDropDownToggleTemplate( {} ) ) );
+		snapshotEditLink = snapshotDropDownToggle.find( 'a' );
+
+		snapshotDropDownToggle.click( function( e ) {
+			var customizeInfo = $( '#customize-info' );
+			if ( ! snapshotScheduleBox ) {
+				snapshotScheduleBox = $( $.trim( snapshotScheduleBoxTemplate( component.data ) ) );
+				snapshotScheduleBox.insertBefore( customizeInfo );
+			} else {
+
+				// Todo need to update in case of dynamic section.
+				snapshotScheduleBox.slideToggle();
+			}
+			e.preventDefault();
+		} );
+
+		snapshotDropDownToggle.insertAfter( snapshotButton );
 		if ( ! component.data.editLink ) {
-			snapshotEditLinkEl.hide();
+			snapshotDropDownToggle.hide();
 		}
 		api.state.bind( 'change', function() {
-			snapshotEditLinkEl.toggle( api.state( 'snapshot-saved' ).get() && api.state( 'snapshot-exists' ).get() );
+			snapshotDropDownToggle.toggle( api.state( 'snapshot-saved' ).get() && api.state( 'snapshot-exists' ).get() );
 		} );
 
 		api.state( 'snapshot-saved' ).bind( function( saved ) {
 			snapshotButton.prop( 'disabled', saved );
 			if ( saved ) {
-				snapshotEditLinkEl.attr( 'href', component.data.editLink );
+				snapshotEditLink.attr( 'href', component.data.editLink );
 			}
 		} );
 
@@ -205,7 +221,7 @@
 				buttonText = component.data.i18n.updateButton;
 				permsMsg = component.data.i18n.permsMsg.update;
 				if ( component.data.editLink ) {
-					snapshotEditLinkEl.attr( 'href', component.data.editLink );
+					snapshotEditLink.attr( 'href', component.data.editLink );
 				}
 			} else {
 				buttonText = component.data.i18n.saveButton;
diff --git a/php/class-customize-snapshot-manager.php b/php/class-customize-snapshot-manager.php
index b8bd4ebb..ab29e932 100644
--- a/php/class-customize-snapshot-manager.php
+++ b/php/class-customize-snapshot-manager.php
@@ -1058,6 +1058,7 @@ public function replace_customize_link( $wp_admin_bar ) {
 	 * Underscore (JS) templates for dialog windows.
 	 */
 	public function render_templates() {
+		$data = $this->data_json();
 		?>
 		<script type="text/html" id="tmpl-snapshot-preview-link">
 			<a href="#" target="frontend-preview" id="snapshot-preview-link" class="dashicons dashicons-welcome-view-site" title="<?php esc_attr_e( 'View on frontend', 'customize-snapshots' ) ?>">
@@ -1065,8 +1066,74 @@ public function render_templates() {
 			</a>
 		</script>
 
-		<script type="text/html" id="tmpl-snapshot-edit-link">
-			<a href="{{ data.editLink }}" id="snapshot-edit-link" class="dashicons dashicons-calendar-alt" title="<?php esc_attr_e( 'Edit Snapshot','customize-snapshots' ); ?>"></a>
+		<script type="text/html" id="tmpl-snapshot-toggle-button">
+			<a href="#" id="snapshot-toggle-button" class="dashicons dashicons-calendar-alt" title="<?php esc_attr_e( 'Schedule Snapshot','customize-snapshots' ); ?>"></a>
+		</script>
+
+		<script type="text/html" id="tmpl-snapshot-schedule-accordion">
+			<div id="customize-schedule-box" class="accordion-section">
+				<div class="accordion-section-title">
+					<span class="preview-notice"><strong class="panel-title site-title"><?php esc_html_e( 'Schedule Snapshot', 'customize-snapshots' ); ?></strong></span>
+					<a href={{ data.editLink }} class="dashicons dashicons-edit" aria-expanded="false"></a>
+				</div>
+				<div class="customize-snapshot-control">
+					<#
+						_.defaults( data, <?php echo wp_json_encode( $data ) ?> );
+						data.input_id_post_date = 'input-' + String( Math.random() );
+						data.input_id_post_date_gmt = 'input-' + String( Math.random() );
+						#>
+						<# _.each( data.date_inputs, function( width, type ) { #>
+							<# if ( 'month' === type  ) { #>
+								<select class="date-input {{ type }}">
+									<# _.each( data.month_choices, function( choice ) { #>
+										<# if ( _.isObject( choice ) && ! _.isUndefined( choice.text ) && ! _.isUndefined( choice.value ) ) {
+												text = choice.text;
+												value = choice.value;
+											} #>
+										<option value="{{ value }}">{{ text }}</option>
+									<# } ); #>
+								</select>
+							<# } else { #>
+								<input
+									type="text"
+									size="{{ width }}"
+									maxlength="{{ width }}"
+									autocomplete="off"
+									class="date-input {{ type }}"
+								/>
+									<# if ( 'year' === type ) { #>
+										&nbsp;@&nbsp;
+									<# } #>
+							<# } #>
+						<# }); #>
+						<input
+							id=""
+							type="hidden"
+							class="post-date"
+							<# if ( data.setting_property ) { #>
+								data-customize-setting-property-link="post_date"
+							<# } #>
+							/>
+						<input
+							id=""
+							type="hidden"
+							class="post-date-gmt"
+							value=""
+							<# if ( data.setting_property ) { #>
+								data-customize-setting-property-link="post_date_gmt"
+							<# } #>
+							/>
+						<input
+							id=""
+							type="hidden"
+							class="post-status"
+							value=""
+							<# if ( data.setting_property ) { #>
+								data-customize-setting-property-link="post_status"
+							<# } #>
+							/>
+				</div>
+			</div>
 		</script>
 
 		<script type="text/html" id="tmpl-snapshot-save">
@@ -1088,4 +1155,45 @@ public function render_templates() {
 		</script>
 		<?php
 	}
+
+	/**
+	 * Get the data to export to the client via JSON.
+	 *
+	 * @return array Array of parameters passed to the JavaScript.
+	 */
+	public function data_json() {
+		$exported['month_choices'] = $this->get_month_choices();
+		// Type / width pairs.
+		$exported['date_inputs'] = array(
+			'month' => null,
+			'day' => 2,
+			'year' => 4,
+			'hour' => 2,
+			'min' => 2,
+		);
+		return $exported;
+	}
+
+	/**
+	 * Generate options for the month Select.
+	 *
+	 * Based on touch_time().
+	 *
+	 * @see touch_time()
+	 *
+	 * @return array
+	 */
+	public function get_month_choices() {
+		global $wp_locale;
+		$months = array();
+		for ( $i = 1; $i < 13; $i = $i + 1 ) {
+			$month_number = zeroise( $i, 2 );
+			$month_text = $wp_locale->get_month_abbrev( $wp_locale->get_month( $i ) );
+
+			/* translators: 1: month number (01, 02, etc.), 2: month abbreviation */
+			$months[ $i ]['text'] = sprintf( __( '%1$s-%2$s', 'customize-snapshots' ), $month_number, $month_text );
+			$months[ $i ]['value'] = $month_number;
+		}
+		return $months;
+	}
 }