diff --git a/src/components/navigator/views/room-settings/NavigatorRoomSettingsAccessTabView.tsx b/src/components/navigator/views/room-settings/NavigatorRoomSettingsAccessTabView.tsx
index 6248a2f..0faddb2 100644
--- a/src/components/navigator/views/room-settings/NavigatorRoomSettingsAccessTabView.tsx
+++ b/src/components/navigator/views/room-settings/NavigatorRoomSettingsAccessTabView.tsx
@@ -2,6 +2,7 @@ import { RoomDataParser } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { IRoomData, LocalizeText } from '../../../../api';
 import { Column, Flex, Text } from '../../../../common';
+import { NavigatorRoomSettingsSectionView } from './NavigatorRoomSettingsSectionView';
 
 interface NavigatorRoomSettingsTabViewProps
 {
@@ -36,9 +37,8 @@ export const NavigatorRoomSettingsAccessTabView: FC<NavigatorRoomSettingsTabView
                 <Text bold>{ LocalizeText('navigator.roomsettings.roomaccess.caption') }</Text>
                 <Text>{ LocalizeText('navigator.roomsettings.roomaccess.info') }</Text>
             </Column>
-            <Column overflow="auto">
-                <Column gap={ 1 }>
-                    <Text bold>{ LocalizeText('navigator.roomsettings.doormode') }</Text>
+            <Column overflow="auto" gap={ 2 }>
+                <NavigatorRoomSettingsSectionView title={ LocalizeText('navigator.roomsettings.doormode') } gap={ 1 }>
                     <Flex alignItems="center" gap={ 1 }>
                         <input className="form-check-input" type="radio" name="lockState" checked={ (roomData.lockState === RoomDataParser.OPEN_STATE) && !isTryingPassword } onChange={ event => handleChange('lock_state', RoomDataParser.OPEN_STATE) } />
                         <Text>{ LocalizeText('navigator.roomsettings.doormode.open') }</Text>
@@ -70,9 +70,8 @@ export const NavigatorRoomSettingsAccessTabView: FC<NavigatorRoomSettingsTabView
                                     </Text> }
                             </Column> }
                     </Flex>
-                </Column>
-                <Column gap={ 1 }>
-                    <Text bold>{ LocalizeText('navigator.roomsettings.pets') }</Text>
+                </NavigatorRoomSettingsSectionView>
+                <NavigatorRoomSettingsSectionView title={ LocalizeText('navigator.roomsettings.pets') } gap={ 1 }>
                     <Flex alignItems="center" gap={ 1 }>
                         <input className="form-check-input" type="checkbox" checked={ roomData.allowPets } onChange={ event => handleChange('allow_pets', event.target.checked) } />
                         <Text>{ LocalizeText('navigator.roomsettings.allowpets') }</Text>
@@ -81,7 +80,7 @@ export const NavigatorRoomSettingsAccessTabView: FC<NavigatorRoomSettingsTabView
                         <input className="form-check-input" type="checkbox" checked={ roomData.allowPetsEat } onChange={ event => handleChange('allow_pets_eat', event.target.checked) } />
                         <Text>{ LocalizeText('navigator.roomsettings.allowfoodconsume') }</Text>
                     </Flex>
-                </Column>
+                </NavigatorRoomSettingsSectionView>
             </Column>
         </>
     );
diff --git a/src/components/navigator/views/room-settings/NavigatorRoomSettingsModTabView.tsx b/src/components/navigator/views/room-settings/NavigatorRoomSettingsModTabView.tsx
index 4ce43fb..0d90efb 100644
--- a/src/components/navigator/views/room-settings/NavigatorRoomSettingsModTabView.tsx
+++ b/src/components/navigator/views/room-settings/NavigatorRoomSettingsModTabView.tsx
@@ -3,6 +3,7 @@ import { FC, useEffect, useState } from 'react';
 import { IRoomData, LocalizeText, SendMessageComposer } from '../../../../api';
 import { Button, Column, Flex, Grid, Text, UserProfileIconView } from '../../../../common';
 import { useMessageEvent } from '../../../../hooks';
+import { NavigatorRoomSettingsSectionView } from './NavigatorRoomSettingsSectionView';
 
 interface NavigatorRoomSettingsTabViewProps
 {
@@ -51,28 +52,29 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
     return (
         <Grid overflow="auto">
             <Column size={ 6 }>
-                <Text bold>{ LocalizeText('navigator.roomsettings.moderation.banned.users') } ({ bannedUsers.length })</Text>
-                <Flex overflow="hidden" className="nitro-card-panel list-container p-2">
-                    <Column fullWidth overflow="auto" gap={ 1 }>
-                        { bannedUsers && (bannedUsers.length > 0) && bannedUsers.map((user, index) =>
-                        {
-                            return (
-                                <Flex key={ index } shrink alignItems="center" gap={ 1 } overflow="hidden">
-                                    <UserProfileIconView userId={ user.userId } />
-                                    <Text pointer grow onClick={ event => setSelectedUserId(user.userId) }> { user.userName }</Text>
-                                </Flex>
-                            );
-                        }) }
-                    </Column>
-                </Flex>
-                <Button disabled={ (selectedUserId <= 0) } onClick={ event => unBanUser(selectedUserId) }>
-                    { LocalizeText('navigator.roomsettings.moderation.unban') } { selectedUserId > 0 && bannedUsers.find(user => (user.userId === selectedUserId))?.userName }
-                </Button>
+                <NavigatorRoomSettingsSectionView title={ `${ LocalizeText('navigator.roomsettings.moderation.banned.users') } (${ bannedUsers.length })` } gap={ 1 } className="h-full">
+                    <Flex overflow="hidden" className="nitro-card-panel list-container p-2">
+                        <Column fullWidth overflow="auto" gap={ 1 }>
+                            { bannedUsers && (bannedUsers.length > 0) && bannedUsers.map((user, index) =>
+                            {
+                                return (
+                                    <Flex key={ index } shrink alignItems="center" gap={ 1 } overflow="hidden">
+                                        <UserProfileIconView userId={ user.userId } />
+                                        <Text pointer grow onClick={ event => setSelectedUserId(user.userId) }> { user.userName }</Text>
+                                    </Flex>
+                                );
+                            }) }
+                        </Column>
+                    </Flex>
+                    <Button disabled={ (selectedUserId <= 0) } onClick={ event => unBanUser(selectedUserId) }>
+                        { LocalizeText('navigator.roomsettings.moderation.unban') } { selectedUserId > 0 && bannedUsers.find(user => (user.userId === selectedUserId))?.userName }
+                    </Button>
+                </NavigatorRoomSettingsSectionView>
             </Column>
             <Column size={ 6 }>
-                <Column gap={ 1 }>
-                    <Text bold>{ LocalizeText('navigator.roomsettings.moderation.mute.header') }</Text>
-                    <Flex alignItems="center" gap={ 1 }>
+                <NavigatorRoomSettingsSectionView title={ LocalizeText('navigator.roomsettings.moderation') } gap={ 2 } className="h-full">
+                    <Column gap={ 1 }>
+                        <Text bold small>{ LocalizeText('navigator.roomsettings.moderation.mute.header') }</Text>
                         <select className="form-select form-select-sm" value={ roomData.moderationSettings.allowMute } onChange={ event => handleChange('moderation_mute', event.target.value) }>
                             <option value={ RoomModerationSettings.MODERATION_LEVEL_NONE }>
                                 { LocalizeText('navigator.roomsettings.moderation.none') }
@@ -81,11 +83,9 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
                                 { LocalizeText('navigator.roomsettings.moderation.rights') }
                             </option>
                         </select>
-                    </Flex>
-                </Column>
-                <Column gap={ 1 }>
-                    <Text bold>{ LocalizeText('navigator.roomsettings.moderation.kick.header') }</Text>
-                    <Flex alignItems="center" gap={ 1 }>
+                    </Column>
+                    <Column gap={ 1 }>
+                        <Text bold small>{ LocalizeText('navigator.roomsettings.moderation.kick.header') }</Text>
                         <select className="form-select form-select-sm" value={ roomData.moderationSettings.allowKick } onChange={ event => handleChange('moderation_kick', event.target.value) }>
                             <option value={ RoomModerationSettings.MODERATION_LEVEL_NONE }>
                                 { LocalizeText('navigator.roomsettings.moderation.none') }
@@ -97,11 +97,9 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
                                 { LocalizeText('navigator.roomsettings.moderation.all') }
                             </option>
                         </select>
-                    </Flex>
-                </Column>
-                <Column gap={ 1 }>
-                    <Text bold>{ LocalizeText('navigator.roomsettings.moderation.ban.header') }</Text>
-                    <Flex alignItems="center" gap={ 1 }>
+                    </Column>
+                    <Column gap={ 1 }>
+                        <Text bold small>{ LocalizeText('navigator.roomsettings.moderation.ban.header') }</Text>
                         <select className="form-select form-select-sm" value={ roomData.moderationSettings.allowBan } onChange={ event => handleChange('moderation_ban', event.target.value) }>
                             <option value={ RoomModerationSettings.MODERATION_LEVEL_NONE }>
                                 { LocalizeText('navigator.roomsettings.moderation.none') }
@@ -110,8 +108,8 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
                                 { LocalizeText('navigator.roomsettings.moderation.rights') }
                             </option>
                         </select>
-                    </Flex>
-                </Column>
+                    </Column>
+                </NavigatorRoomSettingsSectionView>
             </Column>
         </Grid>
     );
diff --git a/src/components/navigator/views/room-settings/NavigatorRoomSettingsRightsTabView.tsx b/src/components/navigator/views/room-settings/NavigatorRoomSettingsRightsTabView.tsx
index 1c12f00..ca236db 100644
--- a/src/components/navigator/views/room-settings/NavigatorRoomSettingsRightsTabView.tsx
+++ b/src/components/navigator/views/room-settings/NavigatorRoomSettingsRightsTabView.tsx
@@ -3,6 +3,7 @@ import { FC, useEffect, useRef, useState } from 'react';
 import { IRoomData, LocalizeText, SendMessageComposer } from '../../../../api';
 import { Button, Column, Flex, Grid, Text, UserProfileIconView } from '../../../../common';
 import { useFriends, useMessageEvent } from '../../../../hooks';
+import { NavigatorRoomSettingsSectionView } from './NavigatorRoomSettingsSectionView';
 
 interface NavigatorRoomSettingsTabViewProps
 {
@@ -105,74 +106,72 @@ export const NavigatorRoomSettingsRightsTabView: FC<NavigatorRoomSettingsTabView
     return (
         <Grid>
             <Column size={ 6 }>
-                <Text bold>
-                    { LocalizeText(
+                <NavigatorRoomSettingsSectionView gap={ 1 } className="h-full"
+                    title={ LocalizeText(
                         'navigator.flatctrls.userswithrights',
                         [ 'displayed', 'total' ],
                         [
                             filteredUsersWithRights.size.toString(),
                             filteredUsersWithRights.size.toString()
                         ]
-                    ) }
-                </Text>
+                    ) }>
+                    <Flex overflow="hidden" className="nitro-card-panel p-2 list-container">
+                        <Column fullWidth overflow="auto" gap={ 1 }>
+                            { Array.from(filteredUsersWithRights.entries()).map(([ id, name ], index) =>
+                            {
+                                return (
+                                    <Flex key={ `${id}-${index}` } shrink alignItems="center" gap={ 1 } overflow="hidden">
+                                        <UserProfileIconView userId={ id } />
+                                        <Text
+                                            pointer
+                                            grow
+                                            onClick={ () => guardedSend(`take_${id}`, new RoomTakeRightsComposer(id)) }>
+                                            { name }
+                                        </Text>
+                                    </Flex>
+                                );
+                            }) }
+                        </Column>
+                    </Flex>
 
-                <Flex overflow="hidden" className="nitro-card-panel p-2 list-container">
-                    <Column fullWidth overflow="auto" gap={ 1 }>
-                        { Array.from(filteredUsersWithRights.entries()).map(([ id, name ], index) =>
-                        {
-                            return (
-                                <Flex key={ `${id}-${index}` } shrink alignItems="center" gap={ 1 } overflow="hidden">
-                                    <UserProfileIconView userId={ id } />
-                                    <Text
-                                        pointer
-                                        grow
-                                        onClick={ () => guardedSend(`take_${id}`, new RoomTakeRightsComposer(id)) }>
-                                        { name }
-                                    </Text>
-                                </Flex>
-                            );
-                        }) }
-                    </Column>
-                </Flex>
-
-                <Button
-                    variant="danger"
-                    disabled={ !filteredUsersWithRights.size }
-                    onClick={ () => roomData && guardedSend('removeAll', new RemoveAllRightsMessageComposer(roomData.roomId)) }>
-                    { LocalizeText('navigator.flatctrls.clear') }
-                </Button>
+                    <Button
+                        variant="danger"
+                        disabled={ !filteredUsersWithRights.size }
+                        onClick={ () => roomData && guardedSend('removeAll', new RemoveAllRightsMessageComposer(roomData.roomId)) }>
+                        { LocalizeText('navigator.flatctrls.clear') }
+                    </Button>
+                </NavigatorRoomSettingsSectionView>
             </Column>
 
             <Column size={ 6 }>
-                <Text bold>
-                    { LocalizeText(
+                <NavigatorRoomSettingsSectionView gap={ 1 } className="h-full"
+                    title={ LocalizeText(
                         'navigator.flatctrls.friends',
                         [ 'displayed', 'total' ],
                         [
                             friendsWithoutRights.length.toString(),
                             allFriends.length.toString()
                         ]
-                    ) }
-                </Text>
-
-                <Flex overflow="hidden" className="nitro-card-panel p-2 list-container">
-                    <Column fullWidth overflow="auto" gap={ 1 }>
-                        { friendsWithoutRights.map((friend, index) =>
-                        {
-                            return (
-                                <Flex key={ `${friend.id}-${index}` } shrink alignItems="center" gap={ 1 } overflow="hidden">
-                                    <UserProfileIconView userId={ friend.id } />
-                                    <Text
-                                        pointer
-                                        grow
-                                        onClick={ () => guardedSend(`give_${friend.id}`, new RoomGiveRightsComposer(friend.id)) }>
-                                        { friend.name }
-                                    </Text>
-                                </Flex>
-                            );
-                        }) }
-                    </Column>
-                </Flex>
+                    ) }>
+                    <Flex overflow="hidden" className="nitro-card-panel p-2 list-container">
+                        <Column fullWidth overflow="auto" gap={ 1 }>
+                            { friendsWithoutRights.map((friend, index) =>
+                            {
+                                return (
+                                    <Flex key={ `${friend.id}-${index}` } shrink alignItems="center" gap={ 1 } overflow="hidden">
+                                        <UserProfileIconView userId={ friend.id } />
+                                        <Text
+                                            pointer
+                                            grow
+                                            onClick={ () => guardedSend(`give_${friend.id}`, new RoomGiveRightsComposer(friend.id)) }>
+                                            { friend.name }
+                                        </Text>
+                                    </Flex>
+                                );
+                            }) }
+                        </Column>
+                    </Flex>
+                </NavigatorRoomSettingsSectionView>
             </Column>
         </Grid>
     );
diff --git a/src/components/navigator/views/room-settings/NavigatorRoomSettingsSectionView.tsx b/src/components/navigator/views/room-settings/NavigatorRoomSettingsSectionView.tsx
new file mode 100644
index 0000000..e619a30
--- /dev/null
+++ b/src/components/navigator/views/room-settings/NavigatorRoomSettingsSectionView.tsx
@@ -0,0 +1,22 @@
+import { FC, ReactNode } from 'react';
+import { Column, Text } from '../../../../common';
+
+interface NavigatorRoomSettingsSectionViewProps
+{
+    title?: string;
+    gap?: 1 | 2 | 3;
+    className?: string;
+    children: ReactNode;
+}
+
+export const NavigatorRoomSettingsSectionView: FC<NavigatorRoomSettingsSectionViewProps> = props =>
+{
+    const { title = null, gap = 2, className = '', children = null } = props;
+
+    return (
+        <Column gap={ gap } className={ `rounded bg-gray-100 p-3 ${ className }`.trim() }>
+            { title && <Text bold small>{ title }</Text> }
+            { children }
+        </Column>
+    );
+};
diff --git a/src/components/navigator/views/room-settings/NavigatorRoomSettingsVipChatTabView.tsx b/src/components/navigator/views/room-settings/NavigatorRoomSettingsVipChatTabView.tsx
index aa4f1af..c2c8c13 100644
--- a/src/components/navigator/views/room-settings/NavigatorRoomSettingsVipChatTabView.tsx
+++ b/src/components/navigator/views/room-settings/NavigatorRoomSettingsVipChatTabView.tsx
@@ -3,6 +3,7 @@ import { FC, useEffect, useState } from 'react';
 import { GetClubMemberLevel, IRoomData, LocalizeText } from '../../../../api';
 import { Column, Grid, Text } from '../../../../common';
 import { NitroInput } from '../../../../layout';
+import { NavigatorRoomSettingsSectionView } from './NavigatorRoomSettingsSectionView';
 
 interface NavigatorRoomSettingsTabViewProps
 {
@@ -29,48 +30,50 @@ export const NavigatorRoomSettingsVipChatTabView: FC<NavigatorRoomSettingsTabVie
             </div>
             <Grid className={ !isHC ? 'opacity-50 pointer-events-none' : '' } overflow="auto">
                 <Column gap={ 1 } size={ 6 }>
-                    <Text small bold>{ LocalizeText('navigator.roomsettings.chat_settings') }</Text>
-                    <Text small>{ LocalizeText('navigator.roomsettings.chat_settings.info') }</Text>
-                    <select className="form-select form-select-sm" disabled={ !isHC } value={ roomData.chatSettings.mode } onChange={ event => handleChange('bubble_mode', event.target.value) }>
-                        <option value={ RoomChatSettings.CHAT_MODE_FREE_FLOW }>{ LocalizeText('navigator.roomsettings.chat.mode.free.flow') }</option>
-                        <option value={ RoomChatSettings.CHAT_MODE_LINE_BY_LINE }>{ LocalizeText('navigator.roomsettings.chat.mode.line.by.line') }</option>
-                    </select>
-                    <select className="form-select form-select-sm" disabled={ !isHC } value={ roomData.chatSettings.weight } onChange={ event => handleChange('chat_weight', event.target.value) }>
-                        <option value={ RoomChatSettings.CHAT_BUBBLE_WIDTH_NORMAL }>{ LocalizeText('navigator.roomsettings.chat.bubbles.width.normal') }</option>
-                        <option value={ RoomChatSettings.CHAT_BUBBLE_WIDTH_THIN }>{ LocalizeText('navigator.roomsettings.chat.bubbles.width.thin') }</option>
-                        <option value={ RoomChatSettings.CHAT_BUBBLE_WIDTH_WIDE }>{ LocalizeText('navigator.roomsettings.chat.bubbles.width.wide') }</option>
-                    </select>
-                    <select className="form-select form-select-sm" disabled={ !isHC } value={ roomData.chatSettings.speed } onChange={ event => handleChange('bubble_speed', event.target.value) }>
-                        <option value={ RoomChatSettings.CHAT_SCROLL_SPEED_FAST }>{ LocalizeText('navigator.roomsettings.chat.speed.fast') }</option>
-                        <option value={ RoomChatSettings.CHAT_SCROLL_SPEED_NORMAL }>{ LocalizeText('navigator.roomsettings.chat.speed.normal') }</option>
-                        <option value={ RoomChatSettings.CHAT_SCROLL_SPEED_SLOW }>{ LocalizeText('navigator.roomsettings.chat.speed.slow') }</option>
-                    </select>
-                    <select className="form-select form-select-sm" disabled={ !isHC } value={ roomData.chatSettings.protection } onChange={ event => handleChange('flood_protection', event.target.value) }>
-                        <option value={ RoomChatSettings.FLOOD_FILTER_LOOSE }>{ LocalizeText('navigator.roomsettings.chat.flood.loose') }</option>
-                        <option value={ RoomChatSettings.FLOOD_FILTER_NORMAL }>{ LocalizeText('navigator.roomsettings.chat.flood.normal') }</option>
-                        <option value={ RoomChatSettings.FLOOD_FILTER_STRICT }>{ LocalizeText('navigator.roomsettings.chat.flood.strict') }</option>
-                    </select>
-                    <Text small>{ LocalizeText('navigator.roomsettings.chat_settings.hearing.distance') }</Text>
-                    <NitroInput className="form-control-sm" disabled={ !isHC } min="0" type="number" value={ chatDistance } onBlur={ event => handleChange('chat_distance', chatDistance) } onChange={ event => setChatDistance(event.target.valueAsNumber) } />
+                    <NavigatorRoomSettingsSectionView title={ LocalizeText('navigator.roomsettings.chat_settings') } gap={ 1 } className="h-full">
+                        <Text small>{ LocalizeText('navigator.roomsettings.chat_settings.info') }</Text>
+                        <select className="form-select form-select-sm" disabled={ !isHC } value={ roomData.chatSettings.mode } onChange={ event => handleChange('bubble_mode', event.target.value) }>
+                            <option value={ RoomChatSettings.CHAT_MODE_FREE_FLOW }>{ LocalizeText('navigator.roomsettings.chat.mode.free.flow') }</option>
+                            <option value={ RoomChatSettings.CHAT_MODE_LINE_BY_LINE }>{ LocalizeText('navigator.roomsettings.chat.mode.line.by.line') }</option>
+                        </select>
+                        <select className="form-select form-select-sm" disabled={ !isHC } value={ roomData.chatSettings.weight } onChange={ event => handleChange('chat_weight', event.target.value) }>
+                            <option value={ RoomChatSettings.CHAT_BUBBLE_WIDTH_NORMAL }>{ LocalizeText('navigator.roomsettings.chat.bubbles.width.normal') }</option>
+                            <option value={ RoomChatSettings.CHAT_BUBBLE_WIDTH_THIN }>{ LocalizeText('navigator.roomsettings.chat.bubbles.width.thin') }</option>
+                            <option value={ RoomChatSettings.CHAT_BUBBLE_WIDTH_WIDE }>{ LocalizeText('navigator.roomsettings.chat.bubbles.width.wide') }</option>
+                        </select>
+                        <select className="form-select form-select-sm" disabled={ !isHC } value={ roomData.chatSettings.speed } onChange={ event => handleChange('bubble_speed', event.target.value) }>
+                            <option value={ RoomChatSettings.CHAT_SCROLL_SPEED_FAST }>{ LocalizeText('navigator.roomsettings.chat.speed.fast') }</option>
+                            <option value={ RoomChatSettings.CHAT_SCROLL_SPEED_NORMAL }>{ LocalizeText('navigator.roomsettings.chat.speed.normal') }</option>
+                            <option value={ RoomChatSettings.CHAT_SCROLL_SPEED_SLOW }>{ LocalizeText('navigator.roomsettings.chat.speed.slow') }</option>
+                        </select>
+                        <select className="form-select form-select-sm" disabled={ !isHC } value={ roomData.chatSettings.protection } onChange={ event => handleChange('flood_protection', event.target.value) }>
+                            <option value={ RoomChatSettings.FLOOD_FILTER_LOOSE }>{ LocalizeText('navigator.roomsettings.chat.flood.loose') }</option>
+                            <option value={ RoomChatSettings.FLOOD_FILTER_NORMAL }>{ LocalizeText('navigator.roomsettings.chat.flood.normal') }</option>
+                            <option value={ RoomChatSettings.FLOOD_FILTER_STRICT }>{ LocalizeText('navigator.roomsettings.chat.flood.strict') }</option>
+                        </select>
+                        <Text small>{ LocalizeText('navigator.roomsettings.chat_settings.hearing.distance') }</Text>
+                        <NitroInput className="form-control-sm" disabled={ !isHC } min="0" type="number" value={ chatDistance } onBlur={ event => handleChange('chat_distance', chatDistance) } onChange={ event => setChatDistance(event.target.valueAsNumber) } />
+                    </NavigatorRoomSettingsSectionView>
                 </Column>
                 <Column gap={ 1 } size={ 6 }>
-                    <Text small bold>{ LocalizeText('navigator.roomsettings.vip_settings') }</Text>
-                    <div className="flex items-center gap-1">
-                        <input checked={ roomData.hideWalls } className="form-check-input" disabled={ !isHC } type="checkbox" onChange={ event => handleChange('hide_walls', event.target.checked) } />
-                        <Text small>{ LocalizeText('navigator.roomsettings.hide_walls') }</Text>
-                    </div>
-                    <select className="form-select form-select-sm" disabled={ !isHC } value={ roomData.wallThickness } onChange={ event => handleChange('wall_thickness', event.target.value) }>
-                        <option value="0">{ LocalizeText('navigator.roomsettings.wall_thickness.normal') }</option>
-                        <option value="1">{ LocalizeText('navigator.roomsettings.wall_thickness.thick') }</option>
-                        <option value="-1">{ LocalizeText('navigator.roomsettings.wall_thickness.thin') }</option>
-                        <option value="-2">{ LocalizeText('navigator.roomsettings.wall_thickness.thinnest') }</option>
-                    </select>
-                    <select className="form-select form-select-sm" disabled={ !isHC } value={ roomData.floorThickness } onChange={ event => handleChange('floor_thickness', event.target.value) }>
-                        <option value="0">{ LocalizeText('navigator.roomsettings.floor_thickness.normal') }</option>
-                        <option value="1">{ LocalizeText('navigator.roomsettings.floor_thickness.thick') }</option>
-                        <option value="-1">{ LocalizeText('navigator.roomsettings.floor_thickness.thin') }</option>
-                        <option value="-2">{ LocalizeText('navigator.roomsettings.floor_thickness.thinnest') }</option>
-                    </select>
+                    <NavigatorRoomSettingsSectionView title={ LocalizeText('navigator.roomsettings.vip_settings') } gap={ 1 } className="h-full">
+                        <div className="flex items-center gap-1">
+                            <input checked={ roomData.hideWalls } className="form-check-input" disabled={ !isHC } type="checkbox" onChange={ event => handleChange('hide_walls', event.target.checked) } />
+                            <Text small>{ LocalizeText('navigator.roomsettings.hide_walls') }</Text>
+                        </div>
+                        <select className="form-select form-select-sm" disabled={ !isHC } value={ roomData.wallThickness } onChange={ event => handleChange('wall_thickness', event.target.value) }>
+                            <option value="0">{ LocalizeText('navigator.roomsettings.wall_thickness.normal') }</option>
+                            <option value="1">{ LocalizeText('navigator.roomsettings.wall_thickness.thick') }</option>
+                            <option value="-1">{ LocalizeText('navigator.roomsettings.wall_thickness.thin') }</option>
+                            <option value="-2">{ LocalizeText('navigator.roomsettings.wall_thickness.thinnest') }</option>
+                        </select>
+                        <select className="form-select form-select-sm" disabled={ !isHC } value={ roomData.floorThickness } onChange={ event => handleChange('floor_thickness', event.target.value) }>
+                            <option value="0">{ LocalizeText('navigator.roomsettings.floor_thickness.normal') }</option>
+                            <option value="1">{ LocalizeText('navigator.roomsettings.floor_thickness.thick') }</option>
+                            <option value="-1">{ LocalizeText('navigator.roomsettings.floor_thickness.thin') }</option>
+                            <option value="-2">{ LocalizeText('navigator.roomsettings.floor_thickness.thinnest') }</option>
+                        </select>
+                    </NavigatorRoomSettingsSectionView>
                 </Column>
             </Grid>
         </>