diff --git a/projects/plugins/boost/app/assets/src/css/admin-style.scss b/projects/plugins/boost/app/assets/src/css/admin-style.scss
index bbffd620ded44..ecef082f54bf7 100644
--- a/projects/plugins/boost/app/assets/src/css/admin-style.scss
+++ b/projects/plugins/boost/app/assets/src/css/admin-style.scss
@@ -5,6 +5,3 @@
 @import 'main/dashboard';
 @import 'main/common';
 
-// Components
-@import 'components/button';
-@import 'components/snackbar';
diff --git a/projects/plugins/boost/app/assets/src/css/components/button.scss b/projects/plugins/boost/app/assets/src/css/components/button.scss
deleted file mode 100644
index 9a6fb813d7807..0000000000000
--- a/projects/plugins/boost/app/assets/src/css/components/button.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-.jb-dashboard .jb-button--primary {
-	color: #ffffff;
-	background-color: #000000;
-	border-radius: 4px;
-	border: none;
-	padding: 10px 24px;
-	font-size: 16px;
-	line-height: 1;
-	text-decoration: none;
-	display: inline-block;
-}
-
-.components-button {
-	white-space: nowrap;
-}
-
-.components-button.components-button--back {
-	color: $gray_90;
-	font-size: 14pt;
-	text-decoration: none;
-	margin-bottom: 8px;
-
-	&.is-link {
-		margin-left: auto;
-	}
-
-	&.is-link:hover {
-		color: $gray_90;
-	}
-
-	svg {
-		margin: 4px 4px 2px 0;
-		height: 1.5rem;
-		margin-right: 20px;
-	}
-}
-
-.jb-button {
-	min-width: 135px !important;
-	text-align: center;
-	border-radius: 4px;
-	padding: 10px 24px;
-	display: inline-block;
-	font-weight: 500;
-
-	&:hover {
-		cursor: pointer;
-	}
-
-	&--primary {
-		color: var(--jp-white)!important;
-	}
-
-	&--outline {
-		color: var(--jp-black)!important;
-		border: 1px solid!important;
-	}
-}
diff --git a/projects/plugins/boost/app/assets/src/css/components/snackbar.scss b/projects/plugins/boost/app/assets/src/css/components/snackbar.scss
deleted file mode 100644
index bad691ee4b1e6..0000000000000
--- a/projects/plugins/boost/app/assets/src/css/components/snackbar.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/*
- * Styles to make Gutenberg snackbar to integrate into Boost.
- */
-.jb-dashboard .stackable-snackbars,
-.jb-dashboard :not(.stackable-snackbars) .components-snackbar {
-	box-sizing: content-box;
-	position: fixed;
-	bottom: 100px;
-	right: 100px;
-	z-index: 900;
-}
diff --git a/projects/plugins/boost/app/assets/src/css/main/dashboard.scss b/projects/plugins/boost/app/assets/src/css/main/dashboard.scss
index 4e114c3d6e9a9..bf7ae4115cbfd 100644
--- a/projects/plugins/boost/app/assets/src/css/main/dashboard.scss
+++ b/projects/plugins/boost/app/assets/src/css/main/dashboard.scss
@@ -11,22 +11,6 @@
 
 }
 
-// Helper style for buttons we want to look like links.
-button.jb-link {
-	background: none;
-	text-decoration: underline;
-	border: none;
-	padding: 0;
-	margin: 0;
-	cursor: pointer;
-}
-
-.jb-link{
-	display:inline-block;
-	margin-top: 10px;
-	font-size:0.8em;
-}
-
 .jb-section--alt {
 	background-color: $alt_white;
 }
diff --git a/projects/plugins/boost/app/assets/src/css/main/wp-admin.scss b/projects/plugins/boost/app/assets/src/css/main/wp-admin.scss
index 09b4d649f72d7..523423943501f 100644
--- a/projects/plugins/boost/app/assets/src/css/main/wp-admin.scss
+++ b/projects/plugins/boost/app/assets/src/css/main/wp-admin.scss
@@ -39,18 +39,6 @@ p {
 		color: var( --wp-admin-theme-link-color );
 	}
 
-	.components-button.is-jb-primary {
-		background-color: $jetpack_green;
-		border-radius: $border-radius;
-		font-weight: 600;
-		margin-bottom: 1.5rem;
-		white-space: nowrap;
-		color: #fff;
-		text-decoration: none;
-		text-shadow: none;
-		outline: 1px solid transparent;
-	}
-
 	.components-button.is-link:not(:disabled) {
 		color: var( --wp-admin-theme-link-color );
 	}
diff --git a/projects/plugins/boost/app/assets/src/js/features/critical-css/folding-element/folding-element.module.scss b/projects/plugins/boost/app/assets/src/js/features/critical-css/folding-element/folding-element.module.scss
index 747d8ec4e901d..990e44297c403 100644
--- a/projects/plugins/boost/app/assets/src/js/features/critical-css/folding-element/folding-element.module.scss
+++ b/projects/plugins/boost/app/assets/src/js/features/critical-css/folding-element/folding-element.module.scss
@@ -1,16 +1,3 @@
-:global(.jb-dashboard .components-button.is-link) {
-	&.foldable-element-control {
-		color: var( --primary-black );
-		font-size: 16px;
-	}
-}
-
-:global(.jb-dashboard .components-button.is-link) {
-	&.foldable-element-control.visible {
-		margin-bottom: 0;
-	}
-}
-
 @keyframes fadeIn {
 	from {
 		opacity: 0;
@@ -38,4 +25,10 @@
 
 .foldable-element-control {
 	font-weight: 600;
+	margin-bottom: 0;
+
+	span {
+		display: inline-flex;
+		align-items: center;
+	}
 }
diff --git a/projects/plugins/boost/app/assets/src/js/features/critical-css/folding-element/folding-element.tsx b/projects/plugins/boost/app/assets/src/js/features/critical-css/folding-element/folding-element.tsx
index 076c34181c96b..308f048b56f81 100644
--- a/projects/plugins/boost/app/assets/src/js/features/critical-css/folding-element/folding-element.tsx
+++ b/projects/plugins/boost/app/assets/src/js/features/critical-css/folding-element/folding-element.tsx
@@ -5,6 +5,7 @@ import { useState } from 'react';
 import ChevronDown from '$svg/chevron-down';
 import ChevronUp from '$svg/chevron-up';
 import styles from './folding-element.module.scss';
+import { Button } from '@automattic/jetpack-components';
 
 type PropTypes = {
 	labelExpandedText: string;
@@ -39,15 +40,16 @@ const FoldingElement: React.FC< PropTypes > = ( {
 
 	return (
 		<>
-			<button
-				className={ clsx( 'components-button is-link', styles[ 'foldable-element-control' ], {
+			<Button
+				variant="link"
+				className={ clsx( styles[ 'foldable-element-control' ], {
 					visible: expanded,
 				} ) }
 				onClick={ handleOnExpand }
 			>
 				{ label }
 				{ expanded ? <ChevronUp /> : <ChevronDown /> }
-			</button>
+			</Button>
 
 			<animated.div
 				className={ expanded ? styles.expanded : '' }
diff --git a/projects/plugins/boost/app/assets/src/js/features/notice/manager.module.scss b/projects/plugins/boost/app/assets/src/js/features/notice/manager.module.scss
index e3df52f12fc77..aa1b0e5dcf317 100644
--- a/projects/plugins/boost/app/assets/src/js/features/notice/manager.module.scss
+++ b/projects/plugins/boost/app/assets/src/js/features/notice/manager.module.scss
@@ -2,6 +2,14 @@
 	display: grid;
 	justify-items: end;
 
+	// Positioning
+	box-sizing: content-box;
+	position: fixed;
+	bottom: 100px;
+	right: 100px;
+	z-index: 900;
+
+	// Space between notices
 	:global(.components-snackbar + .components-snackbar) {
 		margin-top: 16px;
 	}
diff --git a/projects/plugins/boost/app/assets/src/js/features/speed-score/pop-out/pop-out.tsx b/projects/plugins/boost/app/assets/src/js/features/speed-score/pop-out/pop-out.tsx
index 0b81481bceac3..9e0f119c76688 100644
--- a/projects/plugins/boost/app/assets/src/js/features/speed-score/pop-out/pop-out.tsx
+++ b/projects/plugins/boost/app/assets/src/js/features/speed-score/pop-out/pop-out.tsx
@@ -3,9 +3,8 @@ import CloseButton from '$features/ui/close-button/close-button';
 import styles from './pop-out.module.scss';
 import { __ } from '@wordpress/i18n';
 import { ReactNode, useState, useEffect } from 'react';
-import { Button } from '@wordpress/components';
+import { Button, getRedirectUrl } from '@automattic/jetpack-components';
 import { useDismissibleAlertState } from '$features/performance-history/lib/hooks';
-import { getRedirectUrl } from '@automattic/jetpack-components';
 import { recordBoostEvent } from '$lib/utils/analytics';
 
 type Props = {
@@ -54,6 +53,66 @@ const slowerMessage: ScoreChangeMessage = {
 	ctaLink: getRedirectUrl( 'boost-improve-site-speed-score' ),
 };
 
+type VanillaPopOutProps = {
+	message: ScoreChangeMessage;
+	onClose: () => void;
+	onDismiss: () => void;
+	isVisible: boolean;
+};
+
+/**
+ * The basic pop out excluding all external dependencies.
+ *
+ * @param {VanillaPopOutProps} props
+ * @return {React.ReactNode} Vanilla PopOut component.
+ */
+export const VanillaPopOut = ( { message, onClose, onDismiss, isVisible }: VanillaPopOutProps ) => {
+	const animationStyles = useSpring( {
+		from: {
+			right: '-100%',
+		},
+		to: {
+			right: isVisible ? '0%' : '-100%',
+		},
+	} );
+
+	return (
+		<div id="parent" className={ styles.wrapper }>
+			<animated.div
+				className={ styles.card }
+				style={ {
+					...animationStyles,
+				} }
+			>
+				<CloseButton onClick={ onClose } />
+
+				<h3 className={ styles.headline }>{ message.title }</h3>
+
+				<>{ message.body }</>
+
+				<Button
+					variant="primary"
+					href={ message?.ctaLink }
+					target="_blank"
+					rel="noreferrer"
+					onClick={ onDismiss }
+				>
+					{ message.cta }
+				</Button>
+
+				<Button
+					variant="link"
+					size="small"
+					className={ styles[ 'dismiss-button' ] }
+					onClick={ onDismiss }
+				>
+					{ __( 'Do not show me again', 'jetpack-boost' ) }
+				</Button>
+			</animated.div>
+		</div>
+	);
+};
+
 function PopOut( { scoreChange }: Props ) {
 	/*
 	 * Determine if the score has changed enough to show the alert.
@@ -95,49 +154,13 @@ function PopOut( { scoreChange }: Props ) {
 		dismissAlert();
 	};
 
-	const animationStyles = useSpring( {
-		from: {
-			right: '-100%',
-		},
-		to: {
-			right: hasScoreChanged && ! isDismissed && ! isClosed ? '0%' : '-100%',
-		},
-	} );
-
 	return (
-		<div id="parent" className={ styles.wrapper }>
-			<animated.div
-				className={ styles.card }
-				style={ {
-					...animationStyles,
-				} }
-			>
-				<CloseButton onClick={ hideAlert } />
-
-				<h3 className={ styles.headline }>{ message.title }</h3>
-
-				<>{ message.body }</>
-
-				<a
-					className="jb-button--primary"
-					href={ message?.ctaLink }
-					target="_blank"
-					rel="noreferrer"
-					onClick={ handleCtaClick }
-				>
-					{ message.cta }
-				</a>
-
-				<Button
-					variant="link"
-					size="small"
-					className={ styles[ 'dismiss-button' ] }
-					onClick={ handleCtaClick }
-				>
-					{ __( 'Do not show me again', 'jetpack-boost' ) }
-				</Button>
-			</animated.div>
-		</div>
+		<VanillaPopOut
+			message={ message }
+			onClose={ hideAlert }
+			onDismiss={ handleCtaClick }
+			isVisible={ hasScoreChanged && ! isDismissed && ! isClosed }
+		/>
 	);
 }
 
diff --git a/projects/plugins/boost/app/assets/src/js/features/speed-score/pop-out/stories/pop-out.stories.tsx b/projects/plugins/boost/app/assets/src/js/features/speed-score/pop-out/stories/pop-out.stories.tsx
new file mode 100644
index 0000000000000..dca022a9cfca9
--- /dev/null
+++ b/projects/plugins/boost/app/assets/src/js/features/speed-score/pop-out/stories/pop-out.stories.tsx
@@ -0,0 +1,55 @@
+import type { Meta } from '@storybook/react';
+import React from 'react';
+import { VanillaPopOut } from '../pop-out';
+
+const meta: Meta< typeof VanillaPopOut > = {
+	title: 'Plugins/Boost/Features/Speed Score/Vanilla PopOut',
+	component: VanillaPopOut,
+	argTypes: {
+		message: { control: 'object' },
+		onClose: { action: 'onClose' },
+		onDismiss: { action: 'onDismiss' },
+		isVisible: { control: 'boolean' },
+	},
+	decorators: [
+		Story => (
+			<div style={ { maxWidth: '800px', minHeight: '600px', fontSize: '16px' } }>
+				<Story />
+			</div>
+		),
+	],
+};
+
+const defaultValues = {
+	isVisible: true,
+	message: {
+		id: 'score_decrease',
+		title: 'Speed score has fallen',
+		body: (
+			<>
+				<p>
+					Most of the time Jetpack Boost will increase your site speed, but there may be cases where your score does not increase.
+				</p>
+				<p>
+					Try refreshing your score, and if it doesn’t help, check our guide on improving your site speed score:
+				</p>
+			</>
+		),
+		cta: 'Read the guide',
+		ctaLink: 'https://example.com',
+	},
+	onClose: () => {
+		defaultValues.isVisible = false;
+	},
+	onDismiss: () => {
+		defaultValues.isVisible = false;
+	},
+};
+
+export default meta;
+const Template = args => {
+	return <VanillaPopOut { ...args } />;
+};
+export const _default = Template.bind( {} );
+_default.args = defaultValues;
+
diff --git a/projects/plugins/boost/app/assets/src/js/features/ui/back-button/back-button.module.scss b/projects/plugins/boost/app/assets/src/js/features/ui/back-button/back-button.module.scss
new file mode 100644
index 0000000000000..141696c1f15cd
--- /dev/null
+++ b/projects/plugins/boost/app/assets/src/js/features/ui/back-button/back-button.module.scss
@@ -0,0 +1,24 @@
+@import '$css/main/variables.scss';
+
+.back-button {
+	text-decoration: none !important;
+	color: $gray_90;
+	line-height: 24px;
+
+	// Specify the global class for specificity so that it overrides the default styles.
+	&:global(.components-button) {
+		margin-bottom: 8px;
+	}
+	
+	span {
+		font-size: 14pt;
+		font-weight: 400;
+		display: inline-flex;
+		align-items: center;
+
+		svg {
+			margin: 4px 20px 2px 0;
+			height: 1.5rem;
+		}
+	}
+}
diff --git a/projects/plugins/boost/app/assets/src/js/features/ui/back-button/back-button.tsx b/projects/plugins/boost/app/assets/src/js/features/ui/back-button/back-button.tsx
index 6ca35c669fd8f..3937987e214fb 100644
--- a/projects/plugins/boost/app/assets/src/js/features/ui/back-button/back-button.tsx
+++ b/projects/plugins/boost/app/assets/src/js/features/ui/back-button/back-button.tsx
@@ -2,7 +2,8 @@ import { __ } from '@wordpress/i18n';
 import LeftArrow from '$svg/left-arrow';
 import { useNavigate } from 'react-router-dom';
 import { recordBoostEvent } from '$lib/utils/analytics';
-
+import { Button } from '@automattic/jetpack-components';
+import styles from './back-button.module.scss';
 type BackButtonProps = {
 	route?: string;
 };
@@ -18,13 +19,10 @@ const BackButton: React.FC< BackButtonProps > = ( { route = '/' } ) => {
 	};
 
 	return (
-		<button
-			className="components-button components-button--back is-link close"
-			onClick={ handleBack }
-		>
+		<Button variant="link" className={ styles[ 'back-button' ] } onClick={ handleBack }>
 			<LeftArrow />
 			{ __( 'Go back', 'jetpack-boost' ) }
-		</button>
+		</Button>
 	);
 };
 
diff --git a/projects/plugins/boost/app/assets/src/js/pages/critical-css-advanced/critical-css-advanced.tsx b/projects/plugins/boost/app/assets/src/js/pages/critical-css-advanced/critical-css-advanced.tsx
index e8f3969362ed7..d5cd791fa213b 100644
--- a/projects/plugins/boost/app/assets/src/js/pages/critical-css-advanced/critical-css-advanced.tsx
+++ b/projects/plugins/boost/app/assets/src/js/pages/critical-css-advanced/critical-css-advanced.tsx
@@ -14,6 +14,7 @@ import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Provider } from '$features/critical-css';
 import clsx from 'clsx';
+import { Button } from '@automattic/jetpack-components';
 
 type HeadingMetaProps = {
 	dismissedIssues: Provider[];
@@ -117,7 +118,7 @@ const HeadingMeta = ( { dismissedIssues, showDismissedIssues }: HeadingMetaProps
 		>
 			<div ref={ ref }>
 				<p style={ { margin: 0 } }>
-					<button className="components-button is-link" onClick={ () => setShowHidden( true ) }>
+					<Button variant="link" size="small" onClick={ () => setShowHidden( true ) }>
 						{ sprintf(
 							/* translators: %d is a number of recommendations which were previously hidden by the user */
 							_n(
@@ -128,7 +129,7 @@ const HeadingMeta = ( { dismissedIssues, showDismissedIssues }: HeadingMetaProps
 							),
 							dismissedIssues.length
 						) }
-					</button>
+					</Button>
 				</p>
 			</div>
 		</animated.div>
diff --git a/projects/plugins/boost/app/assets/src/js/pages/purchase-success/purchase-success.tsx b/projects/plugins/boost/app/assets/src/js/pages/purchase-success/purchase-success.tsx
index 3b5840778b347..6e062ff8b4d5d 100644
--- a/projects/plugins/boost/app/assets/src/js/pages/purchase-success/purchase-success.tsx
+++ b/projects/plugins/boost/app/assets/src/js/pages/purchase-success/purchase-success.tsx
@@ -1,5 +1,5 @@
-import { getRedirectUrl } from '@automattic/jetpack-components';
-import { Button, ExternalLink } from '@wordpress/components';
+import { getRedirectUrl, Button } from '@automattic/jetpack-components';
+import { ExternalLink } from '@wordpress/components';
 import { createInterpolateElement, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { useImageAnalysisRequest } from '$features/image-size-analysis';
@@ -122,8 +122,9 @@ const PurchaseSuccess: React.FC = () => {
 			</p>
 			<Button
 				label={ __( 'Continue', 'jetpack-boost' ) }
+				variant="primary"
 				onClick={ () => navigate( '/' ) }
-				className="jp-action-button--button jb-button jb-button--primary mt-3"
+				className="mt-3"
 			>
 				{ __( 'Continue', 'jetpack-boost' ) }
 			</Button>
diff --git a/projects/plugins/boost/changelog/update-module-scss b/projects/plugins/boost/changelog/update-module-scss
new file mode 100644
index 0000000000000..d7fb9d38a4c40
--- /dev/null
+++ b/projects/plugins/boost/changelog/update-module-scss
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Move global styles to module styles for components