diff --git a/assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx b/assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx
index 5ca9acc1df..b9b6a5802c 100644
--- a/assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx
+++ b/assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx
@@ -1,6 +1,5 @@
 import React, { useRef } from 'react';
 import {
-  FontSizePicker,
   Panel,
   PanelBody,
 } from '@wordpress/components';
@@ -10,6 +9,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { partial } from 'lodash';
 
 import ColorSettings from 'form_editor/components/color_settings';
+import FontSizeSettings from 'form_editor/components/font_size_settings';
 
 const BasicSettingsPanel = ({ onToggle, isOpened }) => {
   const { changeFormSettings } = useDispatch('mailpoet-form-editor');
@@ -25,14 +25,6 @@ const BasicSettingsPanel = ({ onToggle, isOpened }) => {
     settingsRef.current = updated;
   };
 
-  const fontSizes = useSelect(
-    (select) => {
-      const { getSettings } = select('core/block-editor');
-      return getSettings().fontSizes;
-    },
-    []
-  );
-
   return (
     <Panel>
       <PanelBody
@@ -51,16 +43,11 @@ const BasicSettingsPanel = ({ onToggle, isOpened }) => {
             value={settings.fontColor}
             onChange={partial(updateStyles, 'fontColor')}
           />
-          <div>
-            <h3 className="mailpoet-styles-settings-heading">
-              {MailPoet.I18n.t('formSettingsStylesFontSize')}
-            </h3>
-            <FontSizePicker
-              value={settings.fontSize}
-              onChange={partial(updateStyles, 'fontSize')}
-              fontSizes={fontSizes}
-            />
-          </div>
+          <FontSizeSettings
+            name={MailPoet.I18n.t('formSettingsStylesFontSize')}
+            value={settings.fontSize}
+            onChange={partial(updateStyles, 'fontSize')}
+          />
         </div>
       </PanelBody>
     </Panel>