diff --git a/src/components/wired/common/GetWiredActionLayout.tsx b/src/components/wired/common/GetWiredActionLayout.tsx
index 9a0b1c09..a5072141 100644
--- a/src/components/wired/common/GetWiredActionLayout.tsx
+++ b/src/components/wired/common/GetWiredActionLayout.tsx
@@ -25,7 +25,7 @@ import { WiredActionTeleportView } from '../views/actions/WiredActionTeleportVie
 import { WiredActionToggleFurniStateView } from '../views/actions/WiredActionToggleFurniStateView';
 import { WiredActionLayout } from './WiredActionLayoutCode';
 
-export function GetWiredActionLayout(code: number): JSX.Element
+export const GetWiredActionLayout = (code: number) =>
 {
     switch(code)
     {
diff --git a/src/components/wired/common/GetWiredConditionLayout.tsx b/src/components/wired/common/GetWiredConditionLayout.tsx
index c3f79007..71dcd62c 100644
--- a/src/components/wired/common/GetWiredConditionLayout.tsx
+++ b/src/components/wired/common/GetWiredConditionLayout.tsx
@@ -15,7 +15,7 @@ import { WiredConditionTimeElapsedMoreView } from '../views/conditions/WiredCond
 import { WiredConditionUserCountInRoomView } from '../views/conditions/WiredConditionUserCountInRoomView';
 import { WiredConditionlayout } from './WiredConditionLayoutCode';
 
-export function GetWiredConditionLayout(code: number): JSX.Element
+export const GetWiredConditionLayout = (code: number) =>
 {
     switch(code)
     {
diff --git a/src/components/wired/common/GetWiredLayout.tsx b/src/components/wired/common/GetWiredLayout.tsx
index f4730eb7..5b5a6bed 100644
--- a/src/components/wired/common/GetWiredLayout.tsx
+++ b/src/components/wired/common/GetWiredLayout.tsx
@@ -3,7 +3,7 @@ import { GetWiredActionLayout } from './GetWiredActionLayout';
 import { GetWiredConditionLayout } from './GetWiredConditionLayout';
 import { GetWiredTriggerLayout } from './GetWiredTriggerLayout';
 
-export function GetWiredLayout(trigger: Triggerable): JSX.Element
+export const GetWiredLayout = (trigger: Triggerable) =>
 {
     if(trigger instanceof WiredActionDefinition) return GetWiredActionLayout(trigger.code);
 
diff --git a/src/components/wired/common/GetWiredTimeLocale.ts b/src/components/wired/common/GetWiredTimeLocale.ts
index 02aa3b4e..49025fe4 100644
--- a/src/components/wired/common/GetWiredTimeLocale.ts
+++ b/src/components/wired/common/GetWiredTimeLocale.ts
@@ -1,4 +1,4 @@
-export function GetWiredTimeLocale(value: number): string
+export const GetWiredTimeLocale = (value: number) =>
 {
     const time = Math.floor((value / 2));
 
diff --git a/src/components/wired/common/GetWiredTriggerLayout.tsx b/src/components/wired/common/GetWiredTriggerLayout.tsx
index 592b30dd..c6c9b452 100644
--- a/src/components/wired/common/GetWiredTriggerLayout.tsx
+++ b/src/components/wired/common/GetWiredTriggerLayout.tsx
@@ -14,7 +14,7 @@ import { WiredTriggeScoreAchievedView } from '../views/triggers/WiredTriggerScor
 import { WiredTriggerToggleFurniView } from '../views/triggers/WiredTriggerToggleFurniView';
 import { WiredTriggerLayout } from './WiredTriggerLayoutCode';
 
-export function GetWiredTriggerLayout(code: number): JSX.Element
+export const GetWiredTriggerLayout = (code: number) =>
 {
     switch(code)
     {
diff --git a/src/components/wired/views/WiredBaseView.tsx b/src/components/wired/views/WiredBaseView.tsx
index e04181ca..81e83e6d 100644
--- a/src/components/wired/views/WiredBaseView.tsx
+++ b/src/components/wired/views/WiredBaseView.tsx
@@ -5,6 +5,7 @@ import { Column } from '../../../common/Column';
 import { Flex } from '../../../common/Flex';
 import { Text } from '../../../common/Text';
 import { WiredEvent } from '../../../events';
+import { BatchUpdates } from '../../../hooks';
 import { dispatchUiEvent } from '../../../hooks/events';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../layout';
 import { WiredFurniType } from '../common/WiredFurniType';
@@ -27,42 +28,6 @@ export const WiredBaseView: FC<WiredBaseViewProps> = props =>
     const [ wiredDescription, setWiredDescription ] = useState<string>(null);
     const { trigger = null, setTrigger = null, setIntParams = null, setStringParam = null, setFurniIds = null } = useWiredContext();
 
-    useEffect(() =>
-    {
-        if(!trigger) return;
-
-        const spriteId = (trigger.spriteId || -1);
-
-        const furniData = GetSessionDataManager().getFloorItemData(spriteId);
-
-        if(!furniData)
-        {
-            setWiredName(('NAME: ' + spriteId));
-            setWiredDescription(('NAME: ' + spriteId));
-        }
-        else
-        {
-            setWiredName(furniData.name);
-            setWiredDescription(furniData.description);
-        }
-
-        setIntParams(trigger.intData);
-        setStringParam(trigger.stringData);
-        setFurniIds(prevValue =>
-            {
-                if(prevValue && prevValue.length) WiredSelectionVisualizer.clearSelectionShaderFromFurni(prevValue);
-
-                if(trigger.selectedItems && trigger.selectedItems.length)
-                {
-                    WiredSelectionVisualizer.applySelectionShaderToFurni(trigger.selectedItems);
-
-                    return trigger.selectedItems;
-                }
-
-                return [];
-            });
-    }, [ trigger, setIntParams, setStringParam, setFurniIds ]);
-
     const onSave = useCallback(() =>
     {
         if(validate && !validate()) return;
@@ -77,6 +42,44 @@ export const WiredBaseView: FC<WiredBaseViewProps> = props =>
         setTrigger(null);
     }, [ setTrigger ]);
 
+    useEffect(() =>
+    {
+        if(!trigger) return;
+
+        const spriteId = (trigger.spriteId || -1);
+        const furniData = GetSessionDataManager().getFloorItemData(spriteId);
+
+        BatchUpdates(() =>
+        {
+            if(!furniData)
+            {
+                setWiredName(('NAME: ' + spriteId));
+                setWiredDescription(('NAME: ' + spriteId));
+            }
+            else
+            {
+                setWiredName(furniData.name);
+                setWiredDescription(furniData.description);
+            }
+
+            setIntParams(trigger.intData);
+            setStringParam(trigger.stringData);
+            setFurniIds(prevValue =>
+                {
+                    if(prevValue && prevValue.length) WiredSelectionVisualizer.clearSelectionShaderFromFurni(prevValue);
+
+                    if(trigger.selectedItems && trigger.selectedItems.length)
+                    {
+                        WiredSelectionVisualizer.applySelectionShaderToFurni(trigger.selectedItems);
+
+                        return trigger.selectedItems;
+                    }
+
+                    return [];
+                });
+        });
+    }, [ trigger, setIntParams, setStringParam, setFurniIds ]);
+
     return (
         <NitroCardView uniqueKey="nitro-wired" className="nitro-wired" simple={ true }>
             <NitroCardHeaderView headerText={ LocalizeText('wiredfurni.title') } onCloseClick={ close } />
@@ -88,14 +91,14 @@ export const WiredBaseView: FC<WiredBaseViewProps> = props =>
                     </Flex>
                     <Text small>{ wiredDescription }</Text>
                 </Column>
-                { (children !== null) && <hr className="m-0 bg-dark" /> }
+                { !!children && <hr className="m-0 bg-dark" /> }
                 { children }
                 { (requiresFurni > WiredFurniType.STUFF_SELECTION_OPTION_NONE) &&
                     <>
                         <hr className="m-0 bg-dark" />
                         <WiredFurniSelectorView />
                     </> }
-                <Flex gap={ 1 }>
+                <Flex alignItems="center" gap={ 1 }>
                     <Button fullWidth variant="success" onClick={ onSave }>{ LocalizeText('wiredfurni.ready') }</Button>
                     <Button fullWidth variant="secondary" onClick={ close }>{ LocalizeText('cancel') }</Button>
                 </Flex>
diff --git a/src/components/wired/views/actions/WiredActionBaseView.tsx b/src/components/wired/views/actions/WiredActionBaseView.tsx
index 76548401..0d3a6076 100644
--- a/src/components/wired/views/actions/WiredActionBaseView.tsx
+++ b/src/components/wired/views/actions/WiredActionBaseView.tsx
@@ -2,6 +2,8 @@ import { WiredActionDefinition } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Text } from '../../../../common/Text';
 import { GetWiredTimeLocale } from '../../common/GetWiredTimeLocale';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
@@ -33,19 +35,17 @@ export const WiredActionBaseView: FC<WiredActionBaseViewProps> = props =>
 
     return (
         <WiredBaseView wiredType="action" requiresFurni={ requiresFurni } save={ onSave }>
-            { !children ? null : <>
-                { children }
-                <hr className="my-1 mb-2 bg-dark" />
-            </> }
-            <div className="form-group">
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.delay', [ 'seconds' ], [ GetWiredTimeLocale(delay) ]) }</label>
+            { children }
+            { !!children && <hr className="m-0 bg-dark" /> }
+            <Column>
+                <Text bold>{ LocalizeText('wiredfurni.params.delay', [ 'seconds' ], [ GetWiredTimeLocale(delay) ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
                     min={ 0 }
                     max={ 20 }
                     value={ delay }
                     onChange={ event => setDelay(event) } />
-            </div>
+            </Column>
         </WiredBaseView>
     );
 }
diff --git a/src/components/wired/views/actions/WiredActionBotChangeFigureView.tsx b/src/components/wired/views/actions/WiredActionBotChangeFigureView.tsx
index 8f913ffc..6a3cd9fc 100644
--- a/src/components/wired/views/actions/WiredActionBotChangeFigureView.tsx
+++ b/src/components/wired/views/actions/WiredActionBotChangeFigureView.tsx
@@ -1,5 +1,10 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import { GetSessionDataManager, LocalizeText } from '../../../../api';
+import { Button } from '../../../../common/Button';
+import { Column } from '../../../../common/Column';
+import { Flex } from '../../../../common/Flex';
+import { Text } from '../../../../common/Text';
+import { BatchUpdates } from '../../../../hooks';
 import { AvatarImageView } from '../../../../views/shared/avatar-image/AvatarImageView';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { WIRED_STRING_DELIMETER } from '../../common/WiredStringDelimeter';
@@ -14,14 +19,6 @@ export const WiredActionBotChangeFigureView: FC<{}> = props =>
     const [ figure, setFigure ] = useState('');
     const { trigger = null, setStringParam = null } = useWiredContext();
 
-    useEffect(() =>
-    {
-        const data = trigger.stringData.split(WIRED_STRING_DELIMETER);
-
-        if(data.length > 0) setBotName(data[0]);
-        if(data.length > 1) setFigure(data[1].length > 0 ? data[1] : DEFAULT_FIGURE);
-    }, [ trigger ]);
-
     const copyLooks = useCallback(() =>
     {
         setFigure(GetSessionDataManager().figure);
@@ -32,16 +29,27 @@ export const WiredActionBotChangeFigureView: FC<{}> = props =>
         setStringParam((botName + WIRED_STRING_DELIMETER + figure));
     }, [ botName, figure, setStringParam ]);
 
+    useEffect(() =>
+    {
+        const data = trigger.stringData.split(WIRED_STRING_DELIMETER);
+
+        BatchUpdates(() =>
+        {
+            if(data.length > 0) setBotName(data[0]);
+            if(data.length > 1) setFigure(data[1].length > 0 ? data[1] : DEFAULT_FIGURE);
+        });
+    }, [ trigger ]);
+
     return (
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="form-group">
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.bot.name') }</label>
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('wiredfurni.params.bot.name') }</Text>
                 <input type="text" className="form-control form-control-sm" maxLength={ 32 } value={ botName } onChange={ event => setBotName(event.target.value) } />
-            </div>
-            <div className="d-flex align-items-center justify-content-center">
+            </Column>
+            <Flex center>
                 <AvatarImageView figure={ figure } direction={ 4 } />
-                <button type="button" className="btn btn-primary" onClick={ copyLooks }>{ LocalizeText('wiredfurni.params.capture.figure') }</button>
-            </div>
+                <Button onClick={ copyLooks }>{ LocalizeText('wiredfurni.params.capture.figure') }</Button>
+            </Flex>
         </WiredActionBaseView>
     );
 }
diff --git a/src/components/wired/views/actions/WiredActionBotFollowAvatarView.tsx b/src/components/wired/views/actions/WiredActionBotFollowAvatarView.tsx
index 3351288c..db19a24f 100644
--- a/src/components/wired/views/actions/WiredActionBotFollowAvatarView.tsx
+++ b/src/components/wired/views/actions/WiredActionBotFollowAvatarView.tsx
@@ -1,5 +1,9 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Flex } from '../../../../common/Flex';
+import { Text } from '../../../../common/Text';
+import { BatchUpdates } from '../../../../hooks';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredActionBaseView } from './WiredActionBaseView';
@@ -10,38 +14,40 @@ export const WiredActionBotFollowAvatarView: FC<{}> = props =>
     const [ followMode, setFollowMode ] = useState(-1);
     const { trigger = null, setStringParam = null, setIntParams = null } = useWiredContext();
 
-    useEffect(() =>
-    {
-        setBotName(trigger.stringData);
-        setFollowMode((trigger.intData.length > 0) ? trigger.intData[0] : 0);
-    }, [ trigger ]);
-
     const save = useCallback(() =>
     {
-        setStringParam(botName);
-        setIntParams([followMode]);
+        BatchUpdates(() =>
+        {
+            setStringParam(botName);
+            setIntParams([followMode]);
+        });
     }, [ followMode, botName, setStringParam, setIntParams ]);
 
+    useEffect(() =>
+    {
+        BatchUpdates(() =>
+        {
+            setBotName(trigger.stringData);
+            setFollowMode((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+        });
+    }, [ trigger ]);
+
     return (
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="form-group mb-2">
+            <Column gap={ 1 }>
                 <label className="fw-bold">{ LocalizeText('wiredfurni.params.bot.name') }</label>
                 <input type="text" className="form-control form-control-sm" maxLength={ 32 } value={ botName } onChange={ event => setBotName(event.target.value) } />
-            </div>
-            <div className="form-group">
-                <div className="form-check">
+            </Column>
+            <Column gap={ 1 }>
+                <Flex alignItems="center" gap={ 1 }>
                     <input className="form-check-input" type="radio" name="followMode" id="followMode1" checked={ (followMode === 1) } onChange={ event => setFollowMode(1) } />
-                    <label className="form-check-label" htmlFor="followMode1">
-                        { LocalizeText('wiredfurni.params.start.following') }
-                    </label>
-                </div>
-                <div className="form-check">
+                    <Text>{ LocalizeText('wiredfurni.params.start.following') }</Text>
+                </Flex>
+                <Flex alignItems="center" gap={ 1 }>
                     <input className="form-check-input" type="radio" name="followMode" id="followMode2" checked={ (followMode === 0) } onChange={ event => setFollowMode(0) } />
-                    <label className="form-check-label" htmlFor="followMode2">
-                        { LocalizeText('wiredfurni.params.stop.following') }
-                    </label>
-                </div>
-            </div>
+                    <Text>{ LocalizeText('wiredfurni.params.stop.following') }</Text>
+                </Flex>
+            </Column>
         </WiredActionBaseView>
     );
 }
diff --git a/src/components/wired/views/actions/WiredActionBotGiveHandItemView.tsx b/src/components/wired/views/actions/WiredActionBotGiveHandItemView.tsx
index 1c998c9a..3a36ae75 100644
--- a/src/components/wired/views/actions/WiredActionBotGiveHandItemView.tsx
+++ b/src/components/wired/views/actions/WiredActionBotGiveHandItemView.tsx
@@ -1,10 +1,13 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Text } from '../../../../common/Text';
+import { BatchUpdates } from '../../../../hooks';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredActionBaseView } from './WiredActionBaseView';
 
-const allowedHanditemIds: number[] = [2, 5, 7, 8, 9, 10, 27];
+const ALLOWED_HAND_ITEM_IDS: number[] = [ 2, 5, 7, 8, 9, 10, 27 ];
 
 export const WiredActionBotGiveHandItemView: FC<{}> = props =>
 {
@@ -12,34 +15,40 @@ export const WiredActionBotGiveHandItemView: FC<{}> = props =>
     const [ handItemId, setHandItemId ] = useState(-1);
     const { trigger = null, setStringParam = null, setIntParams = null } = useWiredContext();
 
-    useEffect(() =>
-    {
-        setBotName(trigger.stringData);
-        setHandItemId((trigger.intData.length > 0) ? trigger.intData[0] : 0);
-    }, [ trigger ]);
-
     const save = useCallback(() =>
     {
-        setStringParam(botName);
-        setIntParams([ handItemId ]);
+        BatchUpdates(() =>
+        {
+            setStringParam(botName);
+            setIntParams([ handItemId ]);
+        });
     }, [ handItemId, botName, setStringParam, setIntParams ]);
 
+    useEffect(() =>
+    {
+        BatchUpdates(() =>
+        {
+            setBotName(trigger.stringData);
+            setHandItemId((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+        });
+    }, [ trigger ]);
+
     return (
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="form-group mb-2">
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.bot.name') }</label>
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('wiredfurni.params.bot.name') }</Text>
                 <input type="text" className="form-control form-control-sm" maxLength={ 32 } value={ botName } onChange={ event => setBotName(event.target.value) } />
-            </div>
-            <div className="form-group">
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.handitem') }</label>
+            </Column>
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('wiredfurni.params.handitem') }</Text>
                 <select className="form-select form-select-sm" value={ handItemId } onChange={ event => setHandItemId(parseInt(event.target.value)) }>
                     <option value="0">------</option>
-                    { allowedHanditemIds.map(value =>
+                    { ALLOWED_HAND_ITEM_IDS.map(value =>
                         {
                             return <option key={ value } value={ value }>{ LocalizeText(`handitem${ value }`) }</option>
                         }) }
                 </select>
-            </div>
+            </Column>
         </WiredActionBaseView>
     );
 }
diff --git a/src/components/wired/views/actions/WiredActionBotMoveView.tsx b/src/components/wired/views/actions/WiredActionBotMoveView.tsx
index 0ba69ae6..d03b42ea 100644
--- a/src/components/wired/views/actions/WiredActionBotMoveView.tsx
+++ b/src/components/wired/views/actions/WiredActionBotMoveView.tsx
@@ -1,5 +1,7 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Text } from '../../../../common/Text';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredActionBaseView } from './WiredActionBaseView';
@@ -9,22 +11,22 @@ export const WiredActionBotMoveView: FC<{}> = props =>
     const [ botName, setBotName ] = useState('');
     const { trigger = null, setStringParam = null } = useWiredContext();
 
-    useEffect(() =>
-    {
-        setBotName(trigger.stringData);
-    }, [ trigger ]);
-
     const save = useCallback(() =>
     {
         setStringParam(botName);
     }, [ botName, setStringParam ]);
 
+    useEffect(() =>
+    {
+        setBotName(trigger.stringData);
+    }, [ trigger ]);
+
     return (
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID } save={ save }>
-            <div className="form-group">
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.bot.name') }</label>
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('wiredfurni.params.bot.name') }</Text>
                 <input type="text" className="form-control form-control-sm" maxLength={ 32 } value={ botName } onChange={ event => setBotName(event.target.value) } />
-            </div>
+            </Column>
         </WiredActionBaseView>
     );
 }
diff --git a/src/components/wired/views/actions/WiredActionBotTalkToAvatarView.tsx b/src/components/wired/views/actions/WiredActionBotTalkToAvatarView.tsx
index 118a2e85..55cb3d31 100644
--- a/src/components/wired/views/actions/WiredActionBotTalkToAvatarView.tsx
+++ b/src/components/wired/views/actions/WiredActionBotTalkToAvatarView.tsx
@@ -1,5 +1,9 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Flex } from '../../../../common/Flex';
+import { Text } from '../../../../common/Text';
+import { BatchUpdates } from '../../../../hooks';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { WIRED_STRING_DELIMETER } from '../../common/WiredStringDelimeter';
 import { useWiredContext } from '../../context/WiredContext';
@@ -12,42 +16,48 @@ export const WiredActionBotTalkToAvatarView: FC<{}> = props =>
     const [ talkMode, setTalkMode ] = useState(-1);
     const { trigger = null, setStringParam = null, setIntParams = null } = useWiredContext();
 
+    const save = useCallback(() =>
+    {
+        BatchUpdates(() =>
+        {
+            setStringParam(botName + WIRED_STRING_DELIMETER + message);
+            setIntParams([ talkMode ]);
+        });
+    }, [ botName, message, talkMode, setStringParam, setIntParams ]);
+
     useEffect(() =>
     {
         const data = trigger.stringData.split(WIRED_STRING_DELIMETER);
         
-        if(data.length > 0) setBotName(data[0]);
-        if(data.length > 1) setMessage(data[1].length > 0 ? data[1] : '');
-
-        setTalkMode((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+        BatchUpdates(() =>
+        {
+            if(data.length > 0) setBotName(data[0]);
+            if(data.length > 1) setMessage(data[1].length > 0 ? data[1] : '');
+    
+            setTalkMode((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+        });
     }, [ trigger ]);
 
-    const save = useCallback(() =>
-    {
-        setStringParam(botName + WIRED_STRING_DELIMETER + message);
-        setIntParams([ talkMode ]);
-    }, [ botName, message, talkMode, setStringParam, setIntParams ]);
-
     return (
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="form-group mb-2">
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.bot.name') }</label>
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('wiredfurni.params.bot.name') }</Text>
                 <input type="text" className="form-control form-control-sm" maxLength={ 32 } value={ botName } onChange={ event => setBotName(event.target.value) } />
-            </div>
-            <div className="form-group mb-2">
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.message') }</label>
+            </Column>
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('wiredfurni.params.message') }</Text>
                 <input type="text" className="form-control form-control-sm" maxLength={ 64 } value={ message } onChange={ event => setMessage(event.target.value) } />
-            </div>
-            <div className="form-group">
-                <div className="form-check">
+            </Column>
+            <Column gap={ 1 }>
+                <Flex alignItems="center" gap={ 1 }>
                     <input className="form-check-input" type="radio" name="talkMode" id="talkMode1" checked={ (talkMode === 0) } onChange={ event => setTalkMode(0) } />
-                    <label className="form-check-label" htmlFor="talkMode1">{ LocalizeText('wiredfurni.params.talk') }</label>
-                </div>
-                <div className="form-check">
+                    <Text>{ LocalizeText('wiredfurni.params.talk') }</Text>
+                </Flex>
+                <Flex alignItems="center" gap={ 1 }>
                     <input className="form-check-input" type="radio" name="talkMode" id="talkMode2" checked={ (talkMode === 1) } onChange={ event => setTalkMode(1) } />
-                    <label className="form-check-label" htmlFor="talkMode2">{ LocalizeText('wiredfurni.params.whisper') }</label>
-                </div>
-            </div>
+                    <Text>{ LocalizeText('wiredfurni.params.whisper') }</Text>
+                </Flex>
+            </Column>
         </WiredActionBaseView>
     );
 }
diff --git a/src/components/wired/views/actions/WiredActionBotTalkView.tsx b/src/components/wired/views/actions/WiredActionBotTalkView.tsx
index bf92e915..86c83fb9 100644
--- a/src/components/wired/views/actions/WiredActionBotTalkView.tsx
+++ b/src/components/wired/views/actions/WiredActionBotTalkView.tsx
@@ -1,5 +1,9 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Flex } from '../../../../common/Flex';
+import { Text } from '../../../../common/Text';
+import { BatchUpdates } from '../../../../hooks';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { WIRED_STRING_DELIMETER } from '../../common/WiredStringDelimeter';
 import { useWiredContext } from '../../context/WiredContext';
@@ -12,42 +16,48 @@ export const WiredActionBotTalkView: FC<{}> = props =>
     const [ talkMode, setTalkMode ] = useState(-1);
     const { trigger = null, setStringParam = null, setIntParams = null } = useWiredContext();
 
+    const save = useCallback(() =>
+    {
+        BatchUpdates(() =>
+        {
+            setStringParam(botName + WIRED_STRING_DELIMETER + message);
+            setIntParams([ talkMode ]);
+        });
+    }, [ botName, message, talkMode, setStringParam, setIntParams ]);
+
     useEffect(() =>
     {
         const data = trigger.stringData.split(WIRED_STRING_DELIMETER);
         
-        if(data.length > 0) setBotName(data[0]);
-        if(data.length > 1) setMessage(data[1].length > 0 ? data[1] : '');
-
-        setTalkMode((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+        BatchUpdates(() =>
+        {
+            if(data.length > 0) setBotName(data[0]);
+            if(data.length > 1) setMessage(data[1].length > 0 ? data[1] : '');
+    
+            setTalkMode((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+        });
     }, [ trigger ]);
 
-    const save = useCallback(() =>
-    {
-        setStringParam(botName + WIRED_STRING_DELIMETER + message);
-        setIntParams([ talkMode ]);
-    }, [ botName, message, talkMode, setStringParam, setIntParams ]);
-
     return (
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="form-group mb-2">
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.bot.name') }</label>
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('wiredfurni.params.bot.name') }</Text>
                 <input type="text" className="form-control form-control-sm" maxLength={ 32 } value={ botName } onChange={ event => setBotName(event.target.value) } />
-            </div>
-            <div className="form-group mb-2">
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.message') }</label>
+            </Column>
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('wiredfurni.params.message') }</Text>
                 <input type="text" className="form-control form-control-sm" maxLength={ 64 } value={ message } onChange={ event => setMessage(event.target.value) } />
-            </div>
-            <div className="form-group">
-                <div className="form-check">
+            </Column>
+            <Column gap={ 1 }>
+                <Flex alignItems="center" gap={ 1 }>
                     <input className="form-check-input" type="radio" name="talkMode" id="talkMode1" checked={ (talkMode === 0) } onChange={ event => setTalkMode(0) } />
-                    <label className="form-check-label" htmlFor="talkMode1">{ LocalizeText('wiredfurni.params.talk') }</label>
-                </div>
-                <div className="form-check">
+                    <Text>{ LocalizeText('wiredfurni.params.talk') }</Text>
+                </Flex>
+                <Flex alignItems="center" gap={ 1 }>
                     <input className="form-check-input" type="radio" name="talkMode" id="talkMode2" checked={ (talkMode === 1) } onChange={ event => setTalkMode(1) } />
-                    <label className="form-check-label" htmlFor="talkMode2">{ LocalizeText('wiredfurni.params.shout') }</label>
-                </div>
-            </div>
+                    <Text>{ LocalizeText('wiredfurni.params.shout') }</Text>
+                </Flex>
+            </Column>
         </WiredActionBaseView>
     );
 }
diff --git a/src/components/wired/views/actions/WiredActionBotTeleportView.tsx b/src/components/wired/views/actions/WiredActionBotTeleportView.tsx
index e9170f68..bf929e98 100644
--- a/src/components/wired/views/actions/WiredActionBotTeleportView.tsx
+++ b/src/components/wired/views/actions/WiredActionBotTeleportView.tsx
@@ -1,5 +1,7 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Text } from '../../../../common/Text';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredActionBaseView } from './WiredActionBaseView';
@@ -9,22 +11,22 @@ export const WiredActionBotTeleportView: FC<{}> = props =>
     const [ botName, setBotName ] = useState('');
     const { trigger = null, setStringParam = null } = useWiredContext();
 
-    useEffect(() =>
-    {
-        setBotName(trigger.stringData);
-    }, [ trigger ]);
-
     const save = useCallback(() =>
     {
         setStringParam(botName);
     }, [ botName, setStringParam ]);
 
+    useEffect(() =>
+    {
+        setBotName(trigger.stringData);
+    }, [ trigger ]);
+
     return (
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID } save={ save }>
-            <div className="form-group">
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.bot.name') }</label>
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('wiredfurni.params.bot.name') }</Text>
                 <input type="text" className="form-control form-control-sm" maxLength={ 32 } value={ botName } onChange={ event => setBotName(event.target.value) } />
-            </div>
+            </Column>
         </WiredActionBaseView>
     );
 }
diff --git a/src/components/wired/views/actions/WiredActionChatView.tsx b/src/components/wired/views/actions/WiredActionChatView.tsx
index b0dad715..a67ec482 100644
--- a/src/components/wired/views/actions/WiredActionChatView.tsx
+++ b/src/components/wired/views/actions/WiredActionChatView.tsx
@@ -1,5 +1,7 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Text } from '../../../../common/Text';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredActionBaseView } from './WiredActionBaseView';
@@ -9,22 +11,22 @@ export const WiredActionChatView: FC<{}> = props =>
     const [ message, setMessage ] = useState('');
     const { trigger = null, setStringParam = null } = useWiredContext();
 
-    useEffect(() =>
-    {
-        setMessage(trigger.stringData);
-    }, [ trigger ]);
-
     const save = useCallback(() =>
     {
         setStringParam(message);
     }, [ message, setStringParam ]);
 
+    useEffect(() =>
+    {
+        setMessage(trigger.stringData);
+    }, [ trigger ]);
+
     return (
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="form-group">
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.message') }</label>
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('wiredfurni.params.message') }</Text>
                 <input type="text" className="form-control form-control-sm" value={ message } onChange={ event => setMessage(event.target.value) } maxLength={ 100 } />
-            </div>
+            </Column>
         </WiredActionBaseView>
     );
 }
diff --git a/src/components/wired/views/actions/WiredActionGiveRewardView.tsx b/src/components/wired/views/actions/WiredActionGiveRewardView.tsx
index a956d4bc..5da167d7 100644
--- a/src/components/wired/views/actions/WiredActionGiveRewardView.tsx
+++ b/src/components/wired/views/actions/WiredActionGiveRewardView.tsx
@@ -1,6 +1,12 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { FC, useCallback, useEffect, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { LocalizeText } from '../../../../api';
+import { Button } from '../../../../common/Button';
+import { Column } from '../../../../common/Column';
+import { Flex } from '../../../../common/Flex';
+import { Text } from '../../../../common/Text';
+import { BatchUpdates } from '../../../../hooks';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredActionBaseView } from './WiredActionBaseView';
@@ -13,41 +19,8 @@ export const WiredActionGiveRewardView: FC<{}> = props =>
     const [ rewardsLimit, setRewardsLimit ] = useState(1);
     const [ limitationInterval, setLimitationInterval ] = useState(1);
     const [ rewards, setRewards ] = useState<{ isBadge: boolean, itemCode: string, probability: number }[]>([]);
-
     const { trigger = null, setIntParams = null, setStringParam = null } = useWiredContext();
 
-    useEffect(() =>
-    {
-        setRewardTime(trigger.intData.length > 0 ? trigger.intData[0] : 0);
-        setUniqueRewards(trigger.intData.length > 1 ? trigger.intData[1] === 1 : false);
-        setRewardsLimit(trigger.intData.length > 2 ? trigger.intData[2] : 0);
-        setLimitationInterval(trigger.intData.length > 3 ? trigger.intData[3] : 0);
-        setLimitEnabled(trigger.intData.length > 3 ? trigger.intData[3] > 0 : false);
-
-        const readRewards: { isBadge: boolean, itemCode: string, probability: number }[] = [];
-
-        if(trigger.stringData.length > 0 && trigger.stringData.includes(';'))
-        {
-            const splittedRewards = trigger.stringData.split(';');
-
-            for(const rawReward of splittedRewards)
-            {
-                const reward = rawReward.split(',');
-
-                if(reward.length !== 3) continue;
-
-                readRewards.push({ isBadge: reward[0] === '0', itemCode: reward[1], probability: Number(reward[2]) });
-            }
-        }
-
-        if(readRewards.length === 0)
-        {
-            readRewards.push({ isBadge: false, itemCode: '', probability: null });
-        }
-
-        setRewards(readRewards);
-    }, [ trigger ]);
-
     const addReward = useCallback(() =>
     {
         setRewards(rewards => [...rewards, { isBadge: false, itemCode: '', probability: null }]);
@@ -55,11 +28,15 @@ export const WiredActionGiveRewardView: FC<{}> = props =>
 
     const removeReward = useCallback((index: number) =>
     {
-        const rewardsClone = Array.from(rewards);
-        rewardsClone.splice(index, 1);
+        setRewards(prevValue =>
+            {
+                const newValues = Array.from(prevValue);
 
-        setRewards(rewardsClone);
-    }, [ rewards, setRewards ]);
+                newValues.splice(index, 1);
+
+                return newValues;
+            });
+    }, [ setRewards ]);
 
     const updateReward = useCallback((index: number, isBadge: boolean, itemCode: string, probability: number) =>
     {
@@ -89,84 +66,109 @@ export const WiredActionGiveRewardView: FC<{}> = props =>
 
         if(stringRewards.length > 0)
         {
-            setStringParam(stringRewards.join(';'));
-            setIntParams([rewardTime, uniqueRewards ? 1 : 0, rewardsLimit, limitationInterval]);
+            BatchUpdates(() =>
+            {
+                setStringParam(stringRewards.join(';'));
+                setIntParams([rewardTime, uniqueRewards ? 1 : 0, rewardsLimit, limitationInterval]);
+            });
         }
     }, [ rewardTime, uniqueRewards, rewardsLimit, limitationInterval, rewards, setIntParams, setStringParam ]);
 
+    useEffect(() =>
+    {
+        const readRewards: { isBadge: boolean, itemCode: string, probability: number }[] = [];
+
+        if(trigger.stringData.length > 0 && trigger.stringData.includes(';'))
+        {
+            const splittedRewards = trigger.stringData.split(';');
+
+            for(const rawReward of splittedRewards)
+            {
+                const reward = rawReward.split(',');
+
+                if(reward.length !== 3) continue;
+
+                readRewards.push({ isBadge: reward[0] === '0', itemCode: reward[1], probability: Number(reward[2]) });
+            }
+        }
+
+        if(readRewards.length === 0) readRewards.push({ isBadge: false, itemCode: '', probability: null });
+
+        BatchUpdates(() =>
+        {
+            setRewardTime((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+            setUniqueRewards((trigger.intData.length > 1) ? (trigger.intData[1] === 1) : false);
+            setRewardsLimit((trigger.intData.length > 2) ? trigger.intData[2] : 0);
+            setLimitationInterval((trigger.intData.length > 3) ? trigger.intData[3] : 0);
+            setLimitEnabled((trigger.intData.length > 3) ? trigger.intData[3] > 0 : false);
+            setRewards(readRewards);
+        });
+    }, [ trigger ]);
+
     return (
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="form-check">
-                <input className="form-check-input" type="checkbox" id="limitEnabled" onChange={(e) => setLimitEnabled(e.target.checked)} />
-                <label className="form-check-label" htmlFor="uniqueRewards">
-                    { LocalizeText('wiredfurni.params.prizelimit', ['amount'], [limitEnabled ? rewardsLimit.toString() : '']) }
-                </label>
-            </div>
-            { !limitEnabled && <div className="bg-muted rounded small text-black p-1 text-center">
+            <Flex alignItems="center" gap={ 1 }>
+                <input className="form-check-input" type="checkbox" id="limitEnabled" onChange={ event => setLimitEnabled(event.target.checked)} />
+                <Text>{ LocalizeText('wiredfurni.params.prizelimit', ['amount'], [limitEnabled ? rewardsLimit.toString() : '']) }</Text>
+            </Flex>
+            { !limitEnabled &&
+                <Text center small className="bg-muted rounded p-1">
                     Reward limit not set. Make sure rewards are badges or non-tradeable items.
-                </div> }
-            { limitEnabled && 
+                </Text> }
+            { limitEnabled &&
                 <ReactSlider
                     className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 1000 }
                     value={ rewardsLimit }
                     onChange={ event => setRewardsLimit(event) } /> }
-            <hr className="my-1 mb-2 bg-dark" />
-            <div className="fw-bold">How ofter can a user be rewarded?</div>
-            <div className="d-flex">
-                <select className="form-select form-select-sm w-100" value={ rewardTime } onChange={ (e) => setRewardTime(Number(e.target.value)) }>
-                    <option value="0">Once</option>
-                    <option value="3">Once every { limitationInterval } minutes</option>
-                    <option value="2">Once every { limitationInterval } hours</option>
-                    <option value="1">Once every { limitationInterval } days</option>
-                </select>
-                { rewardTime > 0 && <input type="number" className="ms-2 form-control form-control-sm" value={ limitationInterval } onChange={ event => setLimitationInterval(Number(event.target.value)) } /> }
-            </div>
-            <hr className="my-1 mb-2 bg-dark" />
-            <div className="form-check">
+            <hr className="m-0 bg-dark" />
+            <Column gap={ 1 }>
+                <Text bold>How often can a user be rewarded?</Text>
+                <Flex gap={ 1 }>
+                    <select className="form-select form-select-sm w-100" value={ rewardTime } onChange={ (e) => setRewardTime(Number(e.target.value)) }>
+                        <option value="0">Once</option>
+                        <option value="3">Once every { limitationInterval } minutes</option>
+                        <option value="2">Once every { limitationInterval } hours</option>
+                        <option value="1">Once every { limitationInterval } days</option>
+                    </select>
+                    { (rewardTime > 0) && <input type="number" className="form-control form-control-sm" value={ limitationInterval } onChange={ event => setLimitationInterval(Number(event.target.value)) } /> }
+                </Flex>
+            </Column>
+            <hr className="m-0 bg-dark" />
+            <Flex alignItems="center" gap={ 1 }>
                 <input className="form-check-input" type="checkbox" id="uniqueRewards" checked={ uniqueRewards } onChange={(e) => setUniqueRewards(e.target.checked)} />
-                <label className="form-check-label" htmlFor="uniqueRewards">
-                    Unique rewards
-                </label>
-            </div>
-            <div className="bg-muted rounded small text-black p-1 text-center">If checked each reward will be given once to each user. This will disable the probabilities option.</div>
-            <hr className="my-1 mb-2 bg-dark" />
-            <div className="d-flex justify-content-between align-items-center">
-                <div className="fw-bold">Rewards</div>
-                <div className="btn btn-sm btn-success" onClick={ addReward }><i className="fas fa-plus" /></div>
-            </div>
-            <table className="table-sm">
-                <thead>
-                    <tr>
-                        <td>Badge?</td>
-                        <td>Item Code</td>
-                        <td>Probability</td>
-                        <td></td>
-                    </tr>
-                </thead>
-                <tbody>
-                    { rewards && rewards.map((reward, index) =>
-                        {
-                            return (
-                                <tr key={ index }>
-                                    <td className="d-flex align-items-center justify-content-center">
-                                        <input className="form-check-input" type="checkbox" checked={ reward.isBadge } onChange={(e) => updateReward(index, e.target.checked, reward.itemCode, reward.probability)} />
-                                    </td>
-                                    <td>
-                                        <input type="text" className="form-control form-control-sm" value={ reward.itemCode } onChange={ e => updateReward(index, reward.isBadge, e.target.value, reward.probability) } />
-                                    </td>
-                                    <td>
-                                        <input type="number" className="form-control form-control-sm" value={ reward.probability } onChange={ e => updateReward(index, reward.isBadge, reward.itemCode, Number(e.target.value)) } />
-                                    </td>
-                                    <td>
-                                        { index > 0 && <button className="btn btn-sm btn-danger" onClick={() => removeReward(index) }><i className="fas fa-trash" /></button> }
-                                    </td>
-                                </tr>
-                            )
-                        }) }
-                </tbody>
-            </table>
+                <Text>Unique rewards</Text>
+            </Flex>
+            <Text center small className="bg-muted rounded p-1">
+                If checked each reward will be given once to each user. This will disable the probabilities option.
+            </Text>
+            <hr className="m-0 bg-dark" />
+            <Flex justifyContent="between" alignItems="center">
+                <Text bold>Rewards</Text>
+                <Button variant="success" onClick={ addReward }>
+                    <FontAwesomeIcon icon="plus" />
+                </Button>
+            </Flex>
+            <Column gap={ 1 }>
+                { rewards && rewards.map((reward, index) =>
+                    {
+                        return (
+                            <Flex key={ index } gap={ 1 }>
+                                <Flex alignItems="center" gap={ 1 }>
+                                    <input className="form-check-input" type="checkbox" checked={ reward.isBadge } onChange={(e) => updateReward(index, e.target.checked, reward.itemCode, reward.probability)} />
+                                    <Text small>Badge?</Text>
+                                </Flex>
+                                <input type="text" className="form-control form-control-sm" value={ reward.itemCode } onChange={ e => updateReward(index, reward.isBadge, e.target.value, reward.probability) } placeholder="Item Code" />
+                                <input type="number" className="form-control form-control-sm" value={ reward.probability } onChange={ e => updateReward(index, reward.isBadge, reward.itemCode, Number(e.target.value)) } placeholder="Probability" />
+                                { (index > 0) &&
+                                    <Button variant="danger" onClick={ event => removeReward(index) }>
+                                        <FontAwesomeIcon icon="trash" />
+                                    </Button> }
+                            </Flex>
+                        )
+                    }) }
+            </Column>
         </WiredActionBaseView>
     );
 }
diff --git a/src/components/wired/views/actions/WiredActionGiveScoreToPredefinedTeamView.tsx b/src/components/wired/views/actions/WiredActionGiveScoreToPredefinedTeamView.tsx
index 7895f4d3..1e5c2d38 100644
--- a/src/components/wired/views/actions/WiredActionGiveScoreToPredefinedTeamView.tsx
+++ b/src/components/wired/views/actions/WiredActionGiveScoreToPredefinedTeamView.tsx
@@ -1,6 +1,10 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Flex } from '../../../../common/Flex';
+import { Text } from '../../../../common/Text';
+import { BatchUpdates } from '../../../../hooks';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredActionBaseView } from './WiredActionBaseView';
@@ -12,61 +16,62 @@ export const WiredActionGiveScoreToPredefinedTeamView: FC<{}> = props =>
     const [ selectedTeam, setSelectedTeam ] = useState(1);
     const { trigger = null, setIntParams = null } = useWiredContext();
 
-    useEffect(() =>
-    {
-        if(trigger.intData.length >= 2)
-        {
-            setPoints(trigger.intData[0]);
-            setTime(trigger.intData[1]);
-            setSelectedTeam(trigger.intData[2]);
-        }
-        else
-        {
-            setPoints(1);
-            setTime(1);
-            setSelectedTeam(1);
-        }
-    }, [ trigger ]);
-
     const save = useCallback(() =>
     {
         setIntParams([ points, time, selectedTeam ]);
     }, [ points, time, selectedTeam, setIntParams ]);
 
+    useEffect(() =>
+    {
+        BatchUpdates(() =>
+        {
+            if(trigger.intData.length >= 2)
+            {
+                setPoints(trigger.intData[0]);
+                setTime(trigger.intData[1]);
+                setSelectedTeam(trigger.intData[2]);
+            }
+            else
+            {
+                setPoints(1);
+                setTime(1);
+                setSelectedTeam(1);
+            }
+        });
+    }, [ trigger ]);
+
     return (
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="form-group mb-2">
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.setpoints', [ 'points' ], [ points.toString() ]) }</label>
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('wiredfurni.params.setpoints', [ 'points' ], [ points.toString() ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 100 }
                     value={ points }
                     onChange={ event => setPoints(event) } />
-            </div>
-            <div className="form-group mb-2">
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.settimesingame', [ 'times' ], [ time.toString() ]) }</label>
+            </Column>
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('wiredfurni.params.settimesingame', [ 'times' ], [ time.toString() ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 10 }
                     value={ time }
                     onChange={ event => setTime(event) } />
-            </div>
-            <div className="form-group">
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.team') }</label>
+            </Column>
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('wiredfurni.params.team') }</Text>
                 { [1, 2, 3, 4].map(value =>
                     {
                         return (
-                            <div key={ value } className="form-check">
+                            <Flex key={ value } gap={ 1 }>
                                 <input className="form-check-input" type="radio" name="selectedTeam" id={ `selectedTeam${ value }` } checked={ (selectedTeam === value) } onChange={ event => setSelectedTeam(value) } />
-                                <label className="form-check-label" htmlFor={'selectedTeam' + value}>
-                                    { LocalizeText('wiredfurni.params.team.' + value) }
-                                </label>
-                            </div>
+                                <Text>{ LocalizeText('wiredfurni.params.team.' + value) }</Text>
+                            </Flex>
                         );
                     }) }
-            </div>
+            </Column>
         </WiredActionBaseView>
     );
 }
diff --git a/src/components/wired/views/actions/WiredActionGiveScoreView.tsx b/src/components/wired/views/actions/WiredActionGiveScoreView.tsx
index a73b1e87..b82f2d0c 100644
--- a/src/components/wired/views/actions/WiredActionGiveScoreView.tsx
+++ b/src/components/wired/views/actions/WiredActionGiveScoreView.tsx
@@ -1,6 +1,9 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Text } from '../../../../common/Text';
+import { BatchUpdates } from '../../../../hooks';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredActionBaseView } from './WiredActionBaseView';
@@ -11,45 +14,48 @@ export const WiredActionGiveScoreView: FC<{}> = props =>
     const [ time, setTime ] = useState(1);
     const { trigger = null, setIntParams = null } = useWiredContext();
 
-    useEffect(() =>
-    {
-        if(trigger.intData.length >= 2)
-        {
-            setPoints(trigger.intData[0]);
-            setTime(trigger.intData[1]);
-        }
-        else
-        {
-            setPoints(1);
-            setTime(1);
-        }
-    }, [ trigger ]);
-
     const save = useCallback(() =>
     {
         setIntParams([ points, time ]);
     }, [ points, time, setIntParams ]);
 
+    useEffect(() =>
+    {
+        BatchUpdates(() =>
+        {
+            if(trigger.intData.length >= 2)
+            {
+                setPoints(trigger.intData[0]);
+                setTime(trigger.intData[1]);
+            }
+            else
+            {
+                setPoints(1);
+                setTime(1);
+            }
+        });
+    }, [ trigger ]);
+
     return (
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="form-group mb-2">
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.setpoints', [ 'points' ], [ points.toString() ]) }</label>
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('wiredfurni.params.setpoints', [ 'points' ], [ points.toString() ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 100 }
                     value={ points }
                     onChange={ event => setPoints(event) } />
-            </div>
-            <div className="form-group">
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.settimesingame', [ 'times' ], [ time.toString() ]) }</label>
+            </Column>
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('wiredfurni.params.settimesingame', [ 'times' ], [ time.toString() ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 10 }
                     value={ time }
                     onChange={ event => setTime(event) } />
-            </div>
+            </Column>
         </WiredActionBaseView>
     );
 }
diff --git a/src/components/wired/views/actions/WiredActionJoinTeamView.tsx b/src/components/wired/views/actions/WiredActionJoinTeamView.tsx
index a6c75127..bd3fae76 100644
--- a/src/components/wired/views/actions/WiredActionJoinTeamView.tsx
+++ b/src/components/wired/views/actions/WiredActionJoinTeamView.tsx
@@ -1,5 +1,8 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Flex } from '../../../../common/Flex';
+import { Text } from '../../../../common/Text';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredActionBaseView } from './WiredActionBaseView';
@@ -9,32 +12,30 @@ export const WiredActionJoinTeamView: FC<{}> = props =>
     const [ selectedTeam, setSelectedTeam ] = useState(-1);
     const { trigger = null, setIntParams = null } = useWiredContext();
 
-    useEffect(() =>
-    {
-        setSelectedTeam((trigger.intData.length > 0) ? trigger.intData[0] : 0);
-    }, [ trigger ]);
-
     const save = useCallback(() =>
     {
         setIntParams([ selectedTeam ]);
     }, [ selectedTeam, setIntParams ]);
 
+    useEffect(() =>
+    {
+        setSelectedTeam((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+    }, [ trigger ]);
+
     return (
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="form-group">
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.team') }</label>
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('wiredfurni.params.team') }</Text>
                 { [1, 2, 3, 4].map(team =>
                     {
                         return (
-                            <div key={ team } className="form-check">
+                            <Flex key={ team } gap={ 1 }>
                                 <input className="form-check-input" type="radio" name="selectedTeam" id={ `selectedTeam${ team }` } checked={ (selectedTeam === team) } onChange={ event => setSelectedTeam(team) } />
-                                <label className="form-check-label" htmlFor={ `selectedTeam${ team }` }>
-                                    { LocalizeText(`wiredfurni.params.team.${ team }`) }
-                                </label>
-                            </div>
+                                <Text>{ LocalizeText(`wiredfurni.params.team.${ team }`) }</Text>
+                            </Flex>
                         )
                     }) }
-            </div>
+            </Column>
         </WiredActionBaseView>
     );
 }
diff --git a/src/components/wired/views/actions/WiredActionKickFromRoomView.tsx b/src/components/wired/views/actions/WiredActionKickFromRoomView.tsx
index 3e37ad35..25dc5b82 100644
--- a/src/components/wired/views/actions/WiredActionKickFromRoomView.tsx
+++ b/src/components/wired/views/actions/WiredActionKickFromRoomView.tsx
@@ -1,5 +1,7 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Text } from '../../../../common/Text';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredActionBaseView } from './WiredActionBaseView';
@@ -9,22 +11,22 @@ export const WiredActionKickFromRoomView: FC<{}> = props =>
     const [ message, setMessage ] = useState('');
     const { trigger = null, setStringParam = null } = useWiredContext();
 
-    useEffect(() =>
-    {
-        setMessage(trigger.stringData);
-    }, [ trigger ]);
-
     const save = useCallback(() =>
     {
         setStringParam(message);
     }, [ message, setStringParam ]);
 
+    useEffect(() =>
+    {
+        setMessage(trigger.stringData);
+    }, [ trigger ]);
+
     return (
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="form-group">
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.message') }</label>
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('wiredfurni.params.message') }</Text>
                 <input type="text" className="form-control form-control-sm" value={ message } onChange={ event => setMessage(event.target.value) } maxLength={ 100 } />
-            </div>
+            </Column>
         </WiredActionBaseView>
     );
 }
diff --git a/src/components/wired/views/actions/WiredActionMoveAndRotateFurniView.tsx b/src/components/wired/views/actions/WiredActionMoveAndRotateFurniView.tsx
index ed1d33d3..4b322d03 100644
--- a/src/components/wired/views/actions/WiredActionMoveAndRotateFurniView.tsx
+++ b/src/components/wired/views/actions/WiredActionMoveAndRotateFurniView.tsx
@@ -1,5 +1,9 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Flex } from '../../../../common/Flex';
+import { Text } from '../../../../common/Text';
+import { BatchUpdates } from '../../../../hooks';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredActionBaseView } from './WiredActionBaseView';
@@ -31,59 +35,58 @@ export const WiredActionMoveAndRotateFurniView: FC<{}> = props =>
     const [ rotation, setRotation ] = useState(-1);
     const { trigger = null, setIntParams = null } = useWiredContext();
 
-    useEffect(() =>
-    {
-        if(trigger.intData.length >= 2)
-        {
-            setMovement(trigger.intData[0]);
-            setRotation(trigger.intData[1]);
-        }
-        else
-        {
-            setMovement(-1);
-            setRotation(-1);
-        }
-    }, [ trigger ]);
-
     const save = useCallback(() =>
     {
         setIntParams([ movement, rotation ]);
     }, [ movement, rotation, setIntParams ]);
 
+    useEffect(() =>
+    {
+        BatchUpdates(() =>
+        {
+            if(trigger.intData.length >= 2)
+            {
+                setMovement(trigger.intData[0]);
+                setRotation(trigger.intData[1]);
+            }
+            else
+            {
+                setMovement(-1);
+                setRotation(-1);
+            }
+        });
+    }, [ trigger ]);
+
     return (
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_BY_TYPE_OR_FROM_CONTEXT } save={ save }>
-            <div className="form-group mb-2">
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.startdir') }</label>
-                <div className="row row-col-4">
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('wiredfurni.params.startdir') }</Text>
+                <Flex gap={ 1 }>
                     { directionOptions.map(option =>
                         {
                             return (
-                                <div key={ option.value } className="col">
-                                    <div className="form-check">
-                                        <input className="form-check-input" type="radio" name="movement" id={ `movement${ option.value }` } checked={ (movement === option.value) } onChange={ event => setMovement(option.value) } />
-                                        <label className="form-check-label" htmlFor={ `movement${ option.value }` }>
-                                            <i className={ `icon icon-${ option.icon }` } />
-                                        </label>
-                                    </div>
-                                </div>
+                                <Flex alignItems="center" gap={ 1 }>
+                                    <input className="form-check-input" type="radio" name="movement" id={ `movement${ option.value }` } checked={ (movement === option.value) } onChange={ event => setMovement(option.value) } />
+                                    <Text>
+                                        <i className={ `icon icon-${ option.icon }` } />
+                                    </Text>
+                                </Flex>
                             )
                         }) }
-                </div>
-            </div>
-            <div className="form-group">
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.turn') }</label>
+                </Flex>
+            </Column>
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('wiredfurni.params.turn') }</Text>
                 { rotationOptions.map(option =>
                     {
                         return (
-                            <div key={ option } className="form-check">
+                            <Flex alignItems="center" gap={ 1 }>
                                 <input className="form-check-input" type="radio" name="rotation" id={ `rotation${ option }` } checked={ (rotation === option) } onChange={ event => setRotation(option) } />
-                                <label className="form-check-label" htmlFor={ `rotation${ option }` }>
-                                    { LocalizeText(`wiredfurni.params.turn.${ option }`) }
-                                </label>
-                            </div>
+                                <Text>{ LocalizeText(`wiredfurni.params.turn.${ option }`) }</Text>
+                            </Flex>
                         )
                     }) }
-            </div>
+            </Column>
         </WiredActionBaseView>
     );
 }
diff --git a/src/components/wired/views/actions/WiredActionMoveFurniToView.tsx b/src/components/wired/views/actions/WiredActionMoveFurniToView.tsx
index abf69e40..bea80976 100644
--- a/src/components/wired/views/actions/WiredActionMoveFurniToView.tsx
+++ b/src/components/wired/views/actions/WiredActionMoveFurniToView.tsx
@@ -1,6 +1,10 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Flex } from '../../../../common/Flex';
+import { Text } from '../../../../common/Text';
+import { BatchUpdates } from '../../../../hooks';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredActionBaseView } from './WiredActionBaseView';
@@ -30,54 +34,53 @@ export const WiredActionMoveFurniToView: FC<{}> = props =>
     const [ movement, setMovement ] = useState(-1);
     const { trigger = null, setIntParams = null } = useWiredContext();
 
-    useEffect(() =>
-    {
-        if(trigger.intData.length >= 2)
-        {
-            setSpacing(trigger.intData[1]);
-            setMovement(trigger.intData[0]);
-        }
-        else
-        {
-            setSpacing(-1);
-            setMovement(-1);
-        }
-    }, [ trigger ]);
-
     const save = useCallback(() =>
     {
         setIntParams([ movement, spacing ]);
     }, [ movement, spacing, setIntParams ]);
 
+    useEffect(() =>
+    {
+        BatchUpdates(() =>
+        {
+            if(trigger.intData.length >= 2)
+            {
+                setSpacing(trigger.intData[1]);
+                setMovement(trigger.intData[0]);
+            }
+            else
+            {
+                setSpacing(-1);
+                setMovement(-1);
+            }
+        });
+    }, [ trigger ]);
+
     return (
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_OR_BY_TYPE } save={ save }>
-            <div className="form-group mb-2">
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.emptytiles', [ 'tiles' ], [ spacing.toString() ]) }</label>
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('wiredfurni.params.emptytiles', [ 'tiles' ], [ spacing.toString() ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 5 }
                     value={ spacing }
                     onChange={ event => setSpacing(event) } />
-            </div>
-            <div className="form-group">
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.startdir') }</label>
-                <div className="row row-cold-4">
+            </Column>
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('wiredfurni.params.startdir') }</Text>
+                <Flex gap={ 1 }>
                     { directionOptions.map(value =>
                         {
                             return (
-                                <div key={ value.value } className="col">
-                                    <div className="form-check">
-                                        <input className="form-check-input" type="radio" name="movement" id={ `movement${ value.value }` } checked={ (movement === value.value) } onChange={ event => setMovement(value.value) } />
-                                        <label className="form-check-label" htmlFor={ `movement${ value.value }` }>
-                                            <i className={ `icon icon-${ value.icon }` } />
-                                        </label>
-                                    </div>
-                                </div>
+                                <Flex key={ value.value } alignItems="center" gap={ 1 }>
+                                    <input className="form-check-input" type="radio" name="movement" id={ `movement${ value.value }` } checked={ (movement === value.value) } onChange={ event => setMovement(value.value) } />
+                                    <Text><i className={ `icon icon-${ value.icon }` } /></Text>
+                                </Flex>
                             )
                         }) }
-                </div>
-            </div>
+                </Flex>
+            </Column>
         </WiredActionBaseView>
     );
 }
diff --git a/src/components/wired/views/actions/WiredActionMoveFurniView.tsx b/src/components/wired/views/actions/WiredActionMoveFurniView.tsx
index a494a58d..8919d5f5 100644
--- a/src/components/wired/views/actions/WiredActionMoveFurniView.tsx
+++ b/src/components/wired/views/actions/WiredActionMoveFurniView.tsx
@@ -1,5 +1,9 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Flex } from '../../../../common/Flex';
+import { Text } from '../../../../common/Text';
+import { BatchUpdates } from '../../../../hooks';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredActionBaseView } from './WiredActionBaseView';
@@ -43,67 +47,64 @@ export const WiredActionMoveFurniView: FC<{}> = props =>
     const [ rotation, setRotation ] = useState(-1);
     const { trigger = null, setIntParams = null } = useWiredContext();
 
-    useEffect(() =>
-    {
-        if(trigger.intData.length >= 2)
-        {
-            setMovement(trigger.intData[0]);
-            setRotation(trigger.intData[1]);
-        }
-        else
-        {
-            setMovement(-1);
-            setRotation(-1);
-        }
-    }, [ trigger ]);
-
     const save = useCallback(() =>
     {
         setIntParams([ movement, rotation ]);
     }, [ movement, rotation, setIntParams ]);
 
+    useEffect(() =>
+    {
+        BatchUpdates(() =>
+        {
+            if(trigger.intData.length >= 2)
+            {
+                setMovement(trigger.intData[0]);
+                setRotation(trigger.intData[1]);
+            }
+            else
+            {
+                setMovement(-1);
+                setRotation(-1);
+            }
+        });
+    }, [ trigger ]);
+
     return (
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_BY_TYPE_OR_FROM_CONTEXT } save={ save }>
-            <div className="form-group mb-2">
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.movefurni') }</label>
-                <div className="form-check">
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('wiredfurni.params.movefurni') }</Text>
+                <Flex alignItems="center" gap={ 1 }>
                     <input className="form-check-input" type="radio" name="selectedTeam" id="movement0" checked={ (movement === 0) } onChange={ event => setMovement(0) } />
-                    <label className="form-check-label" htmlFor="movement0">
-                        { LocalizeText('wiredfurni.params.movefurni.0') }
-                    </label>
-                </div>
-                <div className="row row-col-4">
+                    <Text>{ LocalizeText('wiredfurni.params.movefurni.0') }</Text>
+                </Flex>
+                <Flex gap={ 1 }>
                     { directionOptions.map(option =>
                         {
                             return (
-                                <div key={ option.value } className="col">
-                                    <div className="form-check">
-                                        <input className="form-check-input" type="radio" name="movement" id={ `movement${ option.value }` } checked={ (movement === option.value) } onChange={ event => setMovement(option.value) } />
-                                        <label className="form-check-label" htmlFor={ `movement${ option.value }` }>
-                                            <i className={ `icon icon-${ option.icon }` } />
-                                        </label>
-                                    </div>
-                                </div>
+                                <Flex alignItems="center" key={ option.value } gap={ 1 }>
+                                    <input className="form-check-input" type="radio" name="movement" id={ `movement${ option.value }` } checked={ (movement === option.value) } onChange={ event => setMovement(option.value) } />
+                                    <i className={ `icon icon-${ option.icon }` } />
+                                </Flex>
                             )
                         }) }
                     <div className="col" />
-                </div>
-            </div>
-            <div className="form-group">
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.rotatefurni') }</label>
+                </Flex>
+            </Column>
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('wiredfurni.params.rotatefurni') }</Text>
                 { rotationOptions.map(option =>
                         {
                             return (
-                                <div key={ option } className="form-check">
+                                <Flex alignItems="center" key={ option } gap={ 1 }>
                                     <input className="form-check-input" type="radio" name="rotation" id={ `rotation${ option }` } checked={ (rotation === option) } onChange={ event => setRotation(option) } />
-                                    <label className="form-check-label" htmlFor={'rotation' + option}>
+                                    <Text>
                                         { [1, 2].includes(option) && <i className={ `icon icon-rot-${ option }` } /> }
                                         { LocalizeText(`wiredfurni.params.rotatefurni.${ option }`) }
-                                    </label>
-                                </div>
+                                    </Text>
+                                </Flex>
                             )
                         }) }
-            </div>
+            </Column>
         </WiredActionBaseView>
     );
 }
diff --git a/src/components/wired/views/actions/WiredActionMuteUserView.tsx b/src/components/wired/views/actions/WiredActionMuteUserView.tsx
index 6eec99f6..ed087d7d 100644
--- a/src/components/wired/views/actions/WiredActionMuteUserView.tsx
+++ b/src/components/wired/views/actions/WiredActionMuteUserView.tsx
@@ -1,6 +1,9 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Text } from '../../../../common/Text';
+import { BatchUpdates } from '../../../../hooks';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredActionBaseView } from './WiredActionBaseView';
@@ -11,33 +14,39 @@ export const WiredActionMuteUserView: FC<{}> = props =>
     const [ message, setMessage ] = useState('');
     const { trigger = null, setIntParams = null, setStringParam = null } = useWiredContext();
 
-    useEffect(() =>
-    {
-        setTime((trigger.intData.length > 0) ? trigger.intData[0] : 0);
-        setMessage(trigger.stringData);
-    }, [ trigger ]);
-
     const save = useCallback(() =>
     {
-        setIntParams([ time ]);
-        setStringParam(message);
+        BatchUpdates(() =>
+        {
+            setIntParams([ time ]);
+            setStringParam(message);
+        });
     }, [ time, message, setIntParams, setStringParam ]);
 
+    useEffect(() =>
+    {
+        BatchUpdates(() =>
+        {
+            setTime((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+            setMessage(trigger.stringData);
+        });
+    }, [ trigger ]);
+
     return (
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="form-group mb-2">
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.length.minutes', ['minutes'], [ time.toString() ]) }</label>
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('wiredfurni.params.length.minutes', ['minutes'], [ time.toString() ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 10 }
                     value={ time }
                     onChange={ event => setTime(event) } />
-            </div>
-            <div className="form-group">
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.message') }</label>
+            </Column>
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('wiredfurni.params.message') }</Text>
                 <input type="text" className="form-control form-control-sm" value={ message } onChange={ event => setMessage(event.target.value) } maxLength={ 100 } />
-            </div>
+            </Column>
         </WiredActionBaseView>
     );
 }
diff --git a/src/components/wired/views/actions/WiredActionSetFurniStateToView.tsx b/src/components/wired/views/actions/WiredActionSetFurniStateToView.tsx
index 30df7087..3b334784 100644
--- a/src/components/wired/views/actions/WiredActionSetFurniStateToView.tsx
+++ b/src/components/wired/views/actions/WiredActionSetFurniStateToView.tsx
@@ -1,5 +1,9 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Flex } from '../../../../common/Flex';
+import { Text } from '../../../../common/Text';
+import { BatchUpdates } from '../../../../hooks';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredActionBaseView } from './WiredActionBaseView';
@@ -11,41 +15,38 @@ export const WiredActionSetFurniStateToView: FC<{}> = props =>
     const [ positionFlag, setPositionFlag ] = useState(-1);
     const { trigger = null, setIntParams = null } = useWiredContext();
 
-    useEffect(() =>
-    {
-        setStateFlag(trigger.getBoolean(0) ? 1 : 0);
-        setDirectionFlag(trigger.getBoolean(1) ? 1 : 0);
-        setPositionFlag(trigger.getBoolean(2) ? 1 : 0);
-    }, [ trigger ]);
-
     const save = useCallback(() =>
     {
         setIntParams([ stateFlag, directionFlag, positionFlag ]);
     }, [ directionFlag, positionFlag, stateFlag, setIntParams ]);
 
+    useEffect(() =>
+    {
+        BatchUpdates(() =>
+        {
+            setStateFlag(trigger.getBoolean(0) ? 1 : 0);
+            setDirectionFlag(trigger.getBoolean(1) ? 1 : 0);
+            setPositionFlag(trigger.getBoolean(2) ? 1 : 0);
+        });
+    }, [ trigger ]);
+
     return (
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID } save={ save }>
-            <div className="form-group">
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.conditions') }</label>
-                <div className="form-check">
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('wiredfurni.params.conditions') }</Text>
+                <Flex alignItems="center" gap={ 1 }>
                     <input className="form-check-input" type="checkbox" id="stateFlag" onChange={ event => setStateFlag(event.target.checked ? 1 : 0) } />
-                    <label className="form-check-label" htmlFor="stateFlag">
-                        { LocalizeText('wiredfurni.params.condition.state') }
-                    </label>
-                </div>
-                <div className="form-check">
+                    <Text>{ LocalizeText('wiredfurni.params.condition.state') }</Text>
+                </Flex>
+                <Flex alignItems="center" gap={ 1 }>
                     <input className="form-check-input" type="checkbox" id="directionFlag" onChange={ event => setDirectionFlag(event.target.checked ? 1 : 0) } />
-                    <label className="form-check-label" htmlFor="directionFlag">
-                        { LocalizeText('wiredfurni.params.condition.direction') }
-                    </label>
-                </div>
-                <div className="form-check">
+                    <Text>{ LocalizeText('wiredfurni.params.condition.direction') }</Text>
+                </Flex>
+                <Flex alignItems="center" gap={ 1 }>
                     <input className="form-check-input" type="checkbox" id="positionFlag" onChange={ event => setPositionFlag(event.target.checked ? 1 : 0) } />
-                    <label className="form-check-label" htmlFor="positionFlag">
-                        { LocalizeText('wiredfurni.params.condition.position') }
-                    </label>
-                </div>
-            </div>
+                    <Text>{ LocalizeText('wiredfurni.params.condition.position') }</Text>
+                </Flex>
+            </Column>
         </WiredActionBaseView>
     );
 }
diff --git a/src/components/wired/views/conditions/WiredConditionFurniHasFurniOnView.tsx b/src/components/wired/views/conditions/WiredConditionFurniHasFurniOnView.tsx
index 79f8df23..5fab235a 100644
--- a/src/components/wired/views/conditions/WiredConditionFurniHasFurniOnView.tsx
+++ b/src/components/wired/views/conditions/WiredConditionFurniHasFurniOnView.tsx
@@ -29,7 +29,7 @@ export const WiredConditionFurniHasFurniOnView: FC<{}> = props =>
                 { [0, 1].map(value =>
                     {
                         return (
-                            <Flex gap={ 1 } key={ value }>
+                            <Flex alignItems="center" gap={ 1 } key={ value }>
                                 <input className="form-check-input" type="radio" name="requireAll" id={ `requireAll${ value }` } checked={ (requireAll === value) } onChange={ event => setRequireAll(value) } />
                                 <Text>{ LocalizeText('wiredfurni.params.requireall.' + value) }</Text>
                             </Flex>
diff --git a/src/components/wired/views/conditions/WiredConditionFurniHasNotFurniOnView.tsx b/src/components/wired/views/conditions/WiredConditionFurniHasNotFurniOnView.tsx
index 71cf5464..1e9d8efe 100644
--- a/src/components/wired/views/conditions/WiredConditionFurniHasNotFurniOnView.tsx
+++ b/src/components/wired/views/conditions/WiredConditionFurniHasNotFurniOnView.tsx
@@ -29,7 +29,7 @@ export const WiredConditionFurniHasNotFurniOnView: FC<{}> = props =>
                 { [0, 1].map(value =>
                     {
                         return (
-                            <Flex gap={ 1 } key={ value }>
+                            <Flex alignItems="center" gap={ 1 } key={ value }>
                                 <input className="form-check-input" type="radio" name="requireAll" id={ `requireAll${ value }` } checked={ (requireAll === value) } onChange={ event => setRequireAll(value) } />
                                 <Text>{ LocalizeText(`wiredfurni.params.not_requireall.${ value }`) }</Text>
                             </Flex>
diff --git a/src/components/wired/views/conditions/WiredConditionFurniMatchesSnapshotView.tsx b/src/components/wired/views/conditions/WiredConditionFurniMatchesSnapshotView.tsx
index c7aa6509..2924cc60 100644
--- a/src/components/wired/views/conditions/WiredConditionFurniMatchesSnapshotView.tsx
+++ b/src/components/wired/views/conditions/WiredConditionFurniMatchesSnapshotView.tsx
@@ -3,6 +3,7 @@ import { LocalizeText } from '../../../../api';
 import { Column } from '../../../../common/Column';
 import { Flex } from '../../../../common/Flex';
 import { Text } from '../../../../common/Text';
+import { BatchUpdates } from '../../../../hooks';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredConditionBaseView } from './WiredConditionBaseView';
@@ -21,24 +22,27 @@ export const WiredConditionFurniMatchesSnapshotView: FC<{}> = props =>
 
     useEffect(() =>
     {
-        setStateFlag(trigger.getBoolean(0) ? 1 : 0);
-        setDirectionFlag(trigger.getBoolean(1) ? 1 : 0);
-        setPositionFlag(trigger.getBoolean(2) ? 1 : 0);
+        BatchUpdates(() =>
+        {
+            setStateFlag(trigger.getBoolean(0) ? 1 : 0);
+            setDirectionFlag(trigger.getBoolean(1) ? 1 : 0);
+            setPositionFlag(trigger.getBoolean(2) ? 1 : 0);
+        });
     }, [ trigger ]);
     
     return (
         <WiredConditionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID } save={ save }>
             <Column gap={ 1 }>
                 <Text bold>{ LocalizeText('wiredfurni.params.conditions') }</Text>
-                <Flex gap={ 1 }>
+                <Flex alignItems="center" gap={ 1 }>
                     <input className="form-check-input" type="checkbox" id="stateFlag" onChange={ event => setStateFlag(event.target.checked ? 1 : 0) } />
                     <Text>{ LocalizeText('wiredfurni.params.condition.state') }</Text>
                 </Flex>
-                <Flex gap={ 1 }>
+                <Flex alignItems="center" gap={ 1 }>
                     <input className="form-check-input" type="checkbox" id="directionFlag" onChange={ event => setDirectionFlag(event.target.checked ? 1 : 0) } />
                     <Text>{ LocalizeText('wiredfurni.params.condition.direction') }</Text>
                 </Flex>
-                <Flex gap={ 1 }>
+                <Flex alignItems="center" gap={ 1 }>
                     <input className="form-check-input" type="checkbox" id="positionFlag" onChange={ event => setPositionFlag(event.target.checked ? 1 : 0) } />
                     <Text>{ LocalizeText('wiredfurni.params.condition.position') }</Text>
                 </Flex>
diff --git a/src/components/wired/views/conditions/WiredConditionUserCountInRoomView.tsx b/src/components/wired/views/conditions/WiredConditionUserCountInRoomView.tsx
index 897a7881..da62af2e 100644
--- a/src/components/wired/views/conditions/WiredConditionUserCountInRoomView.tsx
+++ b/src/components/wired/views/conditions/WiredConditionUserCountInRoomView.tsx
@@ -3,6 +3,7 @@ import ReactSlider from 'react-slider';
 import { LocalizeText } from '../../../../api';
 import { Column } from '../../../../common/Column';
 import { Text } from '../../../../common/Text';
+import { BatchUpdates } from '../../../../hooks';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredConditionBaseView } from './WiredConditionBaseView';
@@ -20,16 +21,19 @@ export const WiredConditionUserCountInRoomView: FC<{}> = props =>
 
     useEffect(() =>
     {
-        if(trigger.intData.length >= 2)
+        BatchUpdates(() =>
         {
-            setMin(trigger.intData[0]);
-            setMax(trigger.intData[1]);
-        }
-        else
-        {
-            setMin(1);
-            setMax(1);
-        }
+            if(trigger.intData.length >= 2)
+            {
+                setMin(trigger.intData[0]);
+                setMax(trigger.intData[1]);
+            }
+            else
+            {
+                setMin(1);
+                setMax(1);
+            }
+        });
     }, [ trigger ]);
     
     return (
diff --git a/src/components/wired/views/triggers/WiredTriggerAvatarEnterRoomView.tsx b/src/components/wired/views/triggers/WiredTriggerAvatarEnterRoomView.tsx
index c8cd6cc2..ae1c2890 100644
--- a/src/components/wired/views/triggers/WiredTriggerAvatarEnterRoomView.tsx
+++ b/src/components/wired/views/triggers/WiredTriggerAvatarEnterRoomView.tsx
@@ -3,6 +3,7 @@ import { LocalizeText } from '../../../../api';
 import { Column } from '../../../../common/Column';
 import { Flex } from '../../../../common/Flex';
 import { Text } from '../../../../common/Text';
+import { BatchUpdates } from '../../../../hooks';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredTriggerBaseView } from './WiredTriggerBaseView';
@@ -21,8 +22,11 @@ export const WiredTriggerAvatarEnterRoomView: FC<{}> = props =>
 
     useEffect(() =>
     {
-        setUsername(trigger.stringData);
-        setAvatarMode(trigger.stringData ? 1 : 0)
+        BatchUpdates(() =>
+        {
+            setUsername(trigger.stringData);
+            setAvatarMode(trigger.stringData ? 1 : 0);
+        });
     }, [ trigger ]);
 
     return (
diff --git a/src/components/wired/views/triggers/WiredTriggerAvatarSaysSomethingView.tsx b/src/components/wired/views/triggers/WiredTriggerAvatarSaysSomethingView.tsx
index 7a9f3596..edc55a50 100644
--- a/src/components/wired/views/triggers/WiredTriggerAvatarSaysSomethingView.tsx
+++ b/src/components/wired/views/triggers/WiredTriggerAvatarSaysSomethingView.tsx
@@ -3,6 +3,7 @@ import { GetSessionDataManager, LocalizeText } from '../../../../api';
 import { Column } from '../../../../common/Column';
 import { Flex } from '../../../../common/Flex';
 import { Text } from '../../../../common/Text';
+import { BatchUpdates } from '../../../../hooks';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredTriggerBaseView } from './WiredTriggerBaseView';
@@ -15,14 +16,20 @@ export const WiredTriggerAvatarSaysSomethingView: FC<{}> = props =>
 
     const save = useCallback(() =>
     {
-        setStringParam(message);
-        setIntParams([ triggererAvatar ]);
+        BatchUpdates(() =>
+        {
+            setStringParam(message);
+            setIntParams([ triggererAvatar ]);
+        });
     }, [ message, triggererAvatar, setStringParam, setIntParams ]);
 
     useEffect(() =>
     {
-        setMessage(trigger.stringData);
-        setTriggererAvatar((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+        BatchUpdates(() =>
+        {
+            setMessage(trigger.stringData);
+            setTriggererAvatar((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+        });
     }, [ trigger ]);
     
     return (