diff --git a/src/blocks/rating-box/block.json b/src/blocks/rating-box/block.json
index b3cb90ff..bc8de072 100644
--- a/src/blocks/rating-box/block.json
+++ b/src/blocks/rating-box/block.json
@@ -1,6 +1,7 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
+	"version": "21.0.0",
 	"textdomain": "snow-monkey-blocks",
 	"name": "snow-monkey-blocks/rating-box",
 	"title": "Rating box",
@@ -14,8 +15,25 @@
 	},
 	"supports": {
 		"html": false,
+		"color": {
+			"background": true,
+			"text": true
+		},
 		"spacing": {
-			"margin": true
+			"margin": true,
+			"padding": true
+		},
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"style": true,
+				"width": true
+			}
 		}
 	},
 	"example": {
diff --git a/src/blocks/rating-box/item/block.json b/src/blocks/rating-box/item/block.json
index b8b927fa..1caa7aea 100644
--- a/src/blocks/rating-box/item/block.json
+++ b/src/blocks/rating-box/item/block.json
@@ -20,6 +20,18 @@
 		},
 		"color": {
 			"type": "string"
+		},
+		"titleFontSizeSlug": {
+			"type": "string"
+		},
+		"titleFontSize": {
+			"type": "string"
+		},
+		"numericFontSizeSlug": {
+			"type": "string"
+		},
+		"numericFontSize": {
+			"type": "string"
 		}
 	},
 	"supports": {
diff --git a/src/blocks/rating-box/item/deprecated.js b/src/blocks/rating-box/item/deprecated.js
index 08999b77..46e1b652 100644
--- a/src/blocks/rating-box/item/deprecated.js
+++ b/src/blocks/rating-box/item/deprecated.js
@@ -8,6 +8,54 @@ const blockAttributes = metadata.attributes;
 const blockSupports = metadata.supports;
 
 export default [
+	{
+		attributes: {
+			...blockAttributes,
+		},
+
+		supports: {
+			...blockSupports,
+		},
+
+		save( { attributes, className } ) {
+			const { title, rating, color } = attributes;
+
+			const classes = classnames( 'smb-rating-box__item', className );
+
+			const styles = {
+				'--smb-rating-box--rating-background-color': color || undefined,
+			};
+
+			const itemEvaluationRatingStyles = {
+				width: `${ rating * 10 }%`,
+			};
+
+			return (
+				<div
+					{ ...useBlockProps.save( {
+						className: classes,
+						style: styles,
+					} ) }
+				>
+					<div className="smb-rating-box__item__title">
+						<RichText.Content value={ title } />
+					</div>
+
+					<div className="smb-rating-box__item__evaluation">
+						<div className="smb-rating-box__item__evaluation__bar">
+							<div className="smb-rating-box__item__evaluation__numeric">
+								{ rating }
+							</div>
+							<div
+								className="smb-rating-box__item__evaluation__rating"
+								style={ itemEvaluationRatingStyles }
+							/>
+						</div>
+					</div>
+				</div>
+			);
+		},
+	},
 	{
 		attributes: {
 			...blockAttributes,
diff --git a/src/blocks/rating-box/item/edit.js b/src/blocks/rating-box/item/edit.js
index 6ab2394b..84c4551f 100644
--- a/src/blocks/rating-box/item/edit.js
+++ b/src/blocks/rating-box/item/edit.js
@@ -1,13 +1,19 @@
 import classnames from 'classnames';
 
 import {
+	FontSizePicker,
 	InspectorControls,
 	RichText,
-	__experimentalPanelColorGradientSettings as PanelColorGradientSettings,
 	useBlockProps,
+	getFontSizeClass,
+	getFontSizeObjectByValue,
+	useSettings,
+	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
+	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
 } from '@wordpress/block-editor';
 
 import {
+	BaseControl,
 	RangeControl,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
@@ -19,8 +25,18 @@ import { toNumber } from '@smb/helper';
 
 import metadata from './block.json';
 
-export default function ( { attributes, setAttributes, className } ) {
-	const { title, rating, color } = attributes;
+export default function ( { attributes, setAttributes, className, clientId } ) {
+	const {
+		title,
+		rating,
+		color,
+		titleFontSizeSlug,
+		titleFontSize,
+		numericFontSizeSlug,
+		numericFontSize,
+	} = attributes;
+
+	const [ fontSizes ] = useSettings( 'typography.fontSizes' );
 
 	const classes = classnames( 'smb-rating-box__item', className );
 
@@ -37,12 +53,125 @@ export default function ( { attributes, setAttributes, className } ) {
 		style: styles,
 	} );
 
+	const selectedTitleFontSize =
+		fontSizes.find(
+			( fontSize ) =>
+				!! titleFontSizeSlug && fontSize.slug === titleFontSizeSlug
+		)?.size || titleFontSize;
+
+	const selectedNumericFontSize =
+		fontSizes.find(
+			( fontSize ) =>
+				!! numericFontSizeSlug && fontSize.slug === numericFontSizeSlug
+		)?.size || numericFontSize;
+
+	const titleFontSizeClass = !! titleFontSizeSlug
+		? getFontSizeClass( titleFontSizeSlug )
+		: undefined;
+
+	const numericFontSizeClass = !! numericFontSizeSlug
+		? getFontSizeClass( numericFontSizeSlug )
+		: undefined;
+
 	return (
 		<>
-			<InspectorControls group="styles">
-				<PanelColorGradientSettings
-					title={ __( 'Color', 'snow-monkey-blocks' ) }
-					initialOpen={ false }
+			<InspectorControls group="typography">
+				<ToolsPanelItem
+					panelId={ clientId }
+					hasValue={ () =>
+						titleFontSizeSlug !== metadata.titleFontSizeSlug ||
+						titleFontSize !== metadata.titleFontSize
+					}
+					isShownByDefault
+					label={ __( 'Title font size', 'snow-monkey-blocks' ) }
+					resetAllFilter={ () => ( {
+						titleFontSizeSlug: metadata.titleFontSizeSlug,
+						titleFontSize: metadata.titleFontSize,
+					} ) }
+					onDeselect={ () => {
+						setAttributes( {
+							titleFontSizeSlug: metadata.titleFontSizeSlug,
+							titleFontSize: metadata.titleFontSize,
+						} );
+					} }
+				>
+					<BaseControl
+						label={ __( 'Title', 'snow-monkey-blocks' ) }
+						id="snow-monkey-blocks/rating-box-item/title-font-size"
+					>
+						<FontSizePicker
+							value={ selectedTitleFontSize }
+							onChange={ ( value ) => {
+								const fontSizeSlug = getFontSizeObjectByValue(
+									fontSizes,
+									value
+								).slug;
+
+								setAttributes( {
+									titleFontSizeSlug:
+										fontSizeSlug || undefined,
+									titleFontSize: ! fontSizeSlug
+										? value
+										: undefined,
+								} );
+							} }
+							withReset={ false }
+							withSlider
+						/>
+					</BaseControl>
+				</ToolsPanelItem>
+
+				<ToolsPanelItem
+					panelId={ clientId }
+					hasValue={ () =>
+						numericFontSizeSlug !== metadata.numericFontSizeSlug ||
+						numericFontSize !== metadata.numericFontSize
+					}
+					isShownByDefault
+					label={ __( 'Numeric font size', 'snow-monkey-blocks' ) }
+					resetAllFilter={ () => ( {
+						numericFontSizeSlug: metadata.numericFontSizeSlug,
+						numericFontSize: metadata.numericFontSize,
+					} ) }
+					onDeselect={ () => {
+						setAttributes( {
+							numericFontSizeSlug: metadata.numericFontSizeSlug,
+							numericFontSize: metadata.numericFontSize,
+						} );
+					} }
+				>
+					<BaseControl
+						label={ __( 'Numeric', 'snow-monkey-blocks' ) }
+						id="snow-monkey-blocks/rating-box-item/numeric-font-size"
+					>
+						<FontSizePicker
+							value={ selectedNumericFontSize }
+							onChange={ ( value ) => {
+								const fontSizeSlug = getFontSizeObjectByValue(
+									fontSizes,
+									value
+								).slug;
+
+								setAttributes( {
+									numericFontSizeSlug:
+										fontSizeSlug || undefined,
+									numericFontSize: ! fontSizeSlug
+										? value
+										: undefined,
+								} );
+							} }
+							withReset={ false }
+							withSlider
+						/>
+					</BaseControl>
+				</ToolsPanelItem>
+			</InspectorControls>
+
+			<InspectorControls group="color">
+				<ColorGradientSettingsDropdown
+					panelId={ clientId }
+					__experimentalIsRenderedInSidebar
+					{ ...useMultipleOriginColorsAndGradients() }
 					settings={ [
 						{
 							colorValue: color,
@@ -50,11 +179,13 @@ export default function ( { attributes, setAttributes, className } ) {
 								setAttributes( {
 									color: value,
 								} ),
+							resetAllFilter: () => ( {
+								color: metadata.color,
+							} ),
 							label: __( 'Bar color', 'snow-monkey-blocks' ),
 						},
 					] }
-					__experimentalIsRenderedInSidebar
-				></PanelColorGradientSettings>
+				/>
 			</InspectorControls>
 
 			<InspectorControls>
@@ -89,23 +220,43 @@ export default function ( { attributes, setAttributes, className } ) {
 			</InspectorControls>
 
 			<div { ...blockProps }>
-				<RichText
-					className="smb-rating-box__item__title"
-					placeholder={ __( 'Write title…', 'snow-monkey-blocks' ) }
-					value={ title }
-					multiline={ false }
-					onChange={ ( value ) =>
-						setAttributes( {
-							title: value,
-						} )
-					}
-				/>
+				<div className="smb-rating-box__item__body">
+					<RichText
+						className={ classnames(
+							'smb-rating-box__item__title',
+							titleFontSizeClass
+						) }
+						style={ {
+							fontSize: titleFontSize || undefined,
+						} }
+						placeholder={ __(
+							'Write title…',
+							'snow-monkey-blocks'
+						) }
+						value={ title }
+						multiline={ false }
+						onChange={ ( value ) =>
+							setAttributes( {
+								title: value,
+							} )
+						}
+					/>
+
+					<div
+						className={ classnames(
+							'smb-rating-box__item__numeric',
+							numericFontSizeClass
+						) }
+						style={ {
+							fontSize: numericFontSize || undefined,
+						} }
+					>
+						{ rating }
+					</div>
+				</div>
 
 				<div className="smb-rating-box__item__evaluation">
 					<div className="smb-rating-box__item__evaluation__bar">
-						<div className="smb-rating-box__item__evaluation__numeric">
-							{ rating }
-						</div>
 						<div
 							className="smb-rating-box__item__evaluation__rating"
 							style={ itemEvaluationRatingStyles }
diff --git a/src/blocks/rating-box/item/save.js b/src/blocks/rating-box/item/save.js
index 8d426c83..1b37ffbc 100644
--- a/src/blocks/rating-box/item/save.js
+++ b/src/blocks/rating-box/item/save.js
@@ -1,9 +1,21 @@
 import classnames from 'classnames';
 
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useBlockProps,
+	getFontSizeClass,
+} from '@wordpress/block-editor';
 
 export default function ( { attributes, className } ) {
-	const { title, rating, color } = attributes;
+	const {
+		title,
+		rating,
+		color,
+		titleFontSizeSlug,
+		titleFontSize,
+		numericFontSizeSlug,
+		numericFontSize,
+	} = attributes;
 
 	const classes = classnames( 'smb-rating-box__item', className );
 
@@ -15,17 +27,44 @@ export default function ( { attributes, className } ) {
 		width: `${ rating * 10 }%`,
 	};
 
+	const titleFontSizeClass = !! titleFontSizeSlug
+		? getFontSizeClass( titleFontSizeSlug )
+		: undefined;
+
+	const numericFontSizeClass = !! numericFontSizeSlug
+		? getFontSizeClass( numericFontSizeSlug )
+		: undefined;
+
 	return (
 		<div { ...useBlockProps.save( { className: classes, style: styles } ) }>
-			<div className="smb-rating-box__item__title">
-				<RichText.Content value={ title } />
+			<div className="smb-rating-box__item__body">
+				<div
+					className={ classnames(
+						'smb-rating-box__item__title',
+						titleFontSizeClass
+					) }
+					style={ {
+						fontSize: titleFontSize || undefined,
+					} }
+				>
+					<RichText.Content value={ title } />
+				</div>
+
+				<div
+					className={ classnames(
+						'smb-rating-box__item__numeric',
+						numericFontSizeClass
+					) }
+					style={ {
+						fontSize: numericFontSize || undefined,
+					} }
+				>
+					{ rating }
+				</div>
 			</div>
 
 			<div className="smb-rating-box__item__evaluation">
 				<div className="smb-rating-box__item__evaluation__bar">
-					<div className="smb-rating-box__item__evaluation__numeric">
-						{ rating }
-					</div>
 					<div
 						className="smb-rating-box__item__evaluation__rating"
 						style={ itemEvaluationRatingStyles }
diff --git a/src/blocks/rating-box/style.scss b/src/blocks/rating-box/style.scss
index 8121c472..23209459 100644
--- a/src/blocks/rating-box/style.scss
+++ b/src/blocks/rating-box/style.scss
@@ -4,8 +4,14 @@
 	--smb-rating-box--gap: var(--_margin-1);
 	--smb-rating-box--bar-border-radius: var(--_global--border-radius);
 	--smb-rating-box--bar-background-color: var(--_lighter-color-gray);
+	--smb-rating-box--bar-height: 1rem;
 	--smb-rating-box--rating-background-color: #f9bb2d;
 
+	// @deprecated
+	> .smb-rating-box__item__title {
+		margin-bottom: var(--_margin-2);
+	}
+
 	&__body {
 		> * + * {
 			margin-top: var(--smb-rating-box--gap);
@@ -13,14 +19,26 @@
 	}
 
 	&__item {
-		&__title {
-			margin-bottom: var(--_margin-2);
+		display: grid;
+		gap: var(--_margin-2);
+
+		&__body {
+			display: grid;
+			grid-template-columns: 1fr auto;
+			gap: var(--_margin1);
+			align-items: end;
+		}
+
+		&__numeric {
+			@include _set-font-size-level(-2);
 		}
 
 		&__evaluation {
+			grid-column: 1 / -1;
+
 			&__bar,
 			&__rating {
-				height: 1rem;
+				height: var(--smb-rating-box--bar-height);
 				border-radius: var(--smb-rating-box--bar-border-radius);
 			}
 
@@ -36,9 +54,10 @@
 				background-color: var(--smb-rating-box--rating-background-color);
 			}
 
+			// @deprecated
 			&__numeric {
 				position: absolute;
-				top: -2rem;
+				bottom: calc(var(--smb-rating-box--bar-height) + var(--_s-2));
 				right: 0;
 				@include _set-font-size-level(-2);
 			}