diff --git a/src/i18n-keysets/dash.dialogs-common.edit/en.json b/src/i18n-keysets/dash.dialogs-common.edit/en.json
index db0fcba7f5..7e84ebf635 100644
--- a/src/i18n-keysets/dash.dialogs-common.edit/en.json
+++ b/src/i18n-keysets/dash.dialogs-common.edit/en.json
@@ -1,3 +1,4 @@
 {
-  "button_back": "Back"
+  "button_back": "Back",
+  "title_widget-settings": "Widget settings"
 }
diff --git a/src/i18n-keysets/dash.dialogs-common.edit/ru.json b/src/i18n-keysets/dash.dialogs-common.edit/ru.json
index e87a861332..824f2c624b 100644
--- a/src/i18n-keysets/dash.dialogs-common.edit/ru.json
+++ b/src/i18n-keysets/dash.dialogs-common.edit/ru.json
@@ -1,3 +1,4 @@
 {
-  "button_back": "Назад"
+  "button_back": "Назад",
+  "title_widget-settings": "Настройки виджета"
 }
diff --git a/src/i18n-keysets/dash.palette-background/en.json b/src/i18n-keysets/dash.palette-background/en.json
index 14b9d08242..57037ba4ce 100644
--- a/src/i18n-keysets/dash.palette-background/en.json
+++ b/src/i18n-keysets/dash.palette-background/en.json
@@ -1,4 +1,5 @@
 {
+  "tooltip_click-to-select": "Select value",
   "value_default": "Basic",
   "value_transparent": "Transparent"
 }
diff --git a/src/i18n-keysets/dash.palette-background/ru.json b/src/i18n-keysets/dash.palette-background/ru.json
index 381704bd17..36c038369a 100644
--- a/src/i18n-keysets/dash.palette-background/ru.json
+++ b/src/i18n-keysets/dash.palette-background/ru.json
@@ -1,4 +1,5 @@
 {
+  "tooltip_click-to-select": "Выберите значение",
   "value_default": "Базовый",
   "value_transparent": "Прозрачный"
 }
diff --git a/src/i18n-keysets/dash.title-dialog.edit/en.json b/src/i18n-keysets/dash.title-dialog.edit/en.json
index 1ec4f0ad40..3e5faa31de 100644
--- a/src/i18n-keysets/dash.title-dialog.edit/en.json
+++ b/src/i18n-keysets/dash.title-dialog.edit/en.json
@@ -4,6 +4,7 @@
   "button_save": "Save",
   "context_fill-title": "Enter title",
   "field_show-in-toc": "Display in contents",
+  "label_size": "Size",
   "label_title": "Title",
   "toast_required-field": "The field cannot be empty",
   "value_default": "Title"
diff --git a/src/i18n-keysets/dash.title-dialog.edit/ru.json b/src/i18n-keysets/dash.title-dialog.edit/ru.json
index 871e1fe5f6..9e78db8459 100644
--- a/src/i18n-keysets/dash.title-dialog.edit/ru.json
+++ b/src/i18n-keysets/dash.title-dialog.edit/ru.json
@@ -4,6 +4,7 @@
   "button_save": "Сохранить",
   "context_fill-title": "Введите заголовок",
   "field_show-in-toc": "Отображать в оглавлении",
+  "label_size": "Размер",
   "label_title": "Заголовок",
   "toast_required-field": "Поле должно быть заполнено",
   "value_default": "Заголовок"
diff --git a/src/shared/types/dash.ts b/src/shared/types/dash.ts
index e0c78bcf4e..01d5af00f4 100644
--- a/src/shared/types/dash.ts
+++ b/src/shared/types/dash.ts
@@ -122,7 +122,6 @@ export type DashTabItem =
 
 type BackgroundSettings = {
     color: string;
-    enabled: boolean;
 };
 
 export interface DashTabItemBase {
diff --git a/src/shared/types/utility-types.ts b/src/shared/types/utility-types.ts
index 35d9e84b77..a897b0b5e7 100644
--- a/src/shared/types/utility-types.ts
+++ b/src/shared/types/utility-types.ts
@@ -40,3 +40,5 @@ export type NonNullableBy<T, K extends keyof T> = Omit<T, K> & NoUndefinedField<
 type ObjectKeys<T extends object> = `${Exclude<keyof T, symbol>}`;
 
 export const objectKeys = Object.keys as <T extends object>(value: T) => Array<ObjectKeys<T>>;
+
+export type ValueOf<T extends object> = T[keyof T];
diff --git a/src/ui/components/DashKit/plugins/Image/Image.tsx b/src/ui/components/DashKit/plugins/Image/Image.tsx
index 0bf4ad729e..3affd35294 100644
--- a/src/ui/components/DashKit/plugins/Image/Image.tsx
+++ b/src/ui/components/DashKit/plugins/Image/Image.tsx
@@ -4,6 +4,7 @@ import type {Plugin, PluginWidgetProps} from '@gravity-ui/dashkit';
 import block from 'bem-cn-lite';
 import type {DashTabItemImage} from 'shared';
 import {DashTabItemType} from 'shared';
+import {CustomPaletteColors} from 'ui/units/dash/containers/Dialogs/components/PaletteBackground/PaletteBackground';
 
 import {useBeforeLoad} from '../../../../hooks/useBeforeLoad';
 import {getPreparedWrapSettings} from '../../utils';
@@ -31,7 +32,7 @@ function PluginImage(props: Props, _ref?: React.LegacyRef<HTMLDivElement>) {
         w: null,
     };
     const backgroundEnabled = Boolean(
-        background?.enabled && background?.color && background?.color !== 'transparent',
+        background?.color && background?.color !== CustomPaletteColors.NONE,
     );
     const {classMod, style} = React.useMemo(() => {
         return getPreparedWrapSettings(backgroundEnabled, background?.color);
diff --git a/src/ui/components/DashKit/plugins/Text/Text.tsx b/src/ui/components/DashKit/plugins/Text/Text.tsx
index c10ede5e3a..c770026728 100644
--- a/src/ui/components/DashKit/plugins/Text/Text.tsx
+++ b/src/ui/components/DashKit/plugins/Text/Text.tsx
@@ -12,6 +12,7 @@ import {
 } from 'ui/components/DashKit/utils';
 import {YFM_MARKDOWN_CLASSNAME} from 'ui/constants/yfm';
 import {usePrevious} from 'ui/hooks';
+import {CustomPaletteColors} from 'ui/units/dash/containers/Dialogs/components/PaletteBackground/PaletteBackground';
 
 import {useBeforeLoad} from '../../../../hooks/useBeforeLoad';
 import {YfmWrapper} from '../../../YfmWrapper/YfmWrapper';
@@ -149,9 +150,7 @@ const textPlugin = {
         const data = props.data as DashTabItemText['data'];
 
         const showBgColor = Boolean(
-            data.background?.enabled &&
-                data.background?.color &&
-                data.background?.color !== 'transparent',
+            data.background?.color && data.background?.color !== CustomPaletteColors.NONE,
         );
 
         const {classMod, style} = getPreparedWrapSettings(showBgColor, data.background?.color);
@@ -186,7 +185,6 @@ const textPlugin = {
             currentLayout.w,
             classMod,
             data.background?.color,
-            data.background?.enabled,
         ]);
 
         /**
diff --git a/src/ui/components/DashKit/plugins/Title/Title.tsx b/src/ui/components/DashKit/plugins/Title/Title.tsx
index 8c1b58cce8..13e5a681ed 100644
--- a/src/ui/components/DashKit/plugins/Title/Title.tsx
+++ b/src/ui/components/DashKit/plugins/Title/Title.tsx
@@ -13,6 +13,7 @@ import {
     adjustWidgetLayout as dashkitAdjustWidgetLayout,
     getPreparedWrapSettings,
 } from 'ui/components/DashKit/utils';
+import {CustomPaletteColors} from 'ui/units/dash/containers/Dialogs/components/PaletteBackground/PaletteBackground';
 
 import {useBeforeLoad} from '../../../../hooks/useBeforeLoad';
 import {RendererWrapper} from '../RendererWrapper/RendererWrapper';
@@ -95,9 +96,7 @@ const titlePlugin: PluginTitle = {
         const content = <DashKitPluginTitle {...props} ref={forwardedRef} />;
 
         const showBgColor = Boolean(
-            data.background?.enabled &&
-                data.background?.color &&
-                data.background?.color !== 'transparent',
+            data.background?.color && data.background?.color !== CustomPaletteColors.NONE,
         );
 
         const {classMod, style} = getPreparedWrapSettings(showBgColor, data.background?.color);
@@ -119,7 +118,6 @@ const titlePlugin: PluginTitle = {
             currentLayout.w,
             classMod,
             data.background?.color,
-            data.background?.enabled,
             data.size,
             data.text,
         ]);
@@ -159,7 +157,6 @@ const titlePlugin: PluginTitle = {
             currentLayout.w,
             data.text,
             data.size,
-            data.background?.enabled,
             calculateAnchor,
             showAnchor,
         ]);
diff --git a/src/ui/components/DialogChartWidget/DialogChartWidget.scss b/src/ui/components/DialogChartWidget/DialogChartWidget.scss
index f16c7a214d..9b7cfd2533 100644
--- a/src/ui/components/DialogChartWidget/DialogChartWidget.scss
+++ b/src/ui/components/DialogChartWidget/DialogChartWidget.scss
@@ -40,21 +40,23 @@
         flex-direction: column;
     }
 
-    &__help-tooltip {
-        line-height: 16px;
-        margin-left: 5px;
-    }
-
     &__navigation-input-container {
         display: grid;
         grid-auto-rows: 40px;
         align-items: center;
     }
 
-    &__textarea-wrapper {
-        display: flex;
+    &__textarea {
         height: 80px;
-        padding: 6px 0;
+        width: 330px;
+    }
+
+    &__row {
+        margin-bottom: var(--g-spacing-2);
+    }
+
+    &__checkbox {
+        margin-block-start: var(--g-spacing-2);
     }
 
     .widget-item-dialog__line {
@@ -82,12 +84,6 @@
         align-items: center;
     }
 
-    &__input {
-        width: 330px;
-        margin-right: 10px;
-        display: inline-flex;
-    }
-
     &__add-param-button {
         margin-left: 175px;
     }
@@ -116,17 +112,6 @@
         }
     }
 
-    &__caption {
-        &_inactive {
-            opacity: 0.3;
-        }
-    }
-
-    &__caption-text {
-        position: relative;
-        top: 1px;
-    }
-
     &__error {
         color: var(--g-color-text-danger);
         padding: 10px;
diff --git a/src/ui/components/DialogChartWidget/DialogChartWidget.tsx b/src/ui/components/DialogChartWidget/DialogChartWidget.tsx
index 71072c27ff..4e771bb0a8 100644
--- a/src/ui/components/DialogChartWidget/DialogChartWidget.tsx
+++ b/src/ui/components/DialogChartWidget/DialogChartWidget.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
-import {HelpPopover} from '@gravity-ui/components';
-import {Checkbox, Dialog, Link, Popup, TextArea, TextInput} from '@gravity-ui/uikit';
+import {FormRow, HelpPopover} from '@gravity-ui/components';
+import {Checkbox, Dialog, Link, Popup, Text, TextArea, TextInput} from '@gravity-ui/uikit';
 import block from 'bem-cn-lite';
 import {i18n} from 'i18n';
 import type {CustomCommands, Spec} from 'immutability-helper';
@@ -62,21 +62,6 @@ const isWidgetTypeWithAutoHeight = (widgetType?: WidgetKind) => {
     );
 };
 
-type LineProps = {
-    className?: string;
-    caption: React.ReactNode;
-    children?: React.ReactNode;
-};
-
-function Line(props: LineProps) {
-    return (
-        <div className={b('line', props.className)}>
-            <div className={b('line-caption')}>{props.caption}</div>
-            <div className={b('line-content')}>{props.children}</div>
-        </div>
-    );
-}
-
 type AfterSettingsWidgetCallback = ((selectedWidgetType: WidgetKind) => void) | null;
 
 export interface DialogChartWidgetFeatureProps {
@@ -122,6 +107,11 @@ type DialogChartWidgetState = {
     hierarchies?: HierarchyField[];
 };
 
+const INPUT_FILTERING_ID = 'chartFilteringField';
+const INPUT_NAME_ID = 'chartNameField';
+const INPUT_DESCRIPTION_ID = 'chartDescriptionField';
+const INPUT_AUTOHEIGHT_ID = 'chartAutoheightField';
+
 // TODO: put in defaultPath navigation key from entry
 class DialogChartWidget extends React.PureComponent<
     DialogChartWidgetProps,
@@ -141,7 +131,6 @@ class DialogChartWidget extends React.PureComponent<
                     isDefault: true,
                     description: '',
                     background: {
-                        enabled: false,
                         color: 'transparent',
                     },
                 },
@@ -365,29 +354,6 @@ class DialogChartWidget extends React.PureComponent<
         });
     };
 
-    handleBackgroundEnabledChanged = () => {
-        const {data, tabIndex} = this.state;
-
-        if (!data.tabs[tabIndex].background) {
-            data.tabs[tabIndex].background = {
-                enabled: false,
-                color: 'transparent',
-            };
-        }
-
-        this.setState({
-            data: update(data, {
-                tabs: {
-                    [tabIndex]: {
-                        background: {
-                            enabled: {$set: !data.tabs[tabIndex].background?.enabled},
-                        },
-                    },
-                },
-            }),
-        });
-    };
-
     handleBackgroundColorSelected = (color: string) => {
         const {data, tabIndex} = this.state;
 
@@ -551,32 +517,32 @@ class DialogChartWidget extends React.PureComponent<
             canUseFiltration && data.tabs[tabIndex].enableActionParams,
         );
 
-        const caption = (
-            <div className={b('caption')}>
-                <span className={b('caption-text')}>
-                    {i18n('dash.widget-dialog.edit', 'label_filtering-other-charts')}
-                </span>
-                <HelpPopover
-                    className={b('help-tooltip')}
-                    content={i18n('dash.widget-dialog.edit', 'context_filtering-other-charts')}
-                />
-            </div>
+        const helpPopover = (
+            <HelpPopover
+                className={b('help-tooltip')}
+                content={i18n('dash.widget-dialog.edit', 'context_filtering-other-charts')}
+            />
         );
 
         return (
-            <Line caption={caption}>
+            <FormRow
+                className={b('row')}
+                fieldId={INPUT_FILTERING_ID}
+                label={i18n('dash.widget-dialog.edit', 'label_filtering-other-charts')}
+                labelHelpPopover={helpPopover}
+            >
                 <div>
                     <Checkbox
+                        className={b('checkbox')}
+                        id={INPUT_FILTERING_ID}
                         size="m"
                         onChange={this.handleChangeFiltering}
                         checked={enableActionParams}
                         disabled={!canUseFiltration}
-                    >
-                        {i18n('dash.widget-dialog.edit', 'field_enable-filtering-other-charts')}
-                    </Checkbox>
+                    />
                     {this.getHierarchyWarning()}
                 </div>
-            </Line>
+            </FormRow>
         );
     };
 
@@ -591,27 +557,24 @@ class DialogChartWidget extends React.PureComponent<
             changeNavigationPath,
         } = this.props;
 
-        const autoHeightCheckboxCaption = (
-            <div className={b('caption')}>
-                <span className={b('caption-text')}>
-                    {i18n('dash.widget-dialog.edit', 'field_autoheight')}
-                </span>
-                <HelpPopover
-                    className={b('help-tooltip')}
-                    content={i18n(
-                        'dash.widget-dialog.edit',
-                        'context_autoheight-availability-hint',
-                    )}
-                />
-            </div>
+        const autoHeightHelpPopover = (
+            <HelpPopover
+                className={b('help-tooltip')}
+                content={i18n('dash.widget-dialog.edit', 'context_autoheight-availability-hint')}
+            />
         );
 
         const {title, chartId, description, autoHeight, background} = data.tabs[tabIndex];
 
         return (
             <React.Fragment>
-                <Line caption={i18n('dash.widget-dialog.edit', 'field_title')}>
+                <FormRow
+                    className={b('row')}
+                    fieldId={INPUT_NAME_ID}
+                    label={i18n('dash.widget-dialog.edit', 'field_title')}
+                >
                     <TextInput
+                        id={INPUT_NAME_ID}
                         size="m"
                         className={b('input')}
                         placeholder={i18n('dash.widget-dialog.edit', 'context_fill-title')}
@@ -632,6 +595,7 @@ class DialogChartWidget extends React.PureComponent<
                     {data.tabs.length === 1 && (
                         <div className={b('visibility-toggle')}>
                             <Checkbox
+                                className={b('checkbox')}
                                 size="m"
                                 onChange={this.onVisibilityCheckboxToggle}
                                 checked={!this.state.hideTitle}
@@ -641,10 +605,10 @@ class DialogChartWidget extends React.PureComponent<
                             </Checkbox>
                         </div>
                     )}
-                </Line>
-                <Line
-                    caption={i18n('dash.widget-dialog.edit', 'field_widget')}
-                    className={b('line-widget')}
+                </FormRow>
+                <FormRow
+                    className={b('row', {type: 'line-widget'})}
+                    label={i18n('dash.widget-dialog.edit', 'field_widget')}
                 >
                     <div className={b('navigation-input-container')} ref={this.navigationInputRef}>
                         <NavigationInput
@@ -669,48 +633,54 @@ class DialogChartWidget extends React.PureComponent<
                             {i18n('dash.widget-dialog.edit', 'toast_required-field')}
                         </div>
                     </Popup>
-                </Line>
-                <Line caption={i18n('dash.widget-dialog.edit', 'field_description')}>
-                    <div className={b('textarea-wrapper')}>
-                        <TextArea
-                            size="m"
-                            className={b('input')}
-                            value={description}
-                            placeholder={i18n(
-                                'dash.widget-dialog.edit',
-                                'context_fill-description',
-                            )}
-                            onUpdate={(value) =>
-                                this.setState({
-                                    data: update(data, {
-                                        tabs: {
-                                            [tabIndex]: {
-                                                description: {$set: value},
-                                            },
+                </FormRow>
+                <FormRow
+                    className={b('row')}
+                    fieldId={INPUT_DESCRIPTION_ID}
+                    label={i18n('dash.widget-dialog.edit', 'field_description')}
+                >
+                    <TextArea
+                        id={INPUT_DESCRIPTION_ID}
+                        size="m"
+                        className={b('textarea')}
+                        value={description}
+                        placeholder={i18n('dash.widget-dialog.edit', 'context_fill-description')}
+                        onUpdate={(value) =>
+                            this.setState({
+                                data: update(data, {
+                                    tabs: {
+                                        [tabIndex]: {
+                                            description: {$set: value},
                                         },
-                                    }),
-                                })
-                            }
-                            rows={3}
-                        />
-                    </div>
-                </Line>
+                                    },
+                                }),
+                            })
+                        }
+                        rows={3}
+                    />
+                </FormRow>
                 {enableAutoheight && (
-                    <Line caption={autoHeightCheckboxCaption}>
+                    <FormRow
+                        className={b('row')}
+                        fieldId={INPUT_AUTOHEIGHT_ID}
+                        label={i18n('dash.widget-dialog.edit', 'field_autoheight')}
+                        labelHelpPopover={autoHeightHelpPopover}
+                    >
                         <Checkbox
+                            className={b('checkbox')}
+                            id={INPUT_AUTOHEIGHT_ID}
                             size="m"
                             onChange={this.onAutoHeightRadioButtonChange}
                             disabled={!isWidgetTypeWithAutoHeight(selectedWidgetType)}
                             checked={Boolean(autoHeight)}
                             qa={DashCommonQa.WidgetEnableAutoHeightCheckbox}
-                        >
-                            {i18n('dash.widget-dialog.edit', 'label_autoheight-enable')}
-                        </Checkbox>
-                    </Line>
+                        />
+                    </FormRow>
                 )}
                 {enableBackgroundColor && (
-                    <Line
-                        caption={
+                    <FormRow
+                        className={b('row')}
+                        label={
                             <div className={b('caption')}>
                                 <span className={b('caption-text')}>
                                     {i18n('dash.widget-dialog.edit', 'field_background')}
@@ -718,20 +688,11 @@ class DialogChartWidget extends React.PureComponent<
                             </div>
                         }
                     >
-                        <Checkbox
-                            checked={Boolean(background?.enabled)}
-                            onChange={this.handleBackgroundEnabledChanged}
-                            qa={DashCommonQa.WidgetEnableBackgroundCheckbox}
-                        >
-                            {i18n('dash.widget-dialog.edit', 'field_background-enable')}
-                        </Checkbox>
-                        {Boolean(background?.enabled) && (
-                            <PaletteBackground
-                                color={background?.color}
-                                onSelect={this.handleBackgroundColorSelected}
-                            />
-                        )}
-                    </Line>
+                        <PaletteBackground
+                            color={background?.color}
+                            onSelect={this.handleBackgroundColorSelected}
+                        />
+                    </FormRow>
                 )}
                 {enableFilteringSetting && this.renderFilteringCharts()}
                 {this.renderParams()}
@@ -784,10 +745,9 @@ class DialogChartWidget extends React.PureComponent<
             <Collapse
                 className={b('params-collapse')}
                 title={
-                    <Line
-                        className={b('params-title')}
-                        caption={i18n('dash.widget-dialog.edit', 'field_params')}
-                    />
+                    <Text variant="subheader-3">
+                        {i18n('dash.widget-dialog.edit', 'field_params')}
+                    </Text>
                 }
                 arrowPosition="left"
                 arrowQa={ParamsSettingsQA.Open}
diff --git a/src/ui/components/DialogImageWidget/DialogImageWidget.scss b/src/ui/components/DialogImageWidget/DialogImageWidget.scss
index abe8d51a88..80ede0ddb4 100644
--- a/src/ui/components/DialogImageWidget/DialogImageWidget.scss
+++ b/src/ui/components/DialogImageWidget/DialogImageWidget.scss
@@ -3,6 +3,7 @@
 
     &__row {
         align-items: center;
+        margin-bottom: var(--g-spacing-2);
 
         &:last-child {
             margin-bottom: 0;
diff --git a/src/ui/components/DialogImageWidget/DialogImageWidget.tsx b/src/ui/components/DialogImageWidget/DialogImageWidget.tsx
index aca648abc1..a4a9de55c9 100644
--- a/src/ui/components/DialogImageWidget/DialogImageWidget.tsx
+++ b/src/ui/components/DialogImageWidget/DialogImageWidget.tsx
@@ -18,13 +18,11 @@ import './DialogImageWidget.scss';
 const b = block('dialog-image');
 const INPUT_SRC_ID = 'dialog-image-input-src';
 const INPUT_ALT_ID = 'dialog-image-input-alt';
-const INPUT_BG_ENABLED_ID = 'dialog-image-input-bg-enabled';
 const INPUT_PRESERVE_ASPECT_RATIO_ID = 'dialog-image-input-preserve-aspect-ratio';
 const DEFAULT_ITEM_DATA: DashTabItemImage['data'] = {
     src: '',
     alt: '',
     background: {
-        enabled: false,
         color: 'transparent',
     },
     preserveAspectRatio: true,
@@ -145,30 +143,16 @@ export function DialogImageWidget(props: Props) {
                         id={INPUT_PRESERVE_ASPECT_RATIO_ID}
                         checked={data.preserveAspectRatio}
                         onUpdate={(preserveAspectRatio) => updateData({preserveAspectRatio})}
-                    >
-                        {i18n('dash.widget-dialog.edit', 'field_background-enable')}
-                    </Checkbox>
+                    />
                 </FormRow>
                 <FormRow
                     className={b('row')}
-                    fieldId={INPUT_BG_ENABLED_ID}
                     label={i18n('dash.dashkit-plugin-common.view', 'label_background-checkbox')}
                 >
-                    <Flex>
-                        <Checkbox
-                            id={INPUT_BG_ENABLED_ID}
-                            checked={data.background?.enabled}
-                            onUpdate={(enabled) => updateData({background: {enabled}})}
-                        >
-                            {i18n('dash.widget-dialog.edit', 'field_background-enable')}
-                        </Checkbox>
-                        {data.background?.enabled && (
-                            <PaletteBackground
-                                color={data.background?.color}
-                                onSelect={(color) => updateData({background: {color}})}
-                            />
-                        )}
-                    </Flex>
+                    <PaletteBackground
+                        color={data.background?.color}
+                        onSelect={(color) => updateData({background: {color}})}
+                    />
                 </FormRow>
             </Dialog.Body>
             <Dialog.Footer
diff --git a/src/ui/components/DialogTextWidget/DialogTextWidget.scss b/src/ui/components/DialogTextWidget/DialogTextWidget.scss
index 91beb88a18..b2b91edf19 100644
--- a/src/ui/components/DialogTextWidget/DialogTextWidget.scss
+++ b/src/ui/components/DialogTextWidget/DialogTextWidget.scss
@@ -9,9 +9,15 @@
         margin-top: 10px;
     }
 
-    &__setting-row {
-        margin-top: 20px;
-        display: flex;
-        align-items: center;
+    &__checkbox {
+        margin-block-start: var(--g-spacing-2);
+    }
+
+    &__row {
+        margin-bottom: var(--g-spacing-2);
+
+        &:last-child {
+            margin-bottom: 0;
+        }
     }
 }
diff --git a/src/ui/components/DialogTextWidget/DialogTextWidget.tsx b/src/ui/components/DialogTextWidget/DialogTextWidget.tsx
index 2d64199b13..f2e4a73224 100644
--- a/src/ui/components/DialogTextWidget/DialogTextWidget.tsx
+++ b/src/ui/components/DialogTextWidget/DialogTextWidget.tsx
@@ -1,11 +1,15 @@
 import React from 'react';
 
+import {FormRow} from '@gravity-ui/components';
 import {Checkbox, Dialog} from '@gravity-ui/uikit';
 import block from 'bem-cn-lite';
 import {i18n} from 'i18n';
 import type {DashTabItemText} from 'shared';
 import {DialogDashWidgetItemQA, DialogDashWidgetQA} from 'shared';
-import {PaletteBackground} from 'ui/units/dash/containers/Dialogs/components/PaletteBackground/PaletteBackground';
+import {
+    CustomPaletteColors,
+    PaletteBackground,
+} from 'ui/units/dash/containers/Dialogs/components/PaletteBackground/PaletteBackground';
 
 import type {SetItemDataArgs} from '../../units/dash/store/actions/dashTyped';
 import {TextEditor} from '../TextEditor/TextEditor';
@@ -31,17 +35,18 @@ interface DialogTextWidgetState {
     text?: string;
     prevVisible?: boolean;
     autoHeight?: boolean;
-    hasBackground?: boolean;
     backgroundColor?: string;
 }
 
+const INPUT_TEXT_ID = 'widgetTextField';
+const INPUT_AUTOHEIGHT_ID = 'widgetAutoHeightField';
+
 class DialogTextWidget extends React.PureComponent<DialogTextWidgetProps, DialogTextWidgetState> {
     static defaultProps = {
         enableAutoheight: true,
         openedItemData: {
             text: '',
             autoHeight: false,
-            hasBackground: false,
             backgroundColor: 'transparent',
         },
     };
@@ -58,7 +63,6 @@ class DialogTextWidget extends React.PureComponent<DialogTextWidgetProps, Dialog
             prevVisible: nextProps.dialogIsVisible,
             text: nextProps.openedItemData.text,
             autoHeight: Boolean(nextProps.openedItemData.autoHeight),
-            hasBackground: Boolean(nextProps.openedItemData.background?.enabled),
             backgroundColor: nextProps.openedItemData.background?.color || '',
         };
     }
@@ -67,7 +71,7 @@ class DialogTextWidget extends React.PureComponent<DialogTextWidgetProps, Dialog
 
     render() {
         const {openedItemId, dialogIsVisible, enableAutoheight} = this.props;
-        const {text, autoHeight, hasBackground, backgroundColor} = this.state;
+        const {text, autoHeight, backgroundColor} = this.state;
 
         return (
             <Dialog
@@ -77,36 +81,48 @@ class DialogTextWidget extends React.PureComponent<DialogTextWidgetProps, Dialog
                 disableFocusTrap={true}
                 qa={DialogDashWidgetItemQA.Text}
             >
-                <Dialog.Header caption={i18n('dash.text-dialog.edit', 'label_text')} />
+                <Dialog.Header
+                    caption={i18n('dash.dialogs-common.edit', 'title_widget-settings')}
+                />
                 <Dialog.Body className={b()}>
-                    <TextEditor autofocus onTextUpdate={this.onTextUpdate} text={text} />
+                    <FormRow
+                        className={b('row')}
+                        fieldId={INPUT_TEXT_ID}
+                        label={i18n('dash.text-dialog.edit', 'label_text')}
+                    >
+                        <TextEditor
+                            id={INPUT_TEXT_ID}
+                            autofocus
+                            onTextUpdate={this.onTextUpdate}
+                            text={text}
+                        />
+                    </FormRow>
+                    <FormRow
+                        className={b('row')}
+                        label={i18n('dash.dashkit-plugin-common.view', 'label_background-checkbox')}
+                    >
+                        <PaletteBackground
+                            color={backgroundColor}
+                            onSelect={this.handleHasBackgroundSelected}
+                        />
+                    </FormRow>
                     {enableAutoheight && (
-                        <div className={b('setting-row')}>
+                        <FormRow
+                            className={b('row')}
+                            fieldId={INPUT_AUTOHEIGHT_ID}
+                            label={i18n(
+                                'dash.dashkit-plugin-common.view',
+                                'label_autoheight-checkbox',
+                            )}
+                        >
                             <Checkbox
+                                id={INPUT_AUTOHEIGHT_ID}
+                                className={b('checkbox')}
                                 checked={Boolean(autoHeight)}
                                 onChange={this.handleAutoHeightChanged}
-                            >
-                                {i18n(
-                                    'dash.dashkit-plugin-common.view',
-                                    'label_autoheight-checkbox',
-                                )}
-                            </Checkbox>
-                        </div>
-                    )}
-                    <div className={b('setting-row')}>
-                        <Checkbox
-                            checked={Boolean(hasBackground)}
-                            onChange={this.handleHasBackgroundChanged}
-                        >
-                            {i18n('dash.dashkit-plugin-common.view', 'label_background-checkbox')}
-                        </Checkbox>
-                        {Boolean(hasBackground) && (
-                            <PaletteBackground
-                                color={backgroundColor}
-                                onSelect={this.handleHasBackgroundSelected}
                             />
-                        )}
-                    </div>
+                        </FormRow>
+                    )}
                 </Dialog.Body>
                 <Dialog.Footer
                     onClickButtonApply={this.onApply}
@@ -127,14 +143,14 @@ class DialogTextWidget extends React.PureComponent<DialogTextWidgetProps, Dialog
     onTextUpdate = (text: string) => this.setState({text});
 
     onApply = () => {
-        const {text, autoHeight, hasBackground, backgroundColor} = this.state;
+        const {text, autoHeight, backgroundColor} = this.state;
 
         this.props.setItemData({
             data: {
                 text,
                 autoHeight,
                 background: {
-                    enabled: hasBackground,
+                    enabled: backgroundColor !== CustomPaletteColors.NONE,
                     color: backgroundColor,
                 },
             },
@@ -146,10 +162,6 @@ class DialogTextWidget extends React.PureComponent<DialogTextWidgetProps, Dialog
         this.setState({autoHeight: !this.state.autoHeight});
     };
 
-    handleHasBackgroundChanged = () => {
-        this.setState({hasBackground: !this.state.hasBackground});
-    };
-
     handleHasBackgroundSelected = (color: string) => {
         this.setState({backgroundColor: color});
     };
diff --git a/src/ui/components/DialogTitleWidget/DialogTitleWidget.scss b/src/ui/components/DialogTitleWidget/DialogTitleWidget.scss
index 1d256c81df..4d78feedb1 100644
--- a/src/ui/components/DialogTitleWidget/DialogTitleWidget.scss
+++ b/src/ui/components/DialogTitleWidget/DialogTitleWidget.scss
@@ -1,42 +1,15 @@
 .dialog-title {
     width: 700px;
 
-    &__input {
-        &.g-text-input .g-text-input__control {
-            transition: font-size 0.2s ease;
-            font-weight: 500;
-        }
-
-        &_size {
-            &_l.g-text-input .g-text-input__control {
-                font-size: var(--g-text-header-2-font-size);
-                line-height: var(--g-text-header-2-line-height);
-            }
-
-            &_m.g-text-input .g-text-input__control {
-                font-size: var(--g-text-header-1-font-size);
-                line-height: var(--g-text-header-1-line-height);
-            }
+    &__row {
+        margin-bottom: var(--g-spacing-2);
 
-            &_s.g-text-input .g-text-input__control {
-                font-size: var(--g-text-body-3-font-size);
-                line-height: var(--g-text-body-3-line-height);
-            }
-
-            &_xs.g-text-input .g-text-input__control {
-                font-size: var(--g-text-body-2-font-size);
-                line-height: var(--g-text-body-2-line-height);
-            }
+        &:last-child {
+            margin-bottom: 0;
         }
     }
 
-    &__setting-row {
-        margin-top: 30px;
-        display: flex;
-        align-items: center;
-    }
-
-    &__setting-row + &__setting-row {
-        margin-top: 10px;
+    &__checkbox {
+        margin-block-start: var(--g-spacing-2);
     }
 }
diff --git a/src/ui/components/DialogTitleWidget/DialogTitleWidget.tsx b/src/ui/components/DialogTitleWidget/DialogTitleWidget.tsx
index 7de97b07bc..91dbcebec6 100644
--- a/src/ui/components/DialogTitleWidget/DialogTitleWidget.tsx
+++ b/src/ui/components/DialogTitleWidget/DialogTitleWidget.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import {Checkbox, Dialog, TextInput} from '@gravity-ui/uikit';
+import {FormRow} from '@gravity-ui/components';
+import {Checkbox, Dialog, RadioButton, TextInput} from '@gravity-ui/uikit';
 import block from 'bem-cn-lite';
 import {FieldWrapper} from 'components/FieldWrapper/FieldWrapper';
 import {i18n} from 'i18n';
@@ -11,21 +12,21 @@ import {
     DialogDashWidgetItemQA,
     DialogDashWidgetQA,
 } from 'shared';
-import {PaletteBackground} from 'ui/units/dash/containers/Dialogs/components/PaletteBackground/PaletteBackground';
+import {
+    CustomPaletteColors,
+    PaletteBackground,
+} from 'ui/units/dash/containers/Dialogs/components/PaletteBackground/PaletteBackground';
 
 import type {SetItemDataArgs} from '../../units/dash/store/actions/dashTyped';
 
-import HoverRadioButton from './HoverRadioButton/HoverRadioButton';
-
 import './DialogTitleWidget.scss';
 
 const SIZES = [
-    DashTabItemTitleSize.L,
-    DashTabItemTitleSize.M,
-    DashTabItemTitleSize.S,
-    DashTabItemTitleSize.XS,
+    {value: DashTabItemTitleSize.XS, content: 'XSmall'},
+    {value: DashTabItemTitleSize.S, content: 'Small'},
+    {value: DashTabItemTitleSize.M, content: 'Medium'},
+    {value: DashTabItemTitleSize.L, content: 'Large'},
 ];
-const RADIO_TEXT = ['Large', 'Medium', 'Small', 'XSmall'];
 
 const b = block('dialog-title');
 
@@ -36,7 +37,6 @@ interface DialogTitleWidgetState {
     size?: DashTabItemTitleSize;
     showInTOC?: boolean;
     autoHeight?: boolean;
-    hasBackground?: boolean;
     backgroundColor?: string;
 }
 
@@ -56,6 +56,10 @@ interface DialogTitleWidgetProps extends DialogTitleWidgetFeatureProps {
     setItemData: (newItemData: SetItemDataArgs) => void;
 }
 
+const INPUT_TITLE_ID = 'widgetTitleField';
+const INPUT_SHOW_IN_TOC_ID = 'widgetShowInTOCField';
+const INPUT_AUTOHEIGHT_ID = 'widgetAutoHeightField';
+
 class DialogTitleWidget extends React.PureComponent<
     DialogTitleWidgetProps,
     DialogTitleWidgetState
@@ -65,10 +69,9 @@ class DialogTitleWidget extends React.PureComponent<
         enableShowInTOC: true,
         openedItemData: {
             text: i18n('dash.title-dialog.edit', 'value_default'),
-            size: SIZES[0],
+            size: SIZES[0].value,
             showInTOC: true,
             autoHeight: false,
-            hasBackground: false,
             backgroundColor: 'transparent',
         },
     };
@@ -88,7 +91,6 @@ class DialogTitleWidget extends React.PureComponent<
             size: nextProps.openedItemData.size,
             showInTOC: nextProps.openedItemData.showInTOC,
             autoHeight: Boolean(nextProps.openedItemData.autoHeight),
-            hasBackground: Boolean(nextProps.openedItemData.background?.enabled),
             backgroundColor: nextProps.openedItemData.background?.color || '',
         };
     }
@@ -97,8 +99,7 @@ class DialogTitleWidget extends React.PureComponent<
 
     render() {
         const {openedItemId, dialogIsVisible, enableAutoheight, enableShowInTOC} = this.props;
-        const {text, size, showInTOC, validation, autoHeight, hasBackground, backgroundColor} =
-            this.state;
+        const {text, size, showInTOC, validation, autoHeight, backgroundColor} = this.state;
 
         return (
             <Dialog
@@ -107,67 +108,76 @@ class DialogTitleWidget extends React.PureComponent<
                 onEnterKeyDown={this.onApply}
                 qa={DialogDashWidgetItemQA.Title}
             >
-                <Dialog.Header caption={i18n('dash.title-dialog.edit', 'label_title')} />
+                <Dialog.Header
+                    caption={i18n('dash.dialogs-common.edit', 'title_widget-settings')}
+                />
                 <Dialog.Body className={b()}>
-                    <FieldWrapper error={validation?.text}>
-                        <TextInput
-                            size="l"
-                            value={text}
-                            autoFocus
-                            placeholder={i18n('dash.title-dialog.edit', 'context_fill-title')}
-                            onUpdate={this.onTextUpdate}
-                            className={b('input', {size: this.state.size})}
-                            qa={DialogDashTitleQA.Input}
+                    <FormRow
+                        className={b('row')}
+                        fieldId={INPUT_TITLE_ID}
+                        label={i18n('dash.title-dialog.edit', 'label_title')}
+                    >
+                        <FieldWrapper error={validation?.text}>
+                            <TextInput
+                                id={INPUT_TITLE_ID}
+                                value={text}
+                                autoFocus
+                                placeholder={i18n('dash.title-dialog.edit', 'context_fill-title')}
+                                onUpdate={this.onTextUpdate}
+                                qa={DialogDashTitleQA.Input}
+                            />
+                        </FieldWrapper>
+                    </FormRow>
+                    <FormRow
+                        className={b('row')}
+                        label={i18n('dash.title-dialog.edit', 'label_size')}
+                    >
+                        <RadioButton value={size} options={SIZES} onUpdate={this.onSizeChange} />
+                    </FormRow>
+                    <FormRow
+                        className={b('row')}
+                        label={i18n('dash.dashkit-plugin-common.view', 'label_background-checkbox')}
+                    >
+                        <PaletteBackground
+                            color={backgroundColor}
+                            onSelect={this.handleHasBackgroundSelected}
                         />
-                    </FieldWrapper>
-                    <HoverRadioButton
-                        value={size}
-                        values={SIZES}
-                        radioText={RADIO_TEXT}
-                        onChange={this.onSizeChange}
-                    />
+                    </FormRow>
+                    {enableAutoheight && (
+                        <FormRow
+                            className={b('row')}
+                            fieldId={INPUT_AUTOHEIGHT_ID}
+                            label={i18n(
+                                'dash.dashkit-plugin-common.view',
+                                'label_autoheight-checkbox',
+                            )}
+                        >
+                            <Checkbox
+                                className={b('checkbox')}
+                                id={INPUT_AUTOHEIGHT_ID}
+                                checked={Boolean(autoHeight)}
+                                onChange={this.handleAutoHeightChanged}
+                            />
+                        </FormRow>
+                    )}
                     {enableShowInTOC && (
-                        <div className={b('setting-row')}>
+                        <FormRow
+                            className={b('row')}
+                            fieldId={INPUT_SHOW_IN_TOC_ID}
+                            label={i18n('dash.title-dialog.edit', 'field_show-in-toc')}
+                        >
                             <Checkbox
+                                className={b('checkbox')}
+                                id={INPUT_SHOW_IN_TOC_ID}
                                 checked={showInTOC}
                                 onChange={() =>
                                     this.setState((prevState) => ({
                                         showInTOC: !prevState.showInTOC,
                                     }))
                                 }
-                                className={b('checkbox')}
-                            >
-                                {i18n('dash.title-dialog.edit', 'field_show-in-toc')}
-                            </Checkbox>
-                        </div>
-                    )}
-                    {enableAutoheight && (
-                        <div className={b('setting-row')}>
-                            <Checkbox
-                                checked={Boolean(autoHeight)}
-                                onChange={this.handleAutoHeightChanged}
-                            >
-                                {i18n(
-                                    'dash.dashkit-plugin-common.view',
-                                    'label_autoheight-checkbox',
-                                )}
-                            </Checkbox>
-                        </div>
-                    )}
-                    <div className={b('setting-row')}>
-                        <Checkbox
-                            checked={Boolean(hasBackground)}
-                            onChange={this.handleHasBackgroundChanged}
-                        >
-                            {i18n('dash.dashkit-plugin-common.view', 'label_background-checkbox')}
-                        </Checkbox>
-                        {Boolean(hasBackground) && (
-                            <PaletteBackground
-                                color={backgroundColor}
-                                onSelect={this.handleHasBackgroundSelected}
                             />
-                        )}
-                    </div>
+                        </FormRow>
+                    )}
                 </Dialog.Body>
                 <Dialog.Footer
                     onClickButtonApply={this.onApply}
@@ -194,7 +204,7 @@ class DialogTitleWidget extends React.PureComponent<
     onSizeChange = (size?: string) => this.setState({size: size as DashTabItemTitleSize});
 
     onApply = () => {
-        const {text, size, showInTOC, autoHeight, hasBackground, backgroundColor} = this.state;
+        const {text, size, showInTOC, autoHeight, backgroundColor} = this.state;
         if (text?.trim()) {
             this.props.setItemData({
                 data: {
@@ -203,7 +213,7 @@ class DialogTitleWidget extends React.PureComponent<
                     showInTOC,
                     autoHeight,
                     background: {
-                        enabled: hasBackground,
+                        enabled: this.state.backgroundColor !== CustomPaletteColors.NONE,
                         color: backgroundColor,
                     },
                 },
@@ -222,10 +232,6 @@ class DialogTitleWidget extends React.PureComponent<
         this.setState({autoHeight: !this.state.autoHeight});
     };
 
-    handleHasBackgroundChanged = () => {
-        this.setState({hasBackground: !this.state.hasBackground});
-    };
-
     handleHasBackgroundSelected = (color: string) => {
         this.setState({backgroundColor: color});
     };
diff --git a/src/ui/components/DialogTitleWidget/HoverRadioButton/HoverRadioButton.scss b/src/ui/components/DialogTitleWidget/HoverRadioButton/HoverRadioButton.scss
deleted file mode 100644
index 9370a2d42b..0000000000
--- a/src/ui/components/DialogTitleWidget/HoverRadioButton/HoverRadioButton.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-.hover-radio-button {
-    display: flex;
-    height: 80px;
-
-    &__radio {
-        display: inline-flex;
-        align-items: center;
-        font-size: 15px;
-        font-weight: 700;
-        padding: 0 20px;
-        border-radius: 4px;
-        margin-right: 10px;
-        margin-top: 24px;
-        cursor: pointer;
-        transition: background-color 0.2s ease;
-        opacity: 0.7;
-
-        &:hover {
-            background-color: var(--g-color-base-simple-hover);
-        }
-
-        &_chosen {
-            background-color: var(--g-color-base-selection);
-            opacity: 1;
-        }
-    }
-}
diff --git a/src/ui/components/DialogTitleWidget/HoverRadioButton/HoverRadioButton.tsx b/src/ui/components/DialogTitleWidget/HoverRadioButton/HoverRadioButton.tsx
deleted file mode 100644
index 238ba610d0..0000000000
--- a/src/ui/components/DialogTitleWidget/HoverRadioButton/HoverRadioButton.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import React from 'react';
-
-import block from 'bem-cn-lite';
-
-import './HoverRadioButton.scss';
-
-type RadioProps = {
-    text: string;
-    value: string;
-    chosen: boolean;
-    onMouseEnter: (value: string) => void;
-    onMouseLeave: (value: string) => void;
-    onClick: (value: string) => void;
-};
-
-const b = block('hover-radio-button');
-
-const Radio = React.memo(
-    ({text, value, chosen, onMouseEnter, onMouseLeave, onClick}: RadioProps) => {
-        return (
-            <div
-                className={b('radio', {chosen})}
-                onMouseEnter={() => onMouseEnter(value)}
-                onMouseLeave={() => onMouseLeave(value)}
-                onClick={() => onClick(value)}
-            >
-                {text}
-            </div>
-        );
-    },
-);
-
-Radio.displayName = 'Radio';
-
-type HoverRadioButtonProps = {
-    value?: string;
-    values: string[];
-    radioText: string[];
-    onChange?: (value?: string) => void;
-};
-
-const HoverRadioButton = React.memo(
-    ({value, values, radioText, onChange}: HoverRadioButtonProps) => {
-        const [currentValue, setCurrentValue] = React.useState(value);
-
-        const onMouseEnter = React.useCallback(
-            (newValue: string) => {
-                if (currentValue !== newValue) {
-                    onChange?.(newValue);
-                }
-            },
-            [currentValue, onChange],
-        );
-
-        const onMouseLeave = React.useCallback(
-            (newValue: string) => {
-                if (currentValue !== newValue) {
-                    onChange?.(currentValue);
-                }
-            },
-            [currentValue, onChange],
-        );
-
-        const onClick = React.useCallback(
-            (newValue: string) => {
-                if (currentValue !== newValue) {
-                    setCurrentValue(newValue);
-                    onChange?.(newValue);
-                }
-            },
-            [currentValue, onChange],
-        );
-
-        return (
-            <div className={b()}>
-                {values.map((itemValue, i) => (
-                    <Radio
-                        key={itemValue}
-                        value={itemValue}
-                        text={radioText[i]}
-                        chosen={itemValue === currentValue}
-                        onMouseEnter={onMouseEnter}
-                        onMouseLeave={onMouseLeave}
-                        onClick={onClick}
-                    />
-                ))}
-            </div>
-        );
-    },
-);
-
-HoverRadioButton.displayName = 'HoverRadioButton';
-
-export default HoverRadioButton;
diff --git a/src/ui/components/TextEditor/TextEditor.tsx b/src/ui/components/TextEditor/TextEditor.tsx
index 469d0c5c63..400ab40acf 100644
--- a/src/ui/components/TextEditor/TextEditor.tsx
+++ b/src/ui/components/TextEditor/TextEditor.tsx
@@ -13,10 +13,11 @@ export type TextareaEditorProps = {
     placeholder?: string;
     onTextUpdate: (val: string) => void;
     text?: string;
+    id?: string;
 };
 const b = block('text-editor');
 export const TextEditor = (props: TextareaEditorProps) => {
-    const {autofocus, placeholder, onTextUpdate, text, className} = props;
+    const {autofocus, placeholder, onTextUpdate, text, id, className} = props;
 
     const handleUpdate = React.useCallback(
         (val) => {
@@ -28,6 +29,7 @@ export const TextEditor = (props: TextareaEditorProps) => {
     return (
         <div className={b(null, className)}>
             <TextArea
+                id={id}
                 autoFocus={autofocus}
                 value={text}
                 placeholder={placeholder || i18n('dash.text-dialog.edit', 'context_fill-text')}
diff --git a/src/ui/units/dash/containers/Dialogs/components/PaletteBackground/PaletteBackground.scss b/src/ui/units/dash/containers/Dialogs/components/PaletteBackground/PaletteBackground.scss
index 3ad0cc60ae..62a2396683 100644
--- a/src/ui/units/dash/containers/Dialogs/components/PaletteBackground/PaletteBackground.scss
+++ b/src/ui/units/dash/containers/Dialogs/components/PaletteBackground/PaletteBackground.scss
@@ -2,9 +2,10 @@
 
 .widget-palette-background {
     $class: &;
+    display: block;
     position: relative;
-    margin-left: 8px;
     line-height: 0;
+    width: fit-content;
 
     &__hint {
         @include text-body-1();
@@ -17,34 +18,21 @@
     }
 
     &__color-item {
+        display: inline-block;
         position: relative;
         border-radius: 4px;
-        height: 100%;
-        width: 100%;
+        width: 28px;
+        height: 28px;
         cursor: pointer;
 
         $colorItem: &;
 
         &_transparent {
-            background-color: var(--g-color-base-generic);
+            background-image: repeating-conic-gradient(
+                var(--g-color-base-generic) 0 25%,
+                var(--g-color-base-background) 0 50%
+            );
             outline: 1px solid var(--g-color-base-generic-medium);
-            color: var(--g-color-line-generic-active);
-            font-size: 10px;
-            text-transform: uppercase;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-
-            &::before {
-                width: 36px;
-                height: 1px;
-                transform: rotate(45deg);
-                transform-origin: 0 0;
-                background-color: var(--g-color-base-danger-heavy);
-                content: '';
-                position: absolute;
-                inset: 1px 0 0 1px;
-            }
         }
 
         &_widget-bg {
diff --git a/src/ui/units/dash/containers/Dialogs/components/PaletteBackground/PaletteBackground.tsx b/src/ui/units/dash/containers/Dialogs/components/PaletteBackground/PaletteBackground.tsx
index 7e1789bc14..e990204a82 100644
--- a/src/ui/units/dash/containers/Dialogs/components/PaletteBackground/PaletteBackground.tsx
+++ b/src/ui/units/dash/containers/Dialogs/components/PaletteBackground/PaletteBackground.tsx
@@ -2,18 +2,25 @@ import React from 'react';
 
 import {ChartColumn} from '@gravity-ui/icons';
 import type {PaletteOption} from '@gravity-ui/uikit';
-import {ActionTooltip, Icon, Palette, Popover} from '@gravity-ui/uikit';
+import {ActionTooltip, Icon, Palette, Popover, Tooltip} from '@gravity-ui/uikit';
 import block from 'bem-cn-lite';
 import {i18n} from 'i18n';
+import type {ValueOf} from 'shared';
 import {DashCommonQa} from 'shared';
 
 import './PaletteBackground.scss';
 
 const b = block('widget-palette-background');
 
-export enum CustomPaletteColors {
-    LIKE_CHART = 'like-chart-bg',
-    NONE = 'transparent',
+export const CustomPaletteColors = {
+    LIKE_CHART: 'like-chart-bg',
+    NONE: 'transparent',
+} as const;
+
+type CustomPaletteColor = ValueOf<typeof CustomPaletteColors>;
+
+function isCustomPaletteColor(color: string): color is CustomPaletteColor {
+    return Object.keys(CustomPaletteColors).includes(color as CustomPaletteColor);
 }
 
 const PALETTE_HINTS = {
@@ -21,26 +28,30 @@ const PALETTE_HINTS = {
     [CustomPaletteColors.NONE]: i18n('dash.palette-background', 'value_transparent'),
 } as const;
 
-const ColorItem = ({
-    color,
-    isSelected,
-    classNameMod,
-    isPreview,
-    qa,
-}: {
-    color: string;
-    classNameMod?: string;
-    isSelected?: boolean;
-    isPreview?: boolean;
-    qa?: string;
-}) => {
+const ColorItem = React.forwardRef(function ColorItem(
+    {
+        color,
+        isSelected,
+        classNameMod,
+        isPreview,
+        qa,
+    }: {
+        color: string;
+        classNameMod?: string;
+        isSelected?: boolean;
+        isPreview?: boolean;
+        qa?: string;
+    },
+    ref: React.ForwardedRef<HTMLSpanElement>,
+) {
     const isTransparent = color === CustomPaletteColors.NONE;
     const isLikeChartBg = color === CustomPaletteColors.LIKE_CHART;
     const mod = classNameMod ? {[classNameMod]: Boolean(classNameMod)} : {};
 
     return (
         <span
-            style={{backgroundColor: isLikeChartBg ? '' : `${color}`}}
+            ref={ref}
+            style={{backgroundColor: isLikeChartBg || isTransparent ? '' : `${color}`}}
             className={b('color-item', {
                 transparent: isTransparent,
                 selected: isSelected,
@@ -50,14 +61,14 @@ const ColorItem = ({
             data-qa={qa}
         >
             {isLikeChartBg && <Icon data={ChartColumn} className={b('color-icon')} />}
-            {!isPreview && color in PALETTE_HINTS && (
-                <ActionTooltip title={PALETTE_HINTS[color as CustomPaletteColors]}>
+            {!isPreview && isCustomPaletteColor(color) && (
+                <ActionTooltip title={PALETTE_HINTS[color]}>
                     <span className={b('tooltip-trigger')} />
                 </ActionTooltip>
             )}
         </span>
     );
-};
+});
 
 const colors = [
     'var(--g-color-base-info-light)',
@@ -133,15 +144,17 @@ export const PaletteBackground = (props: PaletteBackgroundProps) => {
     return (
         <Popover
             className={b()}
+            openOnHover={false}
             content={<PaletteList onSelect={handleSelectColor} selectedColor={selectedColor} />}
         >
-            <ColorItem
-                color={selectedColor}
-                isSelected={true}
-                classNameMod={'small'}
-                isPreview={true}
-                qa={DashCommonQa.WidgetSelectBackgroundButton}
-            />
+            <Tooltip content={i18n('dash.palette-background', 'tooltip_click-to-select')}>
+                <ColorItem
+                    color={selectedColor}
+                    isSelected={true}
+                    isPreview={true}
+                    qa={DashCommonQa.WidgetSelectBackgroundButton}
+                />
+            </Tooltip>
         </Popover>
     );
 };