diff --git a/plugins/woocommerce-admin/client/analytics/settings/historical-data/layout.js b/plugins/woocommerce-admin/client/analytics/settings/historical-data/layout.js
index f10cc2d51d8..3d797e42a79 100644
--- a/plugins/woocommerce-admin/client/analytics/settings/historical-data/layout.js
+++ b/plugins/woocommerce-admin/client/analytics/settings/historical-data/layout.js
@@ -7,6 +7,11 @@ import { Component, Fragment } from '@wordpress/element';
 import { isNil } from 'lodash';
 import { SECOND } from '@fresh-data/framework';
 
+/**
+ * WooCommerce dependencies
+ */
+import { SectionHeader } from '@woocommerce/components';
+
 /**
  * Internal dependencies
  */
@@ -50,45 +55,45 @@ class HistoricalDataLayout extends Component {
 
 		return (
 			<Fragment>
-				<div className="woocommerce-setting">
-					<div className="woocommerce-setting__label" id="import-historical-data-label">
-						{ __( 'Import Historical Data:', 'woocommerce-admin' ) }
-					</div>
-					<div className="woocommerce-setting__input">
-						<span className="woocommerce-setting__help">
-							{ __(
-								'This tool populates historical analytics data by processing customers ' +
-									'and orders created prior to activating WooCommerce Admin.',
-								'woocommerce-admin'
+				<SectionHeader title={ __( 'Import Historical Data', 'woocommerce-admin' ) } />
+				<div className="woocommerce-settings__wrapper">
+					<div className="woocommerce-setting">
+						<div className="woocommerce-setting__input">
+							<span className="woocommerce-setting__help">
+								{ __(
+									'This tool populates historical analytics data by processing customers ' +
+										'and orders created prior to activating WooCommerce Admin.',
+									'woocommerce-admin'
+								) }
+							</span>
+							{ status !== 'finished' && (
+								<Fragment>
+									<HistoricalDataPeriodSelector
+										dateFormat={ dateFormat }
+										disabled={ inProgress }
+										onPeriodChange={ onPeriodChange }
+										onDateChange={ onDateChange }
+										value={ period }
+									/>
+									<HistoricalDataSkipCheckbox
+										disabled={ inProgress }
+										checked={ skipChecked }
+										onChange={ onSkipChange }
+									/>
+									<HistoricalDataProgress
+										label={ __( 'Registered Customers', 'woocommerce-admin' ) }
+										progress={ customersProgress }
+										total={ customersTotal }
+									/>
+									<HistoricalDataProgress
+										label={ __( 'Orders', 'woocommerce-admin' ) }
+										progress={ ordersProgress }
+										total={ ordersTotal }
+									/>
+								</Fragment>
 							) }
-						</span>
-						{ status !== 'finished' && (
-							<Fragment>
-								<HistoricalDataPeriodSelector
-									dateFormat={ dateFormat }
-									disabled={ inProgress }
-									onPeriodChange={ onPeriodChange }
-									onDateChange={ onDateChange }
-									value={ period }
-								/>
-								<HistoricalDataSkipCheckbox
-									disabled={ inProgress }
-									checked={ skipChecked }
-									onChange={ onSkipChange }
-								/>
-								<HistoricalDataProgress
-									label={ __( 'Registered Customers', 'woocommerce-admin' ) }
-									progress={ customersProgress }
-									total={ customersTotal }
-								/>
-								<HistoricalDataProgress
-									label={ __( 'Orders', 'woocommerce-admin' ) }
-									progress={ ordersProgress }
-									total={ ordersTotal }
-								/>
-							</Fragment>
-						) }
-						<HistoricalDataStatus importDate={ importDate } status={ status } />
+							<HistoricalDataStatus importDate={ importDate } status={ status } />
+						</div>
 					</div>
 				</div>
 				<HistoricalDataActions
diff --git a/plugins/woocommerce-admin/client/analytics/settings/index.js b/plugins/woocommerce-admin/client/analytics/settings/index.js
index 1a01f8f6b42..9e198d89c21 100644
--- a/plugins/woocommerce-admin/client/analytics/settings/index.js
+++ b/plugins/woocommerce-admin/client/analytics/settings/index.js
@@ -36,9 +36,19 @@ class Settings extends Component {
 		this.state = {
 			settings,
 			saving: false,
+			isDirty: false,
 		};
 
 		this.handleInputChange = this.handleInputChange.bind( this );
+		this.warnIfUnsavedChanges = this.warnIfUnsavedChanges.bind( this );
+	}
+
+	componentDidMount() {
+		window.addEventListener( 'beforeunload', this.warnIfUnsavedChanges );
+	}
+
+	componentWillUnmount() {
+		window.removeEventListener( 'beforeunload', this.warnIfUnsavedChanges );
 	}
 
 	componentDidCatch( error ) {
@@ -50,6 +60,18 @@ class Settings extends Component {
 		/* eslint-enable no-console */
 	}
 
+	warnIfUnsavedChanges( event ) {
+		const { isDirty } = this.state;
+
+		if ( isDirty ) {
+			event.returnValue = __(
+				'You have unsaved changes. If you proceed, they will be lost.',
+				'woocommerce-admin'
+			);
+			return event.returnValue;
+		}
+	}
+
 	resetDefaults = () => {
 		if (
 			window.confirm(
@@ -64,7 +86,8 @@ class Settings extends Component {
 
 	componentDidUpdate() {
 		const { addNotice, isError, isRequesting } = this.props;
-		const { saving } = this.state;
+		const { saving, isDirty } = this.state;
+		let newIsDirtyState = isDirty;
 
 		if ( saving && ! isRequesting ) {
 			if ( ! isError ) {
@@ -72,6 +95,7 @@ class Settings extends Component {
 					status: 'success',
 					message: __( 'Your settings have been successfully saved.', 'woocommerce-admin' ),
 				} );
+				newIsDirtyState = false;
 			} else {
 				addNotice( {
 					status: 'error',
@@ -82,7 +106,7 @@ class Settings extends Component {
 				} );
 			}
 			/* eslint-disable react/no-did-update-set-state */
-			this.setState( { saving: false } );
+			this.setState( { saving: false, isDirty: newIsDirtyState } );
 			/* eslint-enable react/no-did-update-set-state */
 		}
 	}
@@ -105,7 +129,9 @@ class Settings extends Component {
 	saveChanges = () => {
 		this.persistChanges( this.state );
 		this.props.updateSettings( { wc_admin: this.state.settings } );
-		this.setState( { saving: true } );
+
+		// TODO: remove this optimistic set of isDirty to false once #2541 is resolved.
+		this.setState( { saving: true, isDirty: false } );
 	};
 
 	handleInputChange( e ) {
@@ -122,7 +148,7 @@ class Settings extends Component {
 			settings[ name ] = value;
 		}
 
-		this.setState( { settings } );
+		this.setState( { settings, isDirty: true } );
 	}
 
 	render() {
@@ -155,11 +181,11 @@ class Settings extends Component {
 							{ __( 'Reset Defaults', 'woocommerce-admin' ) }
 						</Button>
 						<Button isPrimary onClick={ this.saveChanges }>
-							{ __( 'Save Changes', 'woocommerce-admin' ) }
+							{ __( 'Save Settings', 'woocommerce-admin' ) }
 						</Button>
 					</div>
-					<HistoricalData addNotice={ addNotice } />
 				</div>
+				<HistoricalData addNotice={ addNotice } />
 			</Fragment>
 		);
 	}
diff --git a/plugins/woocommerce-admin/package-lock.json b/plugins/woocommerce-admin/package-lock.json
index efb69983dbd..78c10ab5073 100644
--- a/plugins/woocommerce-admin/package-lock.json
+++ b/plugins/woocommerce-admin/package-lock.json
@@ -9106,8 +9106,7 @@
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -9125,13 +9124,11 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -9144,18 +9141,15 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -9258,8 +9252,7 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "ini": {
           "version": "1.3.5",
@@ -9269,7 +9262,6 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -9282,20 +9274,17 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -9312,7 +9301,6 @@
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -9385,8 +9373,7 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -9396,7 +9383,6 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -9472,8 +9458,7 @@
         },
         "safe-buffer": {
           "version": "5.1.2",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -9503,7 +9488,6 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -9521,7 +9505,6 @@
         "strip-ansi": {
           "version": "3.0.1",
           "bundled": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -9560,13 +9543,11 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "yallist": {
           "version": "3.0.3",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         }
       }
     },