diff --git a/assets/css/admin.scss b/assets/css/admin.scss
index 05ea561bf2b..d2c8290caa1 100644
--- a/assets/css/admin.scss
+++ b/assets/css/admin.scss
@@ -2264,6 +2264,21 @@ ul.wc_coupon_list_block {
 			}
 		}
 	}
+	.wc-order-preview-note {
+		overflow:hidden;
+		width: 100%;
+		padding: 1.5em;
+		box-sizing: border-box;
+		word-wrap: break-word;
+
+		h2 {
+			margin-top: 0;
+		}
+		strong {
+			display: block;
+			margin-top: 1em;
+		}
+	}
 	.wc-action-button,
 	.wc-action-button-group {
 		float: left;
diff --git a/includes/admin/list-tables/class-wc-admin-list-table-orders.php b/includes/admin/list-tables/class-wc-admin-list-table-orders.php
index 1e889c2d544..f9281aae5f7 100644
--- a/includes/admin/list-tables/class-wc-admin-list-table-orders.php
+++ b/includes/admin/list-tables/class-wc-admin-list-table-orders.php
@@ -375,11 +375,6 @@ class WC_Admin_List_Table_Orders extends WC_Admin_List_Table {
 											<a href="{{ data.shipping_address_map_url }}" target="_blank">{{{ data.formatted_shipping_address }}}</a>
 										<# } #>
 
-										<# if ( data.data.customer_note ) { #>
-											<strong><?php esc_html_e( 'Note', 'woocommerce' ); ?></strong>
-											{{ data.data.customer_note }}
-										<# } #>
-
 										<# if ( data.shipping_via ) { #>
 											<strong><?php esc_html_e( 'Shipping method', 'woocommerce' ); ?></strong>
 											{{ data.shipping_via }}
@@ -388,6 +383,13 @@ class WC_Admin_List_Table_Orders extends WC_Admin_List_Table {
 								<# } #>
 							</div>
 
+							<div class="wc-order-preview-note">
+								<h2><?php esc_html_e( 'Note', 'woocommerce' ); ?></h2>
+								<# if ( data.data.customer_note ) { #>
+									{{ data.data.customer_note }}
+								<# } #>
+							</div>
+
 							{{{ data.item_html }}}
 
 							<?php do_action( 'woocommerce_admin_order_preview_end' ); ?>