diff --git a/packages/admin/src-admin/src/components/ObjectBrowser.tsx b/packages/admin/src-admin/src/components/ObjectBrowser.tsx
index 051a680b1..a777021db 100644
--- a/packages/admin/src-admin/src/components/ObjectBrowser.tsx
+++ b/packages/admin/src-admin/src/components/ObjectBrowser.tsx
@@ -202,6 +202,8 @@ export interface TreeItemData {
     title?: string;
     /** if the item has "write" button (value=true, ack=false) */
     button?: boolean;
+    /** If the item has read and write and is boolean */
+    switch?: boolean;
     /** if the item has custom settings in `common.custom` */
     hasCustoms?: boolean;
     /** If this item is visible */
@@ -1622,6 +1624,8 @@ function buildTree(
                                     typeof obj.common.role === 'string' &&
                                     obj.common.role.startsWith('button') &&
                                     obj.common?.write !== false,
+                        switch:     obj.type === 'state' && obj.common?.type === 'boolean' &&
+                                    obj.common?.write !== false && obj.common?.read !== false,
                     },
                 };
 
@@ -5343,8 +5347,20 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
         info.style = getValueStyle({ state, isExpertMode: this.state.filter.expertMode, isButton: item.data.button });
 
         let val: React.JSX.Element[] = info.valTextRx as React.JSX.Element[];
-        if (!this.state.filter.expertMode && item.data.button) {
-            val = [<PressButtonIcon style={styles.cellValueButton} />];
+        if (!this.state.filter.expertMode) {
+            if (item.data.button) {
+                val = [<PressButtonIcon key="button" style={styles.cellValueButton} />];
+            } else if (item.data.switch) {
+                val = [<Switch
+                    key="switch"
+                    sx={{
+                        '& .MuiSwitch-thumb': { color: info.style.color },
+                        '& .MuiSwitch-track': !!this.states[id].val && this.state.selected.includes(id) ?
+                             { backgroundColor: this.props.themeType === 'dark' ? '#FFF !important' : '#111 !important' } : undefined,
+                    }}
+                    checked={!!this.states[id].val}
+                />];
+            }
         }
 
         return <Tooltip
@@ -6442,6 +6458,11 @@ export class ObjectBrowserClass extends Component<ObjectBrowserProps, ObjectBrow
                     this.props.socket
                         .setState(id, true)
                         .catch(e => window.alert(`Cannot write state "${id}": ${e}`));
+                } else if (!this.state.filter.expertMode && item.data.switch) {
+                    // in non-expert mode control switch directly
+                    this.props.socket
+                        .setState(id, !this.states[id].val)
+                        .catch(e => window.alert(`Cannot write state "${id}": ${e}`));
                 } else {
                     this.edit = {
                         val: this.states[id] ? this.states[id].val : '',
diff --git a/packages/jsonConfig/src/JsonConfig.tsx b/packages/jsonConfig/src/JsonConfig.tsx
index 38edbe1b0..b6364401c 100644
--- a/packages/jsonConfig/src/JsonConfig.tsx
+++ b/packages/jsonConfig/src/JsonConfig.tsx
@@ -248,8 +248,7 @@ class JsonConfig extends Router<JsonConfigProps, JsonConfigState> {
                                     schema,
                                     data: obj.native,
                                     common: obj.common,
-                                    // @ts-expect-error really no string?
-                                    hash: MD5(JSON.stringify(schema)),
+                                    hash: MD5(JSON.stringify(schema)).toString(),
                                 });
                             } else {
                                 window.alert(`Instance system.adapter.${this.props.adapterName}.${this.props.instance} not found!`);
@@ -345,8 +344,7 @@ class JsonConfig extends Router<JsonConfigProps, JsonConfigState> {
             } else if (this.fileSubscribed.includes(fileName)) {
                 try {
                     const schema = await this.getConfigFile(this.fileSubscribed[0]);
-                    // @ts-expect-error really no string?
-                    this.setState({ schema, hash: MD5(JSON.stringify(schema)) });
+                    this.setState({ schema, hash: MD5(JSON.stringify(schema)).toString() });
                 } catch {
                     // ignore errors
                 }
@@ -596,7 +594,7 @@ class JsonConfig extends Router<JsonConfigProps, JsonConfigState> {
 
             for (const attr of Object.keys(this.state.data)) {
                 const item = this.findAttr(attr);
-                if ((!item || !item.doNotSave) && !attr.startsWith('_')) {
+                if ((!item || !item.doNotSave || item.type === 'state') && !attr.startsWith('_')) {
                     ConfigGeneric.setValue(obj.native, attr, this.state.data[attr]);
                 } else {
                     ConfigGeneric.setValue(obj.native, attr, null);
diff --git a/packages/jsonConfig/src/JsonConfigComponent/ConfigGeneric.tsx b/packages/jsonConfig/src/JsonConfigComponent/ConfigGeneric.tsx
index ba7270868..753ffec76 100644
--- a/packages/jsonConfig/src/JsonConfigComponent/ConfigGeneric.tsx
+++ b/packages/jsonConfig/src/JsonConfigComponent/ConfigGeneric.tsx
@@ -171,7 +171,7 @@ export default class ConfigGeneric<Props extends ConfigGenericProps = ConfigGene
                         props.globalData,
                     )
                     : props.schema.default;
-            } else {
+            } else if (props.schema.type !== 'state') {
                 this.defaultValue = props.schema.defaultFunc
                     ? this.execute(
                         props.schema.defaultFunc,
@@ -188,7 +188,9 @@ export default class ConfigGeneric<Props extends ConfigGenericProps = ConfigGene
     }
 
     componentDidMount() {
-        this.props.registerOnForceUpdate && this.props.registerOnForceUpdate(this.props.attr, this.onUpdate);
+        if (this.props.registerOnForceUpdate) {
+            this.props.registerOnForceUpdate(this.props.attr, this.onUpdate);
+        }
         const LIKE_SELECT = ['select', 'autocomplete', 'autocompleteSendTo'];
         // init default value
         if (this.defaultValue !== undefined) {
diff --git a/packages/jsonConfig/src/JsonConfigComponent/ConfigState.tsx b/packages/jsonConfig/src/JsonConfigComponent/ConfigState.tsx
index 0583ab5c9..6558281d7 100644
--- a/packages/jsonConfig/src/JsonConfigComponent/ConfigState.tsx
+++ b/packages/jsonConfig/src/JsonConfigComponent/ConfigState.tsx
@@ -20,25 +20,26 @@ interface ConfigStateProps extends ConfigGenericProps {
 interface ConfigStateState extends ConfigGenericState {
     stateValue?: string | number | boolean | null;
     controlType?: string;
+    obj?: ioBroker.Object | null;
 }
 
 class ConfigState extends ConfigGeneric<ConfigStateProps, ConfigStateState> {
-    obj: ioBroker.Object | null = null;
-
     controlTimeout: ReturnType<typeof setTimeout> | null = null;
 
+    delayedUpdate: { timer: ReturnType<typeof setTimeout> | null, value: string | boolean | number | null } = { timer: null, value: null };
+
     getObjectID() {
         return `${this.props.schema.system ? 'system.adapter.' : ''}${this.props.adapterName}.${this.props.instance}.${this.props.schema.oid}`;
     }
 
     async componentDidMount() {
         super.componentDidMount();
-        this.obj = await this.props.socket.getObject(this.getObjectID());
-        const controlType = this.props.schema.control || await this.detectType();
+        const obj: ioBroker.StateObject = await this.props.socket.getObject(this.getObjectID()) as ioBroker.StateObject;
+        const controlType = this.props.schema.control || await this.detectType(obj);
 
         const state = await this.props.socket.getState(this.getObjectID());
 
-        this.setState({ stateValue: state ? state.val : null, controlType }, async () => {
+        this.setState({ stateValue: state ? state.val : null, controlType, obj }, async () => {
             await this.props.socket.subscribeState(this.getObjectID(), this.onStateChanged);
         });
     }
@@ -46,6 +47,11 @@ class ConfigState extends ConfigGeneric<ConfigStateProps, ConfigStateState> {
     componentWillUnmount() {
         super.componentWillUnmount();
         this.props.socket.unsubscribeState(this.getObjectID(), this.onStateChanged);
+        if (this.delayedUpdate.timer) {
+            clearTimeout(this.delayedUpdate.timer);
+            this.delayedUpdate.timer = null;
+        }
+
         if (this.controlTimeout) {
             clearTimeout(this.controlTimeout);
             this.controlTimeout = null;
@@ -60,29 +66,49 @@ class ConfigState extends ConfigGeneric<ConfigStateProps, ConfigStateState> {
             this.state.controlType === 'switch'
         ) {
             val = !!val;
+            if (this.state.stateValue !== val) {
+                this.setState({ stateValue: val });
+            }
         } else if (val !== null && (this.state.controlType === 'slider' || this.state.controlType === 'number')) {
             val = parseFloat(val as unknown as string);
+            console.log(`${Date.now()} Received new value: ${val}`);
+            if (val !== this.state.stateValue) {
+                if (this.delayedUpdate.timer) {
+                    clearTimeout(this.delayedUpdate.timer);
+                    this.delayedUpdate.timer = null;
+                }
+                this.delayedUpdate.value = val;
+                this.delayedUpdate.timer = setTimeout(() => {
+                    this.setState({ stateValue: this.delayedUpdate.value });
+                }, 500);
+            } else if (this.delayedUpdate.timer) {
+                clearTimeout(this.delayedUpdate.timer);
+                this.delayedUpdate.timer = null;
+            }
+        } else if (this.state.stateValue.toString() !== val.toString()) {
+            this.setState({ stateValue: val });
         }
-
-        this.setState({ stateValue: val });
     };
 
-    async detectType() {
+    async detectType(obj: ioBroker.StateObject) {
+        obj = obj || {} as ioBroker.StateObject;
+        obj.common = obj.common || {} as ioBroker.StateCommon;
+
         // read object
-        if (this.obj.common.type === 'boolean') {
-            if (this.obj.common.read === false) {
+        if (obj.common.type === 'boolean') {
+            if (obj.common.read === false) {
                 return 'button';
             }
-            if (this.obj.common.write) {
+            if (obj.common.write) {
                 return 'switch';
             }
 
             return 'text';
         }
 
-        if (this.obj.common.type === 'number') {
-            if (this.obj.common.write) {
-                if (this.obj.common.max !== undefined) {
+        if (obj.common.type === 'number') {
+            if (obj.common.write) {
+                if (obj.common.max !== undefined) {
                     return 'slider';
                 }
                 return 'input';
@@ -90,7 +116,7 @@ class ConfigState extends ConfigGeneric<ConfigStateProps, ConfigStateState> {
             return 'text';
         }
 
-        if (this.obj.common.write) {
+        if (obj.common.write) {
             return 'input';
         }
 
@@ -98,7 +124,11 @@ class ConfigState extends ConfigGeneric<ConfigStateProps, ConfigStateState> {
     }
 
     renderItem(/* error, disabled, defaultValue */) {
-        let content: React.JSX.Element | null = null;
+        if (!this.state.obj) {
+            return null;
+        }
+
+        let content: React.JSX.Element;
 
         if (this.state.controlType === 'button') {
             let icon: React.JSX.Element | null = null;
@@ -113,6 +143,7 @@ class ConfigState extends ConfigGeneric<ConfigStateProps, ConfigStateState> {
                 </IconButton>;
             } else {
                 content = <Button
+                    variant={this.props.schema.variant || 'contained'}
                     startIcon={icon}
                     style={this.props.schema.falseTextStyle}
                 >
@@ -143,7 +174,7 @@ class ConfigState extends ConfigGeneric<ConfigStateProps, ConfigStateState> {
                 textTrue ||
                 iconTrue
             ) {
-                content = <div style={{ display: 'flex' }}>
+                content = <div style={{ display: 'flex', alignItems: 'center', fontSize: 14 }}>
                     <span style={this.props.schema.falseTextStyle}>
                         {textFalse}
                         {iconFalse}
@@ -158,8 +189,8 @@ class ConfigState extends ConfigGeneric<ConfigStateProps, ConfigStateState> {
 
             const label = this.getText(this.props.schema.label, this.props.schema.noTranslation);
             if (label) {
-                content = <div style={{ display: 'flex' }}>
-                    {label}
+                content = <div style={{ display: 'flex', alignItems: 'center', fontSize: '1rem' }}>
+                    <span style={{ marginRight: 8 }}>{label}</span>
                     {content}
                 </div>;
             }
@@ -175,9 +206,9 @@ class ConfigState extends ConfigGeneric<ConfigStateProps, ConfigStateState> {
                 iconTrue = getIconByName(this.props.schema.trueImage, textTrue ? { marginRight: 8 } : undefined);
             }
 
-            const min = this.props.schema.min === undefined ? this.obj.common.min || 0 : this.props.schema.min;
-            const max = this.props.schema.max === undefined ? (this.obj.common.max === undefined ? 100 : this.obj.common.max) : this.props.schema.max;
-            const step = this.props.schema.step === undefined ? this.obj.common.step || 1 : this.props.schema.step;
+            const min = this.props.schema.min === undefined ? this.state.obj.common.min || 0 : this.props.schema.min;
+            const max = this.props.schema.max === undefined ? (this.state.obj.common.max === undefined ? 100 : this.state.obj.common.max) : this.props.schema.max;
+            const step = this.props.schema.step === undefined ? this.state.obj.common.step || 1 : this.props.schema.step;
 
             content = <Slider
                 style={{ width: '100%', flexGrow: 1 }}
@@ -185,14 +216,15 @@ class ConfigState extends ConfigGeneric<ConfigStateProps, ConfigStateState> {
                 max={max}
                 step={step}
                 value={this.state.stateValue as number}
-                onChange={(e: Event, value: number) => {
+                onChange={(_e: Event, value: number) => {
                     this.setState({ stateValue: value }, async () => {
                         if (this.controlTimeout) {
                             clearTimeout(this.controlTimeout);
                         }
                         this.controlTimeout = setTimeout(async () => {
+                            console.log(`${Date.now()} Send new value: ${this.state.stateValue}`);
                             this.controlTimeout = null;
-                            await this.props.socket.setState(this.getObjectID(), value, false);
+                            await this.props.socket.setState(this.getObjectID(), this.state.stateValue, false);
                         }, this.props.schema.controlDelay || 0);
                     });
                 }}
@@ -203,13 +235,20 @@ class ConfigState extends ConfigGeneric<ConfigStateProps, ConfigStateState> {
                 textTrue ||
                 iconTrue
             ) {
-                content = <div style={{ display: 'flex', width: '100%', flexGrow: 1 }}>
-                    <span style={this.props.schema.falseTextStyle}>
+                content = <div
+                    style={{
+                        display: 'flex',
+                        width: '100%',
+                        flexGrow: 1,
+                        alignItems: 'center',
+                    }}
+                >
+                    <span style={{ marginRight: 16, ...this.props.schema.falseTextStyle }}>
                         {textFalse}
                         {iconFalse}
                     </span>
                     {content}
-                    <span style={this.props.schema.trueTextStyle}>
+                    <span style={{ marginLeft: 16, ...this.props.schema.trueTextStyle }}>
                         {iconTrue}
                         {textTrue}
                     </span>
@@ -217,8 +256,8 @@ class ConfigState extends ConfigGeneric<ConfigStateProps, ConfigStateState> {
             }
             const label = this.getText(this.props.schema.label, this.props.schema.noTranslation);
             if (label) {
-                content = <div style={{ display: 'flex', width: '100%' }}>
-                    {label}
+                content = <div style={{ display: 'flex', width: '100%', alignItems: 'center' }}>
+                    <span style={{ whiteSpace: 'nowrap', marginRight: 8, fontSize: '1rem' }}>{label}</span>
                     {content}
                 </div>;
             }
@@ -226,6 +265,7 @@ class ConfigState extends ConfigGeneric<ConfigStateProps, ConfigStateState> {
             content = <TextField
                 style={{ width: '100%' }}
                 value={this.state.stateValue}
+                variant="standard"
                 onChange={e => {
                     this.setState({ stateValue: e.target.value }, async () => {
                         if (this.controlTimeout) {
@@ -240,12 +280,13 @@ class ConfigState extends ConfigGeneric<ConfigStateProps, ConfigStateState> {
                 label={this.getText(this.props.schema.label)}
                 helperText={this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)}
             />;
-        } else if (this.obj.common.type === 'number') {
-            const min = this.props.schema.min === undefined ? this.obj.common.min || 0 : this.props.schema.min;
-            const max = this.props.schema.max === undefined ? (this.obj.common.max === undefined ? 100 : this.obj.common.max) : this.props.schema.max;
-            const step = this.props.schema.step === undefined ? this.obj.common.step || 1 : this.props.schema.step;
+        } else if (this.state.obj.common.type === 'number') {
+            const min = this.props.schema.min === undefined ? this.state.obj.common.min || 0 : this.props.schema.min;
+            const max = this.props.schema.max === undefined ? (this.state.obj.common.max === undefined ? 100 : this.state.obj.common.max) : this.props.schema.max;
+            const step = this.props.schema.step === undefined ? this.state.obj.common.step || 1 : this.props.schema.step;
 
             content = <TextField
+                variant="standard"
                 style={{ width: '100%' }}
                 value={this.state.stateValue}
                 type="number"
@@ -265,7 +306,7 @@ class ConfigState extends ConfigGeneric<ConfigStateProps, ConfigStateState> {
                 label={this.getText(this.props.schema.label)}
                 helperText={this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)}
             />;
-        } else if (this.obj.common.type === 'boolean') {
+        } else if (this.state.obj.common.type === 'boolean') {
             let icon: React.JSX.Element | null = null;
             let text: string;
             let style: React.CSSProperties | undefined;
@@ -283,7 +324,7 @@ class ConfigState extends ConfigGeneric<ConfigStateProps, ConfigStateState> {
                 style = this.props.schema.trueTextStyle;
             }
             const label = this.getText(this.props.schema.label, this.props.schema.noTranslation);
-            content = <div style={style}>
+            content = <div style={{ fontSize: '1rem', ...style }}>
                 {label}
                 {label ? <span style={{ marginRight: 8 }}>:</span> : null}
                 {icon}
@@ -291,8 +332,8 @@ class ConfigState extends ConfigGeneric<ConfigStateProps, ConfigStateState> {
             </div>;
         } else {
             const label = this.getText(this.props.schema.label, this.props.schema.noTranslation);
-            const unit = this.getText(this.props.schema.unit, this.props.schema.noTranslation) || this.obj.common.unit;
-            content = <div>
+            const unit = this.getText(this.props.schema.unit, this.props.schema.noTranslation) || this.state.obj.common.unit;
+            content = <div style={{ fontSize: '1rem' }}>
                 {label}
                 {label ? <span style={{ marginRight: 8 }}>:</span> : null}
                 {this.state.stateValue}
diff --git a/packages/jsonConfig/src/JsonConfigComponent/index.tsx b/packages/jsonConfig/src/JsonConfigComponent/index.tsx
index 9b77eb9cc..e9099df4c 100644
--- a/packages/jsonConfig/src/JsonConfigComponent/index.tsx
+++ b/packages/jsonConfig/src/JsonConfigComponent/index.tsx
@@ -58,7 +58,6 @@ interface JsonConfigComponentState {
     alive: boolean;
     commandRunning: boolean;
     schema: ConfigItemTabs | ConfigItemPanel;
-    data: Record<string, any> | null;
 }
 
 export class JsonConfigComponent extends Component<JsonConfigComponentProps, JsonConfigComponentState> {
@@ -73,7 +72,6 @@ export class JsonConfigComponent extends Component<JsonConfigComponentProps, Jso
 
         this.state = {
             originalData: JSON.stringify(this.props.data),
-            // eslint-disable-next-line react/no-unused-state
             changed: false,
             errors: {},
             updateData: this.props.updateData || 0,
@@ -81,7 +79,6 @@ export class JsonConfigComponent extends Component<JsonConfigComponentProps, Jso
             alive: false,
             commandRunning: false,
             schema: JSON.parse(JSON.stringify(this.props.schema)),
-            data: null,
         };
 
         this.forceUpdateHandlers = {};
@@ -159,18 +156,8 @@ export class JsonConfigComponent extends Component<JsonConfigComponentProps, Jso
 
     onCommandRunning = (commandRunning: boolean) => this.setState({ commandRunning });
 
-    async readSettings() : Promise<void> {
-        if ((this.props.custom || this.props.common) && this.props.data) {
-            return;
-        }
-        const obj = await this.props.socket.getObject(`system.adapter.${this.props.adapterName}.${this.props.instance}`);
-        // eslint-disable-next-line react/no-unused-state
-        this.setState({ data: this.props.data || obj.native });
-    }
-
     readData() {
-        this.readSettings()
-            .then(() => this.props.socket.getCompactSystemConfig())
+        this.props.socket.getCompactSystemConfig()
             .then(systemConfig =>
                 this.props.socket.getState(`system.adapter.${this.props.adapterName}.${this.props.instance}.alive`)
                     .then(state => {
@@ -192,15 +179,19 @@ export class JsonConfigComponent extends Component<JsonConfigComponentProps, Jso
     onChange = (attrOrData: string | Record<string, any>, value: any, cb?: () => void, saveConfig?: boolean) => {
         if (this.props.onValueChange) {
             this.props.onValueChange(attrOrData as string, value, saveConfig);
-            cb && cb();
+            if (cb) {
+                cb();
+            }
         } else if (attrOrData && this.props.onChange) {
-            const newState: Partial<JsonConfigComponentState> = { data: attrOrData as Record<string, any> };
-
-            newState.changed = JSON.stringify(attrOrData) !== this.state.originalData;
+            const newState: Partial<JsonConfigComponentState> = {
+                changed: JSON.stringify(attrOrData) !== this.state.originalData,
+            };
 
             this.setState(newState as JsonConfigComponentState, () => {
                 this.props.onChange(attrOrData as Record<string, any>, newState.changed, saveConfig);
-                cb && cb();
+                if (cb) {
+                    cb();
+                }
             });
         } else if (saveConfig) {
             this.props.onChange(null, null, saveConfig);
@@ -216,7 +207,9 @@ export class JsonConfigComponent extends Component<JsonConfigComponentProps, Jso
             delete errors[attr];
         }
 
-        this.errorTimeout && clearTimeout(this.errorTimeout);
+        if (this.errorTimeout) {
+            clearTimeout(this.errorTimeout);
+        }
         if (JSON.stringify(errors) !== JSON.stringify(this.state.errors)) {
             this.errorTimeout = setTimeout(() =>
                 this.setState({ errors: this.errorCached }, () => {
diff --git a/packages/jsonConfig/src/types.d.ts b/packages/jsonConfig/src/types.d.ts
index 5e40d72fd..18987738f 100644
--- a/packages/jsonConfig/src/types.d.ts
+++ b/packages/jsonConfig/src/types.d.ts
@@ -536,6 +536,8 @@ export interface ConfigItemState extends ConfigItem {
     step?: number;
     /** delay in ms for slider or number */
     controlDelay?: number;
+    /** Variant of button */
+    variant?: 'contained' | 'outlined' | 'text';
  }
 
 export interface ConfigItemTextSendTo extends Omit<ConfigItem, 'data'> {