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 422d23e25eb0a..bbffd620ded44 100644
--- a/projects/plugins/boost/app/assets/src/css/admin-style.scss
+++ b/projects/plugins/boost/app/assets/src/css/admin-style.scss
@@ -8,8 +8,3 @@
 // Components
 @import 'components/button';
 @import 'components/snackbar';
-
-// React Migration CSS
-@import 'components/isa/recommendations-page.scss';
-@import 'components/isa/recommendations/table.scss';
-@import 'components/isa/recommendations/row-types/table-row.scss';
diff --git a/projects/plugins/boost/app/assets/src/css/components/isa/recommendations-page.scss b/projects/plugins/boost/app/assets/src/css/components/isa/recommendations-page.scss
deleted file mode 100644
index 6694d3fac09ad..0000000000000
--- a/projects/plugins/boost/app/assets/src/css/components/isa/recommendations-page.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-.jb-recommendation-page-grid {
-	display: grid;
-	padding: var( --padding );
-	gap: var( --gap );
-	align-items: center;
-	grid-template-columns:
-		[thumbnail] var( --thumbnail-size )
-		[title] var( --table-column-title )
-		[potential-size] var( --table-column-potential-size )
-		[device] var( --table-column-device )
-		[page] 1fr
-		[expand] var( --table-column-expand );
-
-	/**
-	 * Narrow screen overrides.
-	 */
-	@media ( max-width: 782px ) {
-		// Remove some columns
-		grid-template-columns:
-			[thumbnail] var( --thumbnail-size )
-			[title] 1fr
-			[expand] var( --table-column-expand );
-	}
-}
-
diff --git a/projects/plugins/boost/app/assets/src/css/components/isa/recommendations/table.scss b/projects/plugins/boost/app/assets/src/css/components/isa/recommendations/table.scss
deleted file mode 100644
index 7b59c8e1cb0ca..0000000000000
--- a/projects/plugins/boost/app/assets/src/css/components/isa/recommendations/table.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-.jb-loading-spinner {
-	position: fixed;
-	top: 50%;
-	left: 50%;
-	transform: translate( -50%, -50% );
-	z-index: 9000;
-
-	&:not( .active ) {
-		display: none;
-	}
-}
-
-.jb-table {
-	will-change: opacity, filter;
-	transition:
-		opacity 0.3s ease-in-out,
-		filter 0.3s ease-in-out;
-
-	h1 {
-		padding-top: 16px;
-		width: 100%;
-		text-align: center;
-	}
-
-	&.jb-loading {
-		filter: grayscale( 0.5 );
-		opacity: 0.2;
-		position: relative;
-	}
-}
-
-.jb-table-header {
-	@media ( max-width: 782px ) {
-		display: none !important;
-	}
-
-	font-size: 0.875rem;
-	color: var( --gray-60 );
-	border: var( --border );
-	border-top-left-radius: var( --border-radius );
-	border-top-right-radius: var( --border-radius );
-	border-bottom: 0;
-	background-color: #fff;
-}
-
-.jb-table-header__image {
-	grid-column: thumbnail / title;
-}
-
-.jb-table-header__device {
-	grid-column: device;
-	text-align: center;
-}
-
-.jb-table-header__potential-size {
-	grid-column: potential-size;
-}
-
-.jb-table-header__page {
-	grid-column: page / expand;
-}
diff --git a/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/row-types/broken-data-row/broken-data-row.tsx b/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/row-types/broken-data-row/broken-data-row.tsx
index 5707030c66cce..4688b3f47c8ef 100644
--- a/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/row-types/broken-data-row/broken-data-row.tsx
+++ b/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/row-types/broken-data-row/broken-data-row.tsx
@@ -1,10 +1,11 @@
 import { __ } from '@wordpress/i18n';
 import TableRow from '../table-row/table-row';
+import rowStyles from '../../row.module.scss';
 
 const BrokenDataRow: React.FC = () => {
 	return (
 		<TableRow>
-			<div className="jb-table-row-title">
+			<div className={ rowStyles[ 'table-row-title' ] }>
 				{ __( 'An error occurred while loading this entry.', 'jetpack-boost' ) }
 			</div>
 		</TableRow>
diff --git a/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/row-types/image-missing-row/image-missing-row.tsx b/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/row-types/image-missing-row/image-missing-row.tsx
index 1c292c0ac3712..bc61aebf6a918 100644
--- a/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/row-types/image-missing-row/image-missing-row.tsx
+++ b/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/row-types/image-missing-row/image-missing-row.tsx
@@ -6,7 +6,7 @@ import Pill from '$features/image-size-analysis/recommendations/ui/pill/pill';
 import RowTitle from '$features/image-size-analysis/recommendations/ui/row-title/row-title';
 import { removeGetParams } from '$lib/utils/remove-get-params';
 import TableRowHover from '../table-row-hover/table-row-hover';
-
+import rowStyles from '../../row.module.scss';
 interface ImageMissingRowProps {
 	enableTransition: boolean;
 	details: IsaImage;
@@ -17,23 +17,23 @@ const ImageMissingRow: React.FC< ImageMissingRowProps > = ( { details } ) => {
 
 	return (
 		<TableRow>
-			<div className="jb-thumbnail-image-missing">{ __( 'Image Missing', 'jetpack-boost' ) }</div>
+			<div>{ __( 'Image Missing', 'jetpack-boost' ) }</div>
 
-			<div className="jb-table-row-title">
+			<div className={ rowStyles[ 'table-row-title' ] }>
 				<RowTitle title={ removeGetParams( title ) } url={ details.page.url } />
 			</div>
 
-			<div className="jb-table-row-potential-size">
+			<div>
 				<Pill color="#facfd2">? KB</Pill>
 
-				<div className="jb-arrow">→</div>
+				<div>→</div>
 
 				<Pill color="#d0e6b8">? KB</Pill>
 			</div>
 
-			<div className="jb-table-row-hover-content">
+			<div>
 				<TableRowHover
-					edit_url={ details.page.edit_url }
+					edit_url={ details.page.edit_url || undefined }
 					device_type={ null }
 					instructions={ __(
 						'This image does not appear to load. Please check the URL in the relevant page.',
@@ -42,11 +42,11 @@ const ImageMissingRow: React.FC< ImageMissingRowProps > = ( { details } ) => {
 				/>
 			</div>
 
-			<div className="jb-table-row-device">
+			<div>
 				<Device device={ details.device_type } />
 			</div>
 
-			<div className="jb-table-row-page">
+			<div>
 				<a href={ details.page.url }>{ details.page.title }</a>
 			</div>
 		</TableRow>
diff --git a/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/row-types/image-size-row/image-size-row.tsx b/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/row-types/image-size-row/image-size-row.tsx
index 8979fe60c5bae..0f338634d1f54 100644
--- a/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/row-types/image-size-row/image-size-row.tsx
+++ b/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/row-types/image-size-row/image-size-row.tsx
@@ -11,6 +11,7 @@ import TableRowHover from '../table-row-hover/table-row-hover';
 import { removeGetParams } from '$lib/utils/remove-get-params';
 import { recordBoostEventAndRedirect } from '$lib/utils/analytics';
 import styles from './image-size-row.module.scss';
+import rowStyles from '../../row.module.scss';
 import clsx from 'clsx';
 
 interface ImageSizeRowProps {
@@ -63,7 +64,7 @@ const TableRowContent: React.FC< ContentProps > = ( { title, details, toggleImag
 				<Thumbnail title={ title } url={ details.image.url } width={ 65 } height={ 65 } />
 			</div>
 
-			<div className="jb-table-row__title">
+			<div className={ rowStyles[ 'table-row-title' ] }>
 				<RowTitle
 					title={ title ? removeGetParams( title ) : __( 'Untitled', 'jetpack-boost' ) }
 					url={ details.page.url }
@@ -78,10 +79,10 @@ const TableRowContent: React.FC< ContentProps > = ( { title, details, toggleImag
 				<Pill color="#d0e6b8">{ potentialSize } KB</Pill>
 			</div>
 
-			<div className={ clsx( styles[ 'hover-content' ], 'jb-table-row__hover-content' ) }>
+			<div className={ clsx( styles[ 'hover-content' ], rowStyles[ 'hover-content' ] ) }>
 				<TableRowHover
 					device_type={ details.device_type }
-					edit_url={ details.page.edit_url }
+					edit_url={ details.page.edit_url || undefined }
 					instructions={ details.instructions }
 					imageId={ details.id }
 					isFixed={ details.image.fixed }
@@ -89,11 +90,11 @@ const TableRowContent: React.FC< ContentProps > = ( { title, details, toggleImag
 				/>
 			</div>
 
-			<div className={ clsx( styles.device, 'jb-table-row__device' ) }>
+			<div className={ clsx( styles.device, rowStyles.device ) }>
 				<Device device={ details.device_type } />
 			</div>
 
-			<div className={ clsx( styles.page, 'jb-table-row__page' ) }>
+			<div className={ clsx( styles.page, rowStyles.page ) }>
 				<a href={ details.page.url } className={ styles.link }>
 					{ details.page.title }
 				</a>
diff --git a/projects/plugins/boost/app/assets/src/css/components/isa/recommendations/row-types/table-row.scss b/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/row-types/table-row/table-row.module.scss
similarity index 53%
rename from projects/plugins/boost/app/assets/src/css/components/isa/recommendations/row-types/table-row.scss
rename to projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/row-types/table-row/table-row.module.scss
index e18c2cd2037e0..2aec470f26db7 100644
--- a/projects/plugins/boost/app/assets/src/css/components/isa/recommendations/row-types/table-row.scss
+++ b/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/row-types/table-row/table-row.module.scss
@@ -1,4 +1,16 @@
-.jb-table-row-container {
+@mixin bottom-border-radius {
+	border-bottom-right-radius: var(--border-radius);
+	border-bottom-left-radius: var(--border-radius);
+	border-bottom: var(--border);
+}
+
+@mixin top-border-radius {
+	border-top-right-radius: var(--border-radius);
+	border-top-left-radius: var(--border-radius);
+	border-top: var(--border);
+}
+
+.table-row-container {
 	background-color: #fff;
 	border-top: var(--border);
 	border-left: var(--border);
@@ -27,74 +39,32 @@
 	}
 
 	&:last-child {
-		border-bottom-right-radius: var(--border-radius);
-		border-bottom-left-radius: var(--border-radius);
-		border-bottom: var(--border);
+		@include bottom-border-radius;
 	}
 }
 
 // Expanded view, but not the one at the very top.
-:not(.jb-table-header) + .jb-table-row-container.expanded {
+.table-row-container + .table-row-container.expanded {
 	margin-top: var(--expanded-gap);
-	border-top-right-radius: var(--border-radius);
-	border-top-left-radius: var(--border-radius);
+	@include top-border-radius;
 }
 
 // The row after the expanded view.
-.expanded + .jb-table-row-container {
-	border-top-right-radius: var(--border-radius);
-	border-top-left-radius: var(--border-radius);
+.expanded + .table-row-container {
+	@include top-border-radius;
 }
 
 // The row before the expanded view.
-.jb-table-row-container:has(+ .expanded) {
-	border-bottom-right-radius: var(--border-radius);
-	border-bottom-left-radius: var(--border-radius);
-	border-bottom: var(--border);
+.table-row-container:has(+ .expanded) {
+	@include bottom-border-radius;
 }
 
-.jb-table-row-container.expanded {
+.table-row-container.expanded {
 	margin-bottom: var(--expanded-gap);
+	@include bottom-border-radius;
 }
 
-.jb-table-row {
-	min-height: 115px;
-	cursor: pointer;
-
-	.jb-table-row__hover-content {
-		display: none;
-	}
-
-	&:hover {
-		background-color: #f6f7f7;
-
-		// Can't use overflow because of the box-shadow workaround above.
-		// So instead, repeating the border radius.
-		.jb-table-row__expanded & {
-			border-top-right-radius: var(--border-radius);
-			border-top-left-radius: var(--border-radius);
-		}
-
-		.jb-table-row__hover-content {
-			display: block;
-
-			@media (max-width: 782px) {
-				display: none;
-			}
-		}
-
-		.jb-table-row__device,
-		.jb-table-row__page {
-			display: none;
-		}
-	}
-
-	.jb-table-row__page a {
-		text-decoration: none;
-	}
-}
-
-.jb-table-row__expand {
+.expand-indicator {
 	cursor: pointer;
 	text-align: center;
 	grid-column: expand;
@@ -105,25 +75,18 @@
 	}
 }
 
-.jb-table-row__expanded {
+.expanded-content-row {
 	display: flex;
 	justify-content: space-between;
 	padding: var(--gap);
 	padding-left: calc(var(--thumbnail-size) + var(--gap) * 2);
 
 	.expanded & {
-		border-bottom-right-radius: var(--border-radius);
-		border-bottom-left-radius: var(--border-radius);
-		border-bottom: var(--border);
+		@include bottom-border-radius;
 	}
 
-
 	@media (max-width: 782px) {
 		flex-direction: column;
 		padding-left: var(--gap);
 	}
 }
-
-.jb-table-row__title {
-	grid-column: title;
-}
diff --git a/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/row-types/table-row/table-row.tsx b/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/row-types/table-row/table-row.tsx
index d56f849c2901c..044ec70260596 100644
--- a/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/row-types/table-row/table-row.tsx
+++ b/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/row-types/table-row/table-row.tsx
@@ -1,5 +1,8 @@
 import React, { useState, useCallback } from 'react';
 import clsx from 'clsx';
+import styles from './table-row.module.scss';
+import rowStyles from '../../row.module.scss';
+
 interface TableRowProps {
 	children: React.ReactNode;
 	expandedContent?: React.ReactNode;
@@ -26,15 +29,27 @@ const TableRow: React.FC< TableRowProps > = ( { children, expandedContent } ) =>
 	);
 
 	return (
-		<div className={ clsx( 'jb-table-row-container', { expanded } ) }>
+		<div
+			className={ clsx( styles[ 'table-row-container' ], {
+				[ styles.expanded ]: expanded,
+				[ rowStyles.expanded ]: expanded,
+			} ) }
+		>
 			{ /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */ }
-			<div className="jb-table-row jb-recommendation-page-grid" onClick={ toggleExpand }>
+			<div
+				className={ clsx( rowStyles[ 'table-row' ], rowStyles[ 'row-grid' ] ) }
+				onClick={ toggleExpand }
+			>
 				{ children }
 
-				{ canExpand && <div className="jb-table-row__expand">{ expanded ? '↑' : '↓' }</div> }
+				{ canExpand && (
+					<div className={ styles[ 'expand-indicator' ] }>{ expanded ? '↑' : '↓' }</div>
+				) }
 			</div>
 
-			{ expanded && canExpand && <div className="jb-table-row__expanded">{ expandedContent }</div> }
+			{ expanded && canExpand && (
+				<div className={ styles[ 'expanded-content-row' ] }>{ expandedContent }</div>
+			) }
 		</div>
 	);
 };
diff --git a/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/row.module.scss b/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/row.module.scss
new file mode 100644
index 0000000000000..9d1f4b52a3278
--- /dev/null
+++ b/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/row.module.scss
@@ -0,0 +1,67 @@
+.row-grid {
+	display: grid;
+	padding: var( --padding );
+	gap: var( --gap );
+	align-items: center;
+	grid-template-columns:
+		[thumbnail] var( --thumbnail-size )
+		[title] var( --table-column-title )
+		[potential-size] var( --table-column-potential-size )
+		[device] var( --table-column-device )
+		[page] 1fr
+		[expand] var( --table-column-expand );
+
+	/**
+	 * Narrow screen overrides.
+	 */
+	@media ( max-width: 782px ) {
+		// Remove some columns
+		grid-template-columns:
+			[thumbnail] var( --thumbnail-size )
+			[title] 1fr
+			[expand] var( --table-column-expand );
+	}
+}
+
+.table-row-title {
+	grid-column: title;
+}
+
+
+
+.table-row {
+	min-height: 115px;
+	cursor: pointer;
+
+	.hover-content {
+		display: none;
+	}
+
+	&:hover {
+		background-color: #f6f7f7;
+
+		// Can't use overflow because of the box-shadow workaround above.
+		// So instead, repeating the border radius.
+		.expanded & {
+			border-top-right-radius: var(--border-radius);
+			border-top-left-radius: var(--border-radius);
+		}
+
+		.hover-content {
+			display: block;
+
+			@media (max-width: 782px) {
+				display: none;
+			}
+		}
+
+		.device,
+		.page {
+			display: none;
+		}
+	}
+
+	.page a {
+		text-decoration: none;
+	}
+}
\ No newline at end of file
diff --git a/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/table/table.module.scss b/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/table/table.module.scss
index 6aeac2b6fe337..35b695400466e 100644
--- a/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/table/table.module.scss
+++ b/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/table/table.module.scss
@@ -2,3 +2,66 @@
 	max-width: 1320px;
 	margin: 0 auto;
 }
+
+.table {
+	will-change: opacity, filter;
+	transition:
+		opacity 0.3s ease-in-out,
+		filter 0.3s ease-in-out;
+
+	h1 {
+		padding-top: 16px;
+		width: 100%;
+		text-align: center;
+	}
+
+	&.loading {
+		filter: grayscale( 0.5 );
+		opacity: 0.2;
+		position: relative;
+	}
+}
+
+.loading-spinner {
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	transform: translate( -50%, -50% );
+	z-index: 9000;
+
+	&:not( .active ) {
+		display: none;
+	}
+}
+
+.table-header {
+	@media ( max-width: 782px ) {
+		display: none !important;
+	}
+
+	font-size: 0.875rem;
+	color: var( --gray-60 );
+	border: var( --border );
+	border-top-left-radius: var( --border-radius );
+	border-top-right-radius: var( --border-radius );
+	border-bottom: 0;
+	background-color: #fff;
+
+	.image {
+		grid-column: thumbnail / title;
+	}
+
+	.device {
+		grid-column: device;
+		text-align: center;
+	}
+
+	.potential-size {
+		grid-column: potential-size;
+	}
+
+	.page {
+		grid-column: page / expand;
+	}
+
+}
\ No newline at end of file
diff --git a/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/table/table.tsx b/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/table/table.tsx
index 51149541d79ad..4a91bbb763e7c 100644
--- a/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/table/table.tsx
+++ b/projects/plugins/boost/app/assets/src/js/features/image-size-analysis/recommendations/table/table.tsx
@@ -12,6 +12,7 @@ import {
 } from '$features/image-size-analysis';
 import clsx from 'clsx';
 import styles from './table.module.scss';
+import rowStyles from '../row.module.scss';
 
 const toggleImageFix = ( imageDetails: IsaImage ) => {
 	const imageFixer = useImageFixer();
@@ -46,7 +47,7 @@ interface TableProps {
 const Table = ( { isaDataLoading, images, isaReport }: TableProps ) => {
 	return (
 		<>
-			<div className={ clsx( 'jb-loading-spinner', { 'jb-active': isaDataLoading } ) }>
+			<div className={ clsx( styles[ 'loading-spinner' ], { [ styles.active ]: isaDataLoading } ) }>
 				<Spinner size="3rem" lineWidth="4px" />
 			</div>
 
@@ -57,12 +58,12 @@ const Table = ( { isaDataLoading, images, isaReport }: TableProps ) => {
 						: __( 'No image size issues found yet…', 'jetpack-boost' ) }
 				</h4>
 			) : (
-				<div className={ clsx( 'jb-table', { 'jb-loading': isaDataLoading } ) }>
-					<div className="jb-table-header jb-recommendation-page-grid">
-						<div className="jb-table-header__image">Image</div>
-						<div className="jb-table-header__potential-size">Potential Size</div>
-						<div className="jb-table-header__device">Device</div>
-						<div className="jb-table-header__page">Page/Post</div>
+				<div className={ clsx( styles.table, { [ styles.loading ]: isaDataLoading } ) }>
+					<div className={ clsx( styles[ 'table-header' ], rowStyles[ 'row-grid' ] ) }>
+						<div className={ styles.image }>Image</div>
+						<div className={ styles[ 'potential-size' ] }>Potential Size</div>
+						<div className={ styles.device }>Device</div>
+						<div className={ styles.page }>Page/Post</div>
 					</div>
 
 					{ isaDataLoading
diff --git a/projects/plugins/boost/changelog/update-recommendations-scss b/projects/plugins/boost/changelog/update-recommendations-scss
new file mode 100644
index 0000000000000..297c62ed6dcd9
--- /dev/null
+++ b/projects/plugins/boost/changelog/update-recommendations-scss
@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Refactor styles by moving them from global to modules
+
+