diff --git a/changelog/fix-7748-capture-notification-styles-are-broken b/changelog/fix-7748-capture-notification-styles-are-broken
new file mode 100644
index 00000000000..348106f98f8
--- /dev/null
+++ b/changelog/fix-7748-capture-notification-styles-are-broken
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fixed broken styles in authorization capture notifications
diff --git a/client/payment-details/summary/index.tsx b/client/payment-details/summary/index.tsx
index 6112a27e86f..34887da95db 100644
--- a/client/payment-details/summary/index.tsx
+++ b/client/payment-details/summary/index.tsx
@@ -5,13 +5,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { dateI18n } from '@wordpress/date';
-import {
-	Card,
-	CardBody,
-	CardFooter,
-	CardDivider,
-	Flex,
-} from '@wordpress/components';
+import { Card, CardBody, CardDivider, Flex } from '@wordpress/components';
 import moment from 'moment';
 import React, { useContext } from 'react';
 import { createInterpolateElement } from '@wordpress/element';
@@ -55,6 +49,7 @@ import MissingOrderNotice from 'wcpay/payment-details/summary/missing-order-noti
 import DisputeAwaitingResponseDetails from '../dispute-details/dispute-awaiting-response-details';
 import DisputeResolutionFooter from '../dispute-details/dispute-resolution-footer';
 import ErrorBoundary from 'components/error-boundary';
+import CardNotice from 'wcpay/components/card-notice';
 
 declare const window: any;
 
@@ -508,73 +503,69 @@ const PaymentDetailsSummary: React.FC< PaymentDetailsSummaryProps > = ( {
 				authorization &&
 				! authorization.captured && (
 					<Loadable isLoading={ isLoading } placeholder="">
-						<CardFooter className="payment-details-capture-notice">
-							<div className="payment-details-capture-notice__section">
-								<div className="payment-details-capture-notice__text">
-									{ createInterpolateElement(
-										__(
-											'You must <a>capture</a> this charge within the next',
-											'woocommerce-payments'
-										),
-										{
-											a: (
-												// eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-no-target-blank
-												<a
-													href="https://woo.com/document/woopayments/settings-guide/authorize-and-capture/#capturing-authorized-orders"
-													target="_blank"
-													rel="noreferer"
-												/>
-											),
+						<CardNotice
+							actions={
+								! isFraudOutcomeReview ? (
+									<CaptureAuthorizationButton
+										orderId={ charge.order?.number || 0 }
+										paymentIntentId={
+											charge.payment_intent || ''
 										}
-									) }{ ' ' }
-									<abbr
-										title={ dateI18n(
-											'M j, Y / g:iA',
-											moment
-												.utc( authorization.created )
-												.add( 7, 'days' ),
-											'UTC'
-										) }
-									>
-										<b>
-											{ moment
-												.utc( authorization.created )
-												.add( 7, 'days' )
-												.fromNow( true ) }
-										</b>
-									</abbr>
-									{ isFraudOutcomeReview &&
-										`. ${ __(
-											'Approving this transaction will capture the charge.',
-											'woocommerce-payments'
-										) }` }
-								</div>
-
-								{ ! isFraudOutcomeReview && (
-									<div className="payment-details-capture-notice__button">
-										<CaptureAuthorizationButton
-											orderId={
-												charge.order?.number || 0
-											}
-											paymentIntentId={
-												charge.payment_intent || ''
-											}
-											buttonIsPrimary={ true }
-											buttonIsSmall={ false }
-											onClick={ () => {
-												wcpayTracks.recordEvent(
-													'payments_transactions_details_capture_charge_button_click',
-													{
-														payment_intent_id:
-															charge.payment_intent,
-													}
-												);
-											} }
+										buttonIsPrimary={ true }
+										buttonIsSmall={ false }
+										onClick={ () => {
+											wcpayTracks.recordEvent(
+												'payments_transactions_details_capture_charge_button_click',
+												{
+													payment_intent_id:
+														charge.payment_intent,
+												}
+											);
+										} }
+									/>
+								) : (
+									<></>
+								)
+							}
+						>
+							{ createInterpolateElement(
+								__(
+									'You must <a>capture</a> this charge within the next',
+									'woocommerce-payments'
+								),
+								{
+									a: (
+										// eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-no-target-blank
+										<a
+											href="https://woo.com/document/woopayments/settings-guide/authorize-and-capture/#capturing-authorized-orders"
+											target="_blank"
+											rel="noreferer"
 										/>
-									</div>
+									),
+								}
+							) }{ ' ' }
+							<abbr
+								title={ dateI18n(
+									'M j, Y / g:iA',
+									moment
+										.utc( authorization.created )
+										.add( 7, 'days' ),
+									'UTC'
 								) }
-							</div>
-						</CardFooter>
+							>
+								<b>
+									{ moment
+										.utc( authorization.created )
+										.add( 7, 'days' )
+										.fromNow( true ) }
+								</b>
+							</abbr>
+							{ isFraudOutcomeReview &&
+								`. ${ __(
+									'Approving this transaction will capture the charge.',
+									'woocommerce-payments'
+								) }` }
+						</CardNotice>
 					</Loadable>
 				) }
 		</Card>
diff --git a/client/payment-details/summary/test/__snapshots__/index.test.tsx.snap b/client/payment-details/summary/test/__snapshots__/index.test.tsx.snap
index 02f35f6c1db..30c5c237e49 100644
--- a/client/payment-details/summary/test/__snapshots__/index.test.tsx.snap
+++ b/client/payment-details/summary/test/__snapshots__/index.test.tsx.snap
@@ -244,15 +244,15 @@ exports[`PaymentDetailsSummary capture notification and fraud buttons renders ca
         </ul>
       </div>
       <div
-        class="components-flex components-card__footer components-card-footer payment-details-capture-notice css-p1v47q-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium em57xhy0"
+        class="components-flex components-card__footer components-card-footer card-notice css-p1v47q-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium em57xhy0"
         data-wp-c16t="true"
         data-wp-component="CardFooter"
       >
         <div
-          class="payment-details-capture-notice__section"
+          class="card-notice__section"
         >
           <div
-            class="payment-details-capture-notice__text"
+            class="card-notice__text"
           >
             You must 
             <a
@@ -273,7 +273,7 @@ exports[`PaymentDetailsSummary capture notification and fraud buttons renders ca
             </abbr>
           </div>
           <div
-            class="payment-details-capture-notice__button"
+            class="card-notice__button"
           >
             <button
               class="components-button is-primary"
@@ -561,15 +561,15 @@ exports[`PaymentDetailsSummary capture notification and fraud buttons renders th
         </ul>
       </div>
       <div
-        class="components-flex components-card__footer components-card-footer payment-details-capture-notice css-p1v47q-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium em57xhy0"
+        class="components-flex components-card__footer components-card-footer card-notice css-p1v47q-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium em57xhy0"
         data-wp-c16t="true"
         data-wp-component="CardFooter"
       >
         <div
-          class="payment-details-capture-notice__section"
+          class="card-notice__section"
         >
           <div
-            class="payment-details-capture-notice__text"
+            class="card-notice__text"
           >
             You must 
             <a
@@ -590,6 +590,9 @@ exports[`PaymentDetailsSummary capture notification and fraud buttons renders th
             </abbr>
             . Approving this transaction will capture the charge.
           </div>
+          <div
+            class="card-notice__button"
+          />
         </div>
       </div>
     </div>