diff --git a/src/blocks/blocks/circle-counter/inspector.js b/src/blocks/blocks/circle-counter/inspector.js
index 93d14132f..3cdccbd11 100644
--- a/src/blocks/blocks/circle-counter/inspector.js
+++ b/src/blocks/blocks/circle-counter/inspector.js
@@ -1,20 +1,35 @@
+/**
+ * External dependencies
+ */
+import { clamp } from 'lodash';
+
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 
-import { clamp } from 'lodash';
 
 import {
-	__experimentalColorGradientControl as ColorGradientControl,
-	InspectorControls
+	InspectorControls,
+	PanelColorSettings
 } from '@wordpress/block-editor';
 
 import {
 	PanelBody,
 	RangeControl,
-	SelectControl
+	SelectControl,
+	TextControl,
+	ToggleControl,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption
 } from '@wordpress/components';
+import { Fragment, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+*/
+import { InspectorHeader } from '../../components';
+import { useTabSwitch } from '../../helpers/block-utility';
 
 /**
  *
@@ -25,6 +40,9 @@ const Inspector = ({
 	attributes,
 	setAttributes
 }) => {
+
+	const [ tab, setTab ] = useTabSwitch( attributes.id, 'settings' );
+
 	const onPercentageChange = value => {
 		if ( value === undefined ) {
 			return;
@@ -44,102 +62,152 @@ const Inspector = ({
 
 	return (
 		<InspectorControls>
-			<PanelBody
-				title={ __( 'Settings', 'otter-blocks' ) }
-			>
-				<RangeControl
-					label={ __( 'Percentage', 'otter-blocks' ) }
-					help={ __( 'The value of the counter.', 'otter-blocks' ) }
-					value={ attributes.percentage }
-					onChange={ onPercentageChange }
-					min={ 0 }
-					max={ 100 }
-				/>
-
-				<RangeControl
-					label={ __( 'Duration', 'otter-blocks' ) }
-					help={ __( 'The duration of the animation.', 'otter-blocks' ) }
-					value={ attributes.duration }
-					onChange={ onDurationChange }
-					min={ 0 }
-					max={ 3 }
-				/>
-
-				<SelectControl
-					label={ __( 'Title Style', 'otter-blocks' ) }
-					value={ attributes.titleStyle }
-					options={ [
-						{ label: __( 'Default', 'otter-blocks' ), value: 'default' },
-						{ label: __( 'Hide', 'otter-blocks' ), value: 'hide' },
-						{ label: __( 'Bottom', 'otter-blocks' ), value: 'bottom' }
-					] }
-					onChange={ titleStyle => setAttributes({ titleStyle }) }
-				/>
-			</PanelBody>
-
-			<PanelBody
-				title={ __( 'Style', 'otter-blocks' ) }
-				initialOpen={ false }
-			>
-				<RangeControl
-					label={ __( 'Height', 'otter-blocks' ) }
-					help={ __( 'The height of the circle counter.', 'otter-blocks' ) }
-					value={ attributes.height }
-					onChange={ height => setAttributes({ height }) }
-					min={ 20 }
-					max={ 240 }
-				/>
-
-				<RangeControl
-					label={ __( 'Circle Thickness', 'otter-blocks' ) }
-					help={ __( 'Change the thickness (stroke width) of the circle.', 'otter-blocks' ) }
-					value={ attributes.strokeWidth }
-					onChange={ strokeWidth => setAttributes({ strokeWidth }) }
-					initialPosition={ 10 }
-					min={ 0 }
-					max={ 20 }
-				/>
-
-				<RangeControl
-					label={ __( 'Font Size Title', 'otter-blocks' ) }
-					help={ __( 'Change the font size of the title.', 'otter-blocks' ) }
-					value={ attributes.fontSizeTitle }
-					onChange={ fontSizeTitle => setAttributes({ fontSizeTitle }) }
-					initialPosition={ 37 }
-					min={ 0 }
-					max={ 100 }
-				/>
-
-				<RangeControl
-					label={ __( 'Font Size Percent', 'otter-blocks' ) }
-					help={ __( 'Change the font size of the inner text.', 'otter-blocks' ) }
-					value={ attributes.fontSizePercent }
-					onChange={ fontSizePercent => setAttributes({ fontSizePercent }) }
-					initialPosition={ 27 }
-					min={ 0 }
-					max={ 80 }
-				/>
-
-				{ ( 'hide' !== attributes.titleStyle ) && (
-					<ColorGradientControl
-						label={ __( 'Title Color', 'otter-blocks' ) }
-						colorValue={ attributes.titleColor }
-						onColorChange={ titleColor => setAttributes({ titleColor }) }
-					/>
-				) }
-
-				<ColorGradientControl
-					label={ __( 'Progress Color', 'otter-blocks' ) }
-					colorValue={ attributes.progressColor }
-					onColorChange={ progressColor => setAttributes({ progressColor }) }
-				/>
-
-				<ColorGradientControl
-					label={ __( 'Background Color', 'otter-blocks' ) }
-					colorValue={ attributes.backgroundColor }
-					onColorChange={ backgroundColor => setAttributes({ backgroundColor }) }
-				/>
-			</PanelBody>
+			<InspectorHeader
+				value={ tab }
+				options={[
+					{
+						label: __( 'Settings', 'otter-blocks' ),
+						value: 'settings'
+					},
+					{
+						label: __( 'Style', 'otter-blocks' ),
+						value: 'style'
+					}
+				]}
+				onChange={ setTab }
+			/>
+
+			<div>
+				{
+					'settings' === tab && (
+						<PanelBody
+							title={ __( 'Options', 'otter-blocks' ) }
+						>
+
+							<TextControl
+								label={ __( 'Title', 'otter-blocks' ) }
+								value={ attributes.title }
+								onChange={ title => setAttributes({ title }) }
+							/>
+
+							<RangeControl
+								label={ __( 'Percentage', 'otter-blocks' ) }
+								help={ __( 'The value of the counter.', 'otter-blocks' ) }
+								value={ attributes.percentage }
+								onChange={ onPercentageChange }
+								min={ 0 }
+								max={ 100 }
+							/>
+						</PanelBody>
+					)
+				}
+				{
+					'style' === tab && (
+						<Fragment>
+							<PanelBody
+								title={ __( 'Title', 'otter-blocks' ) }
+								initialOpen={ false }
+							>
+								<ToggleControl
+									label={ __( 'Display the Title', 'otter-blocks' ) }
+									checked={ 'hide' !== attributes.titleStyle }
+									onChange={ () => setAttributes({ titleStyle: 'hide' !== attributes.titleStyle ? 'hide' : 'default' }) }
+								/>
+
+								{ 'hide' !== attributes.titleStyle && (
+									<ToggleGroupControl
+										label={ __( 'Position', 'otter-blocks' ) }
+										value={ attributes.titleStyle }
+										onChange={ titleStyle => setAttributes({ titleStyle }) }
+										isBlock
+									>
+										<ToggleGroupControlOption value="default" label={ __( 'Top', 'otter-blocks' ) } />
+										<ToggleGroupControlOption value="bottom" label={ __( 'Bottom', 'otter-blocks' ) } />
+									</ToggleGroupControl>
+								)}
+							</PanelBody>
+							<PanelColorSettings
+								title={ __( 'Color', 'otter-blocks' ) }
+								colorSettings={ [
+									{
+										value: attributes.titleColor,
+										onChange: titleColor => setAttributes({ titleColor }),
+										label: __( 'Title Color', 'otter-blocks' )
+									},
+									{
+										value: attributes.progressColor,
+										onChange: progressColor => setAttributes({ progressColor }),
+										label: __( 'Progress Color', 'otter-blocks' )
+									},
+									{
+										value: attributes.backgroundColor,
+										onChange: backgroundColor => setAttributes({ backgroundColor }),
+										label: __( 'Background Color', 'otter-blocks' )
+									}
+								] }
+							/>
+							<PanelBody
+								title={ __( 'Dimensions and Motion', 'otter-blocks' ) }
+								initialOpen={ false }
+							>
+								<RangeControl
+									label={ __( 'Height', 'otter-blocks' ) }
+									help={ __( 'The height of the circle counter.', 'otter-blocks' ) }
+									value={ attributes.height }
+									onChange={ height => setAttributes({ height }) }
+									min={ 20 }
+									max={ 240 }
+								/>
+
+								<RangeControl
+									label={ __( 'Circle Thickness', 'otter-blocks' ) }
+									help={ __( 'Change the thickness (stroke width) of the circle.', 'otter-blocks' ) }
+									value={ attributes.strokeWidth }
+									onChange={ strokeWidth => setAttributes({ strokeWidth }) }
+									initialPosition={ 10 }
+									min={ 0 }
+									max={ 20 }
+								/>
+
+								<RangeControl
+									label={ __( 'Duration', 'otter-blocks' ) }
+									help={ __( 'The duration of the animation.', 'otter-blocks' ) }
+									value={ attributes.duration }
+									onChange={ onDurationChange }
+									min={ 0 }
+									max={ 3 }
+								/>
+							</PanelBody>
+							<PanelBody
+								title={ __( 'Typography', 'otter-blocks' ) }
+								initialOpen={ false }
+							>
+								<RangeControl
+									label={ __( 'Font Size Title', 'otter-blocks' ) }
+									help={ __( 'Change the font size of the title.', 'otter-blocks' ) }
+									value={ attributes.fontSizeTitle }
+									onChange={ fontSizeTitle => setAttributes({ fontSizeTitle }) }
+									initialPosition={ 37 }
+									min={ 0 }
+									max={ 100 }
+								/>
+
+								<RangeControl
+									label={ __( 'Font Size Percent', 'otter-blocks' ) }
+									help={ __( 'Change the font size of the inner text.', 'otter-blocks' ) }
+									value={ attributes.fontSizePercent }
+									onChange={ fontSizePercent => setAttributes({ fontSizePercent }) }
+									initialPosition={ 27 }
+									min={ 0 }
+									max={ 80 }
+								/>
+
+							</PanelBody>
+
+						</Fragment>
+					)
+				}
+			</div>
 		</InspectorControls>
 	);
 };
diff --git a/src/blocks/blocks/progress-bar/inspector.js b/src/blocks/blocks/progress-bar/inspector.js
index 211115bf1..4f97894f7 100644
--- a/src/blocks/blocks/progress-bar/inspector.js
+++ b/src/blocks/blocks/progress-bar/inspector.js
@@ -1,9 +1,13 @@
+/**
+ * External dependencies
+ */
+import { clamp } from 'lodash';
+
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 
-import { clamp } from 'lodash';
 
 import {
 	InspectorControls,
@@ -18,6 +22,14 @@ import {
 	TextControl,
 	FontSizePicker
 } from '@wordpress/components';
+import { Fragment, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+*/
+import { InspectorHeader } from '../../components';
+import { useTabSwitch } from '../../helpers/block-utility';
+
 
 const defaultFontSizes = [
 	{
@@ -54,6 +66,9 @@ const Inspector = ({
 	heightMode,
 	setHeightMode
 }) => {
+
+	const [ tab, setTab ] = useTabSwitch( attributes.id, 'settings' );
+
 	const onPercentageChange = value => {
 		if ( value === undefined ) {
 			return ;
@@ -83,137 +98,163 @@ const Inspector = ({
 
 	return (
 		<InspectorControls>
-			<PanelBody
-				title={ __( 'Settings', 'otter-blocks' ) }
-			>
-				<TextControl
-					label={ __( 'Title', 'otter-blocks' ) }
-					value={ attributes.title }
-					onChange={ title => setAttributes({ title }) }
-				/>
-
-				<RangeControl
-					label={ __( 'Percentage', 'otter-blocks' ) }
-					help={ __( 'The value of the progress bar.', 'otter-blocks' ) }
-					value={ attributes.percentage }
-					onChange={ onPercentageChange }
-					min={ 0 }
-					max={ 100 }
-				/>
-
-				<RangeControl
-					label={ __( 'Duration', 'otter-blocks' ) }
-					help={ __( 'The duration of the animation.', 'otter-blocks' ) }
-					value={ attributes.duration }
-					onChange={ onDurationChange }
-					min={ 0 }
-					max={ 3 }
-					step={ 0.1 }
-				/>
-
-			</PanelBody>
-
-			<PanelColorSettings
-				title={ __( 'Color', 'otter-blocks' ) }
-				initialOpen={ false }
-				colorSettings={ [
-					{
-						value: attributes.titleColor,
-						onChange: titleColor => setAttributes({ titleColor }),
-						label: __( 'Title', 'otter-blocks' ),
-						isShownByDefault: false
-					},
-					{
-						value: attributes.barBackgroundColor,
-						onChange: barBackgroundColor => setAttributes({ barBackgroundColor }),
-						label: __( 'Progress', 'otter-blocks' ),
-						isShownByDefault: false
-					},
+			<InspectorHeader
+				value={ tab }
+				options={[
 					{
-						value: attributes.percentageColor,
-						onChange: percentageColor => setAttributes({ percentageColor }),
-						label: __( 'Percentage', 'otter-blocks' ),
-						isShownByDefault: false
+						label: __( 'Settings', 'otter-blocks' ),
+						value: 'settings'
 					},
 					{
-						value: attributes.backgroundColor,
-						onChange: backgroundColor => setAttributes({ backgroundColor }),
-						label: __( 'Background', 'otter-blocks' ),
-						isShownByDefault: false
+						label: __( 'Style', 'otter-blocks' ),
+						value: 'style'
 					}
-				] }
-			>
-
-			</PanelColorSettings>
-
-			<PanelBody
-				title={ __( 'Style', 'otter-blocks' ) }
-				initialOpen={ false }
-			>
-				{ 30 <= attributes.height && (
-					<SelectControl
-						label={ __( 'Title Style', 'otter-blocks' ) }
-						value={ attributes.titleStyle }
-						options={ [
-							{ label: __( 'Default', 'otter-blocks' ), value: 'default' },
-							{ label: __( 'Highlight', 'otter-blocks' ), value: 'highlight' },
-							{ label: __( 'Outer', 'otter-blocks' ), value: 'outer' }
-						] }
-						onChange={ titleStyle => setAttributes({ titleStyle }) }
-					/>
-				) }
-
-				<SelectControl
-					label={ __( 'Show Percentage', 'otter-blocks' ) }
-					value={ attributes.percentagePosition }
-					options={ [
-						{ label: __( 'Default', 'otter-blocks' ), value: 'default' },
-						{ label: __( 'Append', 'otter-blocks' ), value: 'append' },
-						{ label: __( 'Tooltip', 'otter-blocks' ), value: 'tooltip' },
-						{ label: __( 'Outer', 'otter-blocks' ), value: 'outer' },
-						{ label: __( 'Hide', 'otter-blocks' ), value: 'hide' }
-					] }
-					onChange={ selectPercentagePosition }
-				/>
-
-				<RangeControl
-					label={ __( 'Height', 'otter-blocks' ) }
-					help={ __( 'The height of the progress bar.', 'otter-blocks' ) }
-					value={ attributes.height }
-					onChange={ onHeightChange }
-					step={ 0.1 }
-					min={ 5 }
-					max={ 100 }
-				/>
-
-				<RangeControl
-					label={ __( 'Border Radius', 'otter-blocks' ) }
-					help={ __( 'Round the corners of the progress bar.', 'otter-blocks' ) }
-					value={ attributes.borderRadius }
-					onChange={ borderRadius => setAttributes({ borderRadius }) }
-					step={ 0.1 }
-					initialPosition={ 5 }
-					min={ 0 }
-					max={ 35 }
-				/>
+				]}
+				onChange={ setTab }
+			/>
 
+			<div>
 				{
-					( ( 'outer' === attributes.titleStyle ) || ( 'tooltip' === attributes.percentagePosition && 'outer' === attributes.percentagePosition ) ) && (
-						<BaseControl
-							label={ __( 'Outer Text Font Size', 'otter-blocks' ) }
+					'settings' === tab && (
+						<PanelBody
+							title={ __( 'Options', 'otter-blocks' ) }
+							initialOpen={ true }
 						>
-							<FontSizePicker
-								fontSizes={ defaultFontSizes }
-								withReset
-								value={ attributes.titleFontSize }
-								onChange={ titleFontSize => setAttributes({ titleFontSize }) }
+							<TextControl
+								label={ __( 'Title', 'otter-blocks' ) }
+								value={ attributes.title }
+								onChange={ title => setAttributes({ title }) }
+							/>
+
+							<RangeControl
+								label={ __( 'Percentage', 'otter-blocks' ) }
+								help={ __( 'The value of the progress bar.', 'otter-blocks' ) }
+								value={ attributes.percentage }
+								onChange={ onPercentageChange }
+								min={ 0 }
+								max={ 100 }
 							/>
-						</BaseControl>
+						</PanelBody>
+					)
+				}
+				{
+					'style' === tab && (
+						<Fragment>
+
+
+							<PanelBody
+								title={ __( 'Title and Percentage', 'otter-blocks' ) }
+								initialOpen={ false }
+							>
+								{ 30 <= attributes.height && (
+									<SelectControl
+										label={ __( 'Title Style', 'otter-blocks' ) }
+										value={ attributes.titleStyle }
+										options={ [
+											{ label: __( 'Default', 'otter-blocks' ), value: 'default' },
+											{ label: __( 'Highlight', 'otter-blocks' ), value: 'highlight' },
+											{ label: __( 'Outer', 'otter-blocks' ), value: 'outer' }
+										] }
+										onChange={ titleStyle => setAttributes({ titleStyle }) }
+									/>
+								) }
+
+								<SelectControl
+									label={ __( 'Percentage Style', 'otter-blocks' ) }
+									value={ attributes.percentagePosition }
+									options={ [
+										{ label: __( 'Default', 'otter-blocks' ), value: 'default' },
+										{ label: __( 'Append', 'otter-blocks' ), value: 'append' },
+										{ label: __( 'Tooltip', 'otter-blocks' ), value: 'tooltip' },
+										{ label: __( 'Outer', 'otter-blocks' ), value: 'outer' },
+										{ label: __( 'Hide', 'otter-blocks' ), value: 'hide' }
+									] }
+									onChange={ selectPercentagePosition }
+								/>
+
+								{
+									( ( 'outer' === attributes.titleStyle ) || ( 'tooltip' === attributes.percentagePosition && 'outer' === attributes.percentagePosition ) ) && (
+										<BaseControl
+											label={ __( 'Outer Text Font Size', 'otter-blocks' ) }
+										>
+											<FontSizePicker
+												fontSizes={ defaultFontSizes }
+												withReset
+												value={ attributes.titleFontSize }
+												onChange={ titleFontSize => setAttributes({ titleFontSize }) }
+											/>
+										</BaseControl>
+									)
+								}
+							</PanelBody>
+							<PanelColorSettings
+								title={ __( 'Color', 'otter-blocks' ) }
+								colorSettings={ [
+									{
+										value: attributes.titleColor,
+										onChange: titleColor => setAttributes({ titleColor }),
+										label: __( 'Title', 'otter-blocks' )
+									},
+									{
+										value: attributes.barBackgroundColor,
+										onChange: barBackgroundColor => setAttributes({ barBackgroundColor }),
+										label: __( 'Progress', 'otter-blocks' )
+									},
+									{
+										value: attributes.percentageColor,
+										onChange: percentageColor => setAttributes({ percentageColor }),
+										label: __( 'Percentage', 'otter-blocks' )
+									},
+									{
+										value: attributes.backgroundColor,
+										onChange: backgroundColor => setAttributes({ backgroundColor }),
+										label: __( 'Background', 'otter-blocks' )
+									}
+								] }
+							>
+
+							</PanelColorSettings>
+							<PanelBody
+								title={ __( 'Dimensions and Motion', 'otter-blocks' ) }
+								initialOpen={ false }
+							>
+								<RangeControl
+									label={ __( 'Duration', 'otter-blocks' ) }
+									help={ __( 'The duration of the animation.', 'otter-blocks' ) }
+									value={ attributes.duration }
+									onChange={ onDurationChange }
+									min={ 0 }
+									max={ 3 }
+									step={ 0.1 }
+								/>
+
+								<RangeControl
+									label={ __( 'Height', 'otter-blocks' ) }
+									help={ __( 'The height of the progress bar.', 'otter-blocks' ) }
+									value={ attributes.height }
+									onChange={ onHeightChange }
+									step={ 0.1 }
+									min={ 5 }
+									max={ 100 }
+								/>
+
+								<RangeControl
+									label={ __( 'Border Radius', 'otter-blocks' ) }
+									help={ __( 'Round the corners of the progress bar.', 'otter-blocks' ) }
+									value={ attributes.borderRadius }
+									onChange={ borderRadius => setAttributes({ borderRadius }) }
+									step={ 0.1 }
+									initialPosition={ 5 }
+									min={ 0 }
+									max={ 35 }
+								/>
+							</PanelBody>
+						</Fragment>
 					)
 				}
+			</div>
 
 
-			</PanelBody>
 		</InspectorControls>
 	);
 };