diff --git a/packages/components/src/button-group/style.scss b/packages/components/src/button-group/style.scss
index 9c80304673b47..f1dace4f64797 100644
--- a/packages/components/src/button-group/style.scss
+++ b/packages/components/src/button-group/style.scss
@@ -1,17 +1,24 @@
 .components-button-group {
 	display: inline-block;
-	border-radius: $radius-block-ui;
-	border: $border-width solid $theme-color;
 
 	.components-button {
 		border-radius: 0;
 		display: inline-flex;
 		color: $theme-color;
+		box-shadow: inset 0 0 0 $border-width $theme-color;
 
 		& + .components-button {
 			margin-left: -1px;
 		}
 
+		&:first-child {
+			border-radius: $radius-block-ui 0 0 $radius-block-ui;
+		}
+
+		&:last-child {
+			border-radius: 0 $radius-block-ui $radius-block-ui 0;
+		}
+
 		// The focused button should be elevated so the focus ring isn't cropped,
 		// as should the active button, because it has a different border color.
 		&:focus,
@@ -22,7 +29,7 @@
 
 		// The active button should look pressed.
 		&.is-primary {
-			box-shadow: none;
+			box-shadow: inset 0 0 0 $border-width $theme-color;
 		}
 	}
 }
diff --git a/packages/components/src/date-time/style.scss b/packages/components/src/date-time/style.scss
index c0690e9e216fb..c80ac572d6afe 100644
--- a/packages/components/src/date-time/style.scss
+++ b/packages/components/src/date-time/style.scss
@@ -5,7 +5,7 @@
 /*rtl:end:ignore*/
 
 .components-datetime {
-	padding: $grid-unit-20;
+	padding: 0;
 
 	.components-datetime__calendar-help {
 		padding: $grid-unit-20;
@@ -118,36 +118,6 @@
 			color: $dark-gray-500;
 		}
 
-		.components-datetime__time-am-button {
-			margin-left: 8px;
-			margin-right: -1px;
-			border-radius: 3px 0 0 3px;
-		}
-
-		.components-datetime__time-pm-button {
-			margin-left: -1px;
-			border-radius: 0 3px 3px 0;
-		}
-
-		.components-datetime__time-am-button:focus,
-		.components-datetime__time-pm-button:focus {
-			position: relative;
-			z-index: 1;
-		}
-
-		.components-datetime__time-am-button.is-pressed,
-		.components-datetime__time-pm-button.is-pressed {
-			background: $light-gray-300;
-			border-color: $dark-gray-100;
-			box-shadow: inset 0 2px 5px -3px $dark-gray-500;
-			&:focus {
-				box-shadow:
-					inset 0 2px 5px -3px $dark-gray-500,
-					0 0 0 1px $white,
-					0 0 0 3px $blue-medium-focus;
-			}
-		}
-
 		.components-datetime__time-field {
 
 			&-time {
@@ -155,14 +125,8 @@
 				direction: ltr;
 			}
 
-
-			&.am-pm button {
-				font-size: 11px;
-				font-weight: 600;
-			}
-
 			select {
-				margin-right: 4px;
+				margin-right: $grid-unit-05;
 
 				&:focus {
 					position: relative;
@@ -172,7 +136,7 @@
 
 			input[type="number"] {
 				padding: 2px;
-				margin-right: 4px;
+				margin-right: $grid-unit-05;
 				text-align: center;
 				-moz-appearance: textfield;
 
@@ -193,7 +157,7 @@
 	// We are assuming MM-DD-YYY correlates with AM/PM
 	&.is-12-hour {
 		.components-datetime__time-field-day input {
-			margin: 0 -4px 0 0 !important;
+			margin: 0 -$grid-unit-05 0 0 !important;
 			border-radius: $radius-round-rectangle 0 0 $radius-round-rectangle !important;
 		}
 		.components-datetime__time-field-year input {
@@ -230,5 +194,5 @@
 // Hack to center the datepicker component within the popover.
 // It sets its own styles so centering is tricky.
 .components-popover .components-datetime__date {
-	padding-left: 4px;
+	padding-left: $grid-unit-05;
 }
diff --git a/packages/components/src/date-time/test/__snapshots__/time.js.snap b/packages/components/src/date-time/test/__snapshots__/time.js.snap
index 14726e4cf644a..e27e600f089f2 100644
--- a/packages/components/src/date-time/test/__snapshots__/time.js.snap
+++ b/packages/components/src/date-time/test/__snapshots__/time.js.snap
@@ -317,12 +317,12 @@ exports[`TimePicker matches the snapshot when the is12hour prop is specified 1`]
           value="00"
         />
       </div>
-      <div
+      <ButtonGroup
         className="components-datetime__time-field components-datetime__time-field-am-pm"
       >
         <ForwardRef(Button)
           className="components-datetime__time-am-button"
-          isPressed={false}
+          isPrimary={false}
           isSecondary={true}
           onClick={[Function]}
         >
@@ -330,13 +330,13 @@ exports[`TimePicker matches the snapshot when the is12hour prop is specified 1`]
         </ForwardRef(Button)>
         <ForwardRef(Button)
           className="components-datetime__time-pm-button"
-          isPressed={true}
-          isSecondary={true}
+          isPrimary={true}
+          isSecondary={false}
           onClick={[Function]}
         >
           PM
         </ForwardRef(Button)>
-      </div>
+      </ButtonGroup>
     </div>
   </fieldset>
 </div>
@@ -498,12 +498,12 @@ exports[`TimePicker matches the snapshot when the is12hour prop is true 1`] = `
           value="00"
         />
       </div>
-      <div
+      <ButtonGroup
         className="components-datetime__time-field components-datetime__time-field-am-pm"
       >
         <ForwardRef(Button)
           className="components-datetime__time-am-button"
-          isPressed={false}
+          isPrimary={false}
           isSecondary={true}
           onClick={[Function]}
         >
@@ -511,13 +511,13 @@ exports[`TimePicker matches the snapshot when the is12hour prop is true 1`] = `
         </ForwardRef(Button)>
         <ForwardRef(Button)
           className="components-datetime__time-pm-button"
-          isPressed={true}
-          isSecondary={true}
+          isPrimary={true}
+          isSecondary={false}
           onClick={[Function]}
         >
           PM
         </ForwardRef(Button)>
-      </div>
+      </ButtonGroup>
     </div>
   </fieldset>
 </div>
diff --git a/packages/components/src/date-time/time.js b/packages/components/src/date-time/time.js
index 25955a3335af2..9d8dbce3b2db0 100644
--- a/packages/components/src/date-time/time.js
+++ b/packages/components/src/date-time/time.js
@@ -15,6 +15,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import Button from '../button';
+import ButtonGroup from '../button-group';
 
 /**
  * Module Constants
@@ -318,24 +319,24 @@ class TimePicker extends Component {
 							/>
 						</div>
 						{ is12Hour && (
-							<div className="components-datetime__time-field components-datetime__time-field-am-pm">
+							<ButtonGroup className="components-datetime__time-field components-datetime__time-field-am-pm">
 								<Button
-									isSecondary
-									className="components-datetime__time-am-button"
-									isPressed={ am === 'AM' }
+									isPrimary={ am === 'AM' }
+									isSecondary={ am !== 'AM' }
 									onClick={ this.updateAmPm( 'AM' ) }
+									className="components-datetime__time-am-button"
 								>
 									{ __( 'AM' ) }
 								</Button>
 								<Button
-									isSecondary
-									className="components-datetime__time-pm-button"
-									isPressed={ am === 'PM' }
+									isPrimary={ am === 'PM' }
+									isSecondary={ am !== 'PM' }
 									onClick={ this.updateAmPm( 'PM' ) }
+									className="components-datetime__time-pm-button"
 								>
 									{ __( 'PM' ) }
 								</Button>
-							</div>
+							</ButtonGroup>
 						) }
 					</div>
 				</fieldset>
diff --git a/packages/editor/src/components/post-publish-panel/style.scss b/packages/editor/src/components/post-publish-panel/style.scss
index aaadde5f80884..254e67e59522c 100644
--- a/packages/editor/src/components/post-publish-panel/style.scss
+++ b/packages/editor/src/components/post-publish-panel/style.scss
@@ -78,12 +78,6 @@
 	.editor-post-visibility__dialog-legend {
 		display: none;
 	}
-
-	// The DateTime component has an intrinsic padding in order for the horizontal scrolling to function inside a popover.
-	// We unset that here when used inline.
-	.components-datetime {
-		padding: 0;
-	}
 }
 
 .post-publish-panel__postpublish .components-panel__body {