diff --git a/modules/search/instant-search/components/gridicon/index.jsx b/modules/search/instant-search/components/gridicon/index.jsx
index 4674aeb38da11..3e71d4e985f15 100644
--- a/modules/search/instant-search/components/gridicon/index.jsx
+++ b/modules/search/instant-search/components/gridicon/index.jsx
@@ -42,6 +42,8 @@ class Gridicon extends Component {
 				return <title>{ __( 'Is a product.' ) }</title>;
 			case 'gridicons-comment':
 				return <title>{ __( 'Matching comment.' ) }</title>;
+			case 'gridicons-cross':
+				return <title>{ __( 'Close search overlay' ) }</title>;
 			case 'gridicons-folder':
 				return <title>{ __( 'Category' ) }</title>;
 			case 'gridicons-image-multiple':
@@ -90,6 +92,12 @@ class Gridicon extends Component {
 						<path d="M3 6v9c0 1.105.895 2 2 2h9v5l5.325-3.804c1.05-.75 1.675-1.963 1.675-3.254V6c0-1.105-.895-2-2-2H5c-1.105 0-2 .895-2 2z" />
 					</g>
 				);
+			case 'gridicons-cross':
+				return (
+					<g>
+						<path d="M18.36 19.78L12 13.41l-6.36 6.37-1.42-1.42L10.59 12 4.22 5.64l1.42-1.42L12 10.59l6.36-6.36 1.41 1.41L13.41 12l6.36 6.36z" />
+					</g>
+				);
 			case 'gridicons-folder':
 				return (
 					<g>
diff --git a/modules/search/instant-search/components/overlay.jsx b/modules/search/instant-search/components/overlay.jsx
index 1d8a1eb64a36b..a01ecb412c4fe 100644
--- a/modules/search/instant-search/components/overlay.jsx
+++ b/modules/search/instant-search/components/overlay.jsx
@@ -5,7 +5,11 @@
  */
 import { h } from 'preact';
 import { useEffect } from 'preact/hooks';
-import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Gridicon from './gridicon';
 
 const closeOnEscapeKey = callback => event => {
 	event.key === 'Escape' && callback();
@@ -34,7 +38,7 @@ const Overlay = ( { children, closeColor, closeOverlay, colorTheme, isVisible, o
 				onClick={ closeOverlay }
 				style={ { background: closeColor } }
 			>
-				{ __( 'Close', 'jetpack' ) }
+				<Gridicon icon="cross" size="24" />
 			</button>
 			{ children }
 		</div>
diff --git a/modules/search/instant-search/components/overlay.scss b/modules/search/instant-search/components/overlay.scss
index 3e50ade106506..c9ff2b65fd1a8 100644
--- a/modules/search/instant-search/components/overlay.scss
+++ b/modules/search/instant-search/components/overlay.scss
@@ -1,15 +1,15 @@
 .jetpack-instant-search__overlay {
+	position: fixed;
 	top: 0;
 	left: 0;
+	z-index: 9999999999999;
 	width: 100vw;
 	height: 100vh;
-	opacity: 0.975;
-	transition: opacity 0.5s linear, 0.25s transform ease-in-out;
-	position: fixed;
 	padding: 3em 1em;
+	background: rgba(255, 255, 255, 0.975);
 	overflow-y: auto;
 	overflow-x: hidden;
-	z-index: 9999999999999;
+	transition: opacity 0.5s linear, 0.25s transform ease-in-out;
 
 	&.is-hidden {
 		transform: translateX( 100vw );
@@ -25,6 +25,17 @@
 }
 
 .jetpack-instant-search__overlay-close {
-	position: absolute;
-	right: 2em;
+	position: fixed;
+	top: 0;
+	right: 0;
+	z-index: 20;
+	width: 44px;
+	height: 44px;
+	padding: 0;
+	line-height: 1;
+
+	@include break-medium() {
+		width: 64px;
+		height: 64px;
+	}
 }
diff --git a/modules/search/instant-search/components/search-box.scss b/modules/search/instant-search/components/search-box.scss
index a52d968c1955a..8692194b13311 100644
--- a/modules/search/instant-search/components/search-box.scss
+++ b/modules/search/instant-search/components/search-box.scss
@@ -5,11 +5,10 @@
 }
 
 .jetpack-instant-search__box-filter-icon {
-	margin-left: 8px;
+	margin: 0 16px;
 	cursor: pointer;
 
-	// TODO: To be updated to break-medium
-	@include break-small() {
+	@include break-medium() {
 		display: none;
 	}
 }
diff --git a/modules/search/instant-search/components/search-form.jsx b/modules/search/instant-search/components/search-form.jsx
index a6eb9e6dbd782..586f33f3da8c3 100644
--- a/modules/search/instant-search/components/search-form.jsx
+++ b/modules/search/instant-search/components/search-form.jsx
@@ -62,6 +62,7 @@ class SearchForm extends Component {
 				</div>
 				{ this.state.showFilters && (
 					<div className="jetpack-instant-search__search-form-filters">
+						<div className="jetpack-instant-search__search-form-filters-arrow" />
 						<SearchSort onChange={ this.onChangeSort } value={ getSortQuery() } />
 						{ this.props.widgets.map( widget => (
 							<SearchFilters
diff --git a/modules/search/instant-search/components/search-form.scss b/modules/search/instant-search/components/search-form.scss
index b2d09019de5f5..86a93168f44d2 100644
--- a/modules/search/instant-search/components/search-form.scss
+++ b/modules/search/instant-search/components/search-form.scss
@@ -1,6 +1,78 @@
+$arrow-height: 10px;
+
 .jetpack-instant-search__search-form-filters {
-	// TODO: To be updated to break-medium
+	position: absolute;
+	top: 52px;
+	right: 0;
+	z-index: 10;
+	width: 100%;
+	margin: 12px 0 32px;
+	padding: 16px 24px;
+	border-radius: 6px;
+
+	.jetpack-instant-search__overlay--light & {
+		background: #fff;
+		border: 1px solid rgba(0, 0, 0, 0.1);
+		box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
+	}
+
+	.jetpack-instant-search__overlay--dark & {
+		background: #222;
+		border: 1px solid rgba(140, 140, 140, 0.1);
+		box-shadow: 0 2px 3px rgba(140, 140, 140, 0.1);
+	}
+
 	@include break-small() {
+		width: auto;
+		min-width: 360px;
+	}
+
+	@include break-medium() {
 		display: none;
 	}
 }
+
+.jetpack-instant-search__search-form-filters-arrow {
+	position: absolute;
+	top: ( $arrow-height + 1px ) * -1;
+	right: 16px;
+	width: $arrow-height * 2;
+	height: $arrow-height;
+
+	&:before,
+	&:after {
+		content: '';
+		position: absolute;
+		border-color: transparent;
+		border-style: solid;
+		border-width: 0 $arrow-height $arrow-height $arrow-height;
+	}
+
+	&:before {
+		top: 0;
+
+		.jetpack-instant-search__overlay--light & {
+			border-bottom-color: rgba(0, 0, 0, 0.1 );
+		}
+
+		.jetpack-instant-search__overlay--dark & {
+			border-bottom-color: rgba(140, 140, 140, 0.25 );
+		}
+	}
+
+	&:after {
+		top: 1px;
+
+		.jetpack-instant-search__overlay--light & {
+			border-bottom-color: #fff;
+		}
+
+		.jetpack-instant-search__overlay--dark & {
+			border-bottom-color: #222;
+		}
+	}
+	
+	@include break-medium() {
+		display: none;
+	}
+}
\ No newline at end of file
diff --git a/modules/search/instant-search/components/search-results.scss b/modules/search/instant-search/components/search-results.scss
index 13d407216d983..5f3e06b667d6b 100644
--- a/modules/search/instant-search/components/search-results.scss
+++ b/modules/search/instant-search/components/search-results.scss
@@ -1,15 +1,15 @@
 .jetpack-instant-search__search-results {
-	padding: 0.125em 2em;
-	margin: 0 auto;
 	position: relative;
+	display: flex;
+	z-index: 10;
 	max-width: 1080px;
+	margin: 0 auto;
+	padding: 0.125em 1em;
 	text-align: left;
-	display: flex;
 
 	mark {
-		font-weight: bold;
-		color: inherit;
 		padding: 0;
+		font-weight: bold;
 	}
 
 	.jetpack-instant-search__overlay--light & {
@@ -27,14 +27,34 @@
 			background-color: #324E85;
 		}
 	}
+
+	@include break-small() {
+		padding: 0.125em 2em;
+	}
 }
 
 .jetpack-instant-search__search-results-primary {
 	flex: 5;
-	margin-right: 4em;
+
+	@include break-medium() {
+		margin-right: 4em;
+	}
 }
 .jetpack-instant-search__search-results-secondary {
-	flex: 2;
+	display: none;
+
+	@include break-medium() {
+		position: static;
+		display: block;
+		flex: 2;
+		width: auto;
+		padding: 0;
+		background: none;
+		border: 0;
+		border-radius: 0;
+		box-shadow: none;
+
+	}
 }
 
 .jetpack-instant-search__search-results-real-query {
@@ -50,11 +70,11 @@
 }
 
 .jetpack-instant-search__result-comments {
-	padding-left: 16px;
 	margin-left: 8px;
 	margin-top: 16px;
-	border-left: 2px solid #eee;
+	padding-left: 16px;
 	font-size: 0.9em;
+	border-left: 2px solid #eee;
 
 	.gridicon {
 		margin-right: 8px;
@@ -71,16 +91,16 @@
 	// https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type#Accessibility_concerns
 	li:before {
 		content: '\200B';
-		height: 1px;
 		position: absolute;
+		height: 1px;
 		width: 1px;
 	}
 }
 
 .jetpack-instant-search__search-results-search-form {
-	// Only display the search form in the main column at the smallest breakpoint
-	font-size: 0.8em;
+	position: relative;
 	margin-bottom: 1em;
+	font-size: 0.8em;
 
 	.jetpack-instant-search__sort-select {
 		font-size: 0.9em;
diff --git a/modules/search/instant-search/components/search-sidebar.scss b/modules/search/instant-search/components/search-sidebar.scss
index 56c5974e534ae..cb5ca89d12269 100644
--- a/modules/search/instant-search/components/search-sidebar.scss
+++ b/modules/search/instant-search/components/search-sidebar.scss
@@ -1,8 +1,7 @@
 .jetpack-instant-search__sidebar {
 	.jetpack-filters.widget_search,
 	.jetpack-instant-search-wrapper {
-		// TODO: To be updated to break-medium
-		@media ( max-width: #{ ( $break-small ) } ) {
+		@media ( max-width: #{ ( $break-medium - 1 ) } ) {
 			display: none;
 		}
 	}
diff --git a/modules/search/instant-search/components/search-sort.jsx b/modules/search/instant-search/components/search-sort.jsx
index a1025fbe27968..3e4eabc06b8be 100644
--- a/modules/search/instant-search/components/search-sort.jsx
+++ b/modules/search/instant-search/components/search-sort.jsx
@@ -25,7 +25,7 @@ export default class SearchSort extends Component {
 		return (
 			<div className="jetpack-instant-search__sort">
 				<label>
-					{ __( 'Sort by', 'jetpack' ) }
+					<span>{ __( 'Sort by', 'jetpack' ) }</span>
 					<select
 						className="jetpack-instant-search__sort-select"
 						onBlur={ this.handleChange }
diff --git a/modules/search/instant-search/components/search-sort.scss b/modules/search/instant-search/components/search-sort.scss
index 51ad0af9fe9f1..cb0fa3d5271d3 100644
--- a/modules/search/instant-search/components/search-sort.scss
+++ b/modules/search/instant-search/components/search-sort.scss
@@ -1,10 +1,13 @@
 .jetpack-instant-search__sort {
-	text-align: left;
 	margin-top: 1em;
 	margin-bottom: 1em;
+	text-align: left;
+
+	span {
+		margin-right: 4px;
+	}
 }
 
 .jetpack-instant-search__sort-select {
-	margin-left: 4px;
 	text-align: left;
 }
diff --git a/modules/search/instant-search/instant-search.scss b/modules/search/instant-search/instant-search.scss
index 0fefc0b43155d..15d250e8069dd 100644
--- a/modules/search/instant-search/instant-search.scss
+++ b/modules/search/instant-search/instant-search.scss
@@ -1,4 +1,5 @@
 $break-small: 600px;
+$break-medium: 768px;
 $grid-size-large: 16px;
 
 @mixin break-small() {
@@ -7,6 +8,12 @@ $grid-size-large: 16px;
 	}
 }
 
+@mixin break-medium() {
+	@media ( min-width: #{ ( $break-medium ) } ) {
+		@content;
+	}
+}
+
 @import './components/gridicon/style.scss';
 @import './components/notice.scss';
 @import './components/overlay.scss';