diff --git a/src/OnboardingSPA/components/CardWithOptionsTemplate/CardWithOptions/index.js b/src/OnboardingSPA/components/CardWithOptions/index.js
similarity index 85%
rename from src/OnboardingSPA/components/CardWithOptionsTemplate/CardWithOptions/index.js
rename to src/OnboardingSPA/components/CardWithOptions/index.js
index 75e748fbc..e60e4e847 100644
--- a/src/OnboardingSPA/components/CardWithOptionsTemplate/CardWithOptions/index.js
+++ b/src/OnboardingSPA/components/CardWithOptions/index.js
@@ -1,11 +1,11 @@
-import { OptionItem } from '../';
 import { memo } from '@wordpress/element';
+import OptionWithHeadingSubHeading from '../OptionWithHeadingSubHeading';
 
 const CardWithOptions = ( { title, options, selection, callback } ) => {
 	const buildOptions = () => {
 		return options.map( ( data, idx ) => {
 			return (
-				<OptionItem
+				<OptionWithHeadingSubHeading
 					key={ idx }
 					idx={ idx }
 					title={ data.title }
diff --git a/src/OnboardingSPA/components/CardWithOptionsTemplate/CardWithOptions/stylesheet.scss b/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss
similarity index 100%
rename from src/OnboardingSPA/components/CardWithOptionsTemplate/CardWithOptions/stylesheet.scss
rename to src/OnboardingSPA/components/CardWithOptions/stylesheet.scss
diff --git a/src/OnboardingSPA/components/CardWithOptionsTemplate/index.js b/src/OnboardingSPA/components/CardWithOptionsTemplate/index.js
deleted file mode 100644
index 96e017c1a..000000000
--- a/src/OnboardingSPA/components/CardWithOptionsTemplate/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as OptionItem } from './OptionItem';
-export { default as CardWithOptions } from './CardWithOptions';
diff --git a/src/OnboardingSPA/components/CardWithOptionsTemplate/OptionItem/index.js b/src/OnboardingSPA/components/OptionWithHeadingSubHeading/index.js
similarity index 50%
rename from src/OnboardingSPA/components/CardWithOptionsTemplate/OptionItem/index.js
rename to src/OnboardingSPA/components/OptionWithHeadingSubHeading/index.js
index ae4bc765f..cc3ac3bc6 100644
--- a/src/OnboardingSPA/components/CardWithOptionsTemplate/OptionItem/index.js
+++ b/src/OnboardingSPA/components/OptionWithHeadingSubHeading/index.js
@@ -2,13 +2,19 @@ import classNames from 'classnames';
 import { memo } from '@wordpress/element';
 import { Icon, chevronRight } from '@wordpress/icons';
 
-const OptionItem = ( { idx, title, desc, isSelected, callback } ) => {
+const OptionWithHeadingSubHeading = ( {
+	idx,
+	title,
+	desc,
+	isSelected,
+	callback,
+} ) => {
 	return (
 		<div
 			key={ idx }
 			role="button"
 			tabIndex={ 0 }
-			className={ 'nfd-sg-card__data__option' }
+			className={ 'nfd__option_heading_subheading' }
 			onClick={ () => {
 				if ( callback && typeof callback === 'function' ) {
 					callback( idx + 1 );
@@ -22,20 +28,27 @@ const OptionItem = ( { idx, title, desc, isSelected, callback } ) => {
 		>
 			<div
 				className={ classNames(
-					'nfd-sg-card__data__option__wrapper',
-					isSelected && 'nfd-sg-card__data__option__wrapper--selected'
+					'nfd__option_heading_subheading__wrapper',
+					isSelected &&
+						'nfd__option_heading_subheading__wrapper--selected'
 				) }
 			>
-				<div className={ 'nfd-sg-card__data__option__left' }>
-					<div className={ 'nfd-sg-card__data__option__left_top' }>
+				<div className={ 'nfd__option_heading_subheading__left' }>
+					<div
+						className={ 'nfd__option_heading_subheading__left_top' }
+					>
 						{ title }
 					</div>
-					<div className={ 'nfd-sg-card__data__option__left_bottom' }>
+					<div
+						className={
+							'nfd__option_heading_subheading__left_bottom'
+						}
+					>
 						{ desc }
 					</div>
 				</div>
 				<Icon
-					className={ 'nfd-sg-card__data__option__right' }
+					className={ 'nfd__option_heading_subheading__right' }
 					icon={ chevronRight }
 				/>
 			</div>
@@ -43,4 +56,4 @@ const OptionItem = ( { idx, title, desc, isSelected, callback } ) => {
 	);
 };
 
-export default memo( OptionItem );
+export default memo( OptionWithHeadingSubHeading );
diff --git a/src/OnboardingSPA/components/CardWithOptionsTemplate/OptionItem/stylesheet.scss b/src/OnboardingSPA/components/OptionWithHeadingSubHeading/stylesheet.scss
similarity index 96%
rename from src/OnboardingSPA/components/CardWithOptionsTemplate/OptionItem/stylesheet.scss
rename to src/OnboardingSPA/components/OptionWithHeadingSubHeading/stylesheet.scss
index 617a06774..5e5d6a8d6 100644
--- a/src/OnboardingSPA/components/CardWithOptionsTemplate/OptionItem/stylesheet.scss
+++ b/src/OnboardingSPA/components/OptionWithHeadingSubHeading/stylesheet.scss
@@ -1,6 +1,6 @@
 $background-color: var(--nfd-onboarding-card-background);
 
-.nfd-sg-card__data__option {
+.nfd__option_heading_subheading {
 
 	&__wrapper {
 		display: flex;
diff --git a/src/OnboardingSPA/steps/SiteGen/Experience/index.js b/src/OnboardingSPA/steps/SiteGen/Experience/index.js
index c4c1a9c68..198b7e60a 100644
--- a/src/OnboardingSPA/steps/SiteGen/Experience/index.js
+++ b/src/OnboardingSPA/steps/SiteGen/Experience/index.js
@@ -5,7 +5,7 @@ import getContents from './contents';
 import { HEADER_SITEGEN } from '../../../../constants';
 import { store as nfdOnboardingStore } from '../../../store';
 import CommonLayout from '../../../components/Layouts/Common';
-import { CardWithOptions } from '../../../components/CardWithOptionsTemplate';
+import CardWithOptions from '../../../components/CardWithOptions';
 import SiteGenLoader from '../../../components/Loaders/SiteGenLoader';
 import SitegenAiStateHandler from '../../../components/StateHandlers/SitegenAi';
 
diff --git a/src/OnboardingSPA/styles/app.scss b/src/OnboardingSPA/styles/app.scss
index a5cacf512..2921e45f8 100644
--- a/src/OnboardingSPA/styles/app.scss
+++ b/src/OnboardingSPA/styles/app.scss
@@ -56,8 +56,8 @@
 @import "../components/TextInput/TextInputSiteGen/stylesheet";
 @import "../components/ToggleDarkMode/stylesheet";
 @import "../components/Button/NextButtonSiteGen/stylesheet";
-@import "../components/CardWithOptionsTemplate/OptionItem/stylesheet";
-@import "../components/CardWithOptionsTemplate/CardWithOptions/stylesheet";
+@import "../components/OptionWithHeadingSubHeading/stylesheet";
+@import "../components/CardWithOptions/stylesheet";
 @import "../components/Loaders/SiteGenLoader/stylesheet";
 @import "../components/Footer/stylesheet";
 @import "../components/LivePreview/SiteGenCard/stylesheet";