From e4fbb4785399dab6b44dc82c49afadaf40b750a3 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@billsonnn.com>
Date: Thu, 11 Apr 2024 20:58:34 -0400
Subject: [PATCH] Start big update

---
 .editorconfig                                 |   6 +
 .eslintrc.json                                |  11 +
 .vscode/settings.json                         |  17 +-
 index.html                                    |   2 +-
 package.json                                  |  10 +
 postcss.config.js                             |   8 +
 prettier.config.js                            |   7 +
 src/App.tsx                                   |  18 +-
 .../avatar/AvatarEditorThumbnailsHelper.ts    |   6 +-
 src/common/ButtonGroup.tsx                    |  22 -
 src/common/Flex.tsx                           |   4 +-
 src/common/Grid.tsx                           |   4 +-
 src/common/InfiniteGrid.tsx                   |   7 +-
 src/common/InfiniteScroll.tsx                 |   6 +-
 src/common/card/NitroCardHeaderView.tsx       |   8 +-
 src/common/card/NitroCardSubHeaderView.tsx    |  23 -
 src/common/card/NitroCardView.tsx             |   4 +-
 .../accordion/NitroCardAccordionSetView.tsx   |   4 +-
 src/common/card/index.ts                      |   3 +-
 .../card/tabs/NitroCardTabsItemView.tsx       |   4 +-
 src/common/card/tabs/NitroCardTabsView.tsx    |   2 +-
 .../draggable-window/DraggableWindow.tsx      |   2 +-
 src/common/index.ts                           |   1 -
 src/common/layout/LayoutCounterTimeView.tsx   |  11 +-
 .../layout/LayoutFurniIconImageView.tsx       |   2 +-
 src/common/layout/LayoutGiftTagView.tsx       |  12 +-
 src/common/layout/LayoutGridItem.tsx          |   2 +-
 src/common/layout/LayoutImage.tsx             |   2 +-
 src/common/layout/LayoutItemCountView.tsx     |   2 +-
 src/common/layout/LayoutMiniCameraView.tsx    |   2 +-
 .../layout/LayoutNotificationAlertView.tsx    |   2 +-
 .../layout/LayoutNotificationBubbleView.tsx   |   4 +-
 .../layout/LayoutPrizeProductImageView.tsx    |   2 +-
 src/common/layout/LayoutProgressBar.tsx       |   8 +-
 src/common/layout/LayoutRoomThumbnailView.tsx |   2 +-
 src/common/layout/LayoutTrophyView.tsx        |   8 +-
 .../LayoutLimitedEditionCompletePlateView.tsx |   9 +-
 src/components/{main => }/MainView.tsx        |  58 +-
 .../achievements/AchievementsView.tsx         |  20 +-
 .../views/AchievementDetailsView.tsx          |  18 +-
 .../achievement-list/AchievementListView.tsx  |   2 +-
 .../AchievementsCategoryListItemView.tsx      |   8 +-
 .../AchievementsCategoryListView.tsx          |   2 +-
 .../AvatarEditorFigurePreviewView.tsx         |  18 +-
 .../avatar-editor/AvatarEditorIcon.tsx        |  38 +-
 .../avatar-editor/AvatarEditorModelView.tsx   |  35 +-
 .../avatar-editor/AvatarEditorView.tsx        |  26 +-
 .../AvatarEditorWardrobeView.tsx              |  20 +-
 .../AvatarEditorFigureSetItemView.tsx         |   7 +-
 .../figure-set/AvatarEditorFigureSetView.tsx  |  11 +-
 .../AvatarEditorPaletteSetItemView.tsx        |   5 +-
 .../AvatarEditorPaletteSetView.tsx            |  11 +-
 src/components/camera/CameraWidgetView.tsx    |   6 +-
 .../camera/views/CameraWidgetCaptureView.tsx  |  10 +-
 .../camera/views/CameraWidgetCheckoutView.tsx |  60 +-
 .../views/CameraWidgetShowPhotoView.tsx       |   4 +-
 .../views/editor/CameraWidgetEditorView.tsx   |  28 +-
 .../CameraWidgetEffectListItemView.tsx        |   6 +-
 .../CameraWidgetEffectListView.tsx            |   2 +-
 src/components/campaign/CalendarItemView.tsx  |   8 +-
 src/components/campaign/CalendarView.tsx      |  30 +-
 src/components/campaign/CampaignView.tsx      |   2 +-
 src/components/catalog/CatalogView.tsx        |  12 +-
 .../catalog-header/CatalogHeaderView.tsx      |   5 +-
 .../catalog/views/gift/CatalogGiftView.tsx    |  68 +-
 .../navigation/CatalogNavigationItemView.tsx  |  12 +-
 .../navigation/CatalogNavigationSetView.tsx   |   2 +-
 .../navigation/CatalogNavigationView.tsx      |   2 +-
 .../page/common/CatalogGridOfferView.tsx      |   4 +-
 .../page/common/CatalogRedeemVoucherView.tsx  |  10 +-
 .../views/page/common/CatalogSearchView.tsx   |  10 +-
 .../layout/CatalogLayoutBadgeDisplayView.tsx  |  22 +-
 .../layout/CatalogLayoutColorGroupingView.tsx |  32 +-
 .../page/layout/CatalogLayoutDefaultView.tsx  |  16 +-
 .../CatalogLayoutGuildCustomFurniView.tsx     |  20 +-
 .../layout/CatalogLayoutGuildForumView.tsx    |  16 +-
 .../CatalogLayoutGuildFrontpageView.tsx       |  11 +-
 .../layout/CatalogLayoutInfoLoyaltyView.tsx   |   4 +-
 .../page/layout/CatalogLayoutPets3View.tsx    |  16 +-
 .../page/layout/CatalogLayoutRoomAdsView.tsx  |  38 +-
 .../layout/CatalogLayoutRoomBundleView.tsx    |  16 +-
 .../layout/CatalogLayoutSingleBundleView.tsx  |  16 +-
 .../layout/CatalogLayoutSoundMachineView.tsx  |  22 +-
 .../page/layout/CatalogLayoutSpacesView.tsx   |  14 +-
 .../page/layout/CatalogLayoutTrophiesView.tsx |  10 +-
 .../page/layout/CatalogLayoutVipBuyView.tsx   |  34 +-
 .../CatalogLayoutFrontPageItemView.tsx        |   4 +-
 .../CatalogLayoutMarketplaceItemView.tsx      |  10 +-
 .../CatalogLayoutMarketplaceOwnItemsView.tsx  |   6 +-
 ...atalogLayoutMarketplacePublicItemsView.tsx |  10 +-
 ...CatalogLayoutMarketplaceSearchFormView.tsx |  28 +-
 .../marketplace/MarketplacePostOfferView.tsx  |  24 +-
 .../page/layout/pets/CatalogLayoutPetView.tsx |  28 +-
 .../vip-gifts/CatalogLayoutVipGiftsView.tsx   |   6 +-
 .../page/layout/vip-gifts/VipGiftItemView.tsx |   4 +-
 .../widgets/CatalogBundleGridWidgetView.tsx   |   4 +-
 .../CatalogGuildSelectorWidgetView.tsx        |  16 +-
 .../widgets/CatalogItemGridWidgetView.tsx     |   2 +-
 .../widgets/CatalogLimitedItemWidgetView.tsx  |  10 +-
 .../widgets/CatalogPriceDisplayWidgetView.tsx |  12 +-
 .../widgets/CatalogPurchaseWidgetView.tsx     |   8 +-
 .../widgets/CatalogSimplePriceWidgetView.tsx  |  15 +-
 .../page/widgets/CatalogSpacesWidgetView.tsx  |   8 +-
 .../page/widgets/CatalogSpinnerWidgetView.tsx |   8 +-
 .../widgets/CatalogViewProductWidgetView.tsx  |   8 +-
 .../views/targeted-offer/OfferBubbleView.tsx  |   8 +-
 .../views/targeted-offer/OfferWindowView.tsx  |  49 +-
 .../chat-history/ChatHistoryView.tsx          |  12 +-
 .../floorplan-editor/FloorplanEditorView.tsx  |  12 +-
 .../views/FloorplanCanvasView.tsx             |  20 +-
 .../views/FloorplanImportExportView.tsx       |  10 +-
 .../views/FloorplanOptionsView.tsx            |  38 +-
 .../views/friends-bar/FriendBarItemView.tsx   |  14 +-
 .../views/friends-bar/FriendsBarView.tsx      |  10 +-
 .../FriendsListRemoveConfirmationView.tsx     |   8 +-
 .../FriendsListRoomInviteView.tsx             |  12 +-
 .../friends-list/FriendsListSearchView.tsx    |  32 +-
 .../views/friends-list/FriendsListView.tsx    |  10 +-
 .../FriendsListGroupItemView.tsx              |  30 +-
 .../FriendsListRequestItemView.tsx            |  16 +-
 .../FriendsListRequestView.tsx                |   8 +-
 .../views/messenger/FriendsMessengerView.tsx  |  46 +-
 .../FriendsMessengerThreadGroup.tsx           |  12 +-
 .../FriendsMessengerThreadView.tsx            |   2 +-
 src/components/game-center/GameCenterView.tsx |   4 +-
 .../game-center/views/GameListView.tsx        |  11 +-
 .../game-center/views/GameStageView.tsx       |   3 +-
 src/components/game-center/views/GameView.tsx |  15 +-
 .../groups/views/GroupBadgeCreatorView.tsx    |  20 +-
 .../groups/views/GroupCreatorView.tsx         |  28 +-
 .../groups/views/GroupInformationView.tsx     |  50 +-
 .../groups/views/GroupManagerView.tsx         |  16 +-
 .../groups/views/GroupMembersView.tsx         |  36 +-
 .../groups/views/GroupRoomInformationView.tsx |  18 +-
 .../groups/views/tabs/GroupTabBadgeView.tsx   |   4 +-
 .../groups/views/tabs/GroupTabColorsView.tsx  |  20 +-
 .../tabs/GroupTabCreatorConfirmationView.tsx  |  22 +-
 .../views/tabs/GroupTabIdentityView.tsx       |  32 +-
 .../views/tabs/GroupTabSettingsView.tsx       |  30 +-
 src/components/guide-tool/GuideToolView.tsx   |  12 +-
 .../guide-tool/views/GuideToolAcceptView.tsx  |  16 +-
 .../guide-tool/views/GuideToolMenuView.tsx    |  50 +-
 .../guide-tool/views/GuideToolOngoingView.tsx |  42 +-
 .../views/GuideToolUserCreateRequestView.tsx  |  10 +-
 .../views/GuideToolUserFeedbackView.tsx       |  22 +-
 .../views/GuideToolUserNoHelpersView.tsx      |   8 +-
 .../views/GuideToolUserPendingView.tsx        |  12 +-
 .../views/GuideToolUserSomethingWrogView.tsx  |   8 +-
 .../views/GuideToolUserThanksView.tsx         |   6 +-
 src/components/hc-center/HcCenterView.tsx     |  30 +-
 src/components/help/HelpView.tsx              |   8 +-
 .../help/views/DescribeReportView.tsx         |   8 +-
 src/components/help/views/HelpIndexView.tsx   |  14 +-
 .../help/views/ReportSummaryView.tsx          |   6 +-
 .../help/views/SanctionStatusView.tsx         |   8 +-
 .../help/views/SelectReportedChatsView.tsx    |  10 +-
 .../help/views/SelectReportedUserView.tsx     |   6 +-
 src/components/help/views/SelectTopicView.tsx |   6 +-
 .../NameChangeConfirmationView.tsx            |   6 +-
 .../views/name-change/NameChangeInitView.tsx  |   6 +-
 .../views/name-change/NameChangeInputView.tsx |  10 +-
 src/components/hotel-view/HotelView.tsx       |  30 +-
 .../views/widgets/GetWidgetLayout.tsx         |   2 +-
 .../views/widgets/WidgetSlotView.tsx          |   2 +-
 .../bonus-rare/BonusRareWidgetView.tsx        |   4 +-
 .../hall-of-fame-item/HallOfFameItemView.tsx  |   2 +-
 .../hall-of-fame/HallOfFameWidgetView.tsx     |   2 +-
 .../promo-article/PromoArticleWidgetView.tsx  |  10 +-
 .../widget-container/WidgetContainerView.tsx  |   4 +-
 src/components/inventory/InventoryView.tsx    |  10 +-
 .../views/InventoryCategoryEmptyView.tsx      |   6 +-
 .../views/badge/InventoryBadgeItemView.tsx    |   2 +-
 .../views/badge/InventoryBadgeView.tsx        |  16 +-
 .../views/bot/InventoryBotItemView.tsx        |   4 +-
 .../inventory/views/bot/InventoryBotView.tsx  |  10 +-
 .../furniture/InventoryFurnitureItemView.tsx  |   2 +-
 .../InventoryFurnitureSearchView.tsx          |   8 +-
 .../furniture/InventoryFurnitureView.tsx      |  16 +-
 .../views/furniture/InventoryTradeView.tsx    |  64 +-
 .../views/pet/InventoryPetItemView.tsx        |   4 +-
 .../inventory/views/pet/InventoryPetView.tsx  |  10 +-
 src/components/loading/LoadingView.tsx        |  10 +-
 src/components/mod-tools/ModToolsView.tsx     |  20 +-
 .../mod-tools/views/chatlog/ChatlogView.tsx   |  28 +-
 .../mod-tools/views/room/ModToolsRoomView.tsx |  48 +-
 .../views/tickets/ModToolsIssueInfoView.tsx   |   6 +-
 .../views/tickets/ModToolsMyIssuesTabView.tsx |  32 +-
 .../tickets/ModToolsOpenIssuesTabView.tsx     |  26 +-
 .../tickets/ModToolsPickedIssuesTabView.tsx   |  24 +-
 .../views/tickets/ModToolsTicketsView.tsx     |   2 +-
 .../views/user/ModToolsUserModActionView.tsx  |  12 +-
 .../views/user/ModToolsUserRoomVisitsView.tsx |  18 +-
 .../mod-tools/views/user/ModToolsUserView.tsx |   4 +-
 src/components/navigator/NavigatorView.tsx    |   6 +-
 .../views/NavigatorDoorStateView.tsx          |  20 +-
 .../views/NavigatorRoomCreatorView.tsx        |  46 +-
 .../navigator/views/NavigatorRoomInfoView.tsx |  36 +-
 .../navigator/views/NavigatorRoomLinkView.tsx |  16 +-
 .../NavigatorRoomSettingsAccessTabView.tsx    |  62 +-
 .../NavigatorRoomSettingsBasicTabView.tsx     |  44 +-
 .../NavigatorRoomSettingsModTabView.tsx       |  30 +-
 .../NavigatorRoomSettingsRightsTabView.tsx    |  10 +-
 .../NavigatorRoomSettingsView.tsx             |  12 +-
 .../NavigatorRoomSettingsVipChatTabView.tsx   |  18 +-
 .../NavigatorSearchResultItemInfoView.tsx     |  24 +-
 .../search/NavigatorSearchResultItemView.tsx  |  10 +-
 .../search/NavigatorSearchResultView.tsx      |  16 +-
 .../views/search/NavigatorSearchView.tsx      |  10 +-
 src/components/nitropedia/NitropediaView.tsx  |   6 +-
 .../NotificationCenterView.tsx                |   5 +-
 .../alert-layouts/NitroSystemAlertView.tsx    |   8 +-
 .../NotificationDefaultAlertView.tsx          |  20 +-
 .../NotificationSearchAlertView.tsx           |   6 +-
 .../NotificationClubGiftBubbleView.tsx        |  10 +-
 .../NotificationDefaultBubbleView.tsx         |   6 +-
 .../NotificationDefaultConfirmView.tsx        |   6 +-
 src/components/purse/PurseView.tsx            |  16 +-
 src/components/purse/views/CurrencyView.tsx   |   8 +-
 src/components/purse/views/SeasonalView.tsx   |   6 +-
 src/components/right-side/RightSideView.tsx   |   2 +-
 src/components/room/RoomView.tsx              |   6 +-
 .../AvatarInfoPetTrainingPanelView.tsx        |  10 +-
 .../AvatarInfoRentableBotChatView.tsx         |  32 +-
 .../AvatarInfoUseProductConfirmView.tsx       |  24 +-
 .../avatar-info/AvatarInfoUseProductView.tsx  |   2 +-
 .../avatar-info/AvatarInfoWidgetView.tsx      |   2 +-
 .../infostand/InfoStandWidgetBotView.tsx      |  30 +-
 .../infostand/InfoStandWidgetFurniView.tsx    |  88 +--
 .../infostand/InfoStandWidgetPetView.tsx      | 122 ++--
 .../InfoStandWidgetRentableBotView.tsx        |  54 +-
 ...nfoStandWidgetUserRelationshipItemView.tsx |   4 +-
 .../InfoStandWidgetUserRelationshipsView.tsx  |   6 +-
 .../infostand/InfoStandWidgetUserTagsView.tsx |   2 +-
 .../infostand/InfoStandWidgetUserView.tsx     |  81 +--
 .../menu/AvatarInfoWidgetAvatarView.tsx       |  10 +-
 .../menu/AvatarInfoWidgetDecorateView.tsx     |   2 +-
 .../menu/AvatarInfoWidgetFurniView.tsx        |   9 +-
 .../menu/AvatarInfoWidgetNameView.tsx         |   2 +-
 .../menu/AvatarInfoWidgetOwnAvatarView.tsx    |  28 +-
 .../menu/AvatarInfoWidgetOwnPetView.tsx       |  10 +-
 .../menu/AvatarInfoWidgetPetView.tsx          |   2 +-
 .../menu/AvatarInfoWidgetRentableBotView.tsx  |  20 +-
 .../chat-input/ChatInputStyleSelectorView.tsx |  16 +-
 .../room/widgets/chat-input/ChatInputView.tsx |   4 +-
 .../room/widgets/chat/ChatWidgetView.tsx      |   2 +-
 .../widgets/choosers/ChooserWidgetView.tsx    |  10 +-
 .../choosers/FurniChooserWidgetView.tsx       |   2 +-
 .../choosers/UserChooserWidgetView.tsx        |   2 +-
 .../context-menu/ContextMenuCaretView.tsx     |   2 +-
 .../context-menu/ContextMenuHeaderView.tsx    |   2 +-
 .../context-menu/ContextMenuListItemView.tsx  |   2 +-
 .../widgets/context-menu/ContextMenuView.tsx  |  12 +-
 .../widgets/doorbell/DoorbellWidgetView.tsx   |  24 +-
 .../FriendRequestDialogView.tsx               |  22 +-
 .../FriendRequestWidgetView.tsx               |   2 +-
 .../FurnitureBackgroundColorView.tsx          |  16 +-
 .../furniture/FurnitureBadgeDisplayView.tsx   |   2 +-
 .../furniture/FurnitureCraftingView.tsx       |  46 +-
 .../widgets/furniture/FurnitureDimmerView.tsx |  36 +-
 .../furniture/FurnitureExchangeCreditView.tsx |  16 +-
 .../furniture/FurnitureExternalImageView.tsx  |   2 +-
 .../furniture/FurnitureFriendFurniView.tsx    |  28 +-
 .../furniture/FurnitureGiftOpeningView.tsx    |  22 +-
 .../furniture/FurnitureHighScoreView.tsx      |  28 +-
 .../furniture/FurnitureMannequinView.tsx      |  40 +-
 .../FurnitureMysteryBoxOpenDialogView.tsx     |   6 +-
 .../FurnitureMysteryTrophyOpenDialogView.tsx  |  24 +-
 .../furniture/FurnitureSpamWallPostItView.tsx |  10 +-
 .../furniture/FurnitureStackHeightView.tsx    |  18 +-
 .../furniture/FurnitureStickieView.tsx        |  10 +-
 .../widgets/furniture/FurnitureTrophyView.tsx |   2 +-
 .../furniture/FurnitureWidgetsView.tsx        |   7 +-
 .../furniture/FurnitureYoutubeDisplayView.tsx |  14 +-
 .../context-menu/EffectBoxConfirmView.tsx     |  10 +-
 .../context-menu/FurnitureContextMenuView.tsx |   2 +-
 .../MonsterPlantSeedConfirmView.tsx           |  24 +-
 .../PurchasableClothingConfirmView.tsx        |  24 +-
 .../playlist-editor/DiskInventoryView.tsx     |  22 +-
 .../FurniturePlaylistEditorWidgetView.tsx     |   8 +-
 .../playlist-editor/SongPlaylistView.tsx      |  31 +-
 .../mysterybox/MysteryBoxExtensionView.tsx    |  16 +-
 .../object-location/ObjectLocationView.tsx    |   6 +-
 .../pet-package/PetPackageWidgetView.tsx      |  30 +-
 .../RoomFilterWordsWidgetView.tsx             |  14 +-
 .../room-promotes/RoomPromotesWidgetView.tsx  |  16 +-
 .../views/RoomPromoteEditWidgetView.tsx       |  18 +-
 .../views/RoomPromoteMyOwnEventWidgetView.tsx |   2 +-
 .../views/RoomPromoteOtherEventWidgetView.tsx |  12 +-
 .../room-tools/RoomToolsWidgetView.tsx        |  46 +-
 .../user-location/UserLocationView.tsx        |   2 +-
 .../word-quiz/WordQuizQuestionView.tsx        |  32 +-
 .../widgets/word-quiz/WordQuizVoteView.tsx    |  10 +-
 .../widgets/word-quiz/WordQuizWidgetView.tsx  |   2 +-
 src/components/toolbar/ToolbarItemView.tsx    |  22 +
 src/components/toolbar/ToolbarMeView.tsx      |  18 +-
 src/components/toolbar/ToolbarView.tsx        |  62 +-
 .../user-profile/UserProfileView.tsx          |  14 +-
 .../views/FriendsContainerView.tsx            |  10 +-
 .../views/GroupsContainerView.tsx             |  22 +-
 .../views/RelationshipsContainerView.tsx      |  22 +-
 .../user-profile/views/UserContainerView.tsx  |  36 +-
 .../user-settings/UserSettingsView.tsx        |  72 +-
 src/components/wired/views/WiredBaseView.tsx  |  16 +-
 .../wired/views/WiredFurniSelectorView.tsx    |   6 +-
 .../views/actions/WiredActionBaseView.tsx     |  10 +-
 .../WiredActionBotChangeFigureView.tsx        |  16 +-
 .../WiredActionBotFollowAvatarView.tsx        |  26 +-
 .../WiredActionBotGiveHandItemView.tsx        |  14 +-
 .../views/actions/WiredActionBotMoveView.tsx  |  10 +-
 .../WiredActionBotTalkToAvatarView.tsx        |  32 +-
 .../views/actions/WiredActionBotTalkView.tsx  |  32 +-
 .../actions/WiredActionBotTeleportView.tsx    |  10 +-
 .../WiredActionCallAnotherStackView.tsx       |   2 +-
 .../views/actions/WiredActionChaseView.tsx    |   2 +-
 .../views/actions/WiredActionChatView.tsx     |  10 +-
 .../views/actions/WiredActionFleeView.tsx     |   2 +-
 .../actions/WiredActionGiveRewardView.tsx     |  50 +-
 ...redActionGiveScoreToPredefinedTeamView.tsx |  26 +-
 .../actions/WiredActionGiveScoreView.tsx      |  16 +-
 .../views/actions/WiredActionJoinTeamView.tsx |  14 +-
 .../actions/WiredActionKickFromRoomView.tsx   |  10 +-
 .../actions/WiredActionLeaveTeamView.tsx      |   2 +-
 .../WiredActionMoveAndRotateFurniView.tsx     |  28 +-
 .../actions/WiredActionMoveFurniToView.tsx    |  24 +-
 .../actions/WiredActionMoveFurniView.tsx      |  34 +-
 .../views/actions/WiredActionMuteUserView.tsx |  16 +-
 .../views/actions/WiredActionResetView.tsx    |   2 +-
 .../WiredActionSetFurniStateToView.tsx        |  26 +-
 .../views/actions/WiredActionTeleportView.tsx |   2 +-
 .../WiredActionToggleFurniStateView.tsx       |   2 +-
 .../WiredConditionActorHasHandItem.tsx        |   8 +-
 .../WiredConditionActorIsGroupMemberView.tsx  |   2 +-
 .../WiredConditionActorIsOnFurniView.tsx      |   2 +-
 .../WiredConditionActorIsTeamMemberView.tsx   |  14 +-
 .../WiredConditionActorIsWearingBadgeView.tsx |  10 +-
 ...WiredConditionActorIsWearingEffectView.tsx |  10 +-
 .../conditions/WiredConditionBaseView.tsx     |   2 +-
 .../WiredConditionDateRangeView.tsx           |  16 +-
 .../WiredConditionFurniHasAvatarOnView.tsx    |   2 +-
 .../WiredConditionFurniHasFurniOnView.tsx     |  14 +-
 .../WiredConditionFurniHasNotFurniOnView.tsx  |  14 +-
 .../WiredConditionFurniIsOfTypeView.tsx       |   2 +-
 ...WiredConditionFurniMatchesSnapshotView.tsx |  26 +-
 .../WiredConditionTimeElapsedLessView.tsx     |  10 +-
 .../WiredConditionTimeElapsedMoreView.tsx     |  10 +-
 .../WiredConditionUserCountInRoomView.tsx     |  16 +-
 .../WiredTriggerAvatarEnterRoomView.tsx       |  22 +-
 .../WiredTriggerAvatarSaysSomethingView.tsx   |  26 +-
 .../WiredTriggerAvatarWalksOffFurniView.tsx   |   2 +-
 .../WiredTriggerAvatarWalksOnFurni.tsx        |   2 +-
 .../views/triggers/WiredTriggerBaseView.tsx   |   2 +-
 .../WiredTriggerBotReachedAvatarView.tsx      |  10 +-
 .../WiredTriggerBotReachedStuffView.tsx       |  10 +-
 .../triggers/WiredTriggerCollisionView.tsx    |   2 +-
 .../triggers/WiredTriggerExecuteOnceView.tsx  |  10 +-
 ...iredTriggerExecutePeriodicallyLongView.tsx |  10 +-
 .../WiredTriggerExecutePeriodicallyView.tsx   |  10 +-
 .../triggers/WiredTriggerGameEndsView.tsx     |   2 +-
 .../triggers/WiredTriggerGameStartsView.tsx   |   2 +-
 .../WiredTriggerScoreAchievedView.tsx         |  10 +-
 .../triggers/WiredTriggerToggleFurniView.tsx  |   2 +-
 src/index.css                                 | 681 ++++++++++++++++++
 src/index.tsx                                 |   2 +-
 tailwind.config.js                            |  35 +
 yarn.lock                                     | 455 +++++++++++-
 365 files changed, 3900 insertions(+), 2737 deletions(-)
 create mode 100644 .editorconfig
 create mode 100644 postcss.config.js
 create mode 100644 prettier.config.js
 delete mode 100644 src/common/ButtonGroup.tsx
 delete mode 100644 src/common/card/NitroCardSubHeaderView.tsx
 rename src/components/{main => }/MainView.tsx (61%)
 create mode 100644 src/components/toolbar/ToolbarItemView.tsx
 create mode 100644 src/index.css
 create mode 100644 tailwind.config.js

diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 00000000..a8dfa3ee
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,6 @@
+[*]
+charset = utf-8
+insert_final_newline = true
+end_of_line = lf
+indent_style = space
+indent_size = 4
diff --git a/.eslintrc.json b/.eslintrc.json
index 695c05dd..bd3e3f3a 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -105,6 +105,17 @@
             {
                 "prevent": true
             }
+        ],
+        "react/jsx-sort-props": [
+            "error",
+            {
+                "callbacksLast": true,
+                "shorthandFirst": true,
+                "shorthandLast": false,
+                "ignoreCase": true,
+                "noSortAlphabetically": false,
+                "reservedFirst": true
+            }
         ]
     }
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
index ba397879..ad273d94 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -8,9 +8,9 @@
     "editor.codeActionsOnSave": {
         "source.fixAll.eslint": "explicit",
         "source.fixAll.sortJSON": "never",
-        "source.organizeImports": "explicit"
+        "source.organizeImports": "always"
     },
-    "editor.formatOnSave": false,
+    "editor.formatOnSave": true,
     "git.ignoreLimitWarning": true,
     "files.eol": "\n",
     "files.insertFinalNewline": true,
@@ -27,6 +27,15 @@
         }
     ],
     "javascript.format.enable": false,
-    "thunder-client.saveToWorkspace": false,
-    "thunder-client.workspaceRelativePath": "."
+    "editor.linkedEditing": false,
+    "tailwindCSS.includeLanguages": {
+        "html": "html",
+        "javascript": "javascript",
+        "css": "css"
+    },
+    "tailwindCSS.experimental.classRegex": [
+    ],
+    "editor.quickSuggestions": {
+        "strings": true
+    }
 }
diff --git a/index.html b/index.html
index 18b1a792..76d642b0 100644
--- a/index.html
+++ b/index.html
@@ -20,7 +20,7 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root" class="w-100 h-100"></div>
+    <div id="root" class="w-full h-full"></div>
     <script>
       window.NitroConfig = {
         "config.urls": [ '/renderer-config.json', '/ui-config.json' ],
diff --git a/package.json b/package.json
index 4910ee84..50b6a446 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,10 @@
     "eslint": "eslint src --ext .ts,.tsx"
   },
   "dependencies": {
+    "@headlessui/react": "^1.7.18",
+    "@headlessui/tailwindcss": "^0.2.0",
     "@tanstack/react-virtual": "3.2.0",
+    "dompurify": "^3.1.0",
     "react": "^18.2.0",
     "react-bootstrap": "^2.2.2",
     "react-dom": "^18.2.0",
@@ -20,6 +23,7 @@
     "use-between": "^1.3.5"
   },
   "devDependencies": {
+    "@tailwindcss/forms": "^0.5.7",
     "@types/node": "^20.11.30",
     "@types/react": "^18.2.67",
     "@types/react-dom": "^18.2.22",
@@ -27,12 +31,18 @@
     "@typescript-eslint/eslint-plugin": "^7.3.1",
     "@typescript-eslint/parser": "^7.3.1",
     "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "postcss": "^8.4.38",
+    "postcss-nested": "^6.0.1",
+    "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.13",
     "sass": "^1.72.0",
+    "tailwindcss": "^3.4.3",
     "typescript": "^5.4.2",
     "vite": "^5.1.6"
   }
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 00000000..98552084
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,8 @@
+/** @type {import("postcss-load-config").Config} */
+
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {}
+    }
+}
diff --git a/prettier.config.js b/prettier.config.js
new file mode 100644
index 00000000..ae27533e
--- /dev/null
+++ b/prettier.config.js
@@ -0,0 +1,7 @@
+/** @type {import("prettier").Config} */
+
+module.exports = {
+    plugins: [
+        'prettier-plugin-tailwindcss'
+    ]
+}
diff --git a/src/App.tsx b/src/App.tsx
index 9434de93..c3fafbd8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,9 +1,9 @@
 import { GetAssetManager, GetAvatarRenderManager, GetCommunication, GetConfiguration, GetLocalizationManager, GetRoomCameraWidgetManager, GetRoomEngine, GetRoomSessionManager, GetSessionDataManager, GetSoundManager, GetStage, GetTexturePool, GetTicker, HabboWebTools, LegacyExternalInterface, LoadGameUrlEvent, NitroLogger, NitroVersion, PrepareRenderer } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { GetUIVersion } from './api';
-import { Base } from './common';
+import { classNames } from './common';
+import { MainView } from './components/MainView';
 import { LoadingView } from './components/loading/LoadingView';
-import { MainView } from './components/main/MainView';
 import { useMessageEvent } from './hooks';
 
 NitroVersion.UI_VERSION = GetUIVersion();
@@ -34,7 +34,9 @@ export const App: FC<{}> = props =>
                     height,
                     autoDensity: true,
                     backgroundAlpha: 0,
-                    preference: 'webgl'
+                    preference: 'webgl',
+                    eventMode: 'none',
+                    failIfMajorPerformanceCaveat: false
                 });
 
                 await GetConfiguration().init();
@@ -56,12 +58,12 @@ export const App: FC<{}> = props =>
                         GetSoundManager().init(),
                         GetSessionDataManager().init(),
                         GetRoomSessionManager().init(),
-                        GetRoomCameraWidgetManager().init()
+                        GetRoomCameraWidgetManager().init(),
+                        GetCommunication().init()
                     ]
                 );
 
                 await GetRoomEngine().init();
-                await GetCommunication().init();
 
                 // new GameMessageHandler();
 
@@ -91,11 +93,11 @@ export const App: FC<{}> = props =>
     }, []);
     
     return (
-        <Base fit overflow="hidden" className={ !(window.devicePixelRatio % 1) && 'image-rendering-pixelated' }>
+        <div className={ classNames('w-full h-full overflow-hidden', !(window.devicePixelRatio % 1) && '[image-rendering:pixelated]' ) }>
             { !isReady &&
                 <LoadingView /> }
             { isReady && <MainView /> }
-            <Base id="draggable-windows-container" />
-        </Base>
+            <div id="draggable-windows-container" />
+        </div>
     );
 }
diff --git a/src/api/avatar/AvatarEditorThumbnailsHelper.ts b/src/api/avatar/AvatarEditorThumbnailsHelper.ts
index c5eabaa4..0f2f4e42 100644
--- a/src/api/avatar/AvatarEditorThumbnailsHelper.ts
+++ b/src/api/avatar/AvatarEditorThumbnailsHelper.ts
@@ -82,7 +82,11 @@ export class AvatarEditorThumbnailsHelper
                     }
                 }
 
-                if(!hasAsset) continue;
+                if(!hasAsset)
+                {
+                    console.log(`${ AvatarFigurePartType.SCALE }_${ AvatarFigurePartType.STD }_${ part.type }_${ part.id }`);
+                    continue;
+                }
 
                 const x = asset.offsetX;
                 const y = asset.offsetY;
diff --git a/src/common/ButtonGroup.tsx b/src/common/ButtonGroup.tsx
deleted file mode 100644
index 033bb1fc..00000000
--- a/src/common/ButtonGroup.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { FC, useMemo } from 'react';
-import { Base, BaseProps } from './Base';
-
-export interface ButtonGroupProps extends BaseProps<HTMLDivElement>
-{
-}
-
-export const ButtonGroup: FC<ButtonGroupProps> = props =>
-{
-    const { classNames = [], ...rest } = props;
-
-    const getClassNames = useMemo(() =>
-    {
-        const newClassNames: string[] = [ 'btn-group' ];
-
-        if(classNames.length) newClassNames.push(...classNames);
-
-        return newClassNames;
-    }, [ classNames ]);
-
-    return <Base classNames={ getClassNames } { ...rest } />;
-}
diff --git a/src/common/Flex.tsx b/src/common/Flex.tsx
index ce69731c..db07d5d0 100644
--- a/src/common/Flex.tsx
+++ b/src/common/Flex.tsx
@@ -39,12 +39,12 @@ export const Flex: FC<FlexProps> = props =>
 
         if(justifyContent) newClassNames.push('justify-content-' + justifyContent);
 
-        if(!alignItems && !justifyContent && center) newClassNames.push('align-items-center', 'justify-content-center');
+        if(!alignItems && !justifyContent && center) newClassNames.push('items-center', 'justify-center');
 
         if(classNames.length) newClassNames.push(...classNames);
 
         return newClassNames;
     }, [ column, reverse, gap, center, alignSelf, alignItems, justifyContent, classNames ]);
 
-    return <Base display={ display } classNames={ getClassNames } { ...rest } />;
+    return <Base classNames={ getClassNames } display={ display } { ...rest } />;
 }
diff --git a/src/common/Grid.tsx b/src/common/Grid.tsx
index 860a89ca..e1fb9e37 100644
--- a/src/common/Grid.tsx
+++ b/src/common/Grid.tsx
@@ -37,7 +37,7 @@ export const Grid: FC<GridProps> = props =>
 
         if(justifyContent) newClassNames.push('justify-content-' + justifyContent);
 
-        if(!alignItems && !justifyContent && center) newClassNames.push('align-items-center', 'justify-content-center');
+        if(!alignItems && !justifyContent && center) newClassNames.push('items-center', 'justify-center');
 
         if(classNames.length) newClassNames.push(...classNames);
 
@@ -57,7 +57,7 @@ export const Grid: FC<GridProps> = props =>
 
     return (
         <GridContextProvider value={ { isCssGrid: true } }>
-            <Base fullHeight={ fullHeight } classNames={ getClassNames } style={ getStyle } { ...rest } />
+            <Base classNames={ getClassNames } fullHeight={ fullHeight } style={ getStyle } { ...rest } />
         </GridContextProvider>
     );
 }
diff --git a/src/common/InfiniteGrid.tsx b/src/common/InfiniteGrid.tsx
index 4c791a3e..7cd24771 100644
--- a/src/common/InfiniteGrid.tsx
+++ b/src/common/InfiniteGrid.tsx
@@ -1,6 +1,5 @@
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { FC, Fragment, ReactElement, useEffect, useRef } from 'react';
-import { Base } from './Base';
 import { Flex } from './Flex';
 
 interface InfiniteGridProps<T = any>
@@ -34,7 +33,7 @@ export const InfiniteGrid: FC<InfiniteGridProps> = props =>
     const items = virtualizer.getVirtualItems();
 
     return (
-        <Base innerRef={ parentRef } fit position="relative" style={ { overflowY: 'auto' } }>
+        <div ref={ parentRef } className="size-full position-relative" style={ { overflowY: 'auto' } }>
             <div
                 style={ {
                     height: virtualizer.getTotalSize(),
@@ -54,8 +53,8 @@ export const InfiniteGrid: FC<InfiniteGridProps> = props =>
                     { items.map(virtualRow => (
                         <div
                             key={ virtualRow.key + 'a' }
-                            data-index={ virtualRow.index }
                             ref={ virtualizer.measureElement }
+                            data-index={ virtualRow.index }
                             style={ {
                                 display: 'grid',
                                 gap: '0.25rem',
@@ -79,6 +78,6 @@ export const InfiniteGrid: FC<InfiniteGridProps> = props =>
                     )) }
                 </Flex>
             </div>
-        </Base>
+        </div>
     );
 }
diff --git a/src/common/InfiniteScroll.tsx b/src/common/InfiniteScroll.tsx
index 99893f91..8663c143 100644
--- a/src/common/InfiniteScroll.tsx
+++ b/src/common/InfiniteScroll.tsx
@@ -25,7 +25,7 @@ export const InfiniteScroll: FC<InfiniteScrollProps> = props =>
     const items = virtualizer.getVirtualItems();
 
     return (
-        <Base fit innerRef={ parentRef } position="relative" overflow="auto">
+        <Base fit innerRef={ parentRef } overflow="auto" position="relative">
             <div
                 style={ {
                     height: virtualizer.getTotalSize(),
@@ -43,8 +43,8 @@ export const InfiniteScroll: FC<InfiniteScrollProps> = props =>
                     { items.map((virtualRow) => (
                         <div
                             key={ virtualRow.key }
-                            data-index={ virtualRow.index }
-                            ref={ virtualizer.measureElement }>
+                            ref={ virtualizer.measureElement }
+                            data-index={ virtualRow.index }>
                             { rowRender(rows[virtualRow.index]) }
                         </div>
                     )) }
diff --git a/src/common/card/NitroCardHeaderView.tsx b/src/common/card/NitroCardHeaderView.tsx
index 98837c76..9c68e584 100644
--- a/src/common/card/NitroCardHeaderView.tsx
+++ b/src/common/card/NitroCardHeaderView.tsx
@@ -31,15 +31,15 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
     }
 
     return (
-        <Column center position="relative" classNames={ getClassNames } { ...rest }>
-            <Flex fullWidth center>
+        <Column center classNames={ getClassNames } position="relative" { ...rest }>
+            <Flex center fullWidth>
                 <span className="nitro-card-header-text">{ headerText }</span>
                 { isGalleryPhoto &&
-                    <Base position="absolute" className="end-4 nitro-card-header-report-camera" onClick={ onReportPhoto }>
+                    <Base className="end-4 nitro-card-header-report-camera" position="absolute" onClick={ onReportPhoto }>
                         <FaFlag className="fa-icon" />
                     </Base>
                 }
-                <Flex center position="absolute" className="end-2 nitro-card-header-close" onMouseDownCapture={ onMouseDown } onClick={ onCloseClick }>
+                <Flex center className="end-2 nitro-card-header-close" position="absolute" onClick={ onCloseClick } onMouseDownCapture={ onMouseDown }>
                     <FaTimes className="fa-icon w-12 h-12" />
                 </Flex>
             </Flex>
diff --git a/src/common/card/NitroCardSubHeaderView.tsx b/src/common/card/NitroCardSubHeaderView.tsx
deleted file mode 100644
index a37d0bd4..00000000
--- a/src/common/card/NitroCardSubHeaderView.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { FC, useMemo } from 'react';
-import { Flex, FlexProps } from '..';
-
-interface NitroCardSubHeaderProps extends FlexProps {
-    variant?: string;
-}
-export const NitroCardSubHeaderView: FC<NitroCardSubHeaderProps> = props =>
-{
-    const { justifyContent = 'center', classNames = [], variant = 'muted', ...rest } = props;
-
-    const getClassNames = useMemo(() =>
-    {
-        const newClassNames: string[] = [ 'container-fluid', 'p-1' ];
-
-        if(classNames.length) newClassNames.push(...classNames);
-
-        newClassNames.push('bg-' + variant);
-
-        return newClassNames;
-    }, [ classNames, variant ]);
-
-    return <Flex justifyContent={ justifyContent } classNames={ getClassNames } { ...rest } />;
-}
diff --git a/src/common/card/NitroCardView.tsx b/src/common/card/NitroCardView.tsx
index 3caa6bfd..671e6e94 100644
--- a/src/common/card/NitroCardView.tsx
+++ b/src/common/card/NitroCardView.tsx
@@ -26,8 +26,8 @@ export const NitroCardView: FC<NitroCardViewProps> = props =>
 
     return (
         <NitroCardContextProvider value={ { theme } }>
-            <DraggableWindow uniqueKey={ uniqueKey } handleSelector={ handleSelector } windowPosition={ windowPosition } disableDrag={ disableDrag }>
-                <Column innerRef={ elementRef } overflow={ overflow } position={ position } gap={ gap } classNames={ getClassNames } { ...rest } />
+            <DraggableWindow disableDrag={ disableDrag } handleSelector={ handleSelector } uniqueKey={ uniqueKey } windowPosition={ windowPosition }>
+                <Column classNames={ getClassNames } gap={ gap } innerRef={ elementRef } overflow={ overflow } position={ position } { ...rest } />
             </DraggableWindow>
         </NitroCardContextProvider>
     );
diff --git a/src/common/card/accordion/NitroCardAccordionSetView.tsx b/src/common/card/accordion/NitroCardAccordionSetView.tsx
index d9e0656e..10e8fcd7 100644
--- a/src/common/card/accordion/NitroCardAccordionSetView.tsx
+++ b/src/common/card/accordion/NitroCardAccordionSetView.tsx
@@ -70,13 +70,13 @@ export const NitroCardAccordionSetView: FC<NitroCardAccordionSetViewProps> = pro
 
     return (
         <Column classNames={ getClassNames } gap={ gap } { ...rest }>
-            <Flex pointer justifyContent="between" className="nitro-card-accordion-set-header px-2 py-1" onClick={ onClick }>
+            <Flex pointer className="nitro-card-accordion-set-header px-2 py-1" justifyContent="between" onClick={ onClick }>
                 <Text>{ headerText }</Text>
                 { isOpen && <FaCaretUp className="fa-icon" /> }
                 { !isOpen && <FaCaretDown className="fa-icon" /> }
             </Flex>
             { isOpen &&
-                <Column fullHeight overflow="auto" gap={ 0 } className="nitro-card-accordion-set-content">
+                <Column fullHeight className="nitro-card-accordion-set-content" gap={ 0 } overflow="auto">
                     { children }
                 </Column> }
         </Column>
diff --git a/src/common/card/index.ts b/src/common/card/index.ts
index 3619d437..3ce0d606 100644
--- a/src/common/card/index.ts
+++ b/src/common/card/index.ts
@@ -1,7 +1,6 @@
-export * from './accordion';
 export * from './NitroCardContentView';
 export * from './NitroCardContext';
 export * from './NitroCardHeaderView';
-export * from './NitroCardSubHeaderView';
 export * from './NitroCardView';
+export * from './accordion';
 export * from './tabs';
diff --git a/src/common/card/tabs/NitroCardTabsItemView.tsx b/src/common/card/tabs/NitroCardTabsItemView.tsx
index 1c74f8b1..7cfed1f9 100644
--- a/src/common/card/tabs/NitroCardTabsItemView.tsx
+++ b/src/common/card/tabs/NitroCardTabsItemView.tsx
@@ -24,8 +24,8 @@ export const NitroCardTabsItemView: FC<NitroCardTabsItemViewProps> = props =>
     }, [ isActive, classNames ]);
 
     return (
-        <Flex overflow={ overflow } pointer={ pointer } position={ position } classNames={ getClassNames } { ...rest }>
-            <Flex shrink center>
+        <Flex classNames={ getClassNames } overflow={ overflow } pointer={ pointer } position={ position } { ...rest }>
+            <Flex center shrink>
                 { children }
             </Flex>
             { (count > 0) &&
diff --git a/src/common/card/tabs/NitroCardTabsView.tsx b/src/common/card/tabs/NitroCardTabsView.tsx
index 1a64a126..16b204a1 100644
--- a/src/common/card/tabs/NitroCardTabsView.tsx
+++ b/src/common/card/tabs/NitroCardTabsView.tsx
@@ -15,7 +15,7 @@ export const NitroCardTabsView: FC<FlexProps> = props =>
     }, [ classNames ]);
 
     return (
-        <Flex justifyContent={ justifyContent } gap={ gap } classNames={ getClassNames } { ...rest }>
+        <Flex classNames={ getClassNames } gap={ gap } justifyContent={ justifyContent } { ...rest }>
             { children }
         </Flex>
     );
diff --git a/src/common/draggable-window/DraggableWindow.tsx b/src/common/draggable-window/DraggableWindow.tsx
index 286d51d1..f87e1f40 100644
--- a/src/common/draggable-window/DraggableWindow.tsx
+++ b/src/common/draggable-window/DraggableWindow.tsx
@@ -263,7 +263,7 @@ export const DraggableWindow: FC<DraggableWindowProps> = props =>
 
     return (
         createPortal(
-            <Base position="absolute" innerRef={ elementRef } className="draggable-window" onMouseDownCapture={ onMouseDown } onTouchStartCapture={ onTouchStart } style={ dragStyle }>
+            <Base className="draggable-window" innerRef={ elementRef } position="absolute" style={ dragStyle } onMouseDownCapture={ onMouseDown } onTouchStartCapture={ onTouchStart }>
                 { children }
             </Base>, document.getElementById('draggable-windows-container'))
     );
diff --git a/src/common/index.ts b/src/common/index.ts
index 3fc8c599..4fdb8ff8 100644
--- a/src/common/index.ts
+++ b/src/common/index.ts
@@ -1,7 +1,6 @@
 export * from './AutoGrid';
 export * from './Base';
 export * from './Button';
-export * from './ButtonGroup';
 export * from './Column';
 export * from './Flex';
 export * from './FormGroup';
diff --git a/src/common/layout/LayoutCounterTimeView.tsx b/src/common/layout/LayoutCounterTimeView.tsx
index 7460b054..05b8e153 100644
--- a/src/common/layout/LayoutCounterTimeView.tsx
+++ b/src/common/layout/LayoutCounterTimeView.tsx
@@ -1,7 +1,6 @@
 import { FC, useMemo } from 'react';
 import { LocalizeText } from '../../api';
 import { Base, BaseProps } from '../Base';
-import { Flex } from '../Flex';
 
 interface LayoutCounterTimeViewProps extends BaseProps<HTMLDivElement>
 {
@@ -25,19 +24,19 @@ export const LayoutCounterTimeView: FC<LayoutCounterTimeViewProps> = props =>
     }, [ classNames ]);
 
     return (
-        <Flex gap={ 1 }>
+        <div className="flex gap-1 top-2 end-2">
             <Base classNames={ getClassNames } { ...rest }>
                 <div>{ day != '00' ? day : hour }{ day != '00' ? LocalizeText('countdown_clock_unit_days') : LocalizeText('countdown_clock_unit_hours') }</div>
             </Base>
-            <Base style={ { marginTop: '3px' } }>:</Base>
-            <Base classNames={ getClassNames } { ...rest }>
+            <div style={ { marginTop: '3px' } }>:</div>
+            <Base className="nitro-counter-time" { ...rest }>
                 <div>{ minutes }{ LocalizeText('countdown_clock_unit_minutes') }</div>
             </Base>
             <Base style={ { marginTop: '3px' } }>:</Base>
-            <Base classNames={ getClassNames } { ...rest }>
+            <Base className="nitro-counter-time" { ...rest }>
                 <div>{ seconds }{ LocalizeText('countdown_clock_unit_seconds') }</div>
             </Base>
             { children }
-        </Flex>
+        </div>
     );
 }
diff --git a/src/common/layout/LayoutFurniIconImageView.tsx b/src/common/layout/LayoutFurniIconImageView.tsx
index 4ee166d4..0dcf10dd 100644
--- a/src/common/layout/LayoutFurniIconImageView.tsx
+++ b/src/common/layout/LayoutFurniIconImageView.tsx
@@ -13,5 +13,5 @@ export const LayoutFurniIconImageView: FC<LayoutFurniIconImageViewProps> = props
 {
     const { productType = 's', productClassId = -1, extraData = '', ...rest } = props;
 
-    return <LayoutImage imageUrl={ GetImageIconUrlForProduct(productType, productClassId, extraData) } className="furni-image" { ...rest } />;
+    return <LayoutImage className="furni-image" imageUrl={ GetImageIconUrlForProduct(productType, productClassId, extraData) } { ...rest } />;
 }
diff --git a/src/common/layout/LayoutGiftTagView.tsx b/src/common/layout/LayoutGiftTagView.tsx
index e8f2d785..9ad4f09c 100644
--- a/src/common/layout/LayoutGiftTagView.tsx
+++ b/src/common/layout/LayoutGiftTagView.tsx
@@ -19,19 +19,19 @@ export const LayoutGiftTagView: FC<LayoutGiftTagViewProps> = props =>
     const { figure = null, userName = null, message = null, editable = false, onChange = null } = props;
     
     return (
-        <Flex overflow="hidden" className="nitro-gift-card text-black">
-            <div className="d-flex align-items-center justify-content-center gift-face flex-shrink-0">
+        <Flex className="nitro-gift-card text-black" overflow="hidden">
+            <div className="flex items-center justify-center gift-face flex-shrink-0">
                 { !userName && <div className="gift-incognito"></div> }
                 { figure && <div className="gift-avatar">
-                    <LayoutAvatarImageView figure={ figure } direction={ 2 } headOnly={ true } />
+                    <LayoutAvatarImageView direction={ 2 } figure={ figure } headOnly={ true } />
                 </div> }
             </div>
-            <Flex overflow="hidden" className="w-100 pt-4 pb-4 pe-4 ps-3">
-                <Column grow overflow="auto" justifyContent="between">
+            <Flex className="w-100 pt-4 pb-4 pe-4 ps-3" overflow="hidden">
+                <Column className="flex-grow-1" justifyContent="between" overflow="auto">
                     { !editable &&
                         <Text textBreak className="gift-message">{ message }</Text> }
                     { editable && (onChange !== null) &&
-                        <textarea className="gift-message h-100" maxLength={ 140 } value={ message } onChange={ (e) => onChange(e.target.value) } placeholder={ LocalizeText('catalog.gift_wrapping_new.message_hint') }></textarea> }
+                        <textarea className="gift-message h-100" maxLength={ 140 } placeholder={ LocalizeText('catalog.gift_wrapping_new.message_hint') } value={ message } onChange={ (e) => onChange(e.target.value) }></textarea> }
                     { userName &&
                         <Text italics textEnd className="pe-1">{ LocalizeText('catalog.gift_wrapping_new.message_from', [ 'name' ], [ userName ]) }</Text> }
                 </Column>
diff --git a/src/common/layout/LayoutGridItem.tsx b/src/common/layout/LayoutGridItem.tsx
index e1a32e5a..90d5824b 100644
--- a/src/common/layout/LayoutGridItem.tsx
+++ b/src/common/layout/LayoutGridItem.tsx
@@ -59,7 +59,7 @@ export const LayoutGridItem: FC<LayoutGridItemProps> = props =>
     }, [ style, itemImage, itemColor, itemUniqueSoldout, itemUniqueNumber ]);
 
     return (
-        <Column center={ center } pointer position={ position } overflow={ overflow } column={ column } classNames={ getClassNames } style={ getStyle } { ...rest }>
+        <Column pointer center={ center } classNames={ getClassNames } column={ column } overflow={ overflow } position={ position } style={ getStyle } { ...rest }>
             { (itemCount > itemCountMinimum) &&
                 <LayoutItemCountView count={ itemCount } /> }
             { (itemUniqueNumber > 0) && 
diff --git a/src/common/layout/LayoutImage.tsx b/src/common/layout/LayoutImage.tsx
index e6c6228e..481ce2f1 100644
--- a/src/common/layout/LayoutImage.tsx
+++ b/src/common/layout/LayoutImage.tsx
@@ -9,5 +9,5 @@ export const LayoutImage: FC<LayoutImageProps> = props =>
 {
     const { imageUrl = null, className = '', ...rest } = props;
 
-    return <img src={ imageUrl } className={ 'no-select ' + className } alt="" { ...rest } />;
+    return <img alt="" className={ 'no-select ' + className } src={ imageUrl } { ...rest } />;
 }
diff --git a/src/common/layout/LayoutItemCountView.tsx b/src/common/layout/LayoutItemCountView.tsx
index 5211ff8d..5fbc6d12 100644
--- a/src/common/layout/LayoutItemCountView.tsx
+++ b/src/common/layout/LayoutItemCountView.tsx
@@ -20,7 +20,7 @@ export const LayoutItemCountView: FC<LayoutItemCountViewProps> = props =>
     }, [ classNames ]);
 
     return (
-        <Base position="absolute" classNames={ getClassNames } { ...rest }>
+        <Base classNames={ getClassNames } position="absolute" { ...rest }>
             { count }
             { children }
         </Base>
diff --git a/src/common/layout/LayoutMiniCameraView.tsx b/src/common/layout/LayoutMiniCameraView.tsx
index 29156d84..9fef7112 100644
--- a/src/common/layout/LayoutMiniCameraView.tsx
+++ b/src/common/layout/LayoutMiniCameraView.tsx
@@ -34,7 +34,7 @@ export const LayoutMiniCameraView: FC<LayoutMiniCameraViewProps> = props =>
         <DraggableWindow handleSelector=".nitro-room-thumbnail-camera">
             <div className="nitro-room-thumbnail-camera px-2">
                 <div ref={ elementRef } className={ 'camera-frame' } />
-                <div className="d-flex align-items-end h-100 pb-2">
+                <div className="flex align-items-end h-100 pb-2">
                     <button className="btn btn-sm btn-danger w-100 mb-1 me-2" onClick={ onClose }>{ LocalizeText('cancel') }</button>
                     <button className="btn btn-sm btn-success w-100 mb-1" onClick={ takePicture }>{ LocalizeText('navigator.thumbeditor.save') }</button>
                 </div>
diff --git a/src/common/layout/LayoutNotificationAlertView.tsx b/src/common/layout/LayoutNotificationAlertView.tsx
index 8db771af..cdff942d 100644
--- a/src/common/layout/LayoutNotificationAlertView.tsx
+++ b/src/common/layout/LayoutNotificationAlertView.tsx
@@ -27,7 +27,7 @@ export const LayoutNotificationAlertView: FC<LayoutNotificationAlertViewProps> =
     return (
         <NitroCardView classNames={ getClassNames } theme="primary-slim" { ...rest }>
             <NitroCardHeaderView headerText={ title } onCloseClick={ onClose } />
-            <NitroCardContentView grow justifyContent="between" overflow="hidden" className="text-black" gap={ 0 }>
+            <NitroCardContentView grow className="text-black" gap={ 0 } justifyContent="between" overflow="hidden">
                 { children }
             </NitroCardContentView>
         </NitroCardView>
diff --git a/src/common/layout/LayoutNotificationBubbleView.tsx b/src/common/layout/LayoutNotificationBubbleView.tsx
index 256837d0..43f98eab 100644
--- a/src/common/layout/LayoutNotificationBubbleView.tsx
+++ b/src/common/layout/LayoutNotificationBubbleView.tsx
@@ -45,8 +45,8 @@ export const LayoutNotificationBubbleView: FC<LayoutNotificationBubbleViewProps>
     }, [ fadesOut, timeoutMs, onClose ]);
 
     return (
-        <TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ isVisible } timeout={ 300 }>
-            <Flex overflow={ overflow } classNames={ getClassNames } onClick={ onClose } { ...rest } />
+        <TransitionAnimation inProp={ isVisible } timeout={ 300 } type={ TransitionAnimationTypes.FADE_IN }>
+            <Flex classNames={ getClassNames } overflow={ overflow } onClick={ onClose } { ...rest } />
         </TransitionAnimation>
     );
 }
diff --git a/src/common/layout/LayoutPrizeProductImageView.tsx b/src/common/layout/LayoutPrizeProductImageView.tsx
index 206c7a80..3547d971 100644
--- a/src/common/layout/LayoutPrizeProductImageView.tsx
+++ b/src/common/layout/LayoutPrizeProductImageView.tsx
@@ -19,7 +19,7 @@ export const LayoutPrizeProductImageView: FC<LayoutPrizeProductImageViewProps> =
     {
         case ProductTypeEnum.WALL:
         case ProductTypeEnum.FLOOR:
-            return <LayoutFurniImageView productType={ productType } productClassId={ classId } />
+            return <LayoutFurniImageView productClassId={ classId } productType={ productType } />
         case ProductTypeEnum.BADGE:
             return <LayoutBadgeImageView badgeCode={ extraParam }/>
         case ProductTypeEnum.HABBO_CLUB:
diff --git a/src/common/layout/LayoutProgressBar.tsx b/src/common/layout/LayoutProgressBar.tsx
index 9b5fb96d..7ab720dd 100644
--- a/src/common/layout/LayoutProgressBar.tsx
+++ b/src/common/layout/LayoutProgressBar.tsx
@@ -1,7 +1,5 @@
 import { FC, useMemo } from 'react';
-import { Base } from '../Base';
 import { Column, ColumnProps } from '../Column';
-import { Flex } from '../Flex';
 
 interface LayoutProgressBarProps extends ColumnProps
 {
@@ -24,10 +22,10 @@ export const LayoutProgressBar: FC<LayoutProgressBarProps> = props =>
     }, [ classNames ]);
 
     return (
-        <Column position={ position } justifyContent={ justifyContent } classNames={ getClassNames } { ...rest }>
+        <Column classNames={ getClassNames } justifyContent={ justifyContent } position={ position } { ...rest }>
             { text && (text.length > 0) &&
-                <Flex fit center position="absolute" className="nitro-progress-bar-text small">{ text }</Flex> }
-            <Base className="nitro-progress-bar-inner" style={ { width: (~~((((progress - 0) * (100 - 0)) / (maxProgress - 0)) + 0) + '%') } } />
+                <div className="flex items-center justify-center size-full p-absolute nitro-progress-bar-text small">{ text }</div> }
+            <div className="nitro-progress-bar-inner" style={ { width: (~~((((progress - 0) * (100 - 0)) / (maxProgress - 0)) + 0) + '%') } } />
             { children }
         </Column>
     );
diff --git a/src/common/layout/LayoutRoomThumbnailView.tsx b/src/common/layout/LayoutRoomThumbnailView.tsx
index 144c1f2c..d8bd373d 100644
--- a/src/common/layout/LayoutRoomThumbnailView.tsx
+++ b/src/common/layout/LayoutRoomThumbnailView.tsx
@@ -29,7 +29,7 @@ export const LayoutRoomThumbnailView: FC<LayoutRoomThumbnailViewProps> = props =
     }, [ customUrl, roomId ]);
 
     return (
-        <Base shrink={ shrink } overflow={ overflow } classNames={ getClassNames } { ...rest }>
+        <Base classNames={ getClassNames } overflow={ overflow } shrink={ shrink } { ...rest }>
             { getImageUrl && <img alt="" src={ getImageUrl } /> }
             { children }
         </Base>
diff --git a/src/common/layout/LayoutTrophyView.tsx b/src/common/layout/LayoutTrophyView.tsx
index a65cd952..4a7a8999 100644
--- a/src/common/layout/LayoutTrophyView.tsx
+++ b/src/common/layout/LayoutTrophyView.tsx
@@ -22,9 +22,9 @@ export const LayoutTrophyView: FC<LayoutTrophyViewProps> = props =>
 
     return (
         <DraggableWindow handleSelector=".drag-handler">
-            <Column gap={ 0 } alignItems="center" className={ `nitro-layout-trophy trophy-${ color }` }>
-                <Flex center fullWidth position="relative" className="trophy-header drag-handler">
-                    <Base position="absolute" pointer className="trophy-close" onClick={ onCloseClick } />
+            <Column alignItems="center" className={ `nitro-layout-trophy trophy-${ color }` } gap={ 0 }>
+                <Flex center fullWidth className="trophy-header drag-handler" position="relative">
+                    <Base pointer className="trophy-close" position="absolute" onClick={ onCloseClick } />
                     <Text bold>{ LocalizeText('widget.furni.trophy.title') }</Text>
                 </Flex>
                 <Column className="trophy-content py-1" gap={ 1 }>
@@ -32,7 +32,7 @@ export const LayoutTrophyView: FC<LayoutTrophyViewProps> = props =>
                         <Text bold>{ customTitle }</Text> }
                     { message }
                 </Column>
-                <Flex alignItems="center" justifyContent="between" className="trophy-footer mt-1">
+                <Flex alignItems="center" className="trophy-footer mt-1" justifyContent="between">
                     <Text bold>{ date }</Text>
                     <Text bold>{ senderName }</Text>
                 </Flex>
diff --git a/src/common/layout/limited-edition/LayoutLimitedEditionCompletePlateView.tsx b/src/common/layout/limited-edition/LayoutLimitedEditionCompletePlateView.tsx
index c83e2307..92eafa19 100644
--- a/src/common/layout/limited-edition/LayoutLimitedEditionCompletePlateView.tsx
+++ b/src/common/layout/limited-edition/LayoutLimitedEditionCompletePlateView.tsx
@@ -2,7 +2,6 @@ import { FC, useMemo } from 'react';
 import { LocalizeText } from '../../../api';
 import { Base, BaseProps } from '../../Base';
 import { Column } from '../../Column';
-import { Flex } from '../../Flex';
 import { LayoutLimitedEditionStyledNumberView } from './LayoutLimitedEditionStyledNumberView';
 
 interface LayoutLimitedEditionCompletePlateViewProps extends BaseProps<HTMLDivElement>
@@ -27,14 +26,14 @@ export const LayoutLimitedEditionCompletePlateView: FC<LayoutLimitedEditionCompl
     return (
         <Base classNames={ getClassNames } { ...rest }>
             <Column className="plate-container" gap={ 0 }>
-                <Flex justifyContent="between" alignItems="center">
+                <div className="flex justify-content-between items-center">
                     { LocalizeText('unique.items.left') }
                     <div><LayoutLimitedEditionStyledNumberView value={ uniqueLimitedItemsLeft } /></div>
-                </Flex>
-                <Flex justifyContent="between" alignItems="center">
+                </div>
+                <div className="flex justify-content-between items-center">
                     { LocalizeText('unique.items.number.sold') }
                     <div><LayoutLimitedEditionStyledNumberView value={ uniqueLimitedSeriesSize } /></div>
-                </Flex>
+                </div>
             </Column>
         </Base>
     );
diff --git a/src/components/main/MainView.tsx b/src/components/MainView.tsx
similarity index 61%
rename from src/components/main/MainView.tsx
rename to src/components/MainView.tsx
index 5fc3b1f9..673aa310 100644
--- a/src/components/main/MainView.tsx
+++ b/src/components/MainView.tsx
@@ -1,31 +1,31 @@
 import { AddLinkEventTracker, GetCommunication, HabboWebTools, ILinkEventTracker, RemoveLinkEventTracker, RoomSessionEvent } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
-import { Base, TransitionAnimation, TransitionAnimationTypes } from '../../common';
-import { useNitroEvent } from '../../hooks';
-import { AchievementsView } from '../achievements/AchievementsView';
-import { AvatarEditorView } from '../avatar-editor';
-import { CameraWidgetView } from '../camera/CameraWidgetView';
-import { CampaignView } from '../campaign/CampaignView';
-import { CatalogView } from '../catalog/CatalogView';
-import { ChatHistoryView } from '../chat-history/ChatHistoryView';
-import { FloorplanEditorView } from '../floorplan-editor/FloorplanEditorView';
-import { FriendsView } from '../friends/FriendsView';
-import { GameCenterView } from '../game-center/GameCenterView';
-import { GroupsView } from '../groups/GroupsView';
-import { GuideToolView } from '../guide-tool/GuideToolView';
-import { HcCenterView } from '../hc-center/HcCenterView';
-import { HelpView } from '../help/HelpView';
-import { HotelView } from '../hotel-view/HotelView';
-import { InventoryView } from '../inventory/InventoryView';
-import { ModToolsView } from '../mod-tools/ModToolsView';
-import { NavigatorView } from '../navigator/NavigatorView';
-import { NitropediaView } from '../nitropedia/NitropediaView';
-import { RightSideView } from '../right-side/RightSideView';
-import { RoomView } from '../room/RoomView';
-import { ToolbarView } from '../toolbar/ToolbarView';
-import { UserProfileView } from '../user-profile/UserProfileView';
-import { UserSettingsView } from '../user-settings/UserSettingsView';
-import { WiredView } from '../wired/WiredView';
+import { TransitionAnimation, TransitionAnimationTypes } from '../common';
+import { useNitroEvent } from '../hooks';
+import { AchievementsView } from './achievements/AchievementsView';
+import { AvatarEditorView } from './avatar-editor';
+import { CameraWidgetView } from './camera/CameraWidgetView';
+import { CampaignView } from './campaign/CampaignView';
+import { CatalogView } from './catalog/CatalogView';
+import { ChatHistoryView } from './chat-history/ChatHistoryView';
+import { FloorplanEditorView } from './floorplan-editor/FloorplanEditorView';
+import { FriendsView } from './friends/FriendsView';
+import { GameCenterView } from './game-center/GameCenterView';
+import { GroupsView } from './groups/GroupsView';
+import { GuideToolView } from './guide-tool/GuideToolView';
+import { HcCenterView } from './hc-center/HcCenterView';
+import { HelpView } from './help/HelpView';
+import { HotelView } from './hotel-view/HotelView';
+import { InventoryView } from './inventory/InventoryView';
+import { ModToolsView } from './mod-tools/ModToolsView';
+import { NavigatorView } from './navigator/NavigatorView';
+import { NitropediaView } from './nitropedia/NitropediaView';
+import { RightSideView } from './right-side/RightSideView';
+import { RoomView } from './room/RoomView';
+import { ToolbarView } from './toolbar/ToolbarView';
+import { UserProfileView } from './user-profile/UserProfileView';
+import { UserSettingsView } from './user-settings/UserSettingsView';
+import { WiredView } from './wired/WiredView';
 
 export const MainView: FC<{}> = props =>
 {
@@ -79,8 +79,8 @@ export const MainView: FC<{}> = props =>
     }, []);
 
     return (
-        <Base fit>
-            <TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ landingViewVisible } timeout={ 300 }>
+        <>
+            <TransitionAnimation inProp={ landingViewVisible } timeout={ 300 } type={ TransitionAnimationTypes.FADE_IN }>
                 <HotelView />
             </TransitionAnimation>
             <ToolbarView isInRoom={ !landingViewVisible } />
@@ -106,6 +106,6 @@ export const MainView: FC<{}> = props =>
             <CampaignView />
             <GameCenterView />
             <FloorplanEditorView />
-        </Base>
+        </>
     );
 }
diff --git a/src/components/achievements/AchievementsView.tsx b/src/components/achievements/AchievementsView.tsx
index 3af9b982..6d52c5da 100644
--- a/src/components/achievements/AchievementsView.tsx
+++ b/src/components/achievements/AchievementsView.tsx
@@ -1,7 +1,7 @@
 import { AddLinkEventTracker, ILinkEventTracker, RemoveLinkEventTracker } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { AchievementUtilities, LocalizeText } from '../../api';
-import { Base, Column, LayoutImage, LayoutProgressBar, NitroCardContentView, NitroCardHeaderView, NitroCardSubHeaderView, NitroCardView, Text } from '../../common';
+import { Column, LayoutImage, LayoutProgressBar, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common';
 import { useAchievements } from '../../hooks';
 import { AchievementCategoryView } from './views/AchievementCategoryView';
 import { AchievementsCategoryListView } from './views/category-list/AchievementsCategoryListView';
@@ -44,24 +44,24 @@ export const AchievementsView: FC<{}> = props =>
     if(!isVisible) return null;
 
     return (
-        <NitroCardView uniqueKey="achievements" className="nitro-achievements" theme="primary-slim">
+        <NitroCardView className="nitro-achievements" theme="primary-slim" uniqueKey="achievements">
             <NitroCardHeaderView headerText={ LocalizeText('inventory.achievements') } onCloseClick={ event => setIsVisible(false) } />
             { selectedCategory &&
-                <NitroCardSubHeaderView position="relative" className="justify-content-center align-items-center cursor-pointer" gap={ 3 }>
-                    <Base onClick={ event => setSelectedCategoryCode(null) } className="nitro-achievements-back-arrow" />
-                    <Column grow gap={ 0 }>
-                        <Text fontSize={ 4 } fontWeight="bold" className="text-small">{ LocalizeText(`quests.${ selectedCategory.code }.name`) }</Text>
+                <div className="position-relative gap-3 justify-center items-center cursor-pointer">
+                    <div className="nitro-achievements-back-arrow" onClick={ event => setSelectedCategoryCode(null) } />
+                    <Column className="flex-grow-1" gap={ 0 }>
+                        <Text className="text-small" fontSize={ 4 } fontWeight="bold">{ LocalizeText(`quests.${ selectedCategory.code }.name`) }</Text>
                         <Text>{ LocalizeText('achievements.details.categoryprogress', [ 'progress', 'limit' ], [ selectedCategory.getProgress().toString(), selectedCategory.getMaxProgress().toString() ]) }</Text>
                     </Column>
                     <LayoutImage imageUrl={ AchievementUtilities.getAchievementCategoryImageUrl(selectedCategory, null,true) } />
-                </NitroCardSubHeaderView> }
+                </div> }
             <NitroCardContentView gap={ 1 }>
                 { !selectedCategory &&
                     <>
                         <AchievementsCategoryListView categories={ achievementCategories } selectedCategoryCode={ selectedCategoryCode } setSelectedCategoryCode={ setSelectedCategoryCode } />
-                        <Column grow justifyContent="end" gap={ 1 }>
-                            <Text small center>{ LocalizeText('achievements.categories.score', [ 'score' ], [ achievementScore.toString() ]) }</Text>
-                            <LayoutProgressBar text={ LocalizeText('achievements.categories.totalprogress', [ 'progress', 'limit' ], [ getProgress.toString(), getMaxProgress.toString() ]) } progress={ getProgress } maxProgress={ getMaxProgress } />
+                        <Column className="flex-grow-1" gap={ 1 } justifyContent="end">
+                            <Text center small>{ LocalizeText('achievements.categories.score', [ 'score' ], [ achievementScore.toString() ]) }</Text>
+                            <LayoutProgressBar maxProgress={ getMaxProgress } progress={ getProgress } text={ LocalizeText('achievements.categories.totalprogress', [ 'progress', 'limit' ], [ getProgress.toString(), getMaxProgress.toString() ]) } />
                         </Column>
                     </> }
                 { selectedCategory &&
diff --git a/src/components/achievements/views/AchievementDetailsView.tsx b/src/components/achievements/views/AchievementDetailsView.tsx
index b04fa183..c7eb3082 100644
--- a/src/components/achievements/views/AchievementDetailsView.tsx
+++ b/src/components/achievements/views/AchievementDetailsView.tsx
@@ -18,24 +18,24 @@ export const AchievementDetailsView: FC<AchievementDetailsViewProps> = props =>
     return (
         <Flex shrink className="bg-muted rounded p-2 text-black" gap={ 2 } overflow="hidden">
             <Column center gap={ 1 }>
-                <AchievementBadgeView className="nitro-achievements-badge-image" achievement={ achievement } scale={ 2 } />
+                <AchievementBadgeView achievement={ achievement } className="nitro-achievements-badge-image" scale={ 2 } />
                 <Text fontWeight="bold">
                     { LocalizeText('achievements.details.level', [ 'level', 'limit' ], [ AchievementUtilities.getAchievementLevel(achievement).toString(), achievement.levelCount.toString() ]) }
                 </Text>
             </Column>
             <Column fullWidth justifyContent="center" overflow="hidden">
-                <Column gap={ 1 }>
-                    <Text fontWeight="bold" truncate>
+                <div className="flex flex-column gap-1">
+                    <Text truncate fontWeight="bold">
                         { LocalizeBadgeName(AchievementUtilities.getAchievementBadgeCode(achievement)) }
                     </Text>
                     <Text textBreak>
                         { LocalizeBadgeDescription(AchievementUtilities.getAchievementBadgeCode(achievement)) }
                     </Text>
-                </Column>
+                </div>
                 { ((achievement.levelRewardPoints > 0) || (achievement.scoreLimit > 0)) &&
-                    <Column gap={ 1 }>
+                    <div className="flex flex-column gap-1">
                         { (achievement.levelRewardPoints > 0) &&
-                            <Flex alignItems="center" gap={ 1 }>
+                            <div className="flex items-center gap-1">
                                 <Text truncate className="small">
                                     { LocalizeText('achievements.details.reward') }
                                 </Text>
@@ -43,10 +43,10 @@ export const AchievementDetailsView: FC<AchievementDetailsViewProps> = props =>
                                     { achievement.levelRewardPoints }
                                     <LayoutCurrencyIcon type={ achievement.levelRewardPointType } />
                                 </Flex>
-                            </Flex> }
+                            </div> }
                         { (achievement.scoreLimit > 0) &&
-                            <LayoutProgressBar text={ LocalizeText('achievements.details.progress', [ 'progress', 'limit' ], [ (achievement.currentPoints + achievement.scoreAtStartOfLevel).toString(), (achievement.scoreLimit + achievement.scoreAtStartOfLevel).toString() ]) } progress={ (achievement.currentPoints + achievement.scoreAtStartOfLevel) } maxProgress={ (achievement.scoreLimit + achievement.scoreAtStartOfLevel) } /> }
-                    </Column> }
+                            <LayoutProgressBar maxProgress={ (achievement.scoreLimit + achievement.scoreAtStartOfLevel) } progress={ (achievement.currentPoints + achievement.scoreAtStartOfLevel) } text={ LocalizeText('achievements.details.progress', [ 'progress', 'limit' ], [ (achievement.currentPoints + achievement.scoreAtStartOfLevel).toString(), (achievement.scoreLimit + achievement.scoreAtStartOfLevel).toString() ]) } /> }
+                    </div> }
             </Column>
         </Flex>
     )
diff --git a/src/components/achievements/views/achievement-list/AchievementListView.tsx b/src/components/achievements/views/achievement-list/AchievementListView.tsx
index f0095817..0433617a 100644
--- a/src/components/achievements/views/achievement-list/AchievementListView.tsx
+++ b/src/components/achievements/views/achievement-list/AchievementListView.tsx
@@ -13,7 +13,7 @@ export const AchievementListView: FC<AchievementListViewProps> = props =>
     const { achievements = null } = props;
 
     return (
-        <AutoGrid columnCount={ 6 } columnMinWidth={ 50 } columnMinHeight={ 50 }>
+        <AutoGrid columnCount={ 6 } columnMinHeight={ 50 } columnMinWidth={ 50 }>
             { achievements && (achievements.length > 0) && achievements.map((achievement, index) => <AchievementListItemView key={ index } achievement={ achievement } />) }
         </AutoGrid>
     );
diff --git a/src/components/achievements/views/category-list/AchievementsCategoryListItemView.tsx b/src/components/achievements/views/category-list/AchievementsCategoryListItemView.tsx
index 91b96c6e..a5453092 100644
--- a/src/components/achievements/views/category-list/AchievementsCategoryListItemView.tsx
+++ b/src/components/achievements/views/category-list/AchievementsCategoryListItemView.tsx
@@ -21,10 +21,10 @@ export const AchievementsCategoryListItemView: FC<AchievementCategoryListItemVie
     const getTotalUnseen = AchievementUtilities.getAchievementCategoryTotalUnseen(category);
 
     return (
-        <LayoutGridItem itemActive={ (selectedCategoryCode === category.code) } itemCount={ getTotalUnseen } itemCountMinimum={ 0 } gap={ 1 } onClick={ event => setSelectedCategoryCode(category.code) }>
-            <Text fullWidth center small className="pt-1">{ LocalizeText(`quests.${ category.code }.name`) }</Text>
-            <LayoutBackgroundImage position="relative" imageUrl={ getCategoryImage }>
-                <Text fullWidth center position="absolute" variant="white" style={ { fontSize: 12, bottom: 9 } }>{ progress } / { maxProgress }</Text>
+        <LayoutGridItem gap={ 1 } itemActive={ (selectedCategoryCode === category.code) } itemCount={ getTotalUnseen } itemCountMinimum={ 0 } onClick={ event => setSelectedCategoryCode(category.code) }>
+            <Text center fullWidth small className="pt-1">{ LocalizeText(`quests.${ category.code }.name`) }</Text>
+            <LayoutBackgroundImage imageUrl={ getCategoryImage } position="relative">
+                <Text center fullWidth position="absolute" style={ { fontSize: 12, bottom: 9 } } variant="white">{ progress } / { maxProgress }</Text>
             </LayoutBackgroundImage>
         </LayoutGridItem>
     );
diff --git a/src/components/achievements/views/category-list/AchievementsCategoryListView.tsx b/src/components/achievements/views/category-list/AchievementsCategoryListView.tsx
index ca362968..c4a421a7 100644
--- a/src/components/achievements/views/category-list/AchievementsCategoryListView.tsx
+++ b/src/components/achievements/views/category-list/AchievementsCategoryListView.tsx
@@ -15,7 +15,7 @@ export const AchievementsCategoryListView: FC<AchievementsCategoryListViewProps>
     const { categories = null, selectedCategoryCode = null, setSelectedCategoryCode = null } = props;
     
     return (
-        <AutoGrid columnCount={ 3 } columnMinWidth={ 90 } columnMinHeight={ 100 }>
+        <AutoGrid columnCount={ 3 } columnMinHeight={ 100 } columnMinWidth={ 90 }>
             { categories && (categories.length > 0) && categories.map((category, index) => <AchievementsCategoryListItemView key={ index } category={ category } selectedCategoryCode={ selectedCategoryCode } setSelectedCategoryCode={ setSelectedCategoryCode } /> ) }
         </AutoGrid>
     );
diff --git a/src/components/avatar-editor/AvatarEditorFigurePreviewView.tsx b/src/components/avatar-editor/AvatarEditorFigurePreviewView.tsx
index 9efae75c..0c0c0090 100644
--- a/src/components/avatar-editor/AvatarEditorFigurePreviewView.tsx
+++ b/src/components/avatar-editor/AvatarEditorFigurePreviewView.tsx
@@ -1,6 +1,6 @@
 import { AvatarDirectionAngle } from '@nitrots/nitro-renderer';
 import { FC, useState } from 'react';
-import { Base, Column, LayoutAvatarImageView } from '../../common';
+import { LayoutAvatarImageView } from '../../common';
 import { useAvatarEditor } from '../../hooks';
 import { AvatarEditorIcon } from './AvatarEditorIcon';
 
@@ -27,14 +27,14 @@ export const AvatarEditorFigurePreviewView: FC<{}> = props =>
     }
 
     return (
-        <Column className="figure-preview-container" overflow="hidden" position="relative">
-            <LayoutAvatarImageView figure={ getFigureString } direction={ direction } scale={ 2 } />
+        <div className="flex flex-column figure-preview-container overflow-hidden position-relative">
+            <LayoutAvatarImageView direction={ direction } figure={ getFigureString } scale={ 2 } />
             <AvatarEditorIcon className="avatar-spotlight" icon="spotlight" />
-            <Base className="avatar-shadow" />
-            <Base className="arrow-container">
-                <AvatarEditorIcon pointer icon="arrow-left" onClick={ event => rotateFigure(direction + 1) } />
-                <AvatarEditorIcon pointer icon="arrow-right" onClick={ event => rotateFigure(direction - 1) } />
-            </Base>
-        </Column>
+            <div className="avatar-shadow" />
+            <div className="arrow-container">
+                <AvatarEditorIcon icon="arrow-left" onClick={ event => rotateFigure(direction + 1) } />
+                <AvatarEditorIcon icon="arrow-right" onClick={ event => rotateFigure(direction - 1) } />
+            </div>
+        </div>
     );
 }
diff --git a/src/components/avatar-editor/AvatarEditorIcon.tsx b/src/components/avatar-editor/AvatarEditorIcon.tsx
index 878018ce..655e81a7 100644
--- a/src/components/avatar-editor/AvatarEditorIcon.tsx
+++ b/src/components/avatar-editor/AvatarEditorIcon.tsx
@@ -1,27 +1,27 @@
-import { FC, useMemo } from 'react';
-import { Base, BaseProps } from '../../common';
+import { DetailedHTMLProps, HTMLAttributes, PropsWithChildren, forwardRef } from 'react';
+import { classNames } from '../../common';
 
 type AvatarIconType = 'male' | 'female' | 'clear' | 'sellable' | string;
 
-export const AvatarEditorIcon: FC<{
+export const AvatarEditorIcon = forwardRef<HTMLDivElement, PropsWithChildren<{
     icon: AvatarIconType;
     selected?: boolean;
-} & BaseProps<HTMLDivElement>> = props =>
+}> & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>((props, ref) =>
 {
-    const { icon = null, selected = false, classNames = [], children = null, ...rest } = props;
+    const { icon = null, selected = false, className = null, ...rest } = props;
 
-    const getClassNames = useMemo(() =>
-    {
-        const newClassNames: string[] = [ 'nitro-avatar-editor-spritesheet' ];
+    return (
+        <div
+            ref={ ref }
+            className={ classNames(
+                'nitro-avatar-editor-spritesheet',
+                'cursor-pointer',
+                `${ icon }-icon`,
+                selected && 'selected',
+                className
+            ) }
+            { ...rest } />
+    );
+});
 
-        if(icon && icon.length) newClassNames.push(icon + '-icon');
-
-        if(selected) newClassNames.push('selected');
-
-        if(classNames.length) newClassNames.push(...classNames);
-
-        return newClassNames;
-    }, [ icon, selected, classNames ]);
-
-    return <Base classNames={ getClassNames } { ...rest } />
-}
+AvatarEditorIcon.displayName = 'AvatarEditorIcon';
diff --git a/src/components/avatar-editor/AvatarEditorModelView.tsx b/src/components/avatar-editor/AvatarEditorModelView.tsx
index 876ca72d..0575d995 100644
--- a/src/components/avatar-editor/AvatarEditorModelView.tsx
+++ b/src/components/avatar-editor/AvatarEditorModelView.tsx
@@ -1,7 +1,6 @@
 import { AvatarEditorFigureCategory, AvatarFigurePartType, FigureDataContainer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { IAvatarEditorCategory } from '../../api';
-import { Column, Flex, Grid } from '../../common';
 import { useAvatarEditor } from '../../hooks';
 import { AvatarEditorIcon } from './AvatarEditorIcon';
 import { AvatarEditorFigureSetView } from './figure-set';
@@ -47,35 +46,35 @@ export const AvatarEditorModelView: FC<{
     if(!activeCategory) return null;
 
     return (
-        <Grid>
-            <Column size={ 2 }>
+        <div className="flex gap-2 overflow-hidden">
+            <div className="flex flex-column col-2">
                 { (name === AvatarEditorFigureCategory.GENERIC) &&
                     <>
-                        <Flex center pointer className="category-item" onClick={ event => setGender(AvatarFigurePartType.MALE) }>
+                        <div className="category-item items-center justify-center cursor-pointer flex" onClick={ event => setGender(AvatarFigurePartType.MALE) }>
                             <AvatarEditorIcon icon="male" selected={ gender === FigureDataContainer.MALE } />
-                        </Flex>
-                        <Flex center pointer className="category-item" onClick={ event => setGender(AvatarFigurePartType.FEMALE) }>
+                        </div>
+                        <div className="category-item items-center justify-center cursor-pointer flex" onClick={ event => setGender(AvatarFigurePartType.FEMALE) }>
                             <AvatarEditorIcon icon="female" selected={ gender === FigureDataContainer.FEMALE } />
-                        </Flex>
+                        </div>
                     </> }
                 { (name !== AvatarEditorFigureCategory.GENERIC) && (categories.length > 0) && categories.map(category =>
                 {
                     return (
-                        <Flex center pointer key={ category.setType } className="category-item" onClick={ event => selectSet(category.setType) }>
+                        <div key={ category.setType } className="category-item items-center justify-center cursor-pointer flex" onClick={ event => selectSet(category.setType) }>
                             <AvatarEditorIcon icon={ category.setType } selected={ (activeSetType === category.setType) } />
-                        </Flex>
+                        </div>
                     );
                 }) }
-            </Column>
-            <Column size={ 5 } overflow="hidden">
-                <AvatarEditorFigureSetView category={ activeCategory } />
-            </Column>
-            <Column size={ 5 } overflow="hidden">
+            </div>
+            <div className="flex flex-column overflow-hidden col-5">
+                <AvatarEditorFigureSetView category={ activeCategory } columnCount={ 3 } />
+            </div>
+            <div className="flex flex-column overflow-hidden col-5">
                 { (maxPaletteCount >= 1) &&
-                    <AvatarEditorPaletteSetView category={ activeCategory } paletteIndex={ 0 } /> }
+                    <AvatarEditorPaletteSetView category={ activeCategory } columnCount={ 3 } paletteIndex={ 0 } /> }
                 { (maxPaletteCount === 2) &&
-                    <AvatarEditorPaletteSetView category={ activeCategory } paletteIndex={ 1 } /> }
-            </Column>
-        </Grid>
+                    <AvatarEditorPaletteSetView category={ activeCategory } columnCount={ 3 } paletteIndex={ 1 } /> }
+            </div>
+        </div>
     );
 }
diff --git a/src/components/avatar-editor/AvatarEditorView.tsx b/src/components/avatar-editor/AvatarEditorView.tsx
index db00b34c..727c0114 100644
--- a/src/components/avatar-editor/AvatarEditorView.tsx
+++ b/src/components/avatar-editor/AvatarEditorView.tsx
@@ -2,7 +2,7 @@ import { AddLinkEventTracker, AvatarEditorFigureCategory, GetSessionDataManager,
 import { FC, useEffect, useState } from 'react';
 import { FaDice, FaRedo, FaTrash } from 'react-icons/fa';
 import { AvatarEditorAction, LocalizeText, SendMessageComposer } from '../../api';
-import { Button, ButtonGroup, Column, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
+import { Button, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
 import { useAvatarEditor } from '../../hooks';
 import { AvatarEditorFigurePreviewView } from './AvatarEditorFigurePreviewView';
 import { AvatarEditorModelView } from './AvatarEditorModelView';
@@ -74,7 +74,7 @@ export const AvatarEditorView: FC<{}> = props =>
     if(!isVisible) return null;
 
     return (
-        <NitroCardView uniqueKey="avatar-editor" className="nitro-avatar-editor">
+        <NitroCardView className="nitro-avatar-editor" uniqueKey="avatar-editor">
             <NitroCardHeaderView headerText={ LocalizeText('avatareditor.title') } onCloseClick={ event => setIsVisible(false) } />
             <NitroCardTabsView>
                 { Object.keys(avatarModels).map(modelKey =>
@@ -89,17 +89,17 @@ export const AvatarEditorView: FC<{}> = props =>
                 }) }
             </NitroCardTabsView>
             <NitroCardContentView>
-                <Grid>
-                    <Column size={ 9 } overflow="hidden">
+                <div className="grid gap-2 overflow-hidden">
+                    <div className="flex flex-column col-9 overflow-hidden">
                         { ((activeModelKey.length > 0) && (activeModelKey !== AvatarEditorFigureCategory.WARDROBE)) &&
-                            <AvatarEditorModelView name={ activeModelKey } categories={ avatarModels[activeModelKey] } /> }
+                            <AvatarEditorModelView categories={ avatarModels[activeModelKey] } name={ activeModelKey } /> }
                         { (activeModelKey === AvatarEditorFigureCategory.WARDROBE) &&
                             <AvatarEditorWardrobeView /> }
-                    </Column>
-                    <Column size={ 3 } overflow="hidden">
+                    </div>
+                    <div className="flex flex-column col-3 overflow-hidden gap-1">
                         <AvatarEditorFigurePreviewView />
-                        <Column grow gap={ 1 }>
-                            <ButtonGroup>
+                        <div className="flex flex-column flex-grow-1 gap-1">
+                            <div className="btn-group">
                                 <Button variant="secondary" onClick={ event => processAction(AvatarEditorAction.ACTION_RESET) }>
                                     <FaRedo className="fa-icon" />
                                 </Button>
@@ -109,13 +109,13 @@ export const AvatarEditorView: FC<{}> = props =>
                                 <Button variant="secondary" onClick={ event => processAction(AvatarEditorAction.ACTION_RANDOMIZE) }>
                                     <FaDice className="fa-icon" />
                                 </Button>
-                            </ButtonGroup>
+                            </div>
                             <Button className="w-100" variant="success" onClick={ event => processAction(AvatarEditorAction.ACTION_SAVE) }>
                                 { LocalizeText('avatareditor.save') }
                             </Button>
-                        </Column>
-                    </Column>
-                </Grid>
+                        </div>
+                    </div>
+                </div>
             </NitroCardContentView>
         </NitroCardView>
     );
diff --git a/src/components/avatar-editor/AvatarEditorWardrobeView.tsx b/src/components/avatar-editor/AvatarEditorWardrobeView.tsx
index bd2800ea..81c41958 100644
--- a/src/components/avatar-editor/AvatarEditorWardrobeView.tsx
+++ b/src/components/avatar-editor/AvatarEditorWardrobeView.tsx
@@ -1,7 +1,7 @@
 import { GetAvatarRenderManager, IAvatarFigureContainer, SaveWardrobeOutfitMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback } from 'react';
 import { GetClubMemberLevel, GetConfigurationValue, LocalizeText, SendMessageComposer } from '../../api';
-import { Base, Button, Flex, InfiniteGrid, LayoutAvatarImageView, LayoutCurrencyIcon, LayoutGridItem } from '../../common';
+import { Button, InfiniteGrid, LayoutAvatarImageView, LayoutCurrencyIcon, LayoutGridItem } from '../../common';
 import { useAvatarEditor } from '../../hooks';
 
 export const AvatarEditorWardrobeView: FC<{}> = props =>
@@ -34,7 +34,7 @@ export const AvatarEditorWardrobeView: FC<{}> = props =>
     }, [ getFigureString, gender, savedFigures, setSavedFigures ]);
 
     return (
-        <InfiniteGrid rows={ savedFigures } columnCount={ 5 } overscan={ 5 } estimateSize={ 140 } itemRender={ (item: [ IAvatarFigureContainer, string ], index: number) =>
+        <InfiniteGrid columnCount={ 5 } estimateSize={ 140 } itemRender={ (item: [ IAvatarFigureContainer, string ], index: number) =>
         {
             const [ figureContainer, gender ] = item;
             
@@ -43,18 +43,18 @@ export const AvatarEditorWardrobeView: FC<{}> = props =>
             if(figureContainer) clubLevel = GetAvatarRenderManager().getFigureClubLevel(figureContainer, gender);
 
             return (
-                <LayoutGridItem position="relative" overflow="hidden" className="nitro-avatar-editor-wardrobe-figure-preview">
+                <LayoutGridItem className="nitro-avatar-editor-wardrobe-figure-preview" overflow="hidden" position="relative">
                     { figureContainer &&
-                    <LayoutAvatarImageView figure={ figureContainer.getFigureString() } gender={ gender } direction={ 2 } /> }
-                    <Base className="avatar-shadow" />
+                    <LayoutAvatarImageView direction={ 2 } figure={ figureContainer.getFigureString() } gender={ gender } /> }
+                    <div className="avatar-shadow" />
                     { !hcDisabled && (clubLevel > 0) && <LayoutCurrencyIcon className="position-absolute top-1 start-1" type="hc" /> }
-                    <Flex gap={ 1 } className="button-container">
-                        <Button variant="link" fullWidth onClick={ event => saveFigureAtWardrobeIndex(index) }>{ LocalizeText('avatareditor.wardrobe.save') }</Button>
+                    <div className="flex gap-1 button-container">
+                        <Button fullWidth variant="link" onClick={ event => saveFigureAtWardrobeIndex(index) }>{ LocalizeText('avatareditor.wardrobe.save') }</Button>
                         { figureContainer &&
-                        <Button variant="link" fullWidth onClick={ event => wearFigureAtIndex(index) } disabled={ (clubLevel > GetClubMemberLevel()) }>{ LocalizeText('widget.generic_usable.button.use') }</Button> }
-                    </Flex>
+                        <Button fullWidth disabled={ (clubLevel > GetClubMemberLevel()) } variant="link" onClick={ event => wearFigureAtIndex(index) }>{ LocalizeText('widget.generic_usable.button.use') }</Button> }
+                    </div>
                 </LayoutGridItem>
             )
-        } } />
+        } } overscan={ 5 } rows={ savedFigures } />
     );
 }
diff --git a/src/components/avatar-editor/figure-set/AvatarEditorFigureSetItemView.tsx b/src/components/avatar-editor/figure-set/AvatarEditorFigureSetItemView.tsx
index 955d7bc9..6502cee5 100644
--- a/src/components/avatar-editor/figure-set/AvatarEditorFigureSetItemView.tsx
+++ b/src/components/avatar-editor/figure-set/AvatarEditorFigureSetItemView.tsx
@@ -9,9 +9,10 @@ export const AvatarEditorFigureSetItemView: FC<{
     setType: string;
     partItem: IAvatarEditorCategoryPartItem;
     isSelected: boolean;
+    width?: string;
 } & LayoutGridItemProps> = props =>
 {
-    const { setType = null, partItem = null, isSelected = false, ...rest } = props;
+    const { setType = null, partItem = null, isSelected = false, width = '100%', ...rest } = props;
     const [ assetUrl, setAssetUrl ] = useState<string>('');
     const { selectedColorParts = null, getFigureStringWithFace = null } = useAvatarEditor();
 
@@ -45,10 +46,10 @@ export const AvatarEditorFigureSetItemView: FC<{
     if(!partItem) return null;
 
     return (
-        <LayoutGridItem itemImage={ (partItem.isClear ? undefined : assetUrl) } itemActive={ isSelected } style={ { width: '100%', flex: '1', backgroundPosition: (setType === AvatarFigurePartType.HEAD) ? 'center -35px' : 'center' } } { ...rest }>
+        <LayoutGridItem itemActive={ isSelected } itemImage={ (partItem.isClear ? undefined : assetUrl) } style={ { flex: '1', backgroundPosition: (setType === AvatarFigurePartType.HEAD) ? 'center -35px' : 'center' } } { ...rest }>
             { !partItem.isClear && isHC && <LayoutCurrencyIcon className="position-absolute end-1 bottom-1" type="hc" /> }
             { partItem.isClear && <AvatarEditorIcon icon="clear" /> }
-            { !partItem.isClear && partItem.partSet.isSellable && <AvatarEditorIcon icon="sellable" position="absolute" className="end-1 bottom-1" /> }
+            { !partItem.isClear && partItem.partSet.isSellable && <AvatarEditorIcon className="end-1 bottom-1 position-absolute" icon="sellable" /> }
         </LayoutGridItem>
     );
 }
diff --git a/src/components/avatar-editor/figure-set/AvatarEditorFigureSetView.tsx b/src/components/avatar-editor/figure-set/AvatarEditorFigureSetView.tsx
index 57413de7..c25607cf 100644
--- a/src/components/avatar-editor/figure-set/AvatarEditorFigureSetView.tsx
+++ b/src/components/avatar-editor/figure-set/AvatarEditorFigureSetView.tsx
@@ -5,10 +5,11 @@ import { useAvatarEditor } from '../../../hooks';
 import { AvatarEditorFigureSetItemView } from './AvatarEditorFigureSetItemView';
 
 export const AvatarEditorFigureSetView: FC<{
-    category: IAvatarEditorCategory
+    category: IAvatarEditorCategory;
+    columnCount: number;
 }> = props =>
 {
-    const { category = null } = props;
+    const { category = null, columnCount = 3 } = props;
     const { selectedParts = null, selectEditorPart } = useAvatarEditor();
 
     const isPartItemSelected = (partItem: IAvatarEditorCategoryPartItem) =>
@@ -28,13 +29,13 @@ export const AvatarEditorFigureSetView: FC<{
     }
 
     return (
-        <InfiniteGrid rows={ category.partItems } columnCount={ 3 } overscan={ 5 } itemRender={ (item: IAvatarEditorCategoryPartItem) =>
+        <InfiniteGrid columnCount={ columnCount } itemRender={ (item: IAvatarEditorCategoryPartItem) =>
         {
             if(!item) return null;
 
             return (
-                <AvatarEditorFigureSetItemView setType={ category.setType } partItem={ item } isSelected={ isPartItemSelected(item) } onClick={ event => selectEditorPart(category.setType, item.partSet?.id ?? -1) } />
+                <AvatarEditorFigureSetItemView isSelected={ isPartItemSelected(item) } partItem={ item } setType={ category.setType } width={ `calc(100% / ${ columnCount }` } onClick={ event => selectEditorPart(category.setType, item.partSet?.id ?? -1) } />
             )
-        } } />
+        } } overscan={ columnCount } rows={ category.partItems } />
     );
 }
diff --git a/src/components/avatar-editor/palette-set/AvatarEditorPaletteSetItemView.tsx b/src/components/avatar-editor/palette-set/AvatarEditorPaletteSetItemView.tsx
index 0f43efb8..fad58010 100644
--- a/src/components/avatar-editor/palette-set/AvatarEditorPaletteSetItemView.tsx
+++ b/src/components/avatar-editor/palette-set/AvatarEditorPaletteSetItemView.tsx
@@ -7,16 +7,17 @@ export const AvatarEditorPaletteSetItem: FC<{
     setType: string;
     partColor: IPartColor;
     isSelected: boolean;
+    width?: string;
 } & LayoutGridItemProps> = props =>
 {
-    const { setType = null, partColor = null, isSelected = false, ...rest } = props;
+    const { setType = null, partColor = null, isSelected = false, width = '100%', ...rest } = props;
 
     if(!partColor) return null;
     
     const isHC = !GetConfigurationValue<boolean>('hc.disabled', false) && (partColor.clubLevel > 0);
 
     return (
-        <LayoutGridItem itemHighlight itemColor={ ColorConverter.int2rgb(partColor.rgb) } itemActive={ isSelected } className="clear-bg" { ...rest }>
+        <LayoutGridItem itemHighlight className="clear-bg" itemActive={ isSelected } itemColor={ ColorConverter.int2rgb(partColor.rgb) } { ...rest }>
             { isHC && <LayoutCurrencyIcon className="position-absolute end-1 bottom-1" type="hc" /> }
         </LayoutGridItem>
     );
diff --git a/src/components/avatar-editor/palette-set/AvatarEditorPaletteSetView.tsx b/src/components/avatar-editor/palette-set/AvatarEditorPaletteSetView.tsx
index 45b32ddd..fb09c169 100644
--- a/src/components/avatar-editor/palette-set/AvatarEditorPaletteSetView.tsx
+++ b/src/components/avatar-editor/palette-set/AvatarEditorPaletteSetView.tsx
@@ -6,11 +6,12 @@ import { useAvatarEditor } from '../../../hooks';
 import { AvatarEditorPaletteSetItem } from './AvatarEditorPaletteSetItemView';
 
 export const AvatarEditorPaletteSetView: FC<{
-    category: IAvatarEditorCategory,
+    category: IAvatarEditorCategory;
     paletteIndex: number;
+    columnCount: number;
 }> = props =>
 {
-    const { category = null, paletteIndex = -1 } = props;
+    const { category = null, paletteIndex = -1, columnCount = 3 } = props;
     const { selectedColorParts = null, selectEditorColor = null } = useAvatarEditor();
 
     const isPartColorSelected = (partColor: IPartColor) =>
@@ -23,13 +24,13 @@ export const AvatarEditorPaletteSetView: FC<{
     }
 
     return (
-        <InfiniteGrid rows={ category.colorItems[paletteIndex] } columnCount={ 5 } overscan={ 5 } itemRender={ (item: IPartColor) =>
+        <InfiniteGrid columnCount={ columnCount } itemRender={ (item: IPartColor) =>
         {
             if(!item) return null;
 
             return (
-                <AvatarEditorPaletteSetItem setType={ category.setType } partColor={ item } isSelected={ isPartColorSelected(item) } onClick={ event => selectEditorColor(category.setType, paletteIndex, item.id) } />
+                <AvatarEditorPaletteSetItem isSelected={ isPartColorSelected(item) } partColor={ item } setType={ category.setType } width={ `calc(100% / ${ columnCount }` } onClick={ event => selectEditorColor(category.setType, paletteIndex, item.id) } />
             )
-        } } />
+        } } overscan={ columnCount } rows={ category.colorItems[paletteIndex] } />
     );
 }
diff --git a/src/components/camera/CameraWidgetView.tsx b/src/components/camera/CameraWidgetView.tsx
index 62af9ca2..15aa32ad 100644
--- a/src/components/camera/CameraWidgetView.tsx
+++ b/src/components/camera/CameraWidgetView.tsx
@@ -88,9 +88,9 @@ export const CameraWidgetView: FC<{}> = props =>
 
     return (
         <>
-            { (mode === MODE_CAPTURE) && <CameraWidgetCaptureView onClose={ () => processAction('close') } onEdit={ () => processAction('edit') } onDelete={ () => processAction('delete') } /> }
-            { (mode === MODE_EDITOR) && <CameraWidgetEditorView picture={ cameraRoll[selectedPictureIndex] } myLevel={ myLevel } onClose={ () => processAction('close') } onCancel={ () => processAction('editor_cancel') } onCheckout={ checkoutPictureUrl } availableEffects={ availableEffects } /> }
-            { (mode === MODE_CHECKOUT) && <CameraWidgetCheckoutView base64Url={ base64Url } onCloseClick={ () => processAction('close') } onCancelClick={ () => processAction('editor_cancel') } price={ price }></CameraWidgetCheckoutView> }
+            { (mode === MODE_CAPTURE) && <CameraWidgetCaptureView onClose={ () => processAction('close') } onDelete={ () => processAction('delete') } onEdit={ () => processAction('edit') } /> }
+            { (mode === MODE_EDITOR) && <CameraWidgetEditorView availableEffects={ availableEffects } myLevel={ myLevel } picture={ cameraRoll[selectedPictureIndex] } onCancel={ () => processAction('editor_cancel') } onCheckout={ checkoutPictureUrl } onClose={ () => processAction('close') } /> }
+            { (mode === MODE_CHECKOUT) && <CameraWidgetCheckoutView base64Url={ base64Url } price={ price } onCancelClick={ () => processAction('editor_cancel') } onCloseClick={ () => processAction('close') }></CameraWidgetCheckoutView> }
         </>
     );
 }
diff --git a/src/components/camera/views/CameraWidgetCaptureView.tsx b/src/components/camera/views/CameraWidgetCaptureView.tsx
index ef928846..8b91a520 100644
--- a/src/components/camera/views/CameraWidgetCaptureView.tsx
+++ b/src/components/camera/views/CameraWidgetCaptureView.tsx
@@ -2,7 +2,7 @@ import { GetRoomEngine, NitroRectangle, TextureUtils } from '@nitrots/nitro-rend
 import { FC, useRef } from 'react';
 import { FaTimes } from 'react-icons/fa';
 import { CameraPicture, GetRoomSession, LocalizeText, PlaySound, SoundNames } from '../../../api';
-import { Column, DraggableWindow, Flex } from '../../../common';
+import { Column, DraggableWindow } from '../../../common';
 import { useCamera, useNotification } from '../../../hooks';
 
 export interface CameraWidgetCaptureViewProps
@@ -73,17 +73,17 @@ export const CameraWidgetCaptureView: FC<CameraWidgetCaptureViewProps> = props =
                                 <button className="btn btn-danger" onClick={ onDelete }>{ LocalizeText('camera.delete.button.text') }</button>
                             </div>
                         </div> }
-                    <div className="d-flex justify-content-center">
+                    <div className="flex justify-center">
                         <div className="camera-button" title={ LocalizeText('camera.take.photo.button.tooltip') } onClick={ takePicture } />
                     </div>
                 </div>
                 { (cameraRoll.length > 0) &&
-                    <Flex gap={ 2 } justifyContent="center" className="camera-roll d-flex justify-content-center py-2">
+                    <div className="camera-roll flex justify-center py-2">
                         { cameraRoll.map((picture, index) =>
                         {
-                            return <img alt="" key={ index } src={ picture.imageUrl } onClick={ event => setSelectedPictureIndex(index) } />;
+                            return <img key={ index } alt="" src={ picture.imageUrl } onClick={ event => setSelectedPictureIndex(index) } />;
                         }) }
-                    </Flex> }
+                    </div> }
             </Column>
         </DraggableWindow>
     );
diff --git a/src/components/camera/views/CameraWidgetCheckoutView.tsx b/src/components/camera/views/CameraWidgetCheckoutView.tsx
index 100e0765..7aceb073 100644
--- a/src/components/camera/views/CameraWidgetCheckoutView.tsx
+++ b/src/components/camera/views/CameraWidgetCheckoutView.tsx
@@ -1,7 +1,7 @@
 import { CameraPublishStatusMessageEvent, CameraPurchaseOKMessageEvent, CameraStorageUrlMessageEvent, CreateLinkEvent, GetRoomEngine, PublishPhotoMessageComposer, PurchasePhotoMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useMemo, useState } from 'react';
 import { GetConfigurationValue, LocalizeText, SendMessageComposer } from '../../../api';
-import { Button, Column, Flex, LayoutCurrencyIcon, LayoutImage, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common';
+import { Button, Column, LayoutCurrencyIcon, LayoutImage, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common';
 import { useMessageEvent } from '../../../hooks';
 
 export interface CameraWidgetCheckoutViewProps
@@ -85,46 +85,46 @@ export const CameraWidgetCheckoutView: FC<CameraWidgetCheckoutViewProps> = props
         <NitroCardView className="nitro-camera-checkout" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText('camera.confirm_phase.title') } onCloseClick={ event => processAction('close') } />
             <NitroCardContentView>
-                <Flex center>
+                <div className="flex items-center justify-center">
                     { (pictureUrl && pictureUrl.length) &&
                         <LayoutImage className="picture-preview border" imageUrl={ pictureUrl } /> }
                     { (!pictureUrl || !pictureUrl.length) &&
-                        <Flex center className="picture-preview border">
+                        <div className="flex items-center justify-center picture-preview border">
                             <Text bold>{ LocalizeText('camera.loading') }</Text>
-                        </Flex> }
-                </Flex>
-                <Flex justifyContent="between" alignItems="center" className="bg-muted rounded p-2">
-                    <Column size={ publishDisabled ? 10 : 6 } gap={ 1 }>
+                        </div> }
+                </div>
+                <div className="flex items-center bg-muted rounded p-2 justify-content-between">
+                    <Column gap={ 1 } size={ publishDisabled ? 10 : 6 }>
                         <Text bold>
                             { LocalizeText('camera.purchase.header') }
                         </Text>
                         { ((price.credits > 0) || (price.duckets > 0)) &&
-                            <Flex gap={ 1 }>
+                            <div className="flex gap-1">
                                 <Text>{ LocalizeText('catalog.purchase.confirmation.dialog.cost') }</Text>
                                 { (price.credits > 0) &&
-                                    <Flex gap={ 1 }>
+                                    <div className="flex gap-1">
                                         <Text bold>{ price.credits }</Text>
                                         <LayoutCurrencyIcon type={ -1 } />
-                                    </Flex> }
+                                    </div> }
                                 { (price.duckets > 0) &&
-                                    <Flex gap={ 1 }>
+                                    <div className="flex gap-1">
                                         <Text bold>{ price.duckets }</Text>
                                         <LayoutCurrencyIcon type={ 5 } />
-                                    </Flex> }
-                            </Flex> }
+                                    </div> }
+                            </div> }
                         { (picturesBought > 0) &&
                             <Text>
                                 <Text bold>{ LocalizeText('camera.purchase.count.info') }</Text> { picturesBought }
                                 <u className="ms-1 cursor-pointer" onClick={ () => CreateLinkEvent('inventory/toggle') }>{ LocalizeText('camera.open.inventory') }</u>
                             </Text> }
                     </Column>
-                    <Flex alignItems="center">
-                        <Button variant="success" disabled={ isWaiting } onClick={ event => processAction('buy') }>{ LocalizeText(!picturesBought ? 'buy' : 'camera.buy.another.button.text') }</Button>
-                    </Flex>
-                </Flex>
+                    <div className="flex items-center">
+                        <Button disabled={ isWaiting } variant="success" onClick={ event => processAction('buy') }>{ LocalizeText(!picturesBought ? 'buy' : 'camera.buy.another.button.text') }</Button>
+                    </div>
+                </div>
                 { !publishDisabled &&
-                <Flex justifyContent="between" alignItems="center" className="bg-muted rounded p-2">
-                    <Column gap={ 1 }>
+                <div className="flex items-center justify-content-between bg-muted rounded p-2">
+                    <div className="flex flex-column gap-1">
                         <Text bold>
                             { LocalizeText(wasPicturePublished ? 'camera.publish.successful' : 'camera.publish.explanation') }
                         </Text>
@@ -133,26 +133,26 @@ export const CameraWidgetCheckoutView: FC<CameraWidgetCheckoutViewProps> = props
                         </Text>
                         { wasPicturePublished && <a href={ publishUrl } rel="noreferrer" target="_blank">{ LocalizeText('camera.link.to.published') }</a> }
                         { !wasPicturePublished && (price.publishDucketPrice > 0) &&
-                            <Flex gap={ 1 }>
+                            <div className="flex gap-1">
                                 <Text>{ LocalizeText('catalog.purchase.confirmation.dialog.cost') }</Text>
-                                <Flex gap={ 1 }>
+                                <div className="flex gap-1">
                                     <Text bold>{ price.publishDucketPrice }</Text>
                                     <LayoutCurrencyIcon type={ 5 } />
-                                </Flex>
-                            </Flex> }
+                                </div>
+                            </div> }
                         { (publishCooldown > 0) && <div className="mt-1 text-center fw-bold">{ LocalizeText('camera.publish.wait', [ 'minutes' ], [ Math.ceil( publishCooldown / 60).toString() ]) }</div> }
-                    </Column>
+                    </div>
                     { !wasPicturePublished &&
-                        <Flex className="d-flex align-items-end">
-                            <Button variant="success" disabled={ (isWaiting || (publishCooldown > 0)) } onClick={ event => processAction('publish') }>
+                        <div className="flex align-items-end">
+                            <Button disabled={ (isWaiting || (publishCooldown > 0)) } variant="success" onClick={ event => processAction('publish') }>
                                 { LocalizeText('camera.publish.button.text') }
                             </Button>
-                        </Flex> }
-                </Flex> }
+                        </div> }
+                </div> }
                 <Text center>{ LocalizeText('camera.warning.disclaimer') }</Text>
-                <Flex justifyContent="end">
+                <div className="flex justify-content-end">
                     <Button onClick={ event => processAction('cancel') }>{ LocalizeText('generic.cancel') }</Button>
-                </Flex>
+                </div>
             </NitroCardContentView>
         </NitroCardView>
     );
diff --git a/src/components/camera/views/CameraWidgetShowPhotoView.tsx b/src/components/camera/views/CameraWidgetShowPhotoView.tsx
index 8614695d..2dbaf5ef 100644
--- a/src/components/camera/views/CameraWidgetShowPhotoView.tsx
+++ b/src/components/camera/views/CameraWidgetShowPhotoView.tsx
@@ -55,10 +55,10 @@ export const CameraWidgetShowPhotoView: FC<CameraWidgetShowPhotoViewProps> = pro
             </Flex>
             { currentImage.m && currentImage.m.length &&
                 <Text center>{ currentImage.m }</Text> }
-            <Flex alignItems="center" justifyContent="between">
+            <div className="flex items-center justify-content-between">
                 <Text>{ (currentImage.n || '') }</Text>
                 <Text>{ new Date(currentImage.t * 1000).toLocaleDateString() }</Text>
-            </Flex>
+            </div>
             { (currentPhotos.length > 1) &&
                 <Flex className="picture-preview-buttons">
                     <FaArrowLeft className="cursor-pointer picture-preview-buttons-previous fa-icon" onClick={ previous } />
diff --git a/src/components/camera/views/editor/CameraWidgetEditorView.tsx b/src/components/camera/views/editor/CameraWidgetEditorView.tsx
index 1946c64b..715bdad1 100644
--- a/src/components/camera/views/editor/CameraWidgetEditorView.tsx
+++ b/src/components/camera/views/editor/CameraWidgetEditorView.tsx
@@ -3,7 +3,7 @@ import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { FaSave, FaSearchMinus, FaSearchPlus, FaTrash } from 'react-icons/fa';
 import ReactSlider from 'react-slider';
 import { CameraEditorTabs, CameraPicture, CameraPictureThumbnail, LocalizeText } from '../../../../api';
-import { Button, ButtonGroup, Column, Flex, Grid, LayoutImage, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView, Text } from '../../../../common';
+import { Button, Column, Grid, LayoutImage, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView, Text } from '../../../../common';
 import { CameraWidgetEffectListView } from './effect-list';
 
 export interface CameraWidgetEditorViewProps
@@ -194,27 +194,27 @@ export const CameraWidgetEditorView: FC<CameraWidgetEditorViewProps> = props =>
             </NitroCardTabsView>
             <NitroCardContentView>
                 <Grid>
-                    <Column size={ 5 } overflow="hidden">
-                        <CameraWidgetEffectListView myLevel={ myLevel } selectedEffects={ selectedEffects } effects={ getEffectList() } thumbnails={ effectsThumbnails } processAction={ processAction } />
+                    <Column overflow="hidden" size={ 5 }>
+                        <CameraWidgetEffectListView effects={ getEffectList() } myLevel={ myLevel } processAction={ processAction } selectedEffects={ selectedEffects } thumbnails={ effectsThumbnails } />
                     </Column>
-                    <Column size={ 7 } justifyContent="between" overflow="hidden">
+                    <Column justifyContent="between" overflow="hidden" size={ 7 }>
                         <Column center>
-                            <LayoutImage imageUrl={ currentPictureUrl } className="picture-preview" />
+                            <LayoutImage className="picture-preview" imageUrl={ currentPictureUrl } />
                             { selectedEffectName &&
                                 <Column center fullWidth gap={ 1 }>
                                     <Text>{ LocalizeText('camera.effect.name.' + selectedEffectName) }</Text>
                                     <ReactSlider
                                         className={ 'nitro-slider' }
-                                        min={ 0 }
                                         max={ 1 }
+                                        min={ 0 }
+                                        renderThumb={ (props, state) => <div { ...props }>{ state.valueNow }</div> }
                                         step={ 0.01 }
                                         value={ getCurrentEffect.alpha }
-                                        onChange={ event => setSelectedEffectAlpha(event) }
-                                        renderThumb={ (props, state) => <div { ...props }>{ state.valueNow }</div> } />
+                                        onChange={ event => setSelectedEffectAlpha(event) } />
                                 </Column> }
                         </Column>
-                        <Flex justifyContent="between">
-                            <ButtonGroup>
+                        <div className="flex justify-content-between">
+                            <div className="btn-group">
                                 <Button onClick={ event => processAction('clear_effects') }>
                                     <FaTrash className="fa-icon" />
                                 </Button>
@@ -225,16 +225,16 @@ export const CameraWidgetEditorView: FC<CameraWidgetEditorViewProps> = props =>
                                     { isZoomed && <FaSearchMinus className="fa-icon" /> }
                                     { !isZoomed && <FaSearchPlus className="fa-icon" /> }
                                 </Button>
-                            </ButtonGroup>
-                            <Flex gap={ 1 }>
+                            </div>
+                            <div className="flex gap-1">
                                 <Button onClick={ event => processAction('cancel') }>
                                     { LocalizeText('generic.cancel') }
                                 </Button>
                                 <Button onClick={ event => processAction('checkout') }>
                                     { LocalizeText('camera.preview.button.text') }
                                 </Button>
-                            </Flex>
-                        </Flex>
+                            </div>
+                        </div>
                     </Column>
                 </Grid>
             </NitroCardContentView>
diff --git a/src/components/camera/views/editor/effect-list/CameraWidgetEffectListItemView.tsx b/src/components/camera/views/editor/effect-list/CameraWidgetEffectListItemView.tsx
index cac3a34b..82eb30d8 100644
--- a/src/components/camera/views/editor/effect-list/CameraWidgetEffectListItemView.tsx
+++ b/src/components/camera/views/editor/effect-list/CameraWidgetEffectListItemView.tsx
@@ -19,9 +19,9 @@ export const CameraWidgetEffectListItemView: FC<CameraWidgetEffectListItemViewPr
     const { effect = null, thumbnailUrl = null, isActive = false, isLocked = false, selectEffect = null, removeEffect = null } = props;
 
     return (
-        <LayoutGridItem title={ LocalizeText(!isLocked ? (`camera.effect.name.${ effect.name }`) : `camera.effect.required.level ${ effect.minLevel }`) } itemActive={ isActive } onClick={ event => (!isActive && selectEffect()) }>
+        <LayoutGridItem itemActive={ isActive } title={ LocalizeText(!isLocked ? (`camera.effect.name.${ effect.name }`) : `camera.effect.required.level ${ effect.minLevel }`) } onClick={ event => (!isActive && selectEffect()) }>
             { isActive &&
-                <Button variant="danger" className="rounded-circle remove-effect" onClick={ removeEffect }>
+                <Button className="rounded-circle remove-effect" variant="danger" onClick={ removeEffect }>
                     <FaTimes className="fa-icon" />
                 </Button> }
             { !isLocked && (thumbnailUrl && thumbnailUrl.length > 0) &&
@@ -29,7 +29,7 @@ export const CameraWidgetEffectListItemView: FC<CameraWidgetEffectListItemViewPr
                     <img alt="" src={ thumbnailUrl } />
                 </div> }
             { isLocked &&
-                <Text center bold>
+                <Text bold center>
                     <div>
                         <FaLock className="fa-icon" />
                     </div>
diff --git a/src/components/camera/views/editor/effect-list/CameraWidgetEffectListView.tsx b/src/components/camera/views/editor/effect-list/CameraWidgetEffectListView.tsx
index 3f67cea7..6f43e223 100644
--- a/src/components/camera/views/editor/effect-list/CameraWidgetEffectListView.tsx
+++ b/src/components/camera/views/editor/effect-list/CameraWidgetEffectListView.tsx
@@ -24,7 +24,7 @@ export const CameraWidgetEffectListView: FC<CameraWidgetEffectListViewProps> = p
                 const thumbnailUrl = (thumbnails.find(thumbnail => (thumbnail.effectName === effect.name)));
                 const isActive = (selectedEffects.findIndex(selectedEffect => (selectedEffect.effect.name === effect.name)) > -1);
 
-                return <CameraWidgetEffectListItemView key={ index } effect={ effect } thumbnailUrl={ ((thumbnailUrl && thumbnailUrl.thumbnailUrl) || null) } isActive={ isActive } isLocked={ (effect.minLevel > myLevel) } selectEffect={ () => processAction('select_effect', effect.name) } removeEffect={ () => processAction('remove_effect', effect.name) } />
+                return <CameraWidgetEffectListItemView key={ index } effect={ effect } isActive={ isActive } isLocked={ (effect.minLevel > myLevel) } removeEffect={ () => processAction('remove_effect', effect.name) } selectEffect={ () => processAction('select_effect', effect.name) } thumbnailUrl={ ((thumbnailUrl && thumbnailUrl.thumbnailUrl) || null) } />
             }) }
         </Grid>
     );
diff --git a/src/components/campaign/CalendarItemView.tsx b/src/components/campaign/CalendarItemView.tsx
index 040414b6..13083a45 100644
--- a/src/components/campaign/CalendarItemView.tsx
+++ b/src/components/campaign/CalendarItemView.tsx
@@ -1,7 +1,7 @@
 import { GetRoomEngine, GetSessionDataManager } from '@nitrots/nitro-renderer';
 import { FC } from 'react';
 import { CalendarItemState, GetConfigurationValue, ICalendarItem } from '../../api';
-import { Base, Column, Flex, LayoutImage } from '../../common';
+import { Column, Flex, LayoutImage } from '../../common';
 
 interface CalendarItemViewProps
 {
@@ -33,7 +33,7 @@ export const CalendarItemView: FC<CalendarItemViewProps> = props =>
     }
 
     return (
-        <Column fit center pointer className={ `campaign-spritesheet campaign-day-generic-bg rounded calendar-item ${ active ? 'active' : '' }` } onClick={ () => onClick(itemId) }>
+        <Column center fit pointer className={ `campaign-spritesheet campaign-day-generic-bg rounded calendar-item ${ active ? 'active' : '' }` } onClick={ () => onClick(itemId) }>
             { (state === CalendarItemState.STATE_UNLOCKED) &&
                 <Flex center className="campaign-spritesheet unlocked-bg">
                     <Flex center className="campaign-spritesheet campaign-opened">
@@ -44,9 +44,9 @@ export const CalendarItemView: FC<CalendarItemViewProps> = props =>
             { (state !== CalendarItemState.STATE_UNLOCKED) &&
                 <Flex center className="campaign-spritesheet locked-bg">
                     { (state === CalendarItemState.STATE_LOCKED_AVAILABLE) &&
-                        <Base className="campaign-spritesheet available" /> }
+                        <div className="campaign-spritesheet available" /> }
                     { ((state === CalendarItemState.STATE_LOCKED_EXPIRED) || (state === CalendarItemState.STATE_LOCKED_FUTURE)) &&
-                        <Base className="campaign-spritesheet unavailable" /> }
+                        <div className="campaign-spritesheet unavailable" /> }
                 </Flex> }
         </Column>
     );
diff --git a/src/components/campaign/CalendarView.tsx b/src/components/campaign/CalendarView.tsx
index 3178f91e..7aa1239f 100644
--- a/src/components/campaign/CalendarView.tsx
+++ b/src/components/campaign/CalendarView.tsx
@@ -1,7 +1,7 @@
 import { GetSessionDataManager } from '@nitrots/nitro-renderer';
 import { FC, useState } from 'react';
 import { CalendarItemState, ICalendarItem, LocalizeText } from '../../api';
-import { Base, Button, Column, Flex, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common';
+import { Button, Column, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common';
 import { CalendarItemView } from './CalendarItemView';
 
 interface CalendarViewProps
@@ -100,26 +100,26 @@ export const CalendarView: FC<CalendarViewProps> = props =>
         <NitroCardView className="nitro-campaign-calendar" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText(`campaign.calendar.${ campaignName }.title`) } onCloseClick={ onClose } />
             <NitroCardContentView>
-                <Grid fullHeight={ false } justifyContent="between" alignItems="center">
+                <Grid alignItems="center" fullHeight={ false } justifyContent="between">
                     <Column size={ 1 } />
                     <Column size={ 10 }>
-                        <Flex justifyContent="between" alignItems="center" gap={ 1 }>
-                            <Column gap={ 1 }>
+                        <div className="flex items-center gap-1 justify-content-between">
+                            <div className="flex flex-column gap-1">
                                 <Text fontSize={ 3 }>{ LocalizeText('campaign.calendar.heading.day', [ 'number' ], [ (selectedDay + 1).toString() ]) }</Text>
                                 <Text>{ dayMessage(selectedDay) }</Text>
-                            </Column>
+                            </div>
                             <div>
                                 { GetSessionDataManager().isModerator &&
                                     <Button variant="danger" onClick={ forceOpen }>Force open</Button> }
                             </div>
-                        </Flex>
+                        </div>
                     </Column>
                     <Column size={ 1 } />
                 </Grid>
-                <Flex fullHeight gap={ 2 }>
-                    <Flex center>
-                        <Base pointer className="campaign-spritesheet prev" onClick={ onClickPrev } />
-                    </Flex>
+                <div className="flex h-100 gap-2">
+                    <div className="flex items-center justify-center">
+                        <div className="campaign-spritesheet prev cursor-pointer" onClick={ onClickPrev } />
+                    </div>
                     <Column center fullWidth>
                         <Grid fit columnCount={ TOTAL_SHOWN_ITEMS } gap={ 1 }>
                             { [ ...Array(TOTAL_SHOWN_ITEMS) ].map((e, i) =>
@@ -128,16 +128,16 @@ export const CalendarView: FC<CalendarViewProps> = props =>
                                     
                                 return (
                                     <Column key={ i } overflow="hidden">
-                                        <CalendarItemView itemId={ day } state={ getDayState(day) } active={ (selectedDay === day) } product={ receivedProducts.has(day) ? receivedProducts.get(day) : null } onClick={ onClickItem } />
+                                        <CalendarItemView active={ (selectedDay === day) } itemId={ day } product={ receivedProducts.has(day) ? receivedProducts.get(day) : null } state={ getDayState(day) } onClick={ onClickItem } />
                                     </Column>
                                 );
                             }) }
                         </Grid>
                     </Column>
-                    <Flex center>
-                        <Base pointer className="campaign-spritesheet next" onClick={ onClickNext } />
-                    </Flex>
-                </Flex>
+                    <div className="flex items-center justify-center">
+                        <div className="campaign-spritesheet next cursor-pointer" onClick={ onClickNext } />
+                    </div>
+                </div>
             </NitroCardContentView>
         </NitroCardView>
     )
diff --git a/src/components/campaign/CampaignView.tsx b/src/components/campaign/CampaignView.tsx
index 5e109271..a2fd097c 100644
--- a/src/components/campaign/CampaignView.tsx
+++ b/src/components/campaign/CampaignView.tsx
@@ -94,7 +94,7 @@ export const CampaignView: FC<{}> = props =>
     return (
         <>
             { (calendarData && isCalendarOpen) && 
-                <CalendarView onClose={ () => setCalendarOpen(false) } campaignName={ calendarData.campaignName } currentDay={ calendarData.currentDay } numDays={ calendarData.campaignDays } openedDays={ calendarData.openedDays } missedDays={ calendarData.missedDays } openPackage={ openPackage } receivedProducts={ receivedProducts } />
+                <CalendarView campaignName={ calendarData.campaignName } currentDay={ calendarData.currentDay } missedDays={ calendarData.missedDays } numDays={ calendarData.campaignDays } openedDays={ calendarData.openedDays } openPackage={ openPackage } receivedProducts={ receivedProducts } onClose={ () => setCalendarOpen(false) } />
             }
         </>
     )
diff --git a/src/components/catalog/CatalogView.tsx b/src/components/catalog/CatalogView.tsx
index 3df32be0..64865901 100644
--- a/src/components/catalog/CatalogView.tsx
+++ b/src/components/catalog/CatalogView.tsx
@@ -1,7 +1,7 @@
 import { AddLinkEventTracker, ILinkEventTracker, RemoveLinkEventTracker } from '@nitrots/nitro-renderer';
 import { FC, useEffect } from 'react';
 import { GetConfigurationValue, LocalizeText } from '../../api';
-import { Column, Flex, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
+import { Column, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
 import { useCatalog } from '../../hooks';
 import { CatalogIconView } from './views/catalog-icon/CatalogIconView';
 import { CatalogGiftView } from './views/gift/CatalogGiftView';
@@ -69,7 +69,7 @@ export const CatalogView: FC<{}> = props =>
     return (
         <>
             { isVisible &&
-                <NitroCardView uniqueKey="catalog" className="nitro-catalog" style={ GetConfigurationValue('catalog.headers') ? { width: 710 } : {} }>
+                <NitroCardView className="nitro-catalog" style={ GetConfigurationValue('catalog.headers') ? { width: 710 } : {} } uniqueKey="catalog">
                     <NitroCardHeaderView headerText={ LocalizeText('catalog.title') } onCloseClick={ event => setIsVisible(false) } />
                     <NitroCardTabsView>
                         { rootNode && (rootNode.children.length > 0) && rootNode.children.map(child =>
@@ -83,10 +83,10 @@ export const CatalogView: FC<{}> = props =>
 
                                     activateNode(child);
                                 } } >
-                                    <Flex gap={ GetConfigurationValue('catalog.tab.icons') ? 1 : 0 } alignItems="center">
+                                    <div className={ `flex items-center gap-${ GetConfigurationValue('catalog.tab.icons') ? 1 : 0 }` }>
                                         { GetConfigurationValue('catalog.tab.icons') && <CatalogIconView icon={ child.iconId } /> }
                                         { child.localization }
-                                    </Flex>
+                                    </div>
                                 </NitroCardTabsItemView>
                             );
                         }) }
@@ -94,11 +94,11 @@ export const CatalogView: FC<{}> = props =>
                     <NitroCardContentView>
                         <Grid>
                             { !navigationHidden &&
-                                <Column size={ 3 } overflow="hidden">
+                                <Column overflow="hidden" size={ 3 }>
                                     { activeNodes && (activeNodes.length > 0) &&
                                         <CatalogNavigationView node={ activeNodes[0] } /> }
                                 </Column> }
-                            <Column size={ !navigationHidden ? 9 : 12 } overflow="hidden">
+                            <Column overflow="hidden" size={ !navigationHidden ? 9 : 12 }>
                                 { GetCatalogLayout(currentPage, () => setNavigationHidden(true)) }
                             </Column>
                         </Grid>
diff --git a/src/components/catalog/views/catalog-header/CatalogHeaderView.tsx b/src/components/catalog/views/catalog-header/CatalogHeaderView.tsx
index 9c6bbe05..ec068dc9 100644
--- a/src/components/catalog/views/catalog-header/CatalogHeaderView.tsx
+++ b/src/components/catalog/views/catalog-header/CatalogHeaderView.tsx
@@ -1,6 +1,5 @@
 import { FC, useEffect, useState } from 'react';
 import { GetConfigurationValue } from '../../../../api';
-import { Flex } from '../../../../common';
 
 export interface CatalogHeaderViewProps
 {
@@ -17,10 +16,10 @@ export const CatalogHeaderView: FC<CatalogHeaderViewProps> = props =>
         setDisplayImageUrl(imageUrl ?? GetConfigurationValue<string>('catalog.asset.image.url').replace('%name%', 'catalog_header_roombuilder'));
     }, [ imageUrl ]);
 
-    return <Flex center fullWidth className="nitro-catalog-header">
+    return <div className="flex justify-center items-center w-100 nitro-catalog-header">
         <img src={ displayImageUrl } onError={ ({ currentTarget }) => 
         {
             currentTarget.src = GetConfigurationValue<string>('catalog.asset.image.url').replace('%name%', 'catalog_header_roombuilder');
         } } />
-    </Flex>;
+    </div>;
 }
diff --git a/src/components/catalog/views/gift/CatalogGiftView.tsx b/src/components/catalog/views/gift/CatalogGiftView.tsx
index 3ac6f255..64d30ece 100644
--- a/src/components/catalog/views/gift/CatalogGiftView.tsx
+++ b/src/components/catalog/views/gift/CatalogGiftView.tsx
@@ -2,7 +2,7 @@ import { GetSessionDataManager, GiftReceiverNotFoundEvent, PurchaseFromCatalogAs
 import { ChangeEvent, FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
 import { ColorUtils, LocalizeText, MessengerFriend, ProductTypeEnum, SendMessageComposer } from '../../../../api';
-import { Base, Button, ButtonGroup, Column, Flex, FormGroup, LayoutCurrencyIcon, LayoutFurniImageView, LayoutGiftTagView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text, classNames } from '../../../../common';
+import { Button, Column, Flex, FormGroup, LayoutCurrencyIcon, LayoutFurniImageView, LayoutGiftTagView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text, classNames } from '../../../../common';
 import { CatalogEvent, CatalogInitGiftEvent, CatalogPurchasedEvent } from '../../../../events';
 import { useCatalog, useFriends, useMessageEvent, useUiEvent } from '../../../../hooks';
 
@@ -210,79 +210,79 @@ export const CatalogGiftView: FC<{}> = props =>
     const priceText = 'catalog.gift_wrapping_new.' + (isBoxDefault ? 'freeprice' : 'price');
 
     return (
-        <NitroCardView uniqueKey="catalog-gift" className="nitro-catalog-gift" theme="primary-slim">
+        <NitroCardView className="nitro-catalog-gift" theme="primary-slim" uniqueKey="catalog-gift">
             <NitroCardHeaderView headerText={ LocalizeText('catalog.gift_wrapping.title') } onCloseClick={ onClose } />
             <NitroCardContentView className="text-black">
                 <FormGroup column>
                     <Text>{ LocalizeText('catalog.gift_wrapping.receiver') }</Text>
-                    <input type="text" className={ classNames('form-control form-control-sm', receiverNotFound && 'is-invalid') } value={ receiverName } onChange={ (e) => onTextChanged(e) } />
+                    <input className={ classNames('form-control form-control-sm', receiverNotFound && 'is-invalid') } type="text" value={ receiverName } onChange={ (e) => onTextChanged(e) } />
                     { (suggestions.length > 0 && isAutocompleteVisible) &&
                         <Column className="autocomplete-gift-container">
                             { suggestions.map((friend: MessengerFriend) => (
-                                <Base key={ friend.id } className="autocomplete-gift-item" onClick={ (e) => selectedReceiverName(friend.name) }>{ friend.name }</Base>
+                                <div key={ friend.id } className="autocomplete-gift-item" onClick={ (e) => selectedReceiverName(friend.name) }>{ friend.name }</div>
                             )) }
                         </Column>
                     }
                     { receiverNotFound &&
-                        <Base className="invalid-feedback">{ LocalizeText('catalog.gift_wrapping.receiver_not_found.title') }</Base> }
+                        <div className="invalid-feedback">{ LocalizeText('catalog.gift_wrapping.receiver_not_found.title') }</div> }
                 </FormGroup>
-                <LayoutGiftTagView figure={ GetSessionDataManager().figure } userName={ GetSessionDataManager().userName } message={ message } editable={ true } onChange={ (value) => setMessage(value) } />
-                <Base className="form-check">
-                    <input className="form-check-input" type="checkbox" name="showMyFace" checked={ showMyFace } onChange={ (e) => setShowMyFace(value => !value) } />
+                <LayoutGiftTagView editable={ true } figure={ GetSessionDataManager().figure } message={ message } userName={ GetSessionDataManager().userName } onChange={ (value) => setMessage(value) } />
+                <div className="form-check">
+                    <input checked={ showMyFace } className="form-check-input" name="showMyFace" type="checkbox" onChange={ (e) => setShowMyFace(value => !value) } />
                     <label className="form-check-label">{ LocalizeText('catalog.gift_wrapping.show_face.title') }</label>
-                </Base>
-                <Flex alignItems="center" gap={ 2 }>
+                </div>
+                <div className="items-center gap-2">
                     { selectedColorId &&
-                        <Base className="gift-preview">
-                            <LayoutFurniImageView productType={ ProductTypeEnum.FLOOR } productClassId={ colourId } extraData={ boxExtraData } />
-                        </Base> }
-                    <Column gap={ 1 }>
-                        <Flex gap={ 2 }>
-                            <ButtonGroup>
+                        <div className="gift-preview">
+                            <LayoutFurniImageView extraData={ boxExtraData } productClassId={ colourId } productType={ ProductTypeEnum.FLOOR } />
+                        </div> }
+                    <div className="flex flex-column gap-1">
+                        <div className="flex gap-2">
+                            <div className="btn-group">
                                 <Button variant="primary" onClick={ () => handleAction('prev_box') }>
                                     <FaChevronLeft className="fa-icon" />
                                 </Button>
                                 <Button variant="primary" onClick={ () => handleAction('next_box') }>
                                     <FaChevronRight className="fa-icon" />
                                 </Button>
-                            </ButtonGroup>
-                            <Column gap={ 1 }>
+                            </div>
+                            <div className="flex flex-column gap-1">
                                 <Text fontWeight="bold">{ LocalizeText(boxName) }</Text>
-                                <Flex alignItems="center" gap={ 1 }>
+                                <div className="flex items-center gap-1">
                                     { LocalizeText(priceText, [ 'price' ], [ giftConfiguration.price.toString() ]) }
                                     <LayoutCurrencyIcon type={ -1 } />
-                                </Flex>
-                            </Column>
-                        </Flex>
-                        <Flex alignItems="center" gap={ 2 } className={ isColorable ? '' : 'opacity-50 pointer-events-none' }>
-                            <ButtonGroup>
+                                </div>
+                            </div>
+                        </div>
+                        <Flex alignItems="center" className={ isColorable ? '' : 'opacity-50 pointer-events-none' } gap={ 2 }>
+                            <div className="btn-group">
                                 <Button variant="primary" onClick={ () => handleAction('prev_ribbon') }>
                                     <FaChevronLeft className="fa-icon" />
                                 </Button>
                                 <Button variant="primary" onClick={ () => handleAction('next_ribbon') }>
                                     <FaChevronRight className="fa-icon" />
                                 </Button>
-                            </ButtonGroup>
+                            </div>
                             <Text fontWeight="bold">{ LocalizeText(ribbonName) }</Text>
                         </Flex>
-                    </Column>
-                </Flex>
-                <Column gap={ 1 } className={ isColorable ? '' : 'opacity-50 pointer-events-none' }>
+                    </div>
+                </div>
+                <Column className={ isColorable ? '' : 'opacity-50 pointer-events-none' } gap={ 1 }>
                     <Text fontWeight="bold">
                         { LocalizeText('catalog.gift_wrapping.pick_color') }
                     </Text>
-                    <ButtonGroup fullWidth>
-                        { colors.map(color => <Button key={ color.id } variant="dark" active={ (color.id === selectedColorId) } disabled={ !isColorable } style={ { backgroundColor: color.color } } onClick={ () => setSelectedColorId(color.id) } />) }
-                    </ButtonGroup>
+                    <div className="btn-group w-100">
+                        { colors.map(color => <Button key={ color.id } active={ (color.id === selectedColorId) } disabled={ !isColorable } style={ { backgroundColor: color.color } } variant="dark" onClick={ () => setSelectedColorId(color.id) } />) }
+                    </div>
                 </Column>
-                <Flex justifyContent="between" alignItems="center">
-                    <Button variant="link" onClick={ onClose } className="text-black">
+                <div className="flex justify-content-between items-center">
+                    <Button className="text-black" variant="link" onClick={ onClose }>
                         { LocalizeText('cancel') }
                     </Button>
                     <Button variant="success" onClick={ () => handleAction('buy') }>
                         { LocalizeText('catalog.gift_wrapping.give_gift') }
                     </Button>
-                </Flex>
+                </div>
             </NitroCardContentView>
         </NitroCardView>
     );
diff --git a/src/components/catalog/views/navigation/CatalogNavigationItemView.tsx b/src/components/catalog/views/navigation/CatalogNavigationItemView.tsx
index 45f7f43f..f01c3511 100644
--- a/src/components/catalog/views/navigation/CatalogNavigationItemView.tsx
+++ b/src/components/catalog/views/navigation/CatalogNavigationItemView.tsx
@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { FaCaretDown, FaCaretUp } from 'react-icons/fa';
 import { ICatalogNode } from '../../../../api';
-import { Base, LayoutGridItem, Text } from '../../../../common';
+import { LayoutGridItem, Text } from '../../../../common';
 import { useCatalog } from '../../../../hooks';
 import { CatalogIconView } from '../catalog-icon/CatalogIconView';
 import { CatalogNavigationSetView } from './CatalogNavigationSetView';
@@ -18,10 +18,10 @@ export const CatalogNavigationItemView: FC<CatalogNavigationItemViewProps> = pro
     const { activateNode = null } = useCatalog();
     
     return (
-        <Base className="nitro-catalog-navigation-section">
-            <LayoutGridItem gap={ 1 } column={ false } itemActive={ node.isActive } onClick={ event => activateNode(node) } className={ child ? 'inset' : '' }>
+        <div className="nitro-catalog-navigation-section">
+            <LayoutGridItem className={ child ? 'inset' : '' } column={ false } gap={ 1 } itemActive={ node.isActive } onClick={ event => activateNode(node) }>
                 <CatalogIconView icon={ node.iconId } />
-                <Text grow truncate>{ node.localization }</Text>
+                <Text truncate className="flex-grow-1">{ node.localization }</Text>
                 { node.isBranch &&
                     <>
                         { node.isOpen && <FaCaretUp className="fa-icon" /> }
@@ -29,7 +29,7 @@ export const CatalogNavigationItemView: FC<CatalogNavigationItemViewProps> = pro
                     </> }
             </LayoutGridItem>
             { node.isOpen && node.isBranch &&
-                <CatalogNavigationSetView node={ node } child={ true } /> }
-        </Base>
+                <CatalogNavigationSetView child={ true } node={ node } /> }
+        </div>
     );
 }
diff --git a/src/components/catalog/views/navigation/CatalogNavigationSetView.tsx b/src/components/catalog/views/navigation/CatalogNavigationSetView.tsx
index 8bfdd480..7651ac2b 100644
--- a/src/components/catalog/views/navigation/CatalogNavigationSetView.tsx
+++ b/src/components/catalog/views/navigation/CatalogNavigationSetView.tsx
@@ -18,7 +18,7 @@ export const CatalogNavigationSetView: FC<CatalogNavigationSetViewProps> = props
             {
                 if(!n.isVisible) return null;
                     
-                return <CatalogNavigationItemView key={ index } node={ n } child={ child } />
+                return <CatalogNavigationItemView key={ index } child={ child } node={ n } />
             }) }
         </>
     );
diff --git a/src/components/catalog/views/navigation/CatalogNavigationView.tsx b/src/components/catalog/views/navigation/CatalogNavigationView.tsx
index 2d03f06d..41b475e7 100644
--- a/src/components/catalog/views/navigation/CatalogNavigationView.tsx
+++ b/src/components/catalog/views/navigation/CatalogNavigationView.tsx
@@ -20,7 +20,7 @@ export const CatalogNavigationView: FC<CatalogNavigationViewProps> = props =>
         <>
             <CatalogSearchView />
             <Column fullHeight className="nitro-catalog-navigation-grid-container rounded p-1" overflow="hidden">
-                <AutoGrid id="nitro-catalog-main-navigation" gap={ 1 } columnCount={ 1 }>
+                <AutoGrid columnCount={ 1 } gap={ 1 } id="nitro-catalog-main-navigation">
                     { searchResult && (searchResult.filteredNodes.length > 0) && searchResult.filteredNodes.map((n, index) =>
                     {
                         return <CatalogNavigationItemView key={ index } node={ n } />;
diff --git a/src/components/catalog/views/page/common/CatalogGridOfferView.tsx b/src/components/catalog/views/page/common/CatalogGridOfferView.tsx
index 507bb6c7..cdd2db71 100644
--- a/src/components/catalog/views/page/common/CatalogGridOfferView.tsx
+++ b/src/components/catalog/views/page/common/CatalogGridOfferView.tsx
@@ -51,9 +51,9 @@ export const CatalogGridOfferView: FC<CatalogGridOfferViewProps> = props =>
     if(!product) return null;
 
     return (
-        <LayoutGridItem itemImage={ iconUrl } itemCount={ ((offer.pricingModel === Offer.PRICING_MODEL_MULTI) ? product.productCount : 1) } itemUniqueSoldout={ (product.uniqueLimitedItemSeriesSize && !product.uniqueLimitedItemsLeft) } itemUniqueNumber={ product.uniqueLimitedItemSeriesSize } itemActive={ itemActive } onMouseDown={ onMouseEvent } onMouseUp={ onMouseEvent } onMouseOut={ onMouseEvent } { ...rest }>
+        <LayoutGridItem itemActive={ itemActive } itemCount={ ((offer.pricingModel === Offer.PRICING_MODEL_MULTI) ? product.productCount : 1) } itemImage={ iconUrl } itemUniqueNumber={ product.uniqueLimitedItemSeriesSize } itemUniqueSoldout={ (product.uniqueLimitedItemSeriesSize && !product.uniqueLimitedItemsLeft) } onMouseDown={ onMouseEvent } onMouseOut={ onMouseEvent } onMouseUp={ onMouseEvent } { ...rest }>
             { (offer.product.productType === ProductTypeEnum.ROBOT) &&
-                <LayoutAvatarImageView figure={ offer.product.extraParam } headOnly={ true } direction={ 3 } /> }
+                <LayoutAvatarImageView direction={ 3 } figure={ offer.product.extraParam } headOnly={ true } /> }
         </LayoutGridItem>
     );
 }
diff --git a/src/components/catalog/views/page/common/CatalogRedeemVoucherView.tsx b/src/components/catalog/views/page/common/CatalogRedeemVoucherView.tsx
index 504bd4b8..9eb070fc 100644
--- a/src/components/catalog/views/page/common/CatalogRedeemVoucherView.tsx
+++ b/src/components/catalog/views/page/common/CatalogRedeemVoucherView.tsx
@@ -2,7 +2,7 @@ import { RedeemVoucherMessageComposer, VoucherRedeemErrorMessageEvent, VoucherRe
 import { FC, useState } from 'react';
 import { FaTag } from 'react-icons/fa';
 import { LocalizeText, SendMessageComposer } from '../../../../../api';
-import { Button, Flex } from '../../../../../common';
+import { Button } from '../../../../../common';
 import { useMessageEvent, useNotification } from '../../../../../hooks';
 
 export interface CatalogRedeemVoucherViewProps
@@ -50,11 +50,11 @@ export const CatalogRedeemVoucherView: FC<CatalogRedeemVoucherViewProps> = props
     });
 
     return (
-        <Flex gap={ 1 }>
-            <input type="text" className="form-control form-control-sm" placeholder={ text } value={ voucher } onChange={ event => setVoucher(event.target.value) } />
-            <Button variant="primary" onClick={ redeemVoucher } disabled={ isWaiting }>
+        <div className="flex gap-1">
+            <input className="form-control form-control-sm" placeholder={ text } type="text" value={ voucher } onChange={ event => setVoucher(event.target.value) } />
+            <Button disabled={ isWaiting } variant="primary" onClick={ redeemVoucher }>
                 <FaTag className="fa-icon" />
             </Button>
-        </Flex>
+        </div>
     );
 }
diff --git a/src/components/catalog/views/page/common/CatalogSearchView.tsx b/src/components/catalog/views/page/common/CatalogSearchView.tsx
index e117f905..8f7e74df 100644
--- a/src/components/catalog/views/page/common/CatalogSearchView.tsx
+++ b/src/components/catalog/views/page/common/CatalogSearchView.tsx
@@ -77,18 +77,18 @@ export const CatalogSearchView: FC<{}> = props =>
     }, [ offersToNodes, currentType, rootNode, searchValue, setCurrentPage, setSearchResult ]);
 
     return (
-        <Flex gap={ 1 }>
+        <div className="flex gap-1">
             <Flex fullWidth alignItems="center" position="relative">
-                <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } value={ searchValue } onChange={ event => setSearchValue(event.target.value) } />
+                <input className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } type="text" value={ searchValue } onChange={ event => setSearchValue(event.target.value) } />
             </Flex>
             { (!searchValue || !searchValue.length) &&
-                <Button variant="primary" className="catalog-search-button">
+                <Button className="catalog-search-button" variant="primary">
                     <FaSearch className="fa-icon" />
                 </Button> }
             { searchValue && !!searchValue.length &&
-                <Button variant="primary" className="catalog-search-button" onClick={ event => setSearchValue('') }>
+                <Button className="catalog-search-button" variant="primary" onClick={ event => setSearchValue('') }>
                     <FaTimes className="fa-icon" />
                 </Button> }
-        </Flex>
+        </div>
     );
 }
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutBadgeDisplayView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutBadgeDisplayView.tsx
index 9b6ec6a8..4dc025f1 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutBadgeDisplayView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutBadgeDisplayView.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { LocalizeText } from '../../../../../api';
-import { Base, Column, Flex, Grid, Text } from '../../../../../common';
+import { Column, Grid, Text } from '../../../../../common';
 import { useCatalog } from '../../../../../hooks';
 import { CatalogBadgeSelectorWidgetView } from '../widgets/CatalogBadgeSelectorWidgetView';
 import { CatalogFirstProductSelectorWidgetView } from '../widgets/CatalogFirstProductSelectorWidgetView';
@@ -20,14 +20,14 @@ export const CatalogLayoutBadgeDisplayView: FC<CatalogLayoutProps> = props =>
         <>
             <CatalogFirstProductSelectorWidgetView />
             <Grid>
-                <Column size={ 7 } overflow="hidden">
+                <Column overflow="hidden" size={ 7 }>
                     <CatalogItemGridWidgetView shrink />
                     <Column gap={ 1 } overflow="hidden">
-                        <Text truncate shrink fontWeight="bold">{ LocalizeText('catalog_selectbadge') }</Text>
+                        <Text shrink truncate fontWeight="bold">{ LocalizeText('catalog_selectbadge') }</Text>
                         <CatalogBadgeSelectorWidgetView />
                     </Column>
                 </Column>
-                <Column center={ !currentOffer } size={ 5 } overflow="hidden">
+                <Column center={ !currentOffer } overflow="hidden" size={ 5 }>
                     { !currentOffer &&
                         <>
                             { !!page.localization.getImage(1) && <img alt="" src={ page.localization.getImage(1) } /> }
@@ -35,15 +35,15 @@ export const CatalogLayoutBadgeDisplayView: FC<CatalogLayoutProps> = props =>
                         </> }
                     { currentOffer &&
                         <>
-                            <Base position="relative" overflow="hidden">
+                            <div className="position-relative overflow-hidden">
                                 <CatalogViewProductWidgetView />
-                            </Base>
-                            <Column grow gap={ 1 }>
-                                <CatalogLimitedItemWidgetView fullWidth />
-                                <Text grow truncate>{ currentOffer.localizationName }</Text>
-                                <Flex justifyContent="end">
+                            </div>
+                            <Column className="flex-grow-1" gap={ 1 }>
+                                <CatalogLimitedItemWidgetView />
+                                <Text truncate className="flex-grow-1">{ currentOffer.localizationName }</Text>
+                                <div className="flex justify-content-end">
                                     <CatalogTotalPriceWidget alignItems="end" />
-                                </Flex>
+                                </div>
                                 <CatalogPurchaseWidgetView />
                             </Column>
                         </> }
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutColorGroupingView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutColorGroupingView.tsx
index 60ccdbae..156cd994 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutColorGroupingView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutColorGroupingView.tsx
@@ -2,7 +2,7 @@ import { ColorConverter } from '@nitrots/nitro-renderer';
 import { FC, useMemo, useState } from 'react';
 import { FaFillDrip } from 'react-icons/fa';
 import { IPurchasableOffer } from '../../../../../api';
-import { AutoGrid, Base, Button, Column, Flex, Grid, LayoutGridItem, Text } from '../../../../../common';
+import { AutoGrid, Button, Column, Grid, LayoutGridItem, Text } from '../../../../../common';
 import { useCatalog } from '../../../../../hooks';
 import { CatalogGridOfferView } from '../common/CatalogGridOfferView';
 import { CatalogAddOnBadgeWidgetView } from '../widgets/CatalogAddOnBadgeWidgetView';
@@ -132,17 +132,17 @@ export const CatalogLayoutColorGroupingView : FC<CatalogLayoutColorGroupViewProp
 
     return (
         <Grid>
-            <Column size={ 7 } overflow="hidden">
+            <Column overflow="hidden" size={ 7 }>
                 <AutoGrid columnCount={ 5 }>
                     { (!colorsShowing || !currentOffer || !colorableItems.has(currentOffer.product.furnitureData.className)) &&
                         offers.map((offer, index) => <CatalogGridOfferView key={ index } itemActive={ (currentOffer && (currentOffer.product.furnitureData.hasIndexedColor ? currentOffer.product.furnitureData.className === offer.product.furnitureData.className : currentOffer.offerId === offer.offerId)) } offer={ offer } selectOffer={ selectOffer }/>)
                     }
                     { (colorsShowing && currentOffer && colorableItems.has(currentOffer.product.furnitureData.className)) &&
-                        colorableItems.get(currentOffer.product.furnitureData.className).map((color, index) => <LayoutGridItem itemHighlight key={ index } itemActive={ (currentOffer.product.furnitureData.colorIndex === index) } itemColor={ ColorConverter.int2rgb(color) } className="clear-bg" onClick={ event => selectColor(index, currentOffer.product.furnitureData.className) } />)
+                        colorableItems.get(currentOffer.product.furnitureData.className).map((color, index) => <LayoutGridItem key={ index } itemHighlight className="clear-bg" itemActive={ (currentOffer.product.furnitureData.colorIndex === index) } itemColor={ ColorConverter.int2rgb(color) } onClick={ event => selectColor(index, currentOffer.product.furnitureData.className) } />)
                     }
                 </AutoGrid>
             </Column>
-            <Column center={ !currentOffer } size={ 5 } overflow="hidden">
+            <Column center={ !currentOffer } overflow="hidden" size={ 5 }>
                 { !currentOffer &&
                     <>
                         { !!page.localization.getImage(1) && <img alt="" src={ page.localization.getImage(1) } /> }
@@ -150,23 +150,23 @@ export const CatalogLayoutColorGroupingView : FC<CatalogLayoutColorGroupViewProp
                     </> }
                 { currentOffer &&
                     <>
-                        <Base position="relative" overflow="hidden">
+                        <div className="position-relative overflow-hidden">
                             <CatalogViewProductWidgetView />
-                            <CatalogAddOnBadgeWidgetView position="absolute" className="bg-muted rounded bottom-1 end-1" />
+                            <CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-1 end-1" position="absolute" />
                             { currentOffer.product.furnitureData.hasIndexedColor &&
-                                <Button position="absolute" className="bottom-1 start-1" onClick={ event =>setColorsShowing(prev => !prev) }>
+                                <Button className="bottom-1 start-1" position="absolute" onClick={ event =>setColorsShowing(prev => !prev) }>
                                     <FaFillDrip className="fa-icon" />
                                 </Button> }
-                        </Base>
-                        <Column grow gap={ 1 }>
-                            <CatalogLimitedItemWidgetView fullWidth />
-                            <Text grow truncate>{ currentOffer.localizationName }</Text>
-                            <Flex justifyContent="between">
-                                <Column gap={ 1 }>
+                        </div>
+                        <Column className="flex-grow-1" gap={ 1 }>
+                            <CatalogLimitedItemWidgetView />
+                            <Text truncate className="flex-grow-1">{ currentOffer.localizationName }</Text>
+                            <div className="flex justify-content-between">
+                                <div className="flex flex-column gap-1">
                                     <CatalogSpinnerWidgetView />
-                                </Column>
-                                <CatalogTotalPriceWidget justifyContent="end" alignItems="end" />
-                            </Flex>
+                                </div>
+                                <CatalogTotalPriceWidget alignItems="end" justifyContent="end" />
+                            </div>
                             <CatalogPurchaseWidgetView />
                         </Column>
                     </> }
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx
index f1cfab3f..24ad7edc 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx
@@ -20,12 +20,12 @@ export const CatalogLayoutDefaultView: FC<CatalogLayoutProps> = props =>
     return (
         <>
             <Grid>
-                <Column size={ 7 } overflow="hidden">
+                <Column overflow="hidden" size={ 7 }>
                     { GetConfigurationValue('catalog.headers') &&
                         <CatalogHeaderView imageUrl={ currentPage.localization.getImage(0) }/> }
                     <CatalogItemGridWidgetView />
                 </Column>
-                <Column center={ !currentOffer } size={ 5 } overflow="hidden">
+                <Column center={ !currentOffer } overflow="hidden" size={ 5 }>
                     { !currentOffer &&
                         <>
                             { !!page.localization.getImage(1) && 
@@ -43,14 +43,14 @@ export const CatalogLayoutDefaultView: FC<CatalogLayoutProps> = props =>
                                 { (currentOffer.product.productType === ProductTypeEnum.BADGE) && <CatalogAddOnBadgeWidgetView className="scale-2" /> }
                             </Flex>
                             <Column grow gap={ 1 }>
-                                <CatalogLimitedItemWidgetView fullWidth />
+                                <CatalogLimitedItemWidgetView />
                                 <Text grow truncate>{ currentOffer.localizationName }</Text>
-                                <Flex justifyContent="between">
-                                    <Column gap={ 1 }>
+                                <div className="flex justify-content-between">
+                                    <div className="flex flex-column gap-1">
                                         <CatalogSpinnerWidgetView />
-                                    </Column>
-                                    <CatalogTotalPriceWidget justifyContent="end" alignItems="end" />
-                                </Flex>
+                                    </div>
+                                    <CatalogTotalPriceWidget alignItems="end" justifyContent="end" />
+                                </div>
                                 <CatalogPurchaseWidgetView />
                             </Column>
                         </> }
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutGuildCustomFurniView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutGuildCustomFurniView.tsx
index cf129517..546d8306 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutGuildCustomFurniView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutGuildCustomFurniView.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { Base, Column, Flex, Grid, Text } from '../../../../../common';
+import { Column, Grid, Text } from '../../../../../common';
 import { useCatalog } from '../../../../../hooks';
 import { CatalogGuildBadgeWidgetView } from '../widgets/CatalogGuildBadgeWidgetView';
 import { CatalogGuildSelectorWidgetView } from '../widgets/CatalogGuildSelectorWidgetView';
@@ -16,10 +16,10 @@ export const CatalogLayouGuildCustomFurniView: FC<CatalogLayoutProps> = props =>
     
     return (
         <Grid>
-            <Column size={ 7 } overflow="hidden">
+            <Column overflow="hidden" size={ 7 }>
                 <CatalogItemGridWidgetView />
             </Column>
-            <Column center={ !currentOffer } size={ 5 } overflow="hidden">
+            <Column center={ !currentOffer } overflow="hidden" size={ 5 }>
                 { !currentOffer &&
                     <>
                         { !!page.localization.getImage(1) && <img alt="" src={ page.localization.getImage(1) } /> }
@@ -27,18 +27,18 @@ export const CatalogLayouGuildCustomFurniView: FC<CatalogLayoutProps> = props =>
                     </> }
                 { currentOffer &&
                     <>
-                        <Base position="relative" overflow="hidden">
+                        <div className="position-relative overflow-hidden">
                             <CatalogViewProductWidgetView />
-                            <CatalogGuildBadgeWidgetView position="absolute" className="bottom-1 end-1" />
-                        </Base>
+                            <CatalogGuildBadgeWidgetView className="bottom-1 end-1" position="absolute" />
+                        </div>
                         <Column grow gap={ 1 }>
                             <Text truncate>{ currentOffer.localizationName }</Text>
-                            <Base grow>
+                            <div className="flex-grow-1">
                                 <CatalogGuildSelectorWidgetView />
-                            </Base>
-                            <Flex justifyContent="end">
+                            </div>
+                            <div className="flex justify-content-end">
                                 <CatalogTotalPriceWidget alignItems="end" />
-                            </Flex>
+                            </div>
                             <CatalogPurchaseWidgetView />
                         </Column>
                     </> }
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutGuildForumView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutGuildForumView.tsx
index b5a89ca6..945eadc1 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutGuildForumView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutGuildForumView.tsx
@@ -1,7 +1,7 @@
 import { CatalogGroupsComposer } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { SendMessageComposer } from '../../../../../api';
-import { Base, Column, Flex, Grid, Text } from '../../../../../common';
+import { Column, Grid, Text } from '../../../../../common';
 import { useCatalog } from '../../../../../hooks';
 import { CatalogFirstProductSelectorWidgetView } from '../widgets/CatalogFirstProductSelectorWidgetView';
 import { CatalogGuildSelectorWidgetView } from '../widgets/CatalogGuildSelectorWidgetView';
@@ -25,20 +25,20 @@ export const CatalogLayouGuildForumView: FC<CatalogLayoutProps> = props =>
         <>
             <CatalogFirstProductSelectorWidgetView />
             <Grid>
-                <Column className="bg-muted rounded p-2 text-black" size={ 7 } overflow="hidden">
-                    <Base className="overflow-auto" dangerouslySetInnerHTML={ { __html: page.localization.getText(1) } } />
+                <Column className="bg-muted rounded p-2 text-black" overflow="hidden" size={ 7 }>
+                    <div className="overflow-auto" dangerouslySetInnerHTML={ { __html: page.localization.getText(1) } } />
                 </Column>
-                <Column size={ 5 } overflow="hidden" gap={ 1 }>
+                <Column gap={ 1 } overflow="hidden" size={ 5 }>
                     { !!currentOffer &&
                         <>
                             <Column grow gap={ 1 }>
                                 <Text truncate>{ currentOffer.localizationName }</Text>
-                                <Base grow>
+                                <div className="flex-grow-1">
                                     <CatalogGuildSelectorWidgetView />
-                                </Base>
-                                <Flex justifyContent="end">
+                                </div>
+                                <div className="flex justify-content-end">
                                     <CatalogTotalPriceWidget alignItems="end" />
-                                </Flex>
+                                </div>
                                 <CatalogPurchaseWidgetView noGiftOption={ true } />
                             </Column>
                         </> }
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutGuildFrontpageView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutGuildFrontpageView.tsx
index 01cbcf10..38b2f2b5 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutGuildFrontpageView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutGuildFrontpageView.tsx
@@ -1,7 +1,6 @@
 import { CreateLinkEvent } from '@nitrots/nitro-renderer';
 import { FC } from 'react';
 import { LocalizeText } from '../../../../../api';
-import { Base } from '../../../../../common/Base';
 import { Button } from '../../../../../common/Button';
 import { Column } from '../../../../../common/Column';
 import { Grid } from '../../../../../common/Grid';
@@ -14,12 +13,12 @@ export const CatalogLayouGuildFrontpageView: FC<CatalogLayoutProps> = props =>
     
     return (
         <Grid>
-            <Column size={ 7 } overflow="hidden" className="bg-muted rounded p-2 text-black">
-                <Base dangerouslySetInnerHTML={ { __html: page.localization.getText(2) } } />
-                <Base overflow="auto" dangerouslySetInnerHTML={ { __html: page.localization.getText(0) } } />
-                <Base dangerouslySetInnerHTML={ { __html: page.localization.getText(1) } } />
+            <Column className="bg-muted rounded p-2 text-black" overflow="hidden" size={ 7 }>
+                <div dangerouslySetInnerHTML={ { __html: page.localization.getText(2) } } />
+                <div className="overflow-auto" dangerouslySetInnerHTML={ { __html: page.localization.getText(0) } } />
+                <div dangerouslySetInnerHTML={ { __html: page.localization.getText(1) } } />
             </Column>
-            <Column center size={ 5 } overflow="hidden">
+            <Column center overflow="hidden" size={ 5 }>
                 <LayoutImage imageUrl={ page.localization.getImage(1) } />
                 <Button onClick={ () => CreateLinkEvent('groups/create') }>
                     { LocalizeText('catalog.start.guild.purchase.button') }
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutInfoLoyaltyView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutInfoLoyaltyView.tsx
index 06c4c034..ff948819 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutInfoLoyaltyView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutInfoLoyaltyView.tsx
@@ -6,8 +6,8 @@ export const CatalogLayoutInfoLoyaltyView: FC<CatalogLayoutProps> = props =>
     const { page = null } = props;
     
     return (
-        <div className="h-100 nitro-catalog-layout-info-loyalty text-black d-flex flex-row">
-            <div className="overflow-auto h-100 d-flex flex-column info-loyalty-content">
+        <div className="h-100 nitro-catalog-layout-info-loyalty text-black flex flex-row">
+            <div className="overflow-auto h-100 flex flex-column info-loyalty-content">
                 <div dangerouslySetInnerHTML={ { __html: page.localization.getText(0) } } />
             </div>
         </div>
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutPets3View.tsx b/src/components/catalog/views/page/layout/CatalogLayoutPets3View.tsx
index 7aec846a..5d5a63cf 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutPets3View.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutPets3View.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { Base, Column, Flex } from '../../../../../common';
+import { Column } from '../../../../../common';
 import { CatalogLayoutProps } from './CatalogLayout.types';
 
 export const CatalogLayoutPets3View: FC<CatalogLayoutProps> = props =>
@@ -10,16 +10,16 @@ export const CatalogLayoutPets3View: FC<CatalogLayoutProps> = props =>
     
     return (
         <Column grow className="bg-muted rounded text-black p-2" overflow="hidden">
-            <Flex alignItems="center" gap={ 2 }>
+            <div className="items-center gap-2">
                 { imageUrl && <img alt="" src={ imageUrl } /> }
-                <Base className="fs-5" dangerouslySetInnerHTML={ { __html: page.localization.getText(1) } } />
-            </Flex>
+                <div className="fs-5" dangerouslySetInnerHTML={ { __html: page.localization.getText(1) } } />
+            </div>
             <Column grow alignItems="center" overflow="auto">
-                <Base dangerouslySetInnerHTML={ { __html: page.localization.getText(2) } } />
+                <div dangerouslySetInnerHTML={ { __html: page.localization.getText(2) } } />
             </Column>
-            <Flex alignItems="center">
-                <Base className="fw-bold" dangerouslySetInnerHTML={ { __html: page.localization.getText(3) } } />
-            </Flex>
+            <div className="flex items-center">
+                <div className="fw-bold" dangerouslySetInnerHTML={ { __html: page.localization.getText(3) } } />
+            </div>
         </Column>
     );
 }
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutRoomAdsView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutRoomAdsView.tsx
index 92dd4bff..a99238aa 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutRoomAdsView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutRoomAdsView.tsx
@@ -1,7 +1,7 @@
 import { GetRoomAdPurchaseInfoComposer, GetUserEventCatsMessageComposer, PurchaseRoomAdMessageComposer, RoomAdPurchaseInfoEvent, RoomEntryData } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { LocalizeText, SendMessageComposer } from '../../../../../api';
-import { Base, Button, Column, Text } from '../../../../../common';
+import { Button, Column, Text } from '../../../../../common';
 import { useCatalog, useMessageEvent, useNavigator, useRoomPromote } from '../../../../../hooks';
 import { CatalogLayoutProps } from './CatalogLayout.types';
 
@@ -73,34 +73,34 @@ export const CatalogLayoutRoomAdsView: FC<CatalogLayoutProps> = props =>
 
     return (<>
         <Text bold center>{ LocalizeText('roomad.catalog_header') }</Text>
-        <Column size={ 12 } overflow="hidden" className="text-black">
-            <Base>{ LocalizeText('roomad.catalog_text', [ 'duration' ], [ '120' ]) }</Base>
-            <Base className="bg-muted rounded p-1">
+        <Column className="text-black" overflow="hidden" size={ 12 }>
+            <div>{ LocalizeText('roomad.catalog_text', [ 'duration' ], [ '120' ]) }</div>
+            <div className="bg-muted rounded p-1">
                 <Column gap={ 2 }>
                     <Text bold>{ LocalizeText('navigator.category') }</Text>
-                    <select className="form-select form-select-sm" value={ categoryId } onChange={ event => setCategoryId(parseInt(event.target.value)) } disabled={ extended }>
+                    <select className="form-select form-select-sm" disabled={ extended } value={ categoryId } onChange={ event => setCategoryId(parseInt(event.target.value)) }>
                         { categories && categories.map((cat, index) => <option key={ index } value={ cat.id }>{ LocalizeText(cat.name) }</option>) }
                     </select>
                 </Column>
-                <Column gap={ 1 }>
+                <div className="flex flex-column gap-1">
                     <Text bold>{ LocalizeText('roomad.catalog_name') }</Text>
-                    <input type="text" className="form-control form-control-sm" maxLength={ 64 } value={ eventName } onChange={ event => setEventName(event.target.value) } readOnly={ extended } />
-                </Column>
-                <Column gap={ 1 }>
+                    <input className="form-control form-control-sm" maxLength={ 64 } readOnly={ extended } type="text" value={ eventName } onChange={ event => setEventName(event.target.value) } />
+                </div>
+                <div className="flex flex-column gap-1">
                     <Text bold>{ LocalizeText('roomad.catalog_description') }</Text>
-                    <textarea className="form-control form-control-sm" maxLength={ 64 } value={ eventDesc } onChange={ event => setEventDesc(event.target.value) } readOnly={ extended } />
-                </Column>
-                <Column gap={ 1 }>
+                    <textarea className="form-control form-control-sm" maxLength={ 64 } readOnly={ extended } value={ eventDesc } onChange={ event => setEventDesc(event.target.value) } />
+                </div>
+                <div className="flex flex-column gap-1">
                     <Text bold>{ LocalizeText('roomad.catalog_roomname') }</Text>
-                    <select className="form-select form-select-sm" value={ roomId } onChange={ event => setRoomId(parseInt(event.target.value)) } disabled={ extended }>
-                        <option value={ -1 } disabled>{ LocalizeText('roomad.catalog_roomname') }</option>
+                    <select className="form-select form-select-sm" disabled={ extended } value={ roomId } onChange={ event => setRoomId(parseInt(event.target.value)) }>
+                        <option disabled value={ -1 }>{ LocalizeText('roomad.catalog_roomname') }</option>
                         { availableRooms && availableRooms.map((room, index) => <option key={ index } value={ room.roomId }>{ room.roomName }</option>) }
                     </select>
-                </Column>
-                <Column gap={ 1 }>
-                    <Button variant={ (!eventName || !eventDesc || roomId === -1) ? 'danger' : 'success' } onClick={ purchaseAd } disabled={ (!eventName || !eventDesc || roomId === -1) }>{ extended ? LocalizeText('roomad.extend.event') : LocalizeText('buy') }</Button>
-                </Column>
-            </Base>
+                </div>
+                <div className="flex flex-column gap-1">
+                    <Button disabled={ (!eventName || !eventDesc || roomId === -1) } variant={ (!eventName || !eventDesc || roomId === -1) ? 'danger' : 'success' } onClick={ purchaseAd }>{ extended ? LocalizeText('roomad.extend.event') : LocalizeText('buy') }</Button>
+                </div>
+            </div>
         </Column>
     </>
     );
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutRoomBundleView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutRoomBundleView.tsx
index 85bd0cf7..81de0fec 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutRoomBundleView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutRoomBundleView.tsx
@@ -15,25 +15,25 @@ export const CatalogLayoutRoomBundleView: FC<CatalogLayoutProps> = props =>
         <>
             <CatalogFirstProductSelectorWidgetView />
             <Grid>
-                <Column size={ 7 } overflow="hidden">
+                <Column overflow="hidden" size={ 7 }>
                     { !!page.localization.getText(2) &&
                         <Text dangerouslySetInnerHTML={ { __html: page.localization.getText(2) } } /> }
-                    <Column grow overflow="hidden" className="bg-muted p-2 rounded">
+                    <Column grow className="bg-muted p-2 rounded" overflow="hidden">
                         <CatalogBundleGridWidgetView fullWidth className="nitro-catalog-layout-bundle-grid" />
                     </Column>
                 </Column>
-                <Column size={ 5 } overflow="hidden" gap={ 1 }>
+                <Column gap={ 1 } overflow="hidden" size={ 5 }>
                     { !!page.localization.getText(1) &&
                         <Text center small overflow="auto">{ page.localization.getText(1) }</Text> }
-                    <Column grow position="relative" overflow="hidden" gap={ 0 }>
+                    <Column grow gap={ 0 } overflow="hidden" position="relative">
                         { !!page.localization.getImage(1) &&
                             <img alt="" className="flex-grow-1" src={ page.localization.getImage(1) } /> }
-                        <CatalogAddOnBadgeWidgetView position="absolute" className="bg-muted rounded bottom-0 start-0" />
-                        <CatalogSimplePriceWidgetView position="absolute" className="bottom-0 end-0" />
+                        <CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-0 start-0" position="absolute" />
+                        <CatalogSimplePriceWidgetView />
                     </Column>
-                    <Column gap={ 1 }>
+                    <div className="flex flex-column gap-1">
                         <CatalogPurchaseWidgetView />
-                    </Column>
+                    </div>
                 </Column>
             </Grid>
         </>
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutSingleBundleView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutSingleBundleView.tsx
index 71988b90..44cd2efc 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutSingleBundleView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutSingleBundleView.tsx
@@ -15,25 +15,25 @@ export const CatalogLayoutSingleBundleView: FC<CatalogLayoutProps> = props =>
         <>
             <CatalogFirstProductSelectorWidgetView />
             <Grid>
-                <Column size={ 7 } overflow="hidden">
+                <Column overflow="hidden" size={ 7 }>
                     { !!page.localization.getText(2) &&
                         <Text dangerouslySetInnerHTML={ { __html: page.localization.getText(2) } } /> }
-                    <Column grow overflow="hidden" className="bg-muted p-2 rounded">
+                    <Column grow className="bg-muted p-2 rounded" overflow="hidden">
                         <CatalogBundleGridWidgetView fullWidth className="nitro-catalog-layout-bundle-grid" />
                     </Column>
                 </Column>
-                <Column size={ 5 } overflow="hidden" gap={ 1 }>
+                <Column gap={ 1 } overflow="hidden" size={ 5 }>
                     { !!page.localization.getText(1) &&
                         <Text center small overflow="auto">{ page.localization.getText(1) }</Text> }
-                    <Column grow position="relative" overflow="hidden" gap={ 0 }>
+                    <Column grow gap={ 0 } overflow="hidden" position="relative">
                         { !!page.localization.getImage(1) &&
                             <img alt="" className="flex-grow-1" src={ page.localization.getImage(1) } /> }
-                        <CatalogAddOnBadgeWidgetView position="absolute" className="bg-muted rounded bottom-0 start-0" />
-                        <CatalogSimplePriceWidgetView position="absolute" className="bottom-0 end-0" />
+                        <CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-0 start-0" position="absolute" />
+                        <CatalogSimplePriceWidgetView />
                     </Column>
-                    <Column gap={ 1 }>
+                    <div className="flex flex-column gap-1">
                         <CatalogPurchaseWidgetView />
-                    </Column>
+                    </div>
                 </Column>
             </Grid>
         </>
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutSoundMachineView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutSoundMachineView.tsx
index 78f08d7c..31ef8aa7 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutSoundMachineView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutSoundMachineView.tsx
@@ -1,7 +1,7 @@
 import { GetOfficialSongIdMessageComposer, GetSoundManager, MusicPriorities, OfficialSongIdMessageEvent } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { GetConfigurationValue, LocalizeText, ProductTypeEnum, SendMessageComposer } from '../../../../../api';
-import { Button, Column, Flex, Grid, LayoutImage, Text } from '../../../../../common';
+import { Button, Column, Grid, LayoutImage, Text } from '../../../../../common';
 import { useCatalog, useMessageEvent } from '../../../../../hooks';
 import { CatalogHeaderView } from '../../catalog-header/CatalogHeaderView';
 import { CatalogAddOnBadgeWidgetView } from '../widgets/CatalogAddOnBadgeWidgetView';
@@ -70,12 +70,12 @@ export const CatalogLayoutSoundMachineView: FC<CatalogLayoutProps> = props =>
     return (
         <>
             <Grid>
-                <Column size={ 7 } overflow="hidden">
+                <Column overflow="hidden" size={ 7 }>
                     { GetConfigurationValue('catalog.headers') &&
                         <CatalogHeaderView imageUrl={ currentPage.localization.getImage(0) }/> }
                     <CatalogItemGridWidgetView />
                 </Column>
-                <Column center={ !currentOffer } size={ 5 } overflow="hidden">
+                <Column center={ !currentOffer } overflow="hidden" size={ 5 }>
                     { !currentOffer &&
                         <>
                             { !!page.localization.getImage(1) &&
@@ -84,25 +84,25 @@ export const CatalogLayoutSoundMachineView: FC<CatalogLayoutProps> = props =>
                         </> }
                     { currentOffer &&
                         <>
-                            <Flex center overflow="hidden" style={ { height: 140 } }>
+                            <div className="flex items-center justify-center overflow-hidden" style={ { height: 140 } }>
                                 { (currentOffer.product.productType !== ProductTypeEnum.BADGE) &&
                                     <>
                                         <CatalogViewProductWidgetView />
                                         <CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-1 end-1" />
                                     </> }
                                 { (currentOffer.product.productType === ProductTypeEnum.BADGE) && <CatalogAddOnBadgeWidgetView className="scale-2" /> }
-                            </Flex>
+                            </div>
                             <Column grow gap={ 1 }>
-                                <CatalogLimitedItemWidgetView fullWidth />
+                                <CatalogLimitedItemWidgetView />
                                 <Text grow truncate>{ currentOffer.localizationName }</Text>
                                 { songId > -1 && <Button onClick={ () => previewSong(songId) }>{ LocalizeText('play_preview_button') }</Button>
                                 }
-                                <Flex justifyContent="between">
-                                    <Column gap={ 1 }>
+                                <div className="flex justify-content-between">
+                                    <div className="flex flex-column gap-1">
                                         <CatalogSpinnerWidgetView />
-                                    </Column>
-                                    <CatalogTotalPriceWidget justifyContent="end" alignItems="end" />
-                                </Flex>
+                                    </div>
+                                    <CatalogTotalPriceWidget alignItems="end" justifyContent="end" />
+                                </div>
                                 <CatalogPurchaseWidgetView />
                             </Column>
                         </> }
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutSpacesView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutSpacesView.tsx
index 5ab9fdf7..5252b97a 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutSpacesView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutSpacesView.tsx
@@ -1,5 +1,5 @@
 import { FC, useEffect } from 'react';
-import { Base, Column, Flex, Grid, Text } from '../../../../../common';
+import { Column, Grid, Text } from '../../../../../common';
 import { useCatalog } from '../../../../../hooks';
 import { CatalogPurchaseWidgetView } from '../widgets/CatalogPurchaseWidgetView';
 import { CatalogSpacesWidgetView } from '../widgets/CatalogSpacesWidgetView';
@@ -19,10 +19,10 @@ export const CatalogLayoutSpacesView: FC<CatalogLayoutProps> = props =>
 
     return (
         <Grid>
-            <Column size={ 7 } overflow="hidden">
+            <Column overflow="hidden" size={ 7 }>
                 <CatalogSpacesWidgetView />
             </Column>
-            <Column center={ !currentOffer } size={ 5 } overflow="hidden">
+            <Column center={ !currentOffer } overflow="hidden" size={ 5 }>
                 { !currentOffer &&
                     <>
                         { !!page.localization.getImage(1) && <img alt="" src={ page.localization.getImage(1) } /> }
@@ -30,14 +30,14 @@ export const CatalogLayoutSpacesView: FC<CatalogLayoutProps> = props =>
                     </> }
                 { currentOffer &&
                     <>
-                        <Base position="relative" overflow="hidden">
+                        <div className="position-relative overflow-hidden">
                             <CatalogViewProductWidgetView />
-                        </Base>
+                        </div>
                         <Column grow gap={ 1 }>
                             <Text grow truncate>{ currentOffer.localizationName }</Text>
-                            <Flex justifyContent="end">
+                            <div className="flex justify-content-end">
                                 <CatalogTotalPriceWidget alignItems="end" />
-                            </Flex>
+                            </div>
                             <CatalogPurchaseWidgetView />
                         </Column>
                     </> }
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutTrophiesView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutTrophiesView.tsx
index 5db43b78..89c33dcd 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutTrophiesView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutTrophiesView.tsx
@@ -1,5 +1,5 @@
 import { FC, useEffect, useState } from 'react';
-import { Column, Flex, Grid, Text } from '../../../../../common';
+import { Column, Grid, Text } from '../../../../../common';
 import { useCatalog } from '../../../../../hooks';
 import { CatalogItemGridWidgetView } from '../widgets/CatalogItemGridWidgetView';
 import { CatalogPurchaseWidgetView } from '../widgets/CatalogPurchaseWidgetView';
@@ -29,11 +29,11 @@ export const CatalogLayoutTrophiesView: FC<CatalogLayoutProps> = props =>
 
     return (
         <Grid>
-            <Column size={ 7 } overflow="hidden">
+            <Column overflow="hidden" size={ 7 }>
                 <CatalogItemGridWidgetView />
                 <textarea className="flex-grow-1 form-control w-100" defaultValue={ trophyText || '' } onChange={ event => setTrophyText(event.target.value) } />
             </Column>
-            <Column center={ !currentOffer } size={ 5 } overflow="hidden">
+            <Column center={ !currentOffer } overflow="hidden" size={ 5 }>
                 { !currentOffer &&
                     <>
                         { !!page.localization.getImage(1) && <img alt="" src={ page.localization.getImage(1) } /> }
@@ -44,9 +44,9 @@ export const CatalogLayoutTrophiesView: FC<CatalogLayoutProps> = props =>
                         <CatalogViewProductWidgetView />
                         <Column grow gap={ 1 }>
                             <Text grow truncate>{ currentOffer.localizationName }</Text>
-                            <Flex justifyContent="end">
+                            <div className="flex justify-content-end">
                                 <CatalogTotalPriceWidget alignItems="end" />
-                            </Flex>
+                            </div>
                             <CatalogPurchaseWidgetView />
                         </Column>
                     </> }
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutVipBuyView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutVipBuyView.tsx
index 44fca5c4..2363408e 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutVipBuyView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutVipBuyView.tsx
@@ -2,7 +2,7 @@ import { ClubOfferData, GetClubOffersMessageComposer, PurchaseFromCatalogCompose
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { CatalogPurchaseState, LocalizeText, SendMessageComposer } from '../../../../../api';
 import { AutoGrid, Button, Column, Flex, Grid, LayoutCurrencyIcon, LayoutGridItem, LayoutLoadingSpinnerView, Text } from '../../../../../common';
-import { CatalogEvent, CatalogPurchasedEvent, CatalogPurchaseFailureEvent } from '../../../../../events';
+import { CatalogEvent, CatalogPurchaseFailureEvent, CatalogPurchasedEvent } from '../../../../../events';
 import { useCatalog, usePurse, useUiEvent } from '../../../../../hooks';
 import { CatalogLayoutProps } from './CatalogLayout.types';
 
@@ -114,9 +114,9 @@ export const CatalogLayoutVipBuyView: FC<CatalogLayoutProps> = props =>
             case CatalogPurchaseState.CONFIRM:
                 return <Button fullWidth variant="warning" onClick={ purchaseSubscription }>{ LocalizeText('catalog.marketplace.confirm_title') }</Button>;
             case CatalogPurchaseState.PURCHASE:
-                return <Button fullWidth variant="primary" disabled><LayoutLoadingSpinnerView /></Button>;
+                return <Button disabled fullWidth variant="primary"><LayoutLoadingSpinnerView /></Button>;
             case CatalogPurchaseState.FAILED:
-                return <Button fullWidth variant="danger" disabled>{ LocalizeText('generic.failed') }</Button>;
+                return <Button disabled fullWidth variant="danger">{ LocalizeText('generic.failed') }</Button>;
             case CatalogPurchaseState.NONE:
             default:
                 return <Button fullWidth variant="success" onClick={ () => setPurchaseState(CatalogPurchaseState.CONFIRM) }>{ LocalizeText('buy') }</Button>;
@@ -130,23 +130,23 @@ export const CatalogLayoutVipBuyView: FC<CatalogLayoutProps> = props =>
 
     return (
         <Grid>
-            <Column fullHeight size={ 7 } overflow="hidden" justifyContent="between">
-                <AutoGrid columnCount={ 1 } className="nitro-catalog-layout-vip-buy-grid">
+            <Column fullHeight justifyContent="between" overflow="hidden" size={ 7 }>
+                <AutoGrid className="nitro-catalog-layout-vip-buy-grid" columnCount={ 1 }>
                     { clubOffers && (clubOffers.length > 0) && clubOffers.map((offer, index) =>
                     {
                         return (
-                            <LayoutGridItem key={ index } column={ false } center={ false } alignItems="center" justifyContent="between" itemActive={ pendingOffer === offer } className="p-1" onClick={ () => setOffer(offer) }>
+                            <LayoutGridItem key={ index } alignItems="center" center={ false } className="p-1" column={ false } itemActive={ pendingOffer === offer } justifyContent="between" onClick={ () => setOffer(offer) }>
                                 <i className="icon-hc-banner" />
-                                <Column justifyContent="end" gap={ 0 }>
+                                <Column gap={ 0 } justifyContent="end">
                                     <Text textEnd>{ getOfferText(offer) }</Text>
-                                    <Flex justifyContent="end" gap={ 1 }>
+                                    <Flex gap={ 1 } justifyContent="end">
                                         { (offer.priceCredits > 0) &&
-                                        <Flex alignItems="center" justifyContent="end" gap={ 1 }>
+                                        <Flex alignItems="center" gap={ 1 } justifyContent="end">
                                             <Text>{ offer.priceCredits }</Text>
                                             <LayoutCurrencyIcon type={ -1 } />
                                         </Flex> }
                                         { (offer.priceActivityPoints > 0) &&
-                                        <Flex alignItems="center" justifyContent="end" gap={ 1 }>
+                                        <Flex alignItems="center" gap={ 1 } justifyContent="end">
                                             <Text>{ offer.priceActivityPoints }</Text>
                                             <LayoutCurrencyIcon type={ offer.priceActivityPointsType } />
                                         </Flex> }
@@ -158,10 +158,10 @@ export const CatalogLayoutVipBuyView: FC<CatalogLayoutProps> = props =>
                 </AutoGrid>
                 <Text center dangerouslySetInnerHTML={ { __html: LocalizeText('catalog.vip.buy.hccenter') } }></Text>
             </Column>
-            <Column size={ 5 } overflow="hidden">
-                <Column fullHeight center overflow="hidden">
+            <Column overflow="hidden" size={ 5 }>
+                <Column center fullHeight overflow="hidden">
                     { currentPage.localization.getImage(1) && <img alt="" src={ currentPage.localization.getImage(1) } /> }
-                    <Text center overflow="auto" dangerouslySetInnerHTML={ { __html: getSubscriptionDetails } } />
+                    <Text center dangerouslySetInnerHTML={ { __html: getSubscriptionDetails } } overflow="auto" />
                 </Column>
                 { pendingOffer &&
                     <Column fullWidth grow justifyContent="end">
@@ -170,18 +170,18 @@ export const CatalogLayoutVipBuyView: FC<CatalogLayoutProps> = props =>
                                 <Text fontWeight="bold">{ getPurchaseHeader() }</Text>
                                 <Text>{ getPurchaseValidUntil() }</Text>
                             </Column>
-                            <Column gap={ 1 }>
+                            <div className="flex flex-column gap-1">
                                 { (pendingOffer.priceCredits > 0) &&
-                                    <Flex alignItems="center" justifyContent="end" gap={ 1 }>
+                                    <Flex alignItems="center" gap={ 1 } justifyContent="end">
                                         <Text>{ pendingOffer.priceCredits }</Text>
                                         <LayoutCurrencyIcon type={ -1 } />
                                     </Flex> }
                                 { (pendingOffer.priceActivityPoints > 0) &&
-                                    <Flex alignItems="center" justifyContent="end" gap={ 1 }>
+                                    <Flex alignItems="center" gap={ 1 } justifyContent="end">
                                         <Text>{ pendingOffer.priceActivityPoints }</Text>
                                         <LayoutCurrencyIcon type={ pendingOffer.priceActivityPointsType } />
                                     </Flex> }
-                            </Column>
+                            </div>
                         </Flex>
                         { getPurchaseButton() }
                     </Column> }
diff --git a/src/components/catalog/views/page/layout/frontpage4/CatalogLayoutFrontPageItemView.tsx b/src/components/catalog/views/page/layout/frontpage4/CatalogLayoutFrontPageItemView.tsx
index 4db787ae..a5153841 100644
--- a/src/components/catalog/views/page/layout/frontpage4/CatalogLayoutFrontPageItemView.tsx
+++ b/src/components/catalog/views/page/layout/frontpage4/CatalogLayoutFrontPageItemView.tsx
@@ -27,8 +27,8 @@ export const CatalogLayoutFrontPageItemView: FC<CatalogLayoutFrontPageItemViewPr
     const imageUrl = (GetConfigurationValue<string>('image.library.url') + item.itemPromoImage);
 
     return (
-        <LayoutBackgroundImage imageUrl={ imageUrl } classNames={ getClassNames } position={ position } fullHeight={ fullHeight } pointer={ pointer } overflow={ overflow } { ...rest }>
-            <Text position="absolute" variant="white" className="bg-dark rounded p-2 m-2 bottom-0">
+        <LayoutBackgroundImage classNames={ getClassNames } fullHeight={ fullHeight } imageUrl={ imageUrl } overflow={ overflow } pointer={ pointer } position={ position } { ...rest }>
+            <Text className="bg-dark rounded p-2 m-2 bottom-0" position="absolute" variant="white">
                 { item.itemName }
             </Text>
             { children }
diff --git a/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceItemView.tsx b/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceItemView.tsx
index 1f19b6bf..834d2052 100644
--- a/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceItemView.tsx
+++ b/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceItemView.tsx
@@ -1,5 +1,5 @@
 import { FC, useCallback, useMemo } from 'react';
-import { GetImageIconUrlForProduct, LocalizeText, MarketplaceOfferData, MarketPlaceOfferState, ProductTypeEnum } from '../../../../../../api';
+import { GetImageIconUrlForProduct, LocalizeText, MarketPlaceOfferState, MarketplaceOfferData, ProductTypeEnum } from '../../../../../../api';
 import { Button, Column, LayoutGridItem, Text } from '../../../../../../common';
 
 export interface MarketplaceItemViewProps
@@ -46,7 +46,7 @@ export const CatalogLayoutMarketplaceItemView: FC<MarketplaceItemViewProps> = pr
     }, [ offerData ]);
 
     return (
-        <LayoutGridItem shrink center={ false } column={ false } alignItems="center" className="p-1">
+        <LayoutGridItem shrink alignItems="center" center={ false } className="p-1" column={ false }>
             <Column style={ { width: 40, height: 40 } }>
                 <LayoutGridItem column={ false } itemImage={ GetImageIconUrlForProduct(((offerData.furniType === MarketplaceOfferData.TYPE_FLOOR) ? ProductTypeEnum.FLOOR : ProductTypeEnum.WALL), offerData.furniId, offerData.extraData) } itemUniqueNumber={ offerData.isUniqueLimitedItem ? offerData.stuffData.uniqueNumber : 0 } />
             </Column>
@@ -63,7 +63,7 @@ export const CatalogLayoutMarketplaceItemView: FC<MarketplaceItemViewProps> = pr
                         <Text>{ LocalizeText('catalog.marketplace.offer_count', [ 'count' ], [ offerData.offerCount.toString() ]) }</Text>
                     </> }
             </Column>
-            <Column gap={ 1 }>
+            <div className="flex flex-column gap-1">
                 { ((type === OWN_OFFER) && (offerData.status !== MarketPlaceOfferState.SOLD)) &&
                     <Button variant="secondary" onClick={ () => onClick(offerData) }>
                         { LocalizeText('catalog.marketplace.offer.pick') }
@@ -73,11 +73,11 @@ export const CatalogLayoutMarketplaceItemView: FC<MarketplaceItemViewProps> = pr
                         <Button variant="secondary" onClick={ () => onClick(offerData) }>
                             { LocalizeText('buy') }
                         </Button>
-                        <Button variant="secondary" disabled>
+                        <Button disabled variant="secondary">
                             { LocalizeText('catalog.marketplace.view_more') }
                         </Button>
                     </> }
-            </Column>
+            </div>
         </LayoutGridItem>
     );
 }
diff --git a/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceOwnItemsView.tsx b/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceOwnItemsView.tsx
index b74ab491..a78d40db 100644
--- a/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceOwnItemsView.tsx
+++ b/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceOwnItemsView.tsx
@@ -81,7 +81,7 @@ export const CatalogLayoutMarketplaceOwnItemsView: FC<CatalogLayoutProps> = prop
                     { LocalizeText('catalog.marketplace.redeem.no_sold_items') }
                 </Text> }
             { (creditsWaiting > 0) &&
-                <Column center gap={ 1 } className="bg-muted rounded p-2">
+                <Column center className="bg-muted rounded p-2" gap={ 1 }>
                     <Text>
                         { LocalizeText('catalog.marketplace.redeem.get_credits', [ 'count', 'credits' ], [ soldOffers.length.toString(), creditsWaiting.toString() ]) }
                     </Text>
@@ -90,10 +90,10 @@ export const CatalogLayoutMarketplaceOwnItemsView: FC<CatalogLayoutProps> = prop
                     </Button>
                 </Column> }
             <Column gap={ 1 } overflow="hidden">
-                <Text truncate shrink fontWeight="bold">
+                <Text shrink truncate fontWeight="bold">
                     { LocalizeText('catalog.marketplace.items_found', [ 'count' ], [ offers.length.toString() ]) }
                 </Text>
-                <Column overflow="auto" className="nitro-catalog-layout-marketplace-grid">
+                <Column className="nitro-catalog-layout-marketplace-grid" overflow="auto">
                     { (offers.length > 0) && offers.map(offer => <CatalogLayoutMarketplaceItemView key={ offer.offerId } offerData={ offer } type={ OWN_OFFER } onClick={ takeItemBack } />) }
                 </Column>
             </Column>
diff --git a/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplacePublicItemsView.tsx b/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplacePublicItemsView.tsx
index 1225a0d7..a6326bf9 100644
--- a/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplacePublicItemsView.tsx
+++ b/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplacePublicItemsView.tsx
@@ -1,7 +1,7 @@
 import { BuyMarketplaceOfferMessageComposer, GetMarketplaceOffersMessageComposer, MarketplaceBuyOfferResultEvent, MarketPlaceOffersEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useMemo, useState } from 'react';
 import { IMarketplaceSearchOptions, LocalizeText, MarketplaceOfferData, MarketplaceSearchType, NotificationAlertType, SendMessageComposer } from '../../../../../../api';
-import { Button, ButtonGroup, Column, Text } from '../../../../../../common';
+import { Button, Column, Text } from '../../../../../../common';
 import { useMessageEvent, useNotification, usePurse } from '../../../../../../hooks';
 import { CatalogLayoutProps } from '../CatalogLayout.types';
 import { CatalogLayoutMarketplaceItemView, PUBLIC_OFFER } from './CatalogLayoutMarketplaceItemView';
@@ -134,7 +134,7 @@ export const CatalogLayoutMarketplacePublicItemsView: FC<CatalogLayoutMarketplac
     
     return (
         <>
-            <ButtonGroup>
+            <div className="btn-group">
                 <Button active={ (searchType === MarketplaceSearchType.BY_ACTIVITY) } onClick={ () => setSearchType(MarketplaceSearchType.BY_ACTIVITY) }>
                     { LocalizeText('catalog.marketplace.search_by_activity') }
                 </Button>
@@ -144,10 +144,10 @@ export const CatalogLayoutMarketplacePublicItemsView: FC<CatalogLayoutMarketplac
                 <Button active={ (searchType === MarketplaceSearchType.ADVANCED) } onClick={ () => setSearchType(MarketplaceSearchType.ADVANCED) }>
                     { LocalizeText('catalog.marketplace.search_advanced') }
                 </Button>
-            </ButtonGroup>
-            <SearchFormView sortTypes={ getSortTypes } searchType={ searchType } onSearch={ requestOffers } />
+            </div>
+            <SearchFormView searchType={ searchType } sortTypes={ getSortTypes } onSearch={ requestOffers } />
             <Column gap={ 1 } overflow="hidden">
-                <Text truncate shrink fontWeight="bold">
+                <Text shrink truncate fontWeight="bold">
                     { LocalizeText('catalog.marketplace.items_found', [ 'count' ], [ offers.size.toString() ]) }
                 </Text>
                 <Column className="nitro-catalog-layout-marketplace-grid" overflow="auto">
diff --git a/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceSearchFormView.tsx b/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceSearchFormView.tsx
index e07a7b2b..4eb82b3f 100644
--- a/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceSearchFormView.tsx
+++ b/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceSearchFormView.tsx
@@ -1,6 +1,6 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import { IMarketplaceSearchOptions, LocalizeText, MarketplaceSearchType } from '../../../../../../api';
-import { Button, Column, Flex, Text } from '../../../../../../common';
+import { Button, Text } from '../../../../../../common';
 
 export interface SearchFormViewProps
 {
@@ -44,28 +44,28 @@ export const SearchFormView: FC<SearchFormViewProps> = props =>
     }, [ onSearch, searchType, sortTypes ]);
 
     return (
-        <Column gap={ 1 }>
-            <Flex alignItems="center" gap={ 1 }>
+        <div className="flex flex-column gap-1">
+            <div className="flex items-center gap-1">
                 <Text className="col-3">{ LocalizeText('catalog.marketplace.sort_order') }</Text>
                 <select className="form-select form-select-sm" value={ sortType } onChange={ event => onSortTypeChange(parseInt(event.target.value)) }>
                     { sortTypes.map(type => <option key={ type } value={ type }>{ LocalizeText(`catalog.marketplace.sort.${ type }`) }</option>) }
                 </select>
-            </Flex>
+            </div>
             { searchType === MarketplaceSearchType.ADVANCED &&
                 <>
-                    <Flex alignItems="center" gap={ 1 }>
+                    <div className="flex items-center gap-1">
                         <Text className="col-3">{ LocalizeText('catalog.marketplace.search_name') }</Text>
                         <input className="form-control form-control-sm" type="text" value={ searchQuery } onChange={ event => setSearchQuery(event.target.value) }/>
-                    </Flex>
-                    <Flex alignItems="center" gap={ 1 }>
+                    </div>
+                    <div className="flex items-center gap-1">
                         <Text className="col-3">{ LocalizeText('catalog.marketplace.search_price') }</Text>
-                        <Flex fullWidth gap={ 1 }>
-                            <input className="form-control form-control-sm" type="number" min={ 0 } value={ min } onChange={ event => setMin(event.target.valueAsNumber) } />
-                            <input className="form-control form-control-sm" type="number" min={ 0 } value={ max } onChange={ event => setMax(event.target.valueAsNumber) } />
-                        </Flex>
-                    </Flex>
-                    <Button variant="secondary" className="mx-auto" onClick={ onClickSearch }>{ LocalizeText('generic.search') }</Button>
+                        <div className="flex w-100 gap-1">
+                            <input className="form-control form-control-sm" min={ 0 } type="number" value={ min } onChange={ event => setMin(event.target.valueAsNumber) } />
+                            <input className="form-control form-control-sm" min={ 0 } type="number" value={ max } onChange={ event => setMax(event.target.valueAsNumber) } />
+                        </div>
+                    </div>
+                    <Button className="mx-auto" variant="secondary" onClick={ onClickSearch }>{ LocalizeText('generic.search') }</Button>
                 </> }
-        </Column>
+        </div>
     );
 }
diff --git a/src/components/catalog/views/page/layout/marketplace/MarketplacePostOfferView.tsx b/src/components/catalog/views/page/layout/marketplace/MarketplacePostOfferView.tsx
index 9c649fe0..7c5e883d 100644
--- a/src/components/catalog/views/page/layout/marketplace/MarketplacePostOfferView.tsx
+++ b/src/components/catalog/views/page/layout/marketplace/MarketplacePostOfferView.tsx
@@ -1,7 +1,7 @@
 import { GetMarketplaceConfigurationMessageComposer, MakeOfferMessageComposer, MarketplaceConfigurationEvent } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { FurnitureItem, LocalizeText, ProductTypeEnum, SendMessageComposer } from '../../../../../../api';
-import { Base, Button, Column, Grid, LayoutFurniImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../../../common';
+import { Button, Column, Grid, LayoutFurniImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../../../common';
 import { CatalogPostMarketplaceOfferEvent } from '../../../../../../events';
 import { useCatalog, useMessageEvent, useNotification, useUiEvent } from '../../../../../../hooks';
 
@@ -82,32 +82,32 @@ export const MarketplacePostOfferView : FC<{}> = props =>
             <NitroCardHeaderView headerText={ LocalizeText('inventory.marketplace.make_offer.title') } onCloseClick={ event => setItem(null) } />
             <NitroCardContentView overflow="hidden">
                 <Grid fullHeight>
-                    <Column center className="bg-muted rounded p-2" size={ 4 } overflow="hidden">
-                        <LayoutFurniImageView productType={ item.isWallItem ? ProductTypeEnum.WALL : ProductTypeEnum.FLOOR } productClassId={ item.type } extraData={ item.extra.toString() } />
+                    <Column center className="bg-muted rounded p-2" overflow="hidden" size={ 4 }>
+                        <LayoutFurniImageView extraData={ item.extra.toString() } productClassId={ item.type } productType={ item.isWallItem ? ProductTypeEnum.WALL : ProductTypeEnum.FLOOR } />
                     </Column>
-                    <Column size={ 8 } justifyContent="between" overflow="hidden">
+                    <Column justifyContent="between" overflow="hidden" size={ 8 }>
                         <Column grow gap={ 1 }>
                             <Text fontWeight="bold">{ getFurniTitle }</Text>
-                            <Text truncate shrink>{ getFurniDescription }</Text>
+                            <Text shrink truncate>{ getFurniDescription }</Text>
                         </Column>
                         <Column overflow="auto">
                             <Text italics>
                                 { LocalizeText('inventory.marketplace.make_offer.expiration_info', [ 'time' ], [ marketplaceConfiguration.offerTime.toString() ]) }
                             </Text>
                             <div className="input-group has-validation">
-                                <input className="form-control form-control-sm" type="number" min={ 0 } value={ tempAskingPrice } onChange={ event => updateAskingPrice(event.target.value) } placeholder={ LocalizeText('inventory.marketplace.make_offer.price_request') } />
+                                <input className="form-control form-control-sm" min={ 0 } placeholder={ LocalizeText('inventory.marketplace.make_offer.price_request') } type="number" value={ tempAskingPrice } onChange={ event => updateAskingPrice(event.target.value) } />
                                 { ((askingPrice < marketplaceConfiguration.minimumPrice) || isNaN(askingPrice)) &&
-                                    <Base className="invalid-feedback d-block">
+                                    <div className="invalid-feedback d-block">
                                         { LocalizeText('inventory.marketplace.make_offer.min_price', [ 'minprice' ], [ marketplaceConfiguration.minimumPrice.toString() ]) }
-                                    </Base> }
+                                    </div> }
                                 { ((askingPrice > marketplaceConfiguration.maximumPrice) && !isNaN(askingPrice)) &&
-                                    <Base className="invalid-feedback d-block">
+                                    <div className="invalid-feedback d-block">
                                         { LocalizeText('inventory.marketplace.make_offer.max_price', [ 'maxprice' ], [ marketplaceConfiguration.maximumPrice.toString() ]) }
-                                    </Base> }
+                                    </div> }
                                 { (!((askingPrice < marketplaceConfiguration.minimumPrice) || (askingPrice > marketplaceConfiguration.maximumPrice) || isNaN(askingPrice))) &&
-                                    <Base className="invalid-feedback d-block">
+                                    <div className="invalid-feedback d-block">
                                         { LocalizeText('inventory.marketplace.make_offer.final_price', [ 'commission', 'finalprice' ], [ getCommission().toString(), (askingPrice + getCommission()).toString() ]) }
-                                    </Base> }
+                                    </div> }
                             </div>
                             <Button disabled={ ((askingPrice < marketplaceConfiguration.minimumPrice) || (askingPrice > marketplaceConfiguration.maximumPrice) || isNaN(askingPrice)) } onClick={ postItem }>
                                 { LocalizeText('inventory.marketplace.make_offer.post') }
diff --git a/src/components/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx b/src/components/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx
index fc03982f..29468dea 100644
--- a/src/components/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx
+++ b/src/components/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx
@@ -2,7 +2,7 @@ import { ApproveNameMessageComposer, ApproveNameMessageEvent, ColorConverter, Ge
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { FaFillDrip } from 'react-icons/fa';
 import { DispatchUiEvent, GetPetAvailableColors, GetPetIndexFromLocalization, LocalizeText, SendMessageComposer } from '../../../../../../api';
-import { AutoGrid, Base, Button, Column, Flex, Grid, LayoutGridItem, LayoutPetImageView, Text } from '../../../../../../common';
+import { AutoGrid, Button, Column, Grid, LayoutGridItem, LayoutPetImageView, Text } from '../../../../../../common';
 import { CatalogPurchaseFailureEvent } from '../../../../../../events';
 import { useCatalog, useMessageEvent } from '../../../../../../hooks';
 import { CatalogAddOnBadgeWidgetView } from '../../widgets/CatalogAddOnBadgeWidgetView';
@@ -195,20 +195,20 @@ export const CatalogLayoutPetView: FC<CatalogLayoutProps> = props =>
 
     return (
         <Grid>
-            <Column size={ 7 } overflow="hidden">
+            <Column overflow="hidden" size={ 7 }>
                 <AutoGrid columnCount={ 5 }>
                     { !colorsShowing && (sellablePalettes.length > 0) && sellablePalettes.map((palette, index) =>
                     {
                         return (
                             <LayoutGridItem key={ index } itemActive={ (selectedPaletteIndex === index) } onClick={ event => setSelectedPaletteIndex(index) }>
-                                <LayoutPetImageView typeId={ petIndex } paletteId={ palette.paletteId } direction={ 2 } headOnly={ true } />
+                                <LayoutPetImageView direction={ 2 } headOnly={ true } paletteId={ palette.paletteId } typeId={ petIndex } />
                             </LayoutGridItem>
                         );
                     }) }
-                    { colorsShowing && (sellableColors.length > 0) && sellableColors.map((colorSet, index) => <LayoutGridItem itemHighlight key={ index } itemActive={ (selectedColorIndex === index) } itemColor={ ColorConverter.int2rgb(colorSet[0]) } className="clear-bg" onClick={ event => setSelectedColorIndex(index) } />) }
+                    { colorsShowing && (sellableColors.length > 0) && sellableColors.map((colorSet, index) => <LayoutGridItem key={ index } itemHighlight className="clear-bg" itemActive={ (selectedColorIndex === index) } itemColor={ ColorConverter.int2rgb(colorSet[0]) } onClick={ event => setSelectedColorIndex(index) } />) }
                 </AutoGrid>
             </Column>
-            <Column center={ !currentOffer } size={ 5 } overflow="hidden">
+            <Column center={ !currentOffer } overflow="hidden" size={ 5 }>
                 { !currentOffer &&
                     <>
                         { !!page.localization.getImage(1) && <img alt="" src={ page.localization.getImage(1) } /> }
@@ -216,24 +216,24 @@ export const CatalogLayoutPetView: FC<CatalogLayoutProps> = props =>
                     </> }
                 { currentOffer &&
                     <>
-                        <Base position="relative" overflow="hidden">
+                        <div className="position-relative overflow-hidden">
                             <CatalogViewProductWidgetView />
-                            <CatalogAddOnBadgeWidgetView position="absolute" className="bg-muted rounded bottom-1 end-1" />
+                            <CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-1 end-1" position="absolute" />
                             { ((petIndex > -1) && (petIndex <= 7)) &&
-                                <Button position="absolute" className="bottom-1 start-1" onClick={ event => setColorsShowing(!colorsShowing) }>
+                                <Button className="bottom-1 start-1" position="absolute" onClick={ event => setColorsShowing(!colorsShowing) }>
                                     <FaFillDrip className="fa-icon" />
                                 </Button> }
-                        </Base>
+                        </div>
                         <Column grow gap={ 1 }>
                             <Text truncate>{ petBreedName }</Text>
                             <Column grow gap={ 1 }>
-                                <input type="text" className="form-control form-control-sm w-100" placeholder={ LocalizeText('widgets.petpackage.name.title') } value={ petName } onChange={ event => setPetName(event.target.value) } />
+                                <input className="form-control form-control-sm w-100" placeholder={ LocalizeText('widgets.petpackage.name.title') } type="text" value={ petName } onChange={ event => setPetName(event.target.value) } />
                                 { (approvalResult > 0) &&
-                                    <Base className="invalid-feedback d-block m-0">{ validationErrorMessage }</Base> }
+                                    <div className="invalid-feedback d-block m-0">{ validationErrorMessage }</div> }
                             </Column>
-                            <Flex justifyContent="end">
-                                <CatalogTotalPriceWidget justifyContent="end" alignItems="end" />
-                            </Flex>
+                            <div className="flex justify-content-end">
+                                <CatalogTotalPriceWidget alignItems="end" justifyContent="end" />
+                            </div>
                             <CatalogPurchaseWidgetView purchaseCallback={ purchasePet } />
                         </Column>
                     </> }
diff --git a/src/components/catalog/views/page/layout/vip-gifts/CatalogLayoutVipGiftsView.tsx b/src/components/catalog/views/page/layout/vip-gifts/CatalogLayoutVipGiftsView.tsx
index 44119250..f3bd0d6a 100644
--- a/src/components/catalog/views/page/layout/vip-gifts/CatalogLayoutVipGiftsView.tsx
+++ b/src/components/catalog/views/page/layout/vip-gifts/CatalogLayoutVipGiftsView.tsx
@@ -53,9 +53,9 @@ export const CatalogLayoutVipGiftsView: FC<CatalogLayoutProps> = props =>
     
     return (
         <>
-            <Text truncate shrink fontWeight="bold">{ giftsAvailable() }</Text>
-            <AutoGrid columnCount={ 1 } className="nitro-catalog-layout-vip-gifts-grid">
-                { (clubGifts.offers.length > 0) && sortGifts.map(offer => <VipGiftItem key={ offer.offerId } offer={ offer } isAvailable={ (clubGifts.getOfferExtraData(offer.offerId).isSelectable && (clubGifts.giftsAvailable > 0)) } onSelect={ selectGift } daysRequired={ clubGifts.getOfferExtraData(offer.offerId).daysRequired }/>) }
+            <Text shrink truncate fontWeight="bold">{ giftsAvailable() }</Text>
+            <AutoGrid className="nitro-catalog-layout-vip-gifts-grid" columnCount={ 1 }>
+                { (clubGifts.offers.length > 0) && sortGifts.map(offer => <VipGiftItem key={ offer.offerId } daysRequired={ clubGifts.getOfferExtraData(offer.offerId).daysRequired } isAvailable={ (clubGifts.getOfferExtraData(offer.offerId).isSelectable && (clubGifts.giftsAvailable > 0)) } offer={ offer } onSelect={ selectGift }/>) }
             </AutoGrid>
         </>
     )
diff --git a/src/components/catalog/views/page/layout/vip-gifts/VipGiftItemView.tsx b/src/components/catalog/views/page/layout/vip-gifts/VipGiftItemView.tsx
index e5798e82..c54c5b40 100644
--- a/src/components/catalog/views/page/layout/vip-gifts/VipGiftItemView.tsx
+++ b/src/components/catalog/views/page/layout/vip-gifts/VipGiftItemView.tsx
@@ -52,10 +52,10 @@ export const VipGiftItem : FC<VipGiftItemViewProps> = props =>
     },[ daysRequired ]);
 
     return (
-        <LayoutGridItem center={ false } column={ false } alignItems="center" className="p-1">
+        <LayoutGridItem alignItems="center" center={ false } className="p-1" column={ false }>
             <LayoutImage imageUrl={ getImageUrlForOffer() } />
             <Text grow fontWeight="bold">{ getItemTitle() }</Text>
-            <Button variant="secondary" onClick={ () => onSelect(offer.localizationId) } disabled={ !isAvailable }>
+            <Button disabled={ !isAvailable } variant="secondary" onClick={ () => onSelect(offer.localizationId) }>
                 { LocalizeText('catalog.club_gift.select') }
             </Button>
         </LayoutGridItem>
diff --git a/src/components/catalog/views/page/widgets/CatalogBundleGridWidgetView.tsx b/src/components/catalog/views/page/widgets/CatalogBundleGridWidgetView.tsx
index 84039c93..c234f3fa 100644
--- a/src/components/catalog/views/page/widgets/CatalogBundleGridWidgetView.tsx
+++ b/src/components/catalog/views/page/widgets/CatalogBundleGridWidgetView.tsx
@@ -21,8 +21,8 @@ export const CatalogBundleGridWidgetView: FC<CatalogBundleGridWidgetViewProps> =
     if(!currentOffer) return null;
 
     return (
-        <AutoGrid innerRef={ elementRef } columnCount={ 5 } { ...rest }>
-            { currentOffer.products && (currentOffer.products.length > 0) && currentOffer.products.map((product, index) => <LayoutGridItem key={ index } itemImage={ product.getIconUrl() } itemCount={ product.productCount } />) }
+        <AutoGrid columnCount={ 5 } innerRef={ elementRef } { ...rest }>
+            { currentOffer.products && (currentOffer.products.length > 0) && currentOffer.products.map((product, index) => <LayoutGridItem key={ index } itemCount={ product.productCount } itemImage={ product.getIconUrl() } />) }
             { children }
         </AutoGrid>
     );
diff --git a/src/components/catalog/views/page/widgets/CatalogGuildSelectorWidgetView.tsx b/src/components/catalog/views/page/widgets/CatalogGuildSelectorWidgetView.tsx
index d097bd36..c695d0c4 100644
--- a/src/components/catalog/views/page/widgets/CatalogGuildSelectorWidgetView.tsx
+++ b/src/components/catalog/views/page/widgets/CatalogGuildSelectorWidgetView.tsx
@@ -1,7 +1,7 @@
 import { CatalogGroupsComposer, StringDataType } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useMemo, useState } from 'react';
 import { LocalizeText, SendMessageComposer } from '../../../../../api';
-import { Base, Button, Flex } from '../../../../../common';
+import { Button, Flex } from '../../../../../common';
 import { useCatalog } from '../../../../../hooks';
 
 export const CatalogGuildSelectorWidgetView: FC<{}> = props =>
@@ -49,27 +49,27 @@ export const CatalogGuildSelectorWidgetView: FC<{}> = props =>
     if(!groups || !groups.length)
     {
         return (
-            <Base className="bg-muted rounded p-1 text-black text-center">
+            <div className="bg-muted rounded p-1 text-black text-center">
                 { LocalizeText('catalog.guild_selector.members_only') }
                 <Button className="mt-1">
                     { LocalizeText('catalog.guild_selector.find_groups') }
                 </Button>
-            </Base>
+            </div>
         );
     }
 
     const selectedGroup = groups[selectedGroupIndex];
 
     return (
-        <Flex gap={ 1 }>
+        <div className="flex gap-1">
             { !!selectedGroup &&
-                <Flex overflow="hidden" className="rounded border">
-                    <Base fullHeight style={ { width: '20px', backgroundColor: '#' + selectedGroup.colorA } } />
-                    <Base fullHeight style={ { width: '20px', backgroundColor: '#' + selectedGroup.colorB } } />
+                <Flex className="rounded border" overflow="hidden">
+                    <div className="h-100" style={ { width: '20px', backgroundColor: '#' + selectedGroup.colorA } } />
+                    <div className="h-100" style={ { width: '20px', backgroundColor: '#' + selectedGroup.colorB } } />
                 </Flex> }
             <select className="form-select form-select-sm" value={ selectedGroupIndex } onChange={ event => setSelectedGroupIndex(parseInt(event.target.value)) }>
                 { groups.map((group, index) => <option key={ index } value={ index }>{ group.groupName }</option>) }
             </select>
-        </Flex>
+        </div>
     );
 }
diff --git a/src/components/catalog/views/page/widgets/CatalogItemGridWidgetView.tsx b/src/components/catalog/views/page/widgets/CatalogItemGridWidgetView.tsx
index e4660545..8b0ecb06 100644
--- a/src/components/catalog/views/page/widgets/CatalogItemGridWidgetView.tsx
+++ b/src/components/catalog/views/page/widgets/CatalogItemGridWidgetView.tsx
@@ -44,7 +44,7 @@ export const CatalogItemGridWidgetView: FC<CatalogItemGridWidgetViewProps> = pro
     }
 
     return (
-        <AutoGrid innerRef={ elementRef } columnCount={ columnCount } { ...rest }>
+        <AutoGrid columnCount={ columnCount } innerRef={ elementRef } { ...rest }>
             { currentPage.offers && (currentPage.offers.length > 0) && currentPage.offers.map((offer, index) => <CatalogGridOfferView key={ index } itemActive={ (currentOffer && (currentOffer.offerId === offer.offerId)) } offer={ offer } selectOffer={ selectOffer } />) }
             { children }
         </AutoGrid>
diff --git a/src/components/catalog/views/page/widgets/CatalogLimitedItemWidgetView.tsx b/src/components/catalog/views/page/widgets/CatalogLimitedItemWidgetView.tsx
index 70b52cbd..86e4f758 100644
--- a/src/components/catalog/views/page/widgets/CatalogLimitedItemWidgetView.tsx
+++ b/src/components/catalog/views/page/widgets/CatalogLimitedItemWidgetView.tsx
@@ -1,19 +1,17 @@
 import { FC } from 'react';
 import { Offer } from '../../../../../api';
-import { Base, BaseProps, LayoutLimitedEditionCompletePlateView } from '../../../../../common';
+import { LayoutLimitedEditionCompletePlateView } from '../../../../../common';
 import { useCatalog } from '../../../../../hooks';
 
-export const CatalogLimitedItemWidgetView: FC<BaseProps<HTMLDivElement>> = props =>
+export const CatalogLimitedItemWidgetView: FC = props =>
 {
-    const { children = null, ...rest } = props;
     const { currentOffer = null } = useCatalog();
 
     if(!currentOffer || (currentOffer.pricingModel !== Offer.PRICING_MODEL_SINGLE) || !currentOffer.product.isUniqueLimitedItem) return null;
     
     return (
-        <Base { ...rest }>
+        <div className="w-100">
             <LayoutLimitedEditionCompletePlateView className="mx-auto" uniqueLimitedItemsLeft={ currentOffer.product.uniqueLimitedItemsLeft } uniqueLimitedSeriesSize={ currentOffer.product.uniqueLimitedItemSeriesSize } />
-            { children }
-        </Base>
+        </div>
     );
 }
diff --git a/src/components/catalog/views/page/widgets/CatalogPriceDisplayWidgetView.tsx b/src/components/catalog/views/page/widgets/CatalogPriceDisplayWidgetView.tsx
index d81d8fc1..57afda23 100644
--- a/src/components/catalog/views/page/widgets/CatalogPriceDisplayWidgetView.tsx
+++ b/src/components/catalog/views/page/widgets/CatalogPriceDisplayWidgetView.tsx
@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { FaPlus } from 'react-icons/fa';
 import { IPurchasableOffer } from '../../../../../api';
-import { Flex, LayoutCurrencyIcon, Text } from '../../../../../common';
+import { LayoutCurrencyIcon, Text } from '../../../../../common';
 import { useCatalog } from '../../../../../hooks';
 
 interface CatalogPriceDisplayWidgetViewProps
@@ -21,17 +21,17 @@ export const CatalogPriceDisplayWidgetView: FC<CatalogPriceDisplayWidgetViewProp
     return (
         <>
             { (offer.priceInCredits > 0) &&
-                <Flex alignItems="center" gap={ 1 }>
+                <div className="flex items-center gap-1">
                     <Text bold>{ (offer.priceInCredits * quantity) }</Text>
                     <LayoutCurrencyIcon type={ -1 } />
-                </Flex> }
+                </div> }
             { separator && (offer.priceInCredits > 0) && (offer.priceInActivityPoints > 0) &&
-                <FaPlus size="xs" color="black" className="fa-icon" /> }
+                <FaPlus className="fa-icon" color="black" size="xs" /> }
             { (offer.priceInActivityPoints > 0) &&
-                <Flex alignItems="center" gap={ 1 }>
+                <div className="flex items-center gap-1">
                     <Text bold>{ (offer.priceInActivityPoints * quantity) }</Text>
                     <LayoutCurrencyIcon type={ offer.activityPointType } />
-                </Flex> }
+                </div> }
         </>
     );
 }
diff --git a/src/components/catalog/views/page/widgets/CatalogPurchaseWidgetView.tsx b/src/components/catalog/views/page/widgets/CatalogPurchaseWidgetView.tsx
index d140b8c4..37523ce1 100644
--- a/src/components/catalog/views/page/widgets/CatalogPurchaseWidgetView.tsx
+++ b/src/components/catalog/views/page/widgets/CatalogPurchaseWidgetView.tsx
@@ -128,13 +128,13 @@ export const CatalogPurchaseWidgetView: FC<CatalogPurchaseWidgetViewProps> = pro
         const priceCredits = (currentOffer.priceInCredits * purchaseOptions.quantity);
         const pricePoints = (currentOffer.priceInActivityPoints * purchaseOptions.quantity);
 
-        if(GetClubMemberLevel() < currentOffer.clubLevel) return <Button variant="danger" disabled>{ LocalizeText('catalog.alert.hc.required') }</Button>;
+        if(GetClubMemberLevel() < currentOffer.clubLevel) return <Button disabled variant="danger">{ LocalizeText('catalog.alert.hc.required') }</Button>;
 
-        if(isLimitedSoldOut) return <Button variant="danger" disabled>{ LocalizeText('catalog.alert.limited_edition_sold_out.title') }</Button>;
+        if(isLimitedSoldOut) return <Button disabled variant="danger">{ LocalizeText('catalog.alert.limited_edition_sold_out.title') }</Button>;
 
-        if(priceCredits > getCurrencyAmount(-1)) return <Button variant="danger" disabled>{ LocalizeText('catalog.alert.notenough.title') }</Button>;
+        if(priceCredits > getCurrencyAmount(-1)) return <Button disabled variant="danger">{ LocalizeText('catalog.alert.notenough.title') }</Button>;
 
-        if(pricePoints > getCurrencyAmount(currentOffer.activityPointType)) return <Button variant="danger" disabled>{ LocalizeText('catalog.alert.notenough.activitypoints.title.' + currentOffer.activityPointType) }</Button>;
+        if(pricePoints > getCurrencyAmount(currentOffer.activityPointType)) return <Button disabled variant="danger">{ LocalizeText('catalog.alert.notenough.activitypoints.title.' + currentOffer.activityPointType) }</Button>;
 
         switch(purchaseState)
         {
diff --git a/src/components/catalog/views/page/widgets/CatalogSimplePriceWidgetView.tsx b/src/components/catalog/views/page/widgets/CatalogSimplePriceWidgetView.tsx
index 694507df..38e5483b 100644
--- a/src/components/catalog/views/page/widgets/CatalogSimplePriceWidgetView.tsx
+++ b/src/components/catalog/views/page/widgets/CatalogSimplePriceWidgetView.tsx
@@ -1,21 +1,14 @@
 import { FC } from 'react';
-import { Flex, FlexProps } from '../../../../../common';
 import { useCatalog } from '../../../../../hooks';
 import { CatalogPriceDisplayWidgetView } from './CatalogPriceDisplayWidgetView';
 
-interface CatalogSimplePriceWidgetViewProps extends FlexProps
+export const CatalogSimplePriceWidgetView: FC<{}> = props =>
 {
-
-}
-
-export const CatalogSimplePriceWidgetView: FC<CatalogSimplePriceWidgetViewProps> = props =>
-{
-    const { gap = 1, ...rest } = props;
     const { currentOffer = null } = useCatalog();
 
     return (
-        <Flex gap={ gap } alignItems="center" classNames={ [ 'bg-muted', 'p-1', 'rounded' ] } { ...rest }>
-            <CatalogPriceDisplayWidgetView separator={ true } offer={ currentOffer } />
-        </Flex>
+        <div className="flex items-center bg-muted p-1 rounded gap-1">
+            <CatalogPriceDisplayWidgetView offer={ currentOffer } separator={ true } />
+        </div>
     );
 }
diff --git a/src/components/catalog/views/page/widgets/CatalogSpacesWidgetView.tsx b/src/components/catalog/views/page/widgets/CatalogSpacesWidgetView.tsx
index 3ab901e6..e09e4661 100644
--- a/src/components/catalog/views/page/widgets/CatalogSpacesWidgetView.tsx
+++ b/src/components/catalog/views/page/widgets/CatalogSpacesWidgetView.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useRef, useState } from 'react';
 import { IPurchasableOffer, LocalizeText, Offer, ProductTypeEnum } from '../../../../../api';
-import { AutoGrid, AutoGridProps, Button, ButtonGroup } from '../../../../../common';
+import { AutoGrid, AutoGridProps, Button } from '../../../../../common';
 import { useCatalog } from '../../../../../hooks';
 import { CatalogGridOfferView } from '../common/CatalogGridOfferView';
 
@@ -103,10 +103,10 @@ export const CatalogSpacesWidgetView: FC<CatalogSpacesWidgetViewProps> = props =
 
     return (
         <>
-            <ButtonGroup>
+            <div className="btn-group">
                 { SPACES_GROUP_NAMES.map((name, index) => <Button key={ index } active={ (selectedGroupIndex === index) } onClick={ event => setSelectedGroupIndex(index) }>{ LocalizeText(`catalog.spaces.tab.${ name }`) }</Button>) }
-            </ButtonGroup>
-            <AutoGrid innerRef={ elementRef } columnCount={ columnCount } { ...rest }>
+            </div>
+            <AutoGrid columnCount={ columnCount } innerRef={ elementRef } { ...rest }>
                 { offers && (offers.length > 0) && offers.map((offer, index) => <CatalogGridOfferView key={ index } itemActive={ (currentOffer && (currentOffer === offer)) } offer={ offer } selectOffer={ offer => setSelectedOffer(offer) } />) }
                 { children }
             </AutoGrid>
diff --git a/src/components/catalog/views/page/widgets/CatalogSpinnerWidgetView.tsx b/src/components/catalog/views/page/widgets/CatalogSpinnerWidgetView.tsx
index c3d831b0..a82a3159 100644
--- a/src/components/catalog/views/page/widgets/CatalogSpinnerWidgetView.tsx
+++ b/src/components/catalog/views/page/widgets/CatalogSpinnerWidgetView.tsx
@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { FaCaretLeft, FaCaretRight } from 'react-icons/fa';
 import { LocalizeText } from '../../../../../api';
-import { Flex, Text } from '../../../../../common';
+import { Text } from '../../../../../common';
 import { useCatalog } from '../../../../../hooks';
 
 const MIN_VALUE: number = 1;
@@ -36,11 +36,11 @@ export const CatalogSpinnerWidgetView: FC<{}> = props =>
     return (
         <>
             <Text>{ LocalizeText('catalog.bundlewidget.spinner.select.amount') }</Text>
-            <Flex alignItems="center" gap={ 1 }>
+            <div className="flex items-center gap-1">
                 <FaCaretLeft className="text-black cursor-pointer fa-icon" onClick={ event => updateQuantity(quantity - 1) } />
-                <input type="number" className="form-control form-control-sm quantity-input" value={ quantity } onChange={ event => updateQuantity(event.target.valueAsNumber) } />
+                <input className="form-control form-control-sm quantity-input" type="number" value={ quantity } onChange={ event => updateQuantity(event.target.valueAsNumber) } />
                 <FaCaretRight className="text-black cursor-pointer fa-icon" onClick={ event => updateQuantity(quantity + 1) } />
-            </Flex>
+            </div>
         </>
     );
 }
diff --git a/src/components/catalog/views/page/widgets/CatalogViewProductWidgetView.tsx b/src/components/catalog/views/page/widgets/CatalogViewProductWidgetView.tsx
index 20fe3e77..a3bc555e 100644
--- a/src/components/catalog/views/page/widgets/CatalogViewProductWidgetView.tsx
+++ b/src/components/catalog/views/page/widgets/CatalogViewProductWidgetView.tsx
@@ -84,16 +84,16 @@ export const CatalogViewProductWidgetView: FC<{}> = props =>
     if(currentOffer.pricingModel === Offer.PRICING_MODEL_BUNDLE)
     {
         return (
-            <Column fit overflow="hidden" className="bg-muted p-2 rounded">
-                <AutoGrid fullWidth columnCount={ 4 } className="nitro-catalog-layout-bundle-grid">
+            <Column fit className="bg-muted p-2 rounded" overflow="hidden">
+                <AutoGrid fullWidth className="nitro-catalog-layout-bundle-grid" columnCount={ 4 }>
                     { (currentOffer.products.length > 0) && currentOffer.products.map((product, index) =>
                     {
-                        return <LayoutGridItem key={ index } itemImage={ product.getIconUrl(currentOffer) } itemCount={ product.productCount } />;
+                        return <LayoutGridItem key={ index } itemCount={ product.productCount } itemImage={ product.getIconUrl(currentOffer) } />;
                     }) }
                 </AutoGrid>
             </Column>
         );
     }
     
-    return <LayoutRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />;
+    return <LayoutRoomPreviewerView height={ 140 } roomPreviewer={ roomPreviewer } />;
 }
diff --git a/src/components/catalog/views/targeted-offer/OfferBubbleView.tsx b/src/components/catalog/views/targeted-offer/OfferBubbleView.tsx
index db5fb9bb..db5eff5c 100644
--- a/src/components/catalog/views/targeted-offer/OfferBubbleView.tsx
+++ b/src/components/catalog/views/targeted-offer/OfferBubbleView.tsx
@@ -1,7 +1,7 @@
 import { TargetedOfferData } from '@nitrots/nitro-renderer';
 import { Dispatch, SetStateAction } from 'react';
 import { GetConfigurationValue } from '../../../../api';
-import { Base, LayoutNotificationBubbleView, Text } from '../../../../common';
+import { LayoutNotificationBubbleView, Text } from '../../../../common';
 
 export const OfferBubbleView = (props: { offer: TargetedOfferData, setOpen: Dispatch<SetStateAction<boolean>> }) =>
 {
@@ -9,8 +9,8 @@ export const OfferBubbleView = (props: { offer: TargetedOfferData, setOpen: Disp
 
     if (!offer) return;
 
-    return <LayoutNotificationBubbleView fadesOut={ false } onClose={ null } onClick={ evt => setOpen(true) } gap={ 2 }>
-        <Base className="nitro-targeted-offer-icon" style={ { backgroundImage: `url(${ GetConfigurationValue('image.library.url') + offer.iconImageUrl })` } }/>
-        <Text variant="light" className="ubuntu-bold">{ offer.title }</Text>
+    return <LayoutNotificationBubbleView fadesOut={ false } gap={ 2 } onClick={ evt => setOpen(true) } onClose={ null }>
+        <div className="nitro-targeted-offer-icon" style={ { backgroundImage: `url(${ GetConfigurationValue('image.library.url') + offer.iconImageUrl })` } }/>
+        <Text className="ubuntu-bold" variant="light">{ offer.title }</Text>
     </LayoutNotificationBubbleView>;
 }
diff --git a/src/components/catalog/views/targeted-offer/OfferWindowView.tsx b/src/components/catalog/views/targeted-offer/OfferWindowView.tsx
index 465712ae..4e8d4c05 100644
--- a/src/components/catalog/views/targeted-offer/OfferWindowView.tsx
+++ b/src/components/catalog/views/targeted-offer/OfferWindowView.tsx
@@ -1,7 +1,7 @@
 import { GetTargetedOfferComposer, PurchaseTargetedOfferComposer, TargetedOfferData } from '@nitrots/nitro-renderer';
 import { Dispatch, SetStateAction, useMemo, useState } from 'react';
 import { FriendlyTime, GetConfigurationValue, LocalizeText, SendMessageComposer } from '../../../../api';
-import { Base, Button, Column, Flex, LayoutCurrencyIcon, NitroCardContentView, NitroCardHeaderView, NitroCardSubHeaderView, NitroCardView, Text } from '../../../../common';
+import { Button, Column, Flex, LayoutCurrencyIcon, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
 import { usePurse } from '../../../../hooks';
 
 export const OfferWindowView = (props: { offer: TargetedOfferData, setOpen: Dispatch<SetStateAction<boolean>> }) =>
@@ -43,39 +43,42 @@ export const OfferWindowView = (props: { offer: TargetedOfferData, setOpen: Disp
 
     if (!offer) return;
 
-    return <NitroCardView theme="primary-slim" uniqueKey="targeted-offer" className="nitro-targeted-offer">
+    return <NitroCardView className="nitro-targeted-offer" theme="primary-slim" uniqueKey="targeted-offer">
         <NitroCardHeaderView headerText={ LocalizeText(offer.title) } onCloseClick={ event => setOpen(false) } />
-        <NitroCardSubHeaderView position="relative" className="justify-content-center align-items-center cursor-pointer" variant="danger" gap={ 3 }>
+        <div className="container-fluid p-1 position-relative justify-center items-center cursor-pointer gap-3 bg-danger">
             { LocalizeText('targeted.offer.timeleft',[ 'timeleft' ],[ expirationTime() ]) }
-        </NitroCardSubHeaderView>
+        </div>
         <NitroCardContentView gap={ 1 }>
-            <Flex gap={ 1 } fullHeight>
-                <Flex gap={ 1 } column className="w-75 text-black">
-                    <Column className="bg-warning p-2" fullHeight>
+            <Flex fullHeight gap={ 1 }>
+                <Flex column className="w-75 text-black" gap={ 1 }>
+                    <Column fullHeight className="bg-warning p-2">
                         <h4>
                             { LocalizeText(offer.title) }
                         </h4>
-                        <Base dangerouslySetInnerHTML={ { __html: offer.description } }/>
+                        <div dangerouslySetInnerHTML={ { __html: offer.description } }/>
                     </Column>
-                    <Flex alignSelf="center" alignItems="center" justifyContent="center" gap={ 2 }>
-                        { offer.purchaseLimit > 1 && <Flex gap={ 1 }>
-                            <Text variant="muted">{ LocalizeText('catalog.bundlewidget.quantity') }</Text>
-                            <input type="number" value={ amount } onChange={ evt => setAmount(parseInt(evt.target.value)) } min={ 1 } max={ offer.purchaseLimit } />
-                        </Flex> }
-                        <Button variant="primary" disabled={ !canPurchase } onClick={ () => buyOffer() }>{ LocalizeText('targeted.offer.button.buy') }</Button>
+                    <Flex alignItems="center" alignSelf="center" gap={ 2 } justifyContent="center">
+                        { offer.purchaseLimit > 1 &&
+                            <div className="flex gap-1">
+                                <Text variant="muted">{ LocalizeText('catalog.bundlewidget.quantity') }</Text>
+                                <input max={ offer.purchaseLimit } min={ 1 } type="number" value={ amount } onChange={ evt => setAmount(parseInt(evt.target.value)) } />
+                            </div> }
+                        <Button disabled={ !canPurchase } variant="primary" onClick={ () => buyOffer() }>{ LocalizeText('targeted.offer.button.buy') }</Button>
                     </Flex>
                 </Flex>
-                <Base className="w-50" fullHeight style={ { background: `url(${ GetConfigurationValue('image.library.url') + offer.imageUrl }) no-repeat center` } } />
+                <div className="w-50 h-100" style={ { background: `url(${ GetConfigurationValue('image.library.url') + offer.imageUrl }) no-repeat center` } } />
             </Flex>
-            <Flex className="price-ray position-absolute" alignItems="center" justifyContent="center" column>
+            <Flex column alignItems="center" className="price-ray position-absolute" justifyContent="center">
                 <Text>{ LocalizeText('targeted.offer.price.label') }</Text>
-                { offer.priceInCredits > 0 && <Flex gap={ 1 }>
-                    <Text variant="light">{ offer.priceInCredits }</Text>
-                    <LayoutCurrencyIcon type={ -1 } />
-                </Flex> }
-                { offer.priceInActivityPoints > 0 && <Flex gap={ 1 }>
-                    <Text className="ubuntu-bold" variant="light">+{ offer.priceInActivityPoints }</Text> <LayoutCurrencyIcon type={ offer.activityPointType }/>
-                </Flex> }
+                { offer.priceInCredits > 0 &&
+                    <div className="flex gap-1">
+                        <Text variant="light">{ offer.priceInCredits }</Text>
+                        <LayoutCurrencyIcon type={ -1 } />
+                    </div> }
+                { offer.priceInActivityPoints > 0 &&
+                    <div className="flex gap-1">
+                        <Text className="ubuntu-bold" variant="light">+{ offer.priceInActivityPoints }</Text> <LayoutCurrencyIcon type={ offer.activityPointType }/>
+                    </div> }
             </Flex>
         </NitroCardContentView>
     </NitroCardView>;
diff --git a/src/components/chat-history/ChatHistoryView.tsx b/src/components/chat-history/ChatHistoryView.tsx
index 43b9a6c3..f97bd89e 100644
--- a/src/components/chat-history/ChatHistoryView.tsx
+++ b/src/components/chat-history/ChatHistoryView.tsx
@@ -58,11 +58,11 @@ export const ChatHistoryView: FC<{}> = props =>
     if(!isVisible) return null;
 
     return (
-        <NitroCardView uniqueKey="chat-history" className="nitro-chat-history" theme="primary-slim">
+        <NitroCardView className="nitro-chat-history" theme="primary-slim" uniqueKey="chat-history">
             <NitroCardHeaderView headerText={ LocalizeText('room.chathistory.button.text') } onCloseClick={ event => setIsVisible(false) }/>
-            <NitroCardContentView innerRef={ elementRef } overflow="hidden" gap={ 2 }>
-                <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } value={ searchText } onChange={ event => setSearchText(event.target.value) } />
-                <InfiniteScroll rows={ filteredChatHistory } scrollToBottom={ true } rowRender={ row =>
+            <NitroCardContentView gap={ 2 } innerRef={ elementRef } overflow="hidden">
+                <input className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } type="text" value={ searchText } onChange={ event => setSearchText(event.target.value) } />
+                <InfiniteScroll rowRender={ row =>
                 {
                     return (
                         <Flex alignItems="center" className="p-1" gap={ 2 }>
@@ -85,11 +85,11 @@ export const ChatHistoryView: FC<{}> = props =>
                             { (row.type === ChatEntryType.TYPE_ROOM_INFO) &&
                                 <>
                                     <i className="icon icon-small-room" />
-                                    <Text textBreak wrap grow>{ row.name }</Text>
+                                    <Text grow textBreak wrap>{ row.name }</Text>
                                 </> }
                         </Flex>
                     )
-                } } />
+                } } rows={ filteredChatHistory } scrollToBottom={ true } />
             </NitroCardContentView>
         </NitroCardView>
     );
diff --git a/src/components/floorplan-editor/FloorplanEditorView.tsx b/src/components/floorplan-editor/FloorplanEditorView.tsx
index 8fc83325..ad5b93c4 100644
--- a/src/components/floorplan-editor/FloorplanEditorView.tsx
+++ b/src/components/floorplan-editor/FloorplanEditorView.tsx
@@ -1,7 +1,7 @@
 import { AddLinkEventTracker, FloorHeightMapEvent, ILinkEventTracker, RemoveLinkEventTracker, RoomEngineEvent, RoomVisualizationSettingsEvent, UpdateFloorPropertiesMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { LocalizeText, SendMessageComposer } from '../../api';
-import { Button, ButtonGroup, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
+import { Button, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
 import { useMessageEvent, useNitroEvent } from '../../hooks';
 import { FloorplanEditorContextProvider } from './FloorplanEditorContext';
 import { FloorplanEditor } from './common/FloorplanEditor';
@@ -138,19 +138,19 @@ export const FloorplanEditorView: FC<{}> = props =>
     return (
         <FloorplanEditorContextProvider value={ { originalFloorplanSettings: originalFloorplanSettings, setOriginalFloorplanSettings: setOriginalFloorplanSettings, visualizationSettings: visualizationSettings, setVisualizationSettings: setVisualizationSettings } }>
             { isVisible &&
-                <NitroCardView uniqueKey="floorpan-editor" className="nitro-floorplan-editor" theme="primary-slim">
+                <NitroCardView className="nitro-floorplan-editor" theme="primary-slim" uniqueKey="floorpan-editor">
                     <NitroCardHeaderView headerText={ LocalizeText('floor.plan.editor.title') } onCloseClick={ () => setIsVisible(false) } />
                     <NitroCardContentView overflow="hidden">
                         <FloorplanOptionsView />
                         <FloorplanCanvasView overflow="hidden" />
-                        <Flex justifyContent="between">
+                        <div className="flex justify-content-between">
                             <Button onClick={ revertChanges }>{ LocalizeText('floor.plan.editor.reload') }</Button>
-                            <ButtonGroup>
+                            <div className="btn-group">
                                 <Button disabled={ true }>{ LocalizeText('floor.plan.editor.preview') }</Button>
                                 <Button onClick={ event => setImportExportVisible(true) }>{ LocalizeText('floor.plan.editor.import.export') }</Button>
                                 <Button onClick={ saveFloorChanges }>{ LocalizeText('floor.plan.editor.save') }</Button>
-                            </ButtonGroup>
-                        </Flex>
+                            </div>
+                        </div>
                     </NitroCardContentView>
                 </NitroCardView> }
             { importExportVisible &&
diff --git a/src/components/floorplan-editor/views/FloorplanCanvasView.tsx b/src/components/floorplan-editor/views/FloorplanCanvasView.tsx
index 7898e3c9..fa18522a 100644
--- a/src/components/floorplan-editor/views/FloorplanCanvasView.tsx
+++ b/src/components/floorplan-editor/views/FloorplanCanvasView.tsx
@@ -2,7 +2,7 @@ import { GetOccupiedTilesMessageComposer, GetRoomEntryTileMessageComposer, RoomE
 import { FC, useEffect, useRef, useState } from 'react';
 import { FaArrowDown, FaArrowLeft, FaArrowRight, FaArrowUp } from 'react-icons/fa';
 import { SendMessageComposer } from '../../../api';
-import { Base, Button, Column, ColumnProps, Flex, Grid } from '../../../common';
+import { Button, Column, ColumnProps, Grid } from '../../../common';
 import { useMessageEvent } from '../../../hooks';
 import { useFloorplanEditorContext } from '../FloorplanEditorContext';
 import { FloorplanEditor } from '../common/FloorplanEditor';
@@ -168,26 +168,26 @@ export const FloorplanCanvasView: FC<ColumnProps> = props =>
 
     return (
         <Column gap={ gap } { ...rest }>
-            <Grid overflow="hidden" gap={ 1 }>
-                <Column center size={ 1 } className="d-md-none">
+            <Grid gap={ 1 } overflow="hidden">
+                <Column center className="d-md-none" size={ 1 }>
                     <Button className="d-md-none" onClick={ event => onClickArrowButton('left') }>
                         <FaArrowLeft className="fa-icon" />
                     </Button>
                 </Column>
-                <Column overflow="hidden" size={ isSmallScreen() ? 10: 12 } gap={ 1 }>
-                    <Flex justifyContent="center" className="d-md-none">
+                <Column gap={ 1 } overflow="hidden" size={ isSmallScreen() ? 10: 12 }>
+                    <div className="flex d-md-none justify-content-enter" >
                         <Button shrink onClick={ event => onClickArrowButton('up') }>
                             <FaArrowUp className="fa-icon" />
                         </Button>
-                    </Flex>
-                    <Base overflow="auto" innerRef={ elementRef } />
-                    <Flex justifyContent="center" className="d-md-none">
+                    </div>
+                    <div ref={ elementRef } className="overflow-auto" />
+                    <div className="flex d-md-none justify-center">
                         <Button shrink onClick={ event => onClickArrowButton('down') }>
                             <FaArrowDown className="fa-icon" />
                         </Button>
-                    </Flex>
+                    </div>
                 </Column>
-                <Column center size={ 1 } className="d-md-none">
+                <Column center className="d-md-none" size={ 1 }>
                     <Button className="d-md-none" onClick={ event => onClickArrowButton('right') }>
                         <FaArrowRight className="fa-icon" />
                     </Button>
diff --git a/src/components/floorplan-editor/views/FloorplanImportExportView.tsx b/src/components/floorplan-editor/views/FloorplanImportExportView.tsx
index c8f64d31..994fed9a 100644
--- a/src/components/floorplan-editor/views/FloorplanImportExportView.tsx
+++ b/src/components/floorplan-editor/views/FloorplanImportExportView.tsx
@@ -1,11 +1,11 @@
 import { UpdateFloorPropertiesMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useState } from 'react';
 import { LocalizeText, SendMessageComposer } from '../../../api';
-import { Button, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../common';
+import { Button, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../common';
 import { UseMountEffect } from '../../../hooks';
+import { useFloorplanEditorContext } from '../FloorplanEditorContext';
 import { ConvertTileMapToString } from '../common/ConvertMapToString';
 import { convertNumbersForSaving } from '../common/Utils';
-import { useFloorplanEditorContext } from '../FloorplanEditorContext';
 
 interface FloorplanImportExportViewProps
 {
@@ -37,18 +37,18 @@ export const FloorplanImportExportView: FC<FloorplanImportExportViewProps> = pro
     });
 
     return (
-        <NitroCardView theme="primary-slim" className="floorplan-import-export">
+        <NitroCardView className="floorplan-import-export" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText('floor.plan.editor.import.export') } onCloseClick={ onCloseClick } />
             <NitroCardContentView>
                 <textarea className="h-100" value={ map } onChange={ event => setMap(event.target.value) } />
-                <Flex justifyContent="between">
+                <div className="flex justify-content-between">
                     <Button onClick={ event => setMap(ConvertTileMapToString(originalFloorplanSettings.tilemap)) }>
                         { LocalizeText('floor.plan.editor.revert.to.last.received.map') }
                     </Button>
                     <Button onClick={ saveFloorChanges }>
                         { LocalizeText('floor.plan.editor.save') }
                     </Button>
-                </Flex>
+                </div>
             </NitroCardContentView>
         </NitroCardView>
     );
diff --git a/src/components/floorplan-editor/views/FloorplanOptionsView.tsx b/src/components/floorplan-editor/views/FloorplanOptionsView.tsx
index d43a7608..4a681ca7 100644
--- a/src/components/floorplan-editor/views/FloorplanOptionsView.tsx
+++ b/src/components/floorplan-editor/views/FloorplanOptionsView.tsx
@@ -3,9 +3,9 @@ import { FaCaretLeft, FaCaretRight } from 'react-icons/fa';
 import ReactSlider from 'react-slider';
 import { LocalizeText } from '../../../api';
 import { Column, Flex, LayoutGridItem, Text } from '../../../common';
+import { useFloorplanEditorContext } from '../FloorplanEditorContext';
 import { COLORMAP, FloorAction } from '../common/Constants';
 import { FloorplanEditor } from '../common/FloorplanEditor';
-import { useFloorplanEditorContext } from '../FloorplanEditorContext';
 
 const MIN_WALL_HEIGHT: number = 0;
 const MAX_WALL_HEIGHT: number = 16;
@@ -115,27 +115,27 @@ export const FloorplanOptionsView: FC<{}> = props =>
     }
 
     return (
-        <Column>
-            <Flex gap={ 1 }>
-                <Column size={ 5 } gap={ 1 }>
+        <div className="flex flex-column">
+            <div className="flex gap-1">
+                <Column gap={ 1 } size={ 5 }>
                     <Text bold>{ LocalizeText('floor.plan.editor.draw.mode') }</Text>
                     <Flex gap={ 3 }>
-                        <Flex gap={ 1 }>
+                        <div className="flex gap-1">
                             <LayoutGridItem itemActive={ (floorAction === FloorAction.SET) } onClick={ event => selectAction(FloorAction.SET) }>
                                 <i className="icon icon-set-tile" />
                             </LayoutGridItem>
                             <LayoutGridItem itemActive={ (floorAction === FloorAction.UNSET) } onClick={ event => selectAction(FloorAction.UNSET) }>
                                 <i className="icon icon-unset-tile" />
                             </LayoutGridItem>
-                        </Flex>
-                        <Flex gap={ 1 }>
+                        </div>
+                        <div className="flex gap-1">
                             <LayoutGridItem itemActive={ (floorAction === FloorAction.UP) } onClick={ event => selectAction(FloorAction.UP) }>
                                 <i className="icon icon-increase-height" />
                             </LayoutGridItem>
                             <LayoutGridItem itemActive={ (floorAction === FloorAction.DOWN) } onClick={ event => selectAction(FloorAction.DOWN) }>
                                 <i className="icon icon-decrease-height" />
                             </LayoutGridItem>
-                        </Flex>
+                        </div>
                         <LayoutGridItem itemActive={ (floorAction === FloorAction.DOOR) } onClick={ event => selectAction(FloorAction.DOOR) }>
                             <i className="icon icon-set-door" />
                         </LayoutGridItem>
@@ -147,28 +147,28 @@ export const FloorplanOptionsView: FC<{}> = props =>
                 </Column>
                 <Column size={ 3 }>
                     <Text bold>{ LocalizeText('floor.editor.wall.height') }</Text>
-                    <Flex alignItems="center" gap={ 1 }>
+                    <div className="flex items-center gap-1">
                         <FaCaretLeft className="cursor-pointer fa-icon" onClick={ decreaseWallHeight } />
-                        <input type="number" className="form-control form-control-sm quantity-input" value={ visualizationSettings.wallHeight } onChange={ event => onWallHeightChange(event.target.valueAsNumber) } />
+                        <input className="form-control form-control-sm quantity-input" type="number" value={ visualizationSettings.wallHeight } onChange={ event => onWallHeightChange(event.target.valueAsNumber) } />
                         <FaCaretRight className="cursor-pointer fa-icon" onClick={ increaseWallHeight } />
-                    </Flex>
+                    </div>
                 </Column>
-            </Flex>
-            <Flex gap={ 1 }>
+            </div>
+            <div className="flex gap-1">
                 <Column size={ 6 }>
                     <Text bold>{ LocalizeText('floor.plan.editor.tile.height') }: { floorHeight }</Text>
                     <ReactSlider
                         className="nitro-slider"
-                        min={ MIN_FLOOR_HEIGHT }
                         max={ MAX_FLOOR_HEIGHT }
+                        min={ MIN_FLOOR_HEIGHT }
+                        renderThumb={ ({ style, ...rest }, state) => <div style={ { backgroundColor: `#${ COLORMAP[state.valueNow.toString(33)] }`, ...style } } { ...rest }>{ state.valueNow }</div> }
                         step={ 1 }
                         value={ floorHeight }
-                        onChange={ event => onFloorHeightChange(event) }
-                        renderThumb={ ({ style, ...rest }, state) => <div style={ { backgroundColor: `#${ COLORMAP[state.valueNow.toString(33)] }`, ...style } } { ...rest }>{ state.valueNow }</div> } />
+                        onChange={ event => onFloorHeightChange(event) } />
                 </Column>
                 <Column size={ 6 }>
                     <Text bold>{ LocalizeText('floor.plan.editor.room.options') }</Text>
-                    <Flex className="align-items-center">
+                    <Flex className="items-center">
                         <select className="form-control form-control-sm" value={ visualizationSettings.thicknessWall } onChange={ event => onWallThicknessChange(parseInt(event.target.value)) }>
                             <option value={ 0 }>{ LocalizeText('navigator.roomsettings.wall_thickness.thinnest') }</option>
                             <option value={ 1 }>{ LocalizeText('navigator.roomsettings.wall_thickness.thin') }</option>
@@ -183,7 +183,7 @@ export const FloorplanOptionsView: FC<{}> = props =>
                         </select>
                     </Flex>
                 </Column>
-            </Flex>
-        </Column>
+            </div>
+        </div>
     );
 }
diff --git a/src/components/friends/views/friends-bar/FriendBarItemView.tsx b/src/components/friends/views/friends-bar/FriendBarItemView.tsx
index 52f7568f..e288d068 100644
--- a/src/components/friends/views/friends-bar/FriendBarItemView.tsx
+++ b/src/components/friends/views/friends-bar/FriendBarItemView.tsx
@@ -1,7 +1,7 @@
 import { MouseEventType } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useRef, useState } from 'react';
 import { GetUserProfile, LocalizeText, MessengerFriend, OpenMessengerChat } from '../../../../api';
-import { Base, LayoutAvatarImageView, LayoutBadgeImageView } from '../../../../common';
+import { LayoutAvatarImageView, LayoutBadgeImageView } from '../../../../common';
 import { useFriends } from '../../../../hooks';
 
 export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props =>
@@ -43,16 +43,16 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props =>
     return (
         <div ref={ elementRef } className={ 'btn btn-success friend-bar-item ' + (isVisible ? 'friend-bar-item-active' : '') } onClick={ event => setVisible(prevValue => !prevValue) }>
             <div className={ `friend-bar-item-head position-absolute ${ friend.id > 0 ? 'avatar': 'group' }` }>
-                { (friend.id > 0) && <LayoutAvatarImageView headOnly={ true } figure={ friend.figure } direction={ 2 } /> }
-                { (friend.id <= 0) && <LayoutBadgeImageView isGroup={ true } badgeCode={ friend.figure } /> } 
+                { (friend.id > 0) && <LayoutAvatarImageView direction={ 2 } figure={ friend.figure } headOnly={ true } /> }
+                { (friend.id <= 0) && <LayoutBadgeImageView badgeCode={ friend.figure } isGroup={ true } /> } 
             </div>
             <div className="text-truncate">{ friend.name }</div>
             { isVisible &&
-            <div className="d-flex justify-content-between">
-                <Base className="nitro-friends-spritesheet icon-friendbar-chat cursor-pointer" onClick={ event => OpenMessengerChat(friend.id) } />
+            <div className="flex justify-content-between">
+                <div className="nitro-friends-spritesheet icon-friendbar-chat cursor-pointer" onClick={ event => OpenMessengerChat(friend.id) } />
                 { friend.followingAllowed &&
-                <Base className="nitro-friends-spritesheet icon-friendbar-visit cursor-pointer" onClick={ event => followFriend(friend) } /> }
-                <Base className="nitro-friends-spritesheet icon-profile cursor-pointer" onClick={ event => GetUserProfile(friend.id) } />
+                <div className="nitro-friends-spritesheet icon-friendbar-visit cursor-pointer" onClick={ event => followFriend(friend) } /> }
+                <div className="nitro-friends-spritesheet icon-profile cursor-pointer" onClick={ event => GetUserProfile(friend.id) } />
             </div> }
         </div>
     );
diff --git a/src/components/friends/views/friends-bar/FriendsBarView.tsx b/src/components/friends/views/friends-bar/FriendsBarView.tsx
index 03231b17..2c3fe883 100644
--- a/src/components/friends/views/friends-bar/FriendsBarView.tsx
+++ b/src/components/friends/views/friends-bar/FriendsBarView.tsx
@@ -1,7 +1,7 @@
 import { FC, useRef, useState } from 'react';
 import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
 import { MessengerFriend } from '../../../../api';
-import { Button, Flex } from '../../../../common';
+import { Button } from '../../../../common';
 import { FriendBarItemView } from './FriendBarItemView';
 
 const MAX_DISPLAY_COUNT = 3;
@@ -13,14 +13,14 @@ export const FriendBarView: FC<{ onlineFriends: MessengerFriend[] }> = props =>
     const elementRef = useRef<HTMLDivElement>();
 
     return (
-        <Flex innerRef={ elementRef } alignItems="center" className="friend-bar">
-            <Button variant="black" className="friend-bar-button" disabled={ (indexOffset <= 0) } onClick={ event => setIndexOffset(indexOffset - 1) }>
+        <div ref={ elementRef } className="flex items-center friend-bar">
+            <Button className="friend-bar-button" disabled={ (indexOffset <= 0) } variant="black" onClick={ event => setIndexOffset(indexOffset - 1) }>
                 <FaChevronLeft className="fa-icon" />
             </Button>
             { Array.from(Array(MAX_DISPLAY_COUNT), (e, i) => <FriendBarItemView key={ i } friend={ (onlineFriends[ indexOffset + i ] || null) } />) }
-            <Button variant="black" className="friend-bar-button" disabled={ !((onlineFriends.length > MAX_DISPLAY_COUNT) && ((indexOffset + MAX_DISPLAY_COUNT) <= (onlineFriends.length - 1))) } onClick={ event => setIndexOffset(indexOffset + 1) }>
+            <Button className="friend-bar-button" disabled={ !((onlineFriends.length > MAX_DISPLAY_COUNT) && ((indexOffset + MAX_DISPLAY_COUNT) <= (onlineFriends.length - 1))) } variant="black" onClick={ event => setIndexOffset(indexOffset + 1) }>
                 <FaChevronRight className="fa-icon" />
             </Button>
-        </Flex>
+        </div>
     );
 }
diff --git a/src/components/friends/views/friends-list/FriendsListRemoveConfirmationView.tsx b/src/components/friends/views/friends-list/FriendsListRemoveConfirmationView.tsx
index d01947b4..3237277a 100644
--- a/src/components/friends/views/friends-list/FriendsListRemoveConfirmationView.tsx
+++ b/src/components/friends/views/friends-list/FriendsListRemoveConfirmationView.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { LocalizeText } from '../../../../api';
-import { Button, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
+import { Button, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
 
 interface FriendsRemoveConfirmationViewProps
 {
@@ -19,10 +19,10 @@ export const FriendsRemoveConfirmationView: FC<FriendsRemoveConfirmationViewProp
             <NitroCardHeaderView headerText={ LocalizeText('friendlist.removefriendconfirm.title') } onCloseClick={ onCloseClick } />
             <NitroCardContentView className="text-black">
                 <div>{ removeFriendsText }</div>
-                <Flex gap={ 1 }>
-                    <Button fullWidth variant="danger" disabled={ (selectedFriendsIds.length === 0) } onClick={ removeSelectedFriends }>{ LocalizeText('generic.ok') }</Button>
+                <div className="flex gap-1">
+                    <Button fullWidth disabled={ (selectedFriendsIds.length === 0) } variant="danger" onClick={ removeSelectedFriends }>{ LocalizeText('generic.ok') }</Button>
                     <Button fullWidth onClick={ onCloseClick }>{ LocalizeText('generic.cancel') }</Button>
-                </Flex>
+                </div>
             </NitroCardContentView>
         </NitroCardView>
     );
diff --git a/src/components/friends/views/friends-list/FriendsListRoomInviteView.tsx b/src/components/friends/views/friends-list/FriendsListRoomInviteView.tsx
index 3226cf29..07ada714 100644
--- a/src/components/friends/views/friends-list/FriendsListRoomInviteView.tsx
+++ b/src/components/friends/views/friends-list/FriendsListRoomInviteView.tsx
@@ -1,6 +1,6 @@
 import { FC, useState } from 'react';
 import { LocalizeText } from '../../../../api';
-import { Button, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
+import { Button, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
 
 interface FriendsRoomInviteViewProps
 {
@@ -15,16 +15,16 @@ export const FriendsRoomInviteView: FC<FriendsRoomInviteViewProps> = props =>
     const [ roomInviteMessage, setRoomInviteMessage ] = useState<string>('');
 
     return (
-        <NitroCardView className="nitro-friends-room-invite" uniqueKey="nitro-friends-room-invite" theme="primary-slim">
+        <NitroCardView className="nitro-friends-room-invite" theme="primary-slim" uniqueKey="nitro-friends-room-invite">
             <NitroCardHeaderView headerText={ LocalizeText('friendlist.invite.title') } onCloseClick={ onCloseClick } />
             <NitroCardContentView className="text-black">
                 { LocalizeText('friendlist.invite.summary', [ 'count' ], [ selectedFriendsIds.length.toString() ]) }
-                <textarea className="form-control" value={ roomInviteMessage } maxLength={ 255 } onChange={ event => setRoomInviteMessage(event.target.value) }></textarea>
+                <textarea className="form-control" maxLength={ 255 } value={ roomInviteMessage } onChange={ event => setRoomInviteMessage(event.target.value) }></textarea>
                 <Text center className="bg-muted rounded p-1">{ LocalizeText('friendlist.invite.note') }</Text>
-                <Flex gap={ 1 }>
-                    <Button fullWidth variant="success" disabled={ ((roomInviteMessage.length === 0) || (selectedFriendsIds.length === 0)) } onClick={ () => sendRoomInvite(roomInviteMessage) }>{ LocalizeText('friendlist.invite.send') }</Button>
+                <div className="flex gap-1">
+                    <Button fullWidth disabled={ ((roomInviteMessage.length === 0) || (selectedFriendsIds.length === 0)) } variant="success" onClick={ () => sendRoomInvite(roomInviteMessage) }>{ LocalizeText('friendlist.invite.send') }</Button>
                     <Button fullWidth onClick={ onCloseClick }>{ LocalizeText('generic.cancel') }</Button>
-                </Flex>
+                </div>
             </NitroCardContentView>
         </NitroCardView>
     );
diff --git a/src/components/friends/views/friends-list/FriendsListSearchView.tsx b/src/components/friends/views/friends-list/FriendsListSearchView.tsx
index 69073a22..bcc1b217 100644
--- a/src/components/friends/views/friends-list/FriendsListSearchView.tsx
+++ b/src/components/friends/views/friends-list/FriendsListSearchView.tsx
@@ -1,7 +1,7 @@
 import { HabboSearchComposer, HabboSearchResultData, HabboSearchResultEvent } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { LocalizeText, OpenMessengerChat, SendMessageComposer } from '../../../../api';
-import { Base, Column, Flex, NitroCardAccordionItemView, NitroCardAccordionSetView, NitroCardAccordionSetViewProps, Text, UserProfileIconView } from '../../../../common';
+import { Column, NitroCardAccordionItemView, NitroCardAccordionSetView, NitroCardAccordionSetViewProps, Text, UserProfileIconView } from '../../../../common';
 import { useFriends, useMessageEvent } from '../../../../hooks';
 
 interface FriendsSearchViewProps extends NitroCardAccordionSetViewProps
@@ -41,8 +41,8 @@ export const FriendsSearchView: FC<FriendsSearchViewProps> = props =>
 
     return (
         <NitroCardAccordionSetView { ...rest }>
-            <input type="text" className="search-input form-control form-control-sm w-100 rounded-0" placeholder={ LocalizeText('generic.search') } value={ searchValue } maxLength={ 50 } onChange={ event => setSearchValue(event.target.value) } />
-            <Column>
+            <input className="search-input form-control form-control-sm w-100 rounded-0" maxLength={ 50 } placeholder={ LocalizeText('generic.search') } type="text" value={ searchValue } onChange={ event => setSearchValue(event.target.value) } />
+            <div className="flex flex-column">
                 { friendResults &&
                     <>
                         { (friendResults.length === 0) &&
@@ -55,15 +55,15 @@ export const FriendsSearchView: FC<FriendsSearchViewProps> = props =>
                                     { friendResults.map(result =>
                                     {
                                         return (
-                                            <NitroCardAccordionItemView key={ result.avatarId } justifyContent="between" className="px-2 py-1">
-                                                <Flex alignItems="center" gap={ 1 }>
+                                            <NitroCardAccordionItemView key={ result.avatarId } className="px-2 py-1" justifyContent="between">
+                                                <div className="flex items-center gap-1">
                                                     <UserProfileIconView userId={ result.avatarId } />
                                                     <div>{ result.avatarName }</div>
-                                                </Flex>
-                                                <Flex alignItems="center" gap={ 1 }>
+                                                </div>
+                                                <div className="flex items-center gap-1">
                                                     { result.isAvatarOnline &&
-                                                    <Base className="nitro-friends-spritesheet icon-chat cursor-pointer" onClick={ event => OpenMessengerChat(result.avatarId) } title={ LocalizeText('friendlist.tip.im') } /> }
-                                                </Flex>
+                                                    <div className="nitro-friends-spritesheet icon-chat cursor-pointer" title={ LocalizeText('friendlist.tip.im') } onClick={ event => OpenMessengerChat(result.avatarId) } /> }
+                                                </div>
                                             </NitroCardAccordionItemView>
                                         )
                                     }) }
@@ -82,22 +82,22 @@ export const FriendsSearchView: FC<FriendsSearchViewProps> = props =>
                                     { otherResults.map(result =>
                                     {
                                         return (
-                                            <NitroCardAccordionItemView key={ result.avatarId } justifyContent="between" className="px-2 py-1">
-                                                <Flex alignItems="center" gap={ 1 }>
+                                            <NitroCardAccordionItemView key={ result.avatarId } className="px-2 py-1" justifyContent="between">
+                                                <div className="flex items-center gap-1">
                                                     <UserProfileIconView userId={ result.avatarId } />
                                                     <div>{ result.avatarName }</div>
-                                                </Flex>
-                                                <Flex alignItems="center" gap={ 1 }>
+                                                </div>
+                                                <div className="flex items-center gap-1">
                                                     { canRequestFriend(result.avatarId) &&
-                                                    <Base className="nitro-friends-spritesheet icon-add cursor-pointer" onClick={ event => requestFriend(result.avatarId, result.avatarName) } title={ LocalizeText('friendlist.tip.addfriend') } /> }
-                                                </Flex>
+                                                    <div className="nitro-friends-spritesheet icon-add cursor-pointer" title={ LocalizeText('friendlist.tip.addfriend') } onClick={ event => requestFriend(result.avatarId, result.avatarName) } /> }
+                                                </div>
                                             </NitroCardAccordionItemView>
                                         )
                                     }) }
                                 </Column>
                             </Column> }
                     </> }
-            </Column>
+            </div>
         </NitroCardAccordionSetView>
     );
 }
diff --git a/src/components/friends/views/friends-list/FriendsListView.tsx b/src/components/friends/views/friends-list/FriendsListView.tsx
index 9561d0f2..3de2dd46 100644
--- a/src/components/friends/views/friends-list/FriendsListView.tsx
+++ b/src/components/friends/views/friends-list/FriendsListView.tsx
@@ -121,9 +121,9 @@ export const FriendsListView: FC<{}> = props =>
 
     return (
         <>
-            <NitroCardView className="nitro-friends" uniqueKey="nitro-friends" theme="primary-slim">
+            <NitroCardView className="nitro-friends" theme="primary-slim" uniqueKey="nitro-friends">
                 <NitroCardHeaderView headerText={ LocalizeText('friendlist.friends') } onCloseClick={ event => setIsVisible(false) } />
-                <NitroCardContentView overflow="hidden" gap={ 1 } className="text-black p-0">
+                <NitroCardContentView className="text-black p-0" gap={ 1 } overflow="hidden">
                     <NitroCardAccordionView fullHeight overflow="hidden">
                         <NitroCardAccordionSetView headerText={ LocalizeText('friendlist.friends') + ` (${ onlineFriends.length })` } isExpanded={ true }>
                             <FriendsListGroupView list={ onlineFriends } selectedFriendsIds={ selectedFriendsIds } selectFriend={ selectFriend } />
@@ -135,16 +135,16 @@ export const FriendsListView: FC<{}> = props =>
                         <FriendsSearchView headerText={ LocalizeText('people.search.title') } />
                     </NitroCardAccordionView>
                     { selectedFriendsIds && selectedFriendsIds.length > 0 &&
-                        <Flex gap={ 1 } className="p-1">
+                        <Flex className="p-1" gap={ 1 }>
                             <Button fullWidth onClick={ () => setShowRoomInvite(true) }>{ LocalizeText('friendlist.tip.invite') }</Button>
                             <Button fullWidth variant="danger" onClick={ event => setShowRemoveFriendsConfirmation(true) }>{ LocalizeText('generic.delete') }</Button>
                         </Flex> } 
                 </NitroCardContentView>
             </NitroCardView>
             { showRoomInvite &&
-                <FriendsRoomInviteView selectedFriendsIds={ selectedFriendsIds } onCloseClick={ () => setShowRoomInvite(false) } sendRoomInvite={ sendRoomInvite } /> }
+                <FriendsRoomInviteView selectedFriendsIds={ selectedFriendsIds } sendRoomInvite={ sendRoomInvite } onCloseClick={ () => setShowRoomInvite(false) } /> }
             { showRemoveFriendsConfirmation && 
-                <FriendsRemoveConfirmationView selectedFriendsIds={ selectedFriendsIds } removeFriendsText={ removeFriendsText } onCloseClick={ () => setShowRemoveFriendsConfirmation(false) } removeSelectedFriends={ removeSelectedFriends } /> }
+                <FriendsRemoveConfirmationView removeFriendsText={ removeFriendsText } removeSelectedFriends={ removeSelectedFriends } selectedFriendsIds={ selectedFriendsIds } onCloseClick={ () => setShowRemoveFriendsConfirmation(false) } /> }
         </>
     );
 };
diff --git a/src/components/friends/views/friends-list/friends-list-group/FriendsListGroupItemView.tsx b/src/components/friends/views/friends-list/friends-list-group/FriendsListGroupItemView.tsx
index 03cd7e98..d57638ce 100644
--- a/src/components/friends/views/friends-list/friends-list-group/FriendsListGroupItemView.tsx
+++ b/src/components/friends/views/friends-list/friends-list-group/FriendsListGroupItemView.tsx
@@ -1,6 +1,6 @@
 import { FC, MouseEvent, useState } from 'react';
 import { LocalizeText, MessengerFriend, OpenMessengerChat } from '../../../../../api';
-import { Base, Flex, NitroCardAccordionItemView, UserProfileIconView } from '../../../../../common';
+import { NitroCardAccordionItemView, UserProfileIconView } from '../../../../../common';
 import { useFriends } from '../../../../../hooks';
 
 export const FriendsListGroupItemView: FC<{ friend: MessengerFriend, selected: boolean, selectFriend: (userId: number) => void }> = props =>
@@ -55,31 +55,31 @@ export const FriendsListGroupItemView: FC<{ friend: MessengerFriend, selected: b
     if(!friend) return null;
 
     return (
-        <NitroCardAccordionItemView justifyContent="between" className={ `px-2 py-1 ${ selected && 'bg-primary text-white' }` } onClick={ event => selectFriend(friend.id) }>
-            <Flex alignItems="center" gap={ 1 }>
-                <Base onClick={ event => event.stopPropagation() }>
+        <NitroCardAccordionItemView className={ `px-2 py-1 ${ selected && 'bg-primary text-white' }` } justifyContent="between" onClick={ event => selectFriend(friend.id) }>
+            <div className="flex items-center gap-1">
+                <div onClick={ event => event.stopPropagation() }>
                     <UserProfileIconView userId={ friend.id } />
-                </Base>
+                </div>
                 <div>{ friend.name }</div>
-            </Flex>
-            <Flex alignItems="center" gap={ 1 }>
+            </div>
+            <div className="flex items-center gap-1">
                 { !isRelationshipOpen &&
                     <>
                         { friend.followingAllowed &&
-                            <Base pointer onClick={ clickFollowFriend } className="nitro-friends-spritesheet icon-follow" title={ LocalizeText('friendlist.tip.follow') } /> }
+                            <div className="nitro-friends-spritesheet icon-follow cursor-pointer" title={ LocalizeText('friendlist.tip.follow') } onClick={ clickFollowFriend } /> }
                         { friend.online &&
-                            <Base pointer className="nitro-friends-spritesheet icon-chat" onClick={ openMessengerChat } title={ LocalizeText('friendlist.tip.im') } /> }
+                            <div className="nitro-friends-spritesheet icon-chat cursor-pointer" title={ LocalizeText('friendlist.tip.im') } onClick={ openMessengerChat } /> }
                         { (friend.id > 0) &&
-                            <Base className={ `nitro-friends-spritesheet icon-${ getCurrentRelationshipName() } cursor-pointer` } onClick={ openRelationship } title={ LocalizeText('infostand.link.relationship') } /> }
+                            <div className={ `nitro-friends-spritesheet icon-${ getCurrentRelationshipName() } cursor-pointer` } title={ LocalizeText('infostand.link.relationship') } onClick={ openRelationship } /> }
                     </> }
                 { isRelationshipOpen &&
                     <>
-                        <Base pointer className="nitro-friends-spritesheet icon-heart" onClick={ event => clickUpdateRelationship(event, MessengerFriend.RELATIONSHIP_HEART) } />
-                        <Base pointer className="nitro-friends-spritesheet icon-smile" onClick={ event => clickUpdateRelationship(event, MessengerFriend.RELATIONSHIP_SMILE) } />
-                        <Base pointer className="nitro-friends-spritesheet icon-bobba" onClick={ event => clickUpdateRelationship(event, MessengerFriend.RELATIONSHIP_BOBBA) } />
-                        <Base pointer className="nitro-friends-spritesheet icon-none" onClick={ event => clickUpdateRelationship(event, MessengerFriend.RELATIONSHIP_NONE) } />
+                        <div className="nitro-friends-spritesheet icon-heart cursor-pointer" onClick={ event => clickUpdateRelationship(event, MessengerFriend.RELATIONSHIP_HEART) } />
+                        <div className="nitro-friends-spritesheet icon-smile cursor-pointer" onClick={ event => clickUpdateRelationship(event, MessengerFriend.RELATIONSHIP_SMILE) } />
+                        <div className="nitro-friends-spritesheet icon-bobba cursor-pointer" onClick={ event => clickUpdateRelationship(event, MessengerFriend.RELATIONSHIP_BOBBA) } />
+                        <div className="nitro-friends-spritesheet icon-none cursor-pointer" onClick={ event => clickUpdateRelationship(event, MessengerFriend.RELATIONSHIP_NONE) } />
                     </> }
-            </Flex>
+            </div>
         </NitroCardAccordionItemView>
     );
 }
diff --git a/src/components/friends/views/friends-list/friends-list-request/FriendsListRequestItemView.tsx b/src/components/friends/views/friends-list/friends-list-request/FriendsListRequestItemView.tsx
index de5d3a3b..e0ac050d 100644
--- a/src/components/friends/views/friends-list/friends-list-request/FriendsListRequestItemView.tsx
+++ b/src/components/friends/views/friends-list/friends-list-request/FriendsListRequestItemView.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { MessengerRequest } from '../../../../../api';
-import { Base, Flex, NitroCardAccordionItemView, UserProfileIconView } from '../../../../../common';
+import { NitroCardAccordionItemView, UserProfileIconView } from '../../../../../common';
 import { useFriends } from '../../../../../hooks';
 
 export const FriendsListRequestItemView: FC<{ request: MessengerRequest }> = props =>
@@ -11,15 +11,15 @@ export const FriendsListRequestItemView: FC<{ request: MessengerRequest }> = pro
     if(!request) return null;
 
     return (
-        <NitroCardAccordionItemView justifyContent="between" className="px-2 py-1">
-            <Flex alignItems="center" gap={ 1 }>
+        <NitroCardAccordionItemView className="px-2 py-1" justifyContent="between">
+            <div className="flex items-center gap-1">
                 <UserProfileIconView userId={ request.id } />
                 <div>{ request.name }</div>
-            </Flex>
-            <Flex alignItems="center" gap={ 1 }>
-                <Base className="nitro-friends-spritesheet icon-accept cursor-pointer" onClick={ event => requestResponse(request.id, true) } />
-                <Base className="nitro-friends-spritesheet icon-deny cursor-pointer" onClick={ event => requestResponse(request.id, false) } />
-            </Flex>
+            </div>
+            <div className="flex items-center gap-1">
+                <div className="nitro-friends-spritesheet icon-accept cursor-pointer" onClick={ event => requestResponse(request.id, true) } />
+                <div className="nitro-friends-spritesheet icon-deny cursor-pointer" onClick={ event => requestResponse(request.id, false) } />
+            </div>
         </NitroCardAccordionItemView>
     );
 }
diff --git a/src/components/friends/views/friends-list/friends-list-request/FriendsListRequestView.tsx b/src/components/friends/views/friends-list/friends-list-request/FriendsListRequestView.tsx
index 5f6e9918..b50605dc 100644
--- a/src/components/friends/views/friends-list/friends-list-request/FriendsListRequestView.tsx
+++ b/src/components/friends/views/friends-list/friends-list-request/FriendsListRequestView.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { LocalizeText } from '../../../../../api';
-import { Button, Column, Flex, NitroCardAccordionSetView, NitroCardAccordionSetViewProps } from '../../../../../common';
+import { Button, Column, NitroCardAccordionSetView, NitroCardAccordionSetViewProps } from '../../../../../common';
 import { useFriends } from '../../../../../hooks';
 import { FriendsListRequestItemView } from './FriendsListRequestItemView';
 
@@ -13,15 +13,15 @@ export const FriendsListRequestView: FC<NitroCardAccordionSetViewProps> = props
 
     return (
         <NitroCardAccordionSetView { ...rest }>
-            <Column fullHeight justifyContent="between" gap={ 1 }>
+            <Column fullHeight gap={ 1 } justifyContent="between">
                 <Column gap={ 0 }>
                     { requests.map((request, index) => <FriendsListRequestItemView key={ index } request={ request } />) }
                 </Column>
-                <Flex justifyContent="center" className="px-2 py-1">
+                <div className="flex justify-center px-2 py-1">
                     <Button onClick={ event => requestResponse(-1, false) }>
                         { LocalizeText('friendlist.requests.dismissall') }
                     </Button>
-                </Flex>
+                </div>
             </Column>
             { children }
         </NitroCardAccordionSetView>
diff --git a/src/components/friends/views/messenger/FriendsMessengerView.tsx b/src/components/friends/views/messenger/FriendsMessengerView.tsx
index 932e71d5..df9de6ca 100644
--- a/src/components/friends/views/messenger/FriendsMessengerView.tsx
+++ b/src/components/friends/views/messenger/FriendsMessengerView.tsx
@@ -2,7 +2,7 @@ import { AddLinkEventTracker, FollowFriendMessageComposer, GetSessionDataManager
 import { FC, KeyboardEvent, useEffect, useRef, useState } from 'react';
 import { FaTimes } from 'react-icons/fa';
 import { GetUserProfile, LocalizeText, ReportType, SendMessageComposer } from '../../../../api';
-import { Base, Button, ButtonGroup, Column, Flex, Grid, LayoutAvatarImageView, LayoutBadgeImageView, LayoutGridItem, LayoutItemCountView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
+import { Button, Column, Flex, Grid, LayoutAvatarImageView, LayoutBadgeImageView, LayoutGridItem, LayoutItemCountView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
 import { useHelp, useMessenger } from '../../../../hooks';
 import { FriendsMessengerThreadView } from './messenger-thread/FriendsMessengerThreadView';
 
@@ -106,53 +106,53 @@ export const FriendsMessengerView: FC<{}> = props =>
     if(!isVisible) return null;
 
     return (
-        <NitroCardView className="nitro-friends-messenger" uniqueKey="nitro-friends-messenger" theme="primary-slim">
+        <NitroCardView className="nitro-friends-messenger" theme="primary-slim" uniqueKey="nitro-friends-messenger">
             <NitroCardHeaderView headerText={ LocalizeText('messenger.window.title', [ 'OPEN_CHAT_COUNT' ], [ visibleThreads.length.toString() ]) } onCloseClick={ event => setIsVisible(false) } />
             <NitroCardContentView>
                 <Grid overflow="hidden">
-                    <Column size={ 4 } overflow="hidden">
+                    <Column overflow="hidden" size={ 4 }>
                         <Text bold>{ LocalizeText('toolbar.icon.label.messenger') }</Text>
                         <Column fit overflow="auto">
-                            <Column>
+                            <div className="flex flex-column">
                                 { visibleThreads && (visibleThreads.length > 0) && visibleThreads.map(thread =>
                                 {
                                     return (
                                         <LayoutGridItem key={ thread.threadId } itemActive={ (activeThread === thread) } onClick={ event => setActiveThreadId(thread.threadId) }>
                                             { thread.unread &&
                                             <LayoutItemCountView count={ thread.unreadCount } /> }
-                                            <Flex fullWidth alignItems="center" gap={ 1 }>
-                                                <Flex alignItems="center" className="friend-head px-1">
+                                            <div className="flex w-100 items-center gap-1">
+                                                <div className="flex items-center friend-head px-1">
                                                     { (thread.participant.id > 0) &&
-                                                    <LayoutAvatarImageView figure={ thread.participant.figure } headOnly={ true } direction={ 3 } /> }
+                                                    <LayoutAvatarImageView direction={ 3 } figure={ thread.participant.figure } headOnly={ true } /> }
                                                     { (thread.participant.id <= 0) &&
-                                                    <LayoutBadgeImageView isGroup={ true } badgeCode={ thread.participant.figure } /> }
-                                                </Flex>
-                                                <Text truncate grow>{ thread.participant.name }</Text>
-                                            </Flex>
+                                                    <LayoutBadgeImageView badgeCode={ thread.participant.figure } isGroup={ true } /> }
+                                                </div>
+                                                <Text grow truncate>{ thread.participant.name }</Text>
+                                            </div>
                                         </LayoutGridItem>
                                     );
                                 }) }
-                            </Column>
+                            </div>
                         </Column>
                     </Column>
-                    <Column size={ 8 } overflow="hidden">
+                    <Column overflow="hidden" size={ 8 }>
                         { activeThread &&
                             <>
                                 <Text bold center>{ LocalizeText('messenger.window.separator', [ 'FRIEND_NAME' ], [ activeThread.participant.name ]) }</Text>
-                                <Flex alignItems="center" justifyContent="between" gap={ 1 }>
-                                    <Flex gap={ 1 }>
-                                        <ButtonGroup>
+                                <Flex alignItems="center" gap={ 1 } justifyContent="between">
+                                    <div className="flex gap-1">
+                                        <div className="btn-group">
                                             <Button onClick={ followFriend }>
-                                                <Base className="nitro-friends-spritesheet icon-follow" />
+                                                <div className="nitro-friends-spritesheet icon-follow" />
                                             </Button>
                                             <Button onClick={ openProfile }>
-                                                <Base className="nitro-friends-spritesheet icon-profile-sm" />
+                                                <div className="nitro-friends-spritesheet icon-profile-sm" />
                                             </Button>
-                                        </ButtonGroup>
+                                        </div>
                                         <Button variant="danger" onClick={ () => report(ReportType.IM, { reportedUserId: activeThread.participant.id }) }>
                                             { LocalizeText('messenger.window.button.report') }
                                         </Button>
-                                    </Flex>
+                                    </div>
                                     <Button onClick={ event => closeThread(activeThread.threadId) }>
                                         <FaTimes className="fa-icon" />
                                     </Button>
@@ -162,12 +162,12 @@ export const FriendsMessengerView: FC<{}> = props =>
                                         <FriendsMessengerThreadView thread={ activeThread } />
                                     </Column>
                                 </Column>
-                                <Flex gap={ 1 }>
-                                    <input type="text" className="form-control form-control-sm" maxLength={ 255 } placeholder={ LocalizeText('messenger.window.input.default', [ 'FRIEND_NAME' ], [ activeThread.participant.name ]) } value={ messageText } onChange={ event => setMessageText(event.target.value) } onKeyDown={ onKeyDown } />
+                                <div className="flex gap-1">
+                                    <input className="form-control form-control-sm" maxLength={ 255 } placeholder={ LocalizeText('messenger.window.input.default', [ 'FRIEND_NAME' ], [ activeThread.participant.name ]) } type="text" value={ messageText } onChange={ event => setMessageText(event.target.value) } onKeyDown={ onKeyDown } />
                                     <Button variant="success" onClick={ send }>
                                         { LocalizeText('widgets.chatinput.say') }
                                     </Button>
-                                </Flex>
+                                </div>
                             </> }
                     </Column>
                 </Grid>
diff --git a/src/components/friends/views/messenger/messenger-thread/FriendsMessengerThreadGroup.tsx b/src/components/friends/views/messenger/messenger-thread/FriendsMessengerThreadGroup.tsx
index 4ed6c996..9900ce5a 100644
--- a/src/components/friends/views/messenger/messenger-thread/FriendsMessengerThreadGroup.tsx
+++ b/src/components/friends/views/messenger/messenger-thread/FriendsMessengerThreadGroup.tsx
@@ -32,12 +32,12 @@ export const FriendsMessengerThreadGroup: FC<{ thread: MessengerThread, group: M
                         <Flex key={ index } fullWidth gap={ 2 } justifyContent="start">
                             <Base className="w-100 text-break">
                                 { (chat.type === MessengerThreadChat.SECURITY_NOTIFICATION) &&
-                                    <Flex gap={ 2 } alignItems="center" className="bg-light rounded mb-2 px-2 py-1 small text-muted">
+                                    <Flex alignItems="center" className="bg-light rounded mb-2 px-2 py-1 small text-muted" gap={ 2 }>
                                         <Base className="nitro-friends-spritesheet icon-warning flex-shrink-0" />
                                         <Base>{ chat.message }</Base>
                                     </Flex> }
                                 { (chat.type === MessengerThreadChat.ROOM_INVITE) &&
-                                    <Flex gap={ 2 } alignItems="center" className="bg-light rounded mb-2 px-2 py-1 small text-black">
+                                    <Flex alignItems="center" className="bg-light rounded mb-2 px-2 py-1 small text-black" gap={ 2 }>
                                         <Base className="messenger-notification-icon flex-shrink-0" />
                                         <Base>{ (LocalizeText('messenger.invitation') + ' ') }{ chat.message }</Base>
                                     </Flex> }
@@ -50,12 +50,12 @@ export const FriendsMessengerThreadGroup: FC<{ thread: MessengerThread, group: M
     }
     
     return (
-        <Flex fullWidth justifyContent={ isOwnChat ? 'end' : 'start' } gap={ 2 }>
+        <Flex fullWidth gap={ 2 } justifyContent={ isOwnChat ? 'end' : 'start' }>
             <Base shrink className="message-avatar">
                 { ((group.type === MessengerGroupType.PRIVATE_CHAT) && !isOwnChat) &&
-                    <LayoutAvatarImageView figure={ thread.participant.figure } direction={ 2 } /> }
+                    <LayoutAvatarImageView direction={ 2 } figure={ thread.participant.figure } /> }
                 { (groupChatData && !isOwnChat) &&
-                    <LayoutAvatarImageView figure={ groupChatData.figure } direction={ 2 } /> }
+                    <LayoutAvatarImageView direction={ 2 } figure={ groupChatData.figure } /> }
             </Base>
             <Base className={ 'bg-light text-black border-radius mb-2 rounded py-1 px-2 messages-group-' + (isOwnChat ? 'right' : 'left') }>
                 <Base className="fw-bold">
@@ -66,7 +66,7 @@ export const FriendsMessengerThreadGroup: FC<{ thread: MessengerThread, group: M
             </Base>
             { isOwnChat &&
                 <Base shrink className="message-avatar">
-                    <LayoutAvatarImageView figure={ GetSessionDataManager().figure } direction={ 4 } />
+                    <LayoutAvatarImageView direction={ 4 } figure={ GetSessionDataManager().figure } />
                 </Base> }
         </Flex>
     );
diff --git a/src/components/friends/views/messenger/messenger-thread/FriendsMessengerThreadView.tsx b/src/components/friends/views/messenger/messenger-thread/FriendsMessengerThreadView.tsx
index 962a6682..8a059d63 100644
--- a/src/components/friends/views/messenger/messenger-thread/FriendsMessengerThreadView.tsx
+++ b/src/components/friends/views/messenger/messenger-thread/FriendsMessengerThreadView.tsx
@@ -10,7 +10,7 @@ export const FriendsMessengerThreadView: FC<{ thread: MessengerThread }> = props
 
     return (
         <>
-            { (thread.groups.length > 0) && thread.groups.map((group, index) => <FriendsMessengerThreadGroup key={ index } thread={ thread } group={ group } />) }
+            { (thread.groups.length > 0) && thread.groups.map((group, index) => <FriendsMessengerThreadGroup key={ index } group={ group } thread={ thread } />) }
         </>
     );
 }
diff --git a/src/components/game-center/GameCenterView.tsx b/src/components/game-center/GameCenterView.tsx
index 885908e7..6059628f 100644
--- a/src/components/game-center/GameCenterView.tsx
+++ b/src/components/game-center/GameCenterView.tsx
@@ -39,8 +39,8 @@ export const GameCenterView = () =>
 
     if(!isVisible || !games || !accountStatus) return;
     
-    return <Flex position="absolute" className="top-0 bottom-0 start-0 end-0 bg-black" justifyContent="center">
-        <Flex className="game-center-main" column>
+    return <Flex className="top-0 bottom-0 start-0 end-0 bg-black" justifyContent="center" position="absolute">
+        <Flex column className="game-center-main">
             <GameView/>
             <GameListView />
         </Flex>
diff --git a/src/components/game-center/views/GameListView.tsx b/src/components/game-center/views/GameListView.tsx
index 1211bc75..3a3bd7ec 100644
--- a/src/components/game-center/views/GameListView.tsx
+++ b/src/components/game-center/views/GameListView.tsx
@@ -1,6 +1,5 @@
 import { GameConfigurationData } from '@nitrots/nitro-renderer';
 import { LocalizeText } from '../../../api';
-import { Base, Flex } from '../../../common';
 import { useGameCenter } from '../../../hooks';
 
 export const GameListView = () => 
@@ -21,12 +20,12 @@ export const GameListView = () =>
         return `url(${ game.assetUrl }${ game.gameNameId }_icon.png)`
     }
 
-    return <Base fullWidth className="gameList-container bg-dark p-1">
+    return <div className="gameList-container bg-dark p-1 w-100">
         { LocalizeText('gamecenter.game_list_title') }
-        <Flex gap={ 3 }>
+        <div className="flex gap-3">
             { games && games.map((game,index) => 
-                <Base key={ index } className={ getClasses(game) } onClick={ evt => setSelectedGame(game) } style={ { backgroundImage: getIconImage(game) } }/>
+                <div key={ index } className={ getClasses(game) } style={ { backgroundImage: getIconImage(game) } } onClick={ evt => setSelectedGame(game) }/>
             ) }
-        </Flex>
-    </Base>
+        </div>
+    </div>
 }
diff --git a/src/components/game-center/views/GameStageView.tsx b/src/components/game-center/views/GameStageView.tsx
index 0a26fea4..ddbc4e96 100644
--- a/src/components/game-center/views/GameStageView.tsx
+++ b/src/components/game-center/views/GameStageView.tsx
@@ -1,7 +1,6 @@
 import { Game2ExitGameMessageComposer } from '@nitrots/nitro-renderer';
 import { useEffect, useRef, useState } from 'react';
 import { SendMessageComposer } from '../../../api';
-import { Base } from '../../../common';
 import { useGameCenter } from '../../../hooks';
 
 export const GameStageView = () => 
@@ -43,5 +42,5 @@ export const GameStageView = () =>
 
     if(!gameURL) return null;
 
-    return <Base innerRef={ ref }className="game-center-stage"/>
+    return <div ref={ ref } className="game-center-stage"/>
 }
diff --git a/src/components/game-center/views/GameView.tsx b/src/components/game-center/views/GameView.tsx
index a9d641f7..18ae34d5 100644
--- a/src/components/game-center/views/GameView.tsx
+++ b/src/components/game-center/views/GameView.tsx
@@ -1,7 +1,7 @@
 import { Game2GetAccountGameStatusMessageComposer, GetGameStatusMessageComposer, JoinQueueMessageComposer } from '@nitrots/nitro-renderer';
 import { useEffect } from 'react';
 import { ColorUtils, LocalizeText, SendMessageComposer } from '../../../api';
-import { Base, Button, Flex, LayoutItemCountView, Text } from '../../../common';
+import { Button, Flex, LayoutItemCountView, Text } from '../../../common';
 import { useGameCenter } from '../../../hooks';
 
 export const GameView = () => 
@@ -37,22 +37,19 @@ export const GameView = () =>
         SendMessageComposer(new JoinQueueMessageComposer(selectedGame.gameId));
     }
 
-    return <Flex className="game-view py-4" fullHeight style={ { backgroundColor: getBgColour(), backgroundImage: getBgImage(), color: getColor() } }>
-        <Flex className="w-75" column alignItems="center" gap={ 2 }>
+    return <Flex fullHeight className="game-view py-4" style={ { backgroundColor: getBgColour(), backgroundImage: getBgImage(), color: getColor() } }>
+        <Flex column alignItems="center" className="w-75" gap={ 2 }>
             <Text bold>{ LocalizeText(`gamecenter.${ selectedGame.gameNameId }.description_title`) }</Text>
             <img src={ selectedGame.assetUrl + selectedGame.gameNameId + '_logo.png' }/>
             { (accountStatus.hasUnlimitedGames || accountStatus.freeGamesLeft > 0) && <>
-                <Button variant="light" position="relative" className="px-4" onClick={ onPlay }>
+                <Button className="px-4" position="relative" variant="light" onClick={ onPlay }>
                     { LocalizeText('gamecenter.play_now') }
                     { !accountStatus.hasUnlimitedGames && 
                     <LayoutItemCountView className="me-n1 mt-n1" count={ accountStatus.freeGamesLeft }/> }
                 </Button>
             </> }
-            <Text bold className="w-50" center>{ LocalizeText(`gamecenter.${ selectedGame.gameNameId }.description_content`) }</Text>
+            <Text bold center className="w-50">{ LocalizeText(`gamecenter.${ selectedGame.gameNameId }.description_content`) }</Text>
         </Flex>
-        <Base className="w-25">
-
-        </Base>
-        
+        <div className="w-25" />
     </Flex>
 }
diff --git a/src/components/groups/views/GroupBadgeCreatorView.tsx b/src/components/groups/views/GroupBadgeCreatorView.tsx
index 8e32c922..447c91cb 100644
--- a/src/components/groups/views/GroupBadgeCreatorView.tsx
+++ b/src/components/groups/views/GroupBadgeCreatorView.tsx
@@ -1,7 +1,7 @@
 import { Dispatch, FC, SetStateAction, useState } from 'react';
 import { FaPlus, FaTimes } from 'react-icons/fa';
 import { GroupBadgePart } from '../../../api';
-import { Base, Column, Flex, Grid, LayoutBadgeImageView } from '../../../common';
+import { Column, Flex, Grid, LayoutBadgeImageView } from '../../../common';
 import { useGroup } from '../../../hooks';
 
 interface GroupBadgeCreatorViewProps
@@ -36,8 +36,8 @@ export const GroupBadgeCreatorView: FC<GroupBadgeCreatorViewProps> = props =>
             { ((selectedIndex < 0) && badgeParts && (badgeParts.length > 0)) && badgeParts.map((part, index) =>
             {
                 return (
-                    <Flex key={ index } alignItems="center" justifyContent="between" gap={ 2 } className="bg-muted rounded px-2 py-1">
-                        <Flex pointer center className="bg-muted rounded p-1" onClick={ event => setSelectedIndex(index) }>
+                    <Flex key={ index } alignItems="center" className="bg-muted rounded px-2 py-1" gap={ 2 } justifyContent="between">
+                        <Flex center pointer className="bg-muted rounded p-1" onClick={ event => setSelectedIndex(index) }>
                             { (badgeParts[index].code && (badgeParts[index].code.length > 0)) &&
                                 <LayoutBadgeImageView badgeCode={ badgeParts[index].code } isGroup={ true } /> }
                             { (!badgeParts[index].code || !badgeParts[index].code.length) &&
@@ -46,25 +46,25 @@ export const GroupBadgeCreatorView: FC<GroupBadgeCreatorViewProps> = props =>
                             </Flex> }
                         </Flex>
                         { (part.type !== GroupBadgePart.BASE) &&
-                        <Grid gap={ 1 } columnCount={ 3 }>
+                        <Grid columnCount={ 3 } gap={ 1 }>
                             { POSITIONS.map((position, posIndex) =>
                             {
-                                return <Base key={ posIndex } pointer className={ `group-badge-position-swatch ${ (badgeParts[index].position === position) ? 'active' : '' }` } onClick={ event => setPartProperty(index, 'position', position) }></Base>
+                                return <div key={ posIndex } className={ `group-badge-position-swatch cursor-pointer ${ (badgeParts[index].position === position) ? 'active' : '' }` } onClick={ event => setPartProperty(index, 'position', position) } />
                             }) }
                         </Grid> }
-                        <Grid gap={ 1 } columnCount={ 8 }>
+                        <Grid columnCount={ 8 } gap={ 1 }>
                             { (groupCustomize.badgePartColors.length > 0) && groupCustomize.badgePartColors.map((item, colorIndex) =>
                             {
-                                return <Base key={ colorIndex } pointer className={ `group-badge-color-swatch ${ (badgeParts[index].color === (colorIndex + 1)) ? 'active' : '' }` } style={ { backgroundColor: '#' + item.color } } onClick={ event => setPartProperty(index, 'color', (colorIndex + 1)) }></Base>
+                                return <div key={ colorIndex } className={ `group-badge-color-swatch cursor-pointer ${ (badgeParts[index].color === (colorIndex + 1)) ? 'active' : '' }` } style={ { backgroundColor: '#' + item.color } } onClick={ event => setPartProperty(index, 'color', (colorIndex + 1)) } />
                             }) }
                         </Grid>
                     </Flex>
                 );
             }) }
             { (selectedIndex >= 0) &&
-                <Grid gap={ 1 } columnCount={ 5 }>
+                <Grid columnCount={ 5 } gap={ 1 }>
                     { (badgeParts[selectedIndex].type === GroupBadgePart.SYMBOL) &&
-                        <Column pointer center className="bg-muted rounded p-1" onClick={ event => setPartProperty(selectedIndex, 'key', 0) }>
+                        <Column center pointer className="bg-muted rounded p-1" onClick={ event => setPartProperty(selectedIndex, 'key', 0) }>
                             <Flex center className="badge-image group-badge">
                                 <FaTimes className="fa-icon" />
                             </Flex>
@@ -72,7 +72,7 @@ export const GroupBadgeCreatorView: FC<GroupBadgeCreatorViewProps> = props =>
                     { ((badgeParts[selectedIndex].type === GroupBadgePart.BASE) ? groupCustomize.badgeBases : groupCustomize.badgeSymbols).map((item, index) =>
                     {
                         return (
-                            <Column key={ index } pointer center className="bg-muted rounded p-1" onClick={ event => setPartProperty(selectedIndex, 'key', item.id) }>
+                            <Column key={ index } center pointer className="bg-muted rounded p-1" onClick={ event => setPartProperty(selectedIndex, 'key', item.id) }>
                                 <LayoutBadgeImageView badgeCode={ GroupBadgePart.getCode(badgeParts[selectedIndex].type, item.id, badgeParts[selectedIndex].color, 4) } isGroup={ true } />
                             </Column>
                         );
diff --git a/src/components/groups/views/GroupCreatorView.tsx b/src/components/groups/views/GroupCreatorView.tsx
index cd64ef3a..ef741621 100644
--- a/src/components/groups/views/GroupCreatorView.tsx
+++ b/src/components/groups/views/GroupCreatorView.tsx
@@ -1,7 +1,7 @@
 import { GroupBuyComposer, GroupBuyDataComposer, GroupBuyDataEvent } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { HasHabboClub, IGroupData, LocalizeText, SendMessageComposer } from '../../../api';
-import { Base, Button, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common';
+import { Button, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common';
 import { useMessageEvent } from '../../../hooks';
 import { GroupTabBadgeView } from './tabs/GroupTabBadgeView';
 import { GroupTabColorsView } from './tabs/GroupTabColorsView';
@@ -121,42 +121,42 @@ export const GroupCreatorView: FC<GroupCreatorViewProps> = props =>
         <NitroCardView className="nitro-group-creator" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText('group.create.title') } onCloseClick={ onCloseClose } />
             <NitroCardContentView>
-                <Flex center className="creator-tabs">
+                <div className="flex items-center justify-center creator-tabs">
                     { TABS.map((tab, index) =>
                     {
                         return (
-                            <Flex center key={ index } className={ `tab tab-${ ((tab === 1) ? 'blue-flat' : (tab === 4) ? 'yellow' : 'blue-arrow') } ${ (currentTab === tab) ? 'active' : '' }` }>
+                            <Flex key={ index } center className={ `tab tab-${ ((tab === 1) ? 'blue-flat' : (tab === 4) ? 'yellow' : 'blue-arrow') } ${ (currentTab === tab) ? 'active' : '' }` }>
                                 <Text variant="white">{ LocalizeText(`group.create.steplabel.${ tab }`) }</Text>
                             </Flex>
                         );
                     }) }
-                </Flex>
+                </div>
                 <Column overflow="hidden">
-                    <Flex alignItems="center" gap={ 2 }>
-                        <Base className={ `nitro-group-tab-image tab-${ currentTab }` } />
+                    <div className="items-center gap-2">
+                        <div className={ `nitro-group-tab-image tab-${ currentTab }` } />
                         <Column grow gap={ 0 }>
                             <Text bold fontSize={ 4 }>{ LocalizeText(`group.create.stepcaption.${ currentTab }`) }</Text>
                             <Text>{ LocalizeText(`group.create.stepdesc.${ currentTab }`) }</Text>
                         </Column>
-                    </Flex>
+                    </div>
                     <Column overflow="hidden">
                         { (currentTab === 1) &&
-                            <GroupTabIdentityView groupData={ groupData } setGroupData={ setGroupData } setCloseAction={ setCloseAction } onClose={ null } isCreator={ true } availableRooms={ availableRooms } /> }
+                            <GroupTabIdentityView availableRooms={ availableRooms } groupData={ groupData } isCreator={ true } setCloseAction={ setCloseAction } setGroupData={ setGroupData } onClose={ null } /> }
                         { (currentTab === 2) &&
-                            <GroupTabBadgeView groupData={ groupData } setGroupData={ setGroupData } setCloseAction={ setCloseAction } /> }
+                            <GroupTabBadgeView groupData={ groupData } setCloseAction={ setCloseAction } setGroupData={ setGroupData } /> }
                         { (currentTab === 3) &&
-                            <GroupTabColorsView groupData={ groupData } setGroupData={ setGroupData } setCloseAction={ setCloseAction } /> }
+                            <GroupTabColorsView groupData={ groupData } setCloseAction={ setCloseAction } setGroupData={ setGroupData } /> }
                         { (currentTab === 4) &&
-                            <GroupTabCreatorConfirmationView groupData={ groupData } setGroupData={ setGroupData } purchaseCost={ purchaseCost } /> }
+                            <GroupTabCreatorConfirmationView groupData={ groupData } purchaseCost={ purchaseCost } setGroupData={ setGroupData } /> }
                     </Column>
-                    <Flex justifyContent="between">
-                        <Button variant="link" className="text-black" onClick={ previousStep }>
+                    <div className="flex justify-content-between">
+                        <Button className="text-black" variant="link" onClick={ previousStep }>
                             { LocalizeText(currentTab === 1 ? 'generic.cancel' : 'group.create.previousstep') }
                         </Button>
                         <Button disabled={ ((currentTab === 4) && !HasHabboClub()) } variant={ ((currentTab === 4) ? HasHabboClub() ? 'success' : 'danger' : 'primary') } onClick={ nextStep }>
                             { LocalizeText((currentTab === 4) ? HasHabboClub() ? 'group.create.confirm.buy' : 'group.create.confirm.viprequired' : 'group.create.nextstep') }
                         </Button>
-                    </Flex>
+                    </div>
                 </Column>
             </NitroCardContentView>
         </NitroCardView>
diff --git a/src/components/groups/views/GroupInformationView.tsx b/src/components/groups/views/GroupInformationView.tsx
index a13408bb..d873d4df 100644
--- a/src/components/groups/views/GroupInformationView.tsx
+++ b/src/components/groups/views/GroupInformationView.tsx
@@ -1,7 +1,7 @@
 import { CreateLinkEvent, GetSessionDataManager, GroupInformationParser, GroupRemoveMemberComposer } from '@nitrots/nitro-renderer';
 import { FC } from 'react';
 import { CatalogPageName, GetGroupManager, GetGroupMembers, GroupMembershipType, GroupType, LocalizeText, SendMessageComposer, TryJoinGroup, TryVisitRoom } from '../../../api';
-import { Button, Column, Flex, Grid, GridProps, LayoutBadgeImageView, Text } from '../../../common';
+import { Button, Column, Grid, GridProps, LayoutBadgeImageView, Text } from '../../../common';
 import { useNotification } from '../../../hooks';
 
 const STATES: string[] = [ 'regular', 'exclusive', 'private' ];
@@ -101,46 +101,46 @@ export const GroupInformationView: FC<GroupInformationViewProps> = props =>
 
     return (
         <Grid overflow={ overflow } { ...rest }>
-            <Column center size={ 3 } overflow="hidden">
-                <Flex alignItems="center" overflow="hidden" className="group-badge">
+            <Column center overflow="hidden" size={ 3 }>
+                <div className="flex items-center overflow-hidden group-badge">
                     <LayoutBadgeImageView badgeCode={ groupInformation.badge } isGroup={ true } scale={ 2 } />
-                </Flex>
+                </div>
                 <Column alignItems="center" gap={ 1 }>
-                    <Text small underline pointer onClick={ () => handleAction('members') }>{ LocalizeText('group.membercount', [ 'totalMembers' ], [ groupInformation.membersCount.toString() ]) }</Text>
+                    <Text pointer small underline onClick={ () => handleAction('members') }>{ LocalizeText('group.membercount', [ 'totalMembers' ], [ groupInformation.membersCount.toString() ]) }</Text>
                     { (groupInformation.pendingRequestsCount > 0) &&
-                        <Text small underline pointer onClick={ () => handleAction('members_pending') }>{ LocalizeText('group.pendingmembercount', [ 'amount' ], [ groupInformation.pendingRequestsCount.toString() ]) }</Text> }
+                        <Text pointer small underline onClick={ () => handleAction('members_pending') }>{ LocalizeText('group.pendingmembercount', [ 'amount' ], [ groupInformation.pendingRequestsCount.toString() ]) }</Text> }
                     { groupInformation.isOwner &&
-                        <Text small underline pointer onClick={ () => handleAction('manage') }>{ LocalizeText('group.manage') }</Text> }
+                        <Text pointer small underline onClick={ () => handleAction('manage') }>{ LocalizeText('group.manage') }</Text> }
                 </Column>
                 { getRoleIcon() }
             </Column>
-            <Column size={ 9 } justifyContent="between" overflow="auto">
-                <Column overflow="hidden">
-                    <Column gap={ 1 }>
-                        <Flex alignItems="center" gap={ 2 }>
+            <div className="flex flex-column justify-content-between overflow-auto col-9">
+                <div className="flex flex-column overflow-hidden">
+                    <div className="flex flex-column gap-1">
+                        <div className="items-center gap-2">
                             <Text bold>{ groupInformation.title }</Text>
-                            <Flex gap={ 1 }>
+                            <div className="flex gap-1">
                                 <i className={ 'icon icon-group-type-' + groupInformation.type } title={ LocalizeText(`group.edit.settings.type.${ STATES[groupInformation.type] }.help`) } />
                                 { groupInformation.canMembersDecorate &&
                                     <i className="icon icon-group-decorate" title={ LocalizeText('group.memberscandecorate') } /> }
-                            </Flex>
-                        </Flex>
+                            </div>
+                        </div>
                         <Text small>{ LocalizeText('group.created', [ 'date', 'owner' ], [ groupInformation.createdAt, groupInformation.ownerName ]) }</Text>
-                    </Column>
-                    <Text small overflow="auto" className="group-description">{ groupInformation.description }</Text>
-                </Column>
-                <Column>
-                    <Column gap={ 1 }>
-                        <Text small underline pointer onClick={ () => handleAction('homeroom') }>{ LocalizeText('group.linktobase') }</Text>
-                        <Text small underline pointer onClick={ () => handleAction('furniture') }>{ LocalizeText('group.buyfurni') }</Text>
-                        <Text small underline pointer onClick={ () => handleAction('popular_groups') }>{ LocalizeText('group.showgroups') }</Text>
-                    </Column>
+                    </div>
+                    <Text small className="group-description" overflow="auto">{ groupInformation.description }</Text>
+                </div>
+                <div className="flex flex-column">
+                    <div className="flex flex-column gap-1">
+                        <Text pointer small underline onClick={ () => handleAction('homeroom') }>{ LocalizeText('group.linktobase') }</Text>
+                        <Text pointer small underline onClick={ () => handleAction('furniture') }>{ LocalizeText('group.buyfurni') }</Text>
+                        <Text pointer small underline onClick={ () => handleAction('popular_groups') }>{ LocalizeText('group.showgroups') }</Text>
+                    </div>
                     { (groupInformation.type !== GroupType.PRIVATE || groupInformation.type === GroupType.PRIVATE && groupInformation.membershipType === GroupMembershipType.MEMBER) &&
                         <Button disabled={ (groupInformation.membershipType === GroupMembershipType.REQUEST_PENDING) || isRealOwner } onClick={ handleButtonClick }>
                             { LocalizeText(getButtonText()) }
                         </Button> }
-                </Column>
-            </Column>
+                </div>
+            </div>
         </Grid>
     );
 };
diff --git a/src/components/groups/views/GroupManagerView.tsx b/src/components/groups/views/GroupManagerView.tsx
index 9e1d6254..08ac0ec9 100644
--- a/src/components/groups/views/GroupManagerView.tsx
+++ b/src/components/groups/views/GroupManagerView.tsx
@@ -1,7 +1,7 @@
 import { GroupBadgePart, GroupInformationEvent, GroupSettingsEvent } from '@nitrots/nitro-renderer';
 import { FC, useState } from 'react';
 import { IGroupData, LocalizeText } from '../../../api';
-import { Base, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView, Text } from '../../../common';
+import { Column, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView, Text } from '../../../common';
 import { useMessageEvent } from '../../../hooks';
 import { GroupTabBadgeView } from './tabs/GroupTabBadgeView';
 import { GroupTabColorsView } from './tabs/GroupTabColorsView';
@@ -96,22 +96,22 @@ export const GroupManagerView: FC<{}> = props =>
                 }) }
             </NitroCardTabsView>
             <NitroCardContentView>
-                <Flex alignItems="center" gap={ 2 }>
-                    <Base className={ `nitro-group-tab-image tab-${ currentTab }` } />
+                <div className="items-center gap-2">
+                    <div className={ `nitro-group-tab-image tab-${ currentTab }` } />
                     <Column grow gap={ 0 }>
                         <Text bold fontSize={ 4 }>{ LocalizeText(`group.edit.tabcaption.${ currentTab }`) }</Text>
                         <Text>{ LocalizeText(`group.edit.tabdesc.${ currentTab }`) }</Text>
                     </Column>
-                </Flex>
+                </div>
                 <Column grow overflow="hidden">
                     { (currentTab === 1) &&
-                        <GroupTabIdentityView groupData={ groupData } setGroupData={ setGroupData } setCloseAction={ setCloseAction } onClose={ onClose } /> }
+                        <GroupTabIdentityView groupData={ groupData } setCloseAction={ setCloseAction } setGroupData={ setGroupData } onClose={ onClose } /> }
                     { (currentTab === 2) &&
-                        <GroupTabBadgeView groupData={ groupData } setGroupData={ setGroupData } setCloseAction={ setCloseAction } skipDefault={ true } /> }
+                        <GroupTabBadgeView groupData={ groupData } setCloseAction={ setCloseAction } setGroupData={ setGroupData } skipDefault={ true } /> }
                     { (currentTab === 3) &&
-                        <GroupTabColorsView groupData={ groupData } setGroupData={ setGroupData } setCloseAction={ setCloseAction } /> }
+                        <GroupTabColorsView groupData={ groupData } setCloseAction={ setCloseAction } setGroupData={ setGroupData } /> }
                     { (currentTab === 5) &&
-                        <GroupTabSettingsView groupData={ groupData } setGroupData={ setGroupData } setCloseAction={ setCloseAction } /> }
+                        <GroupTabSettingsView groupData={ groupData } setCloseAction={ setCloseAction } setGroupData={ setGroupData } /> }
                 </Column>
             </NitroCardContentView>
         </NitroCardView>
diff --git a/src/components/groups/views/GroupMembersView.tsx b/src/components/groups/views/GroupMembersView.tsx
index 5cf1be8b..b45b20d3 100644
--- a/src/components/groups/views/GroupMembersView.tsx
+++ b/src/components/groups/views/GroupMembersView.tsx
@@ -2,7 +2,7 @@ import { AddLinkEventTracker, GetSessionDataManager, GroupAdminGiveComposer, Gro
 import { FC, useCallback, useEffect, useState } from 'react';
 import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
 import { GetUserProfile, LocalizeText, SendMessageComposer } from '../../../api';
-import { Base, Button, Column, Flex, Grid, LayoutAvatarImageView, LayoutBadgeImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common';
+import { Button, classNames, Column, Flex, Grid, LayoutAvatarImageView, LayoutBadgeImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common';
 import { useMessageEvent, useNotification } from '../../../hooks';
 
 export const GroupMembersView: FC<{}> = props =>
@@ -149,51 +149,51 @@ export const GroupMembersView: FC<{}> = props =>
         <NitroCardView className="nitro-group-members" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText('group.members.title', [ 'groupName' ], [ membersData ? membersData.groupTitle : '' ]) } onCloseClick={ event => setGroupId(-1) } />
             <NitroCardContentView overflow="hidden">
-                <Flex gap={ 2 }>
+                <div className="flex gap-2">
                     <Flex center className="group-badge">
-                        <LayoutBadgeImageView badgeCode={ membersData.badge } isGroup={ true } className="mx-auto d-block"/>
+                        <LayoutBadgeImageView badgeCode={ membersData.badge } className="mx-auto d-block" isGroup={ true }/>
                     </Flex>
                     <Column fullWidth gap={ 1 }>
-                        <input type="text" className="form-control form-control-sm w-100" placeholder={ LocalizeText('group.members.searchinfo') } value={ searchQuery } onChange={ event => setSearchQuery(event.target.value) } />
+                        <input className="form-control form-control-sm w-100" placeholder={ LocalizeText('group.members.searchinfo') } type="text" value={ searchQuery } onChange={ event => setSearchQuery(event.target.value) } />
                         <select className="form-select form-select-sm w-100" value={ levelId } onChange={ event => setLevelId(parseInt(event.target.value)) }>
                             <option value="0">{ LocalizeText('group.members.search.all') }</option>
                             <option value="1">{ LocalizeText('group.members.search.admins') }</option>
                             <option value="2">{ LocalizeText('group.members.search.pending') }</option>
                         </select>
                     </Column>
-                </Flex>
-                <Grid columnCount={ 2 } overflow="auto" className="nitro-group-members-list-grid">
+                </div>
+                <Grid className="nitro-group-members-list-grid" columnCount={ 2 } overflow="auto">
                     { membersData.result.map((member, index) =>
                     {
                         return (
-                            <Flex key={ index } gap={ 2 } alignItems="center" overflow="hidden" className="member-list-item bg-white rounded p-2">
+                            <Flex key={ index } alignItems="center" className="member-list-item bg-white rounded p-2" gap={ 2 } overflow="hidden">
                                 <div className="avatar-head cursor-pointer" onClick={ () => GetUserProfile(member.id) }>
-                                    <LayoutAvatarImageView figure={ member.figure } headOnly={ true } direction={ 2 } />
+                                    <LayoutAvatarImageView direction={ 2 } figure={ member.figure } headOnly={ true } />
                                 </div>
                                 <Column grow gap={ 1 }>
-                                    <Text bold small pointer onClick={ event => GetUserProfile(member.id) }>{ member.name }</Text>
+                                    <Text bold pointer small onClick={ event => GetUserProfile(member.id) }>{ member.name }</Text>
                                     { (member.rank !== GroupRank.REQUESTED) &&
-                                    <Text small italics variant="muted">{ LocalizeText('group.members.since', [ 'date' ], [ member.joinedAt ]) }</Text> }
+                                    <Text italics small variant="muted">{ LocalizeText('group.members.since', [ 'date' ], [ member.joinedAt ]) }</Text> }
                                 </Column>
-                                <Column gap={ 1 }>
+                                <div className="flex flex-column gap-1">
                                     { (member.rank !== GroupRank.REQUESTED) &&
-                                    <Flex center>
-                                        <Base pointer={ membersData.admin } className={ `icon icon-group-small-${ ((member.rank === GroupRank.OWNER) ? 'owner' : (member.rank === GroupRank.ADMIN) ? 'admin' : (membersData.admin && (member.rank === GroupRank.MEMBER)) ? 'not-admin' : '') }` } title={ LocalizeText(getRankDescription(member)) } onClick={ event => toggleAdmin(member) } />
-                                    </Flex> }
+                                    <div className="flex items-center justify-center">
+                                        <div className={ classNames(`icon icon-group-small-${ ((member.rank === GroupRank.OWNER) ? 'owner' : (member.rank === GroupRank.ADMIN) ? 'admin' : (membersData.admin && (member.rank === GroupRank.MEMBER)) ? 'not-admin' : '') }`, membersData.admin && 'cursor-pointer') } title={ LocalizeText(getRankDescription(member)) } onClick={ event => toggleAdmin(member) } />
+                                    </div> }
                                     { membersData.admin && (member.rank === GroupRank.REQUESTED) &&
                                     <Flex alignItems="center">
-                                        <Base pointer className="nitro-friends-spritesheet icon-accept" title={ LocalizeText('group.members.accept') } onClick={ event => acceptMembership(member) }></Base>
+                                        <div className="nitro-friends-spritesheet icon-accept cursor-pointer" title={ LocalizeText('group.members.accept') } onClick={ event => acceptMembership(member) } />
                                     </Flex> }
                                     { membersData.admin && (member.rank !== GroupRank.OWNER) && (member.id !== GetSessionDataManager().userId) &&
                                     <Flex alignItems="center">
-                                        <Base pointer className="nitro-friends-spritesheet icon-deny" title={ LocalizeText(member.rank === GroupRank.REQUESTED ? 'group.members.reject' : 'group.members.kick') } onClick={ event => removeMemberOrDeclineMembership(member) }></Base>
+                                        <div className="nitro-friends-spritesheet icon-deny cursor-pointer" title={ LocalizeText(member.rank === GroupRank.REQUESTED ? 'group.members.reject' : 'group.members.kick') } onClick={ event => removeMemberOrDeclineMembership(member) } />
                                     </Flex> }
-                                </Column>
+                                </div>
                             </Flex>
                         );
                     }) }
                 </Grid>
-                <Flex gap={ 1 } justifyContent="between" alignItems="center">
+                <Flex alignItems="center" gap={ 1 } justifyContent="between">
                     <Button disabled={ (membersData.pageIndex === 0) } onClick={ event => setPageId(prevValue => (prevValue - 1)) }>
                         <FaChevronLeft className="fa-icon" />
                     </Button>
diff --git a/src/components/groups/views/GroupRoomInformationView.tsx b/src/components/groups/views/GroupRoomInformationView.tsx
index c8c8d99e..6db25130 100644
--- a/src/components/groups/views/GroupRoomInformationView.tsx
+++ b/src/components/groups/views/GroupRoomInformationView.tsx
@@ -2,7 +2,7 @@ import { DesktopViewEvent, GetGuestRoomResultEvent, GetSessionDataManager, Group
 import { FC, useState } from 'react';
 import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
 import { GetGroupInformation, GetGroupManager, GroupMembershipType, GroupType, LocalizeText, SendMessageComposer, TryJoinGroup } from '../../../api';
-import { Base, Button, Column, Flex, LayoutBadgeImageView, Text } from '../../../common';
+import { Button, Flex, LayoutBadgeImageView, Text } from '../../../common';
 import { useMessageEvent, useNotification } from '../../../hooks';
 
 export const GroupRoomInformationView: FC<{}> = props =>
@@ -105,9 +105,9 @@ export const GroupRoomInformationView: FC<{}> = props =>
     if(!groupInformation) return null;
 
     return (
-        <Base className="nitro-notification-bubble rounded">
-            <Column>
-                <Flex alignItems="center" justifyContent="between" pointer onClick={ event => setIsOpen(value => !value) }>
+        <div className="nitro-notification-bubble rounded">
+            <div className="flex flex-column">
+                <Flex pointer alignItems="center" justifyContent="between" onClick={ event => setIsOpen(value => !value) }>
                     <Text variant="white">{ LocalizeText('group.homeroominfo.title') }</Text>
                     { isOpen && <FaChevronUp className="fa-icon" /> }
                     { !isOpen && <FaChevronDown className="fa-icon" /> }
@@ -115,18 +115,18 @@ export const GroupRoomInformationView: FC<{}> = props =>
                 { isOpen &&
                     <>
                         <Flex pointer alignItems="center" gap={ 2 } onClick={ event => GetGroupInformation(groupInformation.id) }>
-                            <Base className="group-badge">
+                            <div className="group-badge">
                                 <LayoutBadgeImageView badgeCode={ groupInformation.badge } isGroup={ true } />
-                            </Base>
+                            </div>
                             <Text variant="white">{ groupInformation.title }</Text>
                         </Flex>
                         { (groupInformation.type !== GroupType.PRIVATE || isRealOwner) && 
-                            <Button fullWidth variant="success" disabled={ (groupInformation.membershipType === GroupMembershipType.REQUEST_PENDING) } onClick={ handleButtonClick }>
+                            <Button fullWidth disabled={ (groupInformation.membershipType === GroupMembershipType.REQUEST_PENDING) } variant="success" onClick={ handleButtonClick }>
                                 { LocalizeText(getButtonText()) }
                             </Button>
                         }
                     </> }
-            </Column>
-        </Base>
+            </div>
+        </div>
     );
 };
diff --git a/src/components/groups/views/tabs/GroupTabBadgeView.tsx b/src/components/groups/views/tabs/GroupTabBadgeView.tsx
index 73d65c08..374c2fb5 100644
--- a/src/components/groups/views/tabs/GroupTabBadgeView.tsx
+++ b/src/components/groups/views/tabs/GroupTabBadgeView.tsx
@@ -106,13 +106,13 @@ export const GroupTabBadgeView: FC<GroupTabBadgeViewProps> = props =>
     }, [ setCloseAction, saveBadge ]);
     
     return (
-        <Grid overflow="hidden" gap={ 1 }>
+        <Grid gap={ 1 } overflow="hidden">
             <Column size={ 2 }>
                 <Flex center className="bg-muted rounded p-1">
                     <LayoutBadgeImageView badgeCode={ getModifiedBadgeCode() } isGroup={ true } />
                 </Flex>
             </Column>
-            <Column size={ 10 } overflow="auto">
+            <Column overflow="auto" size={ 10 }>
                 <GroupBadgeCreatorView badgeParts={ badgeParts } setBadgeParts={ setBadgeParts } />
             </Column>
         </Grid>
diff --git a/src/components/groups/views/tabs/GroupTabColorsView.tsx b/src/components/groups/views/tabs/GroupTabColorsView.tsx
index 61f3c86f..13cce8d0 100644
--- a/src/components/groups/views/tabs/GroupTabColorsView.tsx
+++ b/src/components/groups/views/tabs/GroupTabColorsView.tsx
@@ -1,7 +1,7 @@
 import { GroupSaveColorsComposer } from '@nitrots/nitro-renderer';
 import { Dispatch, FC, SetStateAction, useCallback, useEffect, useState } from 'react';
 import { IGroupData, LocalizeText, SendMessageComposer } from '../../../../api';
-import { AutoGrid, Base, classNames, Column, Flex, Grid, Text } from '../../../../common';
+import { AutoGrid, Column, Grid, Text, classNames } from '../../../../common';
 import { useGroup } from '../../../../hooks';
 
 interface GroupTabColorsViewProps
@@ -96,26 +96,26 @@ export const GroupTabColorsView: FC<GroupTabColorsViewProps> = props =>
     
     return (
         <Grid overflow="hidden">
-            <Column size={ 2 } gap={ 1 }>
+            <Column gap={ 1 } size={ 2 }>
                 <Text bold>{ LocalizeText('group.edit.color.guild.color') }</Text>
                 { groupData.groupColors && (groupData.groupColors.length > 0) &&
-                    <Flex overflow="hidden" className="rounded border">
-                        <Base className="group-color-swatch" style={ { backgroundColor: '#' + getGroupColor(0) } } />
-                        <Base className="group-color-swatch" style={ { backgroundColor: '#' + getGroupColor(1) } } />
-                    </Flex> }
+                    <div className="flex overflow-hidden rounded border">
+                        <div className="group-color-swatch" style={ { backgroundColor: '#' + getGroupColor(0) } } />
+                        <div className="group-color-swatch" style={ { backgroundColor: '#' + getGroupColor(1) } } />
+                    </div> }
             </Column>
-            <Column size={ 5 } gap={ 1 } overflow="hidden">
+            <Column gap={ 1 } overflow="hidden" size={ 5 }>
                 <Text bold>{ LocalizeText('group.edit.color.primary.color') }</Text>
-                <AutoGrid gap={ 1 } columnCount={ 7 } columnMinWidth={ 16 } columnMinHeight={ 16 }>
+                <AutoGrid columnCount={ 7 } columnMinHeight={ 16 } columnMinWidth={ 16 } gap={ 1 }>
                     { groupData.groupColors && groupCustomize.groupColorsA && groupCustomize.groupColorsA.map((item, index) =>
                     {
                         return <div key={ index } className={ classNames('group-badge-color-swatch cursor-pointer', ((groupData.groupColors[0] === item.id) && 'active')) } style={ { backgroundColor: '#' + item.color } } onClick={ () => selectColor(0, item.id) }></div>
                     }) }
                 </AutoGrid>
             </Column>
-            <Column size={ 5 } gap={ 1 } overflow="hidden">
+            <Column gap={ 1 } overflow="hidden" size={ 5 }>
                 <Text bold>{ LocalizeText('group.edit.color.secondary.color') }</Text>
-                <AutoGrid gap={ 1 } columnCount={ 7 } columnMinWidth={ 16 } columnMinHeight={ 16 }>
+                <AutoGrid columnCount={ 7 } columnMinHeight={ 16 } columnMinWidth={ 16 } gap={ 1 }>
                     { groupData.groupColors && groupCustomize.groupColorsB && groupCustomize.groupColorsB.map((item, index) =>
                     {
                         return <div key={ index } className={ classNames('group-badge-color-swatch cursor-pointer', ((groupData.groupColors[1] === item.id) && 'active')) } style={ { backgroundColor: '#' + item.color } } onClick={ () => selectColor(1, item.id) }></div>
diff --git a/src/components/groups/views/tabs/GroupTabCreatorConfirmationView.tsx b/src/components/groups/views/tabs/GroupTabCreatorConfirmationView.tsx
index 30460385..11349976 100644
--- a/src/components/groups/views/tabs/GroupTabCreatorConfirmationView.tsx
+++ b/src/components/groups/views/tabs/GroupTabCreatorConfirmationView.tsx
@@ -1,6 +1,6 @@
 import { Dispatch, FC, SetStateAction } from 'react';
 import { IGroupData, LocalizeText } from '../../../../api';
-import { Base, Column, Flex, Grid, LayoutBadgeImageView, Text } from '../../../../common';
+import { Column, Flex, Grid, LayoutBadgeImageView, Text } from '../../../../common';
 import { useGroup } from '../../../../hooks';
 
 interface GroupTabCreatorConfirmationViewProps
@@ -36,7 +36,7 @@ export const GroupTabCreatorConfirmationView: FC<GroupTabCreatorConfirmationView
     if(!groupData) return null;
 
     return (
-        <Grid overflow="hidden" gap={ 1 }>
+        <Grid gap={ 1 } overflow="hidden">
             <Column size={ 3 }>
                 <Column center className="bg-muted rounded p-1" gap={ 2 }>
                     <Text bold center>{ LocalizeText('group.create.confirm.guildbadge') }</Text>
@@ -44,21 +44,21 @@ export const GroupTabCreatorConfirmationView: FC<GroupTabCreatorConfirmationView
                 </Column>
                 <Column center className="bg-muted rounded p-1" gap={ 2 }>
                     <Text bold center>{ LocalizeText('group.edit.color.guild.color') }</Text>
-                    <Flex overflow="hidden" className="rounded border">
-                        <Base className="group-color-swatch" style={ { backgroundColor: '#' + getGroupColor(0) } } />
-                        <Base className="group-color-swatch" style={ { backgroundColor: '#' + getGroupColor(1) } } />
+                    <Flex className="rounded border" overflow="hidden">
+                        <div className="group-color-swatch" style={ { backgroundColor: '#' + getGroupColor(0) } } />
+                        <div className="group-color-swatch" style={ { backgroundColor: '#' + getGroupColor(1) } } />
                     </Flex>
                 </Column>
             </Column>
-            <Column size={ 9 } justifyContent="between">
-                <Column>
-                    <Column gap={ 1 }>
+            <Column justifyContent="between" size={ 9 }>
+                <div className="flex flex-column">
+                    <div className="flex flex-column gap-1">
                         <Text bold>{ groupData.groupName }</Text>
                         <Text>{ groupData.groupDescription }</Text>
-                    </Column>
+                    </div>
                     <Text overflow="auto">{ LocalizeText('group.create.confirm.info') }</Text>
-                </Column>
-                <Text center variant="white" className="bg-primary rounded p-1">
+                </div>
+                <Text center className="bg-primary rounded p-1" variant="white">
                     { LocalizeText('group.create.confirm.buyinfo', [ 'amount' ], [ purchaseCost.toString() ]) }
                 </Text>
             </Column>
diff --git a/src/components/groups/views/tabs/GroupTabIdentityView.tsx b/src/components/groups/views/tabs/GroupTabIdentityView.tsx
index 3a35d470..72aac18d 100644
--- a/src/components/groups/views/tabs/GroupTabIdentityView.tsx
+++ b/src/components/groups/views/tabs/GroupTabIdentityView.tsx
@@ -1,7 +1,7 @@
 import { CreateLinkEvent, GroupDeleteComposer, GroupSaveInformationComposer } from '@nitrots/nitro-renderer';
 import { Dispatch, FC, SetStateAction, useCallback, useEffect, useState } from 'react';
 import { IGroupData, LocalizeText, SendMessageComposer } from '../../../../api';
-import { Base, Button, Column, Flex, Text } from '../../../../common';
+import { Button, Column, Text } from '../../../../common';
 import { useNotification } from '../../../../hooks';
 
 interface GroupTabIdentityViewProps
@@ -81,36 +81,36 @@ export const GroupTabIdentityView: FC<GroupTabIdentityViewProps> = props =>
 
     return (
         <Column justifyContent="between" overflow="auto">
-            <Column gap={ 1 }>
-                <Flex alignItems="center" gap={ 1 }>
+            <div className="flex flex-column gap-1">
+                <div className="flex items-center gap-1">
                     <Text center className="col-3">{ LocalizeText('group.edit.name') }</Text>
-                    <input type="text" className="form-control form-control-sm" value={ groupName } maxLength={ 29 } onChange={ event => setGroupName(event.target.value) } />
-                </Flex>
-                <Flex alignItems="center" gap={ 1 }>
+                    <input className="form-control form-control-sm" maxLength={ 29 } type="text" value={ groupName } onChange={ event => setGroupName(event.target.value) } />
+                </div>
+                <div className="flex items-center gap-1">
                     <Text center className="col-3">{ LocalizeText('group.edit.desc') }</Text>
-                    <textarea className="form-control form-control-sm" value={ groupDescription } maxLength={ 254 } onChange={ event => setGroupDescription(event.target.value) } />
-                </Flex>
+                    <textarea className="form-control form-control-sm" maxLength={ 254 } value={ groupDescription } onChange={ event => setGroupDescription(event.target.value) } />
+                </div>
                 { isCreator &&
                     <>
-                        <Flex alignItems="center" gap={ 1 }>
+                        <div className="flex items-center gap-1">
                             <Text center className="col-3">{ LocalizeText('group.edit.base') }</Text>
                             <Column fullWidth gap={ 1 }>
                                 <select className="form-select form-select-sm" value={ groupHomeroomId } onChange={ event => setGroupHomeroomId(parseInt(event.target.value)) }>
-                                    <option value={ -1 } disabled>{ LocalizeText('group.edit.base.select.room') }</option>
+                                    <option disabled value={ -1 }>{ LocalizeText('group.edit.base.select.room') }</option>
                                     { availableRooms && availableRooms.map((room, index) => <option key={ index } value={ room.id }>{ room.name }</option>) }
                                 </select>
                             </Column>
-                        </Flex>
-                        <Flex gap={ 1 }>
-                            <Base className="col-3">&nbsp;</Base>
+                        </div>
+                        <div className="flex gap-1">
+                            <div className="col-3">&nbsp;</div>
                             <Text small>{ LocalizeText('group.edit.base.warning') }</Text>
-                        </Flex>
+                        </div>
                     </> }
-            </Column>
+            </div>
             { !isCreator &&
                 <Button variant="danger" onClick={ deleteGroup }>{ LocalizeText('group.delete') }</Button> }
             { isCreator &&
-                <Text underline center fullWidth pointer onClick={ event => CreateLinkEvent('navigator/create') }>{ LocalizeText('group.createroom') }</Text> }
+                <Text center fullWidth pointer underline onClick={ event => CreateLinkEvent('navigator/create') }>{ LocalizeText('group.createroom') }</Text> }
         </Column>
     );
 };
diff --git a/src/components/groups/views/tabs/GroupTabSettingsView.tsx b/src/components/groups/views/tabs/GroupTabSettingsView.tsx
index 64785e0f..1917aecc 100644
--- a/src/components/groups/views/tabs/GroupTabSettingsView.tsx
+++ b/src/components/groups/views/tabs/GroupTabSettingsView.tsx
@@ -1,7 +1,7 @@
 import { GroupSavePreferencesComposer } from '@nitrots/nitro-renderer';
 import { Dispatch, FC, SetStateAction, useCallback, useEffect, useState } from 'react';
 import { IGroupData, LocalizeText, SendMessageComposer } from '../../../../api';
-import { Column, Flex, HorizontalRule, Text } from '../../../../common';
+import { Flex, HorizontalRule, Text } from '../../../../common';
 
 const STATES: string[] = [ 'regular', 'exclusive', 'private' ];
 
@@ -58,32 +58,32 @@ export const GroupTabSettingsView: FC<GroupTabSettingsViewProps> = props =>
     }, [ setCloseAction, saveSettings ]);
     
     return (
-        <Column overflow="auto">
-            <Column>
+        <div className="flex flex-column overflow-auto">
+            <div className="flex flex-column">
                 { STATES.map((state, index) =>
                 {
                     return (
                         <Flex key={ index } alignItems="center" gap={ 1 }>
-                            <input className="form-check-input" type="radio" name="groupState" checked={ (groupState === index) } onChange={ event => setGroupState(index) } />
-                            <Column gap={ 0 }>
-                                <Flex gap={ 1 }>
+                            <input checked={ (groupState === index) } className="form-check-input" name="groupState" type="radio" onChange={ event => setGroupState(index) } />
+                            <div className="flex flex-column gap-0">
+                                <div className="flex gap-1">
                                     <i className={ `icon icon-group-type-${ index }` } />
                                     <Text bold>{ LocalizeText(`group.edit.settings.type.${ state }.label`) }</Text>
-                                </Flex>
+                                </div>
                                 <Text>{ LocalizeText(`group.edit.settings.type.${ state }.help`) }</Text>
-                            </Column>
+                            </div>
                         </Flex>
                     );
                 }) }
-            </Column>
+            </div>
             <HorizontalRule />
-            <Flex alignItems="center" gap={ 1 }>
-                <input className="form-check-input" type="checkbox" checked={ groupDecorate } onChange={ event => setGroupDecorate(prevValue => !prevValue) } />
-                <Column gap={ 1 }>
+            <div className="flex items-center gap-1">
+                <input checked={ groupDecorate } className="form-check-input" type="checkbox" onChange={ event => setGroupDecorate(prevValue => !prevValue) } />
+                <div className="flex flex-column gap-1">
                     <Text bold>{ LocalizeText('group.edit.settings.rights.caption') }</Text>
                     <Text>{ LocalizeText('group.edit.settings.rights.members.help') }</Text>
-                </Column>
-            </Flex>
-        </Column>
+                </div>
+            </div>
+        </div>
     );
 };
diff --git a/src/components/guide-tool/GuideToolView.tsx b/src/components/guide-tool/GuideToolView.tsx
index 0e74993e..93f6e79c 100644
--- a/src/components/guide-tool/GuideToolView.tsx
+++ b/src/components/guide-tool/GuideToolView.tsx
@@ -330,18 +330,18 @@ export const GuideToolView: FC<{}> = props =>
 
     return (
         <NitroCardView className="nitro-guide-tool" theme="primary-slim">
-            <NitroCardHeaderView headerText={ headerText } onCloseClick={ event => processAction('close') } noCloseButton={ noCloseButton } />
+            <NitroCardHeaderView headerText={ headerText } noCloseButton={ noCloseButton } onCloseClick={ event => processAction('close') } />
             <NitroCardContentView className="text-black">
                 { (sessionState === GuideSessionState.GUIDE_TOOL_MENU) &&
-                    <GuideToolMenuView isOnDuty={ isOnDuty } isHandlingGuideRequests={ isHandlingGuideRequests } setIsHandlingGuideRequests={ setIsHandlingGuideRequests } isHandlingHelpRequests={ isHandlingHelpRequests } setIsHandlingHelpRequests={ setIsHandlingHelpRequests } isHandlingBullyReports={ isHandlingBullyReports } setIsHandlingBullyReports={ setIsHandlingBullyReports } guidesOnDuty={ guidesOnDuty } helpersOnDuty={ helpersOnDuty } guardiansOnDuty={ guardiansOnDuty } processAction={ processAction } /> }
+                    <GuideToolMenuView guardiansOnDuty={ guardiansOnDuty } guidesOnDuty={ guidesOnDuty } helpersOnDuty={ helpersOnDuty } isHandlingBullyReports={ isHandlingBullyReports } isHandlingGuideRequests={ isHandlingGuideRequests } isHandlingHelpRequests={ isHandlingHelpRequests } isOnDuty={ isOnDuty } processAction={ processAction } setIsHandlingBullyReports={ setIsHandlingBullyReports } setIsHandlingGuideRequests={ setIsHandlingGuideRequests } setIsHandlingHelpRequests={ setIsHandlingHelpRequests } /> }
                 { (sessionState === GuideSessionState.GUIDE_ACCEPT) &&
-                    <GuideToolAcceptView helpRequestDescription={ helpRequestDescription } helpRequestAverageTime={ helpRequestAverageTime } /> }
+                    <GuideToolAcceptView helpRequestAverageTime={ helpRequestAverageTime } helpRequestDescription={ helpRequestDescription } /> }
                 { [ GuideSessionState.GUIDE_ONGOING, GuideSessionState.USER_ONGOING ].includes(sessionState) &&
-                    <GuideToolOngoingView isGuide={ isOnDuty } userId={ ongoingUserId } userName={ ongoingUsername } userFigure={ ongoingFigure } isTyping={ ongoingIsTyping } messageGroups={ ongoingMessageGroups } /> }
+                    <GuideToolOngoingView isGuide={ isOnDuty } isTyping={ ongoingIsTyping } messageGroups={ ongoingMessageGroups } userFigure={ ongoingFigure } userId={ ongoingUserId } userName={ ongoingUsername } /> }
                 { (sessionState === GuideSessionState.USER_CREATE) &&
-                    <GuideToolUserCreateRequestView userRequest={ userRequest } setUserRequest={ setUserRequest } /> }
+                    <GuideToolUserCreateRequestView setUserRequest={ setUserRequest } userRequest={ userRequest } /> }
                 { (sessionState === GuideSessionState.USER_PENDING) &&
-                    <GuideToolUserPendingView helpRequestDescription={ helpRequestDescription } helpRequestAverageTime={ helpRequestAverageTime } /> }
+                    <GuideToolUserPendingView helpRequestAverageTime={ helpRequestAverageTime } helpRequestDescription={ helpRequestDescription } /> }
                 { (sessionState === GuideSessionState.USER_FEEDBACK) &&
                     <GuideToolUserFeedbackView userName={ ongoingUsername } /> }
                 { (sessionState === GuideSessionState.USER_THANKS) &&
diff --git a/src/components/guide-tool/views/GuideToolAcceptView.tsx b/src/components/guide-tool/views/GuideToolAcceptView.tsx
index b9a9fcf7..f497b771 100644
--- a/src/components/guide-tool/views/GuideToolAcceptView.tsx
+++ b/src/components/guide-tool/views/GuideToolAcceptView.tsx
@@ -1,7 +1,7 @@
 import { GuideSessionGuideDecidesMessageComposer } from '@nitrots/nitro-renderer';
 import { FC } from 'react';
 import { LocalizeText, SendMessageComposer } from '../../../api';
-import { Button, Column, Text } from '../../../common';
+import { Button, Text } from '../../../common';
 
 interface GuideToolAcceptViewProps
 {
@@ -16,20 +16,20 @@ export const GuideToolAcceptView: FC<GuideToolAcceptViewProps> = props =>
     const answerRequest = (response: boolean) => SendMessageComposer(new GuideSessionGuideDecidesMessageComposer(response));
 
     return (
-        <Column>
-            <Column gap={ 0 } className="bg-muted p-2 rounded">
+        <div className="flex flex-column">
+            <div className="flex flex-column gap-0 bg-muted p-2 rounded">
                 <Text bold>{ LocalizeText('guide.help.request.guide.accept.request.title') }</Text>
                 <Text variant="muted">{ LocalizeText('guide.help.request.type.1') }</Text>
-                <Text wrap textBreak>{ helpRequestDescription }</Text>
-            </Column>
-            <Column gap={ 1 }>
+                <Text textBreak wrap>{ helpRequestDescription }</Text>
+            </div>
+            <div className="flex flex-column gap-1">
                 <Button variant="success" onClick={ event => answerRequest(true) }>
                     { LocalizeText('guide.help.request.guide.accept.accept.button') }
                 </Button>
                 <Button variant="danger" onClick={ event => answerRequest(false) }>
                     { LocalizeText('guide.help.request.guide.accept.skip.link') }
                 </Button>
-            </Column>
-        </Column>
+            </div>
+        </div>
     );
 };
diff --git a/src/components/guide-tool/views/GuideToolMenuView.tsx b/src/components/guide-tool/views/GuideToolMenuView.tsx
index 2e00351e..f0d9765d 100644
--- a/src/components/guide-tool/views/GuideToolMenuView.tsx
+++ b/src/components/guide-tool/views/GuideToolMenuView.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { LocalizeText } from '../../../api';
-import { Base, Button, Column, Flex, Text } from '../../../common';
+import { Button, Column, Flex, Text } from '../../../common';
 
 interface GuideToolMenuViewProps
 {
@@ -34,43 +34,43 @@ export const GuideToolMenuView: FC<GuideToolMenuViewProps> = props =>
     } = props;
     
     return (
-        <Column>
-            <Flex alignItems="center" gap={ 2 } className="bg-muted p-2 rounded">
-                <Base className={ 'duty-switch' + (isOnDuty ? '' : ' off') } onClick={ event => processAction('toggle_duty') } />
+        <div className="flex flex-column">
+            <Flex alignItems="center" className="bg-muted p-2 rounded" gap={ 2 }>
+                <div className={ 'duty-switch' + (isOnDuty ? '' : ' off') } onClick={ event => processAction('toggle_duty') } />
                 <Column gap={ 0 }>
                     <Text bold>{ LocalizeText('guide.help.guide.tool.yourstatus') }</Text>
                     <Text>{ LocalizeText(`guide.help.guide.tool.duty.${ (isOnDuty ? 'on' : 'off') }`) }</Text>
                 </Column>
             </Flex>
-            <Column gap={ 1 }>
+            <div className="flex flex-column gap-1">
                 <Text bold>{ LocalizeText('guide.help.guide.tool.tickettypeselection.caption') }</Text>
-                <Flex alignItems="center" gap={ 1 }>
-                    <input className="form-check-input" disabled={ isOnDuty } type="checkbox" checked={ isHandlingGuideRequests } onChange={ event => setIsHandlingGuideRequests(event.target.checked) } />
+                <div className="flex items-center gap-1">
+                    <input checked={ isHandlingGuideRequests } className="form-check-input" disabled={ isOnDuty } type="checkbox" onChange={ event => setIsHandlingGuideRequests(event.target.checked) } />
                     <Text>{ LocalizeText('guide.help.guide.tool.tickettypeselection.guiderequests') }</Text>
-                </Flex>
-                <Flex alignItems="center" gap={ 1 }>
-                    <input className="form-check-input" disabled={ isOnDuty } type="checkbox" checked={ isHandlingHelpRequests } onChange={ event => setIsHandlingHelpRequests(event.target.checked) } />
+                </div>
+                <div className="flex items-center gap-1">
+                    <input checked={ isHandlingHelpRequests } className="form-check-input" disabled={ isOnDuty } type="checkbox" onChange={ event => setIsHandlingHelpRequests(event.target.checked) } />
                     <Text>{ LocalizeText('guide.help.guide.tool.tickettypeselection.onlyhelprequests') }</Text>
-                </Flex>
-                <Flex alignItems="center" gap={ 1 }>
-                    <input className="form-check-input" disabled={ isOnDuty } type="checkbox" checked={ isHandlingBullyReports } onChange={ event => setIsHandlingBullyReports(event.target.checked) } />
+                </div>
+                <div className="flex items-center gap-1">
+                    <input checked={ isHandlingBullyReports } className="form-check-input" disabled={ isOnDuty } type="checkbox" onChange={ event => setIsHandlingBullyReports(event.target.checked) } />
                     <Text>{ LocalizeText('guide.help.guide.tool.tickettypeselection.bullyreports') }</Text>
-                </Flex>
-            </Column>
+                </div>
+            </div>
             <hr className="bg-dark m-0" />
-            <Flex center gap={ 2 }>
-                <Base className="info-icon" />
-                <Column gap={ 1 }>
-                    <Base dangerouslySetInnerHTML={ { __html: LocalizeText('guide.help.guide.tool.guidesonduty', [ 'amount' ], [ guidesOnDuty.toString() ]) } } />
-                    <Base dangerouslySetInnerHTML={ { __html: LocalizeText('guide.help.guide.tool.helpersonduty', [ 'amount' ], [ helpersOnDuty.toString() ]) } } />
-                    <Base dangerouslySetInnerHTML={ { __html: LocalizeText('guide.help.guide.tool.guardiansonduty', [ 'amount' ], [ guardiansOnDuty.toString() ]) } } />
-                </Column>
-            </Flex>
+            <div className="flex justify-content-enter items-center gap-2">
+                <div className="info-icon" />
+                <div className="flex flex-column gap-1">
+                    <div dangerouslySetInnerHTML={ { __html: LocalizeText('guide.help.guide.tool.guidesonduty', [ 'amount' ], [ guidesOnDuty.toString() ]) } } />
+                    <div dangerouslySetInnerHTML={ { __html: LocalizeText('guide.help.guide.tool.helpersonduty', [ 'amount' ], [ helpersOnDuty.toString() ]) } } />
+                    <div dangerouslySetInnerHTML={ { __html: LocalizeText('guide.help.guide.tool.guardiansonduty', [ 'amount' ], [ guardiansOnDuty.toString() ]) } } />
+                </div>
+            </div>
             <hr className="bg-dark m-0" />
-            <Flex justifyContent="between" gap={ 2 }>
+            <Flex gap={ 2 } justifyContent="between">
                 <Button disabled onClick={ event => processAction('forum_link') }>{ LocalizeText('guide.help.guide.tool.forum.link') }</Button>
                 <Button disabled>{ LocalizeText('guide.help.guide.tool.skill.link') }</Button>
             </Flex>
-        </Column>
+        </div>
     );
 }
diff --git a/src/components/guide-tool/views/GuideToolOngoingView.tsx b/src/components/guide-tool/views/GuideToolOngoingView.tsx
index f98160a1..56a59644 100644
--- a/src/components/guide-tool/views/GuideToolOngoingView.tsx
+++ b/src/components/guide-tool/views/GuideToolOngoingView.tsx
@@ -1,7 +1,7 @@
 import { GetSessionDataManager, GuideSessionGetRequesterRoomMessageComposer, GuideSessionInviteRequesterMessageComposer, GuideSessionMessageMessageComposer, GuideSessionRequesterRoomMessageEvent, GuideSessionResolvedMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';
 import { GuideToolMessageGroup, LocalizeText, SendMessageComposer, TryVisitRoom } from '../../../api';
-import { Base, Button, ButtonGroup, Column, Flex, LayoutAvatarImageView, Text } from '../../../common';
+import { Button, Column, Flex, LayoutAvatarImageView, Text, classNames } from '../../../common';
 import { useMessageEvent } from '../../../hooks';
 
 interface GuideToolOngoingViewProps
@@ -72,56 +72,56 @@ export const GuideToolOngoingView: FC<GuideToolOngoingViewProps> = props =>
 
     return (
         <Column fullHeight>
-            <Flex alignItems="center" justifyContent="between" gap={ 1 } className="bg-muted p-2 rounded">
+            <Flex alignItems="center" className="bg-muted p-2 rounded" gap={ 1 } justifyContent="between">
                 { isGuide &&
-                    <ButtonGroup>
+                    <div className="btn-group">
                         <Button onClick={ visit }>{ LocalizeText('guide.help.request.guide.ongoing.visit.button') }</Button>
                         <Button onClick={ invite }>{ LocalizeText('guide.help.request.guide.ongoing.invite.button') }</Button>
-                    </ButtonGroup> }
+                    </div> }
                 { !isGuide &&
                     <Column gap={ 0 }>
                         <Text bold>{ userName }</Text>
                         <Text>{ LocalizeText('guide.help.request.user.ongoing.guide.desc') }</Text>
                     </Column> }
-                <Button variant="danger" disabled>{ LocalizeText('guide.help.common.report.link') }</Button>
+                <Button disabled variant="danger">{ LocalizeText('guide.help.common.report.link') }</Button>
             </Flex>
-            <Column overflow="hidden" gap={ 1 } className="bg-muted rounded chat-messages p-2">
+            <Column className="bg-muted rounded chat-messages p-2" gap={ 1 } overflow="hidden">
                 <Column overflow="auto">
                     { messageGroups.map((group, index) =>
                     {
                         return (
-                            <Flex key={ index } fullWidth justifyContent={ isOwnChat(group.userId) ? 'end' : 'start' } gap={ 2 }>
-                                <Base shrink className="message-avatar">
+                            <Flex key={ index } fullWidth gap={ 2 } justifyContent={ isOwnChat(group.userId) ? 'end' : 'start' }>
+                                <div className="message-avatar flex-shrink-0">
                                     { (!isOwnChat(group.userId)) &&
-                                    <LayoutAvatarImageView figure={ userFigure } direction={ 2 } /> }
-                                </Base>
-                                <Base className={ 'bg-light text-black border-radius mb-2 rounded py-1 px-2 messages-group-' + (isOwnChat(group.userId) ? 'right' : 'left') }>
+                                    <LayoutAvatarImageView direction={ 2 } figure={ userFigure } /> }
+                                </div>
+                                <div className={ 'bg-light text-black border-radius mb-2 rounded py-1 px-2 messages-group-' + (isOwnChat(group.userId) ? 'right' : 'left') }>
                                     <Text bold>
                                         { (isOwnChat(group.userId)) && GetSessionDataManager().userName }
                                         { (!isOwnChat(group.userId)) && userName }
                                     </Text>
-                                    { group.messages.map((chat, index) => <Base key={ index } pointer={ chat.roomId ? true : false } className={ chat.roomId ? 'text-break text-underline' : 'text-break' } onClick={ () => chat.roomId ? TryVisitRoom(chat.roomId) : null }>{ chat.message }</Base>) }
-                                </Base>
+                                    { group.messages.map((chat, index) => <div key={ index } className={ classNames(chat.roomId ? 'text-break text-underline' : 'text-break', 'chat.roomId' && 'cursor-pointer') } onClick={ () => chat.roomId ? TryVisitRoom(chat.roomId) : null }>{ chat.message }</div>) }
+                                </div>
                                 { (isOwnChat(group.userId)) &&
-                                <Base className="message-avatar flex-shrink-0">
-                                    <LayoutAvatarImageView figure={ GetSessionDataManager().figure } direction={ 4 } />
-                                </Base> }
+                                <div className="message-avatar flex-shrink-0">
+                                    <LayoutAvatarImageView direction={ 4 } figure={ GetSessionDataManager().figure } />
+                                </div> }
                             </Flex>
                         );
                     }) }
                     <div ref={ scrollDiv } />
                 </Column>
             </Column>
-            <Column gap={ 1 }>
-                <Flex gap={ 1 }>
-                    <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('guide.help.request.guide.ongoing.input.empty', [ 'name' ], [ userName ]) } value={ messageText } onChange={ event => setMessageText(event.target.value) } onKeyDown={ onKeyDown } />
+            <div className="flex flex-column gap-1">
+                <div className="flex gap-1">
+                    <input className="form-control form-control-sm" placeholder={ LocalizeText('guide.help.request.guide.ongoing.input.empty', [ 'name' ], [ userName ]) } type="text" value={ messageText } onChange={ event => setMessageText(event.target.value) } onKeyDown={ onKeyDown } />
                     <Button variant="success" onClick={ sendMessage }>
                         { LocalizeText('widgets.chatinput.say') }
                     </Button>
-                </Flex>
+                </div>
                 { isTyping &&
                     <Text variant="muted">{ LocalizeText('guide.help.common.typing') }</Text> }
-            </Column>
+            </div>
             <Button fullWidth variant="success" onClick={ resolve }>
                 { LocalizeText('guide.help.request.' + (isGuide ? 'guide' : 'user') + '.ongoing.close.link') }
             </Button>
diff --git a/src/components/guide-tool/views/GuideToolUserCreateRequestView.tsx b/src/components/guide-tool/views/GuideToolUserCreateRequestView.tsx
index e069c072..9e1c209d 100644
--- a/src/components/guide-tool/views/GuideToolUserCreateRequestView.tsx
+++ b/src/components/guide-tool/views/GuideToolUserCreateRequestView.tsx
@@ -1,7 +1,7 @@
 import { GuideSessionCreateMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useState } from 'react';
 import { LocalizeText, SendMessageComposer } from '../../../api';
-import { Button, Column, Text } from '../../../common';
+import { Button, Text } from '../../../common';
 
 interface GuideToolUserCreateRequestViewProps
 {
@@ -23,10 +23,10 @@ export const GuideToolUserCreateRequestView: FC<GuideToolUserCreateRequestViewPr
     }
 
     return (
-        <Column>
+        <div className="flex flex-column">
             <Text>{ LocalizeText('guide.help.request.user.create.help') }</Text>
-            <textarea className="request-message" maxLength={ 140 } value={ userRequest } onChange={ event => setUserRequest(event.target.value) } placeholder={ LocalizeText('guide.help.request.user.create.input.help') }></textarea>
-            <Button fullWidth variant="success" disabled={ (userRequest.length < MIN_REQUEST_LENGTH) || isPending } onClick={ sendRequest }>{ LocalizeText('guide.help.request.user.create.input.button') }</Button>
-        </Column>
+            <textarea className="request-message" maxLength={ 140 } placeholder={ LocalizeText('guide.help.request.user.create.input.help') } value={ userRequest } onChange={ event => setUserRequest(event.target.value) }></textarea>
+            <Button fullWidth disabled={ (userRequest.length < MIN_REQUEST_LENGTH) || isPending } variant="success" onClick={ sendRequest }>{ LocalizeText('guide.help.request.user.create.input.button') }</Button>
+        </div>
     );
 };
diff --git a/src/components/guide-tool/views/GuideToolUserFeedbackView.tsx b/src/components/guide-tool/views/GuideToolUserFeedbackView.tsx
index 9ec72807..6dc2ade1 100644
--- a/src/components/guide-tool/views/GuideToolUserFeedbackView.tsx
+++ b/src/components/guide-tool/views/GuideToolUserFeedbackView.tsx
@@ -15,29 +15,29 @@ export const GuideToolUserFeedbackView: FC<GuideToolUserFeedbackViewProps> = pro
     const giveFeedback = (recommend: boolean) => SendMessageComposer(new GuideSessionFeedbackMessageComposer(recommend));
 
     return (
-        <Column>
-            <Flex justifyContent="between" gap={ 1 } className="bg-muted p-2 rounded">
+        <div className="flex flex-column">
+            <Flex className="bg-muted p-2 rounded" gap={ 1 } justifyContent="between">
                 <Column gap={ 0 }>
                     <Text bold>{ userName }</Text>
                     <Text>{ LocalizeText('guide.help.request.user.feedback.guide.desc') }</Text>
                 </Column>
-                <Button variant="danger" disabled>{ LocalizeText('guide.help.common.report.link') }</Button>
+                <Button disabled variant="danger">{ LocalizeText('guide.help.common.report.link') }</Button>
             </Flex>
-            <Column gap={ 1 }>
+            <div className="flex flex-column gap-1">
                 <Text bold>{ LocalizeText('guide.help.request.user.feedback.closed.title') }</Text>
                 <Text>{ LocalizeText('guide.help.request.user.feedback.closed.desc') }</Text>
-            </Column>
+            </div>
             { userName && (userName.length > 0) &&
                 <>
                     <hr className="bg-dark m-0 mt-auto" />
-                    <Column>
-                        <Text center bold>{ LocalizeText('guide.help.request.user.feedback.question') }</Text>
-                        <Flex gap={ 1 }>
+                    <div className="flex flex-column">
+                        <Text bold center>{ LocalizeText('guide.help.request.user.feedback.question') }</Text>
+                        <div className="flex gap-1">
                             <Button fullWidth variant="success" onClick={ event => giveFeedback(true) }>{ LocalizeText('guide.help.request.user.feedback.positive.button') }</Button>
                             <Button fullWidth variant="danger" onClick={ event => giveFeedback(false) }>{ LocalizeText('guide.help.request.user.feedback.negative.button') }</Button>
-                        </Flex>
-                    </Column>
+                        </div>
+                    </div>
                 </> }
-        </Column>
+        </div>
     );
 };
diff --git a/src/components/guide-tool/views/GuideToolUserNoHelpersView.tsx b/src/components/guide-tool/views/GuideToolUserNoHelpersView.tsx
index 6fcbfd51..032c794c 100644
--- a/src/components/guide-tool/views/GuideToolUserNoHelpersView.tsx
+++ b/src/components/guide-tool/views/GuideToolUserNoHelpersView.tsx
@@ -1,13 +1,13 @@
 import { FC } from 'react';
 import { LocalizeText } from '../../../api';
-import { Column, Text } from '../../../common';
+import { Text } from '../../../common';
 
 export const GuideToolUserNoHelpersView: FC<{}> = props =>
 {
     return (
-        <Column gap={ 1 }>
+        <div className="flex flex-column gap-1">
             <Text bold>{ LocalizeText('guide.help.request.no_tour_guides.title') }</Text>
             <Text>{ LocalizeText('guide.help.request.no_tour_guides.message') }</Text>
-        </Column>
+        </div>
     );
-};
\ No newline at end of file
+};
diff --git a/src/components/guide-tool/views/GuideToolUserPendingView.tsx b/src/components/guide-tool/views/GuideToolUserPendingView.tsx
index 81faaff8..a4a8fd4f 100644
--- a/src/components/guide-tool/views/GuideToolUserPendingView.tsx
+++ b/src/components/guide-tool/views/GuideToolUserPendingView.tsx
@@ -16,18 +16,18 @@ export const GuideToolUserPendingView: FC<GuideToolUserPendingViewProps> = props
     const cancelRequest = () => SendMessageComposer(new GuideSessionRequesterCancelsMessageComposer());
 
     return (
-        <Column>
-            <Column gap={ 0 } className="bg-muted rounded p-2">
+        <div className="flex flex-column">
+            <Column className="bg-muted rounded p-2" gap={ 0 }>
                 <Text bold>{ LocalizeText('guide.help.request.guide.accept.request.title') }</Text>
                 <Text variant="muted">{ LocalizeText('guide.help.request.type.1') }</Text>
-                <Text wrap textBreak>{ helpRequestDescription }</Text>
+                <Text textBreak wrap>{ helpRequestDescription }</Text>
             </Column>
-            <Column gap={ 1 }>
+            <div className="flex flex-column gap-1">
                 <Text bold>{ LocalizeText('guide.help.request.user.pending.info.title') }</Text>
                 <Text>{ LocalizeText('guide.help.request.user.pending.info.message') }</Text>
                 <Text>{ LocalizeText('guide.help.request.user.pending.info.waiting', [ 'waitingtime' ], [ helpRequestAverageTime.toString() ]) }</Text>
-            </Column>
+            </div>
             <Button variant="danger" onClick={ cancelRequest }>{ LocalizeText('guide.help.request.user.pending.cancel.button') }</Button>
-        </Column>
+        </div>
     );
 };
diff --git a/src/components/guide-tool/views/GuideToolUserSomethingWrogView.tsx b/src/components/guide-tool/views/GuideToolUserSomethingWrogView.tsx
index 1e8ec5ea..1c2d5c81 100644
--- a/src/components/guide-tool/views/GuideToolUserSomethingWrogView.tsx
+++ b/src/components/guide-tool/views/GuideToolUserSomethingWrogView.tsx
@@ -1,12 +1,12 @@
 import { FC } from 'react';
 import { LocalizeText } from '../../../api';
-import { Column, Text } from '../../../common';
+import { Text } from '../../../common';
 
 export const GuideToolUserSomethingWrogView: FC<{}> = props =>
 {
     return (
-        <Column gap={ 1 }>
+        <div className="flex flex-column gap-1">
             <Text>{ LocalizeText('guide.help.request.user.guide.disconnected.error.desc') }</Text>
-        </Column>
+        </div>
     );
-};
\ No newline at end of file
+};
diff --git a/src/components/guide-tool/views/GuideToolUserThanksView.tsx b/src/components/guide-tool/views/GuideToolUserThanksView.tsx
index 4953b0fc..b8e398a0 100644
--- a/src/components/guide-tool/views/GuideToolUserThanksView.tsx
+++ b/src/components/guide-tool/views/GuideToolUserThanksView.tsx
@@ -1,13 +1,13 @@
 import { FC } from 'react';
 import { LocalizeText } from '../../../api';
-import { Column, Text } from '../../../common';
+import { Text } from '../../../common';
 
 export const GuideToolUserThanksView: FC<{}> = props =>
 {
     return (
-        <Column gap={ 1 }>
+        <div className="flex flex-column gap-1">
             <Text bold>{ LocalizeText('guide.help.request.user.thanks.info.title') }</Text>
             <Text>{ LocalizeText('guide.help.request.user.thanks.info.desc') }</Text>
-        </Column>
+        </div>
     );
 };
diff --git a/src/components/hc-center/HcCenterView.tsx b/src/components/hc-center/HcCenterView.tsx
index 08c61727..88793aed 100644
--- a/src/components/hc-center/HcCenterView.tsx
+++ b/src/components/hc-center/HcCenterView.tsx
@@ -2,7 +2,7 @@ import { AddLinkEventTracker, ClubGiftInfoEvent, CreateLinkEvent, GetClubGiftInf
 import { FC, useEffect, useState } from 'react';
 import { OverlayTrigger, Popover } from 'react-bootstrap';
 import { ClubStatus, FriendlyTime, GetClubBadge, GetConfigurationValue, LocalizeText, SendMessageComposer } from '../../api';
-import { Base, Button, Column, Flex, LayoutAvatarImageView, LayoutBadgeImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common';
+import { Button, Column, Flex, LayoutAvatarImageView, LayoutBadgeImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common';
 import { useInventoryBadges, useMessageEvent, usePurse, useSessionInfo } from '../../hooks';
 
 
@@ -129,29 +129,29 @@ export const HcCenterView: FC<{}> = props =>
     );
 
     return (
-        <NitroCardView theme="primary-slim" className="nitro-hc-center">
+        <NitroCardView className="nitro-hc-center" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText('generic.hccenter') } onCloseClick={ () => setIsVisible(false) } />
-            <Flex position="relative" className="bg-muted p-2">
-                <Column gap={ 1 }>
+            <Flex className="bg-muted p-2" position="relative">
+                <div className="flex flex-column gap-1">
                     <div className="hc-logo" />
                     <Flex>
                         <Button variant="success" onClick={ event => CreateLinkEvent('catalog/open/' + GetConfigurationValue('catalog.links')['hc.buy_hc']) }>
                             { LocalizeText((clubStatus === ClubStatus.ACTIVE) ? 'hccenter.btn.extend' : 'hccenter.btn.buy') }
                         </Button>
                     </Flex>
-                </Column>
-                <Base position="absolute" className="end-0 p-4 top-0 habbo-avatar">
-                    <LayoutAvatarImageView figure={ userFigure } direction={ 4 } scale={ 2 } />
-                </Base>
+                </div>
+                <div className="end-0 p-4 top-0 habbo-avatar position-absolute">
+                    <LayoutAvatarImageView direction={ 4 } figure={ userFigure } scale={ 2 } />
+                </div>
             </Flex>
             <NitroCardContentView>
-                <Flex gap={ 2 }>
+                <div className="flex gap-2">
                     <LayoutBadgeImageView badgeCode={ badgeCode } className="align-self-center flex-shrink-0 me-1" />
-                    <Column size={ 5 } className="streak-info" gap={ 0 }>
+                    <Column className="streak-info" gap={ 0 } size={ 5 }>
                         <Text>{ LocalizeText('hccenter.status.' + clubStatus) }</Text>
                         <Text dangerouslySetInnerHTML={ { __html: getInfoText() } } />
                     </Column>
-                </Flex>
+                </div>
                 { GetConfigurationValue('hc.center')['payday.info'] &&
                     <Flex alignItems="center">
 
@@ -162,16 +162,16 @@ export const HcCenterView: FC<{}> = props =>
                         </Column>
                         <div className="payday flex-shrink-0 p-2">
                             <h5 className="mb-2 ms-2">{ LocalizeText('hccenter.special.time.title') }</h5>
-                            <div className="d-flex flex-row mb-2">
+                            <div className="flex flex-row mb-2">
                                 <div className="clock me-2" />
                                 <h6 className="mb-0 align-self-center">{ getHcPaydayTime() }</h6>
                             </div>
                             { clubStatus === ClubStatus.ACTIVE &&
                                 <div className="pe-3">
                                     <h5 className="ms-2 mb-1 bolder">{ LocalizeText('hccenter.special.amount.title') }</h5>
-                                    <div className="d-flex flex-column">
+                                    <div className="flex flex-column">
                                         <div className="w-100 text-center ms-4n">{ getHcPaydayAmount() }</div>
-                                        <OverlayTrigger trigger={ [ 'hover', 'focus' ] } placement="left" overlay={ popover }>
+                                        <OverlayTrigger overlay={ popover } placement="left" trigger={ [ 'hover', 'focus' ] }>
                                             <div className="btn btn-link align-self-end text-primary">
                                                 { LocalizeText('hccenter.breakdown.infolink') }
                                             </div>
@@ -181,7 +181,7 @@ export const HcCenterView: FC<{}> = props =>
                         </div>
                     </Flex> }
                 { GetConfigurationValue('hc.center')['gift.info'] &&
-                    <div className="rounded bg-success p-2 d-flex flex-row mb-0">
+                    <div className="rounded bg-success p-2 flex flex-row mb-0">
                         <div>
                             <h4 className="mb-1">{ LocalizeText('hccenter.gift.title') }</h4>
                             <div dangerouslySetInnerHTML={ { __html: unclaimedGifts > 0 ? LocalizeText('hccenter.unclaimedgifts', [ 'unclaimedgifts' ], [ unclaimedGifts.toString() ]) : LocalizeText('hccenter.gift.info') } }></div>
diff --git a/src/components/help/HelpView.tsx b/src/components/help/HelpView.tsx
index f37e42ed..b9fa4b8a 100644
--- a/src/components/help/HelpView.tsx
+++ b/src/components/help/HelpView.tsx
@@ -1,7 +1,7 @@
 import { AddLinkEventTracker, ILinkEventTracker, RemoveLinkEventTracker } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { LocalizeText, ReportState } from '../../api';
-import { Base, Column, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
+import { Column, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
 import { useHelp } from '../../hooks';
 import { DescribeReportView } from './views/DescribeReportView';
 import { HelpIndexView } from './views/HelpIndexView';
@@ -100,10 +100,10 @@ export const HelpView: FC<{}> = props =>
                     <NitroCardHeaderView headerText={ LocalizeText('help.button.cfh') } onCloseClick={ onClose } />
                     <NitroCardContentView className="text-black">
                         <Grid>
-                            <Column center size={ 5 } overflow="hidden">
-                                <Base className="index-image" />
+                            <Column center overflow="hidden" size={ 5 }>
+                                <div className="index-image" />
                             </Column>
-                            <Column justifyContent="between" size={ 7 } overflow="hidden">
+                            <Column justifyContent="between" overflow="hidden" size={ 7 }>
                                 <CurrentStepView />
                             </Column>
                         </Grid>
diff --git a/src/components/help/views/DescribeReportView.tsx b/src/components/help/views/DescribeReportView.tsx
index 5f231d3a..e517e672 100644
--- a/src/components/help/views/DescribeReportView.tsx
+++ b/src/components/help/views/DescribeReportView.tsx
@@ -1,6 +1,6 @@
 import { FC, useState } from 'react';
 import { LocalizeText, ReportState, ReportType } from '../../../api';
-import { Button, Column, Flex, Text } from '../../../common';
+import { Button, Flex, Text } from '../../../common';
 import { useHelp } from '../../../hooks';
 
 export const DescribeReportView: FC<{}> = props =>
@@ -30,13 +30,13 @@ export const DescribeReportView: FC<{}> = props =>
 
     return (
         <>
-            <Column gap={ 1 }>
+            <div className="flex flex-column gap-1">
                 <Text fontSize={ 4 }>{ LocalizeText('help.emergency.chat_report.subtitle') }</Text>
                 <Text>{ LocalizeText('help.cfh.input.text') }</Text>
-            </Column>
+            </div>
             <textarea className="form-control h-100" value={ message } onChange={ event => setMessage(event.target.value) } />
             <Flex gap={ 2 } justifyContent="between">
-                <Button variant="secondary" disabled={ !(activeReport.reportType === ReportType.BULLY || activeReport.reportType === ReportType.EMERGENCY) } onClick={ back }>
+                <Button disabled={ !(activeReport.reportType === ReportType.BULLY || activeReport.reportType === ReportType.EMERGENCY) } variant="secondary" onClick={ back }>
                     { LocalizeText('generic.back') }
                 </Button>
                 <Button disabled={ (message.length < 15) } onClick={ submitMessage }>
diff --git a/src/components/help/views/HelpIndexView.tsx b/src/components/help/views/HelpIndexView.tsx
index 08ee97a8..3dd74385 100644
--- a/src/components/help/views/HelpIndexView.tsx
+++ b/src/components/help/views/HelpIndexView.tsx
@@ -1,7 +1,7 @@
 import { GetCfhStatusMessageComposer } from '@nitrots/nitro-renderer';
 import { FC } from 'react';
 import { DispatchUiEvent, GetConfigurationValue, LocalizeText, ReportState, ReportType, SendMessageComposer } from '../../../api';
-import { Button, Column, Text } from '../../../common';
+import { Button, Text } from '../../../common';
 import { GuideToolEvent } from '../../../events';
 import { useHelp } from '../../../hooks';
 
@@ -22,16 +22,16 @@ export const HelpIndexView: FC<{}> = props =>
 
     return (
         <>
-            <Column grow center gap={ 1 }>
+            <div className="flex flex-column justify-center alignp-items-enter flex-grow-1 gap-1">
                 <Text fontSize={ 3 }>{ LocalizeText('help.main.frame.title') }</Text>
                 <Text>{ LocalizeText('help.main.self.description') }</Text>
-            </Column>
-            <Column gap={ 1 }>
+            </div>
+            <div className="flex flex-column gap-1">
                 <Button onClick={ onReportClick }>{ LocalizeText('help.main.bully.subtitle') }</Button>
-                <Button onClick={ () => DispatchUiEvent(new GuideToolEvent(GuideToolEvent.CREATE_HELP_REQUEST)) } disabled={ !GetConfigurationValue('guides.enabled') }>{ LocalizeText('help.main.help.title') }</Button>
+                <Button disabled={ !GetConfigurationValue('guides.enabled') } onClick={ () => DispatchUiEvent(new GuideToolEvent(GuideToolEvent.CREATE_HELP_REQUEST)) }>{ LocalizeText('help.main.help.title') }</Button>
                 <Button disabled={ true }>{ LocalizeText('help.main.self.tips.title') }</Button>
-            </Column>
-            <Button variant="link" textColor="black" onClick={ () => SendMessageComposer(new GetCfhStatusMessageComposer(false)) }>{ LocalizeText('help.main.my.sanction.status') }</Button>
+            </div>
+            <Button textColor="black" variant="link" onClick={ () => SendMessageComposer(new GetCfhStatusMessageComposer(false)) }>{ LocalizeText('help.main.my.sanction.status') }</Button>
         </>
     )
 }
diff --git a/src/components/help/views/ReportSummaryView.tsx b/src/components/help/views/ReportSummaryView.tsx
index aa78c7cb..74914cc1 100644
--- a/src/components/help/views/ReportSummaryView.tsx
+++ b/src/components/help/views/ReportSummaryView.tsx
@@ -1,7 +1,7 @@
 import { CallForHelpFromForumMessageMessageComposer, CallForHelpFromForumThreadMessageComposer, CallForHelpFromIMMessageComposer, CallForHelpFromPhotoMessageComposer, CallForHelpMessageComposer } from '@nitrots/nitro-renderer';
 import { FC } from 'react';
 import { LocalizeText, ReportType, SendMessageComposer } from '../../../api';
-import { Button, Column, Text } from '../../../common';
+import { Button, Text } from '../../../common';
 import { useHelp } from '../../../hooks';
 
 export const ReportSummaryView: FC<{}> = props =>
@@ -45,10 +45,10 @@ export const ReportSummaryView: FC<{}> = props =>
 
     return (
         <>
-            <Column gap={ 1 }>
+            <div className="flex flex-column gap-1">
                 <Text fontSize={ 4 }>{ LocalizeText('help.cfh.button.send') }</Text>
                 <Text>{ LocalizeText('help.main.summary') }</Text>
-            </Column>
+            </div>
             <Button variant="success" onClick={ submitReport }>
                 { LocalizeText('guide.help.request.emergency.submit.button') }
             </Button>
diff --git a/src/components/help/views/SanctionStatusView.tsx b/src/components/help/views/SanctionStatusView.tsx
index d4d7acbe..99720cce 100644
--- a/src/components/help/views/SanctionStatusView.tsx
+++ b/src/components/help/views/SanctionStatusView.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { LocalizeText } from '../../../api';
-import { Base, Button, Column, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../common';
+import { Button, Column, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../common';
 import { useHelp } from '../../../hooks';
 
 export const SanctionSatusView:FC<{}> = props =>
@@ -41,10 +41,10 @@ export const SanctionSatusView:FC<{}> = props =>
             <NitroCardHeaderView headerText={ LocalizeText('help.sanction.info.title') } onCloseClick={ () => setSanctionInfo(null) } />
             <NitroCardContentView className="text-black">
                 <Grid>
-                    <Column center size={ 5 } overflow="hidden">
-                        <Base className="index-image" />
+                    <Column center overflow="hidden" size={ 5 }>
+                        <div className="index-image" />
                     </Column>
-                    <Column justifyContent="between" size={ 7 } overflow="hidden">
+                    <Column justifyContent="between" overflow="hidden" size={ 7 }>
                         { (sanctionInfo.sanctionReason === 'cfh.reason.EMPTY')
                             ? <div className="col-12 fw-bold">{ LocalizeText('help.sanction.current.none') }</div>
                             : <>
diff --git a/src/components/help/views/SelectReportedChatsView.tsx b/src/components/help/views/SelectReportedChatsView.tsx
index 8873f167..2702a8a1 100644
--- a/src/components/help/views/SelectReportedChatsView.tsx
+++ b/src/components/help/views/SelectReportedChatsView.tsx
@@ -58,19 +58,19 @@ export const SelectReportedChatsView: FC<{}> = props =>
 
     return (
         <>
-            <Column gap={ 1 }>
+            <div className="flex flex-column gap-1">
                 <Text fontSize={ 4 }>{ LocalizeText('help.emergency.chat_report.subtitle') }</Text>
                 <Text>{ LocalizeText('help.emergency.chat_report.description') }</Text>
-            </Column>
+            </div>
             <Column gap={ 1 } overflow="hidden">
                 { !userChats || !userChats.length &&
                     <Text>{ LocalizeText('help.cfh.error.no_user_data') }</Text> }
                 { (userChats.length > 0) &&
-                    <AutoGrid gap={ 1 } columnCount={ 1 } columnMinHeight={ 25 } overflow="auto">
+                    <AutoGrid columnCount={ 1 } columnMinHeight={ 25 } gap={ 1 } overflow="auto">
                         { userChats.map((chat, index) =>
                         {
                             return (
-                                <LayoutGridItem key={ chat.id } onClick={ event => selectChat(chat) } itemActive={ (selectedChats.indexOf(chat) >= 0) }>
+                                <LayoutGridItem key={ chat.id } itemActive={ (selectedChats.indexOf(chat) >= 0) } onClick={ event => selectChat(chat) }>
                                     <Text>{ chat.message }</Text>
                                 </LayoutGridItem>
                             );
@@ -78,7 +78,7 @@ export const SelectReportedChatsView: FC<{}> = props =>
                     </AutoGrid> }
             </Column>
             <Flex gap={ 2 } justifyContent="between">
-                <Button variant="secondary" onClick={ back } disabled={ (activeReport.reportType === ReportType.IM) }>
+                <Button disabled={ (activeReport.reportType === ReportType.IM) } variant="secondary" onClick={ back }>
                     { LocalizeText('generic.back') }
                 </Button>
                 <Button disabled={ (selectedChats.length <= 0) } onClick={ submitChats }>
diff --git a/src/components/help/views/SelectReportedUserView.tsx b/src/components/help/views/SelectReportedUserView.tsx
index 7b0a1b05..258f604d 100644
--- a/src/components/help/views/SelectReportedUserView.tsx
+++ b/src/components/help/views/SelectReportedUserView.tsx
@@ -52,11 +52,11 @@ export const SelectReportedUserView: FC<{}> = props =>
 
     return (
         <>
-            <Column gap={ 1 }>
+            <div className="flex flex-column gap-1">
                 <Text fontSize={ 4 }>{ LocalizeText('help.emergency.main.step.two.title') }</Text>
                 { (availableUsers.length > 0) &&
                     <Text>{ LocalizeText('report.user.pick.user') }</Text> }
-            </Column>
+            </div>
             <Column gap={ 1 } overflow="hidden">
                 { !!!availableUsers.length &&
                     <Text>{ LocalizeText('report.user.error.nolist') }</Text> }
@@ -65,7 +65,7 @@ export const SelectReportedUserView: FC<{}> = props =>
                         { availableUsers.map((user, index) =>
                         {
                             return (
-                                <LayoutGridItem key={ user.id } onClick={ event => selectUser(user.id) } itemActive={ (selectedUserId === user.id) }>
+                                <LayoutGridItem key={ user.id } itemActive={ (selectedUserId === user.id) } onClick={ event => selectUser(user.id) }>
                                     <span dangerouslySetInnerHTML={ { __html: (user.username) } } />
                                 </LayoutGridItem>
                             );
diff --git a/src/components/help/views/SelectTopicView.tsx b/src/components/help/views/SelectTopicView.tsx
index 5dde522e..88fc54e0 100644
--- a/src/components/help/views/SelectTopicView.tsx
+++ b/src/components/help/views/SelectTopicView.tsx
@@ -30,15 +30,15 @@ export const SelectTopicView: FC<{}> = props =>
 
     return (
         <>
-            <Column gap={ 1 }>
+            <div className="flex flex-column gap-1">
                 <Text fontSize={ 4 }>{ LocalizeText('help.emergency.chat_report.subtitle') }</Text>
                 <Text>{ LocalizeText('help.cfh.pick.topic') }</Text>
-            </Column>
+            </div>
             <Column gap={ 1 } overflow="auto">
                 { (selectedCategory < 0) &&
                     cfhCategories.map((category, index) => <Button key={ index } variant="danger" onClick={ event => setSelectedCategory(index) }>{ LocalizeText(`help.cfh.reason.${ category.name }`) }</Button>) }
                 { (selectedCategory >= 0) &&
-                    cfhCategories[selectedCategory].topics.map((topic, index) => <Button key={ index } variant="danger" onClick={ event => setSelectedTopic(index) } active={ (selectedTopic === index) }>{ LocalizeText(`help.cfh.topic.${ topic.id }`) }</Button>) }
+                    cfhCategories[selectedCategory].topics.map((topic, index) => <Button key={ index } active={ (selectedTopic === index) } variant="danger" onClick={ event => setSelectedTopic(index) }>{ LocalizeText(`help.cfh.topic.${ topic.id }`) }</Button>) }
             </Column>
             <Flex gap={ 2 } justifyContent="between">
                 <Button variant="secondary" onClick={ back }>
diff --git a/src/components/help/views/name-change/NameChangeConfirmationView.tsx b/src/components/help/views/name-change/NameChangeConfirmationView.tsx
index 034335f1..ab1ada20 100644
--- a/src/components/help/views/name-change/NameChangeConfirmationView.tsx
+++ b/src/components/help/views/name-change/NameChangeConfirmationView.tsx
@@ -29,13 +29,13 @@ export const NameChangeConfirmationView:FC<NameChangeLayoutViewProps> = props =>
     });
 
     return (
-        <div className="d-flex flex-column gap-4 h-100">
+        <div className="flex flex-column gap-4 h-100">
             <div className="bg-muted rounded p-2 text-center">{ LocalizeText('tutorial.name_change.info.confirm') }</div>
-            <div className="d-flex flex-column align-items-center gap-1 h-100">
+            <div className="flex flex-column items-center gap-1 h-100">
                 <div>{ LocalizeText('tutorial.name_change.confirm') }</div>
                 <div className="fw-bold">{ username }</div>
             </div>
-            <div className="d-flex gap-2">
+            <div className="flex gap-2">
                 <button className="btn btn-success w-100" disabled={ isConfirming } onClick={ confirm }>{ LocalizeText('generic.ok') }</button>
                 <button className="btn btn-primary w-100" onClick={ () => onAction('close') }>{ LocalizeText('cancel') }</button>
             </div>
diff --git a/src/components/help/views/name-change/NameChangeInitView.tsx b/src/components/help/views/name-change/NameChangeInitView.tsx
index 408df51c..42666704 100644
--- a/src/components/help/views/name-change/NameChangeInitView.tsx
+++ b/src/components/help/views/name-change/NameChangeInitView.tsx
@@ -8,10 +8,10 @@ export const NameChangeInitView:FC<NameChangeLayoutViewProps> = props =>
     const { onAction = null } = props;
 
     return (
-        <div className="d-flex flex-column gap-4 h-100">
+        <div className="flex flex-column gap-4 h-100">
             <div className="bg-muted rounded p-2 text-center">{ LocalizeText('tutorial.name_change.info.main') }</div>
-            <div className="fw-bold d-flex align-items-center justify-content-center h-100 w-100">{ LocalizeText('tutorial.name_change.current', [ 'name' ], [ GetSessionDataManager().userName ]) }</div>
-            <div className="d-flex gap-2">
+            <div className="fw-bold flex items-center justify-center size-full">{ LocalizeText('tutorial.name_change.current', [ 'name' ], [ GetSessionDataManager().userName ]) }</div>
+            <div className="flex gap-2">
                 <button className="btn btn-success w-100" onClick={ () => onAction('start') }>{ LocalizeText('tutorial.name_change.change') }</button>
                 <button className="btn btn-primary w-100" onClick={ () => onAction('confirmation', GetSessionDataManager().userName) }>{ LocalizeText('tutorial.name_change.keep') }</button>
             </div>
diff --git a/src/components/help/views/name-change/NameChangeInputView.tsx b/src/components/help/views/name-change/NameChangeInputView.tsx
index 8f352102..51501d23 100644
--- a/src/components/help/views/name-change/NameChangeInputView.tsx
+++ b/src/components/help/views/name-change/NameChangeInputView.tsx
@@ -72,10 +72,10 @@ export const NameChangeInputView:FC<NameChangeLayoutViewProps> = props =>
     });
 
     return (
-        <div className="d-flex flex-column gap-3 h-100">
+        <div className="flex flex-column gap-3 h-100">
             <div>{ LocalizeText('tutorial.name_change.info.select') }</div>
-            <div className="d-flex gap-2">
-                <input type="text" className="form-control form-control-sm" value={ newUsername } onChange={ event => handleUsernameChange(event.target.value) } />
+            <div className="flex gap-2">
+                <input className="form-control form-control-sm" type="text" value={ newUsername } onChange={ event => handleUsernameChange(event.target.value) } />
                 <button className="btn btn-primary" disabled={ newUsername === '' || isChecking } onClick={ check }>{ LocalizeText('tutorial.name_change.check') }</button>
             </div>
             { !errorCode && !canProceed &&
@@ -85,10 +85,10 @@ export const NameChangeInputView:FC<NameChangeLayoutViewProps> = props =>
             { canProceed &&
                 <div className="bg-success rounded p-2 text-center text-white">{ LocalizeText('help.tutorial.name.available', [ 'name' ], [ newUsername ]) }</div> }
             { suggestions &&
-                <div className="d-flex flex-column gap-2">
+                <div className="flex flex-column gap-2">
                     { suggestions.map((suggestion, index) => <div key={ index } className="col bg-muted rounded p-1 cursor-pointer" onClick={ () => handleUsernameChange(suggestion) }>{ suggestion }</div>) }
                 </div> }
-            <div className="d-flex gap-2">
+            <div className="flex gap-2">
                 <button className="btn btn-success w-100" disabled={ !canProceed } onClick={ () => onAction('confirmation', newUsername) }>{ LocalizeText('tutorial.name_change.pick') }</button>
                 <button className="btn btn-primary w-100" onClick={ () => onAction('close') }>{ LocalizeText('cancel') }</button>
             </div>
diff --git a/src/components/hotel-view/HotelView.tsx b/src/components/hotel-view/HotelView.tsx
index bd12372a..44f83290 100644
--- a/src/components/hotel-view/HotelView.tsx
+++ b/src/components/hotel-view/HotelView.tsx
@@ -41,51 +41,51 @@ export const HotelView: FC<{}> = props =>
         <div className="nitro-hotel-view" style={ (backgroundColor && backgroundColor) ? { background: backgroundColor } : {} }>
             <div className="container h-100 py-3 overflow-hidden landing-widgets">
                 <div className="row h-100">
-                    <div className="col-9 h-100 d-flex flex-column">
+                    <div className="col-9 h-100 flex flex-column">
                         <WidgetSlotView
+                            className="col-6"
+                            widgetConf={ GetConfigurationValue('hotelview')['widgets']['slot.' + 1 + '.conf'] }
                             widgetSlot={ 1 }
                             widgetType={ GetConfigurationValue('hotelview')['widgets']['slot.' + 1 + '.widget'] }
-                            widgetConf={ GetConfigurationValue('hotelview')['widgets']['slot.' + 1 + '.conf'] }
-                            className="col-6"
                         />
                         <div className="col-12 row mx-0">
                             <WidgetSlotView
+                                className="col-7"
+                                widgetConf={ GetConfigurationValue('hotelview')['widgets']['slot.' + 2 + '.conf'] }
                                 widgetSlot={ 2 }
                                 widgetType={ GetConfigurationValue('hotelview')['widgets']['slot.' + 2 + '.widget'] }
-                                widgetConf={ GetConfigurationValue('hotelview')['widgets']['slot.' + 2 + '.conf'] }
-                                className="col-7"
                             />
                             <WidgetSlotView
+                                className="col-5"
+                                widgetConf={ GetConfigurationValue('hotelview')['widgets']['slot.' + 3 + '.conf'] }
                                 widgetSlot={ 3 }
                                 widgetType={ GetConfigurationValue('hotelview')['widgets']['slot.' + 3 + '.widget'] }
-                                widgetConf={ GetConfigurationValue('hotelview')['widgets']['slot.' + 3 + '.conf'] }
-                                className="col-5"
                             />
                             <WidgetSlotView
+                                className="col-7"
+                                widgetConf={ GetConfigurationValue('hotelview')['widgets']['slot.' + 4 + '.conf'] }
                                 widgetSlot={ 4 }
                                 widgetType={ GetConfigurationValue('hotelview')['widgets']['slot.' + 4 + '.widget'] }
-                                widgetConf={ GetConfigurationValue('hotelview')['widgets']['slot.' + 4 + '.conf'] }
-                                className="col-7"
                             />
                             <WidgetSlotView
+                                className="col-5"
+                                widgetConf={ GetConfigurationValue('hotelview')['widgets']['slot.' + 5 + '.conf'] }
                                 widgetSlot={ 5 }
                                 widgetType={ GetConfigurationValue('hotelview')['widgets']['slot.' + 5 + '.widget'] }
-                                widgetConf={ GetConfigurationValue('hotelview')['widgets']['slot.' + 5 + '.conf'] }
-                                className="col-5"
                             />
                         </div>
                         <WidgetSlotView
+                            className="mt-auto"
+                            widgetConf={ GetConfigurationValue('hotelview')['widgets']['slot.' + 6 + '.conf'] }
                             widgetSlot={ 6 }
                             widgetType={ GetConfigurationValue('hotelview')['widgets']['slot.' + 6 + '.widget'] }
-                            widgetConf={ GetConfigurationValue('hotelview')['widgets']['slot.' + 6 + '.conf'] }
-                            className="mt-auto"
                         />
                     </div>
                     <div className="col-3 h-100">
                         <WidgetSlotView
+                            widgetConf={ GetConfigurationValue('hotelview')['widgets']['slot.' + 7 +'.conf'] }
                             widgetSlot={ 7 }
                             widgetType={ GetConfigurationValue('hotelview')['widgets']['slot.' + 7 + '.widget'] }
-                            widgetConf={ GetConfigurationValue('hotelview')['widgets']['slot.' + 7 +'.conf'] }
                         />
                     </div>
                 </div>
@@ -98,7 +98,7 @@ export const HotelView: FC<{}> = props =>
             <div className="right position-absolute" style={ (right && right.length) ? { backgroundImage: `url(${ right })` } : {} } />
             { GetConfigurationValue('hotelview')['show.avatar'] && (
                 <div className="avatar-image">
-                    <LayoutAvatarImageView figure={ userFigure } direction={ 2 } />
+                    <LayoutAvatarImageView direction={ 2 } figure={ userFigure } />
                 </div>
             ) }
         </div>
diff --git a/src/components/hotel-view/views/widgets/GetWidgetLayout.tsx b/src/components/hotel-view/views/widgets/GetWidgetLayout.tsx
index 16481768..5f589ef7 100644
--- a/src/components/hotel-view/views/widgets/GetWidgetLayout.tsx
+++ b/src/components/hotel-view/views/widgets/GetWidgetLayout.tsx
@@ -18,7 +18,7 @@ export const GetWidgetLayout: FC<GetWidgetLayoutProps> = props =>
         case 'promoarticle':
             return <PromoArticleWidgetView />;
         case 'achievementcompetition_hall_of_fame':
-            return <HallOfFameWidgetView slot={ props.slot } conf={ props.widgetConf } />;
+            return <HallOfFameWidgetView conf={ props.widgetConf } slot={ props.slot } />;
         case 'bonusrare':
             return <BonusRareWidgetView />;
         case 'widgetcontainer':
diff --git a/src/components/hotel-view/views/widgets/WidgetSlotView.tsx b/src/components/hotel-view/views/widgets/WidgetSlotView.tsx
index 564184f8..56baf74e 100644
--- a/src/components/hotel-view/views/widgets/WidgetSlotView.tsx
+++ b/src/components/hotel-view/views/widgets/WidgetSlotView.tsx
@@ -14,7 +14,7 @@ export const WidgetSlotView: FC<WidgetSlotViewProps> = props =>
     
     return (
         <div className={ `widget-slot slot-${ widgetSlot } ${ (className || '') }` } { ...rest }>
-            <GetWidgetLayout widgetType={ widgetType } slot={ widgetSlot } widgetConf={ widgetConf } />
+            <GetWidgetLayout slot={ widgetSlot } widgetConf={ widgetConf } widgetType={ widgetType } />
         </div>
     );
 }
diff --git a/src/components/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.tsx b/src/components/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.tsx
index ee32c54f..d4992fe5 100644
--- a/src/components/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.tsx
+++ b/src/components/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.tsx
@@ -31,10 +31,10 @@ export const BonusRareWidgetView: FC<BonusRareWidgetViewProps> = props =>
     if(!productType) return null;
 
     return (
-        <div className="bonus-rare widget d-flex">
+        <div className="bonus-rare widget flex">
             { productType }
             <div className="bg-light-dark rounded overflow-hidden position-relative bonus-bar-container">
-                <div className="d-flex justify-content-center align-items-center w-100 h-100 position-absolute small top-0">{ (totalCoinsForBonus - coinsStillRequiredToBuy) + '/' + totalCoinsForBonus }</div>
+                <div className="flex justify-center items-center size-full position-absolute small top-0">{ (totalCoinsForBonus - coinsStillRequiredToBuy) + '/' + totalCoinsForBonus }</div>
                 <div className="small bg-info rounded position-absolute top-0 h-100" style={ { width: ((totalCoinsForBonus - coinsStillRequiredToBuy) / totalCoinsForBonus) * 100 + '%' } }></div>
             </div>
         </div>
diff --git a/src/components/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.tsx b/src/components/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.tsx
index b4237f51..7a5c0e38 100644
--- a/src/components/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.tsx
+++ b/src/components/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.tsx
@@ -21,7 +21,7 @@ export const HallOfFameItemView: FC<HallOfFameItemViewProps> = props =>
                 </div>
                 <div className="small text-center text-white">{ LocalizeText('landing.view.competition.hof.points', [ 'points' ], [ LocalizeFormattedNumber(data.currentScore).toString() ]) }</div>
             </div>
-            <LayoutAvatarImageView figure={ data.figure } direction={ 2 } />
+            <LayoutAvatarImageView direction={ 2 } figure={ data.figure } />
         </div>
     );
 }
diff --git a/src/components/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx b/src/components/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx
index 582ce041..b103dc83 100644
--- a/src/components/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx
+++ b/src/components/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx
@@ -26,7 +26,7 @@ export const HallOfFameWidgetView: FC<HallOfFameWidgetViewProps> = props =>
     if(!data) return null;
 
     return (
-        <div className="hall-of-fame d-flex">
+        <div className="hall-of-fame flex">
             { data.hof && (data.hof.length > 0) && data.hof.map((entry, index) =>
             {
                 return <HallOfFameItemView key={ index } data={ entry } level={ (index + 1) } />;
diff --git a/src/components/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx b/src/components/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx
index 65393247..15a38bef 100644
--- a/src/components/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx
+++ b/src/components/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx
@@ -23,19 +23,19 @@ export const PromoArticleWidgetView: FC<{}> = props =>
 
     return (
         <div className="promo-articles widget mb-2">
-            <div className="d-flex flex-row align-items-center w-100 mb-1">
+            <div className="flex flex-row items-center w-100 mb-1">
                 <small className="flex-shrink-0 pe-1">{ LocalizeText('landing.view.promo.article.header') }</small>
                 <hr className="w-100 my-0"/>
             </div>
-            <div className="d-flex flex-row mb-1">
+            <div className="flex flex-row mb-1">
                 { articles && (articles.length > 0) && articles.map((article, ind) =>
-                    <div className={ 'promo-articles-bullet cursor-pointer ' + (article === articles[index] ? 'promo-articles-bullet-active' : '') } key={ article.id } onClick={ event => setIndex(ind) } />
+                    <div key={ article.id } className={ 'promo-articles-bullet cursor-pointer ' + (article === articles[index] ? 'promo-articles-bullet-active' : '') } onClick={ event => setIndex(ind) } />
                 ) }
             </div>
             { articles && articles[index] &&
-                <div className="promo-article d-flex flex-row row mx-0">
+                <div className="promo-article flex flex-row row mx-0">
                     <div className="promo-article-image" style={ { backgroundImage: `url(${ articles[index].imageUrl })` } }/>
-                    <div className="col-3 d-flex flex-column h-100">
+                    <div className="col-3 flex flex-column h-100">
                         <h3 className="my-0">{ articles[index].title }</h3>
                         <b>{ articles[index].bodyText }</b>
                         <button className="btn btn-sm mt-auto btn-gainsboro" onClick={ event => OpenUrl(articles[index].linkContent) }>{ articles[index].buttonText }</button>
diff --git a/src/components/hotel-view/views/widgets/widget-container/WidgetContainerView.tsx b/src/components/hotel-view/views/widgets/widget-container/WidgetContainerView.tsx
index 68391872..199309be 100644
--- a/src/components/hotel-view/views/widgets/widget-container/WidgetContainerView.tsx
+++ b/src/components/hotel-view/views/widgets/widget-container/WidgetContainerView.tsx
@@ -27,9 +27,9 @@ export const WidgetContainerView: FC<WidgetContainerViewProps> = props =>
     }
 
   	return (
-        <div className="widgetcontainer widget d-flex flex-row overflow-hidden">
+        <div className="widgetcontainer widget flex flex-row overflow-hidden">
             <div className="widgetcontainer-image flex-shrink-0" style={ { backgroundImage: `url(${ getOption('image') })` } } />
-            <div className="d-flex flex-column align-self-center">
+            <div className="flex flex-column align-self-center">
                 <h3 className="my-0">{ LocalizeText(`landing.view.${ getOption('texts') }.header`) }</h3>
                 <i>{ LocalizeText(`landing.view.${ getOption('texts') }.body`) }</i>
                 <button className="btn btn-sm btn-gainsboro align-self-start px-3 mt-auto" onClick={ event => OpenUrl(getOption('btnLink')) }>{ LocalizeText(`landing.view.${ getOption('texts') }.button`) }</button>
diff --git a/src/components/inventory/InventoryView.tsx b/src/components/inventory/InventoryView.tsx
index a2fd6e10..b01fa960 100644
--- a/src/components/inventory/InventoryView.tsx
+++ b/src/components/inventory/InventoryView.tsx
@@ -118,7 +118,7 @@ export const InventoryView: FC<{}> = props =>
     if(!isVisible) return null;
 
     return (
-        <NitroCardView uniqueKey={ 'inventory' } className="nitro-inventory" theme={ isTrading ? 'primary-slim' : '' } >
+        <NitroCardView className="nitro-inventory" theme={ isTrading ? 'primary-slim' : '' } uniqueKey={ 'inventory' } >
             <NitroCardHeaderView headerText={ LocalizeText('inventory.title') } onCloseClick={ onClose } />
             { !isTrading &&
                 <>
@@ -126,7 +126,7 @@ export const InventoryView: FC<{}> = props =>
                         { TABS.map((name, index) =>
                         {
                             return (
-                                <NitroCardTabsItemView key={ index } isActive={ (currentTab === name) } onClick={ event => setCurrentTab(name) } count={ getCount(UNSEEN_CATEGORIES[index]) }>
+                                <NitroCardTabsItemView key={ index } count={ getCount(UNSEEN_CATEGORIES[index]) } isActive={ (currentTab === name) } onClick={ event => setCurrentTab(name) }>
                                     { LocalizeText(name) }
                                 </NitroCardTabsItemView>
                             );
@@ -134,11 +134,11 @@ export const InventoryView: FC<{}> = props =>
                     </NitroCardTabsView>
                     <NitroCardContentView>
                         { (currentTab === TAB_FURNITURE ) &&
-                            <InventoryFurnitureView roomSession={ roomSession } roomPreviewer={ roomPreviewer } /> }
+                            <InventoryFurnitureView roomPreviewer={ roomPreviewer } roomSession={ roomSession } /> }
                         { (currentTab === TAB_BOTS ) &&
-                            <InventoryBotView roomSession={ roomSession } roomPreviewer={ roomPreviewer } /> }
+                            <InventoryBotView roomPreviewer={ roomPreviewer } roomSession={ roomSession } /> }
                         { (currentTab === TAB_PETS ) && 
-                            <InventoryPetView roomSession={ roomSession } roomPreviewer={ roomPreviewer } /> }
+                            <InventoryPetView roomPreviewer={ roomPreviewer } roomSession={ roomSession } /> }
                         { (currentTab === TAB_BADGES ) && 
                             <InventoryBadgeView /> }
                     </NitroCardContentView>
diff --git a/src/components/inventory/views/InventoryCategoryEmptyView.tsx b/src/components/inventory/views/InventoryCategoryEmptyView.tsx
index 635aca1a..8a7cebde 100644
--- a/src/components/inventory/views/InventoryCategoryEmptyView.tsx
+++ b/src/components/inventory/views/InventoryCategoryEmptyView.tsx
@@ -13,11 +13,11 @@ export const InventoryCategoryEmptyView: FC<InventoryCategoryEmptyViewProps> = p
     
     return (
         <Grid { ...rest }>
-            <Column center size={ 5 } overflow="hidden">
+            <Column center overflow="hidden" size={ 5 }>
                 <div className="empty-image" />
             </Column>
-            <Column justifyContent="center" size={ 7 } overflow="hidden">
-                <Text fontWeight="bold" fontSize={ 5 } overflow="unset" truncate>{ title }</Text>
+            <Column justifyContent="center" overflow="hidden" size={ 7 }>
+                <Text truncate fontSize={ 5 } fontWeight="bold" overflow="unset">{ title }</Text>
                 <Text overflow="auto">{ desc }</Text>
             </Column>
             { children }
diff --git a/src/components/inventory/views/badge/InventoryBadgeItemView.tsx b/src/components/inventory/views/badge/InventoryBadgeItemView.tsx
index bb6c54af..459679f5 100644
--- a/src/components/inventory/views/badge/InventoryBadgeItemView.tsx
+++ b/src/components/inventory/views/badge/InventoryBadgeItemView.tsx
@@ -11,7 +11,7 @@ export const InventoryBadgeItemView: FC<PropsWithChildren<{ badgeCode: string }>
     const unseen = isUnseen(UnseenItemCategory.BADGE, getBadgeId(badgeCode));
 
     return (
-        <LayoutGridItem itemActive={ (selectedBadgeCode === badgeCode) } itemUnseen={ unseen } onMouseDown={ event => setSelectedBadgeCode(badgeCode) } onDoubleClick={ event => toggleBadge(selectedBadgeCode) } { ...rest }>
+        <LayoutGridItem itemActive={ (selectedBadgeCode === badgeCode) } itemUnseen={ unseen } onDoubleClick={ event => toggleBadge(selectedBadgeCode) } onMouseDown={ event => setSelectedBadgeCode(badgeCode) } { ...rest }>
             <LayoutBadgeImageView badgeCode={ badgeCode } />
             { children }
         </LayoutGridItem>
diff --git a/src/components/inventory/views/badge/InventoryBadgeView.tsx b/src/components/inventory/views/badge/InventoryBadgeView.tsx
index ab2bbbb3..a67cd171 100644
--- a/src/components/inventory/views/badge/InventoryBadgeView.tsx
+++ b/src/components/inventory/views/badge/InventoryBadgeView.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from 'react';
 import { LocalizeBadgeName, LocalizeText, UnseenItemCategory } from '../../../../api';
-import { AutoGrid, Button, Column, Flex, Grid, LayoutBadgeImageView, Text } from '../../../../common';
+import { AutoGrid, Button, Column, Grid, LayoutBadgeImageView, Text } from '../../../../common';
 import { useInventoryBadges, useInventoryUnseenTracker } from '../../../../hooks';
 import { InventoryBadgeItemView } from './InventoryBadgeItemView';
 
@@ -35,7 +35,7 @@ export const InventoryBadgeView: FC<{}> = props =>
 
     return (
         <Grid>
-            <Column size={ 7 } overflow="hidden">
+            <Column overflow="hidden" size={ 7 }>
                 <AutoGrid columnCount={ 4 }>
                     { badgeCodes && (badgeCodes.length > 0) && badgeCodes.map((badgeCode, index) =>
                     {
@@ -45,20 +45,20 @@ export const InventoryBadgeView: FC<{}> = props =>
                     }) }
                 </AutoGrid>
             </Column>
-            <Column className="justify-content-between" size={ 5 } overflow="auto">
-                <Column overflow="hidden" gap={ 2 }>
+            <Column className="justify-content-between" overflow="auto" size={ 5 }>
+                <Column gap={ 2 } overflow="hidden">
                     <Text>{ LocalizeText('inventory.badges.activebadges') }</Text>
                     <AutoGrid columnCount={ 3 }>
                         { activeBadgeCodes && (activeBadgeCodes.length > 0) && activeBadgeCodes.map((badgeCode, index) => <InventoryBadgeItemView key={ index } badgeCode={ badgeCode } />) }
                     </AutoGrid>
                 </Column>
                 { !!selectedBadgeCode &&
-                    <Column grow justifyContent="end" gap={ 2 }>
-                        <Flex alignItems="center" gap={ 2 }>
+                    <Column grow gap={ 2 } justifyContent="end">
+                        <div className="items-center gap-2">
                             <LayoutBadgeImageView shrink badgeCode={ selectedBadgeCode } />
                             <Text>{ LocalizeBadgeName(selectedBadgeCode) }</Text>
-                        </Flex>
-                        <Button variant={ (isWearingBadge(selectedBadgeCode) ? 'danger' : 'success') } disabled={ !isWearingBadge(selectedBadgeCode) && !canWearBadges() } onClick={ event => toggleBadge(selectedBadgeCode) }>{ LocalizeText(isWearingBadge(selectedBadgeCode) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge') }</Button>
+                        </div>
+                        <Button disabled={ !isWearingBadge(selectedBadgeCode) && !canWearBadges() } variant={ (isWearingBadge(selectedBadgeCode) ? 'danger' : 'success') } onClick={ event => toggleBadge(selectedBadgeCode) }>{ LocalizeText(isWearingBadge(selectedBadgeCode) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge') }</Button>
                     </Column> }
             </Column>
         </Grid>
diff --git a/src/components/inventory/views/bot/InventoryBotItemView.tsx b/src/components/inventory/views/bot/InventoryBotItemView.tsx
index d2130693..79775fe4 100644
--- a/src/components/inventory/views/bot/InventoryBotItemView.tsx
+++ b/src/components/inventory/views/bot/InventoryBotItemView.tsx
@@ -35,8 +35,8 @@ export const InventoryBotItemView: FC<PropsWithChildren<{ botItem: IBotItem }>>
     }
 
     return (
-        <LayoutGridItem itemActive={ (selectedBot === botItem) } itemUnseen={ unseen } onMouseDown={ onMouseEvent } onMouseUp={ onMouseEvent } onMouseOut={ onMouseEvent } onDoubleClick={ onMouseEvent } { ...rest }>
-            <LayoutAvatarImageView figure={ botItem.botData.figure } direction={ 3 } headOnly={ true } />
+        <LayoutGridItem itemActive={ (selectedBot === botItem) } itemUnseen={ unseen } onDoubleClick={ onMouseEvent } onMouseDown={ onMouseEvent } onMouseOut={ onMouseEvent } onMouseUp={ onMouseEvent } { ...rest }>
+            <LayoutAvatarImageView direction={ 3 } figure={ botItem.botData.figure } headOnly={ true } />
             { children }
         </LayoutGridItem>
     );
diff --git a/src/components/inventory/views/bot/InventoryBotView.tsx b/src/components/inventory/views/bot/InventoryBotView.tsx
index b26f7a0e..f4bfe62e 100644
--- a/src/components/inventory/views/bot/InventoryBotView.tsx
+++ b/src/components/inventory/views/bot/InventoryBotView.tsx
@@ -64,21 +64,21 @@ export const InventoryBotView: FC<InventoryBotViewProps> = props =>
         return () => setIsVisible(false);
     }, []);
 
-    if(!botItems || !botItems.length) return <InventoryCategoryEmptyView title={ LocalizeText('inventory.empty.bots.title') } desc={ LocalizeText('inventory.empty.bots.desc') } />;
+    if(!botItems || !botItems.length) return <InventoryCategoryEmptyView desc={ LocalizeText('inventory.empty.bots.desc') } title={ LocalizeText('inventory.empty.bots.title') } />;
 
     return (
         <Grid>
-            <Column size={ 7 } overflow="hidden">
+            <Column overflow="hidden" size={ 7 }>
                 <AutoGrid columnCount={ 5 }>
                     { botItems && (botItems.length > 0) && botItems.map(item => <InventoryBotItemView key={ item.botData.id } botItem={ item } />) }
                 </AutoGrid>
             </Column>
-            <Column size={ 5 } overflow="auto">
+            <Column overflow="auto" size={ 5 }>
                 <Column overflow="hidden" position="relative">
-                    <LayoutRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
+                    <LayoutRoomPreviewerView height={ 140 } roomPreviewer={ roomPreviewer } />
                 </Column>
                 { selectedBot &&
-                    <Column grow justifyContent="between" gap={ 2 }>
+                    <Column grow gap={ 2 } justifyContent="between">
                         <Text grow truncate>{ selectedBot.botData.name }</Text>
                         { !!roomSession &&
                             <Button variant="success" onClick={ event => attemptBotPlacement(selectedBot) }>
diff --git a/src/components/inventory/views/furniture/InventoryFurnitureItemView.tsx b/src/components/inventory/views/furniture/InventoryFurnitureItemView.tsx
index f5e84814..1f059bfb 100644
--- a/src/components/inventory/views/furniture/InventoryFurnitureItemView.tsx
+++ b/src/components/inventory/views/furniture/InventoryFurnitureItemView.tsx
@@ -34,5 +34,5 @@ export const InventoryFurnitureItemView: FC<{ groupItem: GroupItem }> = props =>
 
     const count = groupItem.getUnlockedCount();
 
-    return <LayoutGridItem className={ !count ? 'opacity-0-5 ' : '' } itemImage={ groupItem.iconUrl } itemCount={ groupItem.getUnlockedCount() } itemActive={ (groupItem === selectedItem) } itemUniqueNumber={ groupItem.stuffData.uniqueNumber } itemUnseen={ groupItem.hasUnseenItems } onMouseDown={ onMouseEvent } onMouseUp={ onMouseEvent } onMouseOut={ onMouseEvent } onDoubleClick={ onMouseEvent } { ...rest } />;
+    return <LayoutGridItem className={ !count ? 'opacity-0-5 ' : '' } itemActive={ (groupItem === selectedItem) } itemCount={ groupItem.getUnlockedCount() } itemImage={ groupItem.iconUrl } itemUniqueNumber={ groupItem.stuffData.uniqueNumber } itemUnseen={ groupItem.hasUnseenItems } onDoubleClick={ onMouseEvent } onMouseDown={ onMouseEvent } onMouseOut={ onMouseEvent } onMouseUp={ onMouseEvent } { ...rest } />;
 }
diff --git a/src/components/inventory/views/furniture/InventoryFurnitureSearchView.tsx b/src/components/inventory/views/furniture/InventoryFurnitureSearchView.tsx
index 12a459f7..27b29015 100644
--- a/src/components/inventory/views/furniture/InventoryFurnitureSearchView.tsx
+++ b/src/components/inventory/views/furniture/InventoryFurnitureSearchView.tsx
@@ -1,7 +1,7 @@
 import { Dispatch, FC, SetStateAction, useEffect, useState } from 'react';
 import { FaSearch } from 'react-icons/fa';
 import { GroupItem, LocalizeText } from '../../../../api';
-import { Button, Flex } from '../../../../common';
+import { Button } from '../../../../common';
 
 export interface InventoryFurnitureSearchViewProps
 {
@@ -37,11 +37,11 @@ export const InventoryFurnitureSearchView: FC<InventoryFurnitureSearchViewProps>
     }, [ groupItems, setGroupItems, searchValue ]);
 
     return (
-        <Flex gap={ 1 }>
-            <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } value={ searchValue } onChange={ event => setSearchValue(event.target.value) } />
+        <div className="flex gap-1">
+            <input className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } type="text" value={ searchValue } onChange={ event => setSearchValue(event.target.value) } />
             <Button variant="primary">
                 <FaSearch className="fa-icon" />
             </Button>
-        </Flex>
+        </div>
     );
 }
diff --git a/src/components/inventory/views/furniture/InventoryFurnitureView.tsx b/src/components/inventory/views/furniture/InventoryFurnitureView.tsx
index 657c7109..904200ee 100644
--- a/src/components/inventory/views/furniture/InventoryFurnitureView.tsx
+++ b/src/components/inventory/views/furniture/InventoryFurnitureView.tsx
@@ -108,28 +108,28 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
         return () => setIsVisible(false);
     }, []);
 
-    if(!groupItems || !groupItems.length) return <InventoryCategoryEmptyView title={ LocalizeText('inventory.empty.title') } desc={ LocalizeText('inventory.empty.desc') } />;
+    if(!groupItems || !groupItems.length) return <InventoryCategoryEmptyView desc={ LocalizeText('inventory.empty.desc') } title={ LocalizeText('inventory.empty.title') } />;
 
     return (
         <Grid>
-            <Column size={ 7 } overflow="hidden">
+            <Column overflow="hidden" size={ 7 }>
                 <InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
                 <AutoGrid columnCount={ 5 }>
                     { filteredGroupItems && (filteredGroupItems.length > 0) && filteredGroupItems.map((item, index) => <InventoryFurnitureItemView key={ index } groupItem={ item } />) }
                 </AutoGrid>
             </Column>
-            <Column size={ 5 } overflow="auto">
+            <Column overflow="auto" size={ 5 }>
                 <Column overflow="hidden" position="relative">
-                    <LayoutRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
+                    <LayoutRoomPreviewerView height={ 140 } roomPreviewer={ roomPreviewer } />
                     { selectedItem && selectedItem.stuffData.isUnique &&
                         <LayoutLimitedEditionCompactPlateView className="top-2 end-2" position="absolute" uniqueNumber={ selectedItem.stuffData.uniqueNumber } uniqueSeries={ selectedItem.stuffData.uniqueSeries } /> }
                     { (selectedItem && selectedItem.stuffData.rarityLevel > -1) &&
-                        <LayoutRarityLevelView className="top-2 end-2" position="absolute" level={ selectedItem.stuffData.rarityLevel } /> }
+                        <LayoutRarityLevelView className="top-2 end-2" level={ selectedItem.stuffData.rarityLevel } position="absolute" /> }
                 </Column>
                 { selectedItem &&
-                    <Column grow justifyContent="between" gap={ 2 }>
+                    <Column grow gap={ 2 } justifyContent="between">
                         <Text grow truncate>{ selectedItem.name }</Text>
-                        <Column gap={ 1 }>
+                        <div className="flex flex-column gap-1">
                             { !!roomSession &&
                                 <Button variant="success" onClick={ event => attemptItemPlacement(selectedItem) }>
                                     { LocalizeText('inventory.furni.placetoroom') }
@@ -138,7 +138,7 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
                                 <Button onClick={ event => attemptPlaceMarketplaceOffer(selectedItem) }>
                                     { LocalizeText('inventory.marketplace.sell') }
                                 </Button> }
-                        </Column>
+                        </div>
                     </Column> }
             </Column>
         </Grid>
diff --git a/src/components/inventory/views/furniture/InventoryTradeView.tsx b/src/components/inventory/views/furniture/InventoryTradeView.tsx
index b2bc90ee..296bac39 100644
--- a/src/components/inventory/views/furniture/InventoryTradeView.tsx
+++ b/src/components/inventory/views/furniture/InventoryTradeView.tsx
@@ -1,8 +1,8 @@
 import { IObjectData, TradingListAddItemComposer, TradingListAddItemsComposer } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { FaChevronLeft, FaChevronRight, FaLock, FaUnlock } from 'react-icons/fa';
-import { FurniCategory, getGuildFurniType, GroupItem, IFurnitureItem, LocalizeText, NotificationAlertType, SendMessageComposer, TradeState } from '../../../../api';
-import { AutoGrid, Base, Button, Column, Flex, Grid, LayoutGridItem, Text } from '../../../../common';
+import { FurniCategory, GroupItem, IFurnitureItem, LocalizeText, NotificationAlertType, SendMessageComposer, TradeState, getGuildFurniType } from '../../../../api';
+import { AutoGrid, Button, Column, Flex, Grid, LayoutGridItem, Text } from '../../../../common';
 import { useInventoryTrade, useNotification } from '../../../../hooks';
 import { InventoryFurnitureSearchView } from './InventoryFurnitureSearchView';
 
@@ -178,18 +178,18 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
 
     return (
         <Grid>
-            <Column size={ 4 } overflow="hidden">
+            <Column overflow="hidden" size={ 4 }>
                 <InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
-                <Flex column fullHeight justifyContent="between" overflow="hidden" gap={ 2 }>
+                <Flex column fullHeight gap={ 2 } justifyContent="between" overflow="hidden">
                     <AutoGrid columnCount={ 3 }>
                         { filteredGroupItems && (filteredGroupItems.length > 0) && filteredGroupItems.map((item, index) =>
                         {
                             const count = item.getUnlockedCount();
 
                             return (
-                                <LayoutGridItem key={ index } className={ !count ? 'opacity-0-5 ' : '' } itemImage={ item.iconUrl } itemCount={ count } itemActive={ (groupItem === item) } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => (count && setGroupItem(item)) } onDoubleClick={ event => attemptItemOffer(1) }>
+                                <LayoutGridItem key={ index } className={ !count ? 'opacity-0-5 ' : '' } itemActive={ (groupItem === item) } itemCount={ count } itemImage={ item.iconUrl } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => (count && setGroupItem(item)) } onDoubleClick={ event => attemptItemOffer(1) }>
                                     { ((count > 0) && (groupItem === item)) &&
-                                        <Button position="absolute" variant="success" className="trade-button bottom-1 end-1" onClick={ event => attemptItemOffer(1) }>
+                                        <Button className="trade-button bottom-1 end-1" position="absolute" variant="success" onClick={ event => attemptItemOffer(1) }>
                                             <FaChevronRight className="fa-icon" />
                                         </Button>
                                     }
@@ -197,28 +197,28 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
                             );
                         }) }
                     </AutoGrid>
-                    <Column gap={ 1 } alignItems="end">
+                    <Column alignItems="end" gap={ 1 }>
                         <Grid overflow="hidden">
-                            <Column size={ 6 } overflow="hidden">
-                                <input type="number" className="form-control form-control-sm quantity-input" placeholder={ LocalizeText('catalog.bundlewidget.spinner.select.amount') } disabled={ !groupItem } value={ quantity } onChange={ event => setQuantity(event.target.valueAsNumber) } />
+                            <Column overflow="hidden" size={ 6 }>
+                                <input className="form-control form-control-sm quantity-input" disabled={ !groupItem } placeholder={ LocalizeText('catalog.bundlewidget.spinner.select.amount') } type="number" value={ quantity } onChange={ event => setQuantity(event.target.valueAsNumber) } />
                             </Column>
-                            <Column size={ 6 } overflow="hidden">
-                                <Button variant="secondary" disabled={ !groupItem } onClick={ event => changeCount(groupItem.getUnlockedCount()) }>{ LocalizeText('inventory.trading.areoffering') }</Button>
+                            <Column overflow="hidden" size={ 6 }>
+                                <Button disabled={ !groupItem } variant="secondary" onClick={ event => changeCount(groupItem.getUnlockedCount()) }>{ LocalizeText('inventory.trading.areoffering') }</Button>
                             </Column>
                         </Grid>
-                        <Base fullWidth className="badge bg-muted">
+                        <div className="badge bg-muted w-100">
                             { groupItem ? groupItem.name : LocalizeText('catalog_selectproduct') }
-                        </Base>
+                        </div>
                     </Column>
                 </Flex>
             </Column>
-            <Column size={ 8 } overflow="hidden">
+            <Column overflow="hidden" size={ 8 }>
                 <Grid overflow="hidden">
-                    <Column size={ 6 } overflow="hidden">
-                        <Flex justifyContent="between" alignItems="center">
+                    <Column overflow="hidden" size={ 6 }>
+                        <div className="flex justify-content-between items-center">
                             <Text>{ LocalizeText('inventory.trading.you') } { LocalizeText('inventory.trading.areoffering') }:</Text>
                             { getLockIcon(ownUser.accepts) }
-                        </Flex>
+                        </div>
                         <AutoGrid columnCount={ 3 }>
                             { Array.from(Array(MAX_ITEMS_TO_TRADE), (e, i) =>
                             {
@@ -227,24 +227,24 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
                                 if(!item) return <LayoutGridItem key={ i } />;
 
                                 return (
-                                    <LayoutGridItem key={ i } itemActive={ (ownGroupItem === item) } itemImage={ item.iconUrl } itemCount={ item.getTotalCount() } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setOwnGroupItem(item) } onDoubleClick={ event => removeItem(item) }>
+                                    <LayoutGridItem key={ i } itemActive={ (ownGroupItem === item) } itemCount={ item.getTotalCount() } itemImage={ item.iconUrl } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setOwnGroupItem(item) } onDoubleClick={ event => removeItem(item) }>
                                         { (ownGroupItem === item) &&
-                                            <Button position="absolute" variant="danger" className="trade-button bottom-1 start-1" onClick={ event => removeItem(item) }>
+                                            <Button className="trade-button bottom-1 start-1" position="absolute" variant="danger" onClick={ event => removeItem(item) }>
                                                 <FaChevronLeft className="fa-icon" />
                                             </Button> }
                                     </LayoutGridItem>
                                 );
                             }) }
                         </AutoGrid>
-                        <Base fullWidth className="badge bg-muted">
+                        <div className="badge bg-muted w-100">
                             { ownGroupItem ? ownGroupItem.name : LocalizeText('catalog_selectproduct') }
-                        </Base>
+                        </div>
                     </Column>
-                    <Column size={ 6 } overflow="hidden">
-                        <Flex justifyContent="between" alignItems="center">
+                    <Column overflow="hidden" size={ 6 }>
+                        <div className="flex justify-content-between items-center">
                             <Text>{ otherUser.userName } { LocalizeText('inventory.trading.isoffering') }:</Text>
                             { getLockIcon(otherUser.accepts) }
-                        </Flex>
+                        </div>
                         <AutoGrid columnCount={ 3 }>
                             { Array.from(Array(MAX_ITEMS_TO_TRADE), (e, i) =>
                             {
@@ -252,27 +252,27 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
 
                                 if(!item) return <LayoutGridItem key={ i } />;
 
-                                return <LayoutGridItem key={ i } itemActive={ (otherGroupItem === item) } itemImage={ item.iconUrl } itemCount={ item.getTotalCount() } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setOtherGroupItem(item) } />;
+                                return <LayoutGridItem key={ i } itemActive={ (otherGroupItem === item) } itemCount={ item.getTotalCount() } itemImage={ item.iconUrl } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setOtherGroupItem(item) } />;
                             }) }
                         </AutoGrid>
-                        <Base fullWidth className="badge bg-muted w-100">
+                        <div className="badge bg-muted w-100">
                             { otherGroupItem ? otherGroupItem.name : LocalizeText('catalog_selectproduct') }
-                        </Base>
+                        </div>
                     </Column>
                 </Grid>
-                <Flex grow justifyContent="between">
+                <div className="flex flex-grow-1 justify-content-between">
                     <Button variant="danger" onClick={ cancelTrade }>{ LocalizeText('generic.cancel') }</Button>
                     { (tradeState === TradeState.TRADING_STATE_READY) &&
-                        <Button variant="secondary" disabled={ (!ownUser.itemCount && !otherUser.itemCount) } onClick={ progressTrade }>{ LocalizeText('inventory.trading.accept') }</Button> }
+                        <Button disabled={ (!ownUser.itemCount && !otherUser.itemCount) } variant="secondary" onClick={ progressTrade }>{ LocalizeText('inventory.trading.accept') }</Button> }
                     { (tradeState === TradeState.TRADING_STATE_RUNNING) &&
-                        <Button variant="secondary" disabled={ (!ownUser.itemCount && !otherUser.itemCount) } onClick={ progressTrade }>{ LocalizeText(ownUser.accepts ? 'inventory.trading.modify' : 'inventory.trading.accept') }</Button> }
+                        <Button disabled={ (!ownUser.itemCount && !otherUser.itemCount) } variant="secondary" onClick={ progressTrade }>{ LocalizeText(ownUser.accepts ? 'inventory.trading.modify' : 'inventory.trading.accept') }</Button> }
                     { (tradeState === TradeState.TRADING_STATE_COUNTDOWN) &&
-                        <Button variant="secondary" disabled>{ LocalizeText('inventory.trading.countdown', [ 'counter' ], [ countdownTick.toString() ]) }</Button> }
+                        <Button disabled variant="secondary">{ LocalizeText('inventory.trading.countdown', [ 'counter' ], [ countdownTick.toString() ]) }</Button> }
                     { (tradeState === TradeState.TRADING_STATE_CONFIRMING) &&
                         <Button variant="secondary" onClick={ progressTrade }>{ LocalizeText('inventory.trading.button.restore') }</Button> }
                     { (tradeState === TradeState.TRADING_STATE_CONFIRMED) &&
                         <Button variant="secondary">{ LocalizeText('inventory.trading.info.waiting') }</Button> }
-                </Flex>
+                </div>
             </Column>
         </Grid>
     );
diff --git a/src/components/inventory/views/pet/InventoryPetItemView.tsx b/src/components/inventory/views/pet/InventoryPetItemView.tsx
index aad45f95..0859fe46 100644
--- a/src/components/inventory/views/pet/InventoryPetItemView.tsx
+++ b/src/components/inventory/views/pet/InventoryPetItemView.tsx
@@ -35,8 +35,8 @@ export const InventoryPetItemView: FC<PropsWithChildren<{ petItem: IPetItem }>>
     }
 
     return (
-        <LayoutGridItem itemActive={ (petItem === selectedPet) } itemUnseen={ unseen } onMouseDown={ onMouseEvent } onMouseUp={ onMouseEvent } onMouseOut={ onMouseEvent } onDoubleClick={ onMouseEvent } { ...rest }>
-            <LayoutPetImageView figure={ petItem.petData.figureData.figuredata } direction={ 3 } headOnly={ true } />
+        <LayoutGridItem itemActive={ (petItem === selectedPet) } itemUnseen={ unseen } onDoubleClick={ onMouseEvent } onMouseDown={ onMouseEvent } onMouseOut={ onMouseEvent } onMouseUp={ onMouseEvent } { ...rest }>
+            <LayoutPetImageView direction={ 3 } figure={ petItem.petData.figureData.figuredata } headOnly={ true } />
             { children }
         </LayoutGridItem>
     );
diff --git a/src/components/inventory/views/pet/InventoryPetView.tsx b/src/components/inventory/views/pet/InventoryPetView.tsx
index 5de3b828..8c40e040 100644
--- a/src/components/inventory/views/pet/InventoryPetView.tsx
+++ b/src/components/inventory/views/pet/InventoryPetView.tsx
@@ -63,21 +63,21 @@ export const InventoryPetView: FC<InventoryPetViewProps> = props =>
         return () => setIsVisible(false);
     }, []);
 
-    if(!petItems || !petItems.length) return <InventoryCategoryEmptyView title={ LocalizeText('inventory.empty.pets.title') } desc={ LocalizeText('inventory.empty.pets.desc') } />;
+    if(!petItems || !petItems.length) return <InventoryCategoryEmptyView desc={ LocalizeText('inventory.empty.pets.desc') } title={ LocalizeText('inventory.empty.pets.title') } />;
 
     return (
         <Grid>
-            <Column size={ 7 } overflow="hidden">
+            <Column overflow="hidden" size={ 7 }>
                 <AutoGrid columnCount={ 5 }>
                     { petItems && (petItems.length > 0) && petItems.map(item => <InventoryPetItemView key={ item.petData.id } petItem={ item } />) }
                 </AutoGrid>
             </Column>
-            <Column size={ 5 } overflow="auto">
+            <Column overflow="auto" size={ 5 }>
                 <Column overflow="hidden" position="relative">
-                    <LayoutRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
+                    <LayoutRoomPreviewerView height={ 140 } roomPreviewer={ roomPreviewer } />
                 </Column>
                 { selectedPet && selectedPet.petData &&
-                    <Column grow justifyContent="between" gap={ 2 }>
+                    <Column grow gap={ 2 } justifyContent="between">
                         <Text grow truncate>{ selectedPet.petData.name }</Text>
                         { !!roomSession &&
                             <Button variant="success" onClick={ event => attemptPetPlacement(selectedPet) }>
diff --git a/src/components/loading/LoadingView.tsx b/src/components/loading/LoadingView.tsx
index dd8f919f..69b61991 100644
--- a/src/components/loading/LoadingView.tsx
+++ b/src/components/loading/LoadingView.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { Base, Column } from '../../common';
+import { Column } from '../../common';
 
 interface LoadingViewProps
 {
@@ -10,12 +10,12 @@ export const LoadingView: FC<LoadingViewProps> = props =>
     const {} = props;
     
     return (
-        <Column fullHeight position="relative" className="nitro-loading">
-            <Base fullHeight className="container h-100">
+        <Column fullHeight className="nitro-loading" position="relative">
+            <div className="container h-100">
                 <Column fullHeight alignItems="center" justifyContent="end">
-                    <Base className="connecting-duck" />
+                    <div className="connecting-duck" />
                 </Column>
-            </Base>
+            </div>
         </Column>
     );
 }
diff --git a/src/components/mod-tools/ModToolsView.tsx b/src/components/mod-tools/ModToolsView.tsx
index 5a1b6e9d..89e09dcd 100644
--- a/src/components/mod-tools/ModToolsView.tsx
+++ b/src/components/mod-tools/ModToolsView.tsx
@@ -1,7 +1,7 @@
 import { AddLinkEventTracker, CreateLinkEvent, ILinkEventTracker, RemoveLinkEventTracker, RoomEngineEvent, RoomId, RoomObjectCategory, RoomObjectType } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useRef, useState } from 'react';
 import { GetRoomSession, ISelectedUser } from '../../api';
-import { Base, Button, DraggableWindowPosition, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
+import { Button, DraggableWindowPosition, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
 import { useModTools, useNitroEvent, useObjectSelectedEvent } from '../../hooks';
 import { ModToolsChatlogView } from './views/room/ModToolsChatlogView';
 import { ModToolsRoomView } from './views/room/ModToolsRoomView';
@@ -120,20 +120,20 @@ export const ModToolsView: FC<{}> = props =>
     return (
         <>
             { isVisible &&
-                <NitroCardView uniqueKey="mod-tools" className="nitro-mod-tools" windowPosition={ DraggableWindowPosition.TOP_LEFT } theme="primary-slim" >
+                <NitroCardView className="nitro-mod-tools" theme="primary-slim" uniqueKey="mod-tools" windowPosition={ DraggableWindowPosition.TOP_LEFT } >
                     <NitroCardHeaderView headerText={ 'Mod Tools' } onCloseClick={ event => setIsVisible(false) } />
                     <NitroCardContentView className="text-black" gap={ 1 }>
-                        <Button gap={ 1 } onClick={ event => CreateLinkEvent(`mod-tools/toggle-room-info/${ currentRoomId }`) } disabled={ (currentRoomId <= 0) } className="position-relative">
-                            <Base className="icon icon-small-room position-absolute start-1"/> Room Tool
+                        <Button className="position-relative" disabled={ (currentRoomId <= 0) } gap={ 1 } onClick={ event => CreateLinkEvent(`mod-tools/toggle-room-info/${ currentRoomId }`) }>
+                            <div className="icon icon-small-room position-absolute start-1"/> Room Tool
                         </Button>
-                        <Button innerRef={ elementRef } gap={ 1 } onClick={ event => CreateLinkEvent(`mod-tools/toggle-room-chatlog/${ currentRoomId }`) } disabled={ (currentRoomId <= 0) } className="position-relative">
-                            <Base className="icon icon-chat-history position-absolute start-1"/> Chatlog Tool
+                        <Button className="position-relative" disabled={ (currentRoomId <= 0) } gap={ 1 } innerRef={ elementRef } onClick={ event => CreateLinkEvent(`mod-tools/toggle-room-chatlog/${ currentRoomId }`) }>
+                            <div className="icon icon-chat-history position-absolute start-1"/> Chatlog Tool
                         </Button>
-                        <Button gap={ 1 } onClick={ () => CreateLinkEvent(`mod-tools/toggle-user-info/${ selectedUser.userId }`) } disabled={ !selectedUser } className="position-relative">
-                            <Base className="icon icon-user position-absolute start-1"/> User: { selectedUser ? selectedUser.username : '' }
+                        <Button className="position-relative" disabled={ !selectedUser } gap={ 1 } onClick={ () => CreateLinkEvent(`mod-tools/toggle-user-info/${ selectedUser.userId }`) }>
+                            <div className="icon icon-user position-absolute start-1"/> User: { selectedUser ? selectedUser.username : '' }
                         </Button>
-                        <Button gap={ 1 } onClick={ () => setIsTicketsVisible(prevValue => !prevValue) } className="position-relative">
-                            <Base className="icon icon-tickets position-absolute start-1"/> Report Tool
+                        <Button className="position-relative" gap={ 1 } onClick={ () => setIsTicketsVisible(prevValue => !prevValue) }>
+                            <div className="icon icon-tickets position-absolute start-1"/> Report Tool
                         </Button>
                     </NitroCardContentView>
                 </NitroCardView> }
diff --git a/src/components/mod-tools/views/chatlog/ChatlogView.tsx b/src/components/mod-tools/views/chatlog/ChatlogView.tsx
index 1843ada6..6b4a512f 100644
--- a/src/components/mod-tools/views/chatlog/ChatlogView.tsx
+++ b/src/components/mod-tools/views/chatlog/ChatlogView.tsx
@@ -1,7 +1,7 @@
 import { ChatRecordData, CreateLinkEvent } from '@nitrots/nitro-renderer';
 import { FC, useMemo } from 'react';
 import { TryVisitRoom } from '../../../../api';
-import { Base, Button, Column, Flex, Grid, InfiniteScroll, Text } from '../../../../common';
+import { Button, Column, Flex, Grid, InfiniteScroll, Text } from '../../../../common';
 import { useModTools } from '../../../../hooks';
 import { ChatlogRecord } from './ChatlogRecord';
 
@@ -46,15 +46,15 @@ export const ChatlogView: FC<ChatlogViewProps> = props =>
     const RoomInfo = (props: { roomId: number, roomName: string }) =>
     {
         return (
-            <Flex gap={ 2 } alignItems="center" justifyContent="between" className="bg-muted rounded p-1">
-                <Flex gap={ 1 }>
+            <Flex alignItems="center" className="bg-muted rounded p-1" gap={ 2 } justifyContent="between">
+                <div className="flex gap-1">
                     <Text bold>Room name:</Text>
                     <Text>{ props.roomName }</Text>
-                </Flex>
-                <Flex gap={ 1 }>
+                </div>
+                <div className="flex gap-1">
                     <Button onClick={ event => TryVisitRoom(props.roomId) }>Visit Room</Button>
                     <Button onClick={ event => openRoomInfo(props.roomId) }>Room Tools</Button>
-                </Flex>
+                </div>
             </Flex>
         );
     }
@@ -63,28 +63,28 @@ export const ChatlogView: FC<ChatlogViewProps> = props =>
         <>
             <Column fit gap={ 0 } overflow="hidden">
                 <Column gap={ 2 }>
-                    <Grid gap={ 1 } className="text-black fw-bold border-bottom pb-1">
-                        <Base className="g-col-2">Time</Base>
-                        <Base className="g-col-3">User</Base>
-                        <Base className="g-col-7">Message</Base>
+                    <Grid className="text-black fw-bold border-bottom pb-1" gap={ 1 }>
+                        <div className="g-col-2">Time</div>
+                        <div className="g-col-3">User</div>
+                        <div className="g-col-7">Message</div>
                     </Grid>
                 </Column>
                 { (records && (records.length > 0)) &&
-                    <InfiniteScroll rows={ allRecords } rowRender={ (row: ChatlogRecord) =>
+                    <InfiniteScroll rowRender={ (row: ChatlogRecord) =>
                     {
                         return (
                             <>
                                 { row.isRoomInfo &&
                                     <RoomInfo roomId={ row.roomId } roomName={ row.roomName } /> }
                                 { !row.isRoomInfo &&
-                                    <Grid fullHeight={ false } gap={ 1 } alignItems="center" className="log-entry py-1 border-bottom">
+                                    <Grid alignItems="center" className="log-entry py-1 border-bottom" fullHeight={ false } gap={ 1 }>
                                         <Text className="g-col-2">{ row.timestamp }</Text>
-                                        <Text className="g-col-3" bold underline pointer onClick={ event => CreateLinkEvent(`mod-tools/open-user-info/${ row.habboId }`) }>{ row.username }</Text>
+                                        <Text bold pointer underline className="g-col-3" onClick={ event => CreateLinkEvent(`mod-tools/open-user-info/${ row.habboId }`) }>{ row.username }</Text>
                                         <Text textBreak wrap className="g-col-7">{ row.message }</Text>
                                     </Grid> }
                             </>
                         );
-                    } } /> }
+                    } } rows={ allRecords } /> }
             </Column>
         </>
     );
diff --git a/src/components/mod-tools/views/room/ModToolsRoomView.tsx b/src/components/mod-tools/views/room/ModToolsRoomView.tsx
index 43be3488..96e358cf 100644
--- a/src/components/mod-tools/views/room/ModToolsRoomView.tsx
+++ b/src/components/mod-tools/views/room/ModToolsRoomView.tsx
@@ -1,7 +1,7 @@
 import { CreateLinkEvent, GetModeratorRoomInfoMessageComposer, ModerateRoomMessageComposer, ModeratorActionMessageComposer, ModeratorRoomInfoEvent } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { SendMessageComposer, TryVisitRoom } from '../../../../api';
-import { Button, Column, DraggableWindowPosition, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
+import { Button, Column, DraggableWindowPosition, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
 import { useMessageEvent } from '../../../../hooks';
 
 interface ModToolsRoomViewProps
@@ -72,45 +72,45 @@ export const ModToolsRoomView: FC<ModToolsRoomViewProps> = props =>
         <NitroCardView className="nitro-mod-tools-room" theme="primary-slim" windowPosition={ DraggableWindowPosition.TOP_LEFT }>
             <NitroCardHeaderView headerText={ 'Room Info' + (name ? ': ' + name : '') } onCloseClick={ event => onCloseClick() } />
             <NitroCardContentView className="text-black">
-                <Flex gap={ 2 }>
-                    <Column justifyContent="center" grow gap={ 1 }>
-                        <Flex alignItems="center" gap={ 2 }>
+                <div className="flex gap-2">
+                    <Column grow gap={ 1 } justifyContent="center">
+                        <div className="items-center gap-2">
                             <Text bold align="end" className="col-7">Room Owner:</Text>
-                            <Text underline pointer truncate>{ ownerName }</Text>
-                        </Flex>
-                        <Flex alignItems="center" gap={ 2 }>
+                            <Text pointer truncate underline>{ ownerName }</Text>
+                        </div>
+                        <div className="items-center gap-2">
                             <Text bold align="end" className="col-7">Users in room:</Text>
                             <Text>{ usersInRoom }</Text>
-                        </Flex>
-                        <Flex alignItems="center" gap={ 2 }>
+                        </div>
+                        <div className="items-center gap-2">
                             <Text bold align="end" className="col-7">Owner in room:</Text>
                             <Text>{ ownerInRoom ? 'Yes' : 'No' }</Text>
-                        </Flex>
+                        </div>
                     </Column>
-                    <Column gap={ 1 }>
+                    <div className="flex flex-column gap-1">
                         <Button onClick={ event => TryVisitRoom(roomId) }>Visit Room</Button>
                         <Button onClick={ event => CreateLinkEvent(`mod-tools/open-room-chatlog/${ roomId }`) }>Chatlog</Button>
-                    </Column>
-                </Flex>
+                    </div>
+                </div>
                 <Column className="bg-muted rounded p-2" gap={ 1 }>
-                    <Flex alignItems="center" gap={ 1 }>
-                        <input className="form-check-input" type="checkbox" checked={ kickUsers } onChange={ event => setKickUsers(event.target.checked) } />
+                    <div className="flex items-center gap-1">
+                        <input checked={ kickUsers } className="form-check-input" type="checkbox" onChange={ event => setKickUsers(event.target.checked) } />
                         <Text small>Kick everyone out</Text>
-                    </Flex>
-                    <Flex alignItems="center" gap={ 1 }>
-                        <input className="form-check-input" type="checkbox" checked={ lockRoom } onChange={ event => setLockRoom(event.target.checked) } />
+                    </div>
+                    <div className="flex items-center gap-1">
+                        <input checked={ lockRoom } className="form-check-input" type="checkbox" onChange={ event => setLockRoom(event.target.checked) } />
                         <Text small>Enable the doorbell</Text>
-                    </Flex>
-                    <Flex alignItems="center" gap={ 1 }>
-                        <input className="form-check-input" type="checkbox" checked={ changeRoomName } onChange={ event => setChangeRoomName(event.target.checked) }/>
+                    </div>
+                    <div className="flex items-center gap-1">
+                        <input checked={ changeRoomName } className="form-check-input" type="checkbox" onChange={ event => setChangeRoomName(event.target.checked) }/>
                         <Text small>Change room name</Text>
-                    </Flex>
+                    </div>
                 </Column>
                 <textarea className="form-control" placeholder="Type a mandatory message to the users in this text box..." value={ message } onChange={ event => setMessage(event.target.value) }></textarea>
-                <Flex justifyContent="between">
+                <div className="flex justify-content-between">
                     <Button variant="danger" onClick={ event => handleClick('send_message') }>Send Caution</Button>
                     <Button onClick={ event => handleClick('alert_only') }>Send Alert only</Button>
-                </Flex>
+                </div>
             </NitroCardContentView>
         </NitroCardView>
     );
diff --git a/src/components/mod-tools/views/tickets/ModToolsIssueInfoView.tsx b/src/components/mod-tools/views/tickets/ModToolsIssueInfoView.tsx
index 1179d417..095cd192 100644
--- a/src/components/mod-tools/views/tickets/ModToolsIssueInfoView.tsx
+++ b/src/components/mod-tools/views/tickets/ModToolsIssueInfoView.tsx
@@ -57,19 +57,19 @@ export const ModToolsIssueInfoView: FC<IssueInfoViewProps> = props =>
                                     <tr>
                                         <th>Caller</th>
                                         <td>
-                                            <Text bold underline pointer onClick={ event => openUserInfo(ticket.reporterUserId) }>{ ticket.reporterUserName }</Text>
+                                            <Text bold pointer underline onClick={ event => openUserInfo(ticket.reporterUserId) }>{ ticket.reporterUserName }</Text>
                                         </td>
                                     </tr>
                                     <tr>
                                         <th>Reported User</th>
                                         <td>
-                                            <Text bold underline pointer onClick={ event => openUserInfo(ticket.reportedUserId) }>{ ticket.reportedUserName }</Text>
+                                            <Text bold pointer underline onClick={ event => openUserInfo(ticket.reportedUserId) }>{ ticket.reportedUserName }</Text>
                                         </td>
                                     </tr>
                                 </tbody>
                             </table>
                         </Column>
-                        <Column size={ 4 } gap={ 1 }>
+                        <Column gap={ 1 } size={ 4 }>
                             <Button variant="secondary" onClick={ () => setcfhChatlogOpen(!cfhChatlogOpen) }>Chatlog</Button>
                             <Button onClick={ event => closeIssue(CloseIssuesMessageComposer.RESOLUTION_USELESS) }>Close as useless</Button>
                             <Button variant="danger" onClick={ event => closeIssue(CloseIssuesMessageComposer.RESOLUTION_ABUSIVE) }>Close as abusive</Button>
diff --git a/src/components/mod-tools/views/tickets/ModToolsMyIssuesTabView.tsx b/src/components/mod-tools/views/tickets/ModToolsMyIssuesTabView.tsx
index 2e1827a4..389a8481 100644
--- a/src/components/mod-tools/views/tickets/ModToolsMyIssuesTabView.tsx
+++ b/src/components/mod-tools/views/tickets/ModToolsMyIssuesTabView.tsx
@@ -1,7 +1,7 @@
 import { IssueMessageData, ReleaseIssuesMessageComposer } from '@nitrots/nitro-renderer';
 import { FC } from 'react';
 import { SendMessageComposer } from '../../../../api';
-import { Base, Button, Column, Grid } from '../../../../common';
+import { Button, Column, Grid } from '../../../../common';
 
 interface ModToolsMyIssuesTabViewProps
 {
@@ -16,28 +16,28 @@ export const ModToolsMyIssuesTabView: FC<ModToolsMyIssuesTabViewProps> = props =
     return (
         <Column gap={ 0 } overflow="hidden">
             <Column gap={ 2 }>
-                <Grid gap={ 1 } className="text-black fw-bold border-bottom pb-1">
-                    <Base className="g-col-2">Type</Base>
-                    <Base className="g-col-3">Room/Player</Base>
-                    <Base className="g-col-3">Opened</Base>
-                    <Base className="g-col-2"></Base>
-                    <Base className="g-col-2"></Base>
+                <Grid className="text-black fw-bold border-bottom pb-1" gap={ 1 }>
+                    <div className="g-col-2">Type</div>
+                    <div className="g-col-3">Room/Player</div>
+                    <div className="g-col-3">Opened</div>
+                    <div className="g-col-2"></div>
+                    <div className="g-col-2"></div>
                 </Grid>
             </Column>
-            <Column overflow="auto" className="striped-children" gap={ 0 }>
+            <Column className="striped-children" gap={ 0 } overflow="auto">
                 { myIssues && (myIssues.length > 0) && myIssues.map(issue =>
                 {
                     return (
-                        <Grid key={ issue.issueId } gap={ 1 } alignItems="center" className="text-black py-1 border-bottom">
-                            <Base className="g-col-2">{ issue.categoryId }</Base>
-                            <Base className="g-col-3">{ issue.reportedUserName }</Base>
-                            <Base className="g-col-3">{ new Date(Date.now() - issue.issueAgeInMilliseconds).toLocaleTimeString() }</Base>
-                            <Base className="g-col-2">
+                        <Grid key={ issue.issueId } alignItems="center" className="text-black py-1 border-bottom" gap={ 1 }>
+                            <div className="g-col-2">{ issue.categoryId }</div>
+                            <div className="g-col-3">{ issue.reportedUserName }</div>
+                            <div className="g-col-3">{ new Date(Date.now() - issue.issueAgeInMilliseconds).toLocaleTimeString() }</div>
+                            <div className="g-col-2">
                                 <Button variant="primary" onClick={ event => handleIssue(issue.issueId) }>Handle</Button>
-                            </Base>
-                            <Base className="g-col-2">
+                            </div>
+                            <div className="g-col-2">
                                 <Button variant="danger" onClick={ event => SendMessageComposer(new ReleaseIssuesMessageComposer([ issue.issueId ])) }>Release</Button>
-                            </Base>
+                            </div>
                         </Grid>
                     );
                 }) }
diff --git a/src/components/mod-tools/views/tickets/ModToolsOpenIssuesTabView.tsx b/src/components/mod-tools/views/tickets/ModToolsOpenIssuesTabView.tsx
index 6ee23cd5..c1b9ae75 100644
--- a/src/components/mod-tools/views/tickets/ModToolsOpenIssuesTabView.tsx
+++ b/src/components/mod-tools/views/tickets/ModToolsOpenIssuesTabView.tsx
@@ -1,7 +1,7 @@
 import { IssueMessageData, PickIssuesMessageComposer } from '@nitrots/nitro-renderer';
 import { FC } from 'react';
 import { SendMessageComposer } from '../../../../api';
-import { Base, Button, Column, Grid } from '../../../../common';
+import { Button, Column, Grid } from '../../../../common';
 
 interface ModToolsOpenIssuesTabViewProps
 {
@@ -15,24 +15,24 @@ export const ModToolsOpenIssuesTabView: FC<ModToolsOpenIssuesTabViewProps> = pro
     return (
         <Column gap={ 0 } overflow="hidden">
             <Column gap={ 2 }>
-                <Grid gap={ 1 } className="text-black fw-bold border-bottom pb-1">
-                    <Base className="g-col-2">Type</Base>
-                    <Base className="g-col-3">Room/Player</Base>
-                    <Base className="g-col-4">Opened</Base>
-                    <Base className="g-col-3"></Base>
+                <Grid className="text-black fw-bold border-bottom pb-1" gap={ 1 }>
+                    <div className="g-col-2">Type</div>
+                    <div className="g-col-3">Room/Player</div>
+                    <div className="g-col-4">Opened</div>
+                    <div className="g-col-3"></div>
                 </Grid>
             </Column>
-            <Column overflow="auto" className="striped-children" gap={ 0 }>
+            <Column className="striped-children" gap={ 0 } overflow="auto">
                 { openIssues && (openIssues.length > 0) && openIssues.map(issue =>
                 {
                     return (
-                        <Grid key={ issue.issueId } gap={ 1 } alignItems="center" className="text-black py-1 border-bottom">
-                            <Base className="g-col-2">{ issue.categoryId }</Base>
-                            <Base className="g-col-3">{ issue.reportedUserName }</Base>
-                            <Base className="g-col-4">{ new Date(Date.now() - issue.issueAgeInMilliseconds).toLocaleTimeString() }</Base>
-                            <Base className="g-col-3">
+                        <Grid key={ issue.issueId } alignItems="center" className="text-black py-1 border-bottom" gap={ 1 }>
+                            <div className="g-col-2">{ issue.categoryId }</div>
+                            <div className="g-col-3">{ issue.reportedUserName }</div>
+                            <div className="g-col-4">{ new Date(Date.now() - issue.issueAgeInMilliseconds).toLocaleTimeString() }</div>
+                            <div className="g-col-3">
                                 <Button variant="success" onClick={ event => SendMessageComposer(new PickIssuesMessageComposer([ issue.issueId ], false, 0, 'pick issue button')) }>Pick Issue</Button>
-                            </Base>
+                            </div>
                         </Grid>
                     );
                 }) }
diff --git a/src/components/mod-tools/views/tickets/ModToolsPickedIssuesTabView.tsx b/src/components/mod-tools/views/tickets/ModToolsPickedIssuesTabView.tsx
index 19b899bd..208fefca 100644
--- a/src/components/mod-tools/views/tickets/ModToolsPickedIssuesTabView.tsx
+++ b/src/components/mod-tools/views/tickets/ModToolsPickedIssuesTabView.tsx
@@ -1,6 +1,6 @@
 import { IssueMessageData } from '@nitrots/nitro-renderer';
 import { FC } from 'react';
-import { Base, Column, Grid } from '../../../../common';
+import { Column, Grid } from '../../../../common';
 
 interface ModToolsPickedIssuesTabViewProps
 {
@@ -14,22 +14,22 @@ export const ModToolsPickedIssuesTabView: FC<ModToolsPickedIssuesTabViewProps> =
     return (
         <Column gap={ 0 } overflow="hidden">
             <Column gap={ 2 }>
-                <Grid gap={ 1 } className="text-black fw-bold border-bottom pb-1">
-                    <Base className="g-col-2">Type</Base>
-                    <Base className="g-col-3">Room/Player</Base>
-                    <Base className="g-col-4">Opened</Base>
-                    <Base className="g-col-3">Picker</Base>
+                <Grid className="text-black fw-bold border-bottom pb-1" gap={ 1 }>
+                    <div className="g-col-2">Type</div>
+                    <div className="g-col-3">Room/Player</div>
+                    <div className="g-col-4">Opened</div>
+                    <div className="g-col-3">Picker</div>
                 </Grid>
             </Column>
-            <Column overflow="auto" className="striped-children" gap={ 0 }>
+            <Column className="striped-children" gap={ 0 } overflow="auto">
                 { pickedIssues && (pickedIssues.length > 0) && pickedIssues.map(issue =>
                 {
                     return (
-                        <Grid key={ issue.issueId } gap={ 1 } alignItems="center" className="text-black py-1 border-bottom">
-                            <Base className="g-col-2">{ issue.categoryId }</Base>
-                            <Base className="g-col-3">{ issue.reportedUserName }</Base>
-                            <Base className="g-col-4">{ new Date(Date.now() - issue.issueAgeInMilliseconds).toLocaleTimeString() }</Base>
-                            <Base className="g-col-3">{ issue.pickerUserName }</Base>
+                        <Grid key={ issue.issueId } alignItems="center" className="text-black py-1 border-bottom" gap={ 1 }>
+                            <div className="g-col-2">{ issue.categoryId }</div>
+                            <div className="g-col-3">{ issue.reportedUserName }</div>
+                            <div className="g-col-4">{ new Date(Date.now() - issue.issueAgeInMilliseconds).toLocaleTimeString() }</div>
+                            <div className="g-col-3">{ issue.pickerUserName }</div>
                         </Grid>
                     );
                 }) }
diff --git a/src/components/mod-tools/views/tickets/ModToolsTicketsView.tsx b/src/components/mod-tools/views/tickets/ModToolsTicketsView.tsx
index 76d6abd7..8254d7ee 100644
--- a/src/components/mod-tools/views/tickets/ModToolsTicketsView.tsx
+++ b/src/components/mod-tools/views/tickets/ModToolsTicketsView.tsx
@@ -61,7 +61,7 @@ export const ModToolsTicketsView: FC<ModToolsTicketsViewProps> = props =>
         switch(currentTab)
         {
             case 0: return <ModToolsOpenIssuesTabView openIssues={ openIssues }/>;
-            case 1: return <ModToolsMyIssuesTabView myIssues={ myIssues } handleIssue={ handleIssue }/>;
+            case 1: return <ModToolsMyIssuesTabView handleIssue={ handleIssue } myIssues={ myIssues }/>;
             case 2: return <ModToolsPickedIssuesTabView pickedIssues={ pickedIssues }/>;
         }
 
diff --git a/src/components/mod-tools/views/user/ModToolsUserModActionView.tsx b/src/components/mod-tools/views/user/ModToolsUserModActionView.tsx
index bd4c2d5d..4502cc2e 100644
--- a/src/components/mod-tools/views/user/ModToolsUserModActionView.tsx
+++ b/src/components/mod-tools/views/user/ModToolsUserModActionView.tsx
@@ -1,7 +1,7 @@
 import { CallForHelpTopicData, DefaultSanctionMessageComposer, ModAlertMessageComposer, ModBanMessageComposer, ModKickMessageComposer, ModMessageMessageComposer, ModMuteMessageComposer, ModTradingLockMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useMemo, useState } from 'react';
 import { ISelectedUser, LocalizeText, ModActionDefinition, NotificationAlertType, SendMessageComposer } from '../../../../api';
-import { Button, Column, DraggableWindowPosition, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
+import { Button, DraggableWindowPosition, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
 import { useModTools, useNotification } from '../../../../hooks';
 
 interface ModToolsUserModActionViewProps
@@ -155,18 +155,18 @@ export const ModToolsUserModActionView: FC<ModToolsUserModActionViewProps> = pro
             <NitroCardHeaderView headerText={ 'Mod Action: ' + (user ? user.username : '') } onCloseClick={ () => onCloseClick() } />
             <NitroCardContentView className="text-black">
                 <select className="form-select form-select-sm" value={ selectedTopic } onChange={ event => setSelectedTopic(parseInt(event.target.value)) }>
-                    <option value={ -1 } disabled>CFH Topic</option>
+                    <option disabled value={ -1 }>CFH Topic</option>
                     { topics.map((topic, index) => <option key={ index } value={ index }>{ LocalizeText('help.cfh.topic.' + topic.id) }</option>) }
                 </select>
                 <select className="form-select form-select-sm" value={ selectedAction } onChange={ event => setSelectedAction(parseInt(event.target.value)) }>
-                    <option value={ -1 } disabled>Sanction Type</option>
+                    <option disabled value={ -1 }>Sanction Type</option>
                     { MOD_ACTION_DEFINITIONS.map((action, index) => <option key={ index } value={ index }>{ action.name }</option>) }
                 </select>
-                <Column gap={ 1 }>
+                <div className="flex flex-column gap-1">
                     <Text small>Optional message type, overrides default</Text>
                     <textarea className="form-control" value={ message } onChange={ event => setMessage(event.target.value) }/>
-                </Column>
-                <Flex justifyContent="between" gap={ 1 }>
+                </div>
+                <Flex gap={ 1 } justifyContent="between">
                     <Button variant="primary" onClick={ sendDefaultSanction }>Default Sanction</Button>
                     <Button variant="success" onClick={ sendSanction }>Sanction</Button>
                 </Flex>
diff --git a/src/components/mod-tools/views/user/ModToolsUserRoomVisitsView.tsx b/src/components/mod-tools/views/user/ModToolsUserRoomVisitsView.tsx
index d8290ca5..9c2676d6 100644
--- a/src/components/mod-tools/views/user/ModToolsUserRoomVisitsView.tsx
+++ b/src/components/mod-tools/views/user/ModToolsUserRoomVisitsView.tsx
@@ -1,7 +1,7 @@
 import { GetRoomVisitsMessageComposer, RoomVisitsData, RoomVisitsEvent } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { SendMessageComposer, TryVisitRoom } from '../../../../api';
-import { Base, Column, DraggableWindowPosition, Grid, InfiniteScroll, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
+import { Column, DraggableWindowPosition, Grid, InfiniteScroll, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
 import { useMessageEvent } from '../../../../hooks';
 
 interface ModToolsUserRoomVisitsViewProps
@@ -37,22 +37,22 @@ export const ModToolsUserRoomVisitsView: FC<ModToolsUserRoomVisitsViewProps> = p
             <NitroCardContentView className="text-black" gap={ 1 }>
                 <Column fullHeight gap={ 0 } overflow="hidden">
                     <Column gap={ 2 }>
-                        <Grid gap={ 1 } className="text-black fw-bold border-bottom pb-1">
-                            <Base className="g-col-2">Time</Base>
-                            <Base className="g-col-7">Room name</Base>
-                            <Base className="g-col-3">Visit</Base>
+                        <Grid className="text-black fw-bold border-bottom pb-1" gap={ 1 }>
+                            <div className="g-col-2">Time</div>
+                            <div className="g-col-7">Room name</div>
+                            <div className="g-col-3">Visit</div>
                         </Grid>
                     </Column>
-                    <InfiniteScroll rows={ roomVisitData?.rooms ?? [] } rowRender={ row =>
+                    <InfiniteScroll rowRender={ row =>
                     {
                         return (
-                            <Grid fullHeight={ false } gap={ 1 } alignItems="center" className="text-black py-1 border-bottom">
+                            <Grid alignItems="center" className="text-black py-1 border-bottom" fullHeight={ false } gap={ 1 }>
                                 <Text className="g-col-2">{ row.enterHour.toString().padStart(2, '0') }: { row.enterMinute.toString().padStart(2, '0') }</Text>
                                 <Text className="g-col-7">{ row.roomName }</Text>
-                                <Text bold underline pointer variant="primary" className="g-col-3" onClick={ event => TryVisitRoom(row.roomId) }>Visit Room</Text>
+                                <Text bold pointer underline className="g-col-3" variant="primary" onClick={ event => TryVisitRoom(row.roomId) }>Visit Room</Text>
                             </Grid>
                         );
-                    } } />
+                    } } rows={ roomVisitData?.rooms ?? [] } />
                 </Column>
             </NitroCardContentView>
         </NitroCardView>
diff --git a/src/components/mod-tools/views/user/ModToolsUserView.tsx b/src/components/mod-tools/views/user/ModToolsUserView.tsx
index 0ceb8a27..66199e30 100644
--- a/src/components/mod-tools/views/user/ModToolsUserView.tsx
+++ b/src/components/mod-tools/views/user/ModToolsUserView.tsx
@@ -108,7 +108,7 @@ export const ModToolsUserView: FC<ModToolsUserViewProps> = props =>
                 <NitroCardHeaderView headerText={ LocalizeText('modtools.userinfo.title', [ 'username' ], [ userInfo.userName ]) } onCloseClick={ () => onCloseClick() } />
                 <NitroCardContentView className="text-black">
                     <Grid overflow="hidden">
-                        <Column size={ 8 } overflow="auto">
+                        <Column overflow="auto" size={ 8 }>
                             <table className="table table-striped table-sm table-text-small text-black m-0">
                                 <tbody>
                                     { userProperties.map( (property, index) =>
@@ -128,7 +128,7 @@ export const ModToolsUserView: FC<ModToolsUserViewProps> = props =>
                                 </tbody>
                             </table>
                         </Column>
-                        <Column size={ 4 } gap={ 1 }>
+                        <Column gap={ 1 } size={ 4 }>
                             <Button onClick={ event => CreateLinkEvent(`mod-tools/open-user-chatlog/${ userId }`) }>
                                 Room Chat
                             </Button>
diff --git a/src/components/navigator/NavigatorView.tsx b/src/components/navigator/NavigatorView.tsx
index e772db8e..5604725e 100644
--- a/src/components/navigator/NavigatorView.tsx
+++ b/src/components/navigator/NavigatorView.tsx
@@ -2,7 +2,7 @@ import { AddLinkEventTracker, ConvertGlobalRoomIdMessageComposer, HabboWebTools,
 import { FC, useCallback, useEffect, useRef, useState } from 'react';
 import { FaPlus } from 'react-icons/fa';
 import { LocalizeText, SendMessageComposer, TryVisitRoom } from '../../api';
-import { Base, Column, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
+import { Column, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
 import { useNavigator, useNitroEvent } from '../../hooks';
 import { NavigatorDoorStateView } from './views/NavigatorDoorStateView';
 import { NavigatorRoomCreatorView } from './views/NavigatorRoomCreatorView';
@@ -196,7 +196,7 @@ export const NavigatorView: FC<{}> = props =>
     return (
         <>
             { isVisible &&
-                <NitroCardView uniqueKey="navigator" className="nitro-navigator">
+                <NitroCardView className="nitro-navigator" uniqueKey="navigator">
                     <NitroCardHeaderView headerText={ LocalizeText(isCreatorOpen ? 'navigator.createroom.title' : 'navigator.title') } onCloseClick={ event => setIsVisible(false) } />
                     <NitroCardTabsView>
                         { topLevelContexts && (topLevelContexts.length > 0) && topLevelContexts.map((context, index) =>
@@ -213,7 +213,7 @@ export const NavigatorView: FC<{}> = props =>
                     </NitroCardTabsView>
                     <NitroCardContentView position="relative">
                         { isLoading &&
-                            <Base fit position="absolute" className="top-0 start-0 z-index-1 bg-muted opacity-0-5" /> }
+                            <div className="position-absolute size-full top-0 start-0 z-index-1 bg-muted opacity-0-5" /> }
                         { !isCreatorOpen &&
                             <>
                                 <NavigatorSearchView sendSearch={ sendSearch } />
diff --git a/src/components/navigator/views/NavigatorDoorStateView.tsx b/src/components/navigator/views/NavigatorDoorStateView.tsx
index 4c8a3e24..0ab9fb93 100644
--- a/src/components/navigator/views/NavigatorDoorStateView.tsx
+++ b/src/components/navigator/views/NavigatorDoorStateView.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from 'react';
 import { CreateRoomSession, DoorStateType, GoToDesktop, LocalizeText } from '../../../api';
-import { Button, Column, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common';
+import { Button, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common';
 import { useNavigator } from '../../../hooks';
 
 const VISIBLE_STATES = [ DoorStateType.START_DOORBELL, DoorStateType.STATE_WAITING, DoorStateType.STATE_NO_ANSWER, DoorStateType.START_PASSWORD, DoorStateType.STATE_WRONG_PASSWORD ];
@@ -66,7 +66,7 @@ export const NavigatorDoorStateView: FC<{}> = props =>
         <NitroCardView className="nitro-navigator-doorbell" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText(isDoorbell ? 'navigator.doorbell.title' : 'navigator.password.title') } onCloseClick={ onClose } />
             <NitroCardContentView>
-                <Column gap={ 1 }>
+                <div className="flex flex-column gap-1">
                     <Text bold>{ doorData && doorData.roomInfo && doorData.roomInfo.roomName }</Text>
                     { (doorData.state === DoorStateType.START_DOORBELL) &&
                         <Text>{ LocalizeText('navigator.doorbell.info') }</Text> }
@@ -78,9 +78,9 @@ export const NavigatorDoorStateView: FC<{}> = props =>
                         <Text>{ LocalizeText('navigator.password.info') }</Text> }
                     { (doorData.state === DoorStateType.STATE_WRONG_PASSWORD) &&
                         <Text>{ LocalizeText('navigator.password.retryinfo') }</Text> }
-                </Column>
+                </div>
                 { isDoorbell &&
-                    <Column gap={ 1 }>
+                    <div className="flex flex-column gap-1">
                         { (doorData.state === DoorStateType.START_DOORBELL) &&
                             <Button variant="success" onClick={ ring }>
                                 { LocalizeText('navigator.doorbell.button.ring') }
@@ -88,21 +88,21 @@ export const NavigatorDoorStateView: FC<{}> = props =>
                         <Button variant="danger" onClick={ onClose }>
                             { LocalizeText('generic.cancel') }
                         </Button>
-                    </Column> }
+                    </div> }
                 { !isDoorbell &&
                     <>
-                        <Column gap={ 1 }>
+                        <div className="flex flex-column gap-1">
                             <Text>{ LocalizeText('navigator.password.enter') }</Text>
-                            <input type="password" className="form-control form-control-sm" onChange={ event => setPassword(event.target.value) } />
-                        </Column>
-                        <Column gap={ 1 }>
+                            <input className="form-control form-control-sm" type="password" onChange={ event => setPassword(event.target.value) } />
+                        </div>
+                        <div className="flex flex-column gap-1">
                             <Button variant="success" onClick={ tryEntering }>
                                 { LocalizeText('navigator.password.button.try') }
                             </Button>
                             <Button variant="danger" onClick={ onClose }>
                                 { LocalizeText('generic.cancel') }
                             </Button>
-                        </Column>
+                        </div>
                     </> }
             </NitroCardContentView>
         </NitroCardView>
diff --git a/src/components/navigator/views/NavigatorRoomCreatorView.tsx b/src/components/navigator/views/NavigatorRoomCreatorView.tsx
index 95a5bd6d..6b874248 100644
--- a/src/components/navigator/views/NavigatorRoomCreatorView.tsx
+++ b/src/components/navigator/views/NavigatorRoomCreatorView.tsx
@@ -2,7 +2,7 @@
 import { CreateFlatMessageComposer, HabboClubLevelEnum } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { GetClubMemberLevel, GetConfigurationValue, IRoomModel, LocalizeText, SendMessageComposer } from '../../../api';
-import { Button, Column, Flex, Grid, LayoutCurrencyIcon, LayoutGridItem, Text } from '../../../common';
+import { Button, Flex, Grid, LayoutCurrencyIcon, LayoutGridItem, Text } from '../../../common';
 import { useNavigator } from '../../../hooks';
 
 export const NavigatorRoomCreatorView: FC<{}> = props =>
@@ -63,18 +63,18 @@ export const NavigatorRoomCreatorView: FC<{}> = props =>
     }, []);
 
     return (
-        <Column overflow="hidden">
+        <div className="flex flex-column overflow-auto">
             <Grid overflow="hidden">
-                <Column size={ 6 } gap={ 1 } overflow="auto">
-                    <Column gap={ 1 }>
+                <div className="flex flex-column gap-1 overflow-auto col-6">
+                    <div className="flex flex-column gap-1">
                         <Text>{ LocalizeText('navigator.createroom.roomnameinfo') }</Text>
-                        <input type="text" className="form-control form-control-sm" maxLength={ 60 } onChange={ event => setName(event.target.value) } placeholder={ LocalizeText('navigator.createroom.roomnameinfo') } />
-                    </Column>
-                    <Column grow gap={ 1 }>
+                        <input className="form-control form-control-sm" maxLength={ 60 } placeholder={ LocalizeText('navigator.createroom.roomnameinfo') } type="text" onChange={ event => setName(event.target.value) } />
+                    </div>
+                    <div className="flex flex-column flex-grow-1 gap-1">
                         <Text>{ LocalizeText('navigator.createroom.roomdescinfo') }</Text>
-                        <textarea className="flex-grow-1 form-control form-control-sm w-100" maxLength={ 255 } onChange={ event => setDescription(event.target.value) } placeholder={ LocalizeText('navigator.createroom.roomdescinfo') } />
-                    </Column>
-                    <Column gap={ 1 }>
+                        <textarea className="flex-grow-1 form-control form-control-sm w-100" maxLength={ 255 } placeholder={ LocalizeText('navigator.createroom.roomdescinfo') } onChange={ event => setDescription(event.target.value) } />
+                    </div>
+                    <div className="flex flex-column gap-1">
                         <Text>{ LocalizeText('navigator.category') }</Text>
                         <select className="form-select form-select-sm" onChange={ event => setCategory(Number(event.target.value)) }>
                             { categories && (categories.length > 0) && categories.map(category =>
@@ -82,8 +82,8 @@ export const NavigatorRoomCreatorView: FC<{}> = props =>
                                 return <option key={ category.id } value={ category.id }>{ LocalizeText(category.name) }</option>
                             }) }
                         </select>
-                    </Column>
-                    <Column gap={ 1 }>
+                    </div>
+                    <div className="flex flex-column gap-1">
                         <Text>{ LocalizeText('navigator.maxvisitors') }</Text>
                         <select className="form-select form-select-sm" onChange={ event => setVisitorsCount(Number(event.target.value)) }>
                             { maxVisitorsList && maxVisitorsList.map(value =>
@@ -91,32 +91,32 @@ export const NavigatorRoomCreatorView: FC<{}> = props =>
                                 return <option key={ value } value={ value }>{ value }</option>
                             }) }
                         </select>
-                    </Column>
-                    <Column gap={ 1 }>
+                    </div>
+                    <div className="flex flex-column gap-1">
                         <Text>{ LocalizeText('navigator.tradesettings') }</Text>
                         <select className="form-select form-select-sm" onChange={ event => setTradesSetting(Number(event.target.value)) }>
                             <option value="0">{ LocalizeText('navigator.roomsettings.trade_not_allowed') }</option>
                             <option value="1">{ LocalizeText('navigator.roomsettings.trade_not_with_Controller') }</option>
                             <option value="2">{ LocalizeText('navigator.roomsettings.trade_allowed') }</option>
                         </select>
-                    </Column>
-                </Column>
-                <Column size={ 6 } gap={ 1 } overflow="auto">
+                    </div>
+                </div>
+                <div className="flex flex-column gap-1 overflow-auto col-6">
                     {
                         roomModels.map((model, index )=>
                         {
-                            return (<LayoutGridItem fullHeight key={ model.name } onClick={ () => selectModel(model, index) } itemActive={ (selectedModelName === model.name) } overflow="unset" gap={ 0 } className="p-1" disabled={ (GetClubMemberLevel() < model.clubLevel) }>
-                                <Flex fullHeight center overflow="hidden">
+                            return (<LayoutGridItem key={ model.name } fullHeight className="p-1" disabled={ (GetClubMemberLevel() < model.clubLevel) } gap={ 0 } itemActive={ (selectedModelName === model.name) } overflow="unset" onClick={ () => selectModel(model, index) }>
+                                <Flex center fullHeight overflow="hidden">
                                     <img alt="" src={ getRoomModelImage(model.name) } />
                                 </Flex>
                                 <Text bold>{ model.tileSize } { LocalizeText('navigator.createroom.tilesize') }</Text>
-                                { !hcDisabled && model.clubLevel > HabboClubLevelEnum.NO_CLUB && <LayoutCurrencyIcon position="absolute" className="top-1 end-1" type="hc" /> }
+                                { !hcDisabled && model.clubLevel > HabboClubLevelEnum.NO_CLUB && <LayoutCurrencyIcon className="top-1 end-1" position="absolute" type="hc" /> }
                             </LayoutGridItem>);
                         })
                     }
-                </Column>
+                </div>
             </Grid>
-            <Button fullWidth variant={ (!name || (name.length < 3)) ? 'danger' : 'success' } onClick={ createRoom } disabled={ (!name || (name.length < 3)) }>{ LocalizeText('navigator.createroom.create') }</Button>
-        </Column>
+            <Button fullWidth disabled={ (!name || (name.length < 3)) } variant={ (!name || (name.length < 3)) ? 'danger' : 'success' } onClick={ createRoom }>{ LocalizeText('navigator.createroom.create') }</Button>
+        </div>
     );
 }
diff --git a/src/components/navigator/views/NavigatorRoomInfoView.tsx b/src/components/navigator/views/NavigatorRoomInfoView.tsx
index d8c5cfdd..a516b517 100644
--- a/src/components/navigator/views/NavigatorRoomInfoView.tsx
+++ b/src/components/navigator/views/NavigatorRoomInfoView.tsx
@@ -105,53 +105,53 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
                 { navigatorData.enteredGuestRoom &&
                     <>
                         <Flex gap={ 2 } overflow="hidden">
-                            <LayoutRoomThumbnailView roomId={ navigatorData.enteredGuestRoom.roomId } customUrl={ navigatorData.enteredGuestRoom.officialRoomPicRef }>
+                            <LayoutRoomThumbnailView customUrl={ navigatorData.enteredGuestRoom.officialRoomPicRef } roomId={ navigatorData.enteredGuestRoom.roomId }>
                                 { hasPermission('settings') && <i className="icon icon-camera-small position-absolute b-0 r-0 m-1 cursor-pointer top-0" onClick={ () => processAction('open_room_thumbnail_camera') } /> }
                             </LayoutRoomThumbnailView>
                             <Column grow gap={ 1 } overflow="hidden">
-                                <Flex gap={ 1 }>
+                                <div className="flex gap-1">
                                     <Column grow gap={ 1 }>
-                                        <Flex gap={ 1 }>
-                                            <i onClick={ () => processAction('set_home_room') } className={ classNames('flex-shrink-0 icon icon-house-small cursor-pointer', ((navigatorData.homeRoomId !== navigatorData.enteredGuestRoom.roomId) && 'gray')) } />
+                                        <div className="flex gap-1">
+                                            <i className={ classNames('flex-shrink-0 icon icon-house-small cursor-pointer', ((navigatorData.homeRoomId !== navigatorData.enteredGuestRoom.roomId) && 'gray')) } onClick={ () => processAction('set_home_room') } />
                                             <Text bold>{ navigatorData.enteredGuestRoom.roomName }</Text>
-                                        </Flex>
+                                        </div>
                                         { navigatorData.enteredGuestRoom.showOwner &&
-                                            <Flex alignItems="center" gap={ 1 }>
+                                            <div className="flex items-center gap-1">
                                                 <Text variant="muted">{ LocalizeText('navigator.roomownercaption') }</Text>
-                                                <Flex alignItems="center" gap={ 1 }>
+                                                <div className="flex items-center gap-1">
                                                     <UserProfileIconView userId={ navigatorData.enteredGuestRoom.ownerId } />
                                                     <Text>{ navigatorData.enteredGuestRoom.ownerName }</Text>
-                                                </Flex>
-                                            </Flex> }
-                                        <Flex alignItems="center" gap={ 1 }>
+                                                </div>
+                                            </div> }
+                                        <div className="flex items-center gap-1">
                                             <Text variant="muted">{ LocalizeText('navigator.roomrating') }</Text>
                                             <Text>{ navigatorData.currentRoomRating }</Text>
-                                        </Flex>
+                                        </div>
                                         { (navigatorData.enteredGuestRoom.tags.length > 0) &&
-                                            <Flex alignItems="center" gap={ 1 }>
+                                            <div className="flex items-center gap-1">
                                                 { navigatorData.enteredGuestRoom.tags.map(tag =>
                                                 {
                                                     return <Text key={ tag } pointer className="bg-muted rounded p-1" onClick={ event => processAction('navigator_search_tag', tag) }>#{ tag }</Text>
                                                 }) }
-                                            </Flex> }
+                                            </div> }
                                     </Column>
                                     <Column alignItems="center" gap={ 1 }>
                                         { hasPermission('settings') &&
                                             <i className="icon icon-cog cursor-pointer" title={ LocalizeText('navigator.room.popup.info.room.settings') } onClick={ event => processAction('open_room_settings') } /> }
-                                        <FaLink title={ LocalizeText('navigator.embed.caption') } className="cursor-pointer fa-icon" onClick={ event => CreateLinkEvent('navigator/toggle-room-link') } />
+                                        <FaLink className="cursor-pointer fa-icon" title={ LocalizeText('navigator.embed.caption') } onClick={ event => CreateLinkEvent('navigator/toggle-room-link') } />
                                     </Column>
-                                </Flex>
+                                </div>
                                 <Text overflow="auto" style={ { maxHeight: 50 } }>{ navigatorData.enteredGuestRoom.description }</Text>
                                 { (navigatorData.enteredGuestRoom.habboGroupId > 0) &&
                                     <Flex pointer alignItems="center" gap={ 1 } onClick={ () => processAction('open_group_info') }>
-                                        <LayoutBadgeImageView className="flex-none" badgeCode={ navigatorData.enteredGuestRoom.groupBadgeCode } isGroup={ true } />
+                                        <LayoutBadgeImageView badgeCode={ navigatorData.enteredGuestRoom.groupBadgeCode } className="flex-none" isGroup={ true } />
                                         <Text underline>
                                             { LocalizeText('navigator.guildbase', [ 'groupName' ], [ navigatorData.enteredGuestRoom.groupName ]) }
                                         </Text>
                                     </Flex> }
                             </Column>
                         </Flex>
-                        <Column gap={ 1 }>
+                        <div className="flex flex-column gap-1">
                             { hasPermission('staff_pick') &&
                             <Button onClick={ () => processAction('toggle_pick') }>
                                 { LocalizeText(isRoomPicked ? 'navigator.staffpicks.unpick' : 'navigator.staffpicks.pick') }
@@ -171,7 +171,7 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
                                     { LocalizeText('open.floor.plan.editor') }
                                 </Button>
                             </> }
-                        </Column>
+                        </div>
                     </> }
 
             </NitroCardContentView>
diff --git a/src/components/navigator/views/NavigatorRoomLinkView.tsx b/src/components/navigator/views/NavigatorRoomLinkView.tsx
index 0aff982d..761f58cb 100644
--- a/src/components/navigator/views/NavigatorRoomLinkView.tsx
+++ b/src/components/navigator/views/NavigatorRoomLinkView.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { GetConfigurationValue, LocalizeText } from '../../../api';
-import { Column, Flex, LayoutRoomThumbnailView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common';
+import { LayoutRoomThumbnailView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common';
 import { useNavigator } from '../../../hooks';
 
 export class NavigatorRoomLinkViewProps
@@ -18,15 +18,15 @@ export const NavigatorRoomLinkView: FC<NavigatorRoomLinkViewProps> = props =>
     return (
         <NitroCardView className="nitro-room-link" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText('navigator.embed.title') } onCloseClick={ onCloseClick } />
-            <NitroCardContentView className="text-black d-flex align-items-center">
-                <Flex gap={ 2 }>
-                    <LayoutRoomThumbnailView roomId={ navigatorData.enteredGuestRoom.roomId } customUrl={ navigatorData.enteredGuestRoom.officialRoomPicRef } />
-                    <Column>
+            <NitroCardContentView className="text-black flex items-center">
+                <div className="flex gap-2">
+                    <LayoutRoomThumbnailView customUrl={ navigatorData.enteredGuestRoom.officialRoomPicRef } roomId={ navigatorData.enteredGuestRoom.roomId } />
+                    <div className="flex flex-column">
                         <Text bold fontSize={ 5 }>{ LocalizeText('navigator.embed.headline') }</Text>
                         <Text>{ LocalizeText('navigator.embed.info') }</Text>
-                        <input type="text" readOnly className="form-control form-control-sm" value={ LocalizeText('navigator.embed.src', [ 'roomId' ], [ navigatorData.enteredGuestRoom.roomId.toString() ]).replace('${url.prefix}', GetConfigurationValue<string>('url.prefix', '')) } />
-                    </Column>
-                </Flex>
+                        <input readOnly className="form-control form-control-sm" type="text" value={ LocalizeText('navigator.embed.src', [ 'roomId' ], [ navigatorData.enteredGuestRoom.roomId.toString() ]).replace('${url.prefix}', GetConfigurationValue<string>('url.prefix', '')) } />
+                    </div>
+                </div>
             </NitroCardContentView>
         </NitroCardView>
     );
diff --git a/src/components/navigator/views/room-settings/NavigatorRoomSettingsAccessTabView.tsx b/src/components/navigator/views/room-settings/NavigatorRoomSettingsAccessTabView.tsx
index 57ae3476..8e1e5bcc 100644
--- a/src/components/navigator/views/room-settings/NavigatorRoomSettingsAccessTabView.tsx
+++ b/src/components/navigator/views/room-settings/NavigatorRoomSettingsAccessTabView.tsx
@@ -1,7 +1,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 { Text } from '../../../../common';
 
 interface NavigatorRoomSettingsTabViewProps
 {
@@ -32,57 +32,57 @@ export const NavigatorRoomSettingsAccessTabView: FC<NavigatorRoomSettingsTabView
 
     return (
         <>
-            <Column gap={ 1 }>
+            <div className="flex flex-column gap-1">
                 <Text bold>{ LocalizeText('navigator.roomsettings.roomaccess.caption') }</Text>
                 <Text>{ LocalizeText('navigator.roomsettings.roomaccess.info') }</Text>
-            </Column>
-            <Column overflow="auto">
-                <Column gap={ 1 }>
+            </div>
+            <div className="overflow-auto">
+                <div className="flex flex-column gap-1">
                     <Text bold>{ LocalizeText('navigator.roomsettings.doormode') }</Text>
-                    <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) } />
+                    <div className="flex items-center gap-1">
+                        <input checked={ (roomData.lockState === RoomDataParser.OPEN_STATE) && !isTryingPassword } className="form-check-input" name="lockState" type="radio" onChange={ event => handleChange('lock_state', RoomDataParser.OPEN_STATE) } />
                         <Text>{ LocalizeText('navigator.roomsettings.doormode.open') }</Text>
-                    </Flex>
-                    <Flex alignItems="center" gap={ 1 }>
-                        <input className="form-check-input" type="radio" name="lockState" checked={ (roomData.lockState === RoomDataParser.DOORBELL_STATE) && !isTryingPassword } onChange={ event => handleChange('lock_state', RoomDataParser.DOORBELL_STATE) } />
+                    </div>
+                    <div className="flex items-center gap-1">
+                        <input checked={ (roomData.lockState === RoomDataParser.DOORBELL_STATE) && !isTryingPassword } className="form-check-input" name="lockState" type="radio" onChange={ event => handleChange('lock_state', RoomDataParser.DOORBELL_STATE) } />
                         <Text>{ LocalizeText('navigator.roomsettings.doormode.doorbell') }</Text>
-                    </Flex>
-                    <Flex alignItems="center" gap={ 1 }>
-                        <input className="form-check-input" type="radio" name="lockState" checked={ (roomData.lockState === RoomDataParser.INVISIBLE_STATE) && !isTryingPassword } onChange={ event => handleChange('lock_state', RoomDataParser.INVISIBLE_STATE) } />
+                    </div>
+                    <div className="flex items-center gap-1">
+                        <input checked={ (roomData.lockState === RoomDataParser.INVISIBLE_STATE) && !isTryingPassword } className="form-check-input" name="lockState" type="radio" onChange={ event => handleChange('lock_state', RoomDataParser.INVISIBLE_STATE) } />
                         <Text>{ LocalizeText('navigator.roomsettings.doormode.invisible') }</Text>
-                    </Flex>
-                    <Flex fullWidth gap={ 1 }>
-                        <input className="form-check-input" type="radio" name="lockState" checked={ (roomData.lockState === RoomDataParser.PASSWORD_STATE) || isTryingPassword } onChange={ event => setIsTryingPassword(event.target.checked) } />
+                    </div>
+                    <div className="flex w-100 gap-1">
+                        <input checked={ (roomData.lockState === RoomDataParser.PASSWORD_STATE) || isTryingPassword } className="form-check-input" name="lockState" type="radio" onChange={ event => setIsTryingPassword(event.target.checked) } />
                         { !isTryingPassword && (roomData.lockState !== RoomDataParser.PASSWORD_STATE) &&
                             <Text>{ LocalizeText('navigator.roomsettings.doormode.password') }</Text> }
                         { (isTryingPassword || (roomData.lockState === RoomDataParser.PASSWORD_STATE)) &&
-                            <Column gap={ 1 }>
+                            <div className="flex flex-column gap-1">
                                 <Text>{ LocalizeText('navigator.roomsettings.doormode.password') }</Text>
-                                <input type="password" className="form-control form-control-sm col-4" value={ password } onChange={ event => setPassword(event.target.value) } placeholder={ LocalizeText('navigator.roomsettings.password') } onFocus={ event => setIsTryingPassword(true) } />
+                                <input className="form-control form-control-sm col-4" placeholder={ LocalizeText('navigator.roomsettings.password') } type="password" value={ password } onChange={ event => setPassword(event.target.value) } onFocus={ event => setIsTryingPassword(true) } />
                                 { isTryingPassword && (password.length <= 0) &&
                                     <Text bold small variant="danger">
                                         { LocalizeText('navigator.roomsettings.passwordismandatory') }
                                     </Text> }
-                                <input type="password" className="form-control form-control-sm col-4" value={ confirmPassword } onChange={ event => setConfirmPassword(event.target.value) } onBlur={ saveRoomPassword } placeholder={ LocalizeText('navigator.roomsettings.passwordconfirm') } />
+                                <input className="form-control form-control-sm col-4" placeholder={ LocalizeText('navigator.roomsettings.passwordconfirm') } type="password" value={ confirmPassword } onBlur={ saveRoomPassword } onChange={ event => setConfirmPassword(event.target.value) } />
                                 { isTryingPassword && ((password.length > 0) && (password !== confirmPassword)) &&
                                     <Text bold small variant="danger">
                                         { LocalizeText('navigator.roomsettings.invalidconfirm') }
                                     </Text> }
-                            </Column> }
-                    </Flex>
-                </Column>
-                <Column gap={ 1 }>
+                            </div> }
+                    </div>
+                </div>
+                <div className="flex flex-column gap-1">
                     <Text bold>{ LocalizeText('navigator.roomsettings.pets') }</Text>
-                    <Flex alignItems="center" gap={ 1 }>
-                        <input className="form-check-input" type="checkbox" checked={ roomData.allowPets } onChange={ event => handleChange('allow_pets', event.target.checked) } />
+                    <div className="flex items-center gap-1">
+                        <input checked={ roomData.allowPets } className="form-check-input" type="checkbox" onChange={ event => handleChange('allow_pets', event.target.checked) } />
                         <Text>{ LocalizeText('navigator.roomsettings.allowpets') }</Text>
-                    </Flex>
-                    <Flex alignItems="center" gap={ 1 }>
-                        <input className="form-check-input" type="checkbox" checked={ roomData.allowPetsEat } onChange={ event => handleChange('allow_pets_eat', event.target.checked) } />
+                    </div>
+                    <div className="flex items-center gap-1">
+                        <input checked={ roomData.allowPetsEat } className="form-check-input" type="checkbox" onChange={ event => handleChange('allow_pets_eat', event.target.checked) } />
                         <Text>{ LocalizeText('navigator.roomsettings.allowfoodconsume') }</Text>
-                    </Flex>
-                </Column>
-            </Column>
+                    </div>
+                </div>
+            </div>
         </>
     );
 };
diff --git a/src/components/navigator/views/room-settings/NavigatorRoomSettingsBasicTabView.tsx b/src/components/navigator/views/room-settings/NavigatorRoomSettingsBasicTabView.tsx
index 61a2ad22..eb8015b3 100644
--- a/src/components/navigator/views/room-settings/NavigatorRoomSettingsBasicTabView.tsx
+++ b/src/components/navigator/views/room-settings/NavigatorRoomSettingsBasicTabView.tsx
@@ -2,7 +2,7 @@ import { CreateLinkEvent, RoomDeleteComposer, RoomSettingsSaveErrorEvent, RoomSe
 import { FC, useEffect, useState } from 'react';
 import { FaTimes } from 'react-icons/fa';
 import { GetMaxVisitorsList, IRoomData, LocalizeText, SendMessageComposer } from '../../../../api';
-import { Base, Column, Flex, Text } from '../../../../common';
+import { Column, Text } from '../../../../common';
 import { useMessageEvent, useNavigator, useNotification } from '../../../../hooks';
 
 const ROOM_NAME_MIN_LENGTH = 3;
@@ -98,44 +98,44 @@ export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewP
 
     return (
         <>
-            <Flex alignItems="center" gap={ 1 }>
+            <div className="flex items-center gap-1">
                 <Text className="col-3">{ LocalizeText('navigator.roomname') }</Text>
                 <Column fullWidth gap={ 0 }>
-                    <input className="form-control form-control-sm" value={ roomName } maxLength={ ROOM_NAME_MAX_LENGTH } onChange={ event => setRoomName(event.target.value) } onBlur={ saveRoomName } />
+                    <input className="form-control form-control-sm" maxLength={ ROOM_NAME_MAX_LENGTH } value={ roomName } onBlur={ saveRoomName } onChange={ event => setRoomName(event.target.value) } />
                     { (roomName.length < ROOM_NAME_MIN_LENGTH) &&
                         <Text bold small variant="danger">
                             { LocalizeText('navigator.roomsettings.roomnameismandatory') }
                         </Text> }
                 </Column>
-            </Flex>
-            <Flex alignItems="center" gap={ 1 }>
+            </div>
+            <div className="flex items-center gap-1">
                 <Text className="col-3">{ LocalizeText('navigator.roomsettings.desc') }</Text>
-                <textarea className="form-control form-control-sm" value={ roomDescription } maxLength={ DESC_MAX_LENGTH } onChange={ event => setRoomDescription(event.target.value) } onBlur={ saveRoomDescription } />
-            </Flex>
-            <Flex alignItems="center" gap={ 1 }>
+                <textarea className="form-control form-control-sm" maxLength={ DESC_MAX_LENGTH } value={ roomDescription } onBlur={ saveRoomDescription } onChange={ event => setRoomDescription(event.target.value) } />
+            </div>
+            <div className="flex items-center gap-1">
                 <Text className="col-3">{ LocalizeText('navigator.category') }</Text>
                 <select className="form-select form-select-sm" value={ roomData.categoryId } onChange={ event => handleChange('category', event.target.value) }>
                     { categories && categories.map(category => <option key={ category.id } value={ category.id }>{ LocalizeText(category.name) }</option>) }
                 </select>
-            </Flex>
-            <Flex alignItems="center" gap={ 1 }>
+            </div>
+            <div className="flex items-center gap-1">
                 <Text className="col-3">{ LocalizeText('navigator.maxvisitors') }</Text>
                 <select className="form-select form-select-sm" value={ roomData.userCount } onChange={ event => handleChange('max_visitors', event.target.value) }>
                     { GetMaxVisitorsList && GetMaxVisitorsList.map(value => <option key={ value } value={ value }>{ value }</option>) }
                 </select>
-            </Flex>
-            <Flex alignItems="center" gap={ 1 }>
+            </div>
+            <div className="flex items-center gap-1">
                 <Text className="col-3">{ LocalizeText('navigator.tradesettings') }</Text>
                 <select className="form-select form-select-sm" value={ roomData.tradeState } onChange={ event => handleChange('trade_state', event.target.value) }>
                     <option value="0">{ LocalizeText('navigator.roomsettings.trade_not_allowed') }</option>
                     <option value="1">{ LocalizeText('navigator.roomsettings.trade_not_with_Controller') }</option>
                     <option value="2">{ LocalizeText('navigator.roomsettings.trade_allowed') }</option>
                 </select>
-            </Flex>
-            <Flex alignItems="center" gap={ 1 }>
+            </div>
+            <div className="flex items-center gap-1">
                 <Text className="col-3">{ LocalizeText('navigator.tags') }</Text>
                 <Column fullWidth gap={ 0 }>
-                    <input className="form-control form-control-sm" value={ roomTag1 } onChange={ event => setRoomTag1(event.target.value) } onBlur={ () => saveTags(0) } />
+                    <input className="form-control form-control-sm" value={ roomTag1 } onBlur={ () => saveTags(0) } onChange={ event => setRoomTag1(event.target.value) } />
                     { (roomTag1.length > TAGS_MAX_LENGTH) &&
                         <Text bold small variant="danger">
                             { LocalizeText('navigator.roomsettings.toomanycharacters') }
@@ -146,7 +146,7 @@ export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewP
                         </Text> }
                 </Column>
                 <Column fullWidth gap={ 0 }>
-                    <input className="form-control form-control-sm" value={ roomTag2 } onChange={ event => setRoomTag2(event.target.value) } onBlur={ () => saveTags(1) } />
+                    <input className="form-control form-control-sm" value={ roomTag2 } onBlur={ () => saveTags(1) } onChange={ event => setRoomTag2(event.target.value) } />
                     { (roomTag2.length > TAGS_MAX_LENGTH) &&
                         <Text bold small variant="danger">
                             { LocalizeText('navigator.roomsettings.toomanycharacters') }
@@ -156,13 +156,13 @@ export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewP
                         { LocalizeText(typeError) }
                     </Text> }
                 </Column>
-            </Flex>
-            <Flex alignItems="center" gap={ 1 }>
-                <Base className="col-3" />
-                <input className="form-check-input" type="checkbox" checked={ roomData.allowWalkthrough } onChange={ event => handleChange('allow_walkthrough', event.target.checked) } />
+            </div>
+            <div className="flex items-center gap-1">
+                <div className="col-3" />
+                <input checked={ roomData.allowWalkthrough } className="form-check-input" type="checkbox" onChange={ event => handleChange('allow_walkthrough', event.target.checked) } />
                 <Text>{ LocalizeText('navigator.roomsettings.allow_walk_through') }</Text>
-            </Flex>
-            <Text variant="danger" underline bold pointer className="d-flex justify-content-center align-items-center gap-1" onClick={ deleteRoom }>
+            </div>
+            <Text bold pointer underline className="flex justify-center items-center gap-1" variant="danger" onClick={ deleteRoom }>
                 <FaTimes className="fa-icon" />
                 { LocalizeText('navigator.roomsettings.delete') }
             </Text>
diff --git a/src/components/navigator/views/room-settings/NavigatorRoomSettingsModTabView.tsx b/src/components/navigator/views/room-settings/NavigatorRoomSettingsModTabView.tsx
index f45e310e..38fdb6eb 100644
--- a/src/components/navigator/views/room-settings/NavigatorRoomSettingsModTabView.tsx
+++ b/src/components/navigator/views/room-settings/NavigatorRoomSettingsModTabView.tsx
@@ -52,14 +52,14 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
         <Grid overflow="auto">
             <Column size={ 6 }>
                 <Text bold>{ LocalizeText('navigator.roomsettings.moderation.banned.users') } ({ bannedUsers.length })</Text>
-                <Flex overflow="hidden" className="bg-white rounded list-container p-2">
-                    <Column fullWidth overflow="auto" gap={ 1 }>
+                <Flex className="bg-white rounded list-container p-2" overflow="hidden">
+                    <Column fullWidth gap={ 1 } overflow="auto">
                         { bannedUsers && (bannedUsers.length > 0) && bannedUsers.map((user, index) =>
                         {
                             return (
                                 <Flex key={ index } shrink alignItems="center" gap={ 1 } overflow="hidden">
                                     <UserProfileIconView userName={ user.userName } />
-                                    <Text pointer grow onClick={ event => setSelectedUserId(user.userId) }> { user.userName }</Text>
+                                    <Text grow pointer onClick={ event => setSelectedUserId(user.userId) }> { user.userName }</Text>
                                 </Flex>
                             );
                         }) }
@@ -70,9 +70,9 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
                 </Button>
             </Column>
             <Column size={ 6 }>
-                <Column gap={ 1 }>
+                <div className="flex flex-column gap-1">
                     <Text bold>{ LocalizeText('navigator.roomsettings.moderation.mute.header') }</Text>
-                    <Flex alignItems="center" gap={ 1 }>
+                    <div className="flex items-center gap-1">
                         <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 +81,11 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
                                 { LocalizeText('navigator.roomsettings.moderation.rights') }
                             </option>
                         </select>
-                    </Flex>
-                </Column>
-                <Column gap={ 1 }>
+                    </div>
+                </div>
+                <div className="flex flex-column gap-1">
                     <Text bold>{ LocalizeText('navigator.roomsettings.moderation.kick.header') }</Text>
-                    <Flex alignItems="center" gap={ 1 }>
+                    <div className="flex items-center gap-1">
                         <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,11 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
                                 { LocalizeText('navigator.roomsettings.moderation.all') }
                             </option>
                         </select>
-                    </Flex>
-                </Column>
-                <Column gap={ 1 }>
+                    </div>
+                </div>
+                <div className="flex flex-column gap-1">
                     <Text bold>{ LocalizeText('navigator.roomsettings.moderation.ban.header') }</Text>
-                    <Flex alignItems="center" gap={ 1 }>
+                    <div className="flex items-center gap-1">
                         <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 +110,8 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
                                 { LocalizeText('navigator.roomsettings.moderation.rights') }
                             </option>
                         </select>
-                    </Flex>
-                </Column>
+                    </div>
+                </div>
             </Column>
         </Grid>
     );
diff --git a/src/components/navigator/views/room-settings/NavigatorRoomSettingsRightsTabView.tsx b/src/components/navigator/views/room-settings/NavigatorRoomSettingsRightsTabView.tsx
index ac17d13f..e17c9dfe 100644
--- a/src/components/navigator/views/room-settings/NavigatorRoomSettingsRightsTabView.tsx
+++ b/src/components/navigator/views/room-settings/NavigatorRoomSettingsRightsTabView.tsx
@@ -67,22 +67,22 @@ export const NavigatorRoomSettingsRightsTabView: FC<NavigatorRoomSettingsTabView
                 <Text bold>
                     { LocalizeText('navigator.flatctrls.userswithrights', [ 'displayed', 'total' ], [ usersWithRights.size.toString(), usersWithRights.size.toString() ]) }
                 </Text>
-                <Flex overflow="hidden" className="bg-white rounded list-container p-2">
-                    <Column fullWidth overflow="auto" gap={ 1 }>
+                <Flex className="bg-white rounded list-container p-2" overflow="hidden">
+                    <Column fullWidth gap={ 1 } overflow="auto">
                         { Array.from(usersWithRights.entries()).map(([ id, name ], index) =>
                         {
                             return (
                                 <Flex key={ index } shrink alignItems="center" gap={ 1 } overflow="hidden">
                                     <UserProfileIconView userName={ name } />
-                                    <Text pointer grow onClick={ event => SendMessageComposer(new RoomTakeRightsComposer(id)) }> { name }</Text>
+                                    <Text grow pointer onClick={ event => SendMessageComposer(new RoomTakeRightsComposer(id)) }> { name }</Text>
                                 </Flex>
                             );
                         }) }
                     </Column>
                 </Flex>
             </Column>
-            <Column size={ 6 } justifyContent="end">
-                <Button variant="danger" disabled={ !usersWithRights.size } onClick={ event => SendMessageComposer(new RemoveAllRightsMessageComposer(roomData.roomId)) } >
+            <Column justifyContent="end" size={ 6 }>
+                <Button disabled={ !usersWithRights.size } variant="danger" onClick={ event => SendMessageComposer(new RemoveAllRightsMessageComposer(roomData.roomId)) } >
                     { LocalizeText('navigator.flatctrls.clear') }
                 </Button>
             </Column>
diff --git a/src/components/navigator/views/room-settings/NavigatorRoomSettingsView.tsx b/src/components/navigator/views/room-settings/NavigatorRoomSettingsView.tsx
index bdda1779..8546ae99 100644
--- a/src/components/navigator/views/room-settings/NavigatorRoomSettingsView.tsx
+++ b/src/components/navigator/views/room-settings/NavigatorRoomSettingsView.tsx
@@ -181,7 +181,7 @@ export const NavigatorRoomSettingsView: FC<{}> = props =>
     if(!roomData) return null;
 
     return (
-        <NitroCardView uniqueKey="nitro-room-settings" className="nitro-room-settings">
+        <NitroCardView className="nitro-room-settings" uniqueKey="nitro-room-settings">
             <NitroCardHeaderView headerText={ LocalizeText('navigator.roomsettings') } onCloseClick={ onClose } />
             <NitroCardTabsView>
                 { TABS.map(tab =>
@@ -191,15 +191,15 @@ export const NavigatorRoomSettingsView: FC<{}> = props =>
             </NitroCardTabsView>
             <NitroCardContentView>
                 { (currentTab === TABS[0]) &&
-                    <NavigatorRoomSettingsBasicTabView roomData={ roomData } handleChange={ handleChange } onClose={ onClose } /> }
+                    <NavigatorRoomSettingsBasicTabView handleChange={ handleChange } roomData={ roomData } onClose={ onClose } /> }
                 { (currentTab === TABS[1]) &&
-                    <NavigatorRoomSettingsAccessTabView roomData={ roomData } handleChange={ handleChange } /> }
+                    <NavigatorRoomSettingsAccessTabView handleChange={ handleChange } roomData={ roomData } /> }
                 { (currentTab === TABS[2]) &&
-                    <NavigatorRoomSettingsRightsTabView roomData={ roomData } handleChange={ handleChange } /> }
+                    <NavigatorRoomSettingsRightsTabView handleChange={ handleChange } roomData={ roomData } /> }
                 { (currentTab === TABS[3]) &&
-                    <NavigatorRoomSettingsVipChatTabView roomData={ roomData } handleChange={ handleChange } /> }
+                    <NavigatorRoomSettingsVipChatTabView handleChange={ handleChange } roomData={ roomData } /> }
                 { (currentTab === TABS[4]) &&
-                    <NavigatorRoomSettingsModTabView roomData={ roomData } handleChange={ handleChange } /> }
+                    <NavigatorRoomSettingsModTabView handleChange={ handleChange } roomData={ roomData } /> }
             </NitroCardContentView>
         </NitroCardView>
     );
diff --git a/src/components/navigator/views/room-settings/NavigatorRoomSettingsVipChatTabView.tsx b/src/components/navigator/views/room-settings/NavigatorRoomSettingsVipChatTabView.tsx
index 5975e24d..a550bdb7 100644
--- a/src/components/navigator/views/room-settings/NavigatorRoomSettingsVipChatTabView.tsx
+++ b/src/components/navigator/views/room-settings/NavigatorRoomSettingsVipChatTabView.tsx
@@ -1,7 +1,7 @@
 import { RoomChatSettings } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { IRoomData, LocalizeText } from '../../../../api';
-import { Column, Flex, Grid, Text } from '../../../../common';
+import { Column, Grid, Text } from '../../../../common';
 
 interface NavigatorRoomSettingsTabViewProps
 {
@@ -21,12 +21,12 @@ export const NavigatorRoomSettingsVipChatTabView: FC<NavigatorRoomSettingsTabVie
 
     return (
         <>
-            <Column gap={ 1 }>
+            <div className="flex flex-column gap-1">
                 <Text bold>{ LocalizeText('navigator.roomsettings.vip.caption') }</Text>
                 <Text>{ LocalizeText('navigator.roomsettings.vip.info') }</Text>
-            </Column>
+            </div>
             <Grid overflow="auto">
-                <Column size={ 6 } gap={ 1 }>
+                <Column gap={ 1 } size={ 6 }>
                     <Text bold>{ LocalizeText('navigator.roomsettings.chat_settings') }</Text>
                     <Text>{ LocalizeText('navigator.roomsettings.chat_settings.info') }</Text>
                     <select className="form-select form-select-sm" value={ roomData.chatSettings.mode } onChange={ event => handleChange('bubble_mode', event.target.value) }>
@@ -49,14 +49,14 @@ export const NavigatorRoomSettingsVipChatTabView: FC<NavigatorRoomSettingsTabVie
                         <option value={ RoomChatSettings.FLOOD_FILTER_STRICT }>{ LocalizeText('navigator.roomsettings.chat.flood.strict') }</option>
                     </select>
                     <Text>{ LocalizeText('navigator.roomsettings.chat_settings.hearing.distance') }</Text>
-                    <input type="number" min="0" className="form-control form-control-sm" value={ chatDistance } onChange={ event => setChatDistance(event.target.valueAsNumber) } onBlur={ event => handleChange('chat_distance', chatDistance) } />
+                    <input className="form-control form-control-sm" min="0" type="number" value={ chatDistance } onBlur={ event => handleChange('chat_distance', chatDistance) } onChange={ event => setChatDistance(event.target.valueAsNumber) } />
                 </Column>
-                <Column size={ 6 } gap={ 1 }>
+                <Column gap={ 1 } size={ 6 }>
                     <Text bold>{ LocalizeText('navigator.roomsettings.vip_settings') }</Text>
-                    <Flex alignItems="center" gap={ 1 }>
-                        <input className="form-check-input" type="checkbox" checked={ roomData.hideWalls } onChange={ event => handleChange('hide_walls', event.target.checked) } />
+                    <div className="flex items-center gap-1">
+                        <input checked={ roomData.hideWalls } className="form-check-input" type="checkbox" onChange={ event => handleChange('hide_walls', event.target.checked) } />
                         <Text>{ LocalizeText('navigator.roomsettings.hide_walls') }</Text>
-                    </Flex>
+                    </div>
                     <select className="form-select form-select-sm" 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>
diff --git a/src/components/navigator/views/search/NavigatorSearchResultItemInfoView.tsx b/src/components/navigator/views/search/NavigatorSearchResultItemInfoView.tsx
index 79aaf976..0a4c7cc5 100644
--- a/src/components/navigator/views/search/NavigatorSearchResultItemInfoView.tsx
+++ b/src/components/navigator/views/search/NavigatorSearchResultItemInfoView.tsx
@@ -3,7 +3,7 @@ import { FC, useRef, useState } from 'react';
 import { Overlay, Popover } from 'react-bootstrap';
 import { FaUser } from 'react-icons/fa';
 import { LocalizeText } from '../../../../api';
-import { Base, Column, Flex, LayoutBadgeImageView, LayoutRoomThumbnailView, NitroCardContentView, Text, UserProfileIconView } from '../../../../common';
+import { Flex, LayoutBadgeImageView, LayoutRoomThumbnailView, NitroCardContentView, Text, UserProfileIconView } from '../../../../common';
 
 interface NavigatorSearchResultItemInfoViewProps
 {
@@ -40,30 +40,30 @@ export const NavigatorSearchResultItemInfoView: FC<NavigatorSearchResultItemInfo
 
     return (
         <>
-            <Base pointer innerRef={ elementRef } className="icon icon-navigator-info" onMouseOver={ event => setIsVisible(true) } onMouseLeave={ event => setIsVisible(false) } />
-            <Overlay show={ isVisible } target={ elementRef.current } placement="right">
+            <div ref={ elementRef } className="icon icon-navigator-info cursor-pointer" onMouseLeave={ event => setIsVisible(false) } onMouseOver={ event => setIsVisible(true) } />
+            <Overlay placement="right" show={ isVisible } target={ elementRef.current }>
                 <Popover>
-                    <NitroCardContentView overflow="hidden" className="room-info image-rendering-pixelated bg-transparent">
+                    <NitroCardContentView className="room-info image-rendering-pixelated bg-transparent" overflow="hidden">
                         <Flex gap={ 2 } overflow="hidden">
-                            <LayoutRoomThumbnailView roomId={ roomData.roomId } customUrl={ roomData.officialRoomPicRef } className="d-flex flex-column align-items-center justify-content-end mb-1">
+                            <LayoutRoomThumbnailView className="flex flex-column items-center justify-content-end mb-1" customUrl={ roomData.officialRoomPicRef } roomId={ roomData.roomId }>
                                 { roomData.habboGroupId > 0 && (
-                                    <LayoutBadgeImageView badgeCode={ roomData.groupBadgeCode } isGroup={ true } className={ 'position-absolute top-0 start-0 m-1 ' }/>) }
+                                    <LayoutBadgeImageView badgeCode={ roomData.groupBadgeCode } className={ 'position-absolute top-0 start-0 m-1 ' } isGroup={ true }/>) }
                                 { roomData.doorMode !== RoomDataParser.OPEN_STATE && (
                                     <i className={ 'position-absolute end-0 mb-1 me-1 icon icon-navigator-room-' + (roomData.doorMode === RoomDataParser.DOORBELL_STATE ? 'locked' : roomData.doorMode === RoomDataParser.PASSWORD_STATE ? 'password' : roomData.doorMode === RoomDataParser.INVISIBLE_STATE ? 'invisible' : '') }/> ) }
                             </LayoutRoomThumbnailView>
-                            <Column gap={ 1 }>
+                            <div className="flex flex-column gap-1">
                                 <Text bold truncate className="flex-grow-1" style={ { maxHeight: 13 } }>
                                     { roomData.roomName }
                                 </Text>
-                                <Flex gap={ 2 }>
+                                <div className="flex gap-2">
                                     <Text italics variant="muted">
                                         { LocalizeText('navigator.roomownercaption') }
                                     </Text>
-                                    <Flex alignItems="center" gap={ 1 }>
+                                    <div className="flex items-center gap-1">
                                         <UserProfileIconView userId={ roomData.ownerId } />
                                         <Text italics>{ roomData.ownerName }</Text>
-                                    </Flex>
-                                </Flex>
+                                    </div>
+                                </div>
                                 <Text className="flex-grow-1">
                                     { roomData.description }
                                 </Text>
@@ -71,7 +71,7 @@ export const NavigatorSearchResultItemInfoView: FC<NavigatorSearchResultItemInfo
                                     <FaUser className="fa-icon" />
                                     { roomData.userCount }
                                 </Flex>
-                            </Column>
+                            </div>
                         </Flex>
                     </NitroCardContentView>
                 </Popover>
diff --git a/src/components/navigator/views/search/NavigatorSearchResultItemView.tsx b/src/components/navigator/views/search/NavigatorSearchResultItemView.tsx
index c5294526..d23f49ce 100644
--- a/src/components/navigator/views/search/NavigatorSearchResultItemView.tsx
+++ b/src/components/navigator/views/search/NavigatorSearchResultItemView.tsx
@@ -81,9 +81,9 @@ export const NavigatorSearchResultItemView: FC<NavigatorSearchResultItemViewProp
     }
 
     if(thumbnail) return (
-        <Column pointer overflow="hidden" alignItems="center" onClick={ visitRoom } gap={ 0 } className="navigator-item p-1 bg-light rounded-3 small mb-1 flex-column border border-muted" { ...rest }>
-            <LayoutRoomThumbnailView roomId={ roomData.roomId } customUrl={ roomData.officialRoomPicRef } className="d-flex flex-column align-items-center justify-content-end mb-1">
-                { roomData.habboGroupId > 0 && <LayoutBadgeImageView badgeCode={ roomData.groupBadgeCode } isGroup={ true } className={ 'position-absolute top-0 start-0 m-1' } /> }
+        <Column pointer alignItems="center" className="navigator-item p-1 bg-light rounded-3 small mb-1 flex-column border border-muted" gap={ 0 } overflow="hidden" onClick={ visitRoom } { ...rest }>
+            <LayoutRoomThumbnailView className="flex flex-column items-center justify-content-end mb-1" customUrl={ roomData.officialRoomPicRef } roomId={ roomData.roomId }>
+                { roomData.habboGroupId > 0 && <LayoutBadgeImageView badgeCode={ roomData.groupBadgeCode } className={ 'position-absolute top-0 start-0 m-1' } isGroup={ true } /> }
                 <Flex center className={ 'badge p-1 position-absolute m-1 ' + getUserCounterColor() } gap={ 1 }>
                     <FaUser className="fa-icon" />
                     { roomData.userCount }
@@ -103,12 +103,12 @@ export const NavigatorSearchResultItemView: FC<NavigatorSearchResultItemViewProp
     );
 
     return (
-        <Flex pointer overflow="hidden" alignItems="center" onClick={ visitRoom } gap={ 2 } className="navigator-item px-2 py-1 small" { ...rest }>
+        <Flex pointer alignItems="center" className="navigator-item px-2 py-1 small" gap={ 2 } overflow="hidden" onClick={ visitRoom } { ...rest }>
             <Flex center className={ 'badge p-1 ' + getUserCounterColor() } gap={ 1 }>
                 <FaUser className="fa-icon" />
                 { roomData.userCount }
             </Flex>
-            <Text truncate grow>{ roomData.roomName }</Text>
+            <Text grow truncate>{ roomData.roomName }</Text>
             <Flex reverse alignItems="center" gap={ 1 }>
                 <NavigatorSearchResultItemInfoView roomData={ roomData } />
                 { roomData.habboGroupId > 0 && <i className="icon icon-navigator-room-group" /> }
diff --git a/src/components/navigator/views/search/NavigatorSearchResultView.tsx b/src/components/navigator/views/search/NavigatorSearchResultView.tsx
index f20f29a6..6585292f 100644
--- a/src/components/navigator/views/search/NavigatorSearchResultView.tsx
+++ b/src/components/navigator/views/search/NavigatorSearchResultView.tsx
@@ -59,25 +59,25 @@ export const NavigatorSearchResultView: FC<NavigatorSearchResultViewProps> = pro
     
     return (
         <Column className="bg-white rounded border border-muted" gap={ 0 }>
-            <Flex fullWidth alignItems="center" justifyContent="between" className="px-2 py-1">
+            <Flex fullWidth alignItems="center" className="px-2 py-1" justifyContent="between">
                 <Flex grow pointer alignItems="center" gap={ 1 } onClick={ event => setIsExtended(prevValue => !prevValue) }>
                     { isExtended && <FaMinus className="text-secondary fa-icon" /> }
                     { !isExtended && <FaPlus className="text-secondary fa-icon" /> }
                     <Text>{ LocalizeText(getResultTitle()) }</Text>
                 </Flex>
-                <Flex gap={ 2 }>
+                <div className="flex gap-2">
                     { (displayMode === NavigatorSearchResultViewDisplayMode.LIST) && <FaTh className="text-secondary fa-icon" onClick={ toggleDisplayMode } /> }
                     { (displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS) && <FaBars className="text-secondary fa-icon" onClick={ toggleDisplayMode } /> }
                     { (searchResult.action > 0) && (searchResult.action === 1) && <FaWindowMaximize className="text-secondary fa-icon" onClick={ showMore } /> }
                     { (searchResult.action > 0) && (searchResult.action !== 1) && <FaWindowRestore className="text-secondary fa-icon" onClick={ showMore } /> }
-                </Flex>
+                </div>
 
             </Flex> { isExtended && 
                 <>
                     {
-                        gridHasTwoColumns ? <AutoGrid columnCount={ 3 } { ...rest } columnMinWidth={ 110 } columnMinHeight={ 130 } className="mx-2">
+                        gridHasTwoColumns ? <AutoGrid columnCount={ 3 } { ...rest } className="mx-2" columnMinHeight={ 130 } columnMinWidth={ 110 }>
                             { searchResult.rooms.length > 0 && searchResult.rooms.map((room, index) => <NavigatorSearchResultItemView key={ index } roomData={ room } thumbnail={ true } />) }
-                        </AutoGrid> : <Grid columnCount={ 1 } className="navigator-grid" gap={ 0 }>
+                        </AutoGrid> : <Grid className="navigator-grid" columnCount={ 1 } gap={ 0 }>
                             { searchResult.rooms.length > 0 && searchResult.rooms.map((room, index) => <NavigatorSearchResultItemView key={ index } roomData={ room } />) }
                         </Grid>
                     }
@@ -85,8 +85,8 @@ export const NavigatorSearchResultView: FC<NavigatorSearchResultViewProps> = pro
             }
         </Column>
         // <div className="nitro-navigator-search-result bg-white rounded mb-2 overflow-hidden">
-        //     <div className="d-flex flex-column">
-        //         <div className="d-flex align-items-center px-2 py-1 text-black">
+        //     <div className="flex flex-column">
+        //         <div className="flex items-center px-2 py-1 text-black">
         //             <i className={ 'text-secondary fas ' + (isExtended ? 'fa-minus' : 'fa-plus') } onClick={ toggleExtended }></i>
         //             <div className="ms-2 flex-grow-1">{ LocalizeText(getResultTitle()) }</div>
         //             <i className={ 'text-secondary fas ' + classNames({ 'fa-bars': (displayMode === NavigatorSearchResultViewDisplayMode.LIST), 'fa-th': displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS })}></i>
@@ -101,7 +101,7 @@ export const NavigatorSearchResultView: FC<NavigatorSearchResultViewProps> = pro
         //     </div>
         // </div>
         // <div className="nitro-navigator-result-list p-2">
-        //     <div className="d-flex mb-2 small cursor-pointer" onClick={ toggleList }>
+        //     <div className="flex mb-2 small cursor-pointer" onClick={ toggleList }>
         //         <i className={ "fas " + classNames({ 'fa-plus': !isExtended, 'fa-minus': isExtended })}></i>
         //         <div className="align-self-center w-100 ml-2">{ LocalizeText(getListCode()) }</div>
         //         <i className={ "fas " + classNames({ 'fa-bars': displayMode === NavigatorResultListViewDisplayMode.LIST, 'fa-th': displayMode >= NavigatorResultListViewDisplayMode.THUMBNAILS })} onClick={ toggleDisplayMode }></i>
diff --git a/src/components/navigator/views/search/NavigatorSearchView.tsx b/src/components/navigator/views/search/NavigatorSearchView.tsx
index ea08279e..e395b9c0 100644
--- a/src/components/navigator/views/search/NavigatorSearchView.tsx
+++ b/src/components/navigator/views/search/NavigatorSearchView.tsx
@@ -64,7 +64,7 @@ export const NavigatorSearchView: FC<NavigatorSearchViewProps> = props =>
     }, [ searchResult ]);
 
     return (
-        <Flex fullWidth gap={ 1 }>
+        <div className="flex w-100 gap-1">
             <Flex shrink>
                 <select className="form-select form-select-sm" value={ searchFilterIndex } onChange={ event => setSearchFilterIndex(parseInt(event.target.value)) }>
                     { SearchFilterOptions.map((filter, index) =>
@@ -73,12 +73,12 @@ export const NavigatorSearchView: FC<NavigatorSearchViewProps> = props =>
                     }) }
                 </select>
             </Flex>
-            <Flex fullWidth gap={ 1 }>
-                <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('navigator.filter.input.placeholder') } value={ searchValue } onChange={ event => setSearchValue(event.target.value) } onKeyDown={ event => handleKeyDown(event) } />
+            <div className="flex w-100 gap-1">
+                <input className="form-control form-control-sm" placeholder={ LocalizeText('navigator.filter.input.placeholder') } type="text" value={ searchValue } onChange={ event => setSearchValue(event.target.value) } onKeyDown={ event => handleKeyDown(event) } />
                 <Button variant="primary" onClick={ processSearch }>
                     <FaSearch className="fa-icon" />
                 </Button>
-            </Flex>
-        </Flex>
+            </div>
+        </div>
     );
 }
diff --git a/src/components/nitropedia/NitropediaView.tsx b/src/components/nitropedia/NitropediaView.tsx
index 01b99cfa..457ffcf9 100644
--- a/src/components/nitropedia/NitropediaView.tsx
+++ b/src/components/nitropedia/NitropediaView.tsx
@@ -1,7 +1,7 @@
 import { AddLinkEventTracker, ILinkEventTracker, NitroLogger, RemoveLinkEventTracker } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useRef, useState } from 'react';
 import { GetConfigurationValue, OpenUrl } from '../../api';
-import { Base, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
 
 const NEW_LINE_REGEX = /\n\r|\n|\r/mg;
 
@@ -95,10 +95,10 @@ export const NitropediaView: FC<{}> = props =>
     if(!content) return null;
 
     return (
-        <NitroCardView className="nitropedia" theme="primary-slim" style={ dimensions ? { width: dimensions.width, height: dimensions.height } : {} }>
+        <NitroCardView className="nitropedia" style={ dimensions ? { width: dimensions.width, height: dimensions.height } : {} } theme="primary-slim">
             <NitroCardHeaderView headerText={ header } onCloseClick={ () => setContent(null) }/>
             <NitroCardContentView>
-                <Base fit innerRef={ elementRef } className="text-black" dangerouslySetInnerHTML={ { __html: content } } />
+                <div ref={ elementRef } className="text-black size-full" dangerouslySetInnerHTML={ { __html: content } } />
             </NitroCardContentView>
         </NitroCardView>
     );
diff --git a/src/components/notification-center/NotificationCenterView.tsx b/src/components/notification-center/NotificationCenterView.tsx
index 1817b09c..b3f07317 100644
--- a/src/components/notification-center/NotificationCenterView.tsx
+++ b/src/components/notification-center/NotificationCenterView.tsx
@@ -1,6 +1,5 @@
 import { FC, ReactNode, useMemo } from 'react';
 import { NotificationBubbleType } from '../../api';
-import { Column } from '../../common';
 import { useNotification } from '../../hooks';
 import { GetAlertLayout } from './views/alert-layouts/GetAlertLayout';
 import { GetBubbleLayout } from './views/bubble-layouts/GetBubbleLayout';
@@ -67,9 +66,9 @@ export const NotificationCenterView: FC<{}> = props =>
 
     return (
         <>
-            <Column gap={ 1 }>
+            <div className="flex flex-column gap-1">
                 { getBubbleAlerts }
-            </Column>
+            </div>
             { getConfirms }
             { getAlerts }
         </>
diff --git a/src/components/notification-center/views/alert-layouts/NitroSystemAlertView.tsx b/src/components/notification-center/views/alert-layouts/NitroSystemAlertView.tsx
index 9855384e..66b1c2ca 100644
--- a/src/components/notification-center/views/alert-layouts/NitroSystemAlertView.tsx
+++ b/src/components/notification-center/views/alert-layouts/NitroSystemAlertView.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { GetRendererVersion, GetUIVersion, NotificationAlertItem } from '../../../../api';
-import { Button, Column, Flex, Grid, LayoutNotificationAlertView, LayoutNotificationAlertViewProps, Text } from '../../../../common';
+import { Button, Column, Grid, LayoutNotificationAlertView, LayoutNotificationAlertViewProps, Text } from '../../../../common';
 
 interface NotificationDefaultAlertViewProps extends LayoutNotificationAlertViewProps
 {
@@ -15,7 +15,7 @@ export const NitroSystemAlertView: FC<NotificationDefaultAlertViewProps> = props
         <LayoutNotificationAlertView title={ title } onClose={ onClose } { ...rest }>
             <Grid>
                 <Column center size={ 5 }>
-                    <object data="https://assets.nitrodev.co/logos/nitro-n-dark.svg" width="100" height="100">&nbsp;</object>
+                    <object data="https://assets.nitrodev.co/logos/nitro-n-dark.svg" height="100" width="100">&nbsp;</object>
                 </Column>
                 <Column size={ 7 }>
                     <Column alignItems="center" gap={ 0 }>
@@ -26,10 +26,10 @@ export const NitroSystemAlertView: FC<NotificationDefaultAlertViewProps> = props
                         <Text><b>Renderer:</b> v{ GetRendererVersion() }</Text>
                         <Column fullWidth gap={ 1 }>
                             <Button fullWidth variant="success" onClick={ event => window.open('https://discord.nitrodev.co') }>Discord</Button>
-                            <Flex gap={ 1 }>
+                            <div className="flex gap-1">
                                 <Button fullWidth onClick={ event => window.open('https://git.krews.org/nitro/nitro-react') }>Git</Button>
                                 <Button fullWidth onClick={ event => window.open('https://git.krews.org/nitro/nitro-react/-/issues') }>Bug Report</Button>
-                            </Flex>
+                            </div>
                         </Column>
                     </Column>
                 </Column>
diff --git a/src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx b/src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx
index 87bb66ed..b7d62ae0 100644
--- a/src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx
+++ b/src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx
@@ -1,6 +1,6 @@
 import { FC, useState } from 'react';
 import { LocalizeText, NotificationAlertItem, NotificationAlertType, OpenUrl } from '../../../../api';
-import { Base, Button, Column, Flex, LayoutNotificationAlertView, LayoutNotificationAlertViewProps } from '../../../../common';
+import { Button, Column, Flex, LayoutNotificationAlertView, LayoutNotificationAlertViewProps } from '../../../../common';
 
 interface NotificationDefaultAlertViewProps extends LayoutNotificationAlertViewProps
 {
@@ -23,27 +23,27 @@ export const NotificationDefaultAlertView: FC<NotificationDefaultAlertViewProps>
 
     return (
         <LayoutNotificationAlertView title={ title } onClose={ onClose } { ...rest } type={ hasFrank ? NotificationAlertType.DEFAULT : item.alertType }>
-            <Flex fullHeight overflow="auto" gap={ hasFrank || (item.imageUrl && !imageFailed) ? 2 : 0 }>
-                { hasFrank && !item.imageUrl && <Base className="notification-frank flex-shrink-0" /> }
-                { item.imageUrl && !imageFailed && <img src={ item.imageUrl } alt={ item.title } onError={ () => 
+            <Flex fullHeight gap={ hasFrank || (item.imageUrl && !imageFailed) ? 2 : 0 } overflow="auto">
+                { hasFrank && !item.imageUrl && <div className="notification-frank flex-shrink-0" /> }
+                { item.imageUrl && !imageFailed && <img alt={ item.title } className="align-self-baseline" src={ item.imageUrl } onError={ () => 
                 {
                     setImageFailed(true) 
-                } } className="align-self-baseline" /> }
-                <Base classNames={ [ 'notification-text overflow-y-auto d-flex flex-column w-100', (item.clickUrl && !hasFrank) ? 'justify-content-center' : '' ] }>
+                } } /> }
+                <div className={ [ 'notification-text overflow-y-auto flex flex-column w-100', (item.clickUrl && !hasFrank) ? 'justify-center' : '' ].join(' ') }>
                     { (item.messages.length > 0) && item.messages.map((message, index) =>
                     {
                         const htmlText = message.replace(/\r\n|\r|\n/g, '<br />');
 
-                        return <Base key={ index } dangerouslySetInnerHTML={ { __html: htmlText } } />;
+                        return <div key={ index } dangerouslySetInnerHTML={ { __html: htmlText } } />;
                     }) }
                     { item.clickUrl && (item.clickUrl.length > 0) && (item.imageUrl && !imageFailed) && <>
                         <hr className="my-2 w-100" />
-                        <Button onClick={ visitUrl } className="align-self-center px-3">{ LocalizeText(item.clickUrlText) }</Button>
+                        <Button className="align-self-center px-3" onClick={ visitUrl }>{ LocalizeText(item.clickUrlText) }</Button>
                     </> }
-                </Base>
+                </div>
             </Flex>
             { (!item.imageUrl || (item.imageUrl && imageFailed)) && <>
-                <Column alignItems="center" center gap={ 0 }>
+                <Column center alignItems="center" gap={ 0 }>
                     <hr className="my-2 w-100" />
                     { !item.clickUrl &&
                         <Button onClick={ onClose }>{ LocalizeText('generic.close') }</Button> }
diff --git a/src/components/notification-center/views/alert-layouts/NotificationSearchAlertView.tsx b/src/components/notification-center/views/alert-layouts/NotificationSearchAlertView.tsx
index cac309ea..5f0dd01f 100644
--- a/src/components/notification-center/views/alert-layouts/NotificationSearchAlertView.tsx
+++ b/src/components/notification-center/views/alert-layouts/NotificationSearchAlertView.tsx
@@ -39,10 +39,10 @@ export const NotificationSeachAlertView: FC<NotificationDefaultAlertViewProps> =
     return (
         <LayoutNotificationAlertView title={ title } onClose={ onClose } { ...rest }>
             <Flex fullWidth alignItems="center" position="relative">
-                <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } value={ searchValue } onChange={ event => updateSearchValue(event.target.value) } />
+                <input className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } type="text" value={ searchValue } onChange={ event => updateSearchValue(event.target.value) } />
             </Flex>
             <Column fullHeight className="py-1" overflow="hidden">
-                <AutoGrid gap={ 1 } columnCount={ 1 }>
+                <AutoGrid columnCount={ 1 } gap={ 1 }>
                     { results && results.map((n, index) =>
                     { 
                         return <span key={ index }>{ n }</span>
@@ -50,7 +50,7 @@ export const NotificationSeachAlertView: FC<NotificationDefaultAlertViewProps> =
                 </AutoGrid>
             </Column>
             <hr className="my-2"/>
-            <Column alignItems="center" center gap={ 1 }>
+            <Column center alignItems="center" gap={ 1 }>
                 { !isAction && !item.clickUrl &&
                     <Button onClick={ onClose }>{ LocalizeText('generic.close') }</Button> }
                 { item.clickUrl && (item.clickUrl.length > 0) &&
diff --git a/src/components/notification-center/views/bubble-layouts/NotificationClubGiftBubbleView.tsx b/src/components/notification-center/views/bubble-layouts/NotificationClubGiftBubbleView.tsx
index 0ec73552..ba29fa06 100644
--- a/src/components/notification-center/views/bubble-layouts/NotificationClubGiftBubbleView.tsx
+++ b/src/components/notification-center/views/bubble-layouts/NotificationClubGiftBubbleView.tsx
@@ -12,13 +12,13 @@ export const NotificationClubGiftBubbleView: FC<NotificationClubGiftBubbleViewPr
     const { item = null, onClose = null, ...rest } = props;
 
     return (
-        <LayoutNotificationBubbleView fadesOut={ false } className="flex-column club-gift" onClose={ onClose } { ...rest }>
-            <div className="d-flex align-items-center gap-2 mb-2">
-                <LayoutCurrencyIcon type="hc" className="flex-shrink-0" />
+        <LayoutNotificationBubbleView className="flex-column club-gift" fadesOut={ false } onClose={ onClose } { ...rest }>
+            <div className="flex items-center gap-2 mb-2">
+                <LayoutCurrencyIcon className="flex-shrink-0" type="hc" />
                 <span className="ms-1">{ LocalizeText('notifications.text.club_gift') }</span>
             </div>
-            <div className="d-flex align-items-center justify-content-end gap-2">
-                <button type="button" className="btn btn-success w-100 btn-sm" onClick={ () => OpenUrl(item.linkUrl) }>{ LocalizeText('notifications.button.show_gift_list') }</button>
+            <div className="flex items-center justify-content-end gap-2">
+                <button className="btn btn-success w-100 btn-sm" type="button" onClick={ () => OpenUrl(item.linkUrl) }>{ LocalizeText('notifications.button.show_gift_list') }</button>
                 <span className="text-decoration-underline cursor-pointer text-nowrap" onClick={ onClose }>{ LocalizeText('notifications.button.later') }</span>
             </div>
         </LayoutNotificationBubbleView>
diff --git a/src/components/notification-center/views/bubble-layouts/NotificationDefaultBubbleView.tsx b/src/components/notification-center/views/bubble-layouts/NotificationDefaultBubbleView.tsx
index 91f00119..6d44105d 100644
--- a/src/components/notification-center/views/bubble-layouts/NotificationDefaultBubbleView.tsx
+++ b/src/components/notification-center/views/bubble-layouts/NotificationDefaultBubbleView.tsx
@@ -14,12 +14,12 @@ export const NotificationDefaultBubbleView: FC<NotificationDefaultBubbleViewProp
     const htmlText = item.message.replace(/\r\n|\r|\n/g, '<br />');
 
     return (
-        <LayoutNotificationBubbleView onClose={ onClose } gap={ 2 } alignItems="center" onClick={ event => (item.linkUrl && item.linkUrl.length && OpenUrl(item.linkUrl)) } { ...rest }>
+        <LayoutNotificationBubbleView alignItems="center" gap={ 2 } onClick={ event => (item.linkUrl && item.linkUrl.length && OpenUrl(item.linkUrl)) } onClose={ onClose } { ...rest }>
             <Flex center className="bubble-image-container">
                 { (item.iconUrl && item.iconUrl.length) &&
-                    <img className="no-select" src={ item.iconUrl } alt="" /> }
+                    <img alt="" className="no-select" src={ item.iconUrl } /> }
             </Flex>
-            <Text wrap variant="white" dangerouslySetInnerHTML={ { __html: htmlText } } />
+            <Text wrap dangerouslySetInnerHTML={ { __html: htmlText } } variant="white" />
         </LayoutNotificationBubbleView>
     );
 }
diff --git a/src/components/notification-center/views/confirm-layouts/NotificationDefaultConfirmView.tsx b/src/components/notification-center/views/confirm-layouts/NotificationDefaultConfirmView.tsx
index cb0351a0..7f3b67e9 100644
--- a/src/components/notification-center/views/confirm-layouts/NotificationDefaultConfirmView.tsx
+++ b/src/components/notification-center/views/confirm-layouts/NotificationDefaultConfirmView.tsx
@@ -28,13 +28,13 @@ export const NotificationDefaultConfirmView: FC<NotificationDefaultConfirmViewPr
 
     return (
         <LayoutNotificationAlertView title={ title } onClose={ onClose } { ...rest } type={ NotificationAlertType.ALERT }>
-            <Flex grow center>
+            <Flex center grow>
                 <Text>{ message }</Text>
             </Flex>
-            <Flex gap={ 1 }>
+            <div className="flex gap-1">
                 <Button fullWidth variant="danger" onClick={ cancel }>{ cancelText }</Button>
                 <Button fullWidth onClick={ confirm }>{ confirmText }</Button>
-            </Flex>
+            </div>
         </LayoutNotificationAlertView>
     );
 }
diff --git a/src/components/purse/PurseView.tsx b/src/components/purse/PurseView.tsx
index dc200afb..9b3eb698 100644
--- a/src/components/purse/PurseView.tsx
+++ b/src/components/purse/PurseView.tsx
@@ -50,8 +50,8 @@ export const PurseView: FC<{}> = props =>
         {
             if((limit > -1) && (count === limit)) break;
 
-            if(seasonal) elements.push(<SeasonalView key={ type } type={ type } amount={ purse.activityPoints.get(type) } />);
-            else elements.push(<CurrencyView key={ type } type={ type } amount={ purse.activityPoints.get(type) } short={ currencyDisplayNumberShort } />);
+            if(seasonal) elements.push(<SeasonalView key={ type } amount={ purse.activityPoints.get(type) } type={ type } />);
+            else elements.push(<CurrencyView key={ type } amount={ purse.activityPoints.get(type) } short={ currencyDisplayNumberShort } type={ type } />);
 
             count++;
         }
@@ -65,20 +65,20 @@ export const PurseView: FC<{}> = props =>
         <Column alignItems="end" className="nitro-purse-container" gap={ 1 }>
             <Flex className="nitro-purse rounded-bottom p-1">
                 <Grid fullWidth gap={ 1 }>
-                    <Column justifyContent="center" size={ hcDisabled ? 10 : 6 } gap={ 0 }>
-                        <CurrencyView type={ -1 } amount={ purse.credits } short={ currencyDisplayNumberShort } />
+                    <Column gap={ 0 } justifyContent="center" size={ hcDisabled ? 10 : 6 }>
+                        <CurrencyView amount={ purse.credits } short={ currencyDisplayNumberShort } type={ -1 } />
                         { getCurrencyElements(0, 2) }
                     </Column>
                     { !hcDisabled &&
-                        <Column center pointer size={ 4 } gap={ 1 } className="nitro-purse-subscription rounded" onClick={ event => CreateLinkEvent('habboUI/open/hccenter') }>
+                        <Column center pointer className="nitro-purse-subscription rounded" gap={ 1 } size={ 4 } onClick={ event => CreateLinkEvent('habboUI/open/hccenter') }>
                             <LayoutCurrencyIcon type="hc" />
                             <Text variant="white">{ getClubText }</Text>
                         </Column> }
-                    <Column justifyContent="center" size={ 2 } gap={ 0 }>
-                        <Flex center pointer fullHeight className="nitro-purse-button p-1 rounded" onClick={ event => CreateLinkEvent('help/show') }>
+                    <Column gap={ 0 } justifyContent="center" size={ 2 }>
+                        <Flex center fullHeight pointer className="nitro-purse-button p-1 rounded" onClick={ event => CreateLinkEvent('help/show') }>
                             <i className="icon icon-help"/>
                         </Flex>
-                        <Flex center pointer fullHeight className="nitro-purse-button p-1 rounded" onClick={ event => CreateLinkEvent('user-settings/toggle') } >
+                        <Flex center fullHeight pointer className="nitro-purse-button p-1 rounded" onClick={ event => CreateLinkEvent('user-settings/toggle') } >
                             <i className="icon icon-cog"/>
                         </Flex>
                     </Column>
diff --git a/src/components/purse/views/CurrencyView.tsx b/src/components/purse/views/CurrencyView.tsx
index 73f13c03..f5ef2a7c 100644
--- a/src/components/purse/views/CurrencyView.tsx
+++ b/src/components/purse/views/CurrencyView.tsx
@@ -17,8 +17,8 @@ export const CurrencyView: FC<CurrencyViewProps> = props =>
     const element = useMemo(() =>
     {
         return (
-            <Flex justifyContent="end" pointer gap={ 1 } className="nitro-purse-button rounded">
-                <Text truncate textEnd variant="white" grow>{ short ? LocalizeShortNumber(amount) : LocalizeFormattedNumber(amount) }</Text>
+            <Flex pointer className="nitro-purse-button rounded" gap={ 1 } justifyContent="end">
+                <Text grow textEnd truncate variant="white">{ short ? LocalizeShortNumber(amount) : LocalizeFormattedNumber(amount) }</Text>
                 <LayoutCurrencyIcon type={ type } />
             </Flex>);
     }, [ amount, short, type ]);
@@ -27,12 +27,12 @@ export const CurrencyView: FC<CurrencyViewProps> = props =>
     
     return (
         <OverlayTrigger
-            placement="left"
             overlay={
                 <Tooltip id={ `tooltip-${ type }` }>
                     { LocalizeFormattedNumber(amount) }
                 </Tooltip>
-            }>
+            }
+            placement="left">
             { element }
         </OverlayTrigger>
     );
diff --git a/src/components/purse/views/SeasonalView.tsx b/src/components/purse/views/SeasonalView.tsx
index 0c869bb7..ebd16f37 100644
--- a/src/components/purse/views/SeasonalView.tsx
+++ b/src/components/purse/views/SeasonalView.tsx
@@ -13,12 +13,12 @@ export const SeasonalView: FC<SeasonalViewProps> = props =>
     const { type = -1, amount = -1 } = props;
 
     return (
-        <Flex fullWidth justifyContent="between" className="nitro-purse-seasonal-currency p-2 rounded">
+        <Flex fullWidth className="nitro-purse-seasonal-currency p-2 rounded" justifyContent="between">
             <Text variant="white">{ LocalizeText(`purse.seasonal.currency.${ type }`) }</Text>
-            <Flex gap={ 1 }>
+            <div className="flex gap-1">
                 <Text variant="white">{ LocalizeFormattedNumber(amount) }</Text>
                 <LayoutCurrencyIcon type={ type } />
-            </Flex>
+            </div>
         </Flex>
     );
 }
diff --git a/src/components/right-side/RightSideView.tsx b/src/components/right-side/RightSideView.tsx
index 92e81290..8b865964 100644
--- a/src/components/right-side/RightSideView.tsx
+++ b/src/components/right-side/RightSideView.tsx
@@ -11,7 +11,7 @@ export const RightSideView: FC<{}> = props =>
 {
     return (
         <div className="nitro-right-side">
-            <Column position="relative" gap={ 1 }>
+            <Column gap={ 1 } position="relative">
                 <PurseView />
                 <GroupRoomInformationView />
                 <MysteryBoxExtensionView />
diff --git a/src/components/room/RoomView.tsx b/src/components/room/RoomView.tsx
index cbf879a9..14554c9c 100644
--- a/src/components/room/RoomView.tsx
+++ b/src/components/room/RoomView.tsx
@@ -1,7 +1,7 @@
 import { GetRenderer } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useRef } from 'react';
 import { DispatchMouseEvent, DispatchTouchEvent } from '../../api';
-import { Base } from '../../common';
+import { classNames } from '../../common';
 import { useRoom } from '../../hooks';
 import { RoomSpectatorView } from './spectator/RoomSpectatorView';
 import { RoomWidgetsView } from './widgets/RoomWidgetsView';
@@ -35,12 +35,12 @@ export const RoomView: FC<{}> = props =>
     }, []);
 
     return (
-        <Base fit innerRef={ elementRef } className={ (!roomSession && 'd-none') }>
+        <div ref={ elementRef } className={ classNames('size-full', (!roomSession && 'd-none')) }>
             { roomSession &&
                 <>
                     <RoomWidgetsView />
                     { roomSession.isSpectator && <RoomSpectatorView /> }
                 </> }
-        </Base>
+        </div>
     );
 }
diff --git a/src/components/room/widgets/avatar-info/AvatarInfoPetTrainingPanelView.tsx b/src/components/room/widgets/avatar-info/AvatarInfoPetTrainingPanelView.tsx
index 8e2e566c..d113d1ae 100644
--- a/src/components/room/widgets/avatar-info/AvatarInfoPetTrainingPanelView.tsx
+++ b/src/components/room/widgets/avatar-info/AvatarInfoPetTrainingPanelView.tsx
@@ -35,15 +35,15 @@ export const AvatarInfoPetTrainingPanelView: FC<{}> = props =>
     if(!petData || !petTrainInformation) return null;
 
     return (
-        <NitroCardView uniqueKey="user-settings" className="user-settings-window no-resize" theme="primary-slim">
+        <NitroCardView className="user-settings-window no-resize" theme="primary-slim" uniqueKey="user-settings">
             <NitroCardHeaderView headerText={ LocalizeText('widgets.pet.commands.title') } onCloseClick={ () => setPetTrainInformation(null) } />
             <NitroCardContentView className="text-black">
-                <Flex alignItems="center" justifyContent="center" gap={ 2 }>
+                <Flex alignItems="center" gap={ 2 } justifyContent="center">
                     <Grid columnCount={ 2 }>
-                        <Column fullWidth overflow="hidden" className="body-image pet p-1">
-                            <LayoutPetImageView figure={ petData.figure } posture={ 'std' } direction={ 2 } />
+                        <Column fullWidth className="body-image pet p-1" overflow="hidden">
+                            <LayoutPetImageView direction={ 2 } figure={ petData.figure } posture={ 'std' } />
                         </Column>
-                        <Text variant="black" small wrap>{ petData.name }</Text>
+                        <Text small wrap variant="black">{ petData.name }</Text>
                     </Grid>
                 </Flex>
                 <Grid columnCount={ 2 }>
diff --git a/src/components/room/widgets/avatar-info/AvatarInfoRentableBotChatView.tsx b/src/components/room/widgets/avatar-info/AvatarInfoRentableBotChatView.tsx
index 524fa496..558ca55c 100644
--- a/src/components/room/widgets/avatar-info/AvatarInfoRentableBotChatView.tsx
+++ b/src/components/room/widgets/avatar-info/AvatarInfoRentableBotChatView.tsx
@@ -1,7 +1,7 @@
 import { BotSkillSaveComposer } from '@nitrots/nitro-renderer';
 import { FC, useMemo, useState } from 'react';
 import { BotSkillsEnum, GetRoomObjectBounds, GetRoomSession, LocalizeText, RoomWidgetUpdateRentableBotChatEvent, SendMessageComposer } from '../../../../api';
-import { Base, Button, Column, DraggableWindow, DraggableWindowPosition, Flex, Text } from '../../../../common';
+import { Button, Column, DraggableWindow, DraggableWindowPosition, Flex, Text } from '../../../../common';
 import { ContextMenuHeaderView } from '../context-menu/ContextMenuHeaderView';
 
 interface AvatarInfoRentableBotChatViewProps
@@ -33,36 +33,36 @@ export const AvatarInfoRentableBotChatView: FC<AvatarInfoRentableBotChatViewProp
     }
     
     return (
-        <DraggableWindow windowPosition={ DraggableWindowPosition.NOTHING } handleSelector=".drag-handler" dragStyle={ { top: getObjectLocation.y, left: getObjectLocation.x } }>
-            <Base className="nitro-context-menu bot-chat">
+        <DraggableWindow dragStyle={ { top: getObjectLocation.y, left: getObjectLocation.x } } handleSelector=".drag-handler" windowPosition={ DraggableWindowPosition.NOTHING }>
+            <div className="nitro-context-menu bot-chat">
                 <ContextMenuHeaderView className="drag-handler">
                     { LocalizeText('bot.skill.chatter.configuration.title') }
                 </ContextMenuHeaderView>
                 <Column className="p-1">
-                    <Column gap={ 1 }>
+                    <div className="flex flex-column gap-1">
                         <Text variant="white">{ LocalizeText('bot.skill.chatter.configuration.chat.text') }</Text>
-                        <textarea className="form-control form-control-sm" placeholder={ LocalizeText('bot.skill.chatter.configuration.text.placeholder') } value={ newText } rows={ 7 } onChange={ e => setNewText(e.target.value) } />
-                    </Column>
-                    <Column gap={ 1 }>
-                        <Flex gap={ 1 } alignItems="center" justifyContent="between">
+                        <textarea className="form-control form-control-sm" placeholder={ LocalizeText('bot.skill.chatter.configuration.text.placeholder') } rows={ 7 } value={ newText } onChange={ e => setNewText(e.target.value) } />
+                    </div>
+                    <div className="flex flex-column gap-1">
+                        <Flex alignItems="center" gap={ 1 } justifyContent="between">
                             <Text fullWidth variant="white">{ LocalizeText('bot.skill.chatter.configuration.automatic.chat') }</Text>
-                            <input type="checkbox" className="form-check-input" checked={ automaticChat } onChange={ event => setAutomaticChat(event.target.checked) } />
+                            <input checked={ automaticChat } className="form-check-input" type="checkbox" onChange={ event => setAutomaticChat(event.target.checked) } />
                         </Flex>
-                        <Flex gap={ 1 } alignItems="center" justifyContent="between">
+                        <Flex alignItems="center" gap={ 1 } justifyContent="between">
                             <Text fullWidth variant="white">{ LocalizeText('bot.skill.chatter.configuration.markov') }</Text>
-                            <input type="checkbox" className="form-check-input" checked={ mixSentences } onChange={ event => setMixSentences(event.target.checked) } />
+                            <input checked={ mixSentences } className="form-check-input" type="checkbox" onChange={ event => setMixSentences(event.target.checked) } />
                         </Flex>
-                        <Flex gap={ 1 } alignItems="center" justifyContent="between">
+                        <Flex alignItems="center" gap={ 1 } justifyContent="between">
                             <Text fullWidth variant="white">{ LocalizeText('bot.skill.chatter.configuration.chat.delay') }</Text>
-                            <input type="number" className="form-control form-control-sm" value={ chatDelay } onChange={ event => setChatDelay(event.target.valueAsNumber) }/>
+                            <input className="form-control form-control-sm" type="number" value={ chatDelay } onChange={ event => setChatDelay(event.target.valueAsNumber) }/>
                         </Flex>
-                    </Column>
-                    <Flex alignItems="center" justifyContent="between" gap={ 1 }>
+                    </div>
+                    <Flex alignItems="center" gap={ 1 } justifyContent="between">
                         <Button fullWidth variant="primary" onClick={ onClose }>{ LocalizeText('cancel') }</Button>
                         <Button fullWidth variant="success" onClick={ save }>{ LocalizeText('save') }</Button>
                     </Flex>
                 </Column>
-            </Base>
+            </div>
         </DraggableWindow>
     );
 }
diff --git a/src/components/room/widgets/avatar-info/AvatarInfoUseProductConfirmView.tsx b/src/components/room/widgets/avatar-info/AvatarInfoUseProductConfirmView.tsx
index 5178bfb4..a45566a4 100644
--- a/src/components/room/widgets/avatar-info/AvatarInfoUseProductConfirmView.tsx
+++ b/src/components/room/widgets/avatar-info/AvatarInfoUseProductConfirmView.tsx
@@ -1,7 +1,7 @@
 import { GetRoomEngine, IFurnitureData, IPetCustomPart, IRoomUserData, PetCustomPart, PetFigureData, RoomObjectCategory, RoomObjectVariable } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useMemo, useState } from 'react';
 import { FurniCategory, GetFurnitureDataForRoomObject, LocalizeText, UseProductItem } from '../../../../api';
-import { Base, Button, Column, Flex, LayoutPetImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
+import { Button, Column, Flex, LayoutPetImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
 import { useRoom } from '../../../../hooks';
 
 interface AvatarInfoUseProductConfirmViewProps
@@ -69,7 +69,7 @@ export const AvatarInfoUseProductConfirmView: FC<AvatarInfoUseProductConfirmView
                     }
                 }
 
-                return <LayoutPetImageView typeId={ petFigureData.typeId } paletteId={ paletteId } petColor={ petFigureData.color } customParts={ petFigureData.customParts } direction={ 2 } />
+                return <LayoutPetImageView customParts={ petFigureData.customParts } direction={ 2 } paletteId={ paletteId } petColor={ petFigureData.color } typeId={ petFigureData.typeId } />
             }
             case FurniCategory.PET_CUSTOM_PART: {
                 if(customParts.length < 4) return null;
@@ -96,7 +96,7 @@ export const AvatarInfoUseProductConfirmView: FC<AvatarInfoUseProductConfirmView
                     _local_10++;
                 }
 
-                return <LayoutPetImageView typeId={ petFigureData.typeId } paletteId={ petFigureData.paletteId } petColor={ petFigureData.color } customParts={ newCustomParts } direction={ 2 } />;
+                return <LayoutPetImageView customParts={ newCustomParts } direction={ 2 } paletteId={ petFigureData.paletteId } petColor={ petFigureData.color } typeId={ petFigureData.typeId } />;
             }
             case FurniCategory.PET_CUSTOM_PART_SHAMPOO: {
                 if(customParts.length < 3) return null;
@@ -122,7 +122,7 @@ export const AvatarInfoUseProductConfirmView: FC<AvatarInfoUseProductConfirmView
                     _local_10++;
                 }
 
-                return <LayoutPetImageView typeId={ petFigureData.typeId } paletteId={ petFigureData.paletteId } petColor={ petFigureData.color } customParts={ newCustomParts } direction={ 2 } />;
+                return <LayoutPetImageView customParts={ newCustomParts } direction={ 2 } paletteId={ petFigureData.paletteId } petColor={ petFigureData.color } typeId={ petFigureData.typeId } />;
             }
             case FurniCategory.PET_SADDLE: {
                 if(customParts.length < 4) return null;
@@ -150,7 +150,7 @@ export const AvatarInfoUseProductConfirmView: FC<AvatarInfoUseProductConfirmView
                     }
                 }
 
-                return <LayoutPetImageView typeId={ petFigureData.typeId } paletteId={ petFigureData.paletteId } petColor={ petFigureData.color } customParts={ newCustomParts } direction={ 2 } />;
+                return <LayoutPetImageView customParts={ newCustomParts } direction={ 2 } paletteId={ petFigureData.paletteId } petColor={ petFigureData.color } typeId={ petFigureData.typeId } />;
             }
             case FurniCategory.MONSTERPLANT_REBREED:
             case FurniCategory.MONSTERPLANT_REVIVAL:
@@ -172,7 +172,7 @@ export const AvatarInfoUseProductConfirmView: FC<AvatarInfoUseProductConfirmView
                     }
                 }
 
-                return <LayoutPetImageView typeId={ petFigureData.typeId } paletteId={ petFigureData.paletteId } petColor={ petFigureData.color } customParts={ petFigureData.customParts } posture={ posture } direction={ 2 } />;
+                return <LayoutPetImageView customParts={ petFigureData.customParts } direction={ 2 } paletteId={ petFigureData.paletteId } petColor={ petFigureData.color } posture={ posture } typeId={ petFigureData.typeId } />;
             }
         }
     }, [ petData, furniData, roomSession ]);
@@ -226,11 +226,11 @@ export const AvatarInfoUseProductConfirmView: FC<AvatarInfoUseProductConfirmView
             <NitroCardHeaderView headerText={ LocalizeText('useproduct.widget.title', [ 'name' ], [ petData.name ]) } onCloseClick={ onClose } />
             <NitroCardContentView center>
                 <Flex gap={ 2 } overflow="hidden">
-                    <Column>
-                        <Base pointer className="product-preview" onClick={ selectRoomObject }>
+                    <div className="flex flex-column">
+                        <div className="product-preview cursor-pointer" onClick={ selectRoomObject }>
                             { getPetImage }
-                        </Base>
-                    </Column>
+                        </div>
+                    </div>
                     <Column justifyContent="between" overflow="auto">
                         <Column gap={ 2 }>
                             { (mode === PRODUCT_PAGE_SHAMPOO) &&
@@ -269,10 +269,10 @@ export const AvatarInfoUseProductConfirmView: FC<AvatarInfoUseProductConfirmView
                                     <Text>{ LocalizeText('useproduct.widget.info.fertilize_monsterplant') }</Text>
                                 </> }
                         </Column>
-                        <Flex alignItems="center" justifyContent="between">
+                        <div className="flex items-center justify-content-between">
                             <Button variant="danger" onClick={ onClose }>{ LocalizeText('useproduct.widget.cancel') }</Button>
                             <Button variant="success" onClick={ useProduct }>{ LocalizeText('useproduct.widget.use') }</Button>
-                        </Flex>
+                        </div>
                     </Column>
                 </Flex>
             </NitroCardContentView>
diff --git a/src/components/room/widgets/avatar-info/AvatarInfoUseProductView.tsx b/src/components/room/widgets/avatar-info/AvatarInfoUseProductView.tsx
index f2a800cd..2e529733 100644
--- a/src/components/room/widgets/avatar-info/AvatarInfoUseProductView.tsx
+++ b/src/components/room/widgets/avatar-info/AvatarInfoUseProductView.tsx
@@ -87,7 +87,7 @@ export const AvatarInfoUseProductView: FC<AvatarInfoUseProductViewProps> = props
     }, [ roomSession, item ]);
     
     return (
-        <ContextMenuView objectId={ item.id } category={ RoomObjectCategory.UNIT } userType={ RoomObjectType.PET } onClose={ onClose } collapsable={ true }>
+        <ContextMenuView category={ RoomObjectCategory.UNIT } collapsable={ true } objectId={ item.id } userType={ RoomObjectType.PET } onClose={ onClose }>
             <ContextMenuHeaderView>
                 { item.name }
             </ContextMenuHeaderView>
diff --git a/src/components/room/widgets/avatar-info/AvatarInfoWidgetView.tsx b/src/components/room/widgets/avatar-info/AvatarInfoWidgetView.tsx
index 9306e46f..5a30b724 100644
--- a/src/components/room/widgets/avatar-info/AvatarInfoWidgetView.tsx
+++ b/src/components/room/widgets/avatar-info/AvatarInfoWidgetView.tsx
@@ -120,7 +120,7 @@ export const AvatarInfoWidgetView: FC<{}> = props =>
     return (
         <>
             { isDecorating &&
-                <AvatarInfoWidgetDecorateView userId={ GetSessionDataManager().userId } userName={ GetSessionDataManager().userName } roomIndex={ roomSession.ownRoomIndex } setIsDecorating={ setIsDecorating } /> }
+                <AvatarInfoWidgetDecorateView roomIndex={ roomSession.ownRoomIndex } setIsDecorating={ setIsDecorating } userId={ GetSessionDataManager().userId } userName={ GetSessionDataManager().userName } /> }
             { getMenuView() }
             { avatarInfo &&
                 <Column alignItems="end" className="nitro-infostand-container">
diff --git a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetBotView.tsx b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetBotView.tsx
index 925de95b..8b2435fa 100644
--- a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetBotView.tsx
+++ b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetBotView.tsx
@@ -17,38 +17,38 @@ export const InfoStandWidgetBotView: FC<InfoStandWidgetBotViewProps> = props =>
 
     return (
         <Column className="nitro-infostand rounded">
-            <Column overflow="visible" className="container-fluid content-area" gap={ 1 }>
-                <Column gap={ 1 }>
-                    <Flex alignItems="center" justifyContent="between" gap={ 1 }>
-                        <Text variant="white" small wrap>{ avatarInfo.name }</Text>
+            <Column className="container-fluid content-area" gap={ 1 } overflow="visible">
+                <div className="flex flex-column gap-1">
+                    <Flex alignItems="center" gap={ 1 } justifyContent="between">
+                        <Text small wrap variant="white">{ avatarInfo.name }</Text>
                         <FaTimes className="cursor-pointer fa-icon" onClick={ onClose } />
                     </Flex>
                     <hr className="m-0" />
-                </Column>
-                <Column gap={ 1 }>
-                    <Flex gap={ 1 }>
+                </div>
+                <div className="flex flex-column gap-1">
+                    <div className="flex gap-1">
                         <Column fullWidth className="body-image bot">
-                            <LayoutAvatarImageView figure={ avatarInfo.figure } direction={ 4 } />
+                            <LayoutAvatarImageView direction={ 4 } figure={ avatarInfo.figure } />
                         </Column>
-                        <Column grow center gap={ 0 }>
+                        <Column center grow gap={ 0 }>
                             { (avatarInfo.badges.length > 0) && avatarInfo.badges.map(result =>
                             {
                                 return <LayoutBadgeImageView key={ result } badgeCode={ result } showInfo={ true } />;
                             }) }
                         </Column>
-                    </Flex>
+                    </div>
                     <hr className="m-0" />
-                </Column>
+                </div>
                 <Flex alignItems="center" className="bg-light-dark rounded py-1 px-2">
-                    <Text fullWidth wrap textBreak variant="white" small className="motto-content">{ avatarInfo.motto }</Text>
+                    <Text fullWidth small textBreak wrap className="motto-content" variant="white">{ avatarInfo.motto }</Text>
                 </Flex>
                 { (avatarInfo.carryItem > 0) &&
-                    <Column gap={ 1 }>
+                    <div className="flex flex-column gap-1">
                         <hr className="m-0" />
-                        <Text variant="white" small wrap>
+                        <Text small wrap variant="white">
                             { LocalizeText('infostand.text.handitem', [ 'item' ], [ LocalizeText('handitem' + avatarInfo.carryItem) ]) }
                         </Text>
-                    </Column> }
+                    </div> }
             </Column>
         </Column>
     );
diff --git a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetFurniView.tsx b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetFurniView.tsx
index 3fd74dac..471c478a 100644
--- a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetFurniView.tsx
+++ b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetFurniView.tsx
@@ -2,7 +2,7 @@ import { CrackableDataType, CreateLinkEvent, GetRoomEngine, GetSoundManager, Gro
 import { FC, useCallback, useEffect, useState } from 'react';
 import { FaTimes } from 'react-icons/fa';
 import { AvatarInfoFurni, GetGroupInformation, LocalizeText, SendMessageComposer } from '../../../../../api';
-import { Base, Button, Column, Flex, LayoutBadgeImageView, LayoutLimitedEditionCompactPlateView, LayoutRarityLevelView, LayoutRoomObjectImageView, Text, UserProfileIconView } from '../../../../../common';
+import { Button, Column, Flex, LayoutBadgeImageView, LayoutLimitedEditionCompactPlateView, LayoutRarityLevelView, LayoutRoomObjectImageView, Text, UserProfileIconView } from '../../../../../common';
 import { useMessageEvent, useNitroEvent, useRoom } from '../../../../../hooks';
 
 interface InfoStandWidgetFurniViewProps
@@ -327,18 +327,18 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
     if(!avatarInfo) return null;
 
     return (
-        <Column gap={ 1 } alignItems="end">
+        <Column alignItems="end" gap={ 1 }>
             <Column className="nitro-infostand rounded">
-                <Column overflow="visible" className="container-fluid content-area" gap={ 1 }>
-                    <Column gap={ 1 }>
-                        <Flex alignItems="center" justifyContent="between" gap={ 1 }>
-                            <Text variant="white" small wrap>{ avatarInfo.name }</Text>
+                <Column className="container-fluid content-area" gap={ 1 } overflow="visible">
+                    <div className="flex flex-column gap-1">
+                        <Flex alignItems="center" gap={ 1 } justifyContent="between">
+                            <Text small wrap variant="white">{ avatarInfo.name }</Text>
                             <FaTimes className="cursor-pointer fa-icon" onClick={ onClose } />
                         </Flex>
                         <hr className="m-0" />
-                    </Column>
-                    <Column gap={ 1 }>
-                        <Flex position="relative" gap={ 1 }>
+                    </div>
+                    <div className="flex flex-column gap-1">
+                        <Flex gap={ 1 } position="relative">
                             { avatarInfo.stuffData.isUnique &&
                                 <div className="position-absolute end-0">
                                     <LayoutLimitedEditionCompactPlateView uniqueNumber={ avatarInfo.stuffData.uniqueNumber } uniqueSeries={ avatarInfo.stuffData.uniqueSeries } />
@@ -347,64 +347,64 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
                                 <div className="position-absolute end-0">
                                     <LayoutRarityLevelView level={ avatarInfo.stuffData.rarityLevel } />
                                 </div> }
-                            <Flex fullWidth center>
-                                <LayoutRoomObjectImageView roomId={ roomSession.roomId } objectId={ avatarInfo.id } category={ avatarInfo.category } />
+                            <Flex center fullWidth>
+                                <LayoutRoomObjectImageView category={ avatarInfo.category } objectId={ avatarInfo.id } roomId={ roomSession.roomId } />
                             </Flex>
                         </Flex>
                         <hr className="m-0" />
-                    </Column>
-                    <Column gap={ 1 }>
-                        <Text fullWidth wrap textBreak variant="white" small>{ avatarInfo.description }</Text>
+                    </div>
+                    <div className="flex flex-column gap-1">
+                        <Text fullWidth small textBreak wrap variant="white">{ avatarInfo.description }</Text>
                         <hr className="m-0" />
-                    </Column>
-                    <Column gap={ 1 }>
-                        <Flex alignItems="center" gap={ 1 }>
+                    </div>
+                    <div className="flex flex-column gap-1">
+                        <div className="flex items-center gap-1">
                             <UserProfileIconView userId={ avatarInfo.ownerId } />
-                            <Text variant="white" small wrap>
+                            <Text small wrap variant="white">
                                 { LocalizeText('furni.owner', [ 'name' ], [ avatarInfo.ownerName ]) }
                             </Text>
-                        </Flex>
+                        </div>
                         { (avatarInfo.purchaseOfferId > 0) &&
                             <Flex>
-                                <Text variant="white" small underline pointer onClick={ event => processButtonAction('buy_one') }>
+                                <Text pointer small underline variant="white" onClick={ event => processButtonAction('buy_one') }>
                                     { LocalizeText('infostand.button.buy') }
                                 </Text>
                             </Flex> }
-                    </Column>
+                    </div>
                     { (isJukeBox || isSongDisk) &&
-                        <Column gap={ 1 }>
+                        <div className="flex flex-column gap-1">
                             <hr className="m-0" />
                             { (songId === -1) &&
-                                <Text variant="white" small wrap>
+                                <Text small wrap variant="white">
                                     { LocalizeText('infostand.jukebox.text.not.playing') }
                                 </Text> }
                             { !!songName.length &&
-                                <Flex alignItems="center" gap={ 1 }>
-                                    <Base className="icon disk-icon" />
-                                    <Text variant="white" small wrap>
+                                <div className="flex items-center gap-1">
+                                    <div className="icon disk-icon" />
+                                    <Text small wrap variant="white">
                                         { songName }
                                     </Text>
-                                </Flex> }
+                                </div> }
                             { !!songCreator.length &&
-                                <Flex alignItems="center" gap={ 1 }>
-                                    <Base className="icon disk-creator" />
-                                    <Text variant="white" small wrap>
+                                <div className="flex items-center gap-1">
+                                    <div className="icon disk-creator" />
+                                    <Text small wrap variant="white">
                                         { songCreator }
                                     </Text>
-                                </Flex> }
-                        </Column> }
-                    <Column gap={ 1 }>
+                                </div> }
+                        </div> }
+                    <div className="flex flex-column gap-1">
                         { isCrackable &&
                             <>
                                 <hr className="m-0" />
-                                <Text variant="white" small wrap>{ LocalizeText('infostand.crackable_furni.hits_remaining', [ 'hits', 'target' ], [ crackableHits.toString(), crackableTarget.toString() ]) }</Text>
+                                <Text small wrap variant="white">{ LocalizeText('infostand.crackable_furni.hits_remaining', [ 'hits', 'target' ], [ crackableHits.toString(), crackableTarget.toString() ]) }</Text>
                             </> }
                         { avatarInfo.groupId > 0 &&
                             <>
                                 <hr className="m-0" />
                                 <Flex pointer alignItems="center" gap={ 2 } onClick={ () => GetGroupInformation(avatarInfo.groupId) }>
                                     <LayoutBadgeImageView badgeCode={ getGroupBadgeCode() } isGroup={ true } />
-                                    <Text variant="white" underline>{ groupName }</Text>
+                                    <Text underline variant="white">{ groupName }</Text>
                                 </Flex>
                             </> }
                         { godMode &&
@@ -414,33 +414,33 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
                                 { (furniKeys.length > 0) &&
                                     <>
                                         <hr className="m-0"/>
-                                        <Column gap={ 1 }>
+                                        <div className="flex flex-column gap-1">
                                             { furniKeys.map((key, index) =>
                                             {
                                                 return (
                                                     <Flex key={ index } alignItems="center" gap={ 1 }>
-                                                        <Text small wrap align="end" variant="white" className="col-4">{ key }</Text>
-                                                        <input type="text" className="form-control form-control-sm" value={ furniValues[index] } onChange={ event => onFurniSettingChange(index, event.target.value) }/>
+                                                        <Text small wrap align="end" className="col-4" variant="white">{ key }</Text>
+                                                        <input className="form-control form-control-sm" type="text" value={ furniValues[index] } onChange={ event => onFurniSettingChange(index, event.target.value) }/>
                                                     </Flex>);
                                             }) }
-                                        </Column>
+                                        </div>
                                     </> }
                             </> }
                         { (customKeys.length > 0) &&
                             <>
                                 <hr className="m-0 my-1"/>
-                                <Column gap={ 1 }>
+                                <div className="flex flex-column gap-1">
                                     { customKeys.map((key, index) =>
                                     {
                                         return (
                                             <Flex key={ index } alignItems="center" gap={ 1 }>
-                                                <Text small wrap align="end" variant="white" className="col-4">{ key }</Text>
-                                                <input type="text" className="form-control form-control-sm" value={ customValues[index] } onChange={ event => onCustomVariableChange(index, event.target.value) }/>
+                                                <Text small wrap align="end" className="col-4" variant="white">{ key }</Text>
+                                                <input className="form-control form-control-sm" type="text" value={ customValues[index] } onChange={ event => onCustomVariableChange(index, event.target.value) }/>
                                             </Flex>);
                                     }) }
-                                </Column>
+                                </div>
                             </> }
-                    </Column>
+                    </div>
                 </Column>
             </Column>
             <Flex gap={ 1 } justifyContent="end">
diff --git a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetPetView.tsx b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetPetView.tsx
index 67550ac4..21fa5ca5 100644
--- a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetPetView.tsx
+++ b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetPetView.tsx
@@ -2,7 +2,7 @@ import { CreateLinkEvent, PetRespectComposer, PetType } from '@nitrots/nitro-ren
 import { FC, useEffect, useState } from 'react';
 import { FaTimes } from 'react-icons/fa';
 import { AvatarInfoPet, ConvertSeconds, GetConfigurationValue, LocalizeText, SendMessageComposer } from '../../../../../api';
-import { Base, Button, Column, Flex, LayoutCounterTimeView, LayoutPetImageView, LayoutRarityLevelView, Text, UserProfileIconView } from '../../../../../common';
+import { Button, Column, Flex, LayoutCounterTimeView, LayoutPetImageView, LayoutRarityLevelView, Text, UserProfileIconView } from '../../../../../common';
 import { useRoom, useSessionInfo } from '../../../../../hooks';
 
 interface InfoStandWidgetPetViewProps
@@ -74,108 +74,108 @@ export const InfoStandWidgetPetView: FC<InfoStandWidgetPetViewProps> = props =>
     }
 
     return (
-        <Column gap={ 1 } alignItems="end">
+        <Column alignItems="end" gap={ 1 }>
             <Column className="nitro-infostand rounded">
-                <Column overflow="visible" className="container-fluid content-area" gap={ 1 }>
-                    <Column gap={ 1 }>
-                        <Flex alignItems="center" justifyContent="between" gap={ 1 }>
-                            <Text variant="white" small wrap>{ avatarInfo.name }</Text>
+                <Column className="container-fluid content-area" gap={ 1 } overflow="visible">
+                    <div className="flex flex-column gap-1">
+                        <Flex alignItems="center" gap={ 1 } justifyContent="between">
+                            <Text small wrap variant="white">{ avatarInfo.name }</Text>
                             <FaTimes className="cursor-pointer fa-icon" onClick={ onClose } />
                         </Flex>
-                        <Text variant="white" small wrap>{ LocalizeText(`pet.breed.${ avatarInfo.petType }.${ avatarInfo.petBreed }`) }</Text>
+                        <Text small wrap variant="white">{ LocalizeText(`pet.breed.${ avatarInfo.petType }.${ avatarInfo.petBreed }`) }</Text>
                         <hr className="m-0" />
-                    </Column>
+                    </div>
                     { (avatarInfo.petType === PetType.MONSTERPLANT) &&
                         <>
                             <Column center gap={ 1 }>
-                                <LayoutPetImageView figure={ avatarInfo.petFigure } posture={ avatarInfo.posture } direction={ 4 } />
+                                <LayoutPetImageView direction={ 4 } figure={ avatarInfo.petFigure } posture={ avatarInfo.posture } />
                                 <hr className="m-0" />
                             </Column>
-                            <Column gap={ 2 }>
+                            <div className="flex flex-column gap-2">
                                 { !avatarInfo.dead &&
                                     <Column alignItems="center" gap={ 1 }>
-                                        <Text variant="white" center small wrap>{ LocalizeText('pet.level', [ 'level', 'maxlevel' ], [ avatarInfo.level.toString(), avatarInfo.maximumLevel.toString() ]) }</Text>
+                                        <Text center small wrap variant="white">{ LocalizeText('pet.level', [ 'level', 'maxlevel' ], [ avatarInfo.level.toString(), avatarInfo.maximumLevel.toString() ]) }</Text>
                                     </Column> }
                                 <Column alignItems="center" gap={ 1 }>
-                                    <Text variant="white" small truncate>{ LocalizeText('infostand.pet.text.wellbeing') }</Text>
-                                    <Base fullWidth overflow="hidden" position="relative" className="bg-light-dark rounded">
-                                        <Flex fit center position="absolute">
-                                            <Text variant="white" small>{ avatarInfo.dead ? '00:00:00' : ConvertSeconds((remainingTimeToLive == 0 ? avatarInfo.remainingTimeToLive : remainingTimeToLive)).split(':')[1] + ':' + ConvertSeconds((remainingTimeToLive == null || remainingTimeToLive == undefined ? 0 : remainingTimeToLive)).split(':')[2] + ':' + ConvertSeconds((remainingTimeToLive == null || remainingTimeToLive == undefined ? 0 : remainingTimeToLive)).split(':')[3] }</Text>
-                                        </Flex>
-                                        <Base className="bg-success rounded pet-stats" style={ { width: avatarInfo.dead ? '0' : Math.round((avatarInfo.maximumTimeToLive * 100) / (remainingTimeToLive)).toString() } } />
-                                    </Base>
+                                    <Text small truncate variant="white">{ LocalizeText('infostand.pet.text.wellbeing') }</Text>
+                                    <div className="bg-light-dark rounded position-relative overflow-hidden w-100">
+                                        <div className="flex justify-center items-center size-full position-absolute">
+                                            <Text small variant="white">{ avatarInfo.dead ? '00:00:00' : ConvertSeconds((remainingTimeToLive == 0 ? avatarInfo.remainingTimeToLive : remainingTimeToLive)).split(':')[1] + ':' + ConvertSeconds((remainingTimeToLive == null || remainingTimeToLive == undefined ? 0 : remainingTimeToLive)).split(':')[2] + ':' + ConvertSeconds((remainingTimeToLive == null || remainingTimeToLive == undefined ? 0 : remainingTimeToLive)).split(':')[3] }</Text>
+                                        </div>
+                                        <div className="bg-success rounded pet-stats" style={ { width: avatarInfo.dead ? '0' : Math.round((avatarInfo.maximumTimeToLive * 100) / (remainingTimeToLive)).toString() } } />
+                                    </div>
                                 </Column>
                                 { remainingGrowTime != 0 && remainingGrowTime > 0 &&
                                     <Column alignItems="center" gap={ 1 }>
-                                        <Text variant="white" small truncate>{ LocalizeText('infostand.pet.text.growth') }</Text>
+                                        <Text small truncate variant="white">{ LocalizeText('infostand.pet.text.growth') }</Text>
                                         <LayoutCounterTimeView className="top-2 end-2" day={ ConvertSeconds(remainingGrowTime).split(':')[0] } hour={ ConvertSeconds(remainingGrowTime).split(':')[1] } minutes={ ConvertSeconds(remainingGrowTime).split(':')[2] } seconds={ ConvertSeconds(remainingGrowTime).split(':')[3] } />
                                     </Column> }
                                 <Column alignItems="center" gap={ 1 }>
-                                    <Text variant="white" small truncate>{ LocalizeText('infostand.pet.text.raritylevel', [ 'level' ], [ LocalizeText(`infostand.pet.raritylevel.${ avatarInfo.rarityLevel }`) ]) }</Text>
+                                    <Text small truncate variant="white">{ LocalizeText('infostand.pet.text.raritylevel', [ 'level' ], [ LocalizeText(`infostand.pet.raritylevel.${ avatarInfo.rarityLevel }`) ]) }</Text>
                                     <LayoutRarityLevelView className="top-2 end-2" level={ avatarInfo.rarityLevel } />
                                 </Column>
                                 <hr className="m-0" />
-                            </Column>
-                            <Column gap={ 1 }>
-                                <Text variant="white" small wrap>{ LocalizeText('pet.age', [ 'age' ], [ avatarInfo.age.toString() ]) }</Text>
+                            </div>
+                            <div className="flex flex-column gap-1">
+                                <Text small wrap variant="white">{ LocalizeText('pet.age', [ 'age' ], [ avatarInfo.age.toString() ]) }</Text>
                                 <hr className="m-0" />
-                            </Column>
+                            </div>
                         </> }
                     { (avatarInfo.petType !== PetType.MONSTERPLANT) &&
                         <>
-                            <Column gap={ 1 }>
-                                <Flex gap={ 1 }>
-                                    <Column fullWidth overflow="hidden" className="body-image pet p-1">
-                                        <LayoutPetImageView figure={ avatarInfo.petFigure } posture={ avatarInfo.posture } direction={ 4 } />
+                            <div className="flex flex-column gap-1">
+                                <div className="flex gap-1">
+                                    <Column fullWidth className="body-image pet p-1" overflow="hidden">
+                                        <LayoutPetImageView direction={ 4 } figure={ avatarInfo.petFigure } posture={ avatarInfo.posture } />
                                     </Column>
                                     <Column grow gap={ 1 }>
-                                        <Text variant="white" center small wrap>{ LocalizeText('pet.level', [ 'level', 'maxlevel' ], [ avatarInfo.level.toString(), avatarInfo.maximumLevel.toString() ]) }</Text>
+                                        <Text center small wrap variant="white">{ LocalizeText('pet.level', [ 'level', 'maxlevel' ], [ avatarInfo.level.toString(), avatarInfo.maximumLevel.toString() ]) }</Text>
                                         <Column alignItems="center" gap={ 1 }>
-                                            <Text variant="white" small truncate>{ LocalizeText('infostand.pet.text.happiness') }</Text>
-                                            <Base fullWidth overflow="hidden" position="relative" className="bg-light-dark rounded">
-                                                <Flex fit center position="absolute">
-                                                    <Text variant="white" small>{ avatarInfo.happyness + '/' + avatarInfo.maximumHappyness }</Text>
-                                                </Flex>
-                                                <Base className="bg-info rounded pet-stats" style={ { width: (avatarInfo.happyness / avatarInfo.maximumHappyness) * 100 + '%' } } />
-                                            </Base>
+                                            <Text small truncate variant="white">{ LocalizeText('infostand.pet.text.happiness') }</Text>
+                                            <div className="bg-light-dark rounded position-relative overflow-hidden w-100">
+                                                <div className="flex justify-center items-center size-full position-absolute">
+                                                    <Text small variant="white">{ avatarInfo.happyness + '/' + avatarInfo.maximumHappyness }</Text>
+                                                </div>
+                                                <div className="bg-info rounded pet-stats" style={ { width: (avatarInfo.happyness / avatarInfo.maximumHappyness) * 100 + '%' } } />
+                                            </div>
                                         </Column>
                                         <Column alignItems="center" gap={ 1 }>
-                                            <Text variant="white" small truncate>{ LocalizeText('infostand.pet.text.experience') }</Text>
-                                            <Base fullWidth overflow="hidden" position="relative" className="bg-light-dark rounded">
-                                                <Flex fit center position="absolute">
-                                                    <Text variant="white" small>{ avatarInfo.experience + '/' + avatarInfo.levelExperienceGoal }</Text>
-                                                </Flex>
-                                                <Base className="bg-purple rounded pet-stats" style={ { width: (avatarInfo.experience / avatarInfo.levelExperienceGoal) * 100 + '%' } } />
-                                            </Base>
+                                            <Text small truncate variant="white">{ LocalizeText('infostand.pet.text.experience') }</Text>
+                                            <div className="bg-light-dark rounded position-relative overflow-hidden w-100">
+                                                <div className="flex justify-center items-center size-full position-absolute">
+                                                    <Text small variant="white">{ avatarInfo.experience + '/' + avatarInfo.levelExperienceGoal }</Text>
+                                                </div>
+                                                <div className="bg-purple rounded pet-stats" style={ { width: (avatarInfo.experience / avatarInfo.levelExperienceGoal) * 100 + '%' } } />
+                                            </div>
                                         </Column>
                                         <Column alignItems="center" gap={ 1 }>
-                                            <Text variant="white" small truncate>{ LocalizeText('infostand.pet.text.energy') }</Text>
-                                            <Base fullWidth overflow="hidden" position="relative" className="bg-light-dark rounded">
-                                                <Flex fit center position="absolute">
-                                                    <Text variant="white" small>{ avatarInfo.energy + '/' + avatarInfo.maximumEnergy }</Text>
-                                                </Flex>
-                                                <Base className="bg-success rounded pet-stats" style={ { width: (avatarInfo.energy / avatarInfo.maximumEnergy) * 100 + '%' } } />
-                                            </Base>
+                                            <Text small truncate variant="white">{ LocalizeText('infostand.pet.text.energy') }</Text>
+                                            <div className="bg-light-dark rounded position-relative overflow-hidden w-100">
+                                                <div className="flex justify-center items-center size-full position-absolute">
+                                                    <Text small variant="white">{ avatarInfo.energy + '/' + avatarInfo.maximumEnergy }</Text>
+                                                </div>
+                                                <div className="bg-success rounded pet-stats" style={ { width: (avatarInfo.energy / avatarInfo.maximumEnergy) * 100 + '%' } } />
+                                            </div>
                                         </Column>
                                     </Column>
-                                </Flex>
+                                </div>
                                 <hr className="m-0" />
-                            </Column>
-                            <Column gap={ 1 }>
+                            </div>
+                            <div className="flex flex-column gap-1">
                                 { (avatarInfo.petType !== PetType.MONSTERPLANT) &&
-                                    <Text variant="white" small wrap>{ LocalizeText('infostand.text.petrespect', [ 'count' ], [ avatarInfo.respect.toString() ]) }</Text> }
-                                <Text variant="white" small wrap>{ LocalizeText('pet.age', [ 'age' ], [ avatarInfo.age.toString() ]) }</Text>
+                                    <Text small wrap variant="white">{ LocalizeText('infostand.text.petrespect', [ 'count' ], [ avatarInfo.respect.toString() ]) }</Text> }
+                                <Text small wrap variant="white">{ LocalizeText('pet.age', [ 'age' ], [ avatarInfo.age.toString() ]) }</Text>
                                 <hr className="m-0" />
-                            </Column>
+                            </div>
                         </> }
-                    <Column gap={ 1 }>
-                        <Flex alignItems="center" gap={ 1 }>
+                    <div className="flex flex-column gap-1">
+                        <div className="flex items-center gap-1">
                             <UserProfileIconView userId={ avatarInfo.ownerId } />
-                            <Text variant="white" small wrap>
+                            <Text small wrap variant="white">
                                 { LocalizeText('infostand.text.petowner', [ 'name' ], [ avatarInfo.ownerName ]) }
                             </Text>
-                        </Flex>
-                    </Column>
+                        </div>
+                    </div>
                 </Column>
             </Column>
             <Flex gap={ 1 } justifyContent="end">
diff --git a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetRentableBotView.tsx b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetRentableBotView.tsx
index 44955326..3771cfec 100644
--- a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetRentableBotView.tsx
+++ b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetRentableBotView.tsx
@@ -28,57 +28,57 @@ export const InfoStandWidgetRentableBotView: FC<InfoStandWidgetRentableBotViewPr
     if(!avatarInfo) return;
 
     return (
-        <Column gap={ 1 }>
-            <Column className="nitro-infostand rounded">
-                <Column overflow="visible" className="container-fluid content-area" gap={ 1 }>
-                    <Column gap={ 1 }>
-                        <Flex alignItems="center" justifyContent="between" gap={ 1 }>
-                            <Text variant="white" small wrap>{ avatarInfo.name }</Text>
+        <div className="flex flex-column gap-1">
+            <div className="flex flex-column nitro-infostand rounded">
+                <div className="flex flex-column gap-1 overflow-visible container-fluid content-area">
+                    <div className="flex flex-column gap-1">
+                        <Flex alignItems="center" gap={ 1 } justifyContent="between">
+                            <Text small wrap variant="white">{ avatarInfo.name }</Text>
                             <FaTimes className="cursor-pointer fa-icon" onClick={ onClose } />
                         </Flex>
                         <hr className="m-0" />
-                    </Column>
-                    <Column gap={ 1 }>
-                        <Flex gap={ 1 }>
+                    </div>
+                    <div className="flex flex-column gap-1">
+                        <div className="flex gap-1">
                             <Column fullWidth className="body-image bot">
-                                <LayoutAvatarImageView figure={ avatarInfo.figure } direction={ 4 } />
+                                <LayoutAvatarImageView direction={ 4 } figure={ avatarInfo.figure } />
                             </Column>
-                            <Column grow center gap={ 0 }>
+                            <Column center grow gap={ 0 }>
                                 { (avatarInfo.badges.length > 0) && avatarInfo.badges.map(result =>
                                 {
                                     return <LayoutBadgeImageView key={ result } badgeCode={ result } showInfo={ true } />;
                                 }) }
                             </Column>
-                        </Flex>
+                        </div>
                         <hr className="m-0" />
-                    </Column>
-                    <Column gap={ 1 }>
+                    </div>
+                    <div className="flex flex-column gap-1">
                         <Flex alignItems="center" className="bg-light-dark rounded py-1 px-2">
-                            <Text fullWidth wrap textBreak variant="white" small className="motto-content">{ avatarInfo.motto }</Text>
+                            <Text fullWidth small textBreak wrap className="motto-content" variant="white">{ avatarInfo.motto }</Text>
                         </Flex>
                         <hr className="m-0" />
-                    </Column>
-                    <Column gap={ 1 }>
-                        <Flex alignItems="center" gap={ 1 }>
+                    </div>
+                    <div className="flex flex-column gap-1">
+                        <div className="flex items-center gap-1">
                             <UserProfileIconView userId={ avatarInfo.ownerId } />
-                            <Text variant="white" small wrap>
+                            <Text small wrap variant="white">
                                 { LocalizeText('infostand.text.botowner', [ 'name' ], [ avatarInfo.ownerName ]) }
                             </Text>
-                        </Flex>
+                        </div>
                         { (avatarInfo.carryItem > 0) &&
                             <>
                                 <hr className="m-0" />
-                                <Text variant="white" small wrap>
+                                <Text small wrap variant="white">
                                     { LocalizeText('infostand.text.handitem', [ 'item' ], [ LocalizeText('handitem' + avatarInfo.carryItem) ]) }
                                 </Text>
                             </> }
-                    </Column>
-                </Column>
-            </Column>
+                    </div>
+                </div>
+            </div>
             { canPickup &&
-                <Flex justifyContent="end">
+                <div className="flex justify-content-end">
                     <Button variant="dark" onClick={ pickupBot }>{ LocalizeText('infostand.button.pickup') }</Button>
-                </Flex> }
-        </Column>
+                </div> }
+        </div>
     );
 }
diff --git a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserRelationshipItemView.tsx b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserRelationshipItemView.tsx
index 95911931..32c9a1c7 100644
--- a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserRelationshipItemView.tsx
+++ b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserRelationshipItemView.tsx
@@ -18,7 +18,7 @@ export const InfoStandWidgetUserRelationshipsRelationshipItemView: FC<InfoStandW
     const relationshipName = RelationshipStatusEnum.RELATIONSHIP_NAMES[type].toLocaleLowerCase();
 
     return (
-        <Flex alignItems="center" gap={ 1 }>
+        <div className="flex items-center gap-1">
             <i className={ `nitro-friends-spritesheet icon-${ relationshipName }` } />
             <Flex alignItems="center" gap={ 0 }>
                 <Text small variant="white" onClick={ event => GetUserProfile(relationship.randomFriendId) }>
@@ -26,6 +26,6 @@ export const InfoStandWidgetUserRelationshipsRelationshipItemView: FC<InfoStandW
                     { (relationship.friendCount > 1) && (' ' + LocalizeText(`extendedprofile.relstatus.others.${ relationshipName }`, [ 'count' ], [ (relationship.friendCount - 1).toString() ])) }
                 </Text>
             </Flex>
-        </Flex>
+        </div>
     );
 }
diff --git a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserRelationshipsView.tsx b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserRelationshipsView.tsx
index bd280ffd..5a3b2b2b 100644
--- a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserRelationshipsView.tsx
+++ b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserRelationshipsView.tsx
@@ -15,9 +15,9 @@ export const InfoStandWidgetUserRelationshipsView: FC<InfoStandWidgetUserRelatio
 
     return (
         <>
-            <InfoStandWidgetUserRelationshipsRelationshipItemView type={ RelationshipStatusEnum.HEART } relationship={ relationships.relationshipStatusMap.getValue(RelationshipStatusEnum.HEART) } />
-            <InfoStandWidgetUserRelationshipsRelationshipItemView type={ RelationshipStatusEnum.SMILE } relationship={ relationships.relationshipStatusMap.getValue(RelationshipStatusEnum.SMILE) } />
-            <InfoStandWidgetUserRelationshipsRelationshipItemView type={ RelationshipStatusEnum.BOBBA } relationship={ relationships.relationshipStatusMap.getValue(RelationshipStatusEnum.BOBBA) } />
+            <InfoStandWidgetUserRelationshipsRelationshipItemView relationship={ relationships.relationshipStatusMap.getValue(RelationshipStatusEnum.HEART) } type={ RelationshipStatusEnum.HEART } />
+            <InfoStandWidgetUserRelationshipsRelationshipItemView relationship={ relationships.relationshipStatusMap.getValue(RelationshipStatusEnum.SMILE) } type={ RelationshipStatusEnum.SMILE } />
+            <InfoStandWidgetUserRelationshipsRelationshipItemView relationship={ relationships.relationshipStatusMap.getValue(RelationshipStatusEnum.BOBBA) } type={ RelationshipStatusEnum.BOBBA } />
         </>
     );
 }
diff --git a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserTagsView.tsx b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserTagsView.tsx
index 84c30aee..00782e88 100644
--- a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserTagsView.tsx
+++ b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserTagsView.tsx
@@ -24,7 +24,7 @@ export const InfoStandWidgetUserTagsView: FC<InfoStandWidgetUserTagsViewProps> =
         <>
             <hr className="m-0" />
             <Flex className="flex-tags">
-                { tags && (tags.length > 0) && tags.map((tag, index) => <Text key={ index } variant="white" className="text-tags" onClick={ event => processAction(tag) }>{ tag }</Text>) }
+                { tags && (tags.length > 0) && tags.map((tag, index) => <Text key={ index } className="text-tags" variant="white" onClick={ event => processAction(tag) }>{ tag }</Text>) }
             </Flex>
         </>
     );
diff --git a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx
index b71d3cea..75a28c19 100644
--- a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx
+++ b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx
@@ -124,91 +124,90 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
 
     return (
         <Column className="nitro-infostand rounded">
-            <Column overflow="visible" className="container-fluid content-area" gap={ 1 }>
-                <Column gap={ 1 }>
-                    <Flex alignItems="center" justifyContent="between">
-                        <Flex alignItems="center" gap={ 1 }>
+            <Column className="container-fluid content-area" gap={ 1 } overflow="visible">
+                <div className="flex flex-column gap-1">
+                    <div className="flex items-center justify-content-between">
+                        <div className="flex items-center gap-1">
                             <UserProfileIconView userId={ avatarInfo.webID } />
-                            <Text variant="white" small wrap>{ avatarInfo.name }</Text>
-                        </Flex>
+                            <Text small wrap variant="white">{ avatarInfo.name }</Text>
+                        </div>
                         <FaTimes className="cursor-pointer fa-icon" onClick={ onClose } />
-                    </Flex>
+                    </div>
                     <hr className="m-0" />
-                </Column>
-                <Column gap={ 1 }>
-                    <Flex gap={ 1 }>
+                </div>
+                <div className="flex flex-column gap-1">
+                    <div className="flex gap-1">
                         <Column fullWidth className="body-image" onClick={ event => GetUserProfile(avatarInfo.webID) }>
-                            <LayoutAvatarImageView figure={ avatarInfo.figure } direction={ 4 } />
+                            <LayoutAvatarImageView direction={ 4 } figure={ avatarInfo.figure } />
                         </Column>
                         <Column grow alignItems="center" gap={ 0 }>
-                            <Flex gap={ 1 }>
-                                <Flex center className="badge-image">
+                            <div className="flex gap-1">
+                                <div className="flex items-center justify-center badge-image">
                                     { avatarInfo.badges[0] && <LayoutBadgeImageView badgeCode={ avatarInfo.badges[0] } showInfo={ true } /> }
-                                </Flex>
-                                <Flex center pointer={ ( avatarInfo.groupId > 0) } className="badge-image" onClick={ event => GetGroupInformation(avatarInfo.groupId) }>
+                                </div>
+                                <Flex center className="badge-image" pointer={ ( avatarInfo.groupId > 0) } onClick={ event => GetGroupInformation(avatarInfo.groupId) }>
                                     { avatarInfo.groupId > 0 &&
-                                        <LayoutBadgeImageView badgeCode={ avatarInfo.groupBadgeId } isGroup={ true } showInfo={ true } customTitle={ avatarInfo.groupName } /> }
+                                        <LayoutBadgeImageView badgeCode={ avatarInfo.groupBadgeId } customTitle={ avatarInfo.groupName } isGroup={ true } showInfo={ true } /> }
                                 </Flex>
-                            </Flex>
+                            </div>
                             <Flex center gap={ 1 }>
-                                <Flex center className="badge-image">
+                                <div className="flex items-center justify-center badge-image">
                                     { avatarInfo.badges[1] && <LayoutBadgeImageView badgeCode={ avatarInfo.badges[1] } showInfo={ true } /> }
-                                </Flex>
-                                <Flex center className="badge-image">
+                                </div>
+                                <div className="flex items-center justify-center badge-image">
                                     { avatarInfo.badges[2] && <LayoutBadgeImageView badgeCode={ avatarInfo.badges[2] } showInfo={ true } /> }
-                                </Flex>
+                                </div>
                             </Flex>
                             <Flex center gap={ 1 }>
-                                <Flex center className="badge-image">
+                                <div className="flex items-center justify-center badge-image">
                                     { avatarInfo.badges[3] && <LayoutBadgeImageView badgeCode={ avatarInfo.badges[3] } showInfo={ true } /> }
-                                </Flex>
-                                <Flex center className="badge-image">
+                                </div>
+                                <div className="flex items-center justify-center badge-image">
                                     { avatarInfo.badges[4] && <LayoutBadgeImageView badgeCode={ avatarInfo.badges[4] } showInfo={ true } /> }
-                                </Flex>
+                                </div>
                             </Flex>
                         </Column>
-                    </Flex>
+                    </div>
                     <hr className="m-0" />
-                </Column>
-                <Column gap={ 1 }>
+                </div>
+                <div className="flex flex-column gap-1">
                     <Flex alignItems="center" className="bg-light-dark rounded py-1 px-2">
                         { (avatarInfo.type !== AvatarInfoUser.OWN_USER) &&
                             <Flex grow alignItems="center" className="motto-content">
-                                <Text fullWidth pointer wrap textBreak small variant="white">{ motto }</Text>
+                                <Text fullWidth pointer small textBreak wrap variant="white">{ motto }</Text>
                             </Flex> }
                         { avatarInfo.type === AvatarInfoUser.OWN_USER &&
                             <Flex grow alignItems="center" gap={ 2 }>
                                 <FaPencilAlt className="small fa-icon" />
                                 <Flex grow alignItems="center" className="motto-content">
                                     { !isEditingMotto &&
-                                        <Text fullWidth pointer wrap textBreak small variant="white" onClick={ event => setIsEditingMotto(true) }>{ motto }&nbsp;</Text> }
+                                        <Text fullWidth pointer small textBreak wrap variant="white" onClick={ event => setIsEditingMotto(true) }>{ motto }&nbsp;</Text> }
                                     { isEditingMotto &&
-                                        <input type="text" className="motto-input" maxLength={ GetConfigurationValue<number>('motto.max.length', 38) } value={ motto } onChange={ event => setMotto(event.target.value) } onBlur={ onMottoBlur } onKeyDown={ onMottoKeyDown } autoFocus={ true } /> }
+                                        <input autoFocus={ true } className="motto-input" maxLength={ GetConfigurationValue<number>('motto.max.length', 38) } type="text" value={ motto } onBlur={ onMottoBlur } onChange={ event => setMotto(event.target.value) } onKeyDown={ onMottoKeyDown } /> }
                                 </Flex>
                             </Flex> }
                     </Flex>
                     <hr className="m-0" />
-                </Column>
-                <Column gap={ 1 }>
-                    <Text variant="white" small wrap>
+                </div>
+                <div className="flex flex-column gap-1">
+                    <Text small wrap variant="white">
                         { LocalizeText('infostand.text.achievement_score') + ' ' + avatarInfo.achievementScore }
                     </Text>
                     { (avatarInfo.carryItem > 0) &&
                         <>
                             <hr className="m-0" />
-                            <Text variant="white" small wrap>
+                            <Text small wrap variant="white">
                                 { LocalizeText('infostand.text.handitem', [ 'item' ], [ LocalizeText('handitem' + avatarInfo.carryItem) ]) }
                             </Text>
                         </> }
-                </Column>
-                <Column gap={ 1 }>
+                </div>
+                <div className="flex flex-column gap-1">
                     <InfoStandWidgetUserRelationshipsView relationships={ relationships } />
-                </Column>
+                </div>
                 { GetConfigurationValue('user.tags.enabled') &&
-                    <Column gap={ 1 } className="mt-1">
+                    <Column className="mt-1" gap={ 1 }>
                         <InfoStandWidgetUserTagsView tags={ GetSessionDataManager().tags } />
-                    </Column>
-                }
+                    </Column> }
             </Column>
         </Column>
     );
diff --git a/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetAvatarView.tsx b/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetAvatarView.tsx
index d16240b1..eff80809 100644
--- a/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetAvatarView.tsx
+++ b/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetAvatarView.tsx
@@ -2,7 +2,7 @@ import { CreateLinkEvent, GetSessionDataManager, RoomControllerLevel, RoomObject
 import { FC, useEffect, useMemo, useState } from 'react';
 import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
 import { AvatarInfoUser, DispatchUiEvent, GetOwnRoomObject, GetUserProfile, LocalizeText, MessengerFriend, ReportType, RoomWidgetUpdateChatInputContentEvent, SendMessageComposer } from '../../../../../api';
-import { Base, Flex } from '../../../../../common';
+import { Flex } from '../../../../../common';
 import { useFriends, useHelp, useRoom, useSessionInfo } from '../../../../../hooks';
 import { ContextMenuHeaderView } from '../../context-menu/ContextMenuHeaderView';
 import { ContextMenuListItemView } from '../../context-menu/ContextMenuListItemView';
@@ -202,7 +202,7 @@ export const AvatarInfoWidgetAvatarView: FC<AvatarInfoWidgetAvatarViewProps> = p
     }, [ avatarInfo ]);
 
     return (
-        <ContextMenuView objectId={ avatarInfo.roomIndex } category={ RoomObjectCategory.UNIT } userType={ avatarInfo.userType } onClose={ onClose } collapsable={ true }>
+        <ContextMenuView category={ RoomObjectCategory.UNIT } collapsable={ true } objectId={ avatarInfo.roomIndex } userType={ avatarInfo.userType } onClose={ onClose }>
             <ContextMenuHeaderView className="cursor-pointer" onClick={ event => GetUserProfile(avatarInfo.webID) }>
                 { avatarInfo.name }
             </ContextMenuHeaderView>
@@ -350,13 +350,13 @@ export const AvatarInfoWidgetAvatarView: FC<AvatarInfoWidgetAvatarViewProps> = p
                 <>
                     <Flex className="menu-list-split-3">
                         <ContextMenuListItemView onClick={ event => processAction('rship_heart') }>
-                            <Base pointer className="nitro-friends-spritesheet icon-heart" />
+                            <div className="nitro-friends-spritesheet icon-heart cursor-pointer" />
                         </ContextMenuListItemView>
                         <ContextMenuListItemView onClick={ event => processAction('rship_smile') }>
-                            <Base pointer className="nitro-friends-spritesheet icon-smile" />
+                            <div className="nitro-friends-spritesheet icon-smile cursor-pointer" />
                         </ContextMenuListItemView>
                         <ContextMenuListItemView onClick={ event => processAction('rship_bobba') }>
-                            <Base pointer className="nitro-friends-spritesheet icon-bobba" />
+                            <div className="nitro-friends-spritesheet icon-bobba cursor-pointer" />
                         </ContextMenuListItemView>
                     </Flex>
                     <ContextMenuListItemView onClick={ event => processAction('rship_none') }>
diff --git a/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetDecorateView.tsx b/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetDecorateView.tsx
index 5ad5a680..f446bc93 100644
--- a/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetDecorateView.tsx
+++ b/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetDecorateView.tsx
@@ -18,7 +18,7 @@ export const AvatarInfoWidgetDecorateView: FC<AvatarInfoWidgetDecorateViewProps>
     const { userId = -1, userName = '', roomIndex = -1, setIsDecorating = null } = props;
     
     return (
-        <ContextMenuView objectId={ roomIndex } category={ RoomObjectCategory.UNIT } onClose={ null }>
+        <ContextMenuView category={ RoomObjectCategory.UNIT } objectId={ roomIndex } onClose={ null }>
             <ContextMenuListView>
                 <ContextMenuListItemView onClick={ event => setIsDecorating(false) }>
                     { LocalizeText('widget.avatar.stop_decorating') }
diff --git a/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetFurniView.tsx b/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetFurniView.tsx
index 4dcf4b58..72a4a4a8 100644
--- a/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetFurniView.tsx
+++ b/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetFurniView.tsx
@@ -2,7 +2,6 @@ import { RoomControllerLevel, RoomObjectOperationType } from '@nitrots/nitro-ren
 import { FC } from 'react';
 import { FaArrowsAlt, FaSyncAlt, FaTrashRestore } from 'react-icons/fa';
 import { AvatarInfoFurni, ProcessRoomObjectOperation } from '../../../../../api';
-import { Flex } from '../../../../../common';
 import { ContextMenuHeaderView } from '../../context-menu/ContextMenuHeaderView';
 import { ContextMenuListItemView } from '../../context-menu/ContextMenuListItemView';
 import { ContextMenuView } from '../../context-menu/ContextMenuView';
@@ -42,15 +41,15 @@ export const AvatarInfoWidgetFurniView: FC<AvatarInfoWidgetFurniViewProps> = pro
     }
 
     return (
-        <ContextMenuView objectId={ avatarInfo.id } category={ avatarInfo.category } onClose={ onClose } collapsable={ true }>
+        <ContextMenuView category={ avatarInfo.category } collapsable={ true } objectId={ avatarInfo.id } onClose={ onClose }>
             <ContextMenuHeaderView>
                 { avatarInfo.name }
             </ContextMenuHeaderView>
-            <Flex className="menu-list-split-3">
+            <div className="flex menu-list-split-3">
                 <ContextMenuListItemView onClick={ event => processAction('move') }>
                     <FaArrowsAlt className="center fa-icon" />
                 </ContextMenuListItemView>
-                <ContextMenuListItemView onClick={ event => processAction('rotate') } disabled={ avatarInfo.isWallItem }>
+                <ContextMenuListItemView disabled={ avatarInfo.isWallItem } onClick={ event => processAction('rotate') }>
                     <FaSyncAlt className="center fa-icon" />
                 </ContextMenuListItemView>
                 { (avatarInfo.isOwner || avatarInfo.isAnyRoomController) &&
@@ -61,7 +60,7 @@ export const AvatarInfoWidgetFurniView: FC<AvatarInfoWidgetFurniViewProps> = pro
                     <ContextMenuListItemView onClick={ event => processAction('eject') }>
                         <FaTrashRestore className="center fa-icon" />
                     </ContextMenuListItemView> }
-            </Flex>
+            </div>
         </ContextMenuView>
     );
 }
diff --git a/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetNameView.tsx b/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetNameView.tsx
index a3d7e939..30636dff 100644
--- a/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetNameView.tsx
+++ b/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetNameView.tsx
@@ -23,7 +23,7 @@ export const AvatarInfoWidgetNameView: FC<AvatarInfoWidgetNameViewProps> = props
     }, [ nameInfo ]);
 
     return (
-        <ContextMenuView objectId={ nameInfo.roomIndex } category={ nameInfo.category } userType={ nameInfo.userType } fades={ (nameInfo.id !== GetSessionDataManager().userId) } classNames={ getClassNames } onClose={ onClose }>
+        <ContextMenuView category={ nameInfo.category } classNames={ getClassNames } fades={ (nameInfo.id !== GetSessionDataManager().userId) } objectId={ nameInfo.roomIndex } userType={ nameInfo.userType } onClose={ onClose }>
             <div className="text-shadow">
                 { nameInfo.name }
             </div>
diff --git a/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetOwnAvatarView.tsx b/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetOwnAvatarView.tsx
index 78ee76eb..5f07810d 100644
--- a/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetOwnAvatarView.tsx
+++ b/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetOwnAvatarView.tsx
@@ -2,7 +2,7 @@ import { AvatarAction, AvatarExpressionEnum, CreateLinkEvent, RoomControllerLeve
 import { Dispatch, FC, SetStateAction, useState } from 'react';
 import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
 import { AvatarInfoUser, DispatchUiEvent, GetCanStandUp, GetCanUseExpression, GetOwnPosture, GetUserProfile, HasHabboClub, HasHabboVip, IsRidingHorse, LocalizeText, PostureTypeEnum, SendMessageComposer } from '../../../../../api';
-import { Flex, LayoutCurrencyIcon } from '../../../../../common';
+import { LayoutCurrencyIcon } from '../../../../../common';
 import { HelpNameChangeEvent } from '../../../../../events';
 import { useRoom } from '../../../../../hooks';
 import { ContextMenuHeaderView } from '../../context-menu/ContextMenuHeaderView';
@@ -115,7 +115,7 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
     const isRidingHorse = IsRidingHorse();
 
     return (
-        <ContextMenuView objectId={ avatarInfo.roomIndex } category={ RoomObjectCategory.UNIT } userType={ avatarInfo.userType } onClose={ onClose } collapsable={ true }>
+        <ContextMenuView category={ RoomObjectCategory.UNIT } collapsable={ true } objectId={ avatarInfo.roomIndex } userType={ avatarInfo.userType } onClose={ onClose }>
             
             <ContextMenuHeaderView className="cursor-pointer" onClick={ event => GetUserProfile(avatarInfo.webID) }>
                 { avatarInfo.name }
@@ -216,7 +216,7 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
                 </> }
             { (mode === MODE_SIGNS) &&
                 <>
-                    <Flex className="menu-list-split-3">
+                    <div className="flex menu-list-split-3">
                         <ContextMenuListItemView onClick={ event => processAction('sign_1') }>
                             1
                         </ContextMenuListItemView>
@@ -226,8 +226,8 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
                         <ContextMenuListItemView onClick={ event => processAction('sign_3') }>
                             3
                         </ContextMenuListItemView>
-                    </Flex>
-                    <Flex className="menu-list-split-3">
+                    </div>
+                    <div className="flex menu-list-split-3">
                         <ContextMenuListItemView onClick={ event => processAction('sign_4') }>
                             4
                         </ContextMenuListItemView>
@@ -237,8 +237,8 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
                         <ContextMenuListItemView onClick={ event => processAction('sign_6') }>
                             6
                         </ContextMenuListItemView>
-                    </Flex>
-                    <Flex className="menu-list-split-3">
+                    </div>
+                    <div className="flex menu-list-split-3">
                         <ContextMenuListItemView onClick={ event => processAction('sign_7') }>
                             7
                         </ContextMenuListItemView>
@@ -248,8 +248,8 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
                         <ContextMenuListItemView onClick={ event => processAction('sign_9') }>
                             9
                         </ContextMenuListItemView>
-                    </Flex>
-                    <Flex className="menu-list-split-3">
+                    </div>
+                    <div className="flex menu-list-split-3">
                         <ContextMenuListItemView onClick={ event => processAction('sign_10') }>
                             10
                         </ContextMenuListItemView>
@@ -259,8 +259,8 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
                         <ContextMenuListItemView onClick={ event => processAction('sign_12') }>
                             <i className="icon icon-sign-skull" />
                         </ContextMenuListItemView>
-                    </Flex>
-                    <Flex className="menu-list-split-3">
+                    </div>
+                    <div className="flex menu-list-split-3">
                         <ContextMenuListItemView onClick={ event => processAction('sign_0') }>
                             0
                         </ContextMenuListItemView>
@@ -270,8 +270,8 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
                         <ContextMenuListItemView onClick={ event => processAction('sign_15') }>
                             <i className="icon icon-sign-smile" />
                         </ContextMenuListItemView>
-                    </Flex>
-                    <Flex className="menu-list-split-3">
+                    </div>
+                    <div className="flex menu-list-split-3">
                         <ContextMenuListItemView onClick={ event => processAction('sign_14') }>
                             <i className="icon icon-sign-soccer" />
                         </ContextMenuListItemView>
@@ -281,7 +281,7 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
                         <ContextMenuListItemView onClick={ event => processAction('sign_16') }>
                             <i className="icon icon-sign-red" />
                         </ContextMenuListItemView>
-                    </Flex>
+                    </div>
                     <ContextMenuListItemView onClick={ event => processAction('back') }>
                         <FaChevronLeft className="left fa-icon" />
                         { LocalizeText('generic.back') }
diff --git a/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetOwnPetView.tsx b/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetOwnPetView.tsx
index 86a76202..02e7bd28 100644
--- a/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetOwnPetView.tsx
+++ b/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetOwnPetView.tsx
@@ -125,7 +125,7 @@ export const AvatarInfoWidgetOwnPetView: FC<AvatarInfoWidgetOwnPetViewProps> = p
     }, [ avatarInfo ]);
 
     return (
-        <ContextMenuView objectId={ avatarInfo.roomIndex } category={ RoomObjectCategory.UNIT } userType={ RoomObjectType.PET } onClose={ onClose } collapsable={ true }>
+        <ContextMenuView category={ RoomObjectCategory.UNIT } collapsable={ true } objectId={ avatarInfo.roomIndex } userType={ RoomObjectType.PET } onClose={ onClose }>
             <ContextMenuHeaderView>
                 { avatarInfo.name }
             </ContextMenuHeaderView>
@@ -155,8 +155,8 @@ export const AvatarInfoWidgetOwnPetView: FC<AvatarInfoWidgetOwnPetViewProps> = p
                     <ContextMenuListItemView onClick={ event => processAction('mount') }>
                         { LocalizeText('infostand.button.mount') }
                     </ContextMenuListItemView>
-                    <ContextMenuListItemView onClick={ event => processAction('toggle_riding_permission') } gap={ 1 }>
-                        <input type="checkbox" checked={ !!avatarInfo.publiclyRideable } readOnly={ true } />
+                    <ContextMenuListItemView gap={ 1 } onClick={ event => processAction('toggle_riding_permission') }>
+                        <input checked={ !!avatarInfo.publiclyRideable } readOnly={ true } type="checkbox" />
                         { LocalizeText('infostand.button.toggle_riding_permission') }
                     </ContextMenuListItemView>
                     { (petRespectRemaining > 0) &&
@@ -202,8 +202,8 @@ export const AvatarInfoWidgetOwnPetView: FC<AvatarInfoWidgetOwnPetViewProps> = p
                         </ContextMenuListItemView> }
                     { !avatarInfo.dead && (avatarInfo.level === avatarInfo.maximumLevel) && avatarInfo.breedable &&
                         <>
-                            <ContextMenuListItemView onClick={ event => processAction('toggle_breeding_permission') } gap={ 1 }>
-                                <input type="checkbox" checked={ avatarInfo.publiclyBreedable } readOnly={ true } />
+                            <ContextMenuListItemView gap={ 1 } onClick={ event => processAction('toggle_breeding_permission') }>
+                                <input checked={ avatarInfo.publiclyBreedable } readOnly={ true } type="checkbox" />
                                 { LocalizeText('infostand.button.toggle_breeding_permission') }
                             </ContextMenuListItemView>
                             <ContextMenuListItemView onClick={ event => processAction('breed') }>
diff --git a/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetPetView.tsx b/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetPetView.tsx
index ba13826d..6caad19d 100644
--- a/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetPetView.tsx
+++ b/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetPetView.tsx
@@ -92,7 +92,7 @@ export const AvatarInfoWidgetPetView: FC<AvatarInfoWidgetPetViewProps> = props =
     }, [ avatarInfo ]);
 
     return (
-        <ContextMenuView objectId={ avatarInfo.roomIndex } category={ RoomObjectCategory.UNIT } userType={ RoomObjectType.PET } onClose={ onClose } collapsable={ true }>
+        <ContextMenuView category={ RoomObjectCategory.UNIT } collapsable={ true } objectId={ avatarInfo.roomIndex } userType={ RoomObjectType.PET } onClose={ onClose }>
             <ContextMenuHeaderView>
                 { avatarInfo.name }
             </ContextMenuHeaderView>
diff --git a/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetRentableBotView.tsx b/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetRentableBotView.tsx
index 3ad90def..a272c58e 100644
--- a/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetRentableBotView.tsx
+++ b/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetRentableBotView.tsx
@@ -1,7 +1,7 @@
 import { BotCommandConfigurationEvent, BotRemoveComposer, BotSkillSaveComposer, CreateLinkEvent, RequestBotCommandConfigurationComposer, RoomObjectCategory, RoomObjectType } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { AvatarInfoRentableBot, BotSkillsEnum, DispatchUiEvent, GetConfigurationValue, LocalizeText, RoomWidgetUpdateRentableBotChatEvent, SendMessageComposer } from '../../../../../api';
-import { Button, Column, Flex, Text } from '../../../../../common';
+import { Button, Column, Text } from '../../../../../common';
 import { useMessageEvent } from '../../../../../hooks';
 import { ContextMenuHeaderView } from '../../context-menu/ContextMenuHeaderView';
 import { ContextMenuListItemView } from '../../context-menu/ContextMenuListItemView';
@@ -131,7 +131,7 @@ export const AvatarInfoWidgetRentableBotView: FC<AvatarInfoWidgetRentableBotView
     const canControl = (avatarInfo.amIOwner || avatarInfo.amIAnyRoomController);
 
     return (
-        <ContextMenuView objectId={ avatarInfo.roomIndex } category={ RoomObjectCategory.UNIT } userType={ RoomObjectType.RENTABLE_BOT } onClose={ onClose } collapsable={ true }>
+        <ContextMenuView category={ RoomObjectCategory.UNIT } collapsable={ true } objectId={ avatarInfo.roomIndex } userType={ RoomObjectType.RENTABLE_BOT } onClose={ onClose }>
             <ContextMenuHeaderView>
                 { avatarInfo.name }
             </ContextMenuHeaderView>
@@ -175,22 +175,22 @@ export const AvatarInfoWidgetRentableBotView: FC<AvatarInfoWidgetRentableBotView
                         </ContextMenuListItemView> }
                 </> }
             { (mode === MODE_CHANGE_NAME) &&
-                <Column className="menu-item" onClick={ null } gap={ 1 }>
+                <Column className="menu-item" gap={ 1 } onClick={ null }>
                     <Text variant="white">{ LocalizeText('bot.skill.name.configuration.new.name') }</Text>
-                    <input type="text" className="form-control form-control-sm" value={ newName } maxLength={ GetConfigurationValue<number>('bot.name.max.length', 15) } onChange={ event => setNewName(event.target.value) } />
-                    <Flex alignItems="center" justifyContent="between" gap={ 1 }>
+                    <input className="form-control form-control-sm" maxLength={ GetConfigurationValue<number>('bot.name.max.length', 15) } type="text" value={ newName } onChange={ event => setNewName(event.target.value) } />
+                    <div className="flex items-center gap-1 justify-content-between">
                         <Button fullWidth variant="secondary" onClick={ event => processAction(null) }>{ LocalizeText('cancel') }</Button>
                         <Button fullWidth variant="success" onClick={ event => processAction('save_bot_name') }>{ LocalizeText('save') }</Button>
-                    </Flex>
+                    </div>
                 </Column> }
             { (mode === MODE_CHANGE_MOTTO) &&
-                <Column className="menu-item" onClick={ null } gap={ 1 }>
+                <Column className="menu-item" gap={ 1 } onClick={ null }>
                     <Text variant="white">{ LocalizeText('bot.skill.name.configuration.new.motto') }</Text>
-                    <input type="text" className="form-control form-control-sm" value={ newMotto } maxLength={ GetConfigurationValue<number>('motto.max.length', 38) } onChange={ event => setNewMotto(event.target.value) } />
-                    <Flex alignItems="center" justifyContent="between" gap={ 1 }>
+                    <input className="form-control form-control-sm" maxLength={ GetConfigurationValue<number>('motto.max.length', 38) } type="text" value={ newMotto } onChange={ event => setNewMotto(event.target.value) } />
+                    <div className="flex items-center gap-1 justify-content-between">
                         <Button fullWidth variant="secondary" onClick={ event => processAction(null) }>{ LocalizeText('cancel') }</Button>
                         <Button fullWidth variant="success" onClick={ event => processAction('save_bot_motto') }>{ LocalizeText('save') }</Button>
-                    </Flex>
+                    </div>
                 </Column> }
         </ContextMenuView>
     );
diff --git a/src/components/room/widgets/chat-input/ChatInputStyleSelectorView.tsx b/src/components/room/widgets/chat-input/ChatInputStyleSelectorView.tsx
index f5cbbe50..50fe8238 100644
--- a/src/components/room/widgets/chat-input/ChatInputStyleSelectorView.tsx
+++ b/src/components/room/widgets/chat-input/ChatInputStyleSelectorView.tsx
@@ -1,6 +1,6 @@
 import { FC, MouseEvent, useEffect, useState } from 'react';
 import { Overlay, Popover } from 'react-bootstrap';
-import { Base, Flex, Grid, NitroCardContentView } from '../../../../common';
+import { Flex, Grid, NitroCardContentView } from '../../../../common';
 
 interface ChatInputStyleSelectorViewProps
 {
@@ -44,18 +44,18 @@ export const ChatInputStyleSelectorView: FC<ChatInputStyleSelectorViewProps> = p
 
     return (
         <>
-            <Base pointer className="icon chatstyles-icon" onClick={ toggleSelector } />
-            <Overlay show={ selectorVisible } target={ target } placement="top">
+            <div className="icon chatstyles-icon cursor-pointer" onClick={ toggleSelector } />
+            <Overlay placement="top" show={ selectorVisible } target={ target }>
                 <Popover className="nitro-chat-style-selector-container image-rendering-pixelated">
-                    <NitroCardContentView overflow="hidden" className="bg-transparent">
+                    <NitroCardContentView className="bg-transparent" overflow="hidden">
                         <Grid columnCount={ 3 } overflow="auto">
                             { chatStyleIds && (chatStyleIds.length > 0) && chatStyleIds.map((styleId) =>
                             {
                                 return (
-                                    <Flex center pointer key={ styleId } className="bubble-parent-container" onClick={ event => selectStyle(styleId) }>
-                                        <Base key={ styleId } className="bubble-container">
-                                            <Base className={ `chat-bubble bubble-${ styleId }` }>&nbsp;</Base>
-                                        </Base>
+                                    <Flex key={ styleId } center pointer className="bubble-parent-container" onClick={ event => selectStyle(styleId) }>
+                                        <div key={ styleId } className="bubble-container">
+                                            <div className={ `chat-bubble bubble-${ styleId }` }>&nbsp;</div>
+                                        </div>
                                     </Flex>
                                 );
                             }) }
diff --git a/src/components/room/widgets/chat-input/ChatInputView.tsx b/src/components/room/widgets/chat-input/ChatInputView.tsx
index 8f66b2d3..8c26d4d7 100644
--- a/src/components/room/widgets/chat-input/ChatInputView.tsx
+++ b/src/components/room/widgets/chat-input/ChatInputView.tsx
@@ -236,9 +236,9 @@ export const ChatInputView: FC<{}> = props =>
     return (
         createPortal(
             <div className="nitro-chat-input-container">
-                <div className="input-sizer align-items-center">
+                <div className="input-sizer items-center">
                     { !floodBlocked &&
-                    <input ref={ inputRef } type="text" className="chat-input" placeholder={ LocalizeText('widgets.chatinput.default') } value={ chatValue } maxLength={ maxChatLength } onChange={ event => updateChatInput(event.target.value) } onMouseDown={ event => setInputFocus() } /> }
+                    <input ref={ inputRef } className="chat-input" maxLength={ maxChatLength } placeholder={ LocalizeText('widgets.chatinput.default') } type="text" value={ chatValue } onChange={ event => updateChatInput(event.target.value) } onMouseDown={ event => setInputFocus() } /> }
                     { floodBlocked &&
                     <Text variant="danger">{ LocalizeText('chat.input.alert.flood', [ 'time' ], [ floodBlockedSeconds.toString() ]) } </Text> }
                 </div>
diff --git a/src/components/room/widgets/chat/ChatWidgetView.tsx b/src/components/room/widgets/chat/ChatWidgetView.tsx
index ecb45914..01ffdd4b 100644
--- a/src/components/room/widgets/chat/ChatWidgetView.tsx
+++ b/src/components/room/widgets/chat/ChatWidgetView.tsx
@@ -156,7 +156,7 @@ export const ChatWidgetView: FC<{}> = props =>
 
     return (
         <div ref={ elementRef } className="nitro-chat-widget">
-            { chatMessages.map(chat => <ChatWidgetMessageView key={ chat.id } chat={ chat } makeRoom={ makeRoom } bubbleWidth={ chatSettings.weight } />) }
+            { chatMessages.map(chat => <ChatWidgetMessageView key={ chat.id } bubbleWidth={ chatSettings.weight } chat={ chat } makeRoom={ makeRoom } />) }
         </div>
     );
 }
diff --git a/src/components/room/widgets/choosers/ChooserWidgetView.tsx b/src/components/room/widgets/choosers/ChooserWidgetView.tsx
index ae6fabf0..2b4eedb2 100644
--- a/src/components/room/widgets/choosers/ChooserWidgetView.tsx
+++ b/src/components/room/widgets/choosers/ChooserWidgetView.tsx
@@ -35,16 +35,16 @@ export const ChooserWidgetView: FC<ChooserWidgetViewProps> = props =>
     return (
         <NitroCardView className="nitro-chooser-widget" theme="primary-slim">
             <NitroCardHeaderView headerText={ title } onCloseClick={ onClose } />
-            <NitroCardContentView overflow="hidden" gap={ 2 }>
-                <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } value={ searchValue } onChange={ event => setSearchValue(event.target.value) } />
-                <InfiniteScroll rows={ filteredItems } rowRender={ row =>
+            <NitroCardContentView gap={ 2 } overflow="hidden">
+                <input className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } type="text" value={ searchValue } onChange={ event => setSearchValue(event.target.value) } />
+                <InfiniteScroll rowRender={ row =>
                 {
                     return (
-                        <Flex alignItems="center" className={ classNames('rounded p-1', (selectedItem === row) && 'bg-muted') } pointer onClick={ event => setSelectedItem(row) }>
+                        <Flex pointer alignItems="center" className={ classNames('rounded p-1', (selectedItem === row) && 'bg-muted') } onClick={ event => setSelectedItem(row) }>
                             <Text truncate>{ row.name } { canSeeId && (' - ' + row.id) }</Text>
                         </Flex>
                     );
-                } } />
+                } } rows={ filteredItems } />
             </NitroCardContentView>
         </NitroCardView>
     );
diff --git a/src/components/room/widgets/choosers/FurniChooserWidgetView.tsx b/src/components/room/widgets/choosers/FurniChooserWidgetView.tsx
index 725f7006..b3ea85e2 100644
--- a/src/components/room/widgets/choosers/FurniChooserWidgetView.tsx
+++ b/src/components/room/widgets/choosers/FurniChooserWidgetView.tsx
@@ -27,5 +27,5 @@ export const FurniChooserWidgetView: FC<{}> = props =>
     
     if(!items) return null;
 
-    return <ChooserWidgetView title={ LocalizeText('widget.chooser.furni.title') } items={ items } selectItem={ selectItem } onClose={ onClose } />;
+    return <ChooserWidgetView items={ items } selectItem={ selectItem } title={ LocalizeText('widget.chooser.furni.title') } onClose={ onClose } />;
 }
diff --git a/src/components/room/widgets/choosers/UserChooserWidgetView.tsx b/src/components/room/widgets/choosers/UserChooserWidgetView.tsx
index 5483e9e6..5b5b693d 100644
--- a/src/components/room/widgets/choosers/UserChooserWidgetView.tsx
+++ b/src/components/room/widgets/choosers/UserChooserWidgetView.tsx
@@ -27,5 +27,5 @@ export const UserChooserWidgetView: FC<{}> = props =>
     
     if(!items) return null;
 
-    return <ChooserWidgetView title={ LocalizeText('widget.chooser.user.title') } items={ items } selectItem={ selectItem } onClose={ onClose } />;
+    return <ChooserWidgetView items={ items } selectItem={ selectItem } title={ LocalizeText('widget.chooser.user.title') } onClose={ onClose } />;
 }
diff --git a/src/components/room/widgets/context-menu/ContextMenuCaretView.tsx b/src/components/room/widgets/context-menu/ContextMenuCaretView.tsx
index 07a4398f..2dbe80dd 100644
--- a/src/components/room/widgets/context-menu/ContextMenuCaretView.tsx
+++ b/src/components/room/widgets/context-menu/ContextMenuCaretView.tsx
@@ -19,7 +19,7 @@ export const ContextMenuCaretView: FC<CaretViewProps> = props =>
         return newClassNames;
     }, [ classNames ]);
 
-    return <Flex justifyContent={ justifyContent } alignItems={ alignItems } classNames={ getClassNames } { ...rest }>
+    return <Flex alignItems={ alignItems } classNames={ getClassNames } justifyContent={ justifyContent } { ...rest }>
         { !collapsed && <FaCaretDown className="fa-icon align-self-center" /> }
         { collapsed && <FaCaretUp className="fa-icon align-self-center" /> }
     </Flex>
diff --git a/src/components/room/widgets/context-menu/ContextMenuHeaderView.tsx b/src/components/room/widgets/context-menu/ContextMenuHeaderView.tsx
index db1f5448..8ce00abb 100644
--- a/src/components/room/widgets/context-menu/ContextMenuHeaderView.tsx
+++ b/src/components/room/widgets/context-menu/ContextMenuHeaderView.tsx
@@ -14,5 +14,5 @@ export const ContextMenuHeaderView: FC<FlexProps> = props =>
         return newClassNames;
     }, [ classNames ]);
 
-    return <Flex justifyContent={ justifyContent } alignItems={ alignItems } classNames={ getClassNames } { ...rest } />;
+    return <Flex alignItems={ alignItems } classNames={ getClassNames } justifyContent={ justifyContent } { ...rest } />;
 }
diff --git a/src/components/room/widgets/context-menu/ContextMenuListItemView.tsx b/src/components/room/widgets/context-menu/ContextMenuListItemView.tsx
index 01d3df80..44b6d1b7 100644
--- a/src/components/room/widgets/context-menu/ContextMenuListItemView.tsx
+++ b/src/components/room/widgets/context-menu/ContextMenuListItemView.tsx
@@ -28,5 +28,5 @@ export const ContextMenuListItemView: FC<ContextMenuListItemViewProps> = props =
         return newClassNames;
     }, [ disabled, classNames ]);
 
-    return <Flex fullWidth={ fullWidth } justifyContent={ justifyContent } alignItems={ alignItems } classNames={ getClassNames } onClick={ handleClick } { ...rest } />;
+    return <Flex alignItems={ alignItems } classNames={ getClassNames } fullWidth={ fullWidth } justifyContent={ justifyContent } onClick={ handleClick } { ...rest } />;
 }
diff --git a/src/components/room/widgets/context-menu/ContextMenuView.tsx b/src/components/room/widgets/context-menu/ContextMenuView.tsx
index 1cc91225..f8ad1cd5 100644
--- a/src/components/room/widgets/context-menu/ContextMenuView.tsx
+++ b/src/components/room/widgets/context-menu/ContextMenuView.tsx
@@ -1,7 +1,7 @@
 import { GetStage, GetTicker, NitroRectangle, NitroTicker, RoomObjectType } from '@nitrots/nitro-renderer';
 import { CSSProperties, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { FixedSizeStack, GetRoomObjectBounds, GetRoomObjectScreenLocation, GetRoomSession } from '../../../../api';
-import { Base, BaseProps } from '../../../../common';
+import { BaseProps } from '../../../../common';
 import { ContextMenuCaretView } from './ContextMenuCaretView';
 
 interface ContextMenuViewProps extends BaseProps<HTMLDivElement>
@@ -27,7 +27,7 @@ let FADE_TIME = 1;
 
 export const ContextMenuView: FC<ContextMenuViewProps> = props =>
 {
-    const { objectId = -1, category = -1, userType = -1, fades = false, onClose = null, position = 'absolute', classNames = [], style = {}, children = null, collapsable = false, ...rest } = props;
+    const { objectId = -1, category = -1, userType = -1, fades = false, onClose = null, classNames = [], style = {}, children = null, collapsable = false, ...rest } = props;
     const [ pos, setPos ] = useState<{ x: number, y: number }>({ x: null, y: null });
     const [ opacity, setOpacity ] = useState(1);
     const [ isFading, setIsFading ] = useState(false);
@@ -94,7 +94,7 @@ export const ContextMenuView: FC<ContextMenuViewProps> = props =>
 
     const getClassNames = useMemo(() =>
     {
-        const newClassNames: string[] = [ 'nitro-context-menu' ];
+        const newClassNames: string[] = [ 'nitro-context-menu', 'position-absolute' ];
         
         if (isCollapsed) newClassNames.push('menu-hidden');
 
@@ -163,8 +163,8 @@ export const ContextMenuView: FC<ContextMenuViewProps> = props =>
         FADE_TIME = 1;
     }, []);
     
-    return <Base innerRef={ elementRef } position={ position } classNames={ getClassNames } style={ getStyle } { ...rest }>
+    return <div ref={ elementRef } className={ getClassNames.join(' ') } style={ getStyle } { ...rest }>
         { !(collapsable && COLLAPSED) && children }
-        { collapsable && <ContextMenuCaretView onClick={ () => setIsCollapsed(!isCollapsed) } collapsed={ isCollapsed } /> }
-    </Base>;
+        { collapsable && <ContextMenuCaretView collapsed={ isCollapsed } onClick={ () => setIsCollapsed(!isCollapsed) } /> }
+    </div>;
 }
diff --git a/src/components/room/widgets/doorbell/DoorbellWidgetView.tsx b/src/components/room/widgets/doorbell/DoorbellWidgetView.tsx
index c7d1d216..6e11e73f 100644
--- a/src/components/room/widgets/doorbell/DoorbellWidgetView.tsx
+++ b/src/components/room/widgets/doorbell/DoorbellWidgetView.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../api';
-import { Base, Button, Column, Flex, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
+import { Button, Column, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
 import { useDoorbellWidget } from '../../../../hooks';
 
 export const DoorbellWidgetView: FC<{}> = props =>
@@ -18,29 +18,29 @@ export const DoorbellWidgetView: FC<{}> = props =>
     return (
         <NitroCardView className="nitro-widget-doorbell" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText('navigator.doorbell.title') } onCloseClick={ event => setIsVisible(false) } />
-            <NitroCardContentView overflow="hidden" gap={ 0 }>
+            <NitroCardContentView gap={ 0 } overflow="hidden">
                 <Column gap={ 2 }>
-                    <Grid gap={ 1 } className="text-black fw-bold border-bottom px-1 pb-1">
-                        <Base className="g-col-6">{ LocalizeText('generic.username') }</Base>
-                        <Base className="g-col-6"></Base>
+                    <Grid className="text-black fw-bold border-bottom px-1 pb-1" gap={ 1 }>
+                        <div className="g-col-6">{ LocalizeText('generic.username') }</div>
+                        <div className="g-col-6" />
                     </Grid>
                 </Column>
-                <Column overflow="auto" className="striped-children" gap={ 0 }>
+                <Column className="striped-children" gap={ 0 } overflow="auto">
                     { users && (users.length > 0) && users.map(userName =>
                     {
                         return (
-                            <Grid key={ userName } gap={ 1 } alignItems="center" className="text-black border-bottom p-1">
-                                <Base className="g-col-6">{ userName }</Base>
-                                <Base className="g-col-6">
-                                    <Flex alignItems="center" justifyContent="end" gap={ 1 }>
+                            <Grid key={ userName } alignItems="center" className="text-black border-bottom p-1" gap={ 1 }>
+                                <div className="g-col-6">{ userName }</div>
+                                <div className="g-col-6">
+                                    <div className="flex items-center gap-1 justify-content-end">
                                         <Button variant="success" onClick={ () => answer(userName, true) }>
                                             { LocalizeText('generic.accept') }
                                         </Button>
                                         <Button variant="danger" onClick={ () => answer(userName, false) }>
                                             { LocalizeText('generic.deny') }
                                         </Button>
-                                    </Flex>
-                                </Base>
+                                    </div>
+                                </div>
                             </Grid>
                         );
                     }) }
diff --git a/src/components/room/widgets/friend-request/FriendRequestDialogView.tsx b/src/components/room/widgets/friend-request/FriendRequestDialogView.tsx
index 24385d72..951ae199 100644
--- a/src/components/room/widgets/friend-request/FriendRequestDialogView.tsx
+++ b/src/components/room/widgets/friend-request/FriendRequestDialogView.tsx
@@ -2,7 +2,7 @@ import { RoomObjectCategory } from '@nitrots/nitro-renderer';
 import { FC } from 'react';
 import { FaTimes } from 'react-icons/fa';
 import { LocalizeText, MessengerRequest } from '../../../../api';
-import { Base, Button, Column, Flex, Text } from '../../../../common';
+import { Button, Text } from '../../../../common';
 import { ObjectLocationView } from '../object-location/ObjectLocationView';
 
 export const FriendRequestDialogView: FC<{ roomIndex: number, request: MessengerRequest, hideFriendRequest: (userId: number) => void, requestResponse: (requestId: number, flag: boolean) => void }> = props =>
@@ -10,19 +10,19 @@ export const FriendRequestDialogView: FC<{ roomIndex: number, request: Messenger
     const { roomIndex = -1, request = null, hideFriendRequest = null, requestResponse = null } = props;
 
     return (
-        <ObjectLocationView objectId={ roomIndex } category={ RoomObjectCategory.UNIT }>
-            <Base className="nitro-friend-request-dialog nitro-context-menu p-2">
-                <Column>
-                    <Flex alignItems="center" justifyContent="between" gap={ 2 }>
-                        <Text variant="white" fontSize={ 6 }>{ LocalizeText('widget.friendrequest.from', [ 'username' ], [ request.name ]) }</Text>
+        <ObjectLocationView category={ RoomObjectCategory.UNIT } objectId={ roomIndex }>
+            <div className="nitro-friend-request-dialog nitro-context-menu p-2">
+                <div className="flex flex-column">
+                    <div className="flex items-center gap-2 justify-content-between">
+                        <Text fontSize={ 6 } variant="white">{ LocalizeText('widget.friendrequest.from', [ 'username' ], [ request.name ]) }</Text>
                         <FaTimes className="cursor-pointer fa-icon" onClick={ event => hideFriendRequest(request.requesterUserId) } />
-                    </Flex>
-                    <Flex justifyContent="end" gap={ 1 }>
+                    </div>
+                    <div className="flex justify-content-end gap-1">
                         <Button variant="danger" onClick={ event => requestResponse(request.requesterUserId, false) }>{ LocalizeText('widget.friendrequest.decline') }</Button>
                         <Button variant="success" onClick={ event => requestResponse(request.requesterUserId, true) }>{ LocalizeText('widget.friendrequest.accept') }</Button>
-                    </Flex>
-                </Column>
-            </Base>
+                    </div>
+                </div>
+            </div>
         </ObjectLocationView>
     );
 }
diff --git a/src/components/room/widgets/friend-request/FriendRequestWidgetView.tsx b/src/components/room/widgets/friend-request/FriendRequestWidgetView.tsx
index dfb9663d..c73dcffe 100644
--- a/src/components/room/widgets/friend-request/FriendRequestWidgetView.tsx
+++ b/src/components/room/widgets/friend-request/FriendRequestWidgetView.tsx
@@ -11,7 +11,7 @@ export const FriendRequestWidgetView: FC<{}> = props =>
 
     return (
         <>
-            { displayedRequests.map((request, index) => <FriendRequestDialogView key={ index } roomIndex={ request.roomIndex } request={ request.request } hideFriendRequest={ hideFriendRequest } requestResponse={ requestResponse } />) }
+            { displayedRequests.map((request, index) => <FriendRequestDialogView key={ index } hideFriendRequest={ hideFriendRequest } request={ request.request } requestResponse={ requestResponse } roomIndex={ request.roomIndex } />) }
         </>
     );
 }
diff --git a/src/components/room/widgets/furniture/FurnitureBackgroundColorView.tsx b/src/components/room/widgets/furniture/FurnitureBackgroundColorView.tsx
index df159d50..510a428a 100644
--- a/src/components/room/widgets/furniture/FurnitureBackgroundColorView.tsx
+++ b/src/components/room/widgets/furniture/FurnitureBackgroundColorView.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { ColorUtils, LocalizeText } from '../../../../api';
-import { Button, Column, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
+import { Button, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
 import { useFurnitureBackgroundColorWidget } from '../../../../hooks';
 
 export const FurnitureBackgroundColorView: FC<{}> = props =>
@@ -10,20 +10,20 @@ export const FurnitureBackgroundColorView: FC<{}> = props =>
     if(objectId === -1) return null;
 
     return (
-        <NitroCardView theme="primary-slim" className="nitro-room-widget-toner">
+        <NitroCardView className="nitro-room-widget-toner" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText('widget.backgroundcolor.title') } onCloseClick={ onClose } />
-            <NitroCardContentView overflow="hidden" justifyContent="between">
-                <Column overflow="auto" gap={ 1 }>
-                    <input type="color" className="form-control" value={ ColorUtils.makeColorNumberHex(color) } onChange={ event => setColor(ColorUtils.convertFromHex(event.target.value)) } />
-                </Column>
-                <Column gap={ 1 }>
+            <NitroCardContentView justifyContent="between" overflow="hidden">
+                <div className="flex flex-column gap-1 overflow-auto">
+                    <input className="form-control" type="color" value={ ColorUtils.makeColorNumberHex(color) } onChange={ event => setColor(ColorUtils.convertFromHex(event.target.value)) } />
+                </div>
+                <div className="flex flex-column gap-1">
                     <Button fullWidth variant="primary" onClick={ toggleToner }>
                         { LocalizeText('widget.backgroundcolor.button.on') }
                     </Button>
                     <Button fullWidth variant="primary" onClick={ applyToner }>
                         { LocalizeText('widget.backgroundcolor.button.apply') }
                     </Button>
-                </Column>
+                </div>
             </NitroCardContentView>
         </NitroCardView>
     );
diff --git a/src/components/room/widgets/furniture/FurnitureBadgeDisplayView.tsx b/src/components/room/widgets/furniture/FurnitureBadgeDisplayView.tsx
index 6c449d2d..9b189b64 100644
--- a/src/components/room/widgets/furniture/FurnitureBadgeDisplayView.tsx
+++ b/src/components/room/widgets/furniture/FurnitureBadgeDisplayView.tsx
@@ -8,5 +8,5 @@ export const FurnitureBadgeDisplayView: FC<{}> = props =>
 
     if(objectId === -1) return null;
 
-    return <LayoutTrophyView color={ color } message={ badgeDesc } date={ date } senderName={ senderName } customTitle={ badgeName } onCloseClick={ onClose } />;
+    return <LayoutTrophyView color={ color } customTitle={ badgeName } date={ date } message={ badgeDesc } senderName={ senderName } onCloseClick={ onClose } />;
 }
diff --git a/src/components/room/widgets/furniture/FurnitureCraftingView.tsx b/src/components/room/widgets/furniture/FurnitureCraftingView.tsx
index 9d4852ce..8b091d57 100644
--- a/src/components/room/widgets/furniture/FurnitureCraftingView.tsx
+++ b/src/components/room/widgets/furniture/FurnitureCraftingView.tsx
@@ -1,7 +1,7 @@
 import { GetRoomEngine, RoomObjectCategory } from '@nitrots/nitro-renderer';
 import { FC, ReactElement, useEffect, useMemo, useState } from 'react';
 import { IsOwnerOfFurniture, LocalizeText } from '../../../../api';
-import { AutoGrid, Button, Column, Flex, LayoutGridItem, LayoutLoadingSpinnerView, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
+import { AutoGrid, Button, Column, LayoutGridItem, LayoutLoadingSpinnerView, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
 import { useFurnitureCraftingWidget, useRoom } from '../../../../hooks';
 
 export const FurnitureCraftingView: FC<{}> = props =>
@@ -55,25 +55,25 @@ export const FurnitureCraftingView: FC<{}> = props =>
         <NitroCardView className="nitro-widget-crafting" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText('crafting.title') } onCloseClick={ onClose } />
             <NitroCardContentView>
-                <Flex grow overflow="hidden" gap={ 2 }>
-                    <Flex column fullWidth gap={ 2 }>
-                        <Column overflow="hidden" fullHeight>
+                <div className="flex flex-grow-1 gap-2 overflow-hidden">
+                    <div className="flex flex-column w-100 gap-2">
+                        <Column fullHeight overflow="hidden">
                             <div className="bg-muted rounded py-1 text-center">{ LocalizeText('crafting.title.products') }</div>
                             <AutoGrid columnCount={ 5 }>
-                                { (recipes.length > 0) && recipes.map((item) => <LayoutGridItem key={ item.name } itemImage={ item.iconUrl } itemActive={ selectedRecipe && selectedRecipe.name === item.name } onClick={ () => selectRecipe(item) } />) }
+                                { (recipes.length > 0) && recipes.map((item) => <LayoutGridItem key={ item.name } itemActive={ selectedRecipe && selectedRecipe.name === item.name } itemImage={ item.iconUrl } onClick={ () => selectRecipe(item) } />) }
                             </AutoGrid>
                         </Column>
-                        <Column overflow="hidden" fullHeight>
+                        <Column fullHeight overflow="hidden">
                             <div className="bg-muted rounded py-1 text-center">{ LocalizeText('crafting.title.mixer') }</div>
                             <AutoGrid columnCount={ 5 }>
-                                { (ingredients.length > 0) && ingredients.map((item) => <LayoutGridItem key={ item.name } itemImage={ item.iconUrl } itemCount={ item.count } itemCountMinimum={ 0 } className={ (!item.count ? 'opacity-0-5 ' : '') + 'cursor-default' } />) }
+                                { (ingredients.length > 0) && ingredients.map((item) => <LayoutGridItem key={ item.name } className={ (!item.count ? 'opacity-0-5 ' : '') + 'cursor-default' } itemCount={ item.count } itemCountMinimum={ 0 } itemImage={ item.iconUrl } />) }
                             </AutoGrid>
                         </Column>
-                    </Flex>
-                    <Flex column fullWidth gap={ 2 }>
+                    </div>
+                    <div className="flex flex-column w-100 gap-2">
                         { !selectedRecipe && <Column center fullHeight className="text-black text-center">{ LocalizeText('crafting.info.start') }</Column> }
                         { selectedRecipe && <>
-                            <Column overflow="hidden" fullHeight>
+                            <div className="flex flex-column h-100 overflow-hidden">
                                 <div className="bg-muted rounded py-1 text-center">{ LocalizeText('crafting.current_recipe') }</div>
                                 <AutoGrid columnCount={ 5 }>
                                     { !!requiredIngredients && (requiredIngredients.length > 0) && requiredIngredients.map(ingredient =>
@@ -84,31 +84,31 @@ export const FurnitureCraftingView: FC<{}> = props =>
 
                                         for (let i = 0; i < ingredient.count; i++)
                                         {
-                                            elements.push(<LayoutGridItem key={ i } itemImage={ ingredientData.iconUrl } className={ (ingredientData.count - (i) <= 0 ? 'opacity-0-5 ' : '') + 'cursor-default' } />);
+                                            elements.push(<LayoutGridItem key={ i } className={ (ingredientData.count - (i) <= 0 ? 'opacity-0-5 ' : '') + 'cursor-default' } itemImage={ ingredientData.iconUrl } />);
                                         }
 
                                         return elements;
                                     }) }
                                 </AutoGrid>
-                            </Column>
-                            <Flex gap={ 2 } column fullHeight>
-                                <Flex gap={ 2 } className="bg-muted rounded" column fullHeight>
+                            </div>
+                            <div className="flex flex-column h-100 gap-2">
+                                <div className="flex flex-column h-100 bg-muted rounded gap-2">
                                     <div className="py-1 text-center">{ LocalizeText('crafting.result') }</div>
-                                    <Flex gap={ 1 } center column fullHeight className="pb-1">
-                                        <Column fullHeight>
+                                    <div className="flex items-center justify-center flex-column h-100 pb-1 gap-1">
+                                        <div className="flex flex-column h-100">
                                             <img src={ selectedRecipe.iconUrl } />
-                                        </Column>
+                                        </div>
                                         <div className="text-black">{ selectedRecipe.localizedName }</div>
-                                    </Flex>
-                                </Flex>
-                                <Button variant={ !isOwner || !canCraft ? 'danger' : waitingToConfirm ? 'warning' : isCrafting ? 'primary' : 'success' } disabled={ !isOwner || !canCraft || isCrafting } onClick={ tryCraft }>
+                                    </div>
+                                </div>
+                                <Button disabled={ !isOwner || !canCraft || isCrafting } variant={ !isOwner || !canCraft ? 'danger' : waitingToConfirm ? 'warning' : isCrafting ? 'primary' : 'success' } onClick={ tryCraft }>
                                     { !isCrafting && LocalizeText(!isOwner ? 'crafting.btn.notowner' : !canCraft ? 'crafting.status.recipe.incomplete' : waitingToConfirm ? 'generic.confirm' : 'crafting.btn.craft') }
                                     { isCrafting && <LayoutLoadingSpinnerView /> }
                                 </Button>
-                            </Flex>
+                            </div>
                         </> }
-                    </Flex>
-                </Flex>
+                    </div>
+                </div>
             </NitroCardContentView>
         </NitroCardView>
     );
diff --git a/src/components/room/widgets/furniture/FurnitureDimmerView.tsx b/src/components/room/widgets/furniture/FurnitureDimmerView.tsx
index aca73988..f83cde15 100644
--- a/src/components/room/widgets/furniture/FurnitureDimmerView.tsx
+++ b/src/components/room/widgets/furniture/FurnitureDimmerView.tsx
@@ -2,7 +2,7 @@ import { RoomEngineTriggerWidgetEvent } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useMemo, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { ColorUtils, FurnitureDimmerUtilities, GetConfigurationValue, LocalizeText } from '../../../../api';
-import { Base, Button, Column, Flex, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView, Text, classNames } from '../../../../common';
+import { Button, Column, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView, Text, classNames } from '../../../../common';
 import { useFurnitureDimmerWidget, useNitroEvent } from '../../../../hooks';
 
 export const FurnitureDimmerView: FC<{}> = props =>
@@ -40,45 +40,45 @@ export const FurnitureDimmerView: FC<{}> = props =>
             <NitroCardContentView>
                 { (dimmerState === 0) &&
                     <Column alignItems="center">
-                        <Base className="dimmer-banner" />
+                        <div className="dimmer-banner" />
                         <Text center className="bg-muted rounded p-1">{ LocalizeText('widget.dimmer.info.off') }</Text>
                         <Button fullWidth variant="success" onClick={ () => FurnitureDimmerUtilities.changeState() }>{ LocalizeText('widget.dimmer.button.on') }</Button>
                     </Column> }
                 { (dimmerState === 1) &&
                     <>
-                        <Column gap={ 1 }>
+                        <div className="flex flex-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)) } /> }
+                                <input className="form-control" type="color" value={ ColorUtils.makeColorNumberHex(selectedColor) } onChange={ event => setSelectedColor(ColorUtils.convertFromHex(event.target.value)) } /> }
                             { !isFreeColorMode &&
-                                <Grid gap={ 1 } columnCount={ 7 }>
+                                <Grid columnCount={ 7 } gap={ 1 }>
                                     { FurnitureDimmerUtilities.AVAILABLE_COLORS.map((color, index) =>
                                     {
                                         return (
-                                            <Column fullWidth pointer key={ index } className={ classNames('color-swatch rounded', ((color === selectedColor ) && 'active')) } onClick={ () => setSelectedColor(color) } style={ { backgroundColor: FurnitureDimmerUtilities.HTML_COLORS[index] } } />
+                                            <Column key={ index } fullWidth pointer className={ classNames('color-swatch rounded', ((color === selectedColor ) && 'active')) } style={ { backgroundColor: FurnitureDimmerUtilities.HTML_COLORS[index] } } onClick={ () => setSelectedColor(color) } />
                                         );
                                     }) }
                                 </Grid> }
-                        </Column>
-                        <Column gap={ 1 }>
+                        </div>
+                        <div className="flex flex-column gap-1">
                             <Text fontWeight="bold">{ LocalizeText('widget.backgroundcolor.lightness') }</Text>
                             <ReactSlider
                                 className="nitro-slider"
-                                min={ FurnitureDimmerUtilities.MIN_BRIGHTNESS }
                                 max={ FurnitureDimmerUtilities.MAX_BRIGHTNESS }
-                                value={ selectedBrightness }
-                                onChange={ value => setSelectedBrightness(value) }
+                                min={ FurnitureDimmerUtilities.MIN_BRIGHTNESS }
+                                renderThumb={ (props, state) => <div { ...props }>{ FurnitureDimmerUtilities.scaleBrightness(state.valueNow) }</div> }
                                 thumbClassName={ 'thumb percent' }
-                                renderThumb={ (props, state) => <div { ...props }>{ FurnitureDimmerUtilities.scaleBrightness(state.valueNow) }</div> } />
-                        </Column>
-                        <Flex alignItems="center" gap={ 1 }>
-                            <input className="form-check-input" type="checkbox" checked={ (selectedEffectId === 2) } onChange={ event => setSelectedEffectId(event.target.checked ? 2 : 1) } />
+                                value={ selectedBrightness }
+                                onChange={ value => setSelectedBrightness(value) } />
+                        </div>
+                        <div className="flex items-center gap-1">
+                            <input checked={ (selectedEffectId === 2) } className="form-check-input" type="checkbox" onChange={ event => setSelectedEffectId(event.target.checked ? 2 : 1) } />
                             <Text>{ LocalizeText('widget.dimmer.type.checkbox') }</Text>
-                        </Flex>
-                        <Flex gap={ 1 }>
+                        </div>
+                        <div className="flex gap-1">
                             <Button fullWidth variant="danger" onClick={ () => FurnitureDimmerUtilities.changeState() }>{ LocalizeText('widget.dimmer.button.off') }</Button>
                             <Button fullWidth variant="success" onClick={ applyChanges }>{ LocalizeText('widget.dimmer.button.apply') }</Button>
-                        </Flex>
+                        </div>
                     </> }
             </NitroCardContentView>
         </NitroCardView>
diff --git a/src/components/room/widgets/furniture/FurnitureExchangeCreditView.tsx b/src/components/room/widgets/furniture/FurnitureExchangeCreditView.tsx
index 130646fe..b9cad22b 100644
--- a/src/components/room/widgets/furniture/FurnitureExchangeCreditView.tsx
+++ b/src/components/room/widgets/furniture/FurnitureExchangeCreditView.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { LocalizeText } from '../../../../api';
-import { Base, Button, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
+import { Button, Column, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
 import { useFurnitureExchangeWidget } from '../../../../hooks';
 
 export const FurnitureExchangeCreditView: FC<{}> = props =>
@@ -13,11 +13,11 @@ export const FurnitureExchangeCreditView: FC<{}> = props =>
         <NitroCardView className="nitro-widget-exchange-credit" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText('catalog.redeem.dialog.title') } onCloseClick={ onClose } />
             <NitroCardContentView center>
-                <Flex overflow="hidden" gap={ 2 }>
-                    <Column center>
-                        <Base className="exchange-image" />
-                    </Column>
-                    <Column grow justifyContent="between" overflow="hidden">
+                <div className="flex gap-2 overflow-hidden">
+                    <div className="flex flex-column items-center justify-conent-center">
+                        <div className="exchange-image" />
+                    </div>
+                    <div className="flex flex-column justify-content-between overflow-hidden flex-grow-1">
                         <Column gap={ 1 } overflow="auto">
                             <Text fontWeight="bold">{ LocalizeText('creditfurni.description', [ 'credits' ], [ value.toString() ]) }</Text>
                             <Text>{ LocalizeText('creditfurni.prompt') }</Text>
@@ -25,8 +25,8 @@ export const FurnitureExchangeCreditView: FC<{}> = props =>
                         <Button variant="success" onClick={ redeem }>
                             { LocalizeText('catalog.redeem.dialog.button.exchange') }
                         </Button>
-                    </Column>
-                </Flex>
+                    </div>
+                </div>
             </NitroCardContentView>
         </NitroCardView>
     );
diff --git a/src/components/room/widgets/furniture/FurnitureExternalImageView.tsx b/src/components/room/widgets/furniture/FurnitureExternalImageView.tsx
index 7fd81d8f..cce8e51d 100644
--- a/src/components/room/widgets/furniture/FurnitureExternalImageView.tsx
+++ b/src/components/room/widgets/furniture/FurnitureExternalImageView.tsx
@@ -14,7 +14,7 @@ export const FurnitureExternalImageView: FC<{}> = props =>
 
     return (
         <NitroCardView className="nitro-external-image-widget" theme="primary-slim">
-            <NitroCardHeaderView headerText="" isGalleryPhoto={ true } onReportPhoto={ () => report(ReportType.PHOTO, { extraData: currentPhotos[currentPhotoIndex].w, roomId: currentPhotos[currentPhotoIndex].s, reportedUserId: GetSessionDataManager().userId, roomObjectId: Number(currentPhotos[currentPhotoIndex].u) }) } onCloseClick={ onClose } />
+            <NitroCardHeaderView headerText="" isGalleryPhoto={ true } onCloseClick={ onClose } onReportPhoto={ () => report(ReportType.PHOTO, { extraData: currentPhotos[currentPhotoIndex].w, roomId: currentPhotos[currentPhotoIndex].s, reportedUserId: GetSessionDataManager().userId, roomObjectId: Number(currentPhotos[currentPhotoIndex].u) }) } />
             <NitroCardContentView>
                 <CameraWidgetShowPhotoView currentIndex={ currentPhotoIndex } currentPhotos={ currentPhotos } />
             </NitroCardContentView>
diff --git a/src/components/room/widgets/furniture/FurnitureFriendFurniView.tsx b/src/components/room/widgets/furniture/FurnitureFriendFurniView.tsx
index 96e3320c..7915d445 100644
--- a/src/components/room/widgets/furniture/FurnitureFriendFurniView.tsx
+++ b/src/components/room/widgets/furniture/FurnitureFriendFurniView.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { LocalizeText } from '../../../../api';
-import { Button, Column, DraggableWindow, Flex, LayoutAvatarImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
+import { Button, DraggableWindow, LayoutAvatarImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
 import { useFurnitureFriendFurniWidget } from '../../../../hooks';
 
 export const FurnitureFriendFurniView: FC<{}> = props =>
@@ -18,15 +18,15 @@ export const FurnitureFriendFurniView: FC<{}> = props =>
                     <h5 className="text-black text-center fw-bold mt-2 mb-2">
                         { LocalizeText('friend.furniture.confirm.lock.subtitle') }
                     </h5>
-                    <div className="d-flex justify-content-center mb-2">
+                    <div className="flex justify-center mb-2">
                         <div className={ `engraving-lock-stage-${ stage }` }></div>
                     </div>
                     { (stage === 2) &&
                         <div className="text-small text-black text-center mb-2">{ LocalizeText('friend.furniture.confirm.lock.other.locked') }</div> }
-                    <Flex gap={ 1 }>
+                    <div className="flex gap-1">
                         <Button fullWidth onClick={ event => respond(false) }>{ LocalizeText('friend.furniture.confirm.lock.button.cancel') }</Button>
                         <Button fullWidth variant="success" onClick={ event => respond(true) }>{ LocalizeText('friend.furniture.confirm.lock.button.confirm') }</Button>
-                    </Flex>
+                    </div>
                 </NitroCardContentView>
             </NitroCardView>
         );
@@ -38,27 +38,27 @@ export const FurnitureFriendFurniView: FC<{}> = props =>
             <DraggableWindow handleSelector=".nitro-engraving-lock-view">
                 <div className={ `nitro-engraving-lock-view engraving-lock-${ type }` }>
                     <div className="engraving-lock-close" onClick={ onClose } />
-                    <Flex justifyContent="center">
+                    <div className="flex justify-center">
                         <div className="engraving-lock-avatar">
-                            <LayoutAvatarImageView figure={ figures[0] } direction={ 2 } />
+                            <LayoutAvatarImageView direction={ 2 } figure={ figures[0] } />
                         </div>
                         <div className="engraving-lock-avatar">
-                            <LayoutAvatarImageView figure={ figures[1] } direction={ 4 } />
+                            <LayoutAvatarImageView direction={ 4 } figure={ figures[1] } />
                         </div>
-                    </Flex>
-                    <Column justifyContent="between" className="mt-1">
-                        <Column alignItems="center" justifyContent="center" gap={ 1 }>
+                    </div>
+                    <div className="flex flex-column mt-1 justify-content-between">
+                        <div className="flex flex-column items-center gap-1 justify-center">
                             <div>
                                 { (type === 0) && LocalizeText('lovelock.engraving.caption') }
                                 { (type === 3) && LocalizeText('wildwest.engraving.caption') }
                             </div>
                             <div>{ date }</div>
-                        </Column>
-                        <Flex justifyContent="center" gap={ 4 }>
+                        </div>
+                        <div className="flex gap-4 justify-center">
                             <div>{ usernames[0] }</div>
                             <div>{ usernames[1] }</div>
-                        </Flex>
-                    </Column>
+                        </div>
+                    </div>
                 </div>
             </DraggableWindow>
         );
diff --git a/src/components/room/widgets/furniture/FurnitureGiftOpeningView.tsx b/src/components/room/widgets/furniture/FurnitureGiftOpeningView.tsx
index 322aa471..0e0046a1 100644
--- a/src/components/room/widgets/furniture/FurnitureGiftOpeningView.tsx
+++ b/src/components/room/widgets/furniture/FurnitureGiftOpeningView.tsx
@@ -1,7 +1,7 @@
 import { CreateLinkEvent } from '@nitrots/nitro-renderer';
 import { FC } from 'react';
 import { attemptItemPlacement, LocalizeText } from '../../../../api';
-import { Button, Column, Flex, LayoutGiftTagView, LayoutImage, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
+import { Button, Column, LayoutGiftTagView, LayoutImage, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
 import { useFurniturePresentWidget, useInventoryFurni } from '../../../../hooks';
 
 export const FurnitureGiftOpeningView: FC<{}> = props =>
@@ -26,11 +26,11 @@ export const FurnitureGiftOpeningView: FC<{}> = props =>
             <NitroCardContentView>
                 { (placedItemId === -1) &&
                     <Column overflow="hidden">
-                        <Flex center overflow="auto">
-                            <LayoutGiftTagView userName={ senderName } figure={ senderFigure } message={ text } />
-                        </Flex>
+                        <div className="flex justify-center items-center overflow-auto">
+                            <LayoutGiftTagView figure={ senderFigure } message={ text } userName={ senderName } />
+                        </div>
                         { isOwnerOfFurniture &&
-                            <Flex gap={ 1 }>
+                            <div className="flex gap-1">
                                 { senderName &&
                                     <Button fullWidth onClick={ event => CreateLinkEvent('catalog/open') }>
                                         { LocalizeText('widget.furni.present.give_gift', [ 'name' ], [ senderName ]) }
@@ -38,20 +38,20 @@ export const FurnitureGiftOpeningView: FC<{}> = props =>
                                 <Button fullWidth variant="success" onClick={ openPresent }>
                                     { LocalizeText('widget.furni.present.open_gift') }
                                 </Button>
-                            </Flex> }
+                            </div> }
                     </Column> }
                 { (placedItemId > -1) &&
-                    <Flex gap={ 2 } overflow="hidden">
+                    <div className="flex gap-2 overflow-hidden">
                         <Column center className="p-2">
                             <LayoutImage imageUrl={ imageUrl } />
                         </Column>
                         <Column grow>
                             <Column center gap={ 1 }>
-                                <Text wrap small>{ LocalizeText('widget.furni.present.message_opened') }</Text>
+                                <Text small wrap>{ LocalizeText('widget.furni.present.message_opened') }</Text>
                                 <Text bold fontSize={ 5 }>{ text }</Text>
                             </Column>
                             <Column grow gap={ 1 }>
-                                <Flex gap={ 1 }>
+                                <div className="flex gap-1">
                                     { placedInRoom &&
                                         <Button fullWidth onClick={ null }>
                                             { LocalizeText('widget.furni.present.put_in_inventory') }
@@ -59,14 +59,14 @@ export const FurnitureGiftOpeningView: FC<{}> = props =>
                                     <Button fullWidth variant="success" onClick={ event => place(placedItemId) }>
                                         { LocalizeText(placedInRoom ? 'widget.furni.present.keep_in_room' : 'widget.furni.present.place_in_room') }
                                     </Button>
-                                </Flex>
+                                </div>
                                 { (senderName && senderName.length) &&
                                     <Button fullWidth onClick={ event => CreateLinkEvent('catalog/open') }>
                                         { LocalizeText('widget.furni.present.give_gift', [ 'name' ], [ senderName ]) }
                                     </Button> }
                             </Column>
                         </Column>
-                    </Flex> }
+                    </div> }
             </NitroCardContentView>
         </NitroCardView>
     );
diff --git a/src/components/room/widgets/furniture/FurnitureHighScoreView.tsx b/src/components/room/widgets/furniture/FurnitureHighScoreView.tsx
index e8b3fa97..560ea83b 100644
--- a/src/components/room/widgets/furniture/FurnitureHighScoreView.tsx
+++ b/src/components/room/widgets/furniture/FurnitureHighScoreView.tsx
@@ -1,7 +1,7 @@
 import { RoomObjectCategory } from '@nitrots/nitro-renderer';
 import { FC } from 'react';
 import { LocalizeText } from '../../../../api';
-import { Column, Flex, Text } from '../../../../common';
+import { Column, Text } from '../../../../common';
 import { useFurnitureHighScoreWidget } from '../../../../hooks';
 import { ContextMenuHeaderView } from '../context-menu/ContextMenuHeaderView';
 import { ContextMenuListView } from '../context-menu/ContextMenuListView';
@@ -18,35 +18,35 @@ export const FurnitureHighScoreView: FC<{}> = props =>
             { Array.from(stuffDatas.entries()).map(([ objectId, stuffData ], index) =>
             {
                 return (
-                    <ObjectLocationView key={ index } objectId={ objectId } category={ RoomObjectCategory.FLOOR }>
+                    <ObjectLocationView key={ index } category={ RoomObjectCategory.FLOOR } objectId={ objectId }>
                         <Column className="nitro-widget-high-score nitro-context-menu" gap={ 0 }>
                             <ContextMenuHeaderView>
                                 { LocalizeText('high.score.display.caption', [ 'scoretype', 'cleartype' ], [ LocalizeText(`high.score.display.scoretype.${ getScoreType(stuffData.scoreType) }`), LocalizeText(`high.score.display.cleartype.${ getClearType(stuffData.clearType) }`) ]) }
                             </ContextMenuHeaderView>
-                            <ContextMenuListView overflow="hidden" gap={ 1 } className="h-100">
-                                <Column gap={ 1 }>
-                                    <Flex alignItems="center">
-                                        <Text center bold variant="white" className="col-8">
+                            <ContextMenuListView className="h-100" gap={ 1 } overflow="hidden">
+                                <div className="flex flex-column gap-1">
+                                    <div className="flex items-center">
+                                        <Text bold center className="col-8" variant="white">
                                             { LocalizeText('high.score.display.users.header') }
                                         </Text>
-                                        <Text center bold variant="white" className="col-4">
+                                        <Text bold center className="col-4" variant="white">
                                             { LocalizeText('high.score.display.score.header') }
                                         </Text>
-                                    </Flex>
+                                    </div>
                                     <hr className="m-0" />
-                                </Column>
-                                <Column overflow="auto" gap={ 1 } className="overflow-y-scroll">
+                                </div>
+                                <Column className="overflow-y-scroll" gap={ 1 } overflow="auto">
                                     { stuffData.entries.map((entry, index) =>
                                     {
                                         return (
-                                            <Flex key={ index } alignItems="center">
-                                                <Text center variant="white" className="col-8">
+                                            <div key={ index } className="flex items-center">
+                                                <Text center className="col-8" variant="white">
                                                     { entry.users.join(', ') }
                                                 </Text>
-                                                <Text center variant="white" className="col-4">
+                                                <Text center className="col-4" variant="white">
                                                     { entry.score }
                                                 </Text>
-                                            </Flex>
+                                            </div>
                                         );
                                     }) }
                                 </Column>
diff --git a/src/components/room/widgets/furniture/FurnitureMannequinView.tsx b/src/components/room/widgets/furniture/FurnitureMannequinView.tsx
index 7f1ac717..251e79ac 100644
--- a/src/components/room/widgets/furniture/FurnitureMannequinView.tsx
+++ b/src/components/room/widgets/furniture/FurnitureMannequinView.tsx
@@ -1,7 +1,7 @@
 import { GetAvatarRenderManager, GetSessionDataManager, HabboClubLevelEnum, RoomControllerLevel } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { GetClubMemberLevel, GetRoomSession, LocalizeText, MannequinUtilities } from '../../../../api';
-import { Base, Button, Column, Flex, LayoutAvatarImageView, LayoutCurrencyIcon, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
+import { Button, Column, LayoutAvatarImageView, LayoutCurrencyIcon, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
 import { useFurnitureMannequinWidget } from '../../../../hooks';
 
 const MODE_NONE: number = -1;
@@ -84,60 +84,60 @@ export const FurnitureMannequinView: FC<{}> = props =>
         <NitroCardView className="nitro-mannequin no-resize" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText('mannequin.widget.title') } onCloseClick={ onClose } />
             <NitroCardContentView center>
-                <Flex fullWidth gap={ 2 } overflow="hidden">
-                    <Column>
-                        <Base position="relative" className="mannequin-preview">
-                            <LayoutAvatarImageView position="absolute" figure={ renderedFigure } direction={ 2 } />
+                <div className="flex w-100 gap-2 overflow-hidden">
+                    <div className="flex flex-column">
+                        <div className="position-relative mannequin-preview">
+                            <LayoutAvatarImageView direction={ 2 } figure={ renderedFigure } position="absolute" />
                             { (clubLevel > 0) &&
                                 <LayoutCurrencyIcon className="position-absolute end-2 bottom-2" type="hc" /> }
-                        </Base>
-                    </Column>
+                        </div>
+                    </div>
                     <Column grow justifyContent="between" overflow="auto">
                         { (mode === MODE_CONTROLLER) &&
                             <>
-                                <input type="text" className="form-control form-control-sm" value={ name } onChange={ event => setName(event.target.value) } onBlur={ saveName } />
-                                <Column gap={ 1 }>
+                                <input className="form-control form-control-sm" type="text" value={ name } onBlur={ saveName } onChange={ event => setName(event.target.value) } />
+                                <div className="flex flex-column gap-1">
                                     <Button variant="success" onClick={ event => setMode(MODE_UPDATE) }>
                                         { LocalizeText('mannequin.widget.style') }
                                     </Button>
                                     <Button variant="success" onClick={ wearFigure }>
                                         { LocalizeText('mannequin.widget.wear') }
                                     </Button>
-                                </Column>
+                                </div>
                             </> }
                         { (mode === MODE_UPDATE) &&
                             <>
-                                <Column gap={ 1 }>
+                                <div className="flex flex-column gap-1">
                                     <Text bold>{ name }</Text>
                                     <Text wrap>{ LocalizeText('mannequin.widget.savetext') }</Text>
-                                </Column>
-                                <Flex alignItems="center" justifyContent="between">
-                                    <Text underline pointer onClick={ event => setMode(MODE_CONTROLLER) }>
+                                </div>
+                                <div className="flex items-center justify-content-between">
+                                    <Text pointer underline onClick={ event => setMode(MODE_CONTROLLER) }>
                                         { LocalizeText('mannequin.widget.back') }
                                     </Text>
                                     <Button variant="success" onClick={ saveFigure }>
                                         { LocalizeText('mannequin.widget.save') }
                                     </Button>
-                                </Flex>
+                                </div>
                             </> }
                         { (mode === MODE_PEER) &&
                             <>
-                                <Column gap={ 1 }>
+                                <div className="flex flex-column gap-1">
                                     <Text bold>{ name }</Text>
                                     <Text>{ LocalizeText('mannequin.widget.weartext') }</Text>
-                                </Column>
+                                </div>
                                 <Button variant="success" onClick={ wearFigure }>
                                     { LocalizeText('mannequin.widget.wear') }
                                 </Button>
                             </> }
                         { (mode === MODE_NO_CLUB) &&
-                            <Flex center grow>
+                            <div className="flex justify-center items-center flex-grow-1">
                                 <Text>{ LocalizeText('mannequin.widget.clubnotification') }</Text>
-                            </Flex> }
+                            </div> }
                         { (mode === MODE_WRONG_GENDER) &&
                             <Text>{ LocalizeText('mannequin.widget.wronggender') }</Text> }
                     </Column>
-                </Flex>
+                </div>
             </NitroCardContentView>
         </NitroCardView>
     );
diff --git a/src/components/room/widgets/furniture/FurnitureMysteryBoxOpenDialogView.tsx b/src/components/room/widgets/furniture/FurnitureMysteryBoxOpenDialogView.tsx
index 1d3da314..b4b767d7 100644
--- a/src/components/room/widgets/furniture/FurnitureMysteryBoxOpenDialogView.tsx
+++ b/src/components/room/widgets/furniture/FurnitureMysteryBoxOpenDialogView.tsx
@@ -64,15 +64,15 @@ export const FurnitureMysteryBoxOpenDialogView: FC<FurnitureMysteryBoxOpenDialog
                     <Text variant="primary"> { LocalizeText(`mysterybox.dialog.${ isOwner ? 'owner' : 'other' }.subtitle`) } </Text>
                     <Text> { LocalizeText(`mysterybox.dialog.${ isOwner ? 'owner' : 'other' }.description`) } </Text>
                     <Text> { LocalizeText(`mysterybox.dialog.${ isOwner ? 'owner' : 'other' }.waiting`) }</Text>
-                    <Button variant="danger" onClick={ close } className="mt-auto"> { LocalizeText(`mysterybox.dialog.${ isOwner ? 'owner' : 'other' }.cancel`) } </Button>
+                    <Button className="mt-auto" variant="danger" onClick={ close }> { LocalizeText(`mysterybox.dialog.${ isOwner ? 'owner' : 'other' }.cancel`) } </Button>
                 </>
                 }
                 { mode === ViewMode.PRIZE && prizeData && <>
                     <Text variant="black"> { LocalizeText('mysterybox.reward.text') } </Text>
-                    <Flex className="prize-container justify-content-center mx-auto">
+                    <Flex className="prize-container justify-center mx-auto">
                         <LayoutPrizeProductImageView classId={ prizeData.classId } productType={ prizeData.contentType }/>
                     </Flex>
-                    <Button variant="success" onClick={ close } className="mt-auto"> { LocalizeText('mysterybox.reward.close') } </Button>
+                    <Button className="mt-auto" variant="success" onClick={ close }> { LocalizeText('mysterybox.reward.close') } </Button>
                 </>
                 }
             </NitroCardContentView>
diff --git a/src/components/room/widgets/furniture/FurnitureMysteryTrophyOpenDialogView.tsx b/src/components/room/widgets/furniture/FurnitureMysteryTrophyOpenDialogView.tsx
index ab187f12..3495beec 100644
--- a/src/components/room/widgets/furniture/FurnitureMysteryTrophyOpenDialogView.tsx
+++ b/src/components/room/widgets/furniture/FurnitureMysteryTrophyOpenDialogView.tsx
@@ -1,7 +1,7 @@
 import { OpenMysteryTrophyMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useState } from 'react';
 import { LocalizeText, SendMessageComposer } from '../../../../api';
-import { Button, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
+import { Button, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
 
 interface FurnitureMysteryTrophyOpenDialogViewProps
 {
@@ -26,24 +26,24 @@ export const FurnitureMysteryTrophyOpenDialogView: FC<FurnitureMysteryTrophyOpen
         <NitroCardView className="nitro-mysterytrophy-dialog no-resize" theme="primary-slim">
             <NitroCardHeaderView center headerText={ LocalizeText('mysterytrophy.header.title') } onCloseClick={ onClose } />
             <NitroCardContentView>
-                <Flex className="mysterytrophy-dialog-top p-3">
+                <div className="flex mysterytrophy-dialog-top p-3">
                     <div className="mysterytrophy-image flex-shrink-0"></div>
                     <div className="m-2">
-                        <Text variant="white" className="mysterytrophy-text-big">{ LocalizeText('mysterytrophy.header.description') }</Text>
+                        <Text className="mysterytrophy-text-big" variant="white">{ LocalizeText('mysterytrophy.header.description') }</Text>
                     </div>
-                </Flex>
-                <Flex className="mysterytrophy-dialog-bottom p-2">
-                    <Column gap={ 1 }>
-                        <Flex alignItems="center" className="bg-white rounded py-1 px-2 input-mysterytrophy-dialog">
+                </div>
+                <div className="flex mysterytrophy-dialog-bottom p-2">
+                    <div className="flex flex-column gap-1">
+                        <div className="flex items-center bg-white rounded py-1 px-2 input-mysterytrophy-dialog">
                             <textarea className="form-control form-control-sm input-mysterytrophy" value={ description } onChange={ event => setDescription(event.target.value) } />
                             <div className="mysterytrophy-pencil-image flex-shrink-0 small fa-icon"></div>
-                        </Flex>
-                        <Flex className="mt-2" gap={ 5 } display="flex" justifyContent="center" alignItems="center">
+                        </div>
+                        <div className="flex items-center mt-2 gap-5 justify-center">
                             <Text pointer className="text-decoration" onClick={ () => onClose() }>{ LocalizeText('cancel') }</Text>
                             <Button variant="success" onClick={ () => onConfirm() }>{ LocalizeText('generic.ok') }</Button>
-                        </Flex>
-                    </Column>
-                </Flex>
+                        </div>
+                    </div>
+                </div>
             </NitroCardContentView>
         </NitroCardView>
     );
diff --git a/src/components/room/widgets/furniture/FurnitureSpamWallPostItView.tsx b/src/components/room/widgets/furniture/FurnitureSpamWallPostItView.tsx
index c093d462..b4026882 100644
--- a/src/components/room/widgets/furniture/FurnitureSpamWallPostItView.tsx
+++ b/src/components/room/widgets/furniture/FurnitureSpamWallPostItView.tsx
@@ -24,21 +24,21 @@ export const FurnitureSpamWallPostItView: FC<{}> = props =>
     return (
         <DraggableWindow handleSelector=".drag-handler" windowPosition={ DraggableWindowPosition.TOP_LEFT }>
             <div className={ 'nitro-stickie nitro-stickie-image stickie-' + getStickieColorName(color) }>
-                <div className="d-flex align-items-center stickie-header drag-handler">
-                    <div className="d-flex align-items-center flex-grow-1 h-100">
+                <div className="flex items-center stickie-header drag-handler">
+                    <div className="flex items-center flex-grow-1 h-100">
                         { canModify && 
                         <>
                             <div className="nitro-stickie-image stickie-trash header-trash" onClick={ onClose }></div>
                             { STICKIE_COLORS.map(color =>
                             {
-                                return <div key={ color } className="stickie-color ms-1" onClick={ event => setColor(color) } style={ { backgroundColor: ColorUtils.makeColorHex(color) } } />
+                                return <div key={ color } className="stickie-color ms-1" style={ { backgroundColor: ColorUtils.makeColorHex(color) } } onClick={ event => setColor(color) } />
                             }) }
                         </> }
                     </div>
-                    <div className="d-flex align-items-center nitro-stickie-image stickie-close header-close" onClick={ onClose }></div>
+                    <div className="flex items-center nitro-stickie-image stickie-close header-close" onClick={ onClose }></div>
                 </div>
                 <div className="stickie-context">
-                    <textarea className="context-text" value={ text } onChange={ event => setText(event.target.value) } tabIndex={ 0 } autoFocus></textarea>
+                    <textarea autoFocus className="context-text" tabIndex={ 0 } value={ text } onChange={ event => setText(event.target.value) }></textarea>
                 </div>
             </div>
         </DraggableWindow>
diff --git a/src/components/room/widgets/furniture/FurnitureStackHeightView.tsx b/src/components/room/widgets/furniture/FurnitureStackHeightView.tsx
index d4d1039f..336edeb1 100644
--- a/src/components/room/widgets/furniture/FurnitureStackHeightView.tsx
+++ b/src/components/room/widgets/furniture/FurnitureStackHeightView.tsx
@@ -2,7 +2,7 @@ import { FurnitureStackHeightComposer } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { LocalizeText, SendMessageComposer } from '../../../../api';
-import { Button, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
+import { Button, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
 import { useFurnitureStackHeightWidget } from '../../../../hooks';
 
 export const FurnitureStackHeightView: FC<{}> = props =>
@@ -33,25 +33,25 @@ export const FurnitureStackHeightView: FC<{}> = props =>
             <NitroCardHeaderView headerText={ LocalizeText('widget.custom.stack.height.title') } onCloseClick={ onClose } />
             <NitroCardContentView justifyContent="between">
                 <Text>{ LocalizeText('widget.custom.stack.height.text') }</Text>
-                <Flex gap={ 2 }>
+                <div className="flex gap-2">
                     <ReactSlider
                         className="nitro-slider"
-                        min={ 0 }
                         max={ maxHeight }
+                        min={ 0 }
+                        renderThumb={ (props, state) => <div { ...props }>{ state.valueNow }</div> }
                         step={ 0.01 }
                         value={ height }
-                        onChange={ event => updateHeight(event) }
-                        renderThumb={ (props, state) => <div { ...props }>{ state.valueNow }</div> } />
-                    <input className="show-number-arrows" style={ { width: 50 } } type="number" min={ 0 } max={ maxHeight } value={ tempHeight } onChange={ event => updateTempHeight(event.target.value) } />
-                </Flex>
-                <Column gap={ 1 }>
+                        onChange={ event => updateHeight(event) } />
+                    <input className="show-number-arrows" max={ maxHeight } min={ 0 } style={ { width: 50 } } type="number" value={ tempHeight } onChange={ event => updateTempHeight(event.target.value) } />
+                </div>
+                <div className="flex flex-column gap-1">
                     <Button onClick={ event => SendMessageComposer(new FurnitureStackHeightComposer(objectId, -100)) }>
                         { LocalizeText('furniture.above.stack') }
                     </Button>
                     <Button onClick={ event => SendMessageComposer(new FurnitureStackHeightComposer(objectId, 0)) }>
                         { LocalizeText('furniture.floor.level') }
                     </Button>
-                </Column>
+                </div>
             </NitroCardContentView>
         </NitroCardView>
     );
diff --git a/src/components/room/widgets/furniture/FurnitureStickieView.tsx b/src/components/room/widgets/furniture/FurnitureStickieView.tsx
index 2f0e0fee..f534ae89 100644
--- a/src/components/room/widgets/furniture/FurnitureStickieView.tsx
+++ b/src/components/room/widgets/furniture/FurnitureStickieView.tsx
@@ -41,8 +41,8 @@ export const FurnitureStickieView: FC<{}> = props =>
     return (
         <DraggableWindow handleSelector=".drag-handler" windowPosition={ DraggableWindowPosition.TOP_LEFT }>
             <div className={ 'nitro-stickie nitro-stickie-image stickie-' + (type == 'post_it' ? getStickieColorName(color) : getStickieTypeName(type)) }>
-                <div className="d-flex align-items-center stickie-header drag-handler">
-                    <div className="d-flex align-items-center flex-grow-1 h-100">
+                <div className="flex items-center stickie-header drag-handler">
+                    <div className="flex items-center flex-grow-1 h-100">
                         { canModify &&
                         <>
                             <div className="nitro-stickie-image stickie-trash header-trash" onClick={ trash }></div>
@@ -50,15 +50,15 @@ export const FurnitureStickieView: FC<{}> = props =>
                                 <>
                                     { STICKIE_COLORS.map(color =>
                                     {
-                                        return <div key={ color } className="stickie-color ms-1" onClick={ event => updateColor(color) } style={ { backgroundColor: ColorUtils.makeColorHex(color) } } />
+                                        return <div key={ color } className="stickie-color ms-1" style={ { backgroundColor: ColorUtils.makeColorHex(color) } } onClick={ event => updateColor(color) } />
                                     }) }
                                 </> }
                         </> }
                     </div>
-                    <div className="d-flex align-items-center nitro-stickie-image stickie-close header-close" onClick={ onClose }></div>
+                    <div className="flex items-center nitro-stickie-image stickie-close header-close" onClick={ onClose }></div>
                 </div>
                 <div className="stickie-context">
-                    { (!isEditing || !canModify) ? <div className="context-text" onClick={ event => (canModify && setIsEditing(true)) }>{ text }</div> : <textarea className="context-text" defaultValue={ text } tabIndex={ 0 } onBlur={ event => updateText(event.target.value) } autoFocus></textarea> }
+                    { (!isEditing || !canModify) ? <div className="context-text" onClick={ event => (canModify && setIsEditing(true)) }>{ text }</div> : <textarea autoFocus className="context-text" defaultValue={ text } tabIndex={ 0 } onBlur={ event => updateText(event.target.value) }></textarea> }
                 </div>
             </div>
         </DraggableWindow>
diff --git a/src/components/room/widgets/furniture/FurnitureTrophyView.tsx b/src/components/room/widgets/furniture/FurnitureTrophyView.tsx
index 7977097e..764d237e 100644
--- a/src/components/room/widgets/furniture/FurnitureTrophyView.tsx
+++ b/src/components/room/widgets/furniture/FurnitureTrophyView.tsx
@@ -8,5 +8,5 @@ export const FurnitureTrophyView: FC<{}> = props =>
 
     if(objectId === -1) return null;
 
-    return <LayoutTrophyView color={ color } message={ message } date={ date } senderName={ senderName } onCloseClick={ onClose } />;
+    return <LayoutTrophyView color={ color } date={ date } message={ message } senderName={ senderName } onCloseClick={ onClose } />;
 }
diff --git a/src/components/room/widgets/furniture/FurnitureWidgetsView.tsx b/src/components/room/widgets/furniture/FurnitureWidgetsView.tsx
index d0e4066d..a8f304a5 100644
--- a/src/components/room/widgets/furniture/FurnitureWidgetsView.tsx
+++ b/src/components/room/widgets/furniture/FurnitureWidgetsView.tsx
@@ -1,6 +1,4 @@
 import { FC } from 'react';
-import { Base } from '../../../../common';
-import { FurnitureContextMenuView } from './context-menu/FurnitureContextMenuView';
 import { FurnitureBackgroundColorView } from './FurnitureBackgroundColorView';
 import { FurnitureBadgeDisplayView } from './FurnitureBadgeDisplayView';
 import { FurnitureCraftingView } from './FurnitureCraftingView';
@@ -18,12 +16,13 @@ import { FurnitureStackHeightView } from './FurnitureStackHeightView';
 import { FurnitureStickieView } from './FurnitureStickieView';
 import { FurnitureTrophyView } from './FurnitureTrophyView';
 import { FurnitureYoutubeDisplayView } from './FurnitureYoutubeDisplayView';
+import { FurnitureContextMenuView } from './context-menu/FurnitureContextMenuView';
 import { FurniturePlaylistEditorWidgetView } from './playlist-editor/FurniturePlaylistEditorWidgetView';
 
 export const FurnitureWidgetsView: FC<{}> = props =>
 {
     return (
-        <Base fit position="absolute" className="nitro-room-widgets top-0 start-0">
+        <div className="position-absolute size-full nitro-room-widgets top-0 start-0">
             <FurnitureBackgroundColorView />
             <FurnitureBadgeDisplayView />
             <FurnitureCraftingView />
@@ -43,6 +42,6 @@ export const FurnitureWidgetsView: FC<{}> = props =>
             <FurnitureTrophyView />
             <FurnitureContextMenuView />
             <FurnitureYoutubeDisplayView />
-        </Base>
+        </div>
     );
 }
diff --git a/src/components/room/widgets/furniture/FurnitureYoutubeDisplayView.tsx b/src/components/room/widgets/furniture/FurnitureYoutubeDisplayView.tsx
index fba0f675..57a22f33 100644
--- a/src/components/room/widgets/furniture/FurnitureYoutubeDisplayView.tsx
+++ b/src/components/room/widgets/furniture/FurnitureYoutubeDisplayView.tsx
@@ -76,26 +76,26 @@ export const FurnitureYoutubeDisplayView: FC<{}> = FurnitureYoutubeDisplayViewPr
         <NitroCardView className="youtube-tv-widget">
             <NitroCardHeaderView headerText={ LocalizeText('catalog.page.youtube_tvs') } onCloseClick={ onClose } />
             <NitroCardContentView>
-                <div className="row w-100 h-100">
+                <div className="row size-full">
                     <div className="youtube-video-container col-9 overflow-hidden">
                         { (videoId && videoId.length > 0) &&
-                            <YouTube videoId={ videoId } opts={ youtubeOptions } onReady={ event => setPlayer(event.target) } onStateChange={ onStateChange } containerClassName={ 'youtubeContainer' } />
+                            <YouTube containerClassName={ 'youtubeContainer' } opts={ youtubeOptions } videoId={ videoId } onReady={ event => setPlayer(event.target) } onStateChange={ onStateChange } />
                         }
                         { (!videoId || videoId.length === 0) &&
-                            <div className="empty-video w-100 h-100 justify-content-center align-items-center d-flex">{ LocalizeText('widget.furni.video_viewer.no_videos') }</div>
+                            <div className="empty-video size-full justify-center items-center flex">{ LocalizeText('widget.furni.video_viewer.no_videos') }</div>
                         }
                     </div>
-                    <div className="playlist-container col-3 d-flex flex-column">
-                        <span className="playlist-controls justify-content-center d-flex">
+                    <div className="playlist-container col-3 flex flex-column">
+                        <span className="playlist-controls justify-center flex">
                             <i className="icon icon-youtube-prev cursor-pointer" onClick={ previous } />
                             <i className="icon icon-youtube-next cursor-pointer" onClick={ next } />
                         </span>
                         <div className="mb-1">{ LocalizeText('widget.furni.video_viewer.playlists') }</div>
-                        <AutoGrid columnCount={ 1 } columnMinWidth={ 80 } columnMinHeight={ 100 } className="mb-1" overflow="auto">
+                        <AutoGrid className="mb-1" columnCount={ 1 } columnMinHeight={ 100 } columnMinWidth={ 80 } overflow="auto">
                             { playlists && playlists.map((entry, index) =>
                             {
                                 return (
-                                    <LayoutGridItem key={ index } onClick={ event => selectVideo(entry.video) } itemActive={ (entry.video === selectedVideo) }>
+                                    <LayoutGridItem key={ index } itemActive={ (entry.video === selectedVideo) } onClick={ event => selectVideo(entry.video) }>
                                         <b>{ entry.title }</b>
                                     </LayoutGridItem>
                                 )
diff --git a/src/components/room/widgets/furniture/context-menu/EffectBoxConfirmView.tsx b/src/components/room/widgets/furniture/context-menu/EffectBoxConfirmView.tsx
index f7e35b91..d2c2a2ad 100644
--- a/src/components/room/widgets/furniture/context-menu/EffectBoxConfirmView.tsx
+++ b/src/components/room/widgets/furniture/context-menu/EffectBoxConfirmView.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { LocalizeText } from '../../../../../api';
-import { Button, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../../common';
+import { Button, Column, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../../common';
 import { useRoom } from '../../../../../hooks';
 
 interface EffectBoxConfirmViewProps
@@ -25,15 +25,15 @@ export const EffectBoxConfirmView: FC<EffectBoxConfirmViewProps> = props =>
         <NitroCardView className="nitro-use-product-confirmation">
             <NitroCardHeaderView headerText={ LocalizeText('effectbox.header.title') } onCloseClick={ onClose } />
             <NitroCardContentView center>
-                <Flex gap={ 2 }>
+                <div className="flex gap-2">
                     <Column justifyContent="between">
                         <Text>{ LocalizeText('effectbox.header.description') }</Text>
-                        <Flex alignItems="center" justifyContent="between">
+                        <div className="flex items-center justify-content-between">
                             <Button variant="danger" onClick={ onClose }>{ LocalizeText('generic.cancel') }</Button>
                             <Button variant="success" onClick={ useProduct }>{ LocalizeText('generic.ok') }</Button>
-                        </Flex>
+                        </div>
                     </Column>
-                </Flex>
+                </div>
             </NitroCardContentView>
         </NitroCardView>
     );
diff --git a/src/components/room/widgets/furniture/context-menu/FurnitureContextMenuView.tsx b/src/components/room/widgets/furniture/context-menu/FurnitureContextMenuView.tsx
index d58d3693..ca776634 100644
--- a/src/components/room/widgets/furniture/context-menu/FurnitureContextMenuView.tsx
+++ b/src/components/room/widgets/furniture/context-menu/FurnitureContextMenuView.tsx
@@ -52,7 +52,7 @@ export const FurnitureContextMenuView: FC<{}> = props =>
                 <FurnitureMysteryTrophyOpenDialogView objectId={ confirmingObjectId } onClose={ closeConfirm } /> }
             <FurnitureMysteryBoxOpenDialogView ownerId={ objectOwnerId } />
             { (objectId >= 0) && mode &&
-                <ContextMenuView objectId={ objectId } category={ RoomObjectCategory.FLOOR } onClose={ onClose } fades={ true }>
+                <ContextMenuView category={ RoomObjectCategory.FLOOR } fades={ true } objectId={ objectId } onClose={ onClose }>
                     { (mode === ContextMenuEnum.FRIEND_FURNITURE) &&
                         <>
                             <ContextMenuHeaderView>
diff --git a/src/components/room/widgets/furniture/context-menu/MonsterPlantSeedConfirmView.tsx b/src/components/room/widgets/furniture/context-menu/MonsterPlantSeedConfirmView.tsx
index b7163cc5..cf9f9ffd 100644
--- a/src/components/room/widgets/furniture/context-menu/MonsterPlantSeedConfirmView.tsx
+++ b/src/components/room/widgets/furniture/context-menu/MonsterPlantSeedConfirmView.tsx
@@ -1,7 +1,7 @@
 import { IFurnitureData, RoomObjectCategory } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { FurniCategory, GetFurnitureDataForRoomObject, LocalizeText } from '../../../../../api';
-import { Base, Button, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../../common';
+import { Button, Column, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../../common';
 import { useRoom } from '../../../../../hooks';
 
 interface MonsterPlantSeedConfirmViewProps
@@ -62,23 +62,23 @@ export const MonsterPlantSeedConfirmView: FC<MonsterPlantSeedConfirmViewProps> =
         <NitroCardView className="nitro-use-product-confirmation">
             <NitroCardHeaderView headerText={ LocalizeText('useproduct.widget.title.plant_seed', [ 'name' ], [ furniData.name ]) } onCloseClick={ onClose } />
             <NitroCardContentView center>
-                <Flex gap={ 2 } overflow="hidden">
-                    <Column>
-                        <Base className="product-preview">
-                            <Base className="monsterplant-image" />
-                        </Base>
-                    </Column>
-                    <Column justifyContent="between" overflow="auto">
+                <div className="flex gap-2 overflow-hidden">
+                    <div className="flex flex-column">
+                        <div className="product-preview">
+                            <div className="monsterplant-image" />
+                        </div>
+                    </div>
+                    <div className="flex flex-column justify-content-between overflow-auto">
                         <Column gap={ 2 }>
                             <Text>{ LocalizeText('useproduct.widget.text.plant_seed', [ 'productName' ], [ furniData.name ] ) }</Text>
                             <Text>{ LocalizeText('useproduct.widget.info.plant_seed') }</Text>
                         </Column>
-                        <Flex alignItems="center" justifyContent="between">
+                        <div className="flex items-center justify-content-between">
                             <Button variant="danger" onClick={ onClose }>{ LocalizeText('useproduct.widget.cancel') }</Button>
                             <Button variant="success" onClick={ useProduct }>{ LocalizeText('widget.monsterplant_seed.button.use') }</Button>
-                        </Flex>
-                    </Column>
-                </Flex>
+                        </div>
+                    </div>
+                </div>
             </NitroCardContentView>
         </NitroCardView>
     );
diff --git a/src/components/room/widgets/furniture/context-menu/PurchasableClothingConfirmView.tsx b/src/components/room/widgets/furniture/context-menu/PurchasableClothingConfirmView.tsx
index 090c1edc..7de7ec20 100644
--- a/src/components/room/widgets/furniture/context-menu/PurchasableClothingConfirmView.tsx
+++ b/src/components/room/widgets/furniture/context-menu/PurchasableClothingConfirmView.tsx
@@ -1,7 +1,7 @@
 import { AvatarFigurePartType, GetAvatarRenderManager, GetSessionDataManager, RedeemItemClothingComposer, RoomObjectCategory, UserFigureComposer } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { FurniCategory, GetFurnitureDataForRoomObject, LocalizeText, SendMessageComposer } from '../../../../../api';
-import { Base, Button, Column, Flex, LayoutAvatarImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../../common';
+import { Button, Column, LayoutAvatarImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../../common';
 import { useRoom } from '../../../../../hooks';
 
 interface PurchasableClothingConfirmViewProps
@@ -81,23 +81,23 @@ export const PurchasableClothingConfirmView: FC<PurchasableClothingConfirmViewPr
         <NitroCardView className="nitro-use-product-confirmation">
             <NitroCardHeaderView headerText={ LocalizeText('useproduct.widget.title.bind_clothing') } onCloseClick={ onClose } />
             <NitroCardContentView center>
-                <Flex gap={ 2 } overflow="hidden">
-                    <Column>
-                        <Base className="mannequin-preview">
-                            <LayoutAvatarImageView figure={ newFigure } direction={ 2 } />
-                        </Base>
-                    </Column>
-                    <Column justifyContent="between" overflow="auto">
+                <div className="flex overflow-hidden gap-2">
+                    <div className="flex flex-column">
+                        <div className="mannequin-preview">
+                            <LayoutAvatarImageView direction={ 2 } figure={ newFigure } />
+                        </div>
+                    </div>
+                    <div className="flex flex-column justify-content-between overflow-auto">
                         <Column gap={ 2 }>
                             <Text>{ LocalizeText('useproduct.widget.text.bind_clothing') }</Text>
                             <Text>{ LocalizeText('useproduct.widget.info.bind_clothing') }</Text>
                         </Column>
-                        <Flex alignItems="center" justifyContent="between">
+                        <div className="flex items-center justify-content-between">
                             <Button variant="danger" onClick={ onClose }>{ LocalizeText('useproduct.widget.cancel') }</Button>
                             <Button variant="success" onClick={ useProduct }>{ LocalizeText('useproduct.widget.bind_clothing') }</Button>
-                        </Flex>
-                    </Column>
-                </Flex>
+                        </div>
+                    </div>
+                </div>
             </NitroCardContentView>
         </NitroCardView>
     );
diff --git a/src/components/room/widgets/furniture/playlist-editor/DiskInventoryView.tsx b/src/components/room/widgets/furniture/playlist-editor/DiskInventoryView.tsx
index baf1bbfd..e214a421 100644
--- a/src/components/room/widgets/furniture/playlist-editor/DiskInventoryView.tsx
+++ b/src/components/room/widgets/furniture/playlist-editor/DiskInventoryView.tsx
@@ -1,7 +1,7 @@
 import { CreateLinkEvent, GetSoundManager, IAdvancedMap, MusicPriorities } from '@nitrots/nitro-renderer';
 import { FC, MouseEvent, useCallback, useEffect, useState } from 'react';
 import { CatalogPageName, GetConfigurationValue, GetDiskColor, LocalizeText } from '../../../../../api';
-import { AutoGrid, Base, Button, Flex, LayoutGridItem, Text } from '../../../../../common';
+import { AutoGrid, Button, Flex, LayoutGridItem, Text } from '../../../../../common';
 
 export interface DiskInventoryViewProps
 {
@@ -52,8 +52,8 @@ export const DiskInventoryView: FC<DiskInventoryViewProps> = props =>
     }, []);
 
     return (<>
-        <div className="bg-success py-3 container-fluid justify-content-center d-flex rounded">
-            <img src={ GetConfigurationValue('image.library.url') + 'playlist/title_mymusic.gif' } className="my-music" />
+        <div className="bg-success py-3 container-fluid justify-center flex rounded">
+            <img className="my-music" src={ GetConfigurationValue('image.library.url') + 'playlist/title_mymusic.gif' } />
             <h2 className="ms-4">{ LocalizeText('playlist.editor.my.music') }</h2>
         </div>
         <div className="h-100 overflow-y-scroll mt-4 py-2">
@@ -65,17 +65,17 @@ export const DiskInventoryView: FC<DiskInventoryViewProps> = props =>
                     const songInfo = GetSoundManager().musicController?.getSongInfo(songId);
 
                     return (
-                        <LayoutGridItem key={ index } itemActive={ (selectedItem === index) } onClick={ () => setSelectedItem(prev => prev === index ? -1 : index) } classNames={ [ 'text-black' ] }>
+                        <LayoutGridItem key={ index } classNames={ [ 'text-black' ] } itemActive={ (selectedItem === index) } onClick={ () => setSelectedItem(prev => prev === index ? -1 : index) }>
                             <div className="disk-image flex-shrink-0 mb-n2" style={ { backgroundColor: GetDiskColor(songInfo?.songData) } }>
                             </div>
-                            <Text truncate fullWidth className="text-center">{ songInfo?.name }</Text>
+                            <Text fullWidth truncate className="text-center">{ songInfo?.name }</Text>
                             { (selectedItem === index) &&
-                                    <Flex position="absolute" className="bottom-0 mb-1 bg-secondary p-1 rounded" alignItems="center" justifyContent="center" gap={ 2 }>
-                                        <Button onClick={ event => previewSong(event, songId) } variant="light">
-                                            <Base className={ (previewSongId === songId) ? 'pause-btn' : 'preview-song' }/>
+                                    <Flex alignItems="center" className="bottom-0 mb-1 bg-secondary p-1 rounded" gap={ 2 } justifyContent="center" position="absolute">
+                                        <Button variant="light" onClick={ event => previewSong(event, songId) }>
+                                            <div className={ (previewSongId === songId) ? 'pause-btn' : 'preview-song' }/>
                                         </Button>
-                                        <Button onClick={ event => addSong(event, diskId) } variant="light">
-                                            <Base className="move-disk"/>
+                                        <Button variant="light" onClick={ event => addSong(event, diskId) }>
+                                            <div className="move-disk"/>
                                         </Button>
                                     </Flex>
                             }
@@ -89,6 +89,6 @@ export const DiskInventoryView: FC<DiskInventoryViewProps> = props =>
             <div>{ LocalizeText('playlist.editor.text.you.can.buy.some.from.the.catalogue') }</div>
             <button className="btn btn-primary btn-sm" onClick={ () => openCatalogPage() }>{ LocalizeText('playlist.editor.button.open.catalogue') }</button>
         </div>
-        <img src={ GetConfigurationValue('image.library.url') + 'playlist/background_get_more_music.gif' } className="get-more" />
+        <img className="get-more" src={ GetConfigurationValue('image.library.url') + 'playlist/background_get_more_music.gif' } />
     </>);
 }
diff --git a/src/components/room/widgets/furniture/playlist-editor/FurniturePlaylistEditorWidgetView.tsx b/src/components/room/widgets/furniture/playlist-editor/FurniturePlaylistEditorWidgetView.tsx
index ceb0db9c..97f5ea39 100644
--- a/src/components/room/widgets/furniture/playlist-editor/FurniturePlaylistEditorWidgetView.tsx
+++ b/src/components/room/widgets/furniture/playlist-editor/FurniturePlaylistEditorWidgetView.tsx
@@ -15,12 +15,12 @@ export const FurniturePlaylistEditorWidgetView: FC<{}> = props =>
         <NitroCardView className="nitro-playlist-editor-widget" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText('playlist.editor.title') } onCloseClick={ onClose } />
             <NitroCardContentView>
-                <div className="d-flex flex-row gap-1 h-100">
-                    <div className="w-50 position-relative overflow-hidden h-100 rounded d-flex flex-column">
+                <div className="flex flex-row gap-1 h-100">
+                    <div className="w-50 position-relative overflow-hidden h-100 rounded flex flex-column">
                         <DiskInventoryView addToPlaylist={ addToPlaylist } diskInventory={ diskInventory } />
                     </div>
-                    <div className="w-50 position-relative overflow-hidden h-100 rounded d-flex flex-column">
-                        <SongPlaylistView furniId={ objectId } removeFromPlaylist={ removeFromPlaylist } playlist={ playlist } togglePlayPause={ togglePlayPause } currentPlayingIndex={ currentPlayingIndex }/>
+                    <div className="w-50 position-relative overflow-hidden h-100 rounded flex flex-column">
+                        <SongPlaylistView currentPlayingIndex={ currentPlayingIndex } furniId={ objectId } playlist={ playlist } removeFromPlaylist={ removeFromPlaylist } togglePlayPause={ togglePlayPause }/>
                     </div>
                 </div>
             </NitroCardContentView>
diff --git a/src/components/room/widgets/furniture/playlist-editor/SongPlaylistView.tsx b/src/components/room/widgets/furniture/playlist-editor/SongPlaylistView.tsx
index 3e88329c..e4362488 100644
--- a/src/components/room/widgets/furniture/playlist-editor/SongPlaylistView.tsx
+++ b/src/components/room/widgets/furniture/playlist-editor/SongPlaylistView.tsx
@@ -1,7 +1,7 @@
 import { ISongInfo } from '@nitrots/nitro-renderer';
 import { FC, useState } from 'react';
 import { GetConfigurationValue, GetDiskColor, LocalizeText } from '../../../../../api';
-import { Base, Button, Flex, Text } from '../../../../../common';
+import { Button, Text } from '../../../../../common';
 
 export interface SongPlaylistViewProps
 {
@@ -28,49 +28,48 @@ export const SongPlaylistView: FC<SongPlaylistViewProps> = props =>
     }
 
     return (<>
-        <div className="bg-primary py-3 container-fluid justify-content-center d-flex rounded">
-            <img src={ GetConfigurationValue('image.library.url') + 'playlist/title_playlist.gif' } className="playlist-img" />
+        <div className="bg-primary py-3 container-fluid justify-center flex rounded">
+            <img className="playlist-img" src={ GetConfigurationValue('image.library.url') + 'playlist/title_playlist.gif' } />
             <h2 className="ms-4">{ LocalizeText('playlist.editor.playlist') }</h2>
         </div>
         <div className="h-100 overflow-y-scroll py-2">
-            <Flex column gap={ 2 }>
+            <div className="flex flex-column gap-2">
                 { playlist && playlist.map( (songInfo, index) =>
                 {
-                    return <Flex gap={ 1 } key={ index } className={ 'text-black cursor-pointer ' + (selectedItem === index ? 'border border-muted border-2 rounded' : 'border-2') } alignItems="center" onClick={ () => setSelectedItem(prev => prev === index ? -1 : index) }>
-                        <Base onClick={ () => action(index) } className={ 'disk-2 ' + (selectedItem === index ? 'selected-song' : '') } style={ { backgroundColor: (selectedItem === index ? '' : GetDiskColor(songInfo.songData)) } }/>
+                    return <div key={ index } className={ 'flex gap-1 items-center text-black cursor-pointer ' + (selectedItem === index ? 'border border-muted border-2 rounded' : 'border-2') } onClick={ () => setSelectedItem(prev => prev === index ? -1 : index) }>
+                        <div className={ 'disk-2 ' + (selectedItem === index ? 'selected-song' : '') } style={ { backgroundColor: (selectedItem === index ? '' : GetDiskColor(songInfo.songData)) } } onClick={ () => action(index) }/>
                         { songInfo.name }
-                    </Flex>
+                    </div>
                 }) }
 
-            </Flex>
+            </div>
         </div>
         { (!playlist || playlist.length === 0 ) &&
         <><div className="playlist-bottom text-black p-1 ms-5">
             <h5>{ LocalizeText('playlist.editor.add.songs.to.your.playlist') }</h5>
             <div>{ LocalizeText('playlist.editor.text.click.song.to.choose.click.again.to.move') }</div>
         </div>
-        <img src={ GetConfigurationValue('image.library.url') + 'playlist/background_add_songs.gif' } className="add-songs" /></>
+        <img className="add-songs" src={ GetConfigurationValue('image.library.url') + 'playlist/background_add_songs.gif' } /></>
         }
         { (playlist && playlist.length > 0) &&
             <>
                 { (currentPlayingIndex === -1) &&
-                <Button variant="success" size="lg" onClick={ () => playPause(furniId, selectedItem) }>
+                <Button size="lg" variant="success" onClick={ () => playPause(furniId, selectedItem) }>
                     { LocalizeText('playlist.editor.button.play.now') }
                 </Button>
                 }
                 { (currentPlayingIndex !== -1) &&
-                    <Flex gap={ 1 }>
+                    <div className="flex gap-1">
                         <Button variant="danger" onClick={ () => playPause(furniId, selectedItem) }>
-                            <Base className="pause-song"/>
+                            <div className="pause-song"/>
                         </Button>
-                        <Flex column>
+                        <div className="flex flex-column">
                             <Text bold display="block">{ LocalizeText('playlist.editor.text.now.playing.in.your.room') }</Text>
                             <Text>
                                 { playlist[currentPlayingIndex]?.name + ' - ' + playlist[currentPlayingIndex]?.creator }
                             </Text>
-                        </Flex>
-
-                    </Flex>
+                        </div>
+                    </div>
                 }
             </>
         }
diff --git a/src/components/room/widgets/mysterybox/MysteryBoxExtensionView.tsx b/src/components/room/widgets/mysterybox/MysteryBoxExtensionView.tsx
index 3f698262..b1d4ad80 100644
--- a/src/components/room/widgets/mysterybox/MysteryBoxExtensionView.tsx
+++ b/src/components/room/widgets/mysterybox/MysteryBoxExtensionView.tsx
@@ -2,7 +2,7 @@ import { MysteryBoxKeysUpdateEvent } from '@nitrots/nitro-renderer';
 import { FC, useState } from 'react';
 import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
 import { ColorUtils, LocalizeText } from '../../../../api';
-import { Base, Column, Flex, LayoutGridItem, Text } from '../../../../common';
+import { Flex, LayoutGridItem, Text } from '../../../../common';
 import { useNitroEvent } from '../../../../hooks';
 
 const colorMap = {
@@ -38,9 +38,9 @@ export const MysteryBoxExtensionView: FC<{}> = props =>
     if(keyColor === '' && boxColor === '') return null;
 
     return (
-        <Base className="nitro-notification-bubble rounded mysterybox-extension">
-            <Column>
-                <Flex alignItems="center" justifyContent="between" pointer onClick={ event => setIsOpen(value => !value) }>
+        <div className="nitro-notification-bubble rounded mysterybox-extension">
+            <div className="flex flex-column">
+                <Flex pointer alignItems="center" justifyContent="between" onClick={ event => setIsOpen(value => !value) }>
                     <Text variant="white">{ LocalizeText('mysterybox.tracker.title') }</Text>
                     { isOpen && <FaChevronUp className="fa-icon" /> }
                     { !isOpen && <FaChevronDown className="fa-icon" /> }
@@ -48,7 +48,7 @@ export const MysteryBoxExtensionView: FC<{}> = props =>
                 { isOpen &&
                     <>
                         <Text variant="white">{ LocalizeText('mysterybox.tracker.description') }</Text>
-                        <Flex justifyContent="center" alignItems="center" gap={ 2 }>
+                        <div className="flex items-center gap-2 justify-center">
                             <LayoutGridItem className="mysterybox-container">
                                 <div className="box-image flex-shrink-0" style={ { backgroundColor: getRgbColor(boxColor) } }>
                                     <div className="chain-overlay-image" />
@@ -59,9 +59,9 @@ export const MysteryBoxExtensionView: FC<{}> = props =>
                                     <div className="key-overlay-image" />
                                 </div>
                             </LayoutGridItem>
-                        </Flex>
+                        </div>
                     </> }
-            </Column>
-        </Base>
+            </div>
+        </div>
     );
 }
diff --git a/src/components/room/widgets/object-location/ObjectLocationView.tsx b/src/components/room/widgets/object-location/ObjectLocationView.tsx
index 237090b7..b82be02e 100644
--- a/src/components/room/widgets/object-location/ObjectLocationView.tsx
+++ b/src/components/room/widgets/object-location/ObjectLocationView.tsx
@@ -1,7 +1,7 @@
 import { GetTicker } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useRef, useState } from 'react';
 import { GetRoomObjectBounds, GetRoomSession } from '../../../../api';
-import { Base, BaseProps } from '../../../../common';
+import { BaseProps } from '../../../../common';
 
 interface ObjectLocationViewProps extends BaseProps<HTMLDivElement>
 {
@@ -12,7 +12,7 @@ interface ObjectLocationViewProps extends BaseProps<HTMLDivElement>
 
 export const ObjectLocationView: FC<ObjectLocationViewProps> = props =>
 {
-    const { objectId = -1, category = -1, noFollow = false, position = 'absolute', ...rest } = props;
+    const { objectId = -1, category = -1, noFollow = false, ...rest } = props;
     const [ pos, setPos ] = useState<{ x: number, y: number }>({ x: -1, y: -1 });
     const elementRef = useRef<HTMLDivElement>();
 
@@ -57,5 +57,5 @@ export const ObjectLocationView: FC<ObjectLocationViewProps> = props =>
         }
     }, [ objectId, category, noFollow ]);
 
-    return <Base innerRef={ elementRef } position={ position } visible={ (pos.x + (elementRef.current ? elementRef.current.offsetWidth : 0)) > -1 } className="object-location" style={ { left: pos.x, top: pos.y } } { ...rest } />;
+    return <div ref={ elementRef } className="object-location position-absolute" style={ { left: pos.x, top: pos.y, visibility: ((pos.x + (elementRef.current ? elementRef.current.offsetWidth : 0)) > -1) ? 'visible' : 'hidden' } } { ...rest } />;
 }
diff --git a/src/components/room/widgets/pet-package/PetPackageWidgetView.tsx b/src/components/room/widgets/pet-package/PetPackageWidgetView.tsx
index e204f5e3..800aec37 100644
--- a/src/components/room/widgets/pet-package/PetPackageWidgetView.tsx
+++ b/src/components/room/widgets/pet-package/PetPackageWidgetView.tsx
@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { Button } from 'react-bootstrap';
 import { GetConfigurationValue, LocalizeText } from '../../../../api';
-import { Base, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
 import { usePetPackageWidget } from '../../../../hooks';
 
 export const PetPackageWidgetView: FC<{}> = props =>
@@ -14,26 +14,26 @@ export const PetPackageWidgetView: FC<{}> = props =>
                 <NitroCardView className="nitro-pet-package no-resize" theme="primary-slim">
                     <NitroCardHeaderView center headerText={ objectType === 'gnome_box' ? LocalizeText('widgets.gnomepackage.name.title') : LocalizeText('furni.petpackage.open') } onCloseClick={ () => onClose() } />
                     <NitroCardContentView>
-                        <Flex className="pet-package-container-top p-3">
+                        <div className="flex pet-package-container-top p-3">
                             <div className={ `package-image-${ objectType } flex-shrink-0` }></div>
                             <div className="m-2">
-                                <Text variant="white" className="package-text-big">{ objectType === 'gnome_box' ? LocalizeText('widgets.gnomepackage.name.title') : LocalizeText('furni.petpackage') }</Text>
+                                <Text className="package-text-big" variant="white">{ objectType === 'gnome_box' ? LocalizeText('widgets.gnomepackage.name.title') : LocalizeText('furni.petpackage') }</Text>
                             </div>
-                        </Flex>
-                        <Flex className="pet-package-container-bottom p-2">
-                            <Column gap={ 1 }>
-                                <Flex alignItems="center" className="bg-white rounded py-1 px-2 input-pet-package-container">
-                                    <input type="text" className="form-control form-control-sm input-pet-package" maxLength={ GetConfigurationValue('pet.package.name.max.length') } placeholder={ objectType === 'gnome_box' ? LocalizeText('widgets.gnomepackage.name.select') : LocalizeText('widgets.petpackage.name.title') } value={ petName } onChange={ event => onChangePetName(event.target.value) } />
+                        </div>
+                        <div className="flex pet-package-container-bottom p-2">
+                            <div className="flex flex-column gap-1">
+                                <div className="flex items-center bg-white rounded py-1 px-2 input-pet-package-container">
+                                    <input className="form-control form-control-sm input-pet-package" maxLength={ GetConfigurationValue('pet.package.name.max.length') } placeholder={ objectType === 'gnome_box' ? LocalizeText('widgets.gnomepackage.name.select') : LocalizeText('widgets.petpackage.name.title') } type="text" value={ petName } onChange={ event => onChangePetName(event.target.value) } />
                                     <div className="package-pencil-image flex-shrink-0 small fa-icon"></div>
-                                </Flex>
+                                </div>
                                 { (errorResult.length > 0) &&
-                                        <Base className="invalid-feedback d-block m-0">{ errorResult }</Base> }
-                                <Flex className="mt-2" gap={ 5 } display="flex" justifyContent="center" alignItems="center">
+                                    <div className="invalid-feedback d-block m-0">{ errorResult }</div> }
+                                <div className="flex items-center gap-5 justify-center mt-2">
                                     <Text pointer className="text-decoration" onClick={ () => onClose() }>{ LocalizeText('cancel') }</Text>
-                                    <Button variant={ petName.length < 3 ? 'danger' : 'success' } disabled={ petName.length < 3 } onClick={ () => onConfirm() }>{ objectType === 'gnome_box' ? LocalizeText('widgets.gnomepackage.name.pick') : LocalizeText('furni.petpackage.confirm') }</Button>
-                                </Flex>
-                            </Column>
-                        </Flex>
+                                    <Button disabled={ petName.length < 3 } variant={ petName.length < 3 ? 'danger' : 'success' } onClick={ () => onConfirm() }>{ objectType === 'gnome_box' ? LocalizeText('widgets.gnomepackage.name.pick') : LocalizeText('furni.petpackage.confirm') }</Button>
+                                </div>
+                            </div>
+                        </div>
                     </NitroCardContentView>
                 </NitroCardView>
             }
diff --git a/src/components/room/widgets/room-filter-words/RoomFilterWordsWidgetView.tsx b/src/components/room/widgets/room-filter-words/RoomFilterWordsWidgetView.tsx
index 4f7825f7..e88704fd 100644
--- a/src/components/room/widgets/room-filter-words/RoomFilterWordsWidgetView.tsx
+++ b/src/components/room/widgets/room-filter-words/RoomFilterWordsWidgetView.tsx
@@ -1,7 +1,7 @@
 import { UpdateRoomFilterMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useState } from 'react';
 import { LocalizeText, SendMessageComposer } from '../../../../api';
-import { Button, classNames, Column, Flex, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
+import { Button, Column, Flex, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text, classNames } from '../../../../common';
 import { useFilterWordsWidget, useNavigator } from '../../../../hooks';
 
 export const RoomFilterWordsWidgetView: FC<{}> = props =>
@@ -51,22 +51,22 @@ export const RoomFilterWordsWidgetView: FC<{}> = props =>
         <NitroCardView className="nitro-guide-tool no-resize" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText('navigator.roomsettings.roomfilter') } onCloseClick={ () => onClose() } />
             <NitroCardContentView className="text-black">
-                <Grid className="d-flex align-items-center justify-content-end gap-2">
-                    <input type="text" className="form-control form-control-sm" maxLength={ 255 } value={ word } onChange={ event => onTyping(event.target.value) } />
+                <Grid className="flex items-center justify-content-end gap-2">
+                    <input className="form-control form-control-sm" maxLength={ 255 } type="text" value={ word } onChange={ event => onTyping(event.target.value) } />
                     <Button onClick={ () => processAction(true) }>{ LocalizeText('navigator.roomsettings.roomfilter.addword') }</Button>
                 </Grid>
-                <Column overflow="auto" gap={ 0 } className="form-control form-control-sm" style={ { height: '100px' } }>
+                <Column className="form-control form-control-sm" gap={ 0 } overflow="auto" style={ { height: '100px' } }>
                     { wordsFilter && (wordsFilter.length > 0) && wordsFilter.map((word, index) =>
                     {
                         return (
-                            <Flex key={ index } alignItems="center" className={ classNames('rounded p-1', (selectedWord === word) && 'bg-muted') } pointer onClick={ event => onSelectedWord(word) }>
+                            <Flex key={ index } pointer alignItems="center" className={ classNames('rounded p-1', (selectedWord === word) && 'bg-muted') } onClick={ event => onSelectedWord(word) }>
                                 <Text truncate>{ word }</Text>
                             </Flex>
                         )
                     }) }
                 </Column>
-                <Grid className="d-flex align-items-center justify-content-end gap-2">
-                    <Button variant="danger" onClick={ () => processAction(false) } disabled={ wordsFilter.length === 0 || !isSelectingWord }>{ LocalizeText('navigator.roomsettings.roomfilter.removeword') }</Button>
+                <Grid className="flex items-center justify-content-end gap-2">
+                    <Button disabled={ wordsFilter.length === 0 || !isSelectingWord } variant="danger" onClick={ () => processAction(false) }>{ LocalizeText('navigator.roomsettings.roomfilter.removeword') }</Button>
                 </Grid>
             </NitroCardContentView>
         </NitroCardView>
diff --git a/src/components/room/widgets/room-promotes/RoomPromotesWidgetView.tsx b/src/components/room/widgets/room-promotes/RoomPromotesWidgetView.tsx
index b97b35a1..7c9e631d 100644
--- a/src/components/room/widgets/room-promotes/RoomPromotesWidgetView.tsx
+++ b/src/components/room/widgets/room-promotes/RoomPromotesWidgetView.tsx
@@ -1,7 +1,7 @@
 import { DesktopViewEvent, GetSessionDataManager } from '@nitrots/nitro-renderer';
 import { FC, useState } from 'react';
 import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
-import { Base, Column, Flex, Text } from '../../../../common';
+import { Flex, Text } from '../../../../common';
 import { useMessageEvent, useRoomPromote } from '../../../../hooks';
 import { RoomPromoteEditWidgetView, RoomPromoteMyOwnEventWidgetView, RoomPromoteOtherEventWidgetView } from './views';
 
@@ -21,10 +21,10 @@ export const RoomPromotesWidgetView: FC<{}> = props =>
     return (
         <>
             { promoteInformation.data.adId !== -1 &&
-                <Base className="nitro-notification-bubble rounded">
-                    <Column>
-                        <Flex alignItems="center" justifyContent="between" pointer onClick={ event => setIsOpen(value => !value) }>
-                            <Text variant="white" overflow="hidden">{ promoteInformation.data.eventName }</Text>
+                <div className="nitro-notification-bubble rounded">
+                    <div className="flex flex-column">
+                        <Flex pointer alignItems="center" justifyContent="between" onClick={ event => setIsOpen(value => !value) }>
+                            <Text overflow="hidden" variant="white">{ promoteInformation.data.eventName }</Text>
                             { isOpen && <FaChevronUp className="fa-icon" /> }
                             { !isOpen && <FaChevronDown className="fa-icon" /> }
                         </Flex>
@@ -41,14 +41,14 @@ export const RoomPromotesWidgetView: FC<{}> = props =>
                         }
                         { isEditingPromote &&
                             <RoomPromoteEditWidgetView
+                                eventDescription={ promoteInformation.data.eventDescription }
                                 eventId={ promoteInformation.data.adId }
                                 eventName={ promoteInformation.data.eventName }
-                                eventDescription={ promoteInformation.data.eventDescription }
                                 setIsEditingPromote={ () => setIsEditingPromote(false) }
                             />
                         }
-                    </Column>
-                </Base>
+                    </div>
+                </div>
             }
         </>
     );
diff --git a/src/components/room/widgets/room-promotes/views/RoomPromoteEditWidgetView.tsx b/src/components/room/widgets/room-promotes/views/RoomPromoteEditWidgetView.tsx
index f9b84620..8698b6ec 100644
--- a/src/components/room/widgets/room-promotes/views/RoomPromoteEditWidgetView.tsx
+++ b/src/components/room/widgets/room-promotes/views/RoomPromoteEditWidgetView.tsx
@@ -1,7 +1,7 @@
 import { EditEventMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useState } from 'react';
 import { LocalizeText, SendMessageComposer } from '../../../../../api';
-import { Button, Column, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../../common';
+import { Button, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../../common';
 
 interface RoomPromoteEditWidgetViewProps
 {
@@ -27,17 +27,17 @@ export const RoomPromoteEditWidgetView: FC<RoomPromoteEditWidgetViewProps> = pro
         <NitroCardView className="nitro-guide-tool" theme="primary-slim">
             <NitroCardHeaderView headerText={ LocalizeText('navigator.eventsettings.editcaption') } onCloseClick={ () => setIsEditingPromote(false) } />
             <NitroCardContentView className="text-black">
-                <Column>
+                <div className="flex flex-column">
                     <Text bold>{ LocalizeText('navigator.eventsettings.name') }</Text>
-                    <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('navigator.eventsettings.name') } maxLength={ 64 } value={ newEventName } onChange={ event => setNewEventName(event.target.value) } />
-                </Column>
-                <Column>
+                    <input className="form-control form-control-sm" maxLength={ 64 } placeholder={ LocalizeText('navigator.eventsettings.name') } type="text" value={ newEventName } onChange={ event => setNewEventName(event.target.value) } />
+                </div>
+                <div className="flex flex-column">
                     <Text bold>{ LocalizeText('navigator.eventsettings.desc') }</Text>
-                    <textarea className="form-control form-control-sm" placeholder={ LocalizeText('navigator.eventsettings.desc') } maxLength={ 64 } value={ newEventDescription } onChange={ event => setNewEventDescription(event.target.value) }></textarea>
-                </Column>
-                <Column>
+                    <textarea className="form-control form-control-sm" maxLength={ 64 } placeholder={ LocalizeText('navigator.eventsettings.desc') } value={ newEventDescription } onChange={ event => setNewEventDescription(event.target.value) }></textarea>
+                </div>
+                <div className="flex flex-column">
                     <Button fullWidth disabled={ !newEventName || !newEventDescription } variant={ (!newEventName || !newEventDescription) ? 'danger' : 'success' } onClick={ event => updatePromote() }>{ LocalizeText('navigator.eventsettings.edit') }</Button>
-                </Column>
+                </div>
             </NitroCardContentView>
         </NitroCardView>
     );
diff --git a/src/components/room/widgets/room-promotes/views/RoomPromoteMyOwnEventWidgetView.tsx b/src/components/room/widgets/room-promotes/views/RoomPromoteMyOwnEventWidgetView.tsx
index 01a5f78c..fdf5fe3d 100644
--- a/src/components/room/widgets/room-promotes/views/RoomPromoteMyOwnEventWidgetView.tsx
+++ b/src/components/room/widgets/room-promotes/views/RoomPromoteMyOwnEventWidgetView.tsx
@@ -27,7 +27,7 @@ export const RoomPromoteMyOwnEventWidgetView: FC<RoomPromoteMyOwnEventWidgetView
                 <Text variant="white">{ eventDescription }</Text>
             </Flex>
             <br /><br />
-            <Grid className="d-flex align-items-center justify-content-end gap-2">
+            <Grid className="flex items-center justify-content-end gap-2">
                 <Button className="btn btn-primary w-100 btn-sm" onClick={ event => setIsEditingPromote(true) }>{ LocalizeText('navigator.roominfo.editevent') }</Button>
                 <Button className="btn btn-success w-100 btn-sm" onClick={ event => extendPromote() }>{ LocalizeText('roomad.extend.event') }</Button>
             </Grid>
diff --git a/src/components/room/widgets/room-promotes/views/RoomPromoteOtherEventWidgetView.tsx b/src/components/room/widgets/room-promotes/views/RoomPromoteOtherEventWidgetView.tsx
index 5adb5176..92721ea9 100644
--- a/src/components/room/widgets/room-promotes/views/RoomPromoteOtherEventWidgetView.tsx
+++ b/src/components/room/widgets/room-promotes/views/RoomPromoteOtherEventWidgetView.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { LocalizeText } from '../../../../../api';
-import { Base, Column, Flex, Text } from '../../../../../common';
+import { Column, Flex, Text } from '../../../../../common';
 
 interface RoomPromoteOtherEventWidgetViewProps
 {
@@ -18,12 +18,12 @@ export const RoomPromoteOtherEventWidgetView: FC<RoomPromoteOtherEventWidgetView
             </Flex>
             <br /><br />
             <Column alignItems="center" gap={ 1 }>
-                <Base fullWidth overflow="hidden" position="relative" className="bg-light-dark rounded">
-                    <Flex fit center position="absolute">
-                        <Text variant="white" center>{ LocalizeText('navigator.eventinprogress') }</Text>
-                    </Flex>
+                <div className="bg-light-dark rounded position-relative overflow-hidden w-100">
+                    <div className="flex justify-center items-center size-full position-absolute">
+                        <Text center variant="white">{ LocalizeText('navigator.eventinprogress') }</Text>
+                    </div>
                     <Text>&nbsp;</Text>
-                </Base>
+                </div>
             </Column>
         </>
     );
diff --git a/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx b/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx
index 76fd0222..5ebc803e 100644
--- a/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx
+++ b/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx
@@ -1,7 +1,7 @@
 import { CreateLinkEvent, GetGuestRoomResultEvent, GetRoomEngine, NavigatorSearchComposer, RateFlatMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { LocalizeText, SendMessageComposer } from '../../../../api';
-import { Base, Column, Flex, Text, TransitionAnimation, TransitionAnimationTypes, classNames } from '../../../../common';
+import { Text, TransitionAnimation, TransitionAnimationTypes, classNames } from '../../../../common';
 import { useMessageEvent, useNavigator, useRoom } from '../../../../hooks';
 
 export const RoomToolsWidgetView: FC<{}> = props =>
@@ -71,30 +71,30 @@ export const RoomToolsWidgetView: FC<{}> = props =>
     }, [ roomName, roomOwner, roomTags ]);
 
     return (
-        <Flex className="nitro-room-tools-container" gap={ 2 }>
-            <Column center className="nitro-room-tools p-2">
-                <Base pointer title={ LocalizeText('room.settings.button.text') } className="icon icon-cog" onClick={ () => handleToolClick('settings') } />
-                <Base pointer title={ LocalizeText('room.zoom.button.text') } onClick={ () => handleToolClick('zoom') } className={ classNames('icon', (!isZoomedIn && 'icon-zoom-less'), (isZoomedIn && 'icon-zoom-more')) } />
-                <Base pointer title={ LocalizeText('room.chathistory.button.text') } onClick={ () => handleToolClick('chat_history') } className="icon icon-chat-history" />
+        <div className="flex gap-2 nitro-room-tools-container">
+            <div className="flex flex-column justify-center items-center nitro-room-tools p-2">
+                <div className="icon icon-cog cursor-pointer" title={ LocalizeText('room.settings.button.text') } onClick={ () => handleToolClick('settings') } />
+                <div className={ classNames('cursor-pointer', 'icon', (!isZoomedIn && 'icon-zoom-less'), (isZoomedIn && 'icon-zoom-more')) } title={ LocalizeText('room.zoom.button.text') } onClick={ () => handleToolClick('zoom') } />
+                <div className="icon icon-chat-history cursor-pointer" title={ LocalizeText('room.chathistory.button.text') } onClick={ () => handleToolClick('chat_history') } />
                 { navigatorData.canRate &&
-                    <Base pointer title={ LocalizeText('room.like.button.text') } onClick={ () => handleToolClick('like_room') } className="icon icon-like-room" /> }
-            </Column>
-            <Column justifyContent="center">
-                <TransitionAnimation type={ TransitionAnimationTypes.SLIDE_LEFT } inProp={ isOpen } timeout={ 300 }>
-                    <Column center>
-                        <Column className="nitro-room-tools-info rounded py-2 px-3">
-                            <Column gap={ 1 }>
-                                <Text wrap variant="white" fontSize={ 4 }>{ roomName }</Text>
-                                <Text variant="muted" fontSize={ 5 }>{ roomOwner }</Text>
-                            </Column>
+                    <div className="icon icon-like-room cursor-pointer" title={ LocalizeText('room.like.button.text') } onClick={ () => handleToolClick('like_room') } /> }
+            </div>
+            <div className="flex flex-column justify-center">
+                <TransitionAnimation inProp={ isOpen } timeout={ 300 } type={ TransitionAnimationTypes.SLIDE_LEFT }>
+                    <div className="flex flex-column justify-center items-center">
+                        <div className="flex flex-column nitro-room-tools-info rounded py-2 px-3">
+                            <div className="flex flex-column gap-1">
+                                <Text wrap fontSize={ 4 } variant="white">{ roomName }</Text>
+                                <Text fontSize={ 5 } variant="muted">{ roomOwner }</Text>
+                            </div>
                             { roomTags && roomTags.length > 0 &&
-                                <Flex gap={ 2 }>
-                                    { roomTags.map((tag, index) => <Text key={ index } small pointer variant="white" className="rounded bg-primary p-1" onClick={ () => handleToolClick('navigator_search_tag', tag) }>#{ tag }</Text>) }
-                                </Flex> }
-                        </Column>
-                    </Column>
+                                <div className="flex gap-2">
+                                    { roomTags.map((tag, index) => <Text key={ index } pointer small className="rounded bg-primary p-1" variant="white" onClick={ () => handleToolClick('navigator_search_tag', tag) }>#{ tag }</Text>) }
+                                </div> }
+                        </div>
+                    </div>
                 </TransitionAnimation>
-            </Column>
-        </Flex>
+            </div>
+        </div>
     );
 }
diff --git a/src/components/room/widgets/user-location/UserLocationView.tsx b/src/components/room/widgets/user-location/UserLocationView.tsx
index ca281ec9..123f3476 100644
--- a/src/components/room/widgets/user-location/UserLocationView.tsx
+++ b/src/components/room/widgets/user-location/UserLocationView.tsx
@@ -20,5 +20,5 @@ export const UserLocationView: FC<UserLocationViewProps> = props =>
 
     if(!userData) return null;
 
-    return <ObjectLocationView objectId={ userData.roomIndex } category={ RoomObjectCategory.UNIT } { ...rest } />;
+    return <ObjectLocationView category={ RoomObjectCategory.UNIT } objectId={ userData.roomIndex } { ...rest } />;
 }
diff --git a/src/components/room/widgets/word-quiz/WordQuizQuestionView.tsx b/src/components/room/widgets/word-quiz/WordQuizQuestionView.tsx
index 3b4d051e..5f54d49f 100644
--- a/src/components/room/widgets/word-quiz/WordQuizQuestionView.tsx
+++ b/src/components/room/widgets/word-quiz/WordQuizQuestionView.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { VALUE_KEY_DISLIKE, VALUE_KEY_LIKE } from '../../../../api';
-import { Base, Column, Flex, Text } from '../../../../common';
+import { Column, Flex, Text } from '../../../../common';
 
 interface WordQuizQuestionViewProps
 {
@@ -16,29 +16,29 @@ export const WordQuizQuestionView: FC<WordQuizQuestionViewProps> = props =>
     const { question = null, canVote = null, vote = null, noVotes = null, yesVotes = null } = props;
     
     return (
-        <Column gap={ 2 } className="wordquiz-question p-2">
+        <Column className="wordquiz-question p-2" gap={ 2 }>
             { !canVote &&
-                <Flex fullWidth alignItems="center" gap={ 2 }>
-                    <Flex center pointer className="bg-danger rounded p-2">
+                <div className="flex w-100 items-center gap-2">
+                    <div className="flex items-center justify-center cursor-pointer bg-danger rounded p-2">
                         <Text variant="white">{ noVotes }</Text>
-                    </Flex>
-                    <Text variant="white" center textBreak>{ question }</Text>
-                    <Flex center pointer className="bg-success rounded p-2">
+                    </div>
+                    <Text center textBreak variant="white">{ question }</Text>
+                    <div className="flex items-center justify-center cursor-pointer bg-success rounded p-2">
                         <Text variant="white">{ yesVotes }</Text>
-                    </Flex>
-                </Flex> }
+                    </div>
+                </div> }
             { canVote &&
-                <Column>
-                    <Text variant="white" center textBreak>{ question }</Text>
-                    <Flex fullWidth justifyContent="center" gap={ 1 }>
+                <div className="flex flex-column">
+                    <Text center textBreak variant="white">{ question }</Text>
+                    <div className="flex w-100 gap-1 justify-center">
                         <Flex center pointer className="bg-danger rounded p-1" onClick={ event => vote(VALUE_KEY_DISLIKE) }>
-                            <Base className="word-quiz-dislike" />
+                            <div className="word-quiz-dislike" />
                         </Flex>
                         <Flex center pointer className="bg-success rounded p-1" onClick={ event => vote(VALUE_KEY_LIKE) }>
-                            <Base className="word-quiz-like" />
+                            <div className="word-quiz-like" />
                         </Flex>
-                    </Flex>
-                </Column> }
+                    </div>
+                </div> }
         </Column>
     );
 }
diff --git a/src/components/room/widgets/word-quiz/WordQuizVoteView.tsx b/src/components/room/widgets/word-quiz/WordQuizVoteView.tsx
index 8437d763..68fc71ae 100644
--- a/src/components/room/widgets/word-quiz/WordQuizVoteView.tsx
+++ b/src/components/room/widgets/word-quiz/WordQuizVoteView.tsx
@@ -1,7 +1,7 @@
 import { RoomObjectCategory } from '@nitrots/nitro-renderer';
 import { FC } from 'react';
 import { VALUE_KEY_DISLIKE } from '../../../../api';
-import { Base, BaseProps, Flex } from '../../../../common';
+import { BaseProps } from '../../../../common';
 import { ObjectLocationView } from '../object-location/ObjectLocationView';
 
 interface WordQuizVoteViewProps extends BaseProps<HTMLDivElement>
@@ -15,10 +15,10 @@ export const WordQuizVoteView: FC<WordQuizVoteViewProps> = props =>
     const { userIndex = null, vote = null, ...rest } = props;
 
     return (
-        <ObjectLocationView objectId={ userIndex } category={ RoomObjectCategory.UNIT } { ...rest }>
-            <Flex center pointer className={ `bg-${ (vote === VALUE_KEY_DISLIKE) ? 'danger' : 'success' } rounded p-1` }>
-                <Base className={ `word-quiz-${ (vote === VALUE_KEY_DISLIKE) ? 'dislike' : 'like' }-sm` } />
-            </Flex>
+        <ObjectLocationView category={ RoomObjectCategory.UNIT } objectId={ userIndex } { ...rest }>
+            <div className={ `flex justify-center items-center cursor-pointer bg-${ (vote === VALUE_KEY_DISLIKE) ? 'danger' : 'success' } rounded p-1` }>
+                <div className={ `word-quiz-${ (vote === VALUE_KEY_DISLIKE) ? 'dislike' : 'like' }-sm` } />
+            </div>
         </ObjectLocationView>
     );
 }
diff --git a/src/components/room/widgets/word-quiz/WordQuizWidgetView.tsx b/src/components/room/widgets/word-quiz/WordQuizWidgetView.tsx
index a04cfd8a..b87598be 100644
--- a/src/components/room/widgets/word-quiz/WordQuizWidgetView.tsx
+++ b/src/components/room/widgets/word-quiz/WordQuizWidgetView.tsx
@@ -11,7 +11,7 @@ export const WordQuizWidgetView: FC<{}> = props =>
     return (
         <>
             { question &&
-                <WordQuizQuestionView question={ question.content } canVote={ !answerSent } vote={ vote } noVotes={ answerCounts.get(VALUE_KEY_DISLIKE) || 0 } yesVotes={ answerCounts.get(VALUE_KEY_LIKE) || 0 } /> }
+                <WordQuizQuestionView canVote={ !answerSent } noVotes={ answerCounts.get(VALUE_KEY_DISLIKE) || 0 } question={ question.content } vote={ vote } yesVotes={ answerCounts.get(VALUE_KEY_LIKE) || 0 } /> }
             { userAnswers &&
                 Array.from(userAnswers.entries()).map(([ key, value ], index) => <WordQuizVoteView key={ index } userIndex={ key } vote={ value.value } />) }
         </>
diff --git a/src/components/toolbar/ToolbarItemView.tsx b/src/components/toolbar/ToolbarItemView.tsx
new file mode 100644
index 00000000..9dae3b62
--- /dev/null
+++ b/src/components/toolbar/ToolbarItemView.tsx
@@ -0,0 +1,22 @@
+import { DetailedHTMLProps, forwardRef, HTMLAttributes, PropsWithChildren } from 'react';
+import { classNames } from '../../common';
+
+export const ToolbarItemView = forwardRef<HTMLDivElement, PropsWithChildren<{
+    icon: string;
+}> & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>((props, ref) =>
+{
+    const { icon = null, className = null, ...rest } = props;
+
+    return (
+        <div
+            ref={ ref }
+            className={ classNames(
+                'cursor-pointer',
+                `nitro-icon icon-${ icon }`,
+                className
+            ) }
+            { ...rest } />
+    );
+});
+
+ToolbarItemView.displayName = 'ToolbarItemView';
diff --git a/src/components/toolbar/ToolbarMeView.tsx b/src/components/toolbar/ToolbarMeView.tsx
index d0329ccb..2e4afcb4 100644
--- a/src/components/toolbar/ToolbarMeView.tsx
+++ b/src/components/toolbar/ToolbarMeView.tsx
@@ -1,7 +1,7 @@
 import { CreateLinkEvent, GetRoomEngine, GetSessionDataManager, MouseEventType, RoomObjectCategory } from '@nitrots/nitro-renderer';
 import { Dispatch, FC, PropsWithChildren, SetStateAction, useEffect, useRef } from 'react';
 import { DispatchUiEvent, GetConfigurationValue, GetRoomSession, GetUserProfile } from '../../api';
-import { Base, Flex, LayoutItemCountView } from '../../common';
+import { Flex, LayoutItemCountView } from '../../common';
 import { GuideToolEvent } from '../../events';
 
 interface ToolbarMeViewProps
@@ -35,17 +35,17 @@ export const ToolbarMeView: FC<PropsWithChildren<ToolbarMeViewProps>> = props =>
     }, [ setMeExpanded ]);
 
     return (
-        <Flex innerRef={ elementRef } alignItems="center" className="nitro-toolbar-me p-2" gap={ 2 }>
+        <Flex alignItems="center" className="nitro-toolbar-me p-2" gap={ 2 } innerRef={ elementRef }>
             { (GetConfigurationValue('guides.enabled') && useGuideTool) &&
-                <Base pointer className="navigation-item icon icon-me-helper-tool" onClick={ event => DispatchUiEvent(new GuideToolEvent(GuideToolEvent.TOGGLE_GUIDE_TOOL)) } /> }
-            <Base pointer className="navigation-item icon icon-me-achievements" onClick={ event => CreateLinkEvent('achievements/toggle') }>
+                <div className="navigation-item icon icon-me-helper-tool cursor-pointer" onClick={ event => DispatchUiEvent(new GuideToolEvent(GuideToolEvent.TOGGLE_GUIDE_TOOL)) } /> }
+            <div className="navigation-item icon icon-me-achievements cursor-pointer" onClick={ event => CreateLinkEvent('achievements/toggle') }>
                 { (unseenAchievementCount > 0) &&
                     <LayoutItemCountView count={ unseenAchievementCount } /> }
-            </Base>
-            <Base pointer className="navigation-item icon icon-me-profile" onClick={ event => GetUserProfile(GetSessionDataManager().userId) } />
-            <Base pointer className="navigation-item icon icon-me-rooms" onClick={ event => CreateLinkEvent('navigator/search/myworld_view') } />
-            <Base pointer className="navigation-item icon icon-me-clothing" onClick={ event => CreateLinkEvent('avatar-editor/toggle') } />
-            <Base pointer className="navigation-item icon icon-me-settings" onClick={ event => CreateLinkEvent('user-settings/toggle') } />
+            </div>
+            <div className="navigation-item icon icon-me-profile cursor-pointer" onClick={ event => GetUserProfile(GetSessionDataManager().userId) } />
+            <div className="navigation-item icon icon-me-rooms cursor-pointer" onClick={ event => CreateLinkEvent('navigator/search/myworld_view') } />
+            <div className="navigation-item icon icon-me-clothing cursor-pointer" onClick={ event => CreateLinkEvent('avatar-editor/toggle') } />
+            <div className="navigation-item icon icon-me-settings cursor-pointer" onClick={ event => CreateLinkEvent('user-settings/toggle') } />
             { children }
         </Flex>
     );
diff --git a/src/components/toolbar/ToolbarView.tsx b/src/components/toolbar/ToolbarView.tsx
index 1fd6d2d8..97ede381 100644
--- a/src/components/toolbar/ToolbarView.tsx
+++ b/src/components/toolbar/ToolbarView.tsx
@@ -1,8 +1,9 @@
 import { CreateLinkEvent, Dispose, DropBounce, EaseOut, GetSessionDataManager, JumpBy, Motions, NitroToolbarAnimateIconEvent, PerkAllowancesMessageEvent, PerkEnum, Queue, Wait } from '@nitrots/nitro-renderer';
 import { FC, useState } from 'react';
 import { GetConfigurationValue, MessengerIconState, OpenMessengerChat, VisitDesktop } from '../../api';
-import { Base, Flex, LayoutAvatarImageView, LayoutItemCountView, TransitionAnimation, TransitionAnimationTypes } from '../../common';
+import { LayoutAvatarImageView, LayoutItemCountView, TransitionAnimation, TransitionAnimationTypes, classNames } from '../../common';
 import { useAchievements, useFriends, useInventoryUnseenTracker, useMessageEvent, useMessenger, useNitroEvent, useSessionInfo } from '../../hooks';
+import { ToolbarItemView } from './ToolbarItemView';
 import { ToolbarMeView } from './ToolbarMeView';
 
 export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
@@ -65,47 +66,48 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
 
     return (
         <>
-            <TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ isMeExpanded } timeout={ 300 }>
-                <ToolbarMeView useGuideTool={ useGuideTool } unseenAchievementCount={ getTotalUnseen } setMeExpanded={ setMeExpanded } />
+            <TransitionAnimation inProp={ isMeExpanded } timeout={ 300 } type={ TransitionAnimationTypes.FADE_IN }>
+                <ToolbarMeView setMeExpanded={ setMeExpanded } unseenAchievementCount={ getTotalUnseen } useGuideTool={ useGuideTool } />
             </TransitionAnimation>
-            <Flex alignItems="center" justifyContent="between" gap={ 2 } className="nitro-toolbar py-1 px-3">
-                <Flex gap={ 2 } alignItems="center">
-                    <Flex alignItems="center" gap={ 2 }>
-                        <Flex center pointer className={ 'navigation-item item-avatar ' + (isMeExpanded ? 'active ' : '') } onClick={ event => setMeExpanded(!isMeExpanded) }>
-                            <LayoutAvatarImageView figure={ userFigure } direction={ 2 } position="absolute" />
+            <div className="absolute bottom-0 left-0 flex items-center justify-between w-full gap-2 px-3 py-1 z-toolbar bg-toolbar h-toolbar">
+                <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-2">
+                        <div className={ classNames('flex justify-center items-center w-[50px] h-[45px] overflow-hidden cursor-pointer *:ml-[-5px] *:mt-[25px]', isMeExpanded && 'active') } onClick={ event => setMeExpanded(!isMeExpanded) }>
+                            <LayoutAvatarImageView direction={ 2 } figure={ userFigure } position="absolute" />
                             { (getTotalUnseen > 0) &&
                                 <LayoutItemCountView count={ getTotalUnseen } /> }
-                        </Flex>
+                        </div>
                         { isInRoom &&
-                            <Base pointer className="navigation-item icon icon-habbo" onClick={ event => VisitDesktop() } /> }
+                            <ToolbarItemView icon="habbo" onClick={ event => VisitDesktop() } /> }
                         { !isInRoom &&
-                            <Base pointer className="navigation-item icon icon-house" onClick={ event => CreateLinkEvent('navigator/goto/home') } /> }
-                        <Base pointer className="navigation-item icon icon-rooms" onClick={ event => CreateLinkEvent('navigator/toggle') } />
-                        { GetConfigurationValue('game.center.enabled') && <Base pointer className="navigation-item icon icon-game" onClick={ event => CreateLinkEvent('games/toggle') } /> }
-                        <Base pointer className="navigation-item icon icon-catalog" onClick={ event => CreateLinkEvent('catalog/toggle') } />
-                        <Base pointer className="navigation-item icon icon-inventory" onClick={ event => CreateLinkEvent('inventory/toggle') }>
+                            <ToolbarItemView icon="house" onClick={ event => CreateLinkEvent('navigator/goto/home') } /> }
+                        <ToolbarItemView icon="rooms" onClick={ event => CreateLinkEvent('navigator/toggle') } />
+                        { GetConfigurationValue('game.center.enabled') &&
+                            <ToolbarItemView icon="game" onClick={ event => CreateLinkEvent('games/toggle') } /> }
+                        <ToolbarItemView icon="catalog" onClick={ event => CreateLinkEvent('catalog/toggle') } />
+                        <ToolbarItemView icon="inventory" onClick={ event => CreateLinkEvent('inventory/toggle') }>
                             { (getFullCount > 0) &&
                                 <LayoutItemCountView count={ getFullCount } /> }
-                        </Base>
+                        </ToolbarItemView>
                         { isInRoom &&
-                            <Base pointer className="navigation-item icon icon-camera" onClick={ event => CreateLinkEvent('camera/toggle') } /> }
+                            <ToolbarItemView icon="camera" onClick={ event => CreateLinkEvent('camera/toggle') } /> }
                         { isMod &&
-                            <Base pointer className="navigation-item icon icon-modtools" onClick={ event => CreateLinkEvent('mod-tools/toggle') } /> }
-                    </Flex>
-                    <Flex alignItems="center" id="toolbar-chat-input-container" />
-                </Flex>
-                <Flex alignItems="center" gap={ 2 }>
-                    <Flex gap={ 2 }>
-                        <Base pointer className="navigation-item icon icon-friendall" onClick={ event => CreateLinkEvent('friends/toggle') }>
+                            <div className="cursor-pointer nitro-icon icon-modtools" onClick={ event => CreateLinkEvent('mod-tools/toggle') } /> }
+                    </div>
+                    <div className="flex items-center" id="toolbar-chat-input-container" />
+                </div>
+                <div className="flex items-center gap-2">
+                    <div className="flex gap-2">
+                        <div className="cursor-pointer nitro-icon icon-friendall" onClick={ event => CreateLinkEvent('friends/toggle') }>
                             { (requests.length > 0) &&
                                 <LayoutItemCountView count={ requests.length } /> }
-                        </Base>
+                        </div>
                         { ((iconState === MessengerIconState.SHOW) || (iconState === MessengerIconState.UNREAD)) &&
-                            <Base pointer className={ `navigation-item icon icon-message ${ (iconState === MessengerIconState.UNREAD) && 'is-unseen' }` } onClick={ event => OpenMessengerChat() } /> }
-                    </Flex>
-                    <Base id="toolbar-friend-bar-container" className="d-none d-lg-block" />
-                </Flex>
-            </Flex>
+                            <div className={ `nitro-icon icon-message cursor-pointer ${ (iconState === MessengerIconState.UNREAD) && 'is-unseen' }` } onClick={ event => OpenMessengerChat() } /> }
+                    </div>
+                    <div className="hidden lg:block" id="toolbar-friend-bar-container" />
+                </div>
+            </div>
         </>
     );
 }
diff --git a/src/components/user-profile/UserProfileView.tsx b/src/components/user-profile/UserProfileView.tsx
index 64349b24..b31d1d96 100644
--- a/src/components/user-profile/UserProfileView.tsx
+++ b/src/components/user-profile/UserProfileView.tsx
@@ -94,28 +94,28 @@ export const UserProfileView: FC<{}> = props =>
     if(!userProfile) return null;
 
     return (
-        <NitroCardView uniqueKey="nitro-user-profile" theme="primary-slim" className="user-profile">
+        <NitroCardView className="user-profile" theme="primary-slim" uniqueKey="nitro-user-profile">
             <NitroCardHeaderView headerText={ LocalizeText('extendedprofile.caption') } onCloseClick={ onClose } />
             <NitroCardContentView overflow="hidden">
                 <Grid fullHeight={ false } gap={ 2 }>
-                    <Column size={ 7 } gap={ 1 } className="user-container pe-2">
+                    <Column className="user-container pe-2" gap={ 1 } size={ 7 }>
                         <UserContainerView userProfile={ userProfile } />
-                        <Grid columnCount={ 5 } fullHeight className="bg-muted rounded px-2 py-1">
-                            <BadgesContainerView fullWidth center badges={ userBadges } />
+                        <Grid fullHeight className="bg-muted rounded px-2 py-1" columnCount={ 5 }>
+                            <BadgesContainerView center fullWidth badges={ userBadges } />
                         </Grid>
                     </Column>
                     <Column size={ 5 }>
                         { userRelationships &&
-                            <FriendsContainerView relationships={ userRelationships } friendsCount={ userProfile.friendsCount } /> }
+                            <FriendsContainerView friendsCount={ userProfile.friendsCount } relationships={ userRelationships } /> }
                     </Column>
                 </Grid>
                 <Flex alignItems="center" className="rooms-button-container px-2 py-1">
                     <Flex alignItems="center" gap={ 1 } onClick={ event => CreateLinkEvent(`navigator/search/hotel_view/owner:${ userProfile.username }`) }>
                         <i className="icon icon-rooms" />
-                        <Text bold underline pointer>{ LocalizeText('extendedprofile.rooms') }</Text>
+                        <Text bold pointer underline>{ LocalizeText('extendedprofile.rooms') }</Text>
                     </Flex>
                 </Flex>
-                <GroupsContainerView fullWidth itsMe={ userProfile.id === GetSessionDataManager().userId } groups={ userProfile.groups } onLeaveGroup={ onLeaveGroup } />
+                <GroupsContainerView fullWidth groups={ userProfile.groups } itsMe={ userProfile.id === GetSessionDataManager().userId } onLeaveGroup={ onLeaveGroup } />
             </NitroCardContentView>
         </NitroCardView>
     )
diff --git a/src/components/user-profile/views/FriendsContainerView.tsx b/src/components/user-profile/views/FriendsContainerView.tsx
index f5449d17..315385c1 100644
--- a/src/components/user-profile/views/FriendsContainerView.tsx
+++ b/src/components/user-profile/views/FriendsContainerView.tsx
@@ -1,7 +1,7 @@
 import { RelationshipStatusInfoMessageParser } from '@nitrots/nitro-renderer';
 import { FC } from 'react';
 import { LocalizeText } from '../../../api';
-import { Column, Text } from '../../../common';
+import { Text } from '../../../common';
 import { RelationshipsContainerView } from './RelationshipsContainerView';
 
 interface FriendsContainerViewProps
@@ -15,14 +15,14 @@ export const FriendsContainerView: FC<FriendsContainerViewProps> = props =>
     const { relationships = null, friendsCount = null } = props;
 
     return (
-        <Column gap={ 1 }>
+        <div className="flex flex-column gap-1">
             <Text small>
                 <b>{ LocalizeText('extendedprofile.friends.count') }</b> { friendsCount }
             </Text>
             <Text bold small>{ LocalizeText('extendedprofile.relstatus') }</Text>
-            <Column>
+            <div className="flex flex-column">
                 <RelationshipsContainerView relationships={ relationships } />
-            </Column>
-        </Column>
+            </div>
+        </div>
     )
 }
diff --git a/src/components/user-profile/views/GroupsContainerView.tsx b/src/components/user-profile/views/GroupsContainerView.tsx
index bd598ee1..461f98bc 100644
--- a/src/components/user-profile/views/GroupsContainerView.tsx
+++ b/src/components/user-profile/views/GroupsContainerView.tsx
@@ -1,7 +1,7 @@
 import { GroupInformationComposer, GroupInformationEvent, GroupInformationParser, HabboGroupEntryData } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { SendMessageComposer, ToggleFavoriteGroup } from '../../../api';
-import { AutoGrid, Base, Column, Flex, Grid, GridProps, LayoutBadgeImageView, LayoutGridItem } from '../../../common';
+import { AutoGrid, Column, Grid, GridProps, LayoutBadgeImageView, LayoutGridItem } from '../../../common';
 import { useMessageEvent } from '../../../hooks';
 import { GroupInformationView } from '../../groups/views/GroupInformationView';
 
@@ -56,23 +56,23 @@ export const GroupsContainerView: FC<GroupsContainerViewProps> = props =>
     {
         return (
             <Column center fullHeight>
-                <Flex justifyContent="center" gap={ 2 }>
-                    <Base className="no-group-spritesheet image-1" />
-                    <Base className="no-group-spritesheet image-2" />
-                    <Base className="no-group-spritesheet image-3" />
-                </Flex>
+                <div className="flex justify-center gap-2">
+                    <div className="no-group-spritesheet image-1" />
+                    <div className="no-group-spritesheet image-2" />
+                    <div className="no-group-spritesheet image-3" />
+                </div>
             </Column>
         );
     }
     
     return (
-        <Grid overflow={ overflow } gap={ 2 } { ...rest }>
-            <Column alignItems="center" size={ 2 } overflow="auto">
-                <AutoGrid overflow={ null } columnCount={ 1 } columnMinHeight={ 50 } className="user-groups-container">
+        <Grid gap={ 2 } overflow={ overflow } { ...rest }>
+            <Column alignItems="center" overflow="auto" size={ 2 }>
+                <AutoGrid className="user-groups-container" columnCount={ 1 } columnMinHeight={ 50 } overflow={ null }>
                     { groups.map((group, index) =>
                     {
                         return (
-                            <LayoutGridItem key={ index } overflow="unset" itemActive={ (selectedGroupId === group.groupId) } onClick={ () => setSelectedGroupId(group.groupId) } className="p-1">
+                            <LayoutGridItem key={ index } className="p-1" itemActive={ (selectedGroupId === group.groupId) } overflow="unset" onClick={ () => setSelectedGroupId(group.groupId) }>
                                 { itsMe &&
                                 <i className={ 'position-absolute end-0 top-0 z-index-1 icon icon-group-' + (group.favourite ? 'favorite' : 'not-favorite') } onClick={ () => ToggleFavoriteGroup(group) } /> }
                                 <LayoutBadgeImageView badgeCode={ group.badgeCode } isGroup={ true } />
@@ -81,7 +81,7 @@ export const GroupsContainerView: FC<GroupsContainerViewProps> = props =>
                     }) }
                 </AutoGrid>
             </Column>
-            <Column size={ 10 } overflow="hidden">
+            <Column overflow="hidden" size={ 10 }>
                 { groupInformation &&
                     <GroupInformationView groupInformation={ groupInformation } onClose={ onLeaveGroup } /> }
             </Column>
diff --git a/src/components/user-profile/views/RelationshipsContainerView.tsx b/src/components/user-profile/views/RelationshipsContainerView.tsx
index 9b698ecd..12ce0acb 100644
--- a/src/components/user-profile/views/RelationshipsContainerView.tsx
+++ b/src/components/user-profile/views/RelationshipsContainerView.tsx
@@ -1,7 +1,7 @@
 import { RelationshipStatusEnum, RelationshipStatusInfoMessageParser } from '@nitrots/nitro-renderer';
 import { FC } from 'react';
 import { GetUserProfile, LocalizeText } from '../../../api';
-import { Column, Flex, LayoutAvatarImageView, Text } from '../../../common';
+import { Flex, LayoutAvatarImageView, Text } from '../../../common';
 
 interface RelationshipsContainerViewProps
 {
@@ -23,32 +23,32 @@ export const RelationshipsContainerView: FC<RelationshipsContainerViewProps> = p
         const relationshipName = RelationshipStatusEnum.RELATIONSHIP_NAMES[type].toLocaleLowerCase();
 
         return (
-            <Flex fullWidth gap={ 1 }>
+            <div className="flex w-100 gap-1">
                 <Flex center className="user-relationship">
                     <i className={ `nitro-friends-spritesheet icon-${ relationshipName }` } />
                 </Flex>
-                <Column grow gap={ 0 }>
-                    <Flex alignItems="center" justifyContent="between" className="bg-white rounded px-2 py-1 user-relationship">
-                        <Text small underline pointer onClick={ event => (relationshipInfo && (relationshipInfo.randomFriendId >= 1) && GetUserProfile(relationshipInfo.randomFriendId)) }>
+                <div className="flex flex-column flex-grow-1 gap-0">
+                    <Flex alignItems="center" className="bg-white rounded px-2 py-1 user-relationship" justifyContent="between">
+                        <Text pointer small underline onClick={ event => (relationshipInfo && (relationshipInfo.randomFriendId >= 1) && GetUserProfile(relationshipInfo.randomFriendId)) }>
                             { (!relationshipInfo || (relationshipInfo.friendCount === 0)) &&
                                 LocalizeText('extendedprofile.add.friends') }
                             { (relationshipInfo && (relationshipInfo.friendCount >= 1)) &&
                                 relationshipInfo.randomFriendName }
                         </Text>
                         { (relationshipInfo && (relationshipInfo.friendCount >= 1)) &&
-                            <Flex center position="relative" className="avatar-image-container">
-                                <LayoutAvatarImageView figure={ relationshipInfo.randomFriendFigure } headOnly={ true } direction={ 4 } />
-                            </Flex> }
+                            <div className="flex items-center justify-center avatar-image-container p-relative">
+                                <LayoutAvatarImageView direction={ 4 } figure={ relationshipInfo.randomFriendFigure } headOnly={ true } />
+                            </div> }
                     </Flex>
-                    <Text small italics className="user-relationship-count">
+                    <Text italics small className="user-relationship-count">
                         { (!relationshipInfo || (relationshipInfo.friendCount === 0)) &&
                             LocalizeText('extendedprofile.no.friends.in.this.category') }
                         { (relationshipInfo && (relationshipInfo.friendCount > 1)) &&
                             LocalizeText(`extendedprofile.relstatus.others.${ relationshipName }`, [ 'count' ], [ (relationshipInfo.friendCount - 1).toString() ]) }
                         &nbsp;
                     </Text>
-                </Column>
-            </Flex>
+                </div>
+            </div>
         );
     }
 
diff --git a/src/components/user-profile/views/UserContainerView.tsx b/src/components/user-profile/views/UserContainerView.tsx
index a83fb96d..c3c94a1d 100644
--- a/src/components/user-profile/views/UserContainerView.tsx
+++ b/src/components/user-profile/views/UserContainerView.tsx
@@ -1,7 +1,7 @@
 import { GetSessionDataManager, RequestFriendComposer, UserProfileParser } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { FriendlyTime, LocalizeText, SendMessageComposer } from '../../../api';
-import { Column, Flex, LayoutAvatarImageView, Text } from '../../../common';
+import { LayoutAvatarImageView, Text } from '../../../common';
 
 interface UserContainerViewProps
 {
@@ -28,16 +28,16 @@ export const UserContainerView: FC<UserContainerViewProps> = props =>
     }, [ userProfile ])
 
     return (
-        <Flex gap={ 2 }>
-            <Column center className="avatar-container">
-                <LayoutAvatarImageView figure={ userProfile.figure } direction={ 2 } />
-            </Column>
-            <Column>
-                <Column gap={ 0 }>
+        <div className="flex gap-2">
+            <div className="flex flex-column justify-center items-center avatar-container">
+                <LayoutAvatarImageView direction={ 2 } figure={ userProfile.figure } />
+            </div>
+            <div className="flex flex-column">
+                <div className="flex flex-column gap-0">
                     <Text bold>{ userProfile.username }</Text>
-                    <Text italics textBreak small>{ userProfile.motto }&nbsp;</Text>
-                </Column>
-                <Column gap={ 1 }>
+                    <Text italics small textBreak>{ userProfile.motto }&nbsp;</Text>
+                </div>
+                <div className="flex flex-column gap-1">
                     <Text small>
                         <b>{ LocalizeText('extendedprofile.created') }</b> { userProfile.registration }
                     </Text>
@@ -47,15 +47,15 @@ export const UserContainerView: FC<UserContainerViewProps> = props =>
                     <Text small>
                         <b>{ LocalizeText('extendedprofile.achievementscore') }</b> { userProfile.achievementPoints }
                     </Text>
-                </Column>
-                <Flex gap={ 1 }>
+                </div>
+                <div className="flex gap-1">
                     { userProfile.isOnline &&
                         <i className="icon icon-pf-online" /> }
                     { !userProfile.isOnline &&
                         <i className="icon icon-pf-offline" /> }
-                    <Flex alignItems="center" gap={ 1 }>
+                    <div className="flex items-center gap-1">
                         { canSendFriendRequest &&
-                            <Text small underline pointer onClick={ addFriend }>{ LocalizeText('extendedprofile.addasafriend') }</Text> }
+                            <Text pointer small underline onClick={ addFriend }>{ LocalizeText('extendedprofile.addasafriend') }</Text> }
                         { !canSendFriendRequest &&
                             <>
                                 <i className="icon icon-pf-tick" />
@@ -66,9 +66,9 @@ export const UserContainerView: FC<UserContainerViewProps> = props =>
                                 { (requestSent || userProfile.requestSent) &&
                                     <Text>{ LocalizeText('extendedprofile.friendrequestsent') }</Text> }
                             </> }
-                    </Flex>
-                </Flex>
-            </Column>
-        </Flex>
+                    </div>
+                </div>
+            </div>
+        </div>
     )
 }
diff --git a/src/components/user-settings/UserSettingsView.tsx b/src/components/user-settings/UserSettingsView.tsx
index 43a4f512..38f2d32f 100644
--- a/src/components/user-settings/UserSettingsView.tsx
+++ b/src/components/user-settings/UserSettingsView.tsx
@@ -2,7 +2,7 @@ import { AddLinkEventTracker, ILinkEventTracker, NitroSettingsEvent, RemoveLinkE
 import { FC, useEffect, useState } from 'react';
 import { FaVolumeDown, FaVolumeMute, FaVolumeUp } from 'react-icons/fa';
 import { DispatchMainEvent, DispatchUiEvent, LocalizeText, SendMessageComposer } from '../../api';
-import { Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text, classNames } from '../../common';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView, Text, classNames } from '../../common';
 import { useCatalogPlaceMultipleItems, useCatalogSkipPurchaseConfirmation, useMessageEvent } from '../../hooks';
 
 export const UserSettingsView: FC<{}> = props =>
@@ -126,61 +126,61 @@ export const UserSettingsView: FC<{}> = props =>
     if(!isVisible || !userSettings) return null;
 
     return (
-        <NitroCardView uniqueKey="user-settings" className="user-settings-window" theme="primary-slim">
+        <NitroCardView className="user-settings-window" theme="primary-slim" uniqueKey="user-settings">
             <NitroCardHeaderView headerText={ LocalizeText('widget.memenu.settings.title') } onCloseClick={ event => processAction('close_view') } />
             <NitroCardContentView className="text-black">
-                <Column gap={ 1 }>
-                    <Flex alignItems="center" gap={ 1 }>
-                        <input className="form-check-input" type="checkbox" checked={ userSettings.oldChat } onChange={ event => processAction('oldchat', event.target.checked) } />
+                <div className="flex flex-column gap-1">
+                    <div className="flex items-center gap-1">
+                        <input checked={ userSettings.oldChat } className="form-check-input" type="checkbox" onChange={ event => processAction('oldchat', event.target.checked) } />
                         <Text>{ LocalizeText('memenu.settings.chat.prefer.old.chat') }</Text>
-                    </Flex>
-                    <Flex alignItems="center" gap={ 1 }>
-                        <input className="form-check-input" type="checkbox" checked={ userSettings.roomInvites } onChange={ event => processAction('room_invites', event.target.checked) } />
+                    </div>
+                    <div className="flex items-center gap-1">
+                        <input checked={ userSettings.roomInvites } className="form-check-input" type="checkbox" onChange={ event => processAction('room_invites', event.target.checked) } />
                         <Text>{ LocalizeText('memenu.settings.other.ignore.room.invites') }</Text>
-                    </Flex>
-                    <Flex alignItems="center" gap={ 1 }>
-                        <input className="form-check-input" type="checkbox" checked={ userSettings.cameraFollow } onChange={ event => processAction('camera_follow', event.target.checked) } />
+                    </div>
+                    <div className="flex items-center gap-1">
+                        <input checked={ userSettings.cameraFollow } className="form-check-input" type="checkbox" onChange={ event => processAction('camera_follow', event.target.checked) } />
                         <Text>{ LocalizeText('memenu.settings.other.disable.room.camera.follow') }</Text>
-                    </Flex>
-                    <Flex alignItems="center" gap={ 1 }>
-                        <input className="form-check-input" type="checkbox" checked={ catalogPlaceMultipleObjects } onChange={ event => setCatalogPlaceMultipleObjects(event.target.checked) } />
+                    </div>
+                    <div className="flex items-center gap-1">
+                        <input checked={ catalogPlaceMultipleObjects } className="form-check-input" type="checkbox" onChange={ event => setCatalogPlaceMultipleObjects(event.target.checked) } />
                         <Text>{ LocalizeText('memenu.settings.other.place.multiple.objects') }</Text>
-                    </Flex>
-                    <Flex alignItems="center" gap={ 1 }>
-                        <input className="form-check-input" type="checkbox" checked={ catalogSkipPurchaseConfirmation } onChange={ event => setCatalogSkipPurchaseConfirmation(event.target.checked) } />
+                    </div>
+                    <div className="flex items-center gap-1">
+                        <input checked={ catalogSkipPurchaseConfirmation } className="form-check-input" type="checkbox" onChange={ event => setCatalogSkipPurchaseConfirmation(event.target.checked) } />
                         <Text>{ LocalizeText('memenu.settings.other.skip.purchase.confirmation') }</Text>
-                    </Flex>
-                </Column>
-                <Column>
+                    </div>
+                </div>
+                <div className="flex flex-column">
                     <Text bold>{ LocalizeText('widget.memenu.settings.volume') }</Text>
-                    <Column gap={ 1 }>
+                    <div className="flex flex-column gap-1">
                         <Text>{ LocalizeText('widget.memenu.settings.volume.ui') }</Text>
-                        <Flex alignItems="center" gap={ 1 }>
+                        <div className="flex items-center gap-1">
                             { (userSettings.volumeSystem === 0) && <FaVolumeMute className={ classNames((userSettings.volumeSystem >= 50) && 'text-muted', 'fa-icon') } /> }
                             { (userSettings.volumeSystem > 0) && <FaVolumeDown className={ classNames((userSettings.volumeSystem >= 50) && 'text-muted', 'fa-icon') } /> }
-                            <input type="range" className="custom-range w-100" min="0" max="100" step="1" id="volumeSystem" value={ userSettings.volumeSystem } onChange={ event => processAction('system_volume', event.target.value) } onMouseUp={ () => saveRangeSlider('volume') }/>
+                            <input className="custom-range w-100" id="volumeSystem" max="100" min="0" step="1" type="range" value={ userSettings.volumeSystem } onChange={ event => processAction('system_volume', event.target.value) } onMouseUp={ () => saveRangeSlider('volume') }/>
                             <FaVolumeUp className={ classNames((userSettings.volumeSystem < 50) && 'text-muted', 'fa-icon') } />
-                        </Flex>
-                    </Column>
-                    <Column gap={ 1 }>
+                        </div>
+                    </div>
+                    <div className="flex flex-column gap-1">
                         <Text>{ LocalizeText('widget.memenu.settings.volume.furni') }</Text>
-                        <Flex alignItems="center" gap={ 1 }>
+                        <div className="flex items-center gap-1">
                             { (userSettings.volumeFurni === 0) && <FaVolumeMute className={ classNames((userSettings.volumeFurni >= 50) && 'text-muted', 'fa-icon') } /> }
                             { (userSettings.volumeFurni > 0) && <FaVolumeDown className={ classNames((userSettings.volumeFurni >= 50) && 'text-muted', 'fa-icon') } /> }
-                            <input type="range" className="custom-range w-100" min="0" max="100" step="1" id="volumeFurni" value={ userSettings.volumeFurni } onChange={ event => processAction('furni_volume', event.target.value) } onMouseUp={ () => saveRangeSlider('volume') }/>
+                            <input className="custom-range w-100" id="volumeFurni" max="100" min="0" step="1" type="range" value={ userSettings.volumeFurni } onChange={ event => processAction('furni_volume', event.target.value) } onMouseUp={ () => saveRangeSlider('volume') }/>
                             <FaVolumeUp className={ classNames((userSettings.volumeFurni < 50) && 'text-muted', 'fa-icon') } />
-                        </Flex>
-                    </Column>
-                    <Column gap={ 1 }>
+                        </div>
+                    </div>
+                    <div className="flex flex-column gap-1">
                         <Text>{ LocalizeText('widget.memenu.settings.volume.trax') }</Text>
-                        <Flex alignItems="center" gap={ 1 }>
+                        <div className="flex items-center gap-1">
                             { (userSettings.volumeTrax === 0) && <FaVolumeMute className={ classNames((userSettings.volumeTrax >= 50) && 'text-muted', 'fa-icon') } /> }
                             { (userSettings.volumeTrax > 0) && <FaVolumeDown className={ classNames((userSettings.volumeTrax >= 50) && 'text-muted', 'fa-icon') } /> }
-                            <input type="range" className="custom-range w-100" min="0" max="100" step="1" id="volumeTrax" value={ userSettings.volumeTrax } onChange={ event => processAction('trax_volume', event.target.value) } onMouseUp={ () => saveRangeSlider('volume') }/>
+                            <input className="custom-range w-100" id="volumeTrax" max="100" min="0" step="1" type="range" value={ userSettings.volumeTrax } onChange={ event => processAction('trax_volume', event.target.value) } onMouseUp={ () => saveRangeSlider('volume') }/>
                             <FaVolumeUp className={ classNames((userSettings.volumeTrax < 50) && 'text-muted', 'fa-icon') } />
-                        </Flex>
-                    </Column>
-                </Column>
+                        </div>
+                    </div>
+                </div>
             </NitroCardContentView>
         </NitroCardView>
     );
diff --git a/src/components/wired/views/WiredBaseView.tsx b/src/components/wired/views/WiredBaseView.tsx
index df5adc11..6b9d9c34 100644
--- a/src/components/wired/views/WiredBaseView.tsx
+++ b/src/components/wired/views/WiredBaseView.tsx
@@ -1,7 +1,7 @@
 import { GetSessionDataManager } from '@nitrots/nitro-renderer';
 import { FC, PropsWithChildren, useEffect, useState } from 'react';
 import { LocalizeText, WiredFurniType, WiredSelectionVisualizer } from '../../../api';
-import { Button, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common';
+import { Button, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common';
 import { useWired } from '../../../hooks';
 import { WiredFurniSelectorView } from './WiredFurniSelectorView';
 
@@ -87,16 +87,16 @@ export const WiredBaseView: FC<PropsWithChildren<WiredBaseViewProps>> = props =>
     }, [ trigger, hasSpecialInput, requiresFurni, setIntParams, setStringParam, setFurniIds, setAllowsFurni ]);
 
     return (
-        <NitroCardView uniqueKey="nitro-wired" className="nitro-wired" theme="primary-slim">
+        <NitroCardView className="nitro-wired" theme="primary-slim" uniqueKey="nitro-wired">
             <NitroCardHeaderView headerText={ LocalizeText('wiredfurni.title') } onCloseClick={ onClose } />
             <NitroCardContentView>
-                <Column gap={ 1 }>
-                    <Flex alignItems="center" gap={ 1 }>
+                <div className="flex flex-column gap-1">
+                    <div className="flex items-center gap-1">
                         <i className={ `icon icon-wired-${ wiredType }` } />
                         <Text bold>{ wiredName }</Text>
-                    </Flex>
+                    </div>
                     <Text small>{ wiredDescription }</Text>
-                </Column>
+                </div>
                 { !!children && <hr className="m-0 bg-dark" /> }
                 { children }
                 { (requiresFurni > WiredFurniType.STUFF_SELECTION_OPTION_NONE) &&
@@ -104,10 +104,10 @@ export const WiredBaseView: FC<PropsWithChildren<WiredBaseViewProps>> = props =>
                         <hr className="m-0 bg-dark" />
                         <WiredFurniSelectorView />
                     </> }
-                <Flex alignItems="center" gap={ 1 }>
+                <div className="flex items-center gap-1">
                     <Button fullWidth variant="success" onClick={ onSave }>{ LocalizeText('wiredfurni.ready') }</Button>
                     <Button fullWidth variant="secondary" onClick={ onClose }>{ LocalizeText('cancel') }</Button>
-                </Flex>
+                </div>
             </NitroCardContentView>
         </NitroCardView>
     );
diff --git a/src/components/wired/views/WiredFurniSelectorView.tsx b/src/components/wired/views/WiredFurniSelectorView.tsx
index 9b38f972..b6daa0f1 100644
--- a/src/components/wired/views/WiredFurniSelectorView.tsx
+++ b/src/components/wired/views/WiredFurniSelectorView.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { LocalizeText } from '../../../api';
-import { Column, Text } from '../../../common';
+import { Text } from '../../../common';
 import { useWired } from '../../../hooks';
 
 export const WiredFurniSelectorView: FC<{}> = props =>
@@ -8,9 +8,9 @@ export const WiredFurniSelectorView: FC<{}> = props =>
     const { trigger = null, furniIds = [] } = useWired();
     
     return (
-        <Column gap={ 1 }>
+        <div className="flex flex-column gap-1">
             <Text bold>{ LocalizeText('wiredfurni.pickfurnis.caption', [ 'count', 'limit' ], [ furniIds.length.toString(), trigger.maximumItemSelectionCount.toString() ]) }</Text>
             <Text small>{ LocalizeText('wiredfurni.pickfurnis.desc') }</Text>
-        </Column>
+        </div>
     );
 }
diff --git a/src/components/wired/views/actions/WiredActionBaseView.tsx b/src/components/wired/views/actions/WiredActionBaseView.tsx
index 6c7a86eb..3a25677b 100644
--- a/src/components/wired/views/actions/WiredActionBaseView.tsx
+++ b/src/components/wired/views/actions/WiredActionBaseView.tsx
@@ -2,7 +2,7 @@ import { WiredActionDefinition } from '@nitrots/nitro-renderer';
 import { FC, PropsWithChildren, useEffect } from 'react';
 import ReactSlider from 'react-slider';
 import { GetWiredTimeLocale, LocalizeText, WiredFurniType } from '../../../../api';
-import { Column, Text } from '../../../../common';
+import { Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredBaseView } from '../WiredBaseView';
 
@@ -24,18 +24,18 @@ export const WiredActionBaseView: FC<PropsWithChildren<WiredActionBaseViewProps>
     }, [ trigger, setActionDelay ]);
 
     return (
-        <WiredBaseView wiredType="action" requiresFurni={ requiresFurni } save={ save } hasSpecialInput={ hasSpecialInput }>
+        <WiredBaseView hasSpecialInput={ hasSpecialInput } requiresFurni={ requiresFurni } save={ save } wiredType="action">
             { children }
             { !!children && <hr className="m-0 bg-dark" /> }
-            <Column>
+            <div className="flex flex-column">
                 <Text bold>{ LocalizeText('wiredfurni.params.delay', [ 'seconds' ], [ GetWiredTimeLocale(actionDelay) ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
-                    min={ 0 }
                     max={ 20 }
+                    min={ 0 }
                     value={ actionDelay }
                     onChange={ event => setActionDelay(event) } />
-            </Column>
+            </div>
         </WiredBaseView>
     );
 }
diff --git a/src/components/wired/views/actions/WiredActionBotChangeFigureView.tsx b/src/components/wired/views/actions/WiredActionBotChangeFigureView.tsx
index 783e00a5..f3b9f8d8 100644
--- a/src/components/wired/views/actions/WiredActionBotChangeFigureView.tsx
+++ b/src/components/wired/views/actions/WiredActionBotChangeFigureView.tsx
@@ -1,7 +1,7 @@
 import { GetSessionDataManager } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { LocalizeText, WIRED_STRING_DELIMETER, WiredFurniType } from '../../../../api';
-import { Button, Column, Flex, LayoutAvatarImageView, Text } from '../../../../common';
+import { Button, LayoutAvatarImageView, Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredActionBaseView } from './WiredActionBaseView';
 
@@ -24,15 +24,15 @@ export const WiredActionBotChangeFigureView: FC<{}> = props =>
     }, [ trigger ]);
 
     return (
-        <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ true } save={ save }>
-            <Column gap={ 1 }>
+        <WiredActionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
+            <div className="flex flex-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) } />
-            </Column>
-            <Flex center>
-                <LayoutAvatarImageView figure={ figure } direction={ 4 } />
+                <input className="form-control form-control-sm" maxLength={ 32 } type="text" value={ botName } onChange={ event => setBotName(event.target.value) } />
+            </div>
+            <div className="flex items-center justify-center">
+                <LayoutAvatarImageView direction={ 4 } figure={ figure } />
                 <Button onClick={ event => setFigure(GetSessionDataManager().figure) }>{ LocalizeText('wiredfurni.params.capture.figure') }</Button>
-            </Flex>
+            </div>
         </WiredActionBaseView>
     );
 }
diff --git a/src/components/wired/views/actions/WiredActionBotFollowAvatarView.tsx b/src/components/wired/views/actions/WiredActionBotFollowAvatarView.tsx
index 2acb5cc1..2d9589e6 100644
--- a/src/components/wired/views/actions/WiredActionBotFollowAvatarView.tsx
+++ b/src/components/wired/views/actions/WiredActionBotFollowAvatarView.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from 'react';
 import { LocalizeText, WiredFurniType } from '../../../../api';
-import { Column, Flex, Text } from '../../../../common';
+import { Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredActionBaseView } from './WiredActionBaseView';
 
@@ -23,21 +23,21 @@ export const WiredActionBotFollowAvatarView: FC<{}> = props =>
     }, [ trigger ]);
 
     return (
-        <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ true } save={ save }>
-            <Column gap={ 1 }>
+        <WiredActionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
+            <div className="flex flex-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) } />
-            </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) } />
+                <input className="form-control form-control-sm" maxLength={ 32 } type="text" value={ botName } onChange={ event => setBotName(event.target.value) } />
+            </div>
+            <div className="flex flex-column gap-1">
+                <div className="flex items-center gap-1">
+                    <input checked={ (followMode === 1) } className="form-check-input" id="followMode1" name="followMode" type="radio" onChange={ event => setFollowMode(1) } />
                     <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) } />
+                </div>
+                <div className="flex items-center gap-1">
+                    <input checked={ (followMode === 0) } className="form-check-input" id="followMode2" name="followMode" type="radio" onChange={ event => setFollowMode(0) } />
                     <Text>{ LocalizeText('wiredfurni.params.stop.following') }</Text>
-                </Flex>
-            </Column>
+                </div>
+            </div>
         </WiredActionBaseView>
     );
 }
diff --git a/src/components/wired/views/actions/WiredActionBotGiveHandItemView.tsx b/src/components/wired/views/actions/WiredActionBotGiveHandItemView.tsx
index c93d0de3..cd3f12e3 100644
--- a/src/components/wired/views/actions/WiredActionBotGiveHandItemView.tsx
+++ b/src/components/wired/views/actions/WiredActionBotGiveHandItemView.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from 'react';
 import { LocalizeText, WiredFurniType } from '../../../../api';
-import { Column, Text } from '../../../../common';
+import { Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredActionBaseView } from './WiredActionBaseView';
 
@@ -25,18 +25,18 @@ export const WiredActionBotGiveHandItemView: FC<{}> = props =>
     }, [ trigger ]);
 
     return (
-        <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ true } save={ save }>
-            <Column gap={ 1 }>
+        <WiredActionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
+            <div className="flex flex-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) } />
-            </Column>
-            <Column gap={ 1 }>
+                <input className="form-control form-control-sm" maxLength={ 32 } type="text" value={ botName } onChange={ event => setBotName(event.target.value) } />
+            </div>
+            <div className="flex flex-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>
                     { ALLOWED_HAND_ITEM_IDS.map(value => <option key={ value } value={ value }>{ LocalizeText(`handitem${ value }`) }</option>) }
                 </select>
-            </Column>
+            </div>
         </WiredActionBaseView>
     );
 }
diff --git a/src/components/wired/views/actions/WiredActionBotMoveView.tsx b/src/components/wired/views/actions/WiredActionBotMoveView.tsx
index d09a359a..52961c24 100644
--- a/src/components/wired/views/actions/WiredActionBotMoveView.tsx
+++ b/src/components/wired/views/actions/WiredActionBotMoveView.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from 'react';
 import { LocalizeText, WiredFurniType } from '../../../../api';
-import { Column, Text } from '../../../../common';
+import { Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredActionBaseView } from './WiredActionBaseView';
 
@@ -17,11 +17,11 @@ export const WiredActionBotMoveView: FC<{}> = props =>
     }, [ trigger ]);
 
     return (
-        <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID } hasSpecialInput={ true } save={ save }>
-            <Column gap={ 1 }>
+        <WiredActionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID } save={ save }>
+            <div className="flex flex-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) } />
-            </Column>
+                <input className="form-control form-control-sm" maxLength={ 32 } type="text" value={ botName } onChange={ event => setBotName(event.target.value) } />
+            </div>
         </WiredActionBaseView>
     );
 }
diff --git a/src/components/wired/views/actions/WiredActionBotTalkToAvatarView.tsx b/src/components/wired/views/actions/WiredActionBotTalkToAvatarView.tsx
index d32cc179..d03616d0 100644
--- a/src/components/wired/views/actions/WiredActionBotTalkToAvatarView.tsx
+++ b/src/components/wired/views/actions/WiredActionBotTalkToAvatarView.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from 'react';
 import { GetConfigurationValue, LocalizeText, WIRED_STRING_DELIMETER, WiredFurniType } from '../../../../api';
-import { Column, Flex, Text } from '../../../../common';
+import { Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredActionBaseView } from './WiredActionBaseView';
 
@@ -28,25 +28,25 @@ export const WiredActionBotTalkToAvatarView: FC<{}> = props =>
     }, [ trigger ]);
 
     return (
-        <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ true } save={ save }>
-            <Column gap={ 1 }>
+        <WiredActionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
+            <div className="flex flex-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) } />
-            </Column>
-            <Column gap={ 1 }>
+                <input className="form-control form-control-sm" maxLength={ 32 } type="text" value={ botName } onChange={ event => setBotName(event.target.value) } />
+            </div>
+            <div className="flex flex-column gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.message') }</Text>
-                <input type="text" className="form-control form-control-sm" maxLength={ GetConfigurationValue<number>('wired.action.bot.talk.to.avatar.max.length', 64) } value={ message } onChange={ event => setMessage(event.target.value) } />
-            </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) } />
+                <input className="form-control form-control-sm" maxLength={ GetConfigurationValue<number>('wired.action.bot.talk.to.avatar.max.length', 64) } type="text" value={ message } onChange={ event => setMessage(event.target.value) } />
+            </div>
+            <div className="flex flex-column gap-1">
+                <div className="flex items-center gap-1">
+                    <input checked={ (talkMode === 0) } className="form-check-input" id="talkMode1" name="talkMode" type="radio" onChange={ event => setTalkMode(0) } />
                     <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) } />
+                </div>
+                <div className="flex items-center gap-1">
+                    <input checked={ (talkMode === 1) } className="form-check-input" id="talkMode2" name="talkMode" type="radio" onChange={ event => setTalkMode(1) } />
                     <Text>{ LocalizeText('wiredfurni.params.whisper') }</Text>
-                </Flex>
-            </Column>
+                </div>
+            </div>
         </WiredActionBaseView>
     );
 }
diff --git a/src/components/wired/views/actions/WiredActionBotTalkView.tsx b/src/components/wired/views/actions/WiredActionBotTalkView.tsx
index 18e6467a..2c55a125 100644
--- a/src/components/wired/views/actions/WiredActionBotTalkView.tsx
+++ b/src/components/wired/views/actions/WiredActionBotTalkView.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from 'react';
 import { GetConfigurationValue, LocalizeText, WIRED_STRING_DELIMETER, WiredFurniType } from '../../../../api';
-import { Column, Flex, Text } from '../../../../common';
+import { Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredActionBaseView } from './WiredActionBaseView';
 
@@ -28,25 +28,25 @@ export const WiredActionBotTalkView: FC<{}> = props =>
     }, [ trigger ]);
 
     return (
-        <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ true } save={ save }>
-            <Column gap={ 1 }>
+        <WiredActionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
+            <div className="flex flex-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) } />
-            </Column>
-            <Column gap={ 1 }>
+                <input className="form-control form-control-sm" maxLength={ 32 } type="text" value={ botName } onChange={ event => setBotName(event.target.value) } />
+            </div>
+            <div className="flex flex-column gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.message') }</Text>
-                <input type="text" className="form-control form-control-sm" maxLength={ GetConfigurationValue<number>('wired.action.bot.talk.max.length', 64) } value={ message } onChange={ event => setMessage(event.target.value) } />
-            </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) } />
+                <input className="form-control form-control-sm" maxLength={ GetConfigurationValue<number>('wired.action.bot.talk.max.length', 64) } type="text" value={ message } onChange={ event => setMessage(event.target.value) } />
+            </div>
+            <div className="flex flex-column gap-1">
+                <div className="flex items-center gap-1">
+                    <input checked={ (talkMode === 0) } className="form-check-input" id="talkMode1" name="talkMode" type="radio" onChange={ event => setTalkMode(0) } />
                     <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) } />
+                </div>
+                <div className="flex items-center gap-1">
+                    <input checked={ (talkMode === 1) } className="form-check-input" id="talkMode2" name="talkMode" type="radio" onChange={ event => setTalkMode(1) } />
                     <Text>{ LocalizeText('wiredfurni.params.shout') }</Text>
-                </Flex>
-            </Column>
+                </div>
+            </div>
         </WiredActionBaseView>
     );
 }
diff --git a/src/components/wired/views/actions/WiredActionBotTeleportView.tsx b/src/components/wired/views/actions/WiredActionBotTeleportView.tsx
index 5d767b1c..e0086af2 100644
--- a/src/components/wired/views/actions/WiredActionBotTeleportView.tsx
+++ b/src/components/wired/views/actions/WiredActionBotTeleportView.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from 'react';
 import { LocalizeText, WiredFurniType } from '../../../../api';
-import { Column, Text } from '../../../../common';
+import { Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredActionBaseView } from './WiredActionBaseView';
 
@@ -17,11 +17,11 @@ export const WiredActionBotTeleportView: FC<{}> = props =>
     }, [ trigger ]);
 
     return (
-        <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID } hasSpecialInput={ true } save={ save }>
-            <Column gap={ 1 }>
+        <WiredActionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID } save={ save }>
+            <div className="flex flex-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) } />
-            </Column>
+                <input className="form-control form-control-sm" maxLength={ 32 } type="text" value={ botName } onChange={ event => setBotName(event.target.value) } />
+            </div>
         </WiredActionBaseView>
     );
 }
diff --git a/src/components/wired/views/actions/WiredActionCallAnotherStackView.tsx b/src/components/wired/views/actions/WiredActionCallAnotherStackView.tsx
index ee6d5476..ec85fa90 100644
--- a/src/components/wired/views/actions/WiredActionCallAnotherStackView.tsx
+++ b/src/components/wired/views/actions/WiredActionCallAnotherStackView.tsx
@@ -4,5 +4,5 @@ import { WiredActionBaseView } from './WiredActionBaseView';
 
 export const WiredActionCallAnotherStackView: FC<{}> = props =>
 {
-    return <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_BY_TYPE_OR_FROM_CONTEXT } hasSpecialInput={ false } save={ null } />;
+    return <WiredActionBaseView hasSpecialInput={ false } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_BY_TYPE_OR_FROM_CONTEXT } save={ null } />;
 }
diff --git a/src/components/wired/views/actions/WiredActionChaseView.tsx b/src/components/wired/views/actions/WiredActionChaseView.tsx
index c4945038..97b9710d 100644
--- a/src/components/wired/views/actions/WiredActionChaseView.tsx
+++ b/src/components/wired/views/actions/WiredActionChaseView.tsx
@@ -4,5 +4,5 @@ import { WiredActionBaseView } from './WiredActionBaseView';
 
 export const WiredActionChaseView: FC<{}> = props =>
 {
-    return <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_BY_TYPE_OR_FROM_CONTEXT } hasSpecialInput={ false } save={ null } />;
+    return <WiredActionBaseView hasSpecialInput={ false } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_BY_TYPE_OR_FROM_CONTEXT } save={ null } />;
 }
diff --git a/src/components/wired/views/actions/WiredActionChatView.tsx b/src/components/wired/views/actions/WiredActionChatView.tsx
index 62d95193..1f4b6364 100644
--- a/src/components/wired/views/actions/WiredActionChatView.tsx
+++ b/src/components/wired/views/actions/WiredActionChatView.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from 'react';
 import { GetConfigurationValue, LocalizeText, WiredFurniType } from '../../../../api';
-import { Column, Text } from '../../../../common';
+import { Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredActionBaseView } from './WiredActionBaseView';
 
@@ -17,11 +17,11 @@ export const WiredActionChatView: FC<{}> = props =>
     }, [ trigger ]);
 
     return (
-        <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ true } save={ save }>
-            <Column gap={ 1 }>
+        <WiredActionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
+            <div className="flex flex-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={ GetConfigurationValue<number>('wired.action.chat.max.length', 100) } />
-            </Column>
+                <input className="form-control form-control-sm" maxLength={ GetConfigurationValue<number>('wired.action.chat.max.length', 100) } type="text" value={ message } onChange={ event => setMessage(event.target.value) } />
+            </div>
         </WiredActionBaseView>
     );
 }
diff --git a/src/components/wired/views/actions/WiredActionFleeView.tsx b/src/components/wired/views/actions/WiredActionFleeView.tsx
index a80ab434..8613fddb 100644
--- a/src/components/wired/views/actions/WiredActionFleeView.tsx
+++ b/src/components/wired/views/actions/WiredActionFleeView.tsx
@@ -4,5 +4,5 @@ import { WiredActionBaseView } from './WiredActionBaseView';
 
 export const WiredActionFleeView: FC<{}> = props =>
 {
-    return <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_BY_TYPE_OR_FROM_CONTEXT } hasSpecialInput={ false } save={ null } />;
+    return <WiredActionBaseView hasSpecialInput={ false } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_BY_TYPE_OR_FROM_CONTEXT } save={ null } />;
 }
diff --git a/src/components/wired/views/actions/WiredActionGiveRewardView.tsx b/src/components/wired/views/actions/WiredActionGiveRewardView.tsx
index a255fe37..eaee66b1 100644
--- a/src/components/wired/views/actions/WiredActionGiveRewardView.tsx
+++ b/src/components/wired/views/actions/WiredActionGiveRewardView.tsx
@@ -2,7 +2,7 @@ import { FC, useEffect, useState } from 'react';
 import { FaPlus, FaTrash } from 'react-icons/fa';
 import ReactSlider from 'react-slider';
 import { LocalizeText, WiredFurniType } from '../../../../api';
-import { Button, Column, Flex, Text } from '../../../../common';
+import { Button, Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredActionBaseView } from './WiredActionBaseView';
 
@@ -92,11 +92,11 @@ export const WiredActionGiveRewardView: FC<{}> = props =>
     }, [ trigger ]);
 
     return (
-        <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ true } save={ save }>
-            <Flex alignItems="center" gap={ 1 }>
-                <input className="form-check-input" type="checkbox" id="limitEnabled" onChange={ event => setLimitEnabled(event.target.checked) } />
+        <WiredActionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
+            <div className="flex items-center gap-1">
+                <input className="form-check-input" id="limitEnabled" type="checkbox" onChange={ event => setLimitEnabled(event.target.checked) } />
                 <Text>{ LocalizeText('wiredfurni.params.prizelimit', [ 'amount' ], [ limitEnabled ? rewardsLimit.toString() : '' ]) }</Text>
-            </Flex>
+            </div>
             { !limitEnabled &&
                 <Text center small className="bg-muted rounded p-1">
                     Reward limit not set. Make sure rewards are badges or non-tradeable items.
@@ -104,57 +104,57 @@ export const WiredActionGiveRewardView: FC<{}> = props =>
             { limitEnabled &&
                 <ReactSlider
                     className={ 'nitro-slider' }
-                    min={ 1 }
                     max={ 1000 }
+                    min={ 1 }
                     value={ rewardsLimit }
                     onChange={ event => setRewardsLimit(event) } /> }
             <hr className="m-0 bg-dark" />
-            <Column gap={ 1 }>
+            <div className="flex flex-column gap-1">
                 <Text bold>How often can a user be rewarded?</Text>
-                <Flex gap={ 1 }>
+                <div className="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>
+                    { (rewardTime > 0) && <input className="form-control form-control-sm" type="number" value={ limitationInterval } onChange={ event => setLimitationInterval(Number(event.target.value)) } /> }
+                </div>
+            </div>
             <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) } />
+            <div className="flex items-center gap-1">
+                <input checked={ uniqueRewards } className="form-check-input" id="uniqueRewards" type="checkbox" onChange={ (e) => setUniqueRewards(e.target.checked) } />
                 <Text>Unique rewards</Text>
-            </Flex>
+            </div>
             <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">
+            <div className="flex justify-content-between items-center">
                 <Text bold>Rewards</Text>
                 <Button variant="success" onClick={ addReward }>
                     <FaPlus className="fa-icon" />
                 </Button>
-            </Flex>
-            <Column gap={ 1 }>
+            </div>
+            <div className="flex 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) } />
+                        <div key={ index } className="flex gap-1">
+                            <div className="flex items-center gap-1">
+                                <input checked={ reward.isBadge } className="form-check-input" type="checkbox" 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" />
+                            </div>
+                            <input className="form-control form-control-sm" placeholder="Item Code" type="text" value={ reward.itemCode } onChange={ e => updateReward(index, reward.isBadge, e.target.value, reward.probability) } />
+                            <input className="form-control form-control-sm" placeholder="Probability" type="number" value={ reward.probability } onChange={ e => updateReward(index, reward.isBadge, reward.itemCode, Number(e.target.value)) } />
                             { (index > 0) &&
                             <Button variant="danger" onClick={ event => removeReward(index) }>
                                 <FaTrash className="fa-icon" />
                             </Button> }
-                        </Flex>
+                        </div>
                     )
                 }) }
-            </Column>
+            </div>
         </WiredActionBaseView>
     );
 }
diff --git a/src/components/wired/views/actions/WiredActionGiveScoreToPredefinedTeamView.tsx b/src/components/wired/views/actions/WiredActionGiveScoreToPredefinedTeamView.tsx
index 43ab240a..83c5c209 100644
--- a/src/components/wired/views/actions/WiredActionGiveScoreToPredefinedTeamView.tsx
+++ b/src/components/wired/views/actions/WiredActionGiveScoreToPredefinedTeamView.tsx
@@ -1,7 +1,7 @@
 import { FC, useEffect, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { LocalizeText, WiredFurniType } from '../../../../api';
-import { Column, Flex, Text } from '../../../../common';
+import { Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredActionBaseView } from './WiredActionBaseView';
 
@@ -31,37 +31,37 @@ export const WiredActionGiveScoreToPredefinedTeamView: FC<{}> = props =>
     }, [ trigger ]);
 
     return (
-        <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ true } save={ save }>
-            <Column gap={ 1 }>
+        <WiredActionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
+            <div className="flex flex-column gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.setpoints', [ 'points' ], [ points.toString() ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
-                    min={ 1 }
                     max={ 100 }
+                    min={ 1 }
                     value={ points }
                     onChange={ event => setPoints(event) } />
-            </Column>
-            <Column gap={ 1 }>
+            </div>
+            <div className="flex flex-column gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.settimesingame', [ 'times' ], [ time.toString() ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
-                    min={ 1 }
                     max={ 10 }
+                    min={ 1 }
                     value={ time }
                     onChange={ event => setTime(event) } />
-            </Column>
-            <Column gap={ 1 }>
+            </div>
+            <div className="flex flex-column gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.team') }</Text>
                 { [ 1, 2, 3, 4 ].map(value =>
                 {
                     return (
-                        <Flex key={ value } gap={ 1 }>
-                            <input className="form-check-input" type="radio" name="selectedTeam" id={ `selectedTeam${ value }` } checked={ (selectedTeam === value) } onChange={ event => setSelectedTeam(value) } />
+                        <div key={ value } className="flex gap-1">
+                            <input checked={ (selectedTeam === value) } className="form-check-input" id={ `selectedTeam${ value }` } name="selectedTeam" type="radio" onChange={ event => setSelectedTeam(value) } />
                             <Text>{ LocalizeText('wiredfurni.params.team.' + value) }</Text>
-                        </Flex>
+                        </div>
                     );
                 }) }
-            </Column>
+            </div>
         </WiredActionBaseView>
     );
 }
diff --git a/src/components/wired/views/actions/WiredActionGiveScoreView.tsx b/src/components/wired/views/actions/WiredActionGiveScoreView.tsx
index 28bfb0b2..5f5358fc 100644
--- a/src/components/wired/views/actions/WiredActionGiveScoreView.tsx
+++ b/src/components/wired/views/actions/WiredActionGiveScoreView.tsx
@@ -1,7 +1,7 @@
 import { FC, useEffect, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { LocalizeText, WiredFurniType } from '../../../../api';
-import { Column, Text } from '../../../../common';
+import { Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredActionBaseView } from './WiredActionBaseView';
 
@@ -28,25 +28,25 @@ export const WiredActionGiveScoreView: FC<{}> = props =>
     }, [ trigger ]);
 
     return (
-        <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ true } save={ save }>
-            <Column gap={ 1 }>
+        <WiredActionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
+            <div className="flex flex-column gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.setpoints', [ 'points' ], [ points.toString() ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
-                    min={ 1 }
                     max={ 100 }
+                    min={ 1 }
                     value={ points }
                     onChange={ event => setPoints(event) } />
-            </Column>
-            <Column gap={ 1 }>
+            </div>
+            <div className="flex flex-column gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.settimesingame', [ 'times' ], [ time.toString() ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
-                    min={ 1 }
                     max={ 10 }
+                    min={ 1 }
                     value={ time }
                     onChange={ event => setTime(event) } />
-            </Column>
+            </div>
         </WiredActionBaseView>
     );
 }
diff --git a/src/components/wired/views/actions/WiredActionJoinTeamView.tsx b/src/components/wired/views/actions/WiredActionJoinTeamView.tsx
index 7580564e..4ab20adb 100644
--- a/src/components/wired/views/actions/WiredActionJoinTeamView.tsx
+++ b/src/components/wired/views/actions/WiredActionJoinTeamView.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from 'react';
 import { LocalizeText, WiredFurniType } from '../../../../api';
-import { Column, Flex, Text } from '../../../../common';
+import { Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredActionBaseView } from './WiredActionBaseView';
 
@@ -17,19 +17,19 @@ export const WiredActionJoinTeamView: FC<{}> = props =>
     }, [ trigger ]);
 
     return (
-        <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ true } save={ save }>
-            <Column gap={ 1 }>
+        <WiredActionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
+            <div className="flex flex-column gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.team') }</Text>
                 { [ 1, 2, 3, 4 ].map(team =>
                 {
                     return (
-                        <Flex key={ team } gap={ 1 }>
-                            <input className="form-check-input" type="radio" name="selectedTeam" id={ `selectedTeam${ team }` } checked={ (selectedTeam === team) } onChange={ event => setSelectedTeam(team) } />
+                        <div key={ team } className="flex gap-1">
+                            <input checked={ (selectedTeam === team) } className="form-check-input" id={ `selectedTeam${ team }` } name="selectedTeam" type="radio" onChange={ event => setSelectedTeam(team) } />
                             <Text>{ LocalizeText(`wiredfurni.params.team.${ team }`) }</Text>
-                        </Flex>
+                        </div>
                     )
                 }) }
-            </Column>
+            </div>
         </WiredActionBaseView>
     );
 }
diff --git a/src/components/wired/views/actions/WiredActionKickFromRoomView.tsx b/src/components/wired/views/actions/WiredActionKickFromRoomView.tsx
index ba6033fd..609a8620 100644
--- a/src/components/wired/views/actions/WiredActionKickFromRoomView.tsx
+++ b/src/components/wired/views/actions/WiredActionKickFromRoomView.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from 'react';
 import { GetConfigurationValue, LocalizeText, WiredFurniType } from '../../../../api';
-import { Column, Text } from '../../../../common';
+import { Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredActionBaseView } from './WiredActionBaseView';
 
@@ -17,11 +17,11 @@ export const WiredActionKickFromRoomView: FC<{}> = props =>
     }, [ trigger ]);
 
     return (
-        <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ true } save={ save }>
-            <Column gap={ 1 }>
+        <WiredActionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
+            <div className="flex flex-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={ GetConfigurationValue<number>('wired.action.kick.from.room.max.length', 100) } />
-            </Column>
+                <input className="form-control form-control-sm" maxLength={ GetConfigurationValue<number>('wired.action.kick.from.room.max.length', 100) } type="text" value={ message } onChange={ event => setMessage(event.target.value) } />
+            </div>
         </WiredActionBaseView>
     );
 }
diff --git a/src/components/wired/views/actions/WiredActionLeaveTeamView.tsx b/src/components/wired/views/actions/WiredActionLeaveTeamView.tsx
index eaa834ff..2a8c3056 100644
--- a/src/components/wired/views/actions/WiredActionLeaveTeamView.tsx
+++ b/src/components/wired/views/actions/WiredActionLeaveTeamView.tsx
@@ -4,5 +4,5 @@ import { WiredActionBaseView } from './WiredActionBaseView';
 
 export const WiredActionLeaveTeamView: FC<{}> = props =>
 {
-    return <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ false } save={ null } />;
+    return <WiredActionBaseView hasSpecialInput={ false } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ null } />;
 }
diff --git a/src/components/wired/views/actions/WiredActionMoveAndRotateFurniView.tsx b/src/components/wired/views/actions/WiredActionMoveAndRotateFurniView.tsx
index 62801af8..5bea5631 100644
--- a/src/components/wired/views/actions/WiredActionMoveAndRotateFurniView.tsx
+++ b/src/components/wired/views/actions/WiredActionMoveAndRotateFurniView.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from 'react';
 import { LocalizeText, WiredFurniType } from '../../../../api';
-import { Column, Flex, Text } from '../../../../common';
+import { Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredActionBaseView } from './WiredActionBaseView';
 
@@ -48,35 +48,35 @@ export const WiredActionMoveAndRotateFurniView: FC<{}> = props =>
     }, [ trigger ]);
 
     return (
-        <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_BY_TYPE_OR_FROM_CONTEXT } hasSpecialInput={ true } save={ save }>
-            <Column gap={ 1 }>
+        <WiredActionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_BY_TYPE_OR_FROM_CONTEXT } save={ save }>
+            <div className="flex flex-column gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.startdir') }</Text>
-                <Flex gap={ 1 }>
+                <div className="flex gap-1">
                     { directionOptions.map(option =>
                     {
                         return (
-                            <Flex key={ option.value } 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) } />
+                            <div key={ option.value } className="flex items-center gap-1">
+                                <input checked={ (movement === option.value) } className="form-check-input" id={ `movement${ option.value }` } name="movement" type="radio" onChange={ event => setMovement(option.value) } />
                                 <Text>
                                     <i className={ `icon icon-${ option.icon }` } />
                                 </Text>
-                            </Flex>
+                            </div>
                         )
                     }) }
-                </Flex>
-            </Column>
-            <Column gap={ 1 }>
+                </div>
+            </div>
+            <div className="flex flex-column gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.turn') }</Text>
                 { rotationOptions.map(option =>
                 {
                     return (
-                        <Flex key={ option } alignItems="center" gap={ 1 }>
-                            <input className="form-check-input" type="radio" name="rotation" id={ `rotation${ option }` } checked={ (rotation === option) } onChange={ event => setRotation(option) } />
+                        <div key={ option } className="flex items-center gap-1">
+                            <input checked={ (rotation === option) } className="form-check-input" id={ `rotation${ option }` } name="rotation" type="radio" onChange={ event => setRotation(option) } />
                             <Text>{ LocalizeText(`wiredfurni.params.turn.${ option }`) }</Text>
-                        </Flex>
+                        </div>
                     )
                 }) }
-            </Column>
+            </div>
         </WiredActionBaseView>
     );
 }
diff --git a/src/components/wired/views/actions/WiredActionMoveFurniToView.tsx b/src/components/wired/views/actions/WiredActionMoveFurniToView.tsx
index 56bdb6b4..71961250 100644
--- a/src/components/wired/views/actions/WiredActionMoveFurniToView.tsx
+++ b/src/components/wired/views/actions/WiredActionMoveFurniToView.tsx
@@ -1,7 +1,7 @@
 import { FC, useEffect, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { LocalizeText, WiredFurniType } from '../../../../api';
-import { Column, Flex, Text } from '../../../../common';
+import { Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredActionBaseView } from './WiredActionBaseView';
 
@@ -47,30 +47,30 @@ export const WiredActionMoveFurniToView: FC<{}> = props =>
     }, [ trigger ]);
 
     return (
-        <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_OR_BY_TYPE } hasSpecialInput={ true } save={ save }>
-            <Column gap={ 1 }>
+        <WiredActionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_OR_BY_TYPE } save={ save }>
+            <div className="flex flex-column gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.emptytiles', [ 'tiles' ], [ spacing.toString() ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
-                    min={ 1 }
                     max={ 5 }
+                    min={ 1 }
                     value={ spacing }
                     onChange={ event => setSpacing(event) } />
-            </Column>
-            <Column gap={ 1 }>
+            </div>
+            <div className="flex flex-column gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.startdir') }</Text>
-                <Flex gap={ 1 }>
+                <div className="flex gap-1">
                     { directionOptions.map(value =>
                     {
                         return (
-                            <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) } />
+                            <div key={ value.value } className="flex items-center gap-1">
+                                <input checked={ (movement === value.value) } className="form-check-input" id={ `movement${ value.value }` } name="movement" type="radio" onChange={ event => setMovement(value.value) } />
                                 <Text><i className={ `icon icon-${ value.icon }` } /></Text>
-                            </Flex>
+                            </div>
                         )
                     }) }
-                </Flex>
-            </Column>
+                </div>
+            </div>
         </WiredActionBaseView>
     );
 }
diff --git a/src/components/wired/views/actions/WiredActionMoveFurniView.tsx b/src/components/wired/views/actions/WiredActionMoveFurniView.tsx
index b5a08887..0785253c 100644
--- a/src/components/wired/views/actions/WiredActionMoveFurniView.tsx
+++ b/src/components/wired/views/actions/WiredActionMoveFurniView.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from 'react';
 import { LocalizeText, WiredFurniType } from '../../../../api';
-import { Column, Flex, Text } from '../../../../common';
+import { Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredActionBaseView } from './WiredActionBaseView';
 
@@ -60,41 +60,41 @@ export const WiredActionMoveFurniView: FC<{}> = props =>
     }, [ trigger ]);
 
     return (
-        <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_BY_TYPE_OR_FROM_CONTEXT } hasSpecialInput={ true } save={ save }>
-            <Column gap={ 1 }>
+        <WiredActionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_BY_TYPE_OR_FROM_CONTEXT } save={ save }>
+            <div className="flex flex-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) } />
+                <div className="flex items-center gap-1">
+                    <input checked={ (movement === 0) } className="form-check-input" id="movement0" name="selectedTeam" type="radio" onChange={ event => setMovement(0) } />
                     <Text>{ LocalizeText('wiredfurni.params.movefurni.0') }</Text>
-                </Flex>
-                <Flex gap={ 1 }>
+                </div>
+                <div className="flex gap-1">
                     { directionOptions.map(option =>
                     {
                         return (
-                            <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) } />
+                            <div key={ option.value } className="flex items-center gap-1">
+                                <input checked={ (movement === option.value) } className="form-check-input" id={ `movement${ option.value }` } name="movement" type="radio" onChange={ event => setMovement(option.value) } />
                                 <i className={ `icon icon-${ option.icon }` } />
-                            </Flex>
+                            </div>
                         )
                     }) }
                     <div className="col" />
-                </Flex>
-            </Column>
-            <Column gap={ 1 }>
+                </div>
+            </div>
+            <div className="flex flex-column gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.rotatefurni') }</Text>
                 { rotationOptions.map(option =>
                 {
                     return (
-                        <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) } />
+                        <div key={ option } className="flex items-center gap-1">
+                            <input checked={ (rotation === option) } className="form-check-input" id={ `rotation${ option }` } name="rotation" type="radio" onChange={ event => setRotation(option) } />
                             <Text>
                                 { [ 1, 2 ].includes(option) && <i className={ `icon icon-rot-${ option }` } /> }
                                 { LocalizeText(`wiredfurni.params.rotatefurni.${ option }`) }
                             </Text>
-                        </Flex>
+                        </div>
                     )
                 }) }
-            </Column>
+            </div>
         </WiredActionBaseView>
     );
 }
diff --git a/src/components/wired/views/actions/WiredActionMuteUserView.tsx b/src/components/wired/views/actions/WiredActionMuteUserView.tsx
index 15ecfd55..3f9e91e2 100644
--- a/src/components/wired/views/actions/WiredActionMuteUserView.tsx
+++ b/src/components/wired/views/actions/WiredActionMuteUserView.tsx
@@ -1,7 +1,7 @@
 import { FC, useEffect, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { GetConfigurationValue, LocalizeText, WiredFurniType } from '../../../../api';
-import { Column, Text } from '../../../../common';
+import { Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredActionBaseView } from './WiredActionBaseView';
 
@@ -24,20 +24,20 @@ export const WiredActionMuteUserView: FC<{}> = props =>
     }, [ trigger ]);
 
     return (
-        <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ true } save={ save }>
-            <Column gap={ 1 }>
+        <WiredActionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
+            <div className="flex flex-column gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.length.minutes', [ 'minutes' ], [ time.toString() ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
-                    min={ 1 }
                     max={ 10 }
+                    min={ 1 }
                     value={ time }
                     onChange={ event => setTime(event) } />
-            </Column>
-            <Column gap={ 1 }>
+            </div>
+            <div className="flex flex-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={ GetConfigurationValue<number>('wired.action.mute.user.max.length', 100) } />
-            </Column>
+                <input className="form-control form-control-sm" maxLength={ GetConfigurationValue<number>('wired.action.mute.user.max.length', 100) } type="text" value={ message } onChange={ event => setMessage(event.target.value) } />
+            </div>
         </WiredActionBaseView>
     );
 }
diff --git a/src/components/wired/views/actions/WiredActionResetView.tsx b/src/components/wired/views/actions/WiredActionResetView.tsx
index 9245c673..90444274 100644
--- a/src/components/wired/views/actions/WiredActionResetView.tsx
+++ b/src/components/wired/views/actions/WiredActionResetView.tsx
@@ -4,5 +4,5 @@ import { WiredActionBaseView } from './WiredActionBaseView';
 
 export const WiredActionResetView: FC<{}> = props =>
 {
-    return <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ false } save={ null } />;
+    return <WiredActionBaseView hasSpecialInput={ false } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ null } />;
 }
diff --git a/src/components/wired/views/actions/WiredActionSetFurniStateToView.tsx b/src/components/wired/views/actions/WiredActionSetFurniStateToView.tsx
index 587254c8..7de91f0a 100644
--- a/src/components/wired/views/actions/WiredActionSetFurniStateToView.tsx
+++ b/src/components/wired/views/actions/WiredActionSetFurniStateToView.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from 'react';
 import { LocalizeText, WiredFurniType } from '../../../../api';
-import { Column, Flex, Text } from '../../../../common';
+import { Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredActionBaseView } from './WiredActionBaseView';
 
@@ -21,22 +21,22 @@ export const WiredActionSetFurniStateToView: FC<{}> = props =>
     }, [ trigger ]);
 
     return (
-        <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID } hasSpecialInput={ true } save={ save }>
-            <Column gap={ 1 }>
+        <WiredActionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID } save={ save }>
+            <div className="flex flex-column gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.conditions') }</Text>
-                <Flex alignItems="center" gap={ 1 }>
-                    <input className="form-check-input" type="checkbox" id="stateFlag" checked={ !!stateFlag } onChange={ event => setStateFlag(event.target.checked ? 1 : 0) } />
+                <div className="flex items-center gap-1">
+                    <input checked={ !!stateFlag } className="form-check-input" id="stateFlag" type="checkbox" onChange={ event => setStateFlag(event.target.checked ? 1 : 0) } />
                     <Text>{ LocalizeText('wiredfurni.params.condition.state') }</Text>
-                </Flex>
-                <Flex alignItems="center" gap={ 1 }>
-                    <input className="form-check-input" type="checkbox" id="directionFlag" checked={ !!directionFlag } onChange={ event => setDirectionFlag(event.target.checked ? 1 : 0) } />
+                </div>
+                <div className="flex items-center gap-1">
+                    <input checked={ !!directionFlag } className="form-check-input" id="directionFlag" type="checkbox" onChange={ event => setDirectionFlag(event.target.checked ? 1 : 0) } />
                     <Text>{ LocalizeText('wiredfurni.params.condition.direction') }</Text>
-                </Flex>
-                <Flex alignItems="center" gap={ 1 }>
-                    <input className="form-check-input" type="checkbox" id="positionFlag" checked={ !!positionFlag } onChange={ event => setPositionFlag(event.target.checked ? 1 : 0) } />
+                </div>
+                <div className="flex items-center gap-1">
+                    <input checked={ !!positionFlag } className="form-check-input" id="positionFlag" type="checkbox" onChange={ event => setPositionFlag(event.target.checked ? 1 : 0) } />
                     <Text>{ LocalizeText('wiredfurni.params.condition.position') }</Text>
-                </Flex>
-            </Column>
+                </div>
+            </div>
         </WiredActionBaseView>
     );
 }
diff --git a/src/components/wired/views/actions/WiredActionTeleportView.tsx b/src/components/wired/views/actions/WiredActionTeleportView.tsx
index 652da616..616a439f 100644
--- a/src/components/wired/views/actions/WiredActionTeleportView.tsx
+++ b/src/components/wired/views/actions/WiredActionTeleportView.tsx
@@ -4,5 +4,5 @@ import { WiredActionBaseView } from './WiredActionBaseView';
 
 export const WiredActionTeleportView: FC<{}> = props =>
 {
-    return <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_BY_TYPE_OR_FROM_CONTEXT } hasSpecialInput={ false } save={ null } />;
+    return <WiredActionBaseView hasSpecialInput={ false } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_BY_TYPE_OR_FROM_CONTEXT } save={ null } />;
 }
diff --git a/src/components/wired/views/actions/WiredActionToggleFurniStateView.tsx b/src/components/wired/views/actions/WiredActionToggleFurniStateView.tsx
index 37b5d2e2..337ba035 100644
--- a/src/components/wired/views/actions/WiredActionToggleFurniStateView.tsx
+++ b/src/components/wired/views/actions/WiredActionToggleFurniStateView.tsx
@@ -4,5 +4,5 @@ import { WiredActionBaseView } from './WiredActionBaseView';
 
 export const WiredActionToggleFurniStateView: FC<{}> = props =>
 {
-    return <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_BY_TYPE_OR_FROM_CONTEXT } hasSpecialInput={ false } save={ null } />;
+    return <WiredActionBaseView hasSpecialInput={ false } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_BY_TYPE_OR_FROM_CONTEXT } save={ null } />;
 }
diff --git a/src/components/wired/views/conditions/WiredConditionActorHasHandItem.tsx b/src/components/wired/views/conditions/WiredConditionActorHasHandItem.tsx
index 24e89ed1..401452c8 100644
--- a/src/components/wired/views/conditions/WiredConditionActorHasHandItem.tsx
+++ b/src/components/wired/views/conditions/WiredConditionActorHasHandItem.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from 'react';
 import { LocalizeText, WiredFurniType } from '../../../../api';
-import { Column, Text } from '../../../../common';
+import { Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredConditionBaseView } from './WiredConditionBaseView';
 
@@ -19,8 +19,8 @@ export const WiredConditionActorHasHandItemView: FC<{}> = props =>
     }, [ trigger ]);
 
     return (
-        <WiredConditionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ true } save={ save }>
-            <Column gap={ 1 }>
+        <WiredConditionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
+            <div className="flex flex-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)) }>
                     { ALLOWED_HAND_ITEM_IDS.map(value =>
@@ -28,7 +28,7 @@ export const WiredConditionActorHasHandItemView: FC<{}> = props =>
                         return <option key={ value } value={ value }>{ LocalizeText(`handitem${ value }`) }</option>
                     }) }
                 </select>
-            </Column>
+            </div>
         </WiredConditionBaseView>
     );
 }
diff --git a/src/components/wired/views/conditions/WiredConditionActorIsGroupMemberView.tsx b/src/components/wired/views/conditions/WiredConditionActorIsGroupMemberView.tsx
index e278eabe..5c4da522 100644
--- a/src/components/wired/views/conditions/WiredConditionActorIsGroupMemberView.tsx
+++ b/src/components/wired/views/conditions/WiredConditionActorIsGroupMemberView.tsx
@@ -4,5 +4,5 @@ import { WiredConditionBaseView } from './WiredConditionBaseView';
 
 export const WiredConditionActorIsGroupMemberView: FC<{}> = props =>
 {
-    return <WiredConditionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ false } save={ null } />;
+    return <WiredConditionBaseView hasSpecialInput={ false } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ null } />;
 }
diff --git a/src/components/wired/views/conditions/WiredConditionActorIsOnFurniView.tsx b/src/components/wired/views/conditions/WiredConditionActorIsOnFurniView.tsx
index 10cddf56..4d3cd265 100644
--- a/src/components/wired/views/conditions/WiredConditionActorIsOnFurniView.tsx
+++ b/src/components/wired/views/conditions/WiredConditionActorIsOnFurniView.tsx
@@ -4,5 +4,5 @@ import { WiredConditionBaseView } from './WiredConditionBaseView';
 
 export const WiredConditionActorIsOnFurniView: FC<{}> = props =>
 {
-    return <WiredConditionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID } hasSpecialInput={ false } save={ null } />;
+    return <WiredConditionBaseView hasSpecialInput={ false } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID } save={ null } />;
 }
diff --git a/src/components/wired/views/conditions/WiredConditionActorIsTeamMemberView.tsx b/src/components/wired/views/conditions/WiredConditionActorIsTeamMemberView.tsx
index 20db3ac3..04cc8d3a 100644
--- a/src/components/wired/views/conditions/WiredConditionActorIsTeamMemberView.tsx
+++ b/src/components/wired/views/conditions/WiredConditionActorIsTeamMemberView.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from 'react';
 import { LocalizeText, WiredFurniType } from '../../../../api';
-import { Column, Flex, Text } from '../../../../common';
+import { Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredConditionBaseView } from './WiredConditionBaseView';
 
@@ -19,19 +19,19 @@ export const WiredConditionActorIsTeamMemberView: FC<{}> = props =>
     }, [ trigger ]);
     
     return (
-        <WiredConditionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ true } save={ save }>
-            <Column gap={ 1 }>
+        <WiredConditionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
+            <div className="flex flex-column gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.team') }</Text>
                 { teamIds.map(value =>
                 {
                     return (
-                        <Flex key={ value } gap={ 1 } alignItems="center">
-                            <input className="form-check-input" type="radio" name="selectedTeam" id={ `selectedTeam${ value }` } checked={ (selectedTeam === value) } onChange={ event => setSelectedTeam(value) } />
+                        <div key={ value } className="items-center gap-1">
+                            <input checked={ (selectedTeam === value) } className="form-check-input" id={ `selectedTeam${ value }` } name="selectedTeam" type="radio" onChange={ event => setSelectedTeam(value) } />
                             <Text>{ LocalizeText(`wiredfurni.params.team.${ value }`) }</Text>
-                        </Flex>
+                        </div>
                     ) 
                 }) }
-            </Column>
+            </div>
         </WiredConditionBaseView>
     );
 }
diff --git a/src/components/wired/views/conditions/WiredConditionActorIsWearingBadgeView.tsx b/src/components/wired/views/conditions/WiredConditionActorIsWearingBadgeView.tsx
index 01e6d3b1..4d690e54 100644
--- a/src/components/wired/views/conditions/WiredConditionActorIsWearingBadgeView.tsx
+++ b/src/components/wired/views/conditions/WiredConditionActorIsWearingBadgeView.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from 'react';
 import { LocalizeText, WiredFurniType } from '../../../../api';
-import { Column, Text } from '../../../../common';
+import { Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredConditionBaseView } from './WiredConditionBaseView';
 
@@ -17,11 +17,11 @@ export const WiredConditionActorIsWearingBadgeView: FC<{}> = props =>
     }, [ trigger ]);
     
     return (
-        <WiredConditionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ true } save={ save }>
-            <Column gap={ 1 }>
+        <WiredConditionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
+            <div className="flex flex-column gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.badgecode') }</Text>
-                <input type="text" className="form-control form-control-sm" value={ badge } onChange={ event => setBadge(event.target.value) } />
-            </Column>
+                <input className="form-control form-control-sm" type="text" value={ badge } onChange={ event => setBadge(event.target.value) } />
+            </div>
         </WiredConditionBaseView>
     );
 }
diff --git a/src/components/wired/views/conditions/WiredConditionActorIsWearingEffectView.tsx b/src/components/wired/views/conditions/WiredConditionActorIsWearingEffectView.tsx
index 00d7fa63..7c36fccd 100644
--- a/src/components/wired/views/conditions/WiredConditionActorIsWearingEffectView.tsx
+++ b/src/components/wired/views/conditions/WiredConditionActorIsWearingEffectView.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from 'react';
 import { LocalizeText, WiredFurniType } from '../../../../api';
-import { Column, Text } from '../../../../common';
+import { Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredConditionBaseView } from './WiredConditionBaseView';
 
@@ -17,11 +17,11 @@ export const WiredConditionActorIsWearingEffectView: FC<{}> = props =>
     }, [ trigger ]);
     
     return (
-        <WiredConditionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ true } save={ save }>
-            <Column gap={ 1 }>
+        <WiredConditionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
+            <div className="flex flex-column gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.tooltip.effectid') }</Text>
-                <input type="number" className="form-control form-control-sm" value={ effect } onChange={ event => setEffect(parseInt(event.target.value)) } />
-            </Column>
+                <input className="form-control form-control-sm" type="number" value={ effect } onChange={ event => setEffect(parseInt(event.target.value)) } />
+            </div>
         </WiredConditionBaseView>
     );
 }
diff --git a/src/components/wired/views/conditions/WiredConditionBaseView.tsx b/src/components/wired/views/conditions/WiredConditionBaseView.tsx
index fc492150..15a6f2ee 100644
--- a/src/components/wired/views/conditions/WiredConditionBaseView.tsx
+++ b/src/components/wired/views/conditions/WiredConditionBaseView.tsx
@@ -16,7 +16,7 @@ export const WiredConditionBaseView: FC<PropsWithChildren<WiredConditionBaseView
     const onSave = () => (save && save());
 
     return (
-        <WiredBaseView wiredType="condition" requiresFurni={ requiresFurni } hasSpecialInput={ hasSpecialInput } save={ onSave }>
+        <WiredBaseView hasSpecialInput={ hasSpecialInput } requiresFurni={ requiresFurni } save={ onSave } wiredType="condition">
             { children }
         </WiredBaseView>
     );
diff --git a/src/components/wired/views/conditions/WiredConditionDateRangeView.tsx b/src/components/wired/views/conditions/WiredConditionDateRangeView.tsx
index 36832e11..61c3ce0d 100644
--- a/src/components/wired/views/conditions/WiredConditionDateRangeView.tsx
+++ b/src/components/wired/views/conditions/WiredConditionDateRangeView.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from 'react';
 import { LocalizeText, WiredDateToString, WiredFurniType } from '../../../../api';
-import { Column, Text } from '../../../../common';
+import { Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredConditionBaseView } from './WiredConditionBaseView';
 
@@ -44,15 +44,15 @@ export const WiredConditionDateRangeView: FC<{}> = props =>
     }, [ trigger ]);
     
     return (
-        <WiredConditionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ true } save={ save }>
-            <Column gap={ 1 }>
+        <WiredConditionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
+            <div className="flex flex-column gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.startdate') }</Text>
-                <input type="text" className="form-control form-control-sm" value={ startDate } onChange={ (e) => setStartDate(e.target.value) } />
-            </Column>
-            <Column gap={ 1 }>
+                <input className="form-control form-control-sm" type="text" value={ startDate } onChange={ (e) => setStartDate(e.target.value) } />
+            </div>
+            <div className="flex flex-column gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.enddate') }</Text>
-                <input type="text" className="form-control form-control-sm" value={ endDate } onChange={ (e) => setEndDate(e.target.value) } />
-            </Column>
+                <input className="form-control form-control-sm" type="text" value={ endDate } onChange={ (e) => setEndDate(e.target.value) } />
+            </div>
         </WiredConditionBaseView>
     );
 }
diff --git a/src/components/wired/views/conditions/WiredConditionFurniHasAvatarOnView.tsx b/src/components/wired/views/conditions/WiredConditionFurniHasAvatarOnView.tsx
index aa3ba141..7f1a2fd9 100644
--- a/src/components/wired/views/conditions/WiredConditionFurniHasAvatarOnView.tsx
+++ b/src/components/wired/views/conditions/WiredConditionFurniHasAvatarOnView.tsx
@@ -4,5 +4,5 @@ import { WiredConditionBaseView } from './WiredConditionBaseView';
 
 export const WiredConditionFurniHasAvatarOnView: FC<{}> = props =>
 {
-    return <WiredConditionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID } hasSpecialInput={ false } save={ null } />;
+    return <WiredConditionBaseView hasSpecialInput={ false } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID } save={ null } />;
 }
diff --git a/src/components/wired/views/conditions/WiredConditionFurniHasFurniOnView.tsx b/src/components/wired/views/conditions/WiredConditionFurniHasFurniOnView.tsx
index 1a9d0ef6..989b777f 100644
--- a/src/components/wired/views/conditions/WiredConditionFurniHasFurniOnView.tsx
+++ b/src/components/wired/views/conditions/WiredConditionFurniHasFurniOnView.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from 'react';
 import { LocalizeText, WiredFurniType } from '../../../../api';
-import { Column, Flex, Text } from '../../../../common';
+import { Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredConditionBaseView } from './WiredConditionBaseView';
 
@@ -17,19 +17,19 @@ export const WiredConditionFurniHasFurniOnView: FC<{}> = props =>
     }, [ trigger ]);
     
     return (
-        <WiredConditionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID } hasSpecialInput={ true } save={ save }>
-            <Column gap={ 1 }>
+        <WiredConditionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID } save={ save }>
+            <div className="flex flex-column gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.requireall') }</Text>
                 { [ 0, 1 ].map(value =>
                 {
                     return (
-                        <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) } />
+                        <div key={ value } className="flex items-center gap-1">
+                            <input checked={ (requireAll === value) } className="form-check-input" id={ `requireAll${ value }` } name="requireAll" type="radio" onChange={ event => setRequireAll(value) } />
                             <Text>{ LocalizeText('wiredfurni.params.requireall.' + value) }</Text>
-                        </Flex>
+                        </div>
                     )
                 }) }
-            </Column>
+            </div>
         </WiredConditionBaseView>
     );
 }
diff --git a/src/components/wired/views/conditions/WiredConditionFurniHasNotFurniOnView.tsx b/src/components/wired/views/conditions/WiredConditionFurniHasNotFurniOnView.tsx
index 031ec08f..a7c37216 100644
--- a/src/components/wired/views/conditions/WiredConditionFurniHasNotFurniOnView.tsx
+++ b/src/components/wired/views/conditions/WiredConditionFurniHasNotFurniOnView.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from 'react';
 import { LocalizeText, WiredFurniType } from '../../../../api';
-import { Column, Flex, Text } from '../../../../common';
+import { Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredConditionBaseView } from './WiredConditionBaseView';
 
@@ -17,19 +17,19 @@ export const WiredConditionFurniHasNotFurniOnView: FC<{}> = props =>
     }, [ trigger ]);
     
     return (
-        <WiredConditionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID } hasSpecialInput={ true } save={ save }>
-            <Column gap={ 1 }>
+        <WiredConditionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID } save={ save }>
+            <div className="flex flex-column gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.not_requireall') }</Text>
                 { [ 0, 1 ].map(value =>
                 {
                     return (
-                        <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) } />
+                        <div key={ value } className="flex items-center gap-1">
+                            <input checked={ (requireAll === value) } className="form-check-input" id={ `requireAll${ value }` } name="requireAll" type="radio" onChange={ event => setRequireAll(value) } />
                             <Text>{ LocalizeText(`wiredfurni.params.not_requireall.${ value }`) }</Text>
-                        </Flex>
+                        </div>
                     )
                 }) }
-            </Column>
+            </div>
         </WiredConditionBaseView>
     );
 }
diff --git a/src/components/wired/views/conditions/WiredConditionFurniIsOfTypeView.tsx b/src/components/wired/views/conditions/WiredConditionFurniIsOfTypeView.tsx
index 2b0ddf4d..1fb2c145 100644
--- a/src/components/wired/views/conditions/WiredConditionFurniIsOfTypeView.tsx
+++ b/src/components/wired/views/conditions/WiredConditionFurniIsOfTypeView.tsx
@@ -4,5 +4,5 @@ import { WiredConditionBaseView } from './WiredConditionBaseView';
 
 export const WiredConditionFurniIsOfTypeView: FC<{}> = props =>
 {
-    return <WiredConditionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_OR_BY_TYPE } hasSpecialInput={ false } save={ null } />;
+    return <WiredConditionBaseView hasSpecialInput={ false } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_OR_BY_TYPE } save={ null } />;
 }
diff --git a/src/components/wired/views/conditions/WiredConditionFurniMatchesSnapshotView.tsx b/src/components/wired/views/conditions/WiredConditionFurniMatchesSnapshotView.tsx
index 47a555e5..2f50c44a 100644
--- a/src/components/wired/views/conditions/WiredConditionFurniMatchesSnapshotView.tsx
+++ b/src/components/wired/views/conditions/WiredConditionFurniMatchesSnapshotView.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from 'react';
 import { LocalizeText, WiredFurniType } from '../../../../api';
-import { Column, Flex, Text } from '../../../../common';
+import { Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredConditionBaseView } from './WiredConditionBaseView';
 
@@ -21,22 +21,22 @@ export const WiredConditionFurniMatchesSnapshotView: FC<{}> = props =>
     }, [ trigger ]);
     
     return (
-        <WiredConditionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID } hasSpecialInput={ true } save={ save }>
-            <Column gap={ 1 }>
+        <WiredConditionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID } save={ save }>
+            <div className="flex flex-column gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.conditions') }</Text>
-                <Flex alignItems="center" gap={ 1 }>
-                    <input className="form-check-input" type="checkbox" id="stateFlag" checked={ !!stateFlag } onChange={ event => setStateFlag(event.target.checked ? 1 : 0) } />
+                <div className="flex items-center gap-1">
+                    <input checked={ !!stateFlag } className="form-check-input" id="stateFlag" type="checkbox" onChange={ event => setStateFlag(event.target.checked ? 1 : 0) } />
                     <Text>{ LocalizeText('wiredfurni.params.condition.state') }</Text>
-                </Flex>
-                <Flex alignItems="center" gap={ 1 }>
-                    <input className="form-check-input" type="checkbox" id="directionFlag" checked={ !!directionFlag } onChange={ event => setDirectionFlag(event.target.checked ? 1 : 0) } />
+                </div>
+                <div className="flex items-center gap-1">
+                    <input checked={ !!directionFlag } className="form-check-input" id="directionFlag" type="checkbox" onChange={ event => setDirectionFlag(event.target.checked ? 1 : 0) } />
                     <Text>{ LocalizeText('wiredfurni.params.condition.direction') }</Text>
-                </Flex>
-                <Flex alignItems="center" gap={ 1 }>
-                    <input className="form-check-input" type="checkbox" id="positionFlag" checked={ !!positionFlag } onChange={ event => setPositionFlag(event.target.checked ? 1 : 0) } />
+                </div>
+                <div className="flex items-center gap-1">
+                    <input checked={ !!positionFlag } className="form-check-input" id="positionFlag" type="checkbox" onChange={ event => setPositionFlag(event.target.checked ? 1 : 0) } />
                     <Text>{ LocalizeText('wiredfurni.params.condition.position') }</Text>
-                </Flex>
-            </Column>
+                </div>
+            </div>
         </WiredConditionBaseView>
     );
 }
diff --git a/src/components/wired/views/conditions/WiredConditionTimeElapsedLessView.tsx b/src/components/wired/views/conditions/WiredConditionTimeElapsedLessView.tsx
index 31d6d79c..9aa1019f 100644
--- a/src/components/wired/views/conditions/WiredConditionTimeElapsedLessView.tsx
+++ b/src/components/wired/views/conditions/WiredConditionTimeElapsedLessView.tsx
@@ -1,7 +1,7 @@
 import { FC, useEffect, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { GetWiredTimeLocale, LocalizeText, WiredFurniType } from '../../../../api';
-import { Column, Text } from '../../../../common';
+import { Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredConditionBaseView } from './WiredConditionBaseView';
 
@@ -18,16 +18,16 @@ export const WiredConditionTimeElapsedLessView: FC<{}> = props =>
     }, [ trigger ]);
     
     return (
-        <WiredConditionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ true } save={ save }>
-            <Column gap={ 1 }>
+        <WiredConditionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
+            <div className="flex flex-column gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.allowbefore', [ 'seconds' ], [ GetWiredTimeLocale(time) ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
-                    min={ 1 }
                     max={ 1200 }
+                    min={ 1 }
                     value={ time }
                     onChange={ event => setTime(event) } />
-            </Column>
+            </div>
         </WiredConditionBaseView>
     );
 }
diff --git a/src/components/wired/views/conditions/WiredConditionTimeElapsedMoreView.tsx b/src/components/wired/views/conditions/WiredConditionTimeElapsedMoreView.tsx
index cb158e68..13108e5e 100644
--- a/src/components/wired/views/conditions/WiredConditionTimeElapsedMoreView.tsx
+++ b/src/components/wired/views/conditions/WiredConditionTimeElapsedMoreView.tsx
@@ -1,7 +1,7 @@
 import { FC, useEffect, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { GetWiredTimeLocale, LocalizeText, WiredFurniType } from '../../../../api';
-import { Column, Text } from '../../../../common';
+import { Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredConditionBaseView } from './WiredConditionBaseView';
 
@@ -18,16 +18,16 @@ export const WiredConditionTimeElapsedMoreView: FC<{}> = props =>
     }, [ trigger ]);
     
     return (
-        <WiredConditionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ true } save={ save }>
-            <Column gap={ 1 }>
+        <WiredConditionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
+            <div className="flex flex-column gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.allowafter', [ 'seconds' ], [ GetWiredTimeLocale(time) ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
-                    min={ 1 }
                     max={ 1200 }
+                    min={ 1 }
                     value={ time }
                     onChange={ event => setTime(event) } />
-            </Column>
+            </div>
         </WiredConditionBaseView>
     );
 }
diff --git a/src/components/wired/views/conditions/WiredConditionUserCountInRoomView.tsx b/src/components/wired/views/conditions/WiredConditionUserCountInRoomView.tsx
index 8ef5914b..15afe61a 100644
--- a/src/components/wired/views/conditions/WiredConditionUserCountInRoomView.tsx
+++ b/src/components/wired/views/conditions/WiredConditionUserCountInRoomView.tsx
@@ -1,7 +1,7 @@
 import { FC, useEffect, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { LocalizeText, WiredFurniType } from '../../../../api';
-import { Column, Text } from '../../../../common';
+import { Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredConditionBaseView } from './WiredConditionBaseView';
 
@@ -28,25 +28,25 @@ export const WiredConditionUserCountInRoomView: FC<{}> = props =>
     }, [ trigger ]);
     
     return (
-        <WiredConditionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ true } save={ save }>
-            <Column gap={ 1 }>
+        <WiredConditionBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
+            <div className="flex flex-column gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.usercountmin', [ 'value' ], [ min.toString() ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
-                    min={ 1 }
                     max={ 50 }
+                    min={ 1 }
                     value={ min }
                     onChange={ event => setMin(event) } />
-            </Column>
-            <Column gap={ 1 }>
+            </div>
+            <div className="flex flex-column gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.usercountmax', [ 'value' ], [ max.toString() ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
-                    min={ 0 }
                     max={ 125 }
+                    min={ 0 }
                     value={ max }
                     onChange={ event => setMax(event) } />
-            </Column>
+            </div>
         </WiredConditionBaseView>
     );
 }
diff --git a/src/components/wired/views/triggers/WiredTriggerAvatarEnterRoomView.tsx b/src/components/wired/views/triggers/WiredTriggerAvatarEnterRoomView.tsx
index b14eafb6..50aa6c73 100644
--- a/src/components/wired/views/triggers/WiredTriggerAvatarEnterRoomView.tsx
+++ b/src/components/wired/views/triggers/WiredTriggerAvatarEnterRoomView.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from 'react';
 import { LocalizeText, WiredFurniType } from '../../../../api';
-import { Column, Flex, Text } from '../../../../common';
+import { Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredTriggerBaseView } from './WiredTriggerBaseView';
 
@@ -19,20 +19,20 @@ export const WiredTriggerAvatarEnterRoomView: FC<{}> = props =>
     }, [ trigger ]);
 
     return (
-        <WiredTriggerBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ true } save={ save }>
-            <Column gap={ 1 }>
+        <WiredTriggerBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
+            <div className="flex flex-column gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.picktriggerer') }</Text>
-                <Flex alignItems="center" gap={ 1 }>
-                    <input className="form-check-input" type="radio" name="avatarMode" id="avatarMode0" checked={ (avatarMode === 0) } onChange={ event => setAvatarMode(0) } />
+                <div className="flex items-center gap-1">
+                    <input checked={ (avatarMode === 0) } className="form-check-input" id="avatarMode0" name="avatarMode" type="radio" onChange={ event => setAvatarMode(0) } />
                     <Text>{ LocalizeText('wiredfurni.params.anyavatar') }</Text>
-                </Flex>
-                <Flex alignItems="center" gap={ 1 }>
-                    <input className="form-check-input" type="radio" name="avatarMode" id="avatarMode1" checked={ (avatarMode === 1) } onChange={ event => setAvatarMode(1) } />
+                </div>
+                <div className="flex items-center gap-1">
+                    <input checked={ (avatarMode === 1) } className="form-check-input" id="avatarMode1" name="avatarMode" type="radio" onChange={ event => setAvatarMode(1) } />
                     <Text>{ LocalizeText('wiredfurni.params.certainavatar') }</Text>
-                </Flex>
+                </div>
                 { (avatarMode === 1) &&
-                    <input type="text" className="form-control form-control-sm" value={ username } onChange={ event => setUsername(event.target.value) } /> }
-            </Column>
+                    <input className="form-control form-control-sm" type="text" value={ username } onChange={ event => setUsername(event.target.value) } /> }
+            </div>
         </WiredTriggerBaseView>
     );
 }
diff --git a/src/components/wired/views/triggers/WiredTriggerAvatarSaysSomethingView.tsx b/src/components/wired/views/triggers/WiredTriggerAvatarSaysSomethingView.tsx
index 4aaf8fe9..f74da788 100644
--- a/src/components/wired/views/triggers/WiredTriggerAvatarSaysSomethingView.tsx
+++ b/src/components/wired/views/triggers/WiredTriggerAvatarSaysSomethingView.tsx
@@ -1,7 +1,7 @@
 import { GetSessionDataManager } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { LocalizeText, WiredFurniType } from '../../../../api';
-import { Column, Flex, Text } from '../../../../common';
+import { Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredTriggerBaseView } from './WiredTriggerBaseView';
 
@@ -24,22 +24,22 @@ export const WiredTriggerAvatarSaysSomethingView: FC<{}> = props =>
     }, [ trigger ]);
     
     return (
-        <WiredTriggerBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ true } save={ save }>
-            <Column gap={ 1 }>
+        <WiredTriggerBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
+            <div className="flex flex-column gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.whatissaid') }</Text>
-                <input type="text" className="form-control form-control-sm" value={ message } onChange={ event => setMessage(event.target.value) } />
-            </Column>
-            <Column gap={ 1 }>
+                <input className="form-control form-control-sm" type="text" value={ message } onChange={ event => setMessage(event.target.value) } />
+            </div>
+            <div className="flex flex-column gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.picktriggerer') }</Text>
-                <Flex alignItems="center" gap={ 1 }>
-                    <input className="form-check-input" type="radio" name="triggererAvatar" id="triggererAvatar0" checked={ (triggererAvatar === 0) } onChange={ event => setTriggererAvatar(0) } />
+                <div className="flex items-center gap-1">
+                    <input checked={ (triggererAvatar === 0) } className="form-check-input" id="triggererAvatar0" name="triggererAvatar" type="radio" onChange={ event => setTriggererAvatar(0) } />
                     <Text>{ LocalizeText('wiredfurni.params.anyavatar') }</Text>
-                </Flex>
-                <Flex alignItems="center" gap={ 1 }>
-                    <input className="form-check-input" type="radio" name="triggererAvatar" id="triggererAvatar1" checked={ (triggererAvatar === 1) } onChange={ event => setTriggererAvatar(1) } />
+                </div>
+                <div className="flex items-center gap-1">
+                    <input checked={ (triggererAvatar === 1) } className="form-check-input" id="triggererAvatar1" name="triggererAvatar" type="radio" onChange={ event => setTriggererAvatar(1) } />
                     <Text>{ GetSessionDataManager().userName }</Text>
-                </Flex>
-            </Column>
+                </div>
+            </div>
         </WiredTriggerBaseView>
     );
 }
diff --git a/src/components/wired/views/triggers/WiredTriggerAvatarWalksOffFurniView.tsx b/src/components/wired/views/triggers/WiredTriggerAvatarWalksOffFurniView.tsx
index 0b98a566..d4f3ffda 100644
--- a/src/components/wired/views/triggers/WiredTriggerAvatarWalksOffFurniView.tsx
+++ b/src/components/wired/views/triggers/WiredTriggerAvatarWalksOffFurniView.tsx
@@ -4,5 +4,5 @@ import { WiredTriggerBaseView } from './WiredTriggerBaseView';
 
 export const WiredTriggerAvatarWalksOffFurniView: FC<{}> = props =>
 {
-    return <WiredTriggerBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_OR_BY_TYPE } hasSpecialInput={ false } save={ null } />;
+    return <WiredTriggerBaseView hasSpecialInput={ false } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_OR_BY_TYPE } save={ null } />;
 }
diff --git a/src/components/wired/views/triggers/WiredTriggerAvatarWalksOnFurni.tsx b/src/components/wired/views/triggers/WiredTriggerAvatarWalksOnFurni.tsx
index 25572e7c..59895a31 100644
--- a/src/components/wired/views/triggers/WiredTriggerAvatarWalksOnFurni.tsx
+++ b/src/components/wired/views/triggers/WiredTriggerAvatarWalksOnFurni.tsx
@@ -4,5 +4,5 @@ import { WiredTriggerBaseView } from './WiredTriggerBaseView';
 
 export const WiredTriggerAvatarWalksOnFurniView: FC<{}> = props =>
 {
-    return <WiredTriggerBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_OR_BY_TYPE } hasSpecialInput={ false } save={ null } />;
+    return <WiredTriggerBaseView hasSpecialInput={ false } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_OR_BY_TYPE } save={ null } />;
 }
diff --git a/src/components/wired/views/triggers/WiredTriggerBaseView.tsx b/src/components/wired/views/triggers/WiredTriggerBaseView.tsx
index f8f15759..2cdfd70b 100644
--- a/src/components/wired/views/triggers/WiredTriggerBaseView.tsx
+++ b/src/components/wired/views/triggers/WiredTriggerBaseView.tsx
@@ -16,7 +16,7 @@ export const WiredTriggerBaseView: FC<PropsWithChildren<WiredTriggerBaseViewProp
     const onSave = () => (save && save());
 
     return (
-        <WiredBaseView wiredType="trigger" requiresFurni={ requiresFurni } hasSpecialInput={ hasSpecialInput } save={ onSave }>
+        <WiredBaseView hasSpecialInput={ hasSpecialInput } requiresFurni={ requiresFurni } save={ onSave } wiredType="trigger">
             { children }
         </WiredBaseView>
     );
diff --git a/src/components/wired/views/triggers/WiredTriggerBotReachedAvatarView.tsx b/src/components/wired/views/triggers/WiredTriggerBotReachedAvatarView.tsx
index 6984dc6d..13a3dbd2 100644
--- a/src/components/wired/views/triggers/WiredTriggerBotReachedAvatarView.tsx
+++ b/src/components/wired/views/triggers/WiredTriggerBotReachedAvatarView.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from 'react';
 import { LocalizeText, WiredFurniType } from '../../../../api';
-import { Column, Text } from '../../../../common';
+import { Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredTriggerBaseView } from './WiredTriggerBaseView';
 
@@ -17,11 +17,11 @@ export const WiredTriggerBotReachedAvatarView: FC<{}> = props =>
     }, [ trigger ]);
     
     return (
-        <WiredTriggerBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ true } save={ save }>
-            <Column gap={ 1 }>
+        <WiredTriggerBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
+            <div className="flex flex-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) } />
-            </Column>
+                <input className="form-control form-control-sm" maxLength={ 32 } type="text" value={ botName } onChange={ event => setBotName(event.target.value) } />
+            </div>
         </WiredTriggerBaseView>
     );
 }
diff --git a/src/components/wired/views/triggers/WiredTriggerBotReachedStuffView.tsx b/src/components/wired/views/triggers/WiredTriggerBotReachedStuffView.tsx
index 9cde1737..d4a76597 100644
--- a/src/components/wired/views/triggers/WiredTriggerBotReachedStuffView.tsx
+++ b/src/components/wired/views/triggers/WiredTriggerBotReachedStuffView.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from 'react';
 import { LocalizeText, WiredFurniType } from '../../../../api';
-import { Column, Text } from '../../../../common';
+import { Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredTriggerBaseView } from './WiredTriggerBaseView';
 
@@ -17,11 +17,11 @@ export const WiredTriggerBotReachedStuffView: FC<{}> = props =>
     }, [ trigger ]);
     
     return (
-        <WiredTriggerBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_OR_BY_TYPE } hasSpecialInput={ true } save={ save }>
-            <Column gap={ 1 }>
+        <WiredTriggerBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_OR_BY_TYPE } save={ save }>
+            <div className="flex flex-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) } />
-            </Column>
+                <input className="form-control form-control-sm" maxLength={ 32 } type="text" value={ botName } onChange={ event => setBotName(event.target.value) } />
+            </div>
         </WiredTriggerBaseView>
     );
 }
diff --git a/src/components/wired/views/triggers/WiredTriggerCollisionView.tsx b/src/components/wired/views/triggers/WiredTriggerCollisionView.tsx
index be23a6b1..96c122d1 100644
--- a/src/components/wired/views/triggers/WiredTriggerCollisionView.tsx
+++ b/src/components/wired/views/triggers/WiredTriggerCollisionView.tsx
@@ -4,5 +4,5 @@ import { WiredTriggerBaseView } from './WiredTriggerBaseView';
 
 export const WiredTriggerCollisionView: FC<{}> = props =>
 {
-    return <WiredTriggerBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ false } save={ null } />;
+    return <WiredTriggerBaseView hasSpecialInput={ false } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ null } />;
 }
diff --git a/src/components/wired/views/triggers/WiredTriggerExecuteOnceView.tsx b/src/components/wired/views/triggers/WiredTriggerExecuteOnceView.tsx
index ea3d61bf..00511c01 100644
--- a/src/components/wired/views/triggers/WiredTriggerExecuteOnceView.tsx
+++ b/src/components/wired/views/triggers/WiredTriggerExecuteOnceView.tsx
@@ -1,7 +1,7 @@
 import { FC, useEffect, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { GetWiredTimeLocale, LocalizeText, WiredFurniType } from '../../../../api';
-import { Column, Text } from '../../../../common';
+import { Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredTriggerBaseView } from './WiredTriggerBaseView';
 
@@ -18,16 +18,16 @@ export const WiredTriggeExecuteOnceView: FC<{}> = props =>
     }, [ trigger ]);
 
     return (
-        <WiredTriggerBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ true } save={ save }>
-            <Column gap={ 1 }>
+        <WiredTriggerBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
+            <div className="flex flex-column gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.settime', [ 'seconds' ], [ GetWiredTimeLocale(time) ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
-                    min={ 1 }
                     max={ 1200 }
+                    min={ 1 }
                     value={ time }
                     onChange={ event => setTime(event) } />
-            </Column>
+            </div>
         </WiredTriggerBaseView>
     );
 }
diff --git a/src/components/wired/views/triggers/WiredTriggerExecutePeriodicallyLongView.tsx b/src/components/wired/views/triggers/WiredTriggerExecutePeriodicallyLongView.tsx
index 5a698dde..d101324a 100644
--- a/src/components/wired/views/triggers/WiredTriggerExecutePeriodicallyLongView.tsx
+++ b/src/components/wired/views/triggers/WiredTriggerExecutePeriodicallyLongView.tsx
@@ -1,7 +1,7 @@
 import { FC, useEffect, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { FriendlyTime, LocalizeText, WiredFurniType } from '../../../../api';
-import { Column, Text } from '../../../../common';
+import { Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredTriggerBaseView } from './WiredTriggerBaseView';
 
@@ -18,16 +18,16 @@ export const WiredTriggeExecutePeriodicallyLongView: FC<{}> = props =>
     }, [ trigger ]);
 
     return (
-        <WiredTriggerBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ true } save={ save }>
-            <Column gap={ 1 }>
+        <WiredTriggerBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
+            <div className="flex flex-column gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.setlongtime', [ 'time' ], [ FriendlyTime.format(time * 5).toString() ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
-                    min={ 1 }
                     max={ 120 }
+                    min={ 1 }
                     value={ time }
                     onChange={ event => setTime(event) } />
-            </Column>
+            </div>
         </WiredTriggerBaseView>
     );
 }
diff --git a/src/components/wired/views/triggers/WiredTriggerExecutePeriodicallyView.tsx b/src/components/wired/views/triggers/WiredTriggerExecutePeriodicallyView.tsx
index b77e642f..44e5d6be 100644
--- a/src/components/wired/views/triggers/WiredTriggerExecutePeriodicallyView.tsx
+++ b/src/components/wired/views/triggers/WiredTriggerExecutePeriodicallyView.tsx
@@ -1,7 +1,7 @@
 import { FC, useEffect, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { GetWiredTimeLocale, LocalizeText, WiredFurniType } from '../../../../api';
-import { Column, Text } from '../../../../common';
+import { Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredTriggerBaseView } from './WiredTriggerBaseView';
 
@@ -18,16 +18,16 @@ export const WiredTriggeExecutePeriodicallyView: FC<{}> = props =>
     }, [ trigger ]);
 
     return (
-        <WiredTriggerBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ true } save={ save }>
-            <Column gap={ 1 }>
+        <WiredTriggerBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
+            <div className="flex flex-column gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.settime', [ 'seconds' ], [ GetWiredTimeLocale(time) ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
-                    min={ 1 }
                     max={ 60 }
+                    min={ 1 }
                     value={ time }
                     onChange={ event => setTime(event) } />
-            </Column>
+            </div>
         </WiredTriggerBaseView>
     );
 }
diff --git a/src/components/wired/views/triggers/WiredTriggerGameEndsView.tsx b/src/components/wired/views/triggers/WiredTriggerGameEndsView.tsx
index c6f1c67f..92c90ef0 100644
--- a/src/components/wired/views/triggers/WiredTriggerGameEndsView.tsx
+++ b/src/components/wired/views/triggers/WiredTriggerGameEndsView.tsx
@@ -4,5 +4,5 @@ import { WiredTriggerBaseView } from './WiredTriggerBaseView';
 
 export const WiredTriggerGameEndsView: FC<{}> = props =>
 {
-    return <WiredTriggerBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ false } save={ null } />;
+    return <WiredTriggerBaseView hasSpecialInput={ false } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ null } />;
 }
diff --git a/src/components/wired/views/triggers/WiredTriggerGameStartsView.tsx b/src/components/wired/views/triggers/WiredTriggerGameStartsView.tsx
index 6e43a2ce..da0e26bd 100644
--- a/src/components/wired/views/triggers/WiredTriggerGameStartsView.tsx
+++ b/src/components/wired/views/triggers/WiredTriggerGameStartsView.tsx
@@ -4,5 +4,5 @@ import { WiredTriggerBaseView } from './WiredTriggerBaseView';
 
 export const WiredTriggerGameStartsView: FC<{}> = props =>
 {
-    return <WiredTriggerBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ false } save={ null } />;
+    return <WiredTriggerBaseView hasSpecialInput={ false } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ null } />;
 }
diff --git a/src/components/wired/views/triggers/WiredTriggerScoreAchievedView.tsx b/src/components/wired/views/triggers/WiredTriggerScoreAchievedView.tsx
index 883503b8..e03fac3d 100644
--- a/src/components/wired/views/triggers/WiredTriggerScoreAchievedView.tsx
+++ b/src/components/wired/views/triggers/WiredTriggerScoreAchievedView.tsx
@@ -1,7 +1,7 @@
 import { FC, useEffect, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { LocalizeText, WiredFurniType } from '../../../../api';
-import { Column, Text } from '../../../../common';
+import { Text } from '../../../../common';
 import { useWired } from '../../../../hooks';
 import { WiredTriggerBaseView } from './WiredTriggerBaseView';
 
@@ -18,16 +18,16 @@ export const WiredTriggeScoreAchievedView: FC<{}> = props =>
     }, [ trigger ]);
 
     return (
-        <WiredTriggerBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } hasSpecialInput={ true } save={ save }>
-            <Column gap={ 1 }>
+        <WiredTriggerBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
+            <div className="flex flex-column gap-1">
                 <Text bold>{ LocalizeText('wiredfurni.params.setscore', [ 'points' ], [ points.toString() ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
-                    min={ 1 }
                     max={ 1000 }
+                    min={ 1 }
                     value={ points }
                     onChange={ event => setPoints(event) } />
-            </Column>
+            </div>
         </WiredTriggerBaseView>
     );
 }
diff --git a/src/components/wired/views/triggers/WiredTriggerToggleFurniView.tsx b/src/components/wired/views/triggers/WiredTriggerToggleFurniView.tsx
index 865006b9..5ecc0c95 100644
--- a/src/components/wired/views/triggers/WiredTriggerToggleFurniView.tsx
+++ b/src/components/wired/views/triggers/WiredTriggerToggleFurniView.tsx
@@ -4,5 +4,5 @@ import { WiredTriggerBaseView } from './WiredTriggerBaseView';
 
 export const WiredTriggerToggleFurniView: FC<{}> = props =>
 {
-    return <WiredTriggerBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_OR_BY_TYPE } hasSpecialInput={ false } save={ null } />;
+    return <WiredTriggerBaseView hasSpecialInput={ false } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_OR_BY_TYPE } save={ null } />;
 }
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 00000000..28d0d3eb
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,681 @@
+@font-face {
+    font-family: Ubuntu;
+    src: url("@/assets/webfonts/Ubuntu-C.ttf");
+}
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html,
+body {
+    @apply select-none overflow-hidden;
+}
+
+*,
+*:focus,
+*:hover {
+    @apply outline-0;
+}
+
+::-webkit-scrollbar {
+    width: 0.25rem;
+}
+
+::-webkit-scrollbar:horizontal {
+    height: 0.25rem;
+}
+
+::-webkit-scrollbar:not(:horizontal) {
+    width: 0.25rem;
+}
+
+::-webkit-scrollbar-track:horizontal {
+    border-bottom: 0.25rem solid rgba(0, 0, 0, 0.1);
+}
+
+::-webkit-scrollbar-track:not(:horizontal) {
+    border-right: 0.25rem solid rgba(0, 0, 0, 0.1);
+}
+
+::-webkit-scrollbar-thumb:horizontal {
+    border-bottom: 0.25rem solid rgba(30, 114, 149, 0.4);
+}
+
+::-webkit-scrollbar-thumb:horizontal:hover {
+    border-bottom: 0.25rem solid rgba(30, 114, 149, 0.8);
+}
+
+::-webkit-scrollbar-thumb:horizontal:active {
+    border-bottom: 0.25rem solid #185d79;
+}
+
+::-webkit-scrollbar-thumb:not(:horizontal) {
+    border-right: 0.25rem solid rgba(30, 114, 149, 0.4);
+}
+
+::-webkit-scrollbar-thumb:not(:horizontal):hover {
+    border-right: 0.25rem solid rgba(30, 114, 149, 0.8);
+}
+
+::-webkit-scrollbar-thumb:not(:horizontal):active {
+    border-right: 0.25rem solid #185d79;
+}
+
+::-webkit-scrollbar-corner {
+    background: rgba(0, 0, 0, 0.1);
+}
+
+@layer components {
+    .avatar-image {
+        @apply pointer-events-none relative h-[130px] w-[90px] bg-[center_-8px] bg-no-repeat;
+    }
+
+    .nitro-icon {
+        @apply inline-block bg-transparent bg-center bg-no-repeat outline-0;
+
+        &.icon-nitro-light {
+            background-image: url("@/assets/images/nitro/nitro-n-light.svg");
+        }
+
+        &.icon-nitro-dark {
+            background-image: url("@/assets/images/nitro/nitro-n-dark.svg");
+        }
+
+        &.icon-nitro-light,
+        &.icon-nitro-dark {
+            width: 100%;
+            height: 40px;
+        }
+
+        &.icon-catalog {
+            background-image: url("@/assets/images/toolbar/icons/catalog.png");
+            width: 37px;
+            height: 36px;
+        }
+
+        &.icon-game {
+            background-image: url("@/assets/images/toolbar/icons/game.png");
+            width: 44px;
+            height: 25px;
+        }
+
+        &.icon-rooms {
+            background-image: url("@/assets/images/toolbar/icons/rooms.png");
+            width: 44px;
+            height: 30px;
+        }
+
+        &.icon-house {
+            background-image: url("@/assets/images/toolbar/icons/house.png");
+            height: 30px;
+            width: 32px;
+        }
+
+        &.gray {
+            opacity: 0.5;
+        }
+
+        &.icon-inventory {
+            background-image: url("@/assets/images/toolbar/icons/inventory.png");
+            height: 41px;
+            width: 44px;
+        }
+
+        &.icon-modtools {
+            background-image: url("@/assets/images/toolbar/icons/modtools.png");
+            height: 34px;
+            width: 29px;
+        }
+
+        &.icon-friendall {
+            background-image: url("@/assets/images/toolbar/icons/friend_all.png");
+            height: 33px;
+            width: 32px;
+        }
+
+        &.icon-friendsearch {
+            background-image: url("@/assets/images/toolbar/icons/friend_search.png");
+            height: 33px;
+            width: 29px;
+        }
+
+        &.icon-sendmessage {
+            background-image: url("@/assets/images/toolbar/icons/sendmessage.png");
+            width: 20px;
+            height: 21px;
+        }
+
+        &.icon-me-talents {
+            background-image: url("@/assets/images/toolbar/icons/me-menu/talents.png");
+            width: 32px;
+            height: 30px;
+        }
+
+        &.icon-me-helper-tool {
+            background-image: url("@/assets/images/toolbar/icons/me-menu/helper-tool.png");
+            width: 32px;
+            height: 30px;
+        }
+
+        &.icon-me-profile {
+            background-image: url("@/assets/images/toolbar/icons/me-menu/profile.png");
+            width: 32px;
+            height: 30px;
+        }
+
+        &.icon-me-forums {
+            background-image: url("@/assets/images/toolbar/icons/me-menu/forums.png");
+            width: 32px;
+            height: 30px;
+        }
+
+        &.icon-me-rooms {
+            background-image: url("@/assets/images/toolbar/icons/me-menu/my-rooms.png");
+            width: 30px;
+            height: 30px;
+        }
+
+        &.icon-me-achievements {
+            background-image: url("@/assets/images/toolbar/icons/me-menu/achievements.png");
+            width: 31px;
+            height: 30px;
+        }
+
+        &.icon-me-clothing {
+            background-image: url("@/assets/images/toolbar/icons/me-menu/clothing.png");
+            width: 27px;
+            height: 30px;
+        }
+
+        &.icon-me-settings {
+            background-image: url("@/assets/images/toolbar/icons/me-menu/cog.png");
+            width: 28px;
+            height: 34px;
+        }
+
+        &.icon-cog {
+            background: url("@/assets/images/icons/icon_cog.png");
+            width: 14px;
+            height: 15px;
+        }
+
+        &.icon-help {
+            background: url("@/assets/images/icons/help.png");
+            width: 13px;
+            height: 23px;
+        }
+
+        &.icon-joinroom {
+            background-image: url("@/assets/images/toolbar/icons/joinroom.png");
+            width: 21px;
+            height: 21px;
+        }
+
+        &.icon-habbo {
+            background-image: url("@/assets/images/toolbar/icons/habbo.png");
+            width: 28px;
+            height: 28px;
+        }
+
+        &.icon-camera {
+            background-image: url("@/assets/images/toolbar/icons/camera.png");
+            width: 38px;
+            height: 45px;
+        }
+
+        &.icon-message {
+            background-image: url("@/assets/images/toolbar/icons/message.png");
+            width: 36px;
+            height: 32px;
+
+            &.is-unseen {
+                background-image: url("@/assets/images/toolbar/icons/message_unsee.gif");
+            }
+        }
+
+        &.icon-wired-trigger {
+            background-image: url("@/assets/images/wired/icon_trigger.png");
+            width: 13px;
+            height: 14px;
+        }
+
+        &.icon-wired-condition {
+            background-image: url("@/assets/images/wired/icon_condition.png");
+            width: 13px;
+            height: 14px;
+        }
+
+        &.icon-wired-action {
+            background-image: url("@/assets/images/wired/icon_action.png");
+            width: 13px;
+            height: 14px;
+        }
+
+        &.chatstyles-icon {
+            background-image: url("@/assets/images/chat/styles-icon.png");
+            width: 17px;
+            height: 19px;
+        }
+
+        &.pencil-icon {
+            background-image: url("@/assets/images/infostand/pencil-icon.png");
+            width: 17px;
+            height: 18px;
+        }
+
+        &.disk-icon {
+            background-image: url("@/assets/images/infostand/disk-icon.png");
+            width: 14px;
+            height: 14px;
+        }
+
+        &.disk-creator {
+            background-image: url("@/assets/images/infostand/disk-creator.png");
+            width: 14px;
+            height: 14px;
+        }
+
+        &.trade-locked-icon {
+            background-image: url("@/assets/images/inventory/trading/locked-icon.png");
+            width: 29px;
+            height: 43px;
+        }
+
+        &.trade-unlocked-icon {
+            background-image: url("@/assets/images/inventory/trading/unlocked-icon.png");
+            width: 29px;
+            height: 43px;
+        }
+
+        &.modtool-room-icon {
+            background-image: url("@/assets/images/modtool/room.png");
+            width: 20px;
+            height: 15px;
+        }
+
+        &.modtool-chatlog-icon {
+            background-image: url("@/assets/images/modtool/chatlog.gif");
+            width: 20px;
+            height: 15px;
+        }
+
+        &.modtool-user-icon {
+            background-image: url("@/assets/images/modtool/user.gif");
+            width: 20px;
+            height: 15px;
+        }
+
+        &.modtool-reports-icon {
+            background-image: url("@/assets/images/modtool/reports.png");
+            width: 20px;
+            height: 15px;
+        }
+
+        &.modtool-wrench-icon {
+            background-image: url("@/assets/images/modtool/wrench.gif");
+            width: 20px;
+            height: 15px;
+        }
+
+        &.modtool-key-icon {
+            background-image: url("@/assets/images/modtool/key.gif");
+            width: 20px;
+            height: 15px;
+        }
+
+        &.icon-catalogue-hc_small {
+            background-image: url("@/assets/images/catalog/hc_small.png");
+            height: 17px;
+            width: 31px;
+        }
+
+        &.icon-catalogue-hc_big {
+            background: url("@/assets/images/catalog/hc_big.png");
+            width: 68px;
+            height: 40px;
+        }
+
+        &.icon-sign-exclamation {
+            background: url("@/assets/images/icons/sign-exclamation.png");
+            width: 7px;
+            height: 17px;
+        }
+
+        &.icon-sign-heart {
+            background: url("@/assets/images/icons/sign-heart.png");
+            width: 15px;
+            height: 13px;
+        }
+
+        &.icon-sign-red {
+            background: url("@/assets/images/icons/sign-red.png");
+            width: 11px;
+            height: 19px;
+        }
+
+        &.icon-sign-yellow {
+            background: url("@/assets/images/icons/sign-yellow.png");
+            width: 11px;
+            height: 19px;
+        }
+
+        &.icon-sign-skull {
+            background: url("@/assets/images/icons/sign-skull.png");
+            width: 12px;
+            height: 12px;
+        }
+
+        &.icon-sign-smile {
+            background: url("@/assets/images/icons/sign-smile.png");
+            width: 7px;
+            height: 14px;
+        }
+
+        &.icon-sign-soccer {
+            background: url("@/assets/images/icons/sign-soccer.png");
+            width: 20px;
+            height: 20px;
+        }
+
+        &.icon-house-small {
+            background: url("@/assets/images/icons/house-small.png");
+            width: 19px;
+            height: 14px;
+        }
+
+        &.icon-camera-small {
+            background: url("@/assets/images/icons/camera-small.png");
+            width: 17px;
+            height: 15px;
+        }
+
+        &.icon-small-room {
+            background: url("@/assets/images/icons/small-room.png");
+            width: 17px;
+            height: 16px;
+        }
+
+        &.icon-cog {
+            background: url("@/assets/images/icons/cog.png");
+            width: 21px;
+            height: 21px;
+        }
+
+        &.icon-chat-history {
+            background: url("@/assets/images/icons/chat-history.png");
+            width: 17px;
+            height: 21px;
+        }
+
+        &.icon-room-link {
+            background: url("@/assets/images/icons/room-link.png");
+            width: 17px;
+            height: 15px;
+        }
+
+        &.icon-zoom-more {
+            background: url("@/assets/images/icons/zoom-more.png");
+            width: 12px;
+            height: 22px;
+        }
+
+        &.icon-zoom-less {
+            background: url("@/assets/images/icons/zoom-less.png");
+            width: 12px;
+            height: 22px;
+        }
+
+        &.icon-like-room {
+            background: url("@/assets/images/icons/like-room.png");
+            width: 20px;
+            height: 22px;
+        }
+
+        &.icon-arrows {
+            background: url("@/assets/images/icons/arrows.png");
+            width: 17px;
+            height: 15px;
+        }
+
+        &.icon-camera-colormatrix {
+            background: url("@/assets/images/icons/camera-colormatrix.png");
+            width: 32px;
+            height: 21px;
+        }
+
+        &.icon-camera-composite {
+            background: url("@/assets/images/icons/camera-composite.png");
+            width: 32px;
+            height: 21px;
+        }
+
+        &.icon-pf-online {
+            background: url("@/assets/images/profile/icons/online.gif");
+            width: 40px;
+            height: 16px;
+        }
+
+        &.icon-pf-offline {
+            background: url("@/assets/images/profile/icons/offline.png");
+            width: 39px;
+            height: 16px;
+        }
+
+        &.icon-pf-tick {
+            background: url("@/assets/images/profile/icons/tick.png");
+            width: 11px;
+            height: 10px;
+        }
+
+        &.icon-group-type-0 {
+            background: url("@/assets/images/groups/icons/grouptype_icon_0.png");
+            width: 16px;
+            height: 16px;
+        }
+
+        &.icon-group-type-1 {
+            background: url("@/assets/images/groups/icons/grouptype_icon_1.png");
+            width: 16px;
+            height: 16px;
+        }
+
+        &.icon-group-type-2 {
+            background: url("@/assets/images/groups/icons/grouptype_icon_2.png");
+            width: 16px;
+            height: 16px;
+        }
+
+        &.icon-group-decorate {
+            background: url("@/assets/images/groups/icons/group_decorate_icon.png");
+            width: 15px;
+            height: 15px;
+        }
+
+        &.icon-group-member {
+            background: url("@/assets/images/groups/icons/group_icon_big_member.png");
+            width: 20px;
+            height: 20px;
+        }
+
+        &.icon-group-admin {
+            background: url("@/assets/images/groups/icons/group_icon_big_admin.png");
+            width: 20px;
+            height: 20px;
+        }
+
+        &.icon-group-owner {
+            background: url("@/assets/images/groups/icons/group_icon_big_owner.png");
+            width: 20px;
+            height: 20px;
+        }
+
+        &.icon-group-favorite {
+            background: url("@/assets/images/groups/icons/group_favorite.png");
+            width: 14px;
+            height: 14px;
+        }
+
+        &.icon-group-not-favorite {
+            background: url("@/assets/images/groups/icons/group_notfavorite.png");
+            width: 14px;
+            height: 14px;
+        }
+
+        &.icon-group-small-admin {
+            background: url("@/assets/images/groups/icons/group_icon_admin.png");
+            width: 11px;
+            height: 13px;
+        }
+
+        &.icon-group-small-not-admin {
+            background: url("@/assets/images/groups/icons/group_icon_not_admin.png");
+            width: 11px;
+            height: 13px;
+        }
+
+        &.icon-group-small-owner {
+            background: url("@/assets/images/groups/icons/group_icon_small_owner.png");
+            width: 13px;
+            height: 13px;
+        }
+
+        &.icon-navigator-info {
+            background: url("@/assets/images/navigator/icons/info.png");
+            width: 18px;
+            height: 18px;
+        }
+
+        &.icon-navigator-room-locked {
+            background: url("@/assets/images/navigator/icons/room_locked.png");
+            width: 13px;
+            height: 16px;
+        }
+
+        &.icon-navigator-room-password {
+            background: url("@/assets/images/navigator/icons/room_password.png");
+            width: 13px;
+            height: 16px;
+        }
+
+        &.icon-navigator-room-invisible {
+            background: url("@/assets/images/navigator/icons/room_invisible.png");
+            width: 13px;
+            height: 16px;
+        }
+
+        &.icon-navigator-room-group {
+            background: url("@/assets/images/navigator/icons/room_group.png");
+            width: 13px;
+            height: 11px;
+        }
+
+        &.icon-youtube-next {
+            background: url("@/assets/images/room-widgets/youtube-widget/next.png");
+            width: 21px;
+            height: 16px;
+        }
+
+        &.icon-youtube-prev {
+            background: url("@/assets/images/room-widgets/youtube-widget/prev.png");
+            width: 21px;
+            height: 16px;
+        }
+
+        &.icon-hc-banner {
+            background: url("@/assets/images/catalog/hc_big.png");
+            width: 68px;
+            height: 40px;
+        }
+
+        &.icon-set-tile {
+            background-image: url("@/assets/images/floorplaneditor/icon-tile-set.png");
+            width: 40px;
+            height: 40px;
+        }
+
+        &.icon-unset-tile {
+            background-image: url("@/assets/images/floorplaneditor/icon-tile-unset.png");
+            width: 40px;
+            height: 40px;
+        }
+
+        &.icon-increase-height {
+            background-image: url("@/assets/images/floorplaneditor/icon-tile-up.png");
+            width: 40px;
+            height: 40px;
+        }
+
+        &.icon-decrease-height {
+            background-image: url("@/assets/images/floorplaneditor/icon-tile-down.png");
+            width: 40px;
+            height: 40px;
+        }
+
+        &.icon-set-door {
+            background-image: url("@/assets/images/floorplaneditor/icon-door.png");
+            width: 40px;
+            height: 40px;
+        }
+
+        &.icon-door-direction-0 {
+            background-image: url("@/assets/images/floorplaneditor/door-direction-0.png");
+            width: 80px;
+            height: 45px;
+        }
+
+        &.icon-door-direction-1 {
+            background-image: url("@/assets/images/floorplaneditor/door-direction-1.png");
+            width: 80px;
+            height: 45px;
+        }
+
+        &.icon-door-direction-2 {
+            background-image: url("@/assets/images/floorplaneditor/door-direction-2.png");
+            width: 80px;
+            height: 45px;
+        }
+
+        &.icon-door-direction-3 {
+            background-image: url("@/assets/images/floorplaneditor/door-direction-3.png");
+            width: 80px;
+            height: 45px;
+        }
+
+        &.icon-door-direction-4 {
+            background-image: url("@/assets/images/floorplaneditor/door-direction-4.png");
+            width: 80px;
+            height: 45px;
+        }
+
+        &.icon-door-direction-5 {
+            background-image: url("@/assets/images/floorplaneditor/door-direction-5.png");
+            width: 80px;
+            height: 45px;
+        }
+
+        &.icon-door-direction-6 {
+            background-image: url("@/assets/images/floorplaneditor/door-direction-6.png");
+            width: 80px;
+            height: 45px;
+        }
+
+        &.icon-door-direction-7 {
+            background-image: url("@/assets/images/floorplaneditor/door-direction-7.png");
+            width: 80px;
+            height: 45px;
+        }
+
+        &.icon-tickets {
+            background-image: url("@/assets/images/icons/tickets.png");
+            width: 17px;
+            height: 17px;
+        }
+
+        &.icon-user {
+            background-image: url("@/assets/images/icons/user.png");
+            width: 18px;
+            height: 19px;
+        }
+    }
+}
diff --git a/src/index.tsx b/src/index.tsx
index 196309d3..c4409c9e 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,5 +1,5 @@
 import { createRoot } from 'react-dom/client';
 import { App } from './App';
-import './index.scss';
+import './index.css';
 
 createRoot(document.getElementById('root')).render(<App />);
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 00000000..76e922d6
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,35 @@
+/** @type {import('tailwindcss').Config} */
+
+const colors = {
+    'toolbar': 'rgba(28, 28, 32, .95)'
+};
+
+const boxShadow = {
+};
+
+module.exports = {
+    theme: {
+        extend: {
+            fontFamily: {
+                sans: [ 'Ubuntu', 'sans-serif' ],
+            },
+            colors,
+            boxShadow,
+            height: {
+                'toolbar': '55px'
+            },
+            zIndex: {
+                'toolbar': ''
+            }
+        },
+    },
+    darkMode: 'class',
+    plugins: [
+        require('@tailwindcss/forms'),
+        require('@headlessui/tailwindcss')({ prefix: 'ui' })
+    ],
+    content: [
+        './index.html',
+        './src/**/*.{html,js,jsx,ts,tsx}'
+    ]
+}
diff --git a/yarn.lock b/yarn.lock
index c54b602d..11bd4faa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7,6 +7,11 @@
   resolved "https://registry.yarnpkg.com/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz#bd9154aec9983f77b3a034ecaa015c2e4201f6cf"
   integrity sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==
 
+"@alloc/quick-lru@^5.2.0":
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
+  integrity sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==
+
 "@ampproject/remapping@^2.2.0":
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.3.0.tgz#ed441b6fa600072520ce18b43d2c8cc8caecc7f4"
@@ -368,6 +373,19 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.57.0.tgz#a5417ae8427873f1dd08b70b3574b453e67b5f7f"
   integrity sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==
 
+"@headlessui/react@^1.7.18":
+  version "1.7.18"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.18.tgz#30af4634d2215b2ca1aa29d07f33d02bea82d9d7"
+  integrity sha512-4i5DOrzwN4qSgNsL4Si61VMkUcWbcSKueUV7sFhpHzQcSShdlHENE5+QBntMSRvHt8NyoFO2AGG8si9lq+w4zQ==
+  dependencies:
+    "@tanstack/react-virtual" "^3.0.0-beta.60"
+    client-only "^0.0.1"
+
+"@headlessui/tailwindcss@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@headlessui/tailwindcss/-/tailwindcss-0.2.0.tgz#2c55c98fd8eee4b4f21ec6eb35a014b840059eec"
+  integrity sha512-fpL830Fln1SykOCboExsWr3JIVeQKieLJ3XytLe/tt1A0XzqUthOftDmjcCYLW62w7mQI7wXcoPXr3tZ9QfGxw==
+
 "@humanwhocodes/config-array@^0.11.14":
   version "0.11.14"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b"
@@ -387,7 +405,19 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz#4a2868d75d6d6963e423bcf90b7fd1be343409d3"
   integrity sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==
 
-"@jridgewell/gen-mapping@^0.3.5":
+"@isaacs/cliui@^8.0.2":
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"
+  integrity sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==
+  dependencies:
+    string-width "^5.1.2"
+    string-width-cjs "npm:string-width@^4.2.0"
+    strip-ansi "^7.0.1"
+    strip-ansi-cjs "npm:strip-ansi@^6.0.1"
+    wrap-ansi "^8.1.0"
+    wrap-ansi-cjs "npm:wrap-ansi@^7.0.0"
+
+"@jridgewell/gen-mapping@^0.3.2", "@jridgewell/gen-mapping@^0.3.5":
   version "0.3.5"
   resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz#dcce6aff74bdf6dad1a95802b69b04a2fcb1fb36"
   integrity sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==
@@ -440,6 +470,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@pkgjs/parseargs@^0.11.0":
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
+  integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
+
 "@popperjs/core@^2.11.6":
   version "2.11.8"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
@@ -556,6 +591,13 @@
   dependencies:
     tslib "^2.4.0"
 
+"@tailwindcss/forms@^0.5.7":
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/forms/-/forms-0.5.7.tgz#db5421f062a757b5f828bc9286ba626c6685e821"
+  integrity sha512-QE7X69iQI+ZXwldE+rzasvbJiyV/ju1FGHH0Qn2W3FKbuYtqp8LKcy6iSw79fVUT5/Vvf+0XgLCeYVG+UV6hOw==
+  dependencies:
+    mini-svg-data-uri "^1.2.3"
+
 "@tanstack/react-virtual@3.2.0":
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/@tanstack/react-virtual/-/react-virtual-3.2.0.tgz#fb70f9c6baee753a5a0f7618ac886205d5a02af9"
@@ -563,11 +605,23 @@
   dependencies:
     "@tanstack/virtual-core" "3.2.0"
 
+"@tanstack/react-virtual@^3.0.0-beta.60":
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-virtual/-/react-virtual-3.2.1.tgz#58ac9af23ff08b5f05a6dfe6a59deac2f9451508"
+  integrity sha512-i9Nt0ssIh2bSjomJZlr6Iq5usT/9+ewo2/fKHRNk6kjVKS8jrhXbnO8NEawarCuBx/efv0xpoUUKKGxa0cQb4Q==
+  dependencies:
+    "@tanstack/virtual-core" "3.2.1"
+
 "@tanstack/virtual-core@3.2.0":
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.2.0.tgz#874d36135e4badce2719e7bdc556ce240cbaff14"
   integrity sha512-P5XgYoAw/vfW65byBbJQCw+cagdXDT/qH6wmABiLt4v4YBT2q2vqCOhihe+D1Nt325F/S/0Tkv6C5z0Lv+VBQQ==
 
+"@tanstack/virtual-core@3.2.1":
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.2.1.tgz#b3e4214b8f462054501d80e8777068faa139bd06"
+  integrity sha512-nO0d4vRzsmpBQCJYyClNHPPoUMI4nXNfrm6IcCRL33ncWMoNVpURh9YebEHPw8KrtsP2VSJIHE4gf4XFGk1OGg==
+
 "@types/babel__core@^7.20.5":
   version "7.20.5"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.20.5.tgz#3df15f27ba85319caa07ba08d0721889bb39c017"
@@ -794,6 +848,11 @@ ansi-regex@^5.0.1:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
   integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
 
+ansi-regex@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-6.0.1.tgz#3183e38fae9a65d7cb5e53945cd5897d0260a06a"
+  integrity sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==
+
 ansi-styles@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
@@ -801,13 +860,23 @@ ansi-styles@^3.2.1:
   dependencies:
     color-convert "^1.9.0"
 
-ansi-styles@^4.1.0:
+ansi-styles@^4.0.0, ansi-styles@^4.1.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
   integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
   dependencies:
     color-convert "^2.0.1"
 
+ansi-styles@^6.1.0:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
+  integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
+
+any-promise@^1.0.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
+  integrity sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==
+
 anymatch@~3.1.2:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
@@ -816,6 +885,11 @@ anymatch@~3.1.2:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
+arg@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
+  integrity sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==
+
 argparse@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
@@ -937,6 +1011,18 @@ ast-types-flow@^0.0.8:
   resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.8.tgz#0a85e1c92695769ac13a428bb653e7538bea27d6"
   integrity sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==
 
+autoprefixer@^10.4.19:
+  version "10.4.19"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.19.tgz#ad25a856e82ee9d7898c59583c1afeb3fa65f89f"
+  integrity sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==
+  dependencies:
+    browserslist "^4.23.0"
+    caniuse-lite "^1.0.30001599"
+    fraction.js "^4.3.7"
+    normalize-range "^0.1.2"
+    picocolors "^1.0.0"
+    postcss-value-parser "^4.2.0"
+
 available-typed-arrays@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz#a5cc375d6a03c2efc87a553f3e0b1522def14846"
@@ -988,7 +1074,7 @@ braces@^3.0.2, braces@~3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
-browserslist@^4.22.2:
+browserslist@^4.22.2, browserslist@^4.23.0:
   version "4.23.0"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.23.0.tgz#8f3acc2bbe73af7213399430890f86c63a5674ab"
   integrity sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==
@@ -1014,11 +1100,21 @@ callsites@^3.0.0:
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
+camelcase-css@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
+  integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
+
 caniuse-lite@^1.0.30001587:
   version "1.0.30001603"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001603.tgz#605046a5bdc95ba4a92496d67e062522dce43381"
   integrity sha512-iL2iSS0eDILMb9n5yKQoTBim9jMZ0Yrk8g0N9K7UzYyWnfIKzXBZD5ngpM37ZcL/cv0Mli8XtVMRYMQAfFpi5Q==
 
+caniuse-lite@^1.0.30001599:
+  version "1.0.30001608"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001608.tgz#7ae6e92ffb300e4b4ec2f795e0abab456ec06cc0"
+  integrity sha512-cjUJTQkk9fQlJR2s4HMuPMvTiRggl0rAVMtthQuyOlDWuqHXqN8azLq+pi8B2TjwKJ32diHjUqRIKeFX4z1FoA==
+
 chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
@@ -1036,7 +1132,7 @@ chalk@^4.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-"chokidar@>=3.0.0 <4.0.0":
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.3:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
   integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
@@ -1056,6 +1152,11 @@ classnames@^2.3.2:
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
   integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
 
+client-only@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
+  integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -1080,6 +1181,11 @@ color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
+commander@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
+  integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -1090,7 +1196,7 @@ convert-source-map@^2.0.0:
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
   integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
 
-cross-spawn@^7.0.2:
+cross-spawn@^7.0.0, cross-spawn@^7.0.2:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
   integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
@@ -1099,6 +1205,11 @@ cross-spawn@^7.0.2:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+cssesc@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
+  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
+
 csstype@^3.0.2:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
@@ -1185,6 +1296,11 @@ dequal@^2.0.3:
   resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
   integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
 
+didyoumean@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
+  integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
+
 dir-glob@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
@@ -1192,6 +1308,11 @@ dir-glob@^3.0.1:
   dependencies:
     path-type "^4.0.0"
 
+dlv@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
+  integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
+
 doctrine@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
@@ -1214,11 +1335,26 @@ dom-helpers@^5.0.1, dom-helpers@^5.2.0, dom-helpers@^5.2.1:
     "@babel/runtime" "^7.8.7"
     csstype "^3.0.2"
 
+dompurify@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.1.0.tgz#8c6b9fe986969a33aa4686bd829cbe8e14dd9445"
+  integrity sha512-yoU4rhgPKCo+p5UrWWWNKiIq+ToGqmVVhk0PmMYBK4kRsR3/qhemNFL8f6CFmBd4gMwm3F4T7HBoydP5uY07fA==
+
+eastasianwidth@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
+  integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
+
 electron-to-chromium@^1.4.668:
   version "1.4.723"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.723.tgz#827da30c96b316684d352c3d81430029df01bb8e"
   integrity sha512-rxFVtrMGMFROr4qqU6n95rUi9IlfIm+lIAt+hOToy/9r6CDv0XiEcQdC3VP71y1pE5CFTzKV0RvxOGYCPWWHPw==
 
+emoji-regex@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
+  integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
+
 emoji-regex@^9.2.2:
   version "9.2.2"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
@@ -1569,7 +1705,7 @@ fast-deep-equal@3.1.3, fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-glob@^3.2.9:
+fast-glob@^3.2.9, fast-glob@^3.3.0:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
   integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
@@ -1640,6 +1776,19 @@ for-each@^0.3.3:
   dependencies:
     is-callable "^1.1.3"
 
+foreground-child@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/foreground-child/-/foreground-child-3.1.1.tgz#1d173e776d75d2772fed08efe4a0de1ea1b12d0d"
+  integrity sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==
+  dependencies:
+    cross-spawn "^7.0.0"
+    signal-exit "^4.0.1"
+
+fraction.js@^4.3.7:
+  version "4.3.7"
+  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
+  integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
+
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -1709,6 +1858,17 @@ glob-parent@^6.0.2:
   dependencies:
     is-glob "^4.0.3"
 
+glob@^10.3.10:
+  version "10.3.12"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-10.3.12.tgz#3a65c363c2e9998d220338e88a5f6ac97302960b"
+  integrity sha512-TCNv8vJ+xz4QiqTpfOJA7HvYv+tNIRHKfUWw/q+v2jdgN4ebz+KY9tGx5J4rHP0o84mNP+ApH66HRX8us3Khqg==
+  dependencies:
+    foreground-child "^3.1.0"
+    jackspeak "^2.3.6"
+    minimatch "^9.0.1"
+    minipass "^7.0.4"
+    path-scurry "^1.10.2"
+
 glob@^7.1.3:
   version "7.2.3"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
@@ -1937,6 +2097,11 @@ is-finalizationregistry@^1.0.2:
   dependencies:
     call-bind "^1.0.2"
 
+is-fullwidth-code-point@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
+  integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
+
 is-generator-function@^1.0.10:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/is-generator-function/-/is-generator-function-1.0.10.tgz#f1558baf1ac17e0deea7c0415c438351ff2b3c72"
@@ -2060,6 +2225,20 @@ iterator.prototype@^1.1.2:
     reflect.getprototypeof "^1.0.4"
     set-function-name "^2.0.1"
 
+jackspeak@^2.3.6:
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-2.3.6.tgz#647ecc472238aee4b06ac0e461acc21a8c505ca8"
+  integrity sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==
+  dependencies:
+    "@isaacs/cliui" "^8.0.2"
+  optionalDependencies:
+    "@pkgjs/parseargs" "^0.11.0"
+
+jiti@^1.21.0:
+  version "1.21.0"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.0.tgz#7c97f8fe045724e136a397f7340475244156105d"
+  integrity sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -2141,6 +2320,21 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
+lilconfig@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
+  integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==
+
+lilconfig@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-3.1.1.tgz#9d8a246fa753106cfc205fd2d77042faca56e5e3"
+  integrity sha512-O18pf7nyvHTckunPWCV1XUNXU1piu01y2b7ATJ0ppkUkk8ocqVWBrYjJBCwHDjD/ZWcfyrA0P4gKhzWGi5EINQ==
+
+lines-and-columns@^1.1.6:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
+  integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
+
 load-script@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4"
@@ -2165,6 +2359,11 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
+lru-cache@^10.2.0:
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.2.0.tgz#0bd445ca57363465900f4d1f9bd8db343a4d95c3"
+  integrity sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==
+
 lru-cache@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
@@ -2184,7 +2383,7 @@ merge2@^1.3.0, merge2@^1.4.1:
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
-micromatch@^4.0.4:
+micromatch@^4.0.4, micromatch@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
   integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
@@ -2192,6 +2391,11 @@ micromatch@^4.0.4:
     braces "^3.0.2"
     picomatch "^2.3.1"
 
+mini-svg-data-uri@^1.2.3:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz#8ab0aabcdf8c29ad5693ca595af19dd2ead09939"
+  integrity sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==
+
 minimatch@9.0.3:
   version "9.0.3"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.3.tgz#a6e00c3de44c3a542bfaae70abfc22420a6da825"
@@ -2206,11 +2410,23 @@ minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   dependencies:
     brace-expansion "^1.1.7"
 
+minimatch@^9.0.1:
+  version "9.0.4"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.4.tgz#8e49c731d1749cbec05050ee5145147b32496a51"
+  integrity sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==
+  dependencies:
+    brace-expansion "^2.0.1"
+
 minimist@^1.2.0, minimist@^1.2.6:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
   integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
 
+"minipass@^5.0.0 || ^6.0.2 || ^7.0.0", minipass@^7.0.4:
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.0.4.tgz#dbce03740f50a4786ba994c1fb908844d27b038c"
+  integrity sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -2226,6 +2442,15 @@ ms@^2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
+mz@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
+  integrity sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==
+  dependencies:
+    any-promise "^1.0.0"
+    object-assign "^4.0.1"
+    thenify-all "^1.0.0"
+
 nanoid@^3.3.7:
   version "3.3.7"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
@@ -2246,11 +2471,21 @@ normalize-path@^3.0.0, normalize-path@~3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
 
-object-assign@^4.1.1:
+normalize-range@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
+  integrity sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==
+
+object-assign@^4.0.1, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
 
+object-hash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-3.0.0.tgz#73f97f753e7baffc0e2cc9d6e079079744ac82e9"
+  integrity sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==
+
 object-inspect@^1.13.1:
   version "1.13.1"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.1.tgz#b96c6109324ccfef6b12216a956ca4dc2ff94bc2"
@@ -2377,6 +2612,14 @@ path-parse@^1.0.7:
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
+path-scurry@^1.10.2:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/path-scurry/-/path-scurry-1.10.2.tgz#8f6357eb1239d5fa1da8b9f70e9c080675458ba7"
+  integrity sha512-7xTavNy5RQXnsjANvVvMkEjvloOinkAjv/Z6Ildz9v2RinZ4SBKTWFOVRbaF8p0vpHnyjV/UwNDdKuUv6M5qcA==
+  dependencies:
+    lru-cache "^10.2.0"
+    minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
+
 path-type@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
@@ -2392,12 +2635,66 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
+pify@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+  integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
+
+pirates@^4.0.1:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9"
+  integrity sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==
+
 possible-typed-array-names@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz#89bb63c6fada2c3e90adc4a647beeeb39cc7bf8f"
   integrity sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==
 
-postcss@^8.4.38:
+postcss-import@^15.1.0:
+  version "15.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-15.1.0.tgz#41c64ed8cc0e23735a9698b3249ffdbf704adc70"
+  integrity sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==
+  dependencies:
+    postcss-value-parser "^4.0.0"
+    read-cache "^1.0.0"
+    resolve "^1.1.7"
+
+postcss-js@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2"
+  integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==
+  dependencies:
+    camelcase-css "^2.0.1"
+
+postcss-load-config@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-4.0.2.tgz#7159dcf626118d33e299f485d6afe4aff7c4a3e3"
+  integrity sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==
+  dependencies:
+    lilconfig "^3.0.0"
+    yaml "^2.3.4"
+
+postcss-nested@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.0.1.tgz#f83dc9846ca16d2f4fa864f16e9d9f7d0961662c"
+  integrity sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==
+  dependencies:
+    postcss-selector-parser "^6.0.11"
+
+postcss-selector-parser@^6.0.11:
+  version "6.0.16"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz#3b88b9f5c5abd989ef4e2fc9ec8eedd34b20fb04"
+  integrity sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
+postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
+  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
+
+postcss@^8.4.23, postcss@^8.4.38:
   version "8.4.38"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.38.tgz#b387d533baf2054288e337066d81c6bee9db9e0e"
   integrity sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==
@@ -2411,6 +2708,16 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
+prettier-plugin-tailwindcss@^0.5.13:
+  version "0.5.13"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.13.tgz#ee3c1e07848c90abdd1edde36a09366327e31e26"
+  integrity sha512-2tPWHCFNC+WRjAC4SIWQNSOdcL1NNkydXim8w7TDqlZi+/ulZYz2OouAI6qMtkggnPt7lGamboj6LcTMwcCvoQ==
+
+prettier@^3.2.5:
+  version "3.2.5"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.5.tgz#e52bc3090586e824964a8813b09aba6233b28368"
+  integrity sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==
+
 prop-types-extra@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/prop-types-extra/-/prop-types-extra-1.1.1.tgz#58c3b74cbfbb95d304625975aa2f0848329a010b"
@@ -2526,6 +2833,13 @@ react@^18.2.0:
   dependencies:
     loose-envify "^1.1.0"
 
+read-cache@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
+  integrity sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==
+  dependencies:
+    pify "^2.3.0"
+
 readdirp@~3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
@@ -2566,7 +2880,7 @@ resolve-from@^4.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
-resolve@^1.22.4:
+resolve@^1.1.7, resolve@^1.22.2, resolve@^1.22.4:
   version "1.22.8"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
   integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
@@ -2718,6 +3032,11 @@ side-channel@^1.0.4, side-channel@^1.0.6:
     get-intrinsic "^1.2.4"
     object-inspect "^1.13.1"
 
+signal-exit@^4.0.1:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04"
+  integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
+
 sister@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/sister/-/sister-3.0.2.tgz#bb3e39f07b1f75bbe1945f29a27ff1e5a2f26be4"
@@ -2733,6 +3052,25 @@ slash@^3.0.0:
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
   integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
 
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
+  name string-width-cjs
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^5.0.1, string-width@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
+  integrity sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==
+  dependencies:
+    eastasianwidth "^0.2.0"
+    emoji-regex "^9.2.2"
+    strip-ansi "^7.0.1"
+
 string.prototype.matchall@^4.0.10:
   version "4.0.11"
   resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.11.tgz#1092a72c59268d2abaad76582dccc687c0297e0a"
@@ -2779,13 +3117,20 @@ string.prototype.trimstart@^1.0.8:
     define-properties "^1.2.1"
     es-object-atoms "^1.0.0"
 
-strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
   dependencies:
     ansi-regex "^5.0.1"
 
+strip-ansi@^7.0.1:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
+  integrity sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==
+  dependencies:
+    ansi-regex "^6.0.1"
+
 strip-bom@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
@@ -2796,6 +3141,19 @@ strip-json-comments@^3.1.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
+sucrase@^3.32.0:
+  version "3.35.0"
+  resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.35.0.tgz#57f17a3d7e19b36d8995f06679d121be914ae263"
+  integrity sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.2"
+    commander "^4.0.0"
+    glob "^10.3.10"
+    lines-and-columns "^1.1.6"
+    mz "^2.7.0"
+    pirates "^4.0.1"
+    ts-interface-checker "^0.1.9"
+
 supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
@@ -2815,11 +3173,53 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+tailwindcss@^3.4.3:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.3.tgz#be48f5283df77dfced705451319a5dffb8621519"
+  integrity sha512-U7sxQk/n397Bmx4JHbJx/iSOOv5G+II3f1kpLpY2QeUv5DcPdcTsYLlusZfq1NthHS1c1cZoyFmmkex1rzke0A==
+  dependencies:
+    "@alloc/quick-lru" "^5.2.0"
+    arg "^5.0.2"
+    chokidar "^3.5.3"
+    didyoumean "^1.2.2"
+    dlv "^1.1.3"
+    fast-glob "^3.3.0"
+    glob-parent "^6.0.2"
+    is-glob "^4.0.3"
+    jiti "^1.21.0"
+    lilconfig "^2.1.0"
+    micromatch "^4.0.5"
+    normalize-path "^3.0.0"
+    object-hash "^3.0.0"
+    picocolors "^1.0.0"
+    postcss "^8.4.23"
+    postcss-import "^15.1.0"
+    postcss-js "^4.0.1"
+    postcss-load-config "^4.0.1"
+    postcss-nested "^6.0.1"
+    postcss-selector-parser "^6.0.11"
+    resolve "^1.22.2"
+    sucrase "^3.32.0"
+
 text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
 
+thenify-all@^1.0.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
+  integrity sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==
+  dependencies:
+    thenify ">= 3.1.0 < 4"
+
+"thenify@>= 3.1.0 < 4":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/thenify/-/thenify-3.3.1.tgz#8932e686a4066038a016dd9e2ca46add9838a95f"
+  integrity sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==
+  dependencies:
+    any-promise "^1.0.0"
+
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
@@ -2837,6 +3237,11 @@ ts-api-utils@^1.0.1:
   resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.3.0.tgz#4b490e27129f1e8e686b45cc4ab63714dc60eea1"
   integrity sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==
 
+ts-interface-checker@^0.1.9:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
+  integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
+
 tsconfig-paths@^3.15.0:
   version "3.15.0"
   resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz#5299ec605e55b1abb23ec939ef15edaf483070d4"
@@ -2963,6 +3368,11 @@ use-between@^1.3.5:
   resolved "https://registry.yarnpkg.com/use-between/-/use-between-1.3.5.tgz#8f9db513414d204e0046c5692828e209cec4d564"
   integrity sha512-IP9eJfszZr0aah/6i/pzaM7n/QgMPwWKJ+mnWqT5O0qFhLnztPbkVC6L7zI6ygeBIMJHfmUGvsw0b28pyrEGSA==
 
+util-deprecate@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+  integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
+
 vite@^5.1.6:
   version "5.2.7"
   resolved "https://registry.yarnpkg.com/vite/-/vite-5.2.7.tgz#e1b8a985eb54fcb9467d7f7f009d87485016df6e"
@@ -3038,6 +3448,24 @@ which@^2.0.1:
   dependencies:
     isexe "^2.0.0"
 
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
+  integrity sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==
+  dependencies:
+    ansi-styles "^6.1.0"
+    string-width "^5.0.1"
+    strip-ansi "^7.0.1"
+
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
@@ -3053,6 +3481,11 @@ yallist@^4.0.0:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
+yaml@^2.3.4:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.4.1.tgz#2e57e0b5e995292c25c75d2658f0664765210eed"
+  integrity sha512-pIXzoImaqmfOrL7teGUBt/T7ZDnyeGBWyXQBvOVhLkWLN37GXv8NMLK406UY6dS51JfcQHsmcW5cJ441bHg6Lg==
+
 yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"