diff --git a/src/views/room/widgets/furniture/background-color/FurnitureBackgroundColorView.tsx b/src/views/room/widgets/furniture/background-color/FurnitureBackgroundColorView.tsx
index a29c5454..1442a942 100644
--- a/src/views/room/widgets/furniture/background-color/FurnitureBackgroundColorView.tsx
+++ b/src/views/room/widgets/furniture/background-color/FurnitureBackgroundColorView.tsx
@@ -2,6 +2,10 @@ import { ApplyTonerComposer, RoomControllerLevel, RoomEngineObjectEvent, RoomEng
 import { FC, useCallback, useEffect, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { GetRoomEngine, GetSessionDataManager, LocalizeText, RoomWidgetUpdateBackgroundColorPreviewEvent, RoomWidgetUpdateRoomObjectEvent } from '../../../../../api';
+import { Button } from '../../../../../common/Button';
+import { Column } from '../../../../../common/Column';
+import { FormGroup } from '../../../../../common/FormGroup';
+import { Text } from '../../../../../common/Text';
 import { SendMessageHook } from '../../../../../hooks';
 import { CreateEventDispatcherHook, useRoomEngineEvent } from '../../../../../hooks/events';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
@@ -86,43 +90,49 @@ export const FurnitureBackgroundColorView: FC<{}> = props =>
         <NitroCardView>
             <NitroCardHeaderView headerText={ LocalizeText('widget.backgroundcolor.title') } onCloseClick={ close } />
             <NitroCardContentView>
-                <div className="form-group">
-                    <label className="fw-bold text-black">{ LocalizeText('widget.backgroundcolor.hue') }</label>
-                    <ReactSlider
-                        className={ 'nitro-slider' }
-                        min={ 0 }
-                        max={ 360 }
-                        value={ hue }
-                        onChange={ event => setHue(event) }
-                        thumbClassName={ 'thumb degree' }
-                        renderThumb={ (props, state) => <div {...props}>{ state.valueNow }</div> } />
-                </div>
-                <div className="form-group">
-                    <label className="fw-bold text-black">{ LocalizeText('widget.backgroundcolor.saturation') }</label>
-                    <ReactSlider
-                        className={ 'nitro-slider' }
-                        min={ 0 }
-                        max={ 100 }
-                        value={ saturation }
-                        onChange={ event => setSaturation(event) }
-                        thumbClassName={ 'thumb percent' }
-                        renderThumb={ (props, state) => <div {...props}>{ state.valueNow }</div> } />
-                </div>
-                <div className="form-group mb-2">
-                    <label className="fw-bold text-black">{ LocalizeText('widget.backgroundcolor.lightness') }</label>
-                    <ReactSlider
-                        className={ 'nitro-slider' }
-                        min={ 0 }
-                        max={ 100 }
-                        value={ lightness }
-                        onChange={ event => setLightness(event) }
-                        thumbClassName={ 'thumb percent' }
-                        renderThumb={ (props, state) => <div {...props}>{ state.valueNow }</div> } />
-                </div>
-                <div className="d-flex form-group justify-content-between align-items-center">
-                    <button type="button" className="btn btn-primary" onClick={ event => processAction('toggle') }>{ LocalizeText('widget.backgroundcolor.button.on') }</button>
-                    <button type="button" className="btn btn-primary" onClick={ event => processAction('apply') }>{ LocalizeText('widget.backgroundcolor.button.apply') }</button>
-                </div>
+                <Column overflow="auto">
+                    <FormGroup column>
+                        <Text fontWeight="bold">{ LocalizeText('widget.backgroundcolor.hue') }</Text>
+                        <ReactSlider
+                            className={ 'nitro-slider' }
+                            min={ 0 }
+                            max={ 360 }
+                            value={ hue }
+                            onChange={ event => setHue(event) }
+                            thumbClassName={ 'thumb degree' }
+                            renderThumb={ (props, state) => <div { ...props }>{ state.valueNow }</div> } />
+                    </FormGroup>
+                    <FormGroup column>
+                        <Text fontWeight="bold">{ LocalizeText('widget.backgroundcolor.saturation') }</Text>
+                        <ReactSlider
+                            className={ 'nitro-slider' }
+                            min={ 0 }
+                            max={ 100 }
+                            value={ saturation }
+                            onChange={ event => setSaturation(event) }
+                            thumbClassName={ 'thumb percent' }
+                            renderThumb={ (props, state) => <div { ...props }>{ state.valueNow }</div> } />
+                    </FormGroup>
+                    <FormGroup column>
+                        <Text fontWeight="bold">{ LocalizeText('widget.backgroundcolor.lightness') }</Text>
+                        <ReactSlider
+                            className={ 'nitro-slider' }
+                            min={ 0 }
+                            max={ 100 }
+                            value={ lightness }
+                            onChange={ event => setLightness(event) }
+                            thumbClassName={ 'thumb percent' }
+                            renderThumb={ (props, state) => <div { ...props }>{ state.valueNow }</div> } />
+                    </FormGroup>
+                </Column>
+                <Column center gap={ 1 }>
+                    <Button fullWidth variant="primary" size="sm" onClick={ event => processAction('toggle') }>
+                        { LocalizeText('widget.backgroundcolor.button.on') }
+                    </Button>
+                    <Button fullWidth variant="primary" size="sm" onClick={ event => processAction('apply') }>
+                        { LocalizeText('widget.backgroundcolor.button.apply') }
+                    </Button>
+                </Column>
             </NitroCardContentView>
         </NitroCardView>
     );
diff --git a/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx b/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx
index d1f88b64..ad1e5dee 100644
--- a/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx
+++ b/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx
@@ -3,6 +3,11 @@ import classNames from 'classnames';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { ColorUtils, GetConfiguration, LocalizeText, RoomWidgetDimmerChangeStateMessage, RoomWidgetDimmerPreviewMessage, RoomWidgetDimmerSavePresetMessage, RoomWidgetUpdateDimmerEvent, RoomWidgetUpdateDimmerStateEvent } from '../../../../../api';
+import { Button } from '../../../../../common/Button';
+import { Column } from '../../../../../common/Column';
+import { Flex } from '../../../../../common/Flex';
+import { Grid } from '../../../../../common/Grid';
+import { Text } from '../../../../../common/Text';
 import { BatchUpdates, CreateEventDispatcherHook } from '../../../../../hooks';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../../layout';
 import { useRoomContext } from '../../../context/RoomContext';
@@ -147,53 +152,58 @@ export const FurnitureDimmerView: FC<{}> = props =>
     return (
         <NitroCardView className="nitro-dimmer">
             <NitroCardHeaderView headerText={ LocalizeText('widget.dimmer.title') } onCloseClick={ close } />
-            <NitroCardContentView className="p-0">
+            { (dimmerState === 1) &&
+                <NitroCardTabsView>
+                    { presets.map(preset =>
+                        {
+                            return <NitroCardTabsItemView key={ preset.id } isActive={ (selectedPresetId === preset.id) } onClick={ event => selectPresetId(preset.id) }>{ LocalizeText(`widget.dimmer.tab.${preset.id}`) }</NitroCardTabsItemView>
+                        }) }
+                </NitroCardTabsView> }
+            <NitroCardContentView>
                 { (dimmerState === 0) &&
-                    <div className="d-flex flex-column gap-2 align-items-center p-2">
+                    <Column alignItems="center">
                         <div className="dimmer-banner"></div>
-                        <div className="bg-muted rounded p-1 text-center text-black">{ LocalizeText('widget.dimmer.info.off') }</div>
-                        <button className="btn-success btn w-100" onClick={ toggleState }>{ LocalizeText('widget.dimmer.button.on') }</button>
-                    </div> }
+                        <Text center className="bg-muted rounded p-1">{ LocalizeText('widget.dimmer.info.off') }</Text>
+                        <Button fullWidth variant="success" onClick={ toggleState }>{ LocalizeText('widget.dimmer.button.on') }</Button>
+                    </Column> }
                 { (dimmerState === 1) &&
                     <>
-                        <NitroCardTabsView>
-                            { presets.map(preset =>
-                                {
-                                    return <NitroCardTabsItemView key={ preset.id } isActive={ (selectedPresetId === preset.id) } onClick={ event => selectPresetId(preset.id) }>{ LocalizeText(`widget.dimmer.tab.${preset.id}`) }</NitroCardTabsItemView>
-                                }) }
-                        </NitroCardTabsView>
-                        <div className="p-2">
-                            <div className="form-group mb-2">
-                                <label className="fw-bold text-black">{ LocalizeText('widget.backgroundcolor.hue') }</label>
-                                { isFreeColorMode &&
-                                    <input type="color" className="form-control" value={ ColorUtils.makeColorNumberHex(selectedColor) } onChange={ event => setSelectedColor(ColorUtils.convertFromHex(event.target.value)) } /> }
-                                { !isFreeColorMode &&
-                                    <div className="d-flex gap-2">
-                                        { AVAILABLE_COLORS.map((color, index) =>
+                        <Column gap={ 1 }>
+                            <Text fontWeight="bold">{ LocalizeText('widget.backgroundcolor.hue') }</Text>
+                            { isFreeColorMode &&
+                                <input type="color" className="form-control" value={ ColorUtils.makeColorNumberHex(selectedColor) } onChange={ event => setSelectedColor(ColorUtils.convertFromHex(event.target.value)) } /> }
+                            { !isFreeColorMode &&
+                                <Grid columnCount={ 7 }>
+                                    { AVAILABLE_COLORS.map((color, index) =>
                                         {
-                                            return <div key={ index } className={ 'color-swatch rounded w-100 cursor-pointer' + classNames({ ' active': color === selectedColor }) } onClick={ () => setSelectedColor(color) } style={{ backgroundColor: HTML_COLORS[index] }}></div>;
+                                            return (
+                                                <Column fullWidth pointer key={ index } className={ 'color-swatch rounded' + classNames({ ' active': color === selectedColor }) } onClick={ () => setSelectedColor(color) } style={{ backgroundColor: HTML_COLORS[index] }} />
+                                            );
                                         }) }
-                                </div> }
-                            </div>
-                            <div className="form-group mb-2">
-                                <label className="fw-bold text-black">{ LocalizeText('widget.backgroundcolor.lightness') }</label>
-                                <ReactSlider
-                                    className={ 'nitro-slider' }
-                                    min={ MIN_BRIGHTNESS }
-                                    max={ MAX_BRIGHTNESS }
-                                    value={ selectedBrightness }
-                                    onChange={ value => setSelectedBrightness(value) }
-                                    thumbClassName={ 'thumb percent' }
-                                    renderThumb={ (props, state) => <div {...props}>{ scaledBrightness(state.valueNow) }</div> } />
-                            </div>
-                            <div className="form-check mb-2">
-                                <input className="form-check-input" type="checkbox" checked={ (selectedEffectId === 2) } onChange={ event => setSelectedEffectId(event.target.checked ? 2 : 1) } />
-                                <label className="form-check-label text-black">{ LocalizeText('widget.dimmer.type.checkbox') }</label>
-                            </div>
-                            <div className="d-flex gap-2">
-                                <button className="btn btn-danger w-100" onClick={ toggleState }>{ LocalizeText('widget.dimmer.button.off') }</button>
-                                <button className="btn btn-success w-100" onClick={ applyChanges }>{ LocalizeText('widget.dimmer.button.apply') }</button>
-                            </div>
+                                </Grid> }
+                        </Column>
+                        <Column gap={ 1 }>
+                            <Text fontWeight="bold">{ LocalizeText('widget.backgroundcolor.lightness') }</Text>
+                            <ReactSlider
+                                className="nitro-slider"
+                                min={ MIN_BRIGHTNESS }
+                                max={ MAX_BRIGHTNESS }
+                                value={ selectedBrightness }
+                                onChange={ value => setSelectedBrightness(value) }
+                                thumbClassName={ 'thumb percent' }
+                                renderThumb={ (props, state) => <div {...props}>{ scaledBrightness(state.valueNow) }</div> } />
+                        </Column>
+                        <Flex>
+                            <input className="form-check-input" type="checkbox" checked={ (selectedEffectId === 2) } onChange={ event => setSelectedEffectId(event.target.checked ? 2 : 1) } />
+                            <label className="form-check-label text-black">{ LocalizeText('widget.dimmer.type.checkbox') }</label>
+                        </Flex>
+                        <div className="form-check mb-2">
+                            <input className="form-check-input" type="checkbox" checked={ (selectedEffectId === 2) } onChange={ event => setSelectedEffectId(event.target.checked ? 2 : 1) } />
+                            <label className="form-check-label text-black">{ LocalizeText('widget.dimmer.type.checkbox') }</label>
+                        </div>
+                        <div className="d-flex gap-2">
+                            <button className="btn btn-danger w-100" onClick={ toggleState }>{ LocalizeText('widget.dimmer.button.off') }</button>
+                            <button className="btn btn-success w-100" onClick={ applyChanges }>{ LocalizeText('widget.dimmer.button.apply') }</button>
                         </div>
                     </> }
             </NitroCardContentView>
diff --git a/src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.tsx b/src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.tsx
index 2ee5d497..81d7ed79 100644
--- a/src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.tsx
+++ b/src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.tsx
@@ -1,9 +1,13 @@
 import { FC, useCallback, useState } from 'react';
 import { LocalizeText, RoomWidgetCreditFurniRedeemMessage, RoomWidgetUpdateCreditFurniEvent } from '../../../../../api';
+import { Base } from '../../../../../common/Base';
+import { Button } from '../../../../../common/Button';
+import { Column } from '../../../../../common/Column';
+import { Grid } from '../../../../../common/Grid';
+import { Text } from '../../../../../common/Text';
 import { BatchUpdates } from '../../../../../hooks';
 import { CreateEventDispatcherHook } from '../../../../../hooks/events/event-dispatcher.base';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutButton, NitroLayoutFlexColumn, NitroLayoutGrid, NitroLayoutGridColumn } from '../../../../../layout';
-import { NitroLayoutBase } from '../../../../../layout/base';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
 import { useRoomContext } from '../../../context/RoomContext';
 
 export const FurnitureExchangeCreditView: FC<{}> = props =>
@@ -42,24 +46,20 @@ export const FurnitureExchangeCreditView: FC<{}> = props =>
         <NitroCardView className="nitro-widget-exchange-credit" simple={ true }>
             <NitroCardHeaderView headerText={ LocalizeText('catalog.redeem.dialog.title') } onCloseClick={ close } />
             <NitroCardContentView>
-                <NitroLayoutGrid>
-                    <NitroLayoutGridColumn className="justify-content-center align-items-center" overflow="hidden" size={ 4 }>
-                        <NitroLayoutBase className="exchange-image" />
-                    </NitroLayoutGridColumn>
-                    <NitroLayoutGridColumn className="justify-content-between" overflow="hidden" size={ 8 }>
-                        <NitroLayoutFlexColumn gap={ 1 } overflow="auto">
-                            <NitroLayoutBase className="text-black fw-bold">
-                                { LocalizeText('creditfurni.description', [ 'credits' ], [ value.toString() ]) }
-                            </NitroLayoutBase>
-                            <NitroLayoutBase className="text-black">
-                                { LocalizeText('creditfurni.prompt') }
-                            </NitroLayoutBase>
-                        </NitroLayoutFlexColumn>
-                        <NitroLayoutButton variant="success" onClick={ redeem }>
+                <Grid>
+                    <Column center overflow="hidden" size={ 4 }>
+                        <Base className="exchange-image" />
+                    </Column>
+                    <Column justifyContent="between" overflow="hidden" size={ 8 }>
+                        <Column gap={ 1 } overflow="auto">
+                            <Text fontWeight="bold">{ LocalizeText('creditfurni.description', [ 'credits' ], [ value.toString() ]) }</Text>
+                            <Text>{ LocalizeText('creditfurni.prompt') }</Text>
+                        </Column>
+                        <Button variant="success" onClick={ redeem }>
                             { LocalizeText('catalog.redeem.dialog.button.exchange') }
-                        </NitroLayoutButton>
-                    </NitroLayoutGridColumn>
-                </NitroLayoutGrid>
+                        </Button>
+                    </Column>
+                </Grid>
             </NitroCardContentView>
         </NitroCardView>
     );
diff --git a/src/views/room/widgets/furniture/mannequin/FurnitureMannequinView.tsx b/src/views/room/widgets/furniture/mannequin/FurnitureMannequinView.tsx
index b0ec3792..da7848c2 100644
--- a/src/views/room/widgets/furniture/mannequin/FurnitureMannequinView.tsx
+++ b/src/views/room/widgets/furniture/mannequin/FurnitureMannequinView.tsx
@@ -1,10 +1,14 @@
 import { AvatarFigurePartType, FurnitureMannequinSaveLookComposer, FurnitureMannequinSaveNameComposer, FurnitureMultiStateComposer, HabboClubLevelEnum, IAvatarFigureContainer, RoomControllerLevel } from '@nitrots/nitro-renderer';
 import { FC, KeyboardEvent, useCallback, useEffect, useState } from 'react';
 import { GetAvatarRenderManager, GetSessionDataManager, LocalizeText, RoomWidgetUpdateMannequinEvent } from '../../../../../api';
+import { Button } from '../../../../../common/Button';
+import { Column } from '../../../../../common/Column';
+import { Flex } from '../../../../../common/Flex';
+import { Grid } from '../../../../../common/Grid';
+import { Text } from '../../../../../common/Text';
 import { BatchUpdates, SendMessageHook } from '../../../../../hooks';
 import { CreateEventDispatcherHook } from '../../../../../hooks/events/event-dispatcher.base';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutButton, NitroLayoutFlex, NitroLayoutFlexColumn, NitroLayoutGrid, NitroLayoutGridColumn } from '../../../../../layout';
-import { NitroLayoutBase } from '../../../../../layout/base';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
 import { useRoomContext } from '../../../context/RoomContext';
 import { FurnitureMannequinPreviewView } from './views/preview/FurnitureMannequinPreviewView';
 
@@ -169,68 +173,52 @@ export const FurnitureMannequinView: FC<{}> = props =>
         <NitroCardView className="nitro-mannequin" simple={ true }>
             <NitroCardHeaderView headerText={ LocalizeText('mannequin.widget.title') } onCloseClick={ event => setMode(MODE_NONE) } />
             <NitroCardContentView>
-                <NitroLayoutGrid>
-                    <NitroLayoutGridColumn className="justify-content-center align-items-center" overflow="hidden" size={ 4 }>
+                <Grid>
+                    <Column center size={ 4 } overflow="hidden">
                         <FurnitureMannequinPreviewView figure={ renderedFigure } clubLevel={ renderedClubLevel } />
-                    </NitroLayoutGridColumn>
-                    <NitroLayoutGridColumn className="justify-content-between" overflow="hidden" size={ 8 }>
+                    </Column>
+                    <Column size={ 8 } justifyContent="between" overflow="hidden">
                         { (mode === MODE_CONTROLLER) &&
                             <>
-                                <NitroLayoutFlexColumn gap={ 1 } overflow="auto">
-                                    <input type="text" className="form-control" value={ name } onChange={ event => setName(event.target.value) } onKeyDown={ event => handleKeyDown(event) } />
-                                </NitroLayoutFlexColumn>
-                                <NitroLayoutFlexColumn gap={ 1 }>
-                                    <NitroLayoutButton variant="success" onClick={ event => setMode(MODE_UPDATE) }>
+                                <input type="text" className="form-control" value={ name } onChange={ event => setName(event.target.value) } onKeyDown={ event => handleKeyDown(event) } />
+                                <Column gap={ 1 } overflow="auto">
+                                    <Button variant="success" onClick={ event => setMode(MODE_UPDATE) }>
                                         { LocalizeText('mannequin.widget.style') }
-                                    </NitroLayoutButton>
-                                    <NitroLayoutButton variant="success" onClick={ event => processAction(ACTION_WEAR) }>
+                                    </Button>
+                                    <Button variant="success" onClick={ event => processAction(ACTION_WEAR) }>
                                         { LocalizeText('mannequin.widget.wear') }
-                                    </NitroLayoutButton>
-                                </NitroLayoutFlexColumn>
+                                    </Button>
+                                </Column>
                             </> }
                         { (mode === MODE_UPDATE) &&
                             <>
-                                <NitroLayoutFlexColumn gap={ 1 } overflow="auto">
-                                    <NitroLayoutBase className="text-black fw-bold">
-                                        { name }
-                                    </NitroLayoutBase>
-                                    <NitroLayoutBase className="text-black">
-                                        { LocalizeText('mannequin.widget.savetext') }
-                                    </NitroLayoutBase>
-                                </NitroLayoutFlexColumn>
-                                <NitroLayoutFlex className="justify-content-between align-items-center">
-                                    <NitroLayoutBase className="text-black text-decoration-underline cursor-pointer" onClick={ event => setMode(MODE_CONTROLLER) }>
+                                <Column gap={ 1 } overflow="auto">
+                                    <Text fontWeight="bold">{ name }</Text>
+                                    <Text>{ LocalizeText('mannequin.widget.savetext') }</Text>
+                                </Column>
+                                <Flex alignItems="center" justifyContent="between">
+                                    <Text underline pointer onClick={ event => setMode(MODE_CONTROLLER) }>
                                         { LocalizeText('mannequin.widget.back') }
-                                    </NitroLayoutBase>
-                                    <NitroLayoutButton variant="success" onClick={ event => processAction(ACTION_SAVE) }>
+                                    </Text>
+                                    <Button variant="success" onClick={ event => processAction(ACTION_SAVE) }>
                                         { LocalizeText('mannequin.widget.save') }
-                                    </NitroLayoutButton>
-                                </NitroLayoutFlex>
+                                    </Button>
+                                </Flex>
                             </> }
                         { (mode === MODE_PEER) &&
                             <>
-                                <NitroLayoutFlexColumn gap={ 1 } overflow="auto">
-                                    <NitroLayoutBase className="text-black fw-bold">
-                                        { name }
-                                    </NitroLayoutBase>
-                                    <NitroLayoutBase className="text-black">
-                                        { LocalizeText('mannequin.widget.weartext') }
-                                    </NitroLayoutBase>
-                                </NitroLayoutFlexColumn>
-                                <NitroLayoutButton variant="success" onClick={ event => processAction(ACTION_WEAR) }>
+                                <Column gap={ 1 } overflow="auto">
+                                    <Text fontWeight="bold">{ name }</Text>
+                                    <Text>{ LocalizeText('mannequin.widget.weartext') }</Text>
+                                </Column>
+                                <Button variant="success" onClick={ event => processAction(ACTION_WEAR) }>
                                     { LocalizeText('mannequin.widget.wear') }
-                                </NitroLayoutButton>
+                                </Button>
                             </> }
-                        { (mode === MODE_NO_CLUB) &&
-                            <NitroLayoutBase className="text-black">
-                                { LocalizeText('mannequin.widget.clubnotification') }
-                            </NitroLayoutBase> }
-                        { (mode === MODE_WRONG_GENDER) &&
-                            <NitroLayoutBase className="text-black">
-                                { LocalizeText('mannequin.widget.wronggender') }
-                            </NitroLayoutBase> }
-                    </NitroLayoutGridColumn>
-                </NitroLayoutGrid>
+                        { (mode === MODE_NO_CLUB) && <Text>{ LocalizeText('mannequin.widget.clubnotification') }</Text> }
+                        { (mode === MODE_WRONG_GENDER) && <Text>{ LocalizeText('mannequin.widget.wronggender') }</Text> }
+                    </Column>
+                </Grid>
             </NitroCardContentView>
         </NitroCardView>
     );
diff --git a/src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.tsx b/src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.tsx
index 26465faa..2a3d5320 100644
--- a/src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.tsx
+++ b/src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.tsx
@@ -1,10 +1,13 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { RelationshipStatusInfoEvent, RelationshipStatusInfoMessageParser, RoomSessionUserBadgesEvent, UserRelationshipsComposer } from '@nitrots/nitro-renderer';
 import classNames from 'classnames';
 import { FC, FocusEvent, KeyboardEvent, useCallback, useEffect, useState } from 'react';
 import { GetGroupInformation, LocalizeText, RoomWidgetChangeMottoMessage, RoomWidgetUpdateInfostandUserEvent } from '../../../../../../api';
+import { Base } from '../../../../../../common/Base';
+import { Flex } from '../../../../../../common/Flex';
 import { CreateMessageHook, SendMessageHook } from '../../../../../../hooks';
 import { CreateEventDispatcherHook } from '../../../../../../hooks/events';
-import { NitroLayoutFlex, UserProfileIconView } from '../../../../../../layout';
+import { UserProfileIconView } from '../../../../../../layout';
 import { AvatarImageView } from '../../../../../shared/avatar-image/AvatarImageView';
 import { BadgeImageView } from '../../../../../shared/badge-image/BadgeImageView';
 import { RelationshipsContainerView } from '../../../../../user-profile/views/relationships-container/RelationshipsContainerView';
@@ -82,60 +85,61 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
     if(!userData) return null;
 
     return (
-        <div className="d-flex flex-column nitro-card nitro-infostand rounded">
+        <Flex column className="nitro-card nitro-infostand rounded">
             <div className="container-fluid content-area overflow-visible">
-                <div className="d-flex justify-content-between align-items-center">
-                    <NitroLayoutFlex className="align-items-center">
+                <Flex center>
+                    <Flex alignItems="center">
                         <UserProfileIconView userId={ userData.webID } />
                         <span className="small text-wrap">{ userData.name }</span>
-                    </NitroLayoutFlex>
-                    <i className="fas fa-times cursor-pointer" onClick={ close }></i>
-                </div>
+                    </Flex>
+                    <FontAwesomeIcon icon="times" className="cursor-pointer" onClick={ close } />
+                </Flex>
                 <hr className="m-0 my-1" />
-                <div className="d-flex">
+                <Flex>
                     <div className="body-image w-100">
                         <AvatarImageView figure={ userData.figure } direction={ 4 } />
                     </div>
                     <div>
-                        <div className="d-flex justify-content-between">
+                        <Flex justifyContent="between">
                             <div className="badge-image">
                                 { badges[0] && <BadgeImageView badgeCode={ badges[0] } showInfo={ true } /> }
                             </div>
                             <div className={ 'badge-image' + classNames({ ' cursor-pointer': userData.groupId > 0 }) } onClick={ () => GetGroupInformation(userData.groupId) }>
                                 { userData.groupId > 0 && <BadgeImageView badgeCode={ userData.groupBadgeId } isGroup={ true } showInfo={ true } customTitle={ userData.groupName } /> }
                             </div>
-                        </div>
-                        <div className="d-flex justify-content-between">
+                        </Flex>
+                        <Flex justifyContent="between">
                             <div className="badge-image">
                                 { badges[1] && <BadgeImageView badgeCode={ badges[1] } showInfo={ true } /> }
                             </div>
                             <div className="badge-image">
                                 { badges[2] && <BadgeImageView badgeCode={ badges[2] } showInfo={ true } /> }
                             </div>
-                        </div>
-                        <div className="d-flex justify-content-between">
+                        </Flex>
+                        <Flex justifyContent="between">
                             <div className="badge-image">
                                 { badges[3] && <BadgeImageView badgeCode={ badges[3] } showInfo={ true } /> }
                             </div>
                             <div className="badge-image">
                                 { badges[4] && <BadgeImageView badgeCode={ badges[4] } showInfo={ true } /> }
                             </div>
-                        </div>
+                        </Flex>
                     </div>
-                </div>
+                </Flex>
                 <hr className="m-0 my-1" />
                 <div className="bg-light-dark rounded py-1 px-2 small">
-                    { userData.type !== RoomWidgetUpdateInfostandUserEvent.OWN_USER && <div className="motto-content w-100 text-wrap text-break">{ motto }</div> }
+                    { (userData.type !== RoomWidgetUpdateInfostandUserEvent.OWN_USER) &&
+                        <div className="motto-content w-100 text-wrap text-break">{ motto }</div> }
                     { userData.type === RoomWidgetUpdateInfostandUserEvent.OWN_USER &&
-                        <div className="d-flex justify-content-between align-items-center">
-                            <i className="small fas fa-pencil-alt me-2"></i>
-                            <div className="h-100 w-100">
+                        <Flex justifyContent="between" alignItems="center">
+                            <FontAwesomeIcon icon="pencil-alt" className="small me-2" />
+                            <Base fit>
                                 { !isEditingMotto &&
                                     <div className="motto-content cursor-pointer w-100 text-wrap text-break" onClick={ event => setIsEditingMotto(true) }>{ motto }</div> }
                                 { isEditingMotto &&
                                     <input type="text" className="motto-input" maxLength={ 38 } value={ motto } onChange={ event => setMotto(event.target.value) } onBlur={ onMottoBlur } onKeyDown={ onMottoKeyDown } autoFocus={ true } /> }
-                            </div>
-                        </div> }
+                            </Base>
+                        </Flex> }
                 </div>
                 <hr className="m-0 my-1" />
                 <div className="small text-wrap">
@@ -151,5 +155,5 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
                 }
                 <RelationshipsContainerView relationships={userRelationships} simple={true}/>
             </div>
-        </div>);
+        </Flex>);
 }