diff --git a/craco.config.js b/craco.config.js
index 661daecc..4f5320a4 100644
--- a/craco.config.js
+++ b/craco.config.js
@@ -5,6 +5,23 @@ module.exports = {
     webpack: {
         configure: (webpackConfig) => ({
             ...webpackConfig,
+            optimization: {
+                ...webpackConfig.optimization,
+                splitChunks: {
+                    cacheGroups: {
+                        vendor: {
+                            name: 'vendors',
+                            test: /[\\/]node_modules[\\/]/,
+                            chunks: 'all',
+                        },
+                        renderer: {
+                            name: 'renderer',
+                            test: /[\\/]node_modules[\\/]@nitrots[\\/]nitro-renderer[\\/]/,
+                            chunks: 'all',
+                        }
+                    }
+                }
+            },
             module: {
                 ...webpackConfig.module,
                 rules: webpackConfig.module.rules.map((rule) => 
diff --git a/src/App.scss b/src/App.scss
index 8d450e5a..2a93b1ff 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -17,6 +17,21 @@ $grid-active-border-color: $white;
 
 $toolbar-height: 55px;
 
+$achievement-width: 650px;
+$achievement-height: 400px;
+
+$avatar-editor-width: 620px;
+$avatar-editor-height: 374px;
+
+$catalog-width: 620px;
+$catalog-height: 400px;
+
+$inventory-width: 528px;
+$inventory-height: 320px;
+
+$navigator-width: 400px;
+$navigator-height: 420px;
+
 .nitro-app {
     width: 100%;
     height: 100%;
diff --git a/src/App.tsx b/src/App.tsx
index 439fbc5d..9d050bd9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -125,7 +125,7 @@ export const App: FC<{}> = props =>
     }
     
     return (
-        <div className="nitro-app">
+        <div className="nitro-app overflow-hidden">
             <div id="nitro-alerts-container" />
             { (!isReady || isError) && <LoadingView isError={ isError } message={ message } /> }
             <TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ (isReady && !isError) } timeout={ 300 }>
diff --git a/src/api/friends/OpenMessengerChat.ts b/src/api/friends/OpenMessengerChat.ts
new file mode 100644
index 00000000..0b8ab554
--- /dev/null
+++ b/src/api/friends/OpenMessengerChat.ts
@@ -0,0 +1,7 @@
+import { CreateLinkEvent } from '..';
+
+export function OpenMessengerChat(friendId: number = -1): void
+{
+    if(friendId === -1) CreateLinkEvent('friends/messenger/open');
+    else CreateLinkEvent(`friends/messenger/${friendId}`);
+}
diff --git a/src/api/friends/index.ts b/src/api/friends/index.ts
new file mode 100644
index 00000000..ffb458ee
--- /dev/null
+++ b/src/api/friends/index.ts
@@ -0,0 +1 @@
+export * from './OpenMessengerChat';
diff --git a/src/api/index.ts b/src/api/index.ts
index 773325c3..0b87703a 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -1,4 +1,5 @@
 export * from './core';
+export * from './friends';
 export * from './groups';
 export * from './navigator';
 export * from './nitro';
diff --git a/src/api/nitro/room/DispatchMouseEvent.ts b/src/api/nitro/room/DispatchMouseEvent.ts
index 762e0dda..6d18f2e8 100644
--- a/src/api/nitro/room/DispatchMouseEvent.ts
+++ b/src/api/nitro/room/DispatchMouseEvent.ts
@@ -47,6 +47,8 @@ export function DispatchMouseEvent(roomId: number, canvasId: number, event: Mous
             break;
         case MouseEventType.MOUSE_UP:
             break;
+        case MouseEventType.RIGHT_CLICK:
+            break;
         default: return;
     }
 
diff --git a/src/api/nitro/room/widgets/events/RoomWidgetUpdateDecorateModeEvent.ts b/src/api/nitro/room/widgets/events/RoomWidgetUpdateDecorateModeEvent.ts
new file mode 100644
index 00000000..212e371c
--- /dev/null
+++ b/src/api/nitro/room/widgets/events/RoomWidgetUpdateDecorateModeEvent.ts
@@ -0,0 +1,20 @@
+import { RoomWidgetUpdateEvent } from './RoomWidgetUpdateEvent';
+
+export class RoomWidgetUpdateDecorateModeEvent extends RoomWidgetUpdateEvent
+{
+    public static UPDATE_DECORATE: string = 'RWUDME_UPDATE_DECORATE';
+
+    private _isDecorating: boolean;
+
+    constructor(isDecorating: boolean)
+    {
+        super(RoomWidgetUpdateDecorateModeEvent.UPDATE_DECORATE);
+
+        this._isDecorating = isDecorating;
+    }
+
+    public get isDecorating(): boolean
+    {
+        return this._isDecorating;
+    }
+}
diff --git a/src/api/nitro/room/widgets/events/index.ts b/src/api/nitro/room/widgets/events/index.ts
index f612d85b..775d210e 100644
--- a/src/api/nitro/room/widgets/events/index.ts
+++ b/src/api/nitro/room/widgets/events/index.ts
@@ -14,6 +14,7 @@ export * from './RoomWidgetUpdateChatInputContentEvent';
 export * from './RoomWidgetUpdateCreditFurniEvent';
 export * from './RoomWidgetUpdateCustomStackHeightEvent';
 export * from './RoomWidgetUpdateDanceStatusEvent';
+export * from './RoomWidgetUpdateDecorateModeEvent';
 export * from './RoomWidgetUpdateDimmerEvent';
 export * from './RoomWidgetUpdateDimmerStateEvent';
 export * from './RoomWidgetUpdateEvent';
diff --git a/src/api/nitro/room/widgets/handlers/RoomWidgetInfostandHandler.ts b/src/api/nitro/room/widgets/handlers/RoomWidgetInfostandHandler.ts
index 1ee584ce..e86aba4e 100644
--- a/src/api/nitro/room/widgets/handlers/RoomWidgetInfostandHandler.ts
+++ b/src/api/nitro/room/widgets/handlers/RoomWidgetInfostandHandler.ts
@@ -1,7 +1,7 @@
 import { IFurnitureData, NitroEvent, ObjectDataFactory, PetFigureData, PetRespectComposer, PetSupplementComposer, PetType, RoomControllerLevel, RoomModerationSettings, RoomObjectCategory, RoomObjectOperationType, RoomObjectType, RoomObjectVariable, RoomSessionPetInfoUpdateEvent, RoomSessionUserBadgesEvent, RoomTradingLevelEnum, RoomUnitDropHandItemComposer, RoomUnitGiveHandItemComposer, RoomUnitGiveHandItemPetComposer, RoomUserData, RoomWidgetEnum, RoomWidgetEnumItemExtradataParameter, Vector3d } from '@nitrots/nitro-renderer';
 import { GetNitroInstance, GetRoomEngine, GetSessionDataManager, IsOwnerOfFurniture } from '../../../..';
 import { InventoryTradeRequestEvent, WiredSelectObjectEvent } from '../../../../../events';
-import { FriendListSendFriendRequestEvent } from '../../../../../events/friend-list/FriendListSendFriendRequestEvent';
+import { FriendsSendFriendRequestEvent } from '../../../../../events/friends/FriendsSendFriendRequestEvent';
 import { dispatchUiEvent } from '../../../../../hooks/events';
 import { SendMessageHook } from '../../../../../hooks/messages';
 import { PetSupplementEnum } from '../../../../../views/room/widgets/avatar-info/common/PetSupplementEnum';
@@ -76,7 +76,7 @@ export class RoomWidgetInfostandHandler extends RoomWidgetHandler
             case RoomWidgetRoomObjectMessage.GET_OBJECT_INFO:
                 return this.processObjectInfoMessage((message as RoomWidgetRoomObjectMessage));
             case RoomWidgetUserActionMessage.SEND_FRIEND_REQUEST:
-                dispatchUiEvent(new FriendListSendFriendRequestEvent(userId));
+                dispatchUiEvent(new FriendsSendFriendRequestEvent(userId));
                 break;
             case RoomWidgetUserActionMessage.RESPECT_USER:
                 GetSessionDataManager().giveRespect(userId);
diff --git a/src/assets/images/friendlist/icons/icon_new_message.png b/src/assets/images/friendlist/icons/icon_new_message.png
new file mode 100644
index 00000000..f7a31fa0
Binary files /dev/null and b/src/assets/images/friendlist/icons/icon_new_message.png differ
diff --git a/src/assets/images/friendlist/icons/icon_warning.png b/src/assets/images/friendlist/icons/icon_warning.png
new file mode 100644
index 00000000..3a3ffcf9
Binary files /dev/null and b/src/assets/images/friendlist/icons/icon_warning.png differ
diff --git a/src/assets/styles/bootstrap/_utilities.scss b/src/assets/styles/bootstrap/_utilities.scss
index 960d6f1a..7c6c7231 100644
--- a/src/assets/styles/bootstrap/_utilities.scss
+++ b/src/assets/styles/bootstrap/_utilities.scss
@@ -42,6 +42,14 @@ $utilities: map-merge(
       property: overflow,
       values: auto hidden visible scroll,
     ),
+    "overflow-x": (
+      property: overflow-x,
+      values: auto hidden visible scroll,
+    ),
+    "overflow-y": (
+      property: overflow-y,
+      values: auto hidden visible scroll,
+    ),
     // scss-docs-end utils-overflow
     // scss-docs-start utils-display
     "display": (
diff --git a/src/assets/styles/bootstrap/_variables.scss b/src/assets/styles/bootstrap/_variables.scss
index 57aa9b7d..feb71255 100644
--- a/src/assets/styles/bootstrap/_variables.scss
+++ b/src/assets/styles/bootstrap/_variables.scss
@@ -85,6 +85,7 @@ $ghost:         #c8cad0 !default;
 $gray-chateau:  #a3a7b1 !default;
 $gable-green:   #1C323F !default;
 $william:       #3d5f6e !default;
+$bluewood:      #304059 !default;
 $success:       $green !default;
 $info:          $cyan !default;
 $warning:       $yellow !default;
@@ -385,7 +386,7 @@ $enable-transitions:          true !default;
 $enable-reduced-motion:       true !default;
 $enable-smooth-scroll:        true !default;
 $enable-grid-classes:         true !default;
-$enable-cssgrid:              false !default;
+$enable-cssgrid:              true !default;
 $enable-button-pointers:      true !default;
 $enable-rfs:                  true !default;
 $enable-validation-icons:     true !default;
diff --git a/src/assets/styles/grid.scss b/src/assets/styles/grid.scss
deleted file mode 100644
index 3a23cb69..00000000
--- a/src/assets/styles/grid.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-$grid-options: (
-    "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"
-);
-
-.grid-items {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-content: flex-start;
-    width: 100%;
-    margin-top: -3px;
-    overflow: hidden;
-
-    @each $option in $grid-options {
-        &.grid-#{$option} {
-            .grid-item {
-                width: calc(1 / #{$option} * 100% - (1 - 1 / #{$option}) * 3px);
-
-                &:nth-child(#{$option}n) {
-                    margin-right: 0;
-                }
-            }
-        }
-    }
-}
-
-.row-grid {
-    margin: 0 !important;
-    
-    .col {
-        padding: 0 !important;
-    }
-}
-
-@each $option in $grid-options {
-    .row-grid {
-        &.row-cols-#{$option} {
-            .col:nth-child(#{$option}n) {
-                padding-left: 10px !important;
-            }
-        }
-    }
-}
diff --git a/src/assets/styles/icons.scss b/src/assets/styles/icons.scss
index a5108a7c..3d8f14ab 100644
--- a/src/assets/styles/icons.scss
+++ b/src/assets/styles/icons.scss
@@ -693,6 +693,18 @@
         height: 16px;
     }
 
+    &.icon-friendlist-warning {
+        background: url('../images/friendlist/icons/icon_warning.png');
+        width: 23px;
+        height: 21px;
+    }
+
+    &.icon-friendlist-new-message {
+        background: url('../images/friendlist/icons/icon_new_message.png');
+        width: 14px;
+        height: 16px;
+    }
+
     &.spin {
         animation: rotating 1s linear infinite;
     }
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 0c20accd..ee7ae10f 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -7,7 +7,6 @@
 @import '../node_modules/animate.css/animate.min.css';
 @import './scrollbars';
 @import './slider';
-@import './grid';
 @import './icons';
 @import './utils';
 
@@ -15,6 +14,10 @@
     min-height: 28px;
 }
 
+textarea {
+  resize: none;
+}
+
 /* Chrome, Safari, Edge, Opera */
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
diff --git a/src/assets/styles/scrollbars.scss b/src/assets/styles/scrollbars.scss
index f4120813..b2d976db 100644
--- a/src/assets/styles/scrollbars.scss
+++ b/src/assets/styles/scrollbars.scss
@@ -1,22 +1,53 @@
 ::-webkit-scrollbar {
     width: 0.5rem;
-    height: 0.5rem;
+
+    &:horizontal {
+        height: 0.5rem;
+    }
+
+    &:not(:horizontal) {
+        width: 0.5rem;
+    }
 }
 
 ::-webkit-scrollbar-track {
-    background-clip: padding-box;
-    border-right: 0.25rem solid rgba($black, .1);
+
+    &:horizontal {
+        border-bottom: 0.25rem solid rgba($black, .1);
+    }
+
+    &:not(:horizontal) {
+        border-right: 0.25rem solid rgba($black, .1);
+    }
 }
 
 ::-webkit-scrollbar-thumb {
-    background-clip: padding-box;
-    border-right: 0.25rem solid rgba($primary, .4);
 
-    &:hover {
-        border-right: 0.25rem solid rgba($primary, .8);
+    &:horizontal {
+        border-bottom: 0.25rem solid rgba($primary, .4);
+
+        &:hover {
+            border-bottom: 0.25rem solid rgba($primary, .8);
+        }
+    
+        &:active {
+            border-bottom: 0.25rem solid $secondary;
+        }
     }
 
-    &:active {
-        border-right: 0.25rem solid $secondary;
+    &:not(:horizontal) {
+        border-right: 0.25rem solid rgba($primary, .4);
+
+        &:hover {
+            border-right: 0.25rem solid rgba($primary, .8);
+        }
+
+        &:active {
+            border-right: 0.25rem solid $secondary;
+        }
     }
 }
+
+::-webkit-scrollbar-corner {
+    background: rgba($black, .1);
+}
diff --git a/src/assets/styles/utils.scss b/src/assets/styles/utils.scss
index 0050c41b..cc44e17f 100644
--- a/src/assets/styles/utils.scss
+++ b/src/assets/styles/utils.scss
@@ -10,6 +10,14 @@
     transform: scale(1) translateZ(0);
 }
 
+.scale-1-25 {
+    transform: scale(1.25) translateZ(0);
+}
+
+.scale-1-50 {
+    transform: scale(1.50) translateZ(0);
+}
+
 .scale-2 {
     transform: scale(2) translateZ(0);
 }
diff --git a/src/events/friend-list/index.ts b/src/events/friend-list/index.ts
deleted file mode 100644
index 4789fde9..00000000
--- a/src/events/friend-list/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './FriendEnteredRoomEvent';
-export * from './FriendListEvent';
diff --git a/src/events/friend-list/FriendEnteredRoomEvent.ts b/src/events/friends/FriendEnteredRoomEvent.ts
similarity index 100%
rename from src/events/friend-list/FriendEnteredRoomEvent.ts
rename to src/events/friends/FriendEnteredRoomEvent.ts
diff --git a/src/events/friend-list/FriendListContentEvent.ts b/src/events/friends/FriendListContentEvent.ts
similarity index 83%
rename from src/events/friend-list/FriendListContentEvent.ts
rename to src/events/friends/FriendListContentEvent.ts
index a7623cbc..80048267 100644
--- a/src/events/friend-list/FriendListContentEvent.ts
+++ b/src/events/friends/FriendListContentEvent.ts
@@ -1,7 +1,7 @@
 import { MessengerFriend } from '../../views/friends/common/MessengerFriend';
-import { FriendListEvent } from './FriendListEvent';
+import { FriendsEvent } from './FriendsEvent';
 
-export class FriendListContentEvent extends FriendListEvent
+export class FriendListContentEvent extends FriendsEvent
 {
     public static FRIEND_LIST_CONTENT: string = 'FLSFRE_FRIEND_LIST_CONTENT';
 
diff --git a/src/events/friend-list/FriendListEvent.ts b/src/events/friends/FriendsEvent.ts
similarity index 57%
rename from src/events/friend-list/FriendListEvent.ts
rename to src/events/friends/FriendsEvent.ts
index d450144e..0f8be1d7 100644
--- a/src/events/friend-list/FriendListEvent.ts
+++ b/src/events/friends/FriendsEvent.ts
@@ -1,8 +1,10 @@
 import { NitroEvent } from '@nitrots/nitro-renderer';
 
-export class FriendListEvent extends NitroEvent
+export class FriendsEvent extends NitroEvent
 {
     public static SHOW_FRIEND_LIST: string = 'IE_SHOW_FRIEND_LIST';
     public static TOGGLE_FRIEND_LIST: string = 'IE_TOGGLE_FRIEND_LIST';
+    public static SHOW_FRIEND_MESSENGER: string = 'IE_SHOW_FRIEND_MESSENGER';
+    public static TOGGLE_FRIEND_MESSENGER: string = 'IE_TOGGLE_FRIEND_MESSENGER';
     public static REQUEST_FRIEND_LIST: string = 'FLSFRE_REQUEST_FRIEND_LIST';
 }
diff --git a/src/events/friends/FriendsMessengerIconEvent.ts b/src/events/friends/FriendsMessengerIconEvent.ts
new file mode 100644
index 00000000..602eb726
--- /dev/null
+++ b/src/events/friends/FriendsMessengerIconEvent.ts
@@ -0,0 +1,23 @@
+import { NitroEvent } from '@nitrots/nitro-renderer';
+
+export class FriendsMessengerIconEvent extends NitroEvent
+{
+    public static UPDATE_ICON: string = 'FMIE_UPDATE_ICON';
+    public static HIDE_ICON: number = 0;
+    public static SHOW_ICON: number = 1;
+    public static UNREAD_ICON: number = 2;
+
+    private _iconType: number;
+
+    constructor(type: string, subType: number = FriendsMessengerIconEvent.SHOW_ICON)
+    {
+        super(type);
+
+        this._iconType = subType;
+    }
+
+    public get iconType(): number
+    {
+        return this._iconType;
+    }
+}
diff --git a/src/events/friend-list/FriendListSendFriendRequestEvent.ts b/src/events/friends/FriendsSendFriendRequestEvent.ts
similarity index 57%
rename from src/events/friend-list/FriendListSendFriendRequestEvent.ts
rename to src/events/friends/FriendsSendFriendRequestEvent.ts
index 02d7c006..9e42661b 100644
--- a/src/events/friend-list/FriendListSendFriendRequestEvent.ts
+++ b/src/events/friends/FriendsSendFriendRequestEvent.ts
@@ -1,6 +1,6 @@
-import { FriendListEvent } from './FriendListEvent';
+import { FriendsEvent } from './FriendsEvent';
 
-export class FriendListSendFriendRequestEvent extends FriendListEvent
+export class FriendsSendFriendRequestEvent extends FriendsEvent
 {
     public static SEND_FRIEND_REQUEST: string = 'FLSFRE_SEND_FRIEND_REQUEST';
 
@@ -8,7 +8,7 @@ export class FriendListSendFriendRequestEvent extends FriendListEvent
 
     constructor(userId: number)
     {
-        super(FriendListSendFriendRequestEvent.SEND_FRIEND_REQUEST);
+        super(FriendsSendFriendRequestEvent.SEND_FRIEND_REQUEST);
 
         this._userId = userId;
     }
diff --git a/src/events/friends/index.ts b/src/events/friends/index.ts
new file mode 100644
index 00000000..2f3699c3
--- /dev/null
+++ b/src/events/friends/index.ts
@@ -0,0 +1,5 @@
+export * from './FriendEnteredRoomEvent';
+export * from './FriendListContentEvent';
+export * from './FriendsEvent';
+export * from './FriendsMessengerIconEvent';
+export * from './FriendsSendFriendRequestEvent';
diff --git a/src/events/index.ts b/src/events/index.ts
index 006285c8..9d4842ca 100644
--- a/src/events/index.ts
+++ b/src/events/index.ts
@@ -1,7 +1,7 @@
 export * from './avatar-editor';
 export * from './camera';
 export * from './catalog';
-export * from './friend-list';
+export * from './friends';
 export * from './inventory';
 export * from './navigator';
 export * from './notification-center';
diff --git a/src/index.scss b/src/index.scss
index cbfa7106..d3842a6a 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -14,4 +14,8 @@ body {
     image-rendering: -moz-crisp-edges;
 }
 
+img {
+    object-fit: none;
+}
+
 @import './App';
diff --git a/src/layout/base/NitroLayoutBase.tsx b/src/layout/base/NitroLayoutBase.tsx
new file mode 100644
index 00000000..7007a972
--- /dev/null
+++ b/src/layout/base/NitroLayoutBase.tsx
@@ -0,0 +1,28 @@
+import { FC, useMemo } from 'react';
+import { NitroLayoutBaseProps } from './NitroLayoutBase.types';
+
+export const NitroLayoutBase: FC<NitroLayoutBaseProps> = props =>
+{
+    const { className = '', overflow = null, position = null, gap = null, children = null, ...rest } = props;
+
+    const getClassName = useMemo(() =>
+    {
+        let newClassName = '';
+
+        if(overflow && overflow.length) newClassName += ` overflow-${ overflow }`;
+
+        if(position && position.length) newClassName += ` position-${ position }`;
+
+        if(gap && gap >= 1) newClassName += ` gap-${ gap }`;
+
+        if(className && className.length) newClassName += ` ${ className }`;
+
+        return newClassName;
+    }, [ className, overflow, position, gap ]);
+
+    return (
+        <div className={ getClassName } { ...rest }>
+            { children }
+        </div>
+    );
+}
diff --git a/src/layout/base/NitroLayoutBase.types.ts b/src/layout/base/NitroLayoutBase.types.ts
new file mode 100644
index 00000000..fe2219fa
--- /dev/null
+++ b/src/layout/base/NitroLayoutBase.types.ts
@@ -0,0 +1,9 @@
+import { ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
+import { NitroLayoutOverflow, NitroLayoutPosition, NitroLayoutSpacing } from '../common';
+
+export interface NitroLayoutBaseProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>
+{
+    overflow?: NitroLayoutOverflow;
+    position?: NitroLayoutPosition;
+    gap?: NitroLayoutSpacing;
+}
diff --git a/src/layout/base/index.ts b/src/layout/base/index.ts
new file mode 100644
index 00000000..f38bd839
--- /dev/null
+++ b/src/layout/base/index.ts
@@ -0,0 +1,2 @@
+export * from './NitroLayoutBase';
+export * from './NitroLayoutBase.types';
diff --git a/src/layout/button/NitroLayoutButton.tsx b/src/layout/button/NitroLayoutButton.tsx
new file mode 100644
index 00000000..0b66a3d0
--- /dev/null
+++ b/src/layout/button/NitroLayoutButton.tsx
@@ -0,0 +1,26 @@
+import { FC, useMemo } from 'react';
+import { NitroLayoutButtonProps } from './NitroLayoutButton.types';
+
+export const NitroLayoutButton: FC<NitroLayoutButtonProps> = props =>
+{
+    const { className = '', variant = 'primary', size = null, children = null, ...rest } = props;
+
+    const getClassName = useMemo(() =>
+    {
+        let newClassName = 'btn';
+
+        if(variant && variant.length) newClassName += ` btn-${ variant }`;
+
+        if(size && size.length) newClassName += ` btn-${ size }`;
+
+        if(className && className.length) newClassName += ` ${ className }`;
+
+        return newClassName;
+    }, [ className, variant, size ]);
+
+    return (
+        <button type="button" className={ getClassName } { ...rest }>
+            { children }
+        </button>
+    );
+}
diff --git a/src/layout/button/NitroLayoutButton.types.ts b/src/layout/button/NitroLayoutButton.types.ts
new file mode 100644
index 00000000..cc01479d
--- /dev/null
+++ b/src/layout/button/NitroLayoutButton.types.ts
@@ -0,0 +1,8 @@
+import { ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
+import { NitroLayoutButtonSize, NitroLayoutVariant } from '../common';
+
+export interface NitroLayoutButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
+{
+    variant?: NitroLayoutVariant;
+    size?: NitroLayoutButtonSize;
+}
diff --git a/src/layout/button/index.ts b/src/layout/button/index.ts
new file mode 100644
index 00000000..ccfb06b3
--- /dev/null
+++ b/src/layout/button/index.ts
@@ -0,0 +1,2 @@
+export * from './NitroLayoutButton';
+export * from './NitroLayoutButton.types';
diff --git a/src/layout/card/NitroCardView.scss b/src/layout/card/NitroCardView.scss
index 44285071..7e82a515 100644
--- a/src/layout/card/NitroCardView.scss
+++ b/src/layout/card/NitroCardView.scss
@@ -3,6 +3,7 @@ $nitro-card-tabs-height: 33px;
 
 .nitro-card {
     pointer-events: all;
+    resize: both;
 
     @import './accordion/NitroCardAccordionView';
     @import './content/NitroCardContentView';
@@ -19,6 +20,10 @@ $nitro-card-tabs-height: 33px;
     height: 100%;
     pointer-events: none;
 
+    .theme-primary {
+        border: $border-width solid $border-color;
+    }
+
     @include media-breakpoint-down(lg) {
         
         .draggable-window {
@@ -31,12 +36,13 @@ $nitro-card-tabs-height: 33px;
         }
     
         .nitro-card {
-            width: 100%;
-            height: 100%;
+            max-width: 75%;
+            max-height: calc(100% - 20px);
+            margin: 10px auto 10px;
     
-            &.rounded {
-                border-radius: 0 !important;
-            }
+            // &.rounded {
+            //     border-radius: 0 !important;
+            // }
         }
     }
 }
diff --git a/src/layout/card/NitroCardView.tsx b/src/layout/card/NitroCardView.tsx
index aaf4178a..f44ee67f 100644
--- a/src/layout/card/NitroCardView.tsx
+++ b/src/layout/card/NitroCardView.tsx
@@ -11,7 +11,7 @@ export const NitroCardView: FC<NitroCardViewProps> = props =>
         <NitroCardContextProvider value={ { theme, simple } }>
             <div className="nitro-card-responsive">
                 <DraggableWindow { ...rest }>
-                    <div className={ 'nitro-card d-flex flex-column rounded border shadow overflow-hidden ' + className }>
+                    <div className={ `nitro-card d-flex flex-column rounded shadow overflow-hidden theme-${theme} ${className}` }>
                         { children }
                     </div>
                 </DraggableWindow>
diff --git a/src/layout/card/content/NitroCardContentView.scss b/src/layout/card/content/NitroCardContentView.scss
index 9ffd6fe9..c56cad8c 100644
--- a/src/layout/card/content/NitroCardContentView.scss
+++ b/src/layout/card/content/NitroCardContentView.scss
@@ -1,4 +1,5 @@
 .content-area {
+    height: 100%;
     padding-top: $container-padding-x;
     padding-bottom: $container-padding-x;
     overflow: auto;
@@ -9,6 +10,5 @@
         height: 100% !important;
         min-height: auto !important;
         max-height: 100% !important;
-        resize: none !important;
     }
 }
diff --git a/src/layout/card/content/NitroCardContentView.tsx b/src/layout/card/content/NitroCardContentView.tsx
index 969069b2..8565b3ab 100644
--- a/src/layout/card/content/NitroCardContentView.tsx
+++ b/src/layout/card/content/NitroCardContentView.tsx
@@ -8,7 +8,7 @@ export const NitroCardContentView: FC<NitroCardContentViewProps> = props =>
     const { simple = false } = useNitroCardContext();
     
     return (
-        <div className={ `container-fluid bg-light content-area ${ (simple ? 'simple' : '') } ${ className || '' }` } { ...rest }>
+        <div className={ `container-fluid bg-light content-area d-flex flex-column overflow-auto ${ (simple ? 'simple' : '') } ${ className || '' }` } { ...rest }>
             { children }
         </div>
     );
diff --git a/src/layout/card/grid/NitroCardGridView.scss b/src/layout/card/grid/NitroCardGridView.scss
index f5794406..948bb63b 100644
--- a/src/layout/card/grid/NitroCardGridView.scss
+++ b/src/layout/card/grid/NitroCardGridView.scss
@@ -1,71 +1,6 @@
-.nitro-card-grid {
-    width: 100%;
-
-    .row-cols-3 {
-
-        .col {
-            padding-right: 0.25rem;
-
-            &:nth-child(3n+3) {
-                padding-right: 0;
-            }
-        }
-    }
-
-    .row-cols-4 {
-
-        .col {
-            padding-right: 0.25rem;
-
-            &:nth-child(4n+4) {
-                padding-right: 0;
-            }
-        }
-    }
-    
-    .row-cols-5 {
-
-        .col {
-            padding-right: 0.25rem;
-
-            &:nth-child(5n+5) {
-                padding-right: 0;
-            }
-        }
-    }
-
-    .row-cols-6 {
-
-        .col {
-            padding-right: 0.25rem;
-
-            &:nth-child(6n+6) {
-                padding-right: 0;
-            }
-        }
-    }
-
-    .row-cols-7 {
-
-        .col {
-            padding-right: 0.25rem;
-
-            &:nth-child(7n+7) {
-                padding-right: 0;
-            }
-        }
-    }
-
-    .row-cols-8 {
-
-        .col {
-            padding-right: 0.25rem;
-
-            &:nth-child(8n+8) {
-                padding-right: 0;
-            }
-        }
-    }
-
-    @import './item/NitroCardGridItemView.scss';
+.nitro-grid {
+    --nitro-grid-column-min-width: 45px;
+    grid-template-columns: repeat(auto-fill, minmax(var(--nitro-grid-column-min-width, 45px), 1fr));
 }
+
+@import './item/NitroCardGridItemView.scss';
diff --git a/src/layout/card/grid/NitroCardGridView.tsx b/src/layout/card/grid/NitroCardGridView.tsx
index a9a85c64..a9e611bc 100644
--- a/src/layout/card/grid/NitroCardGridView.tsx
+++ b/src/layout/card/grid/NitroCardGridView.tsx
@@ -1,18 +1,31 @@
-import { FC } from 'react';
-import { NitroCardGridContextProvider } from './context/NitroCardGridContext';
-import { NitroCardGridThemes, NitroCardGridViewProps } from './NitroCardGridView.types';
+import { FC, useMemo } from 'react';
+import { NitroCardGridViewProps } from './NitroCardGridView.types';
 
 export const NitroCardGridView: FC<NitroCardGridViewProps> = props =>
 {
-    const { columns = 5, theme = NitroCardGridThemes.THEME_DEFAULT, className = '', children = null, ...rest } = props;
+    const { columns = 5, gap = 2, className = '', style = null, children = null, ...rest } = props;
+
+    const getClassName = useMemo(() =>
+    {
+        let newClassName = `grid gap-${ gap } nitro-grid overflow-auto`;
+
+        if(className && className.length) newClassName += ' ' + className;
+
+        return newClassName;
+    }, [ className, gap ]);
+
+    const getStyle = useMemo(() =>
+    {
+        const newStyle = { ...style };
+
+        //newStyle['--bs-columns'] = columns.toString();
+
+        return newStyle;
+    }, [ style, columns ]);
 
     return (
-        <NitroCardGridContextProvider value={ { theme } }>
-            <div className={ `h-100 overflow-hidden nitro-card-grid ${ theme } ${ className || '' }` } { ...rest }>
-                <div className={ `row row-cols-${ columns } align-content-start g-0 w-100 h-100 overflow-auto` }>
-                    { children }
-                </div>
-            </div>
-        </NitroCardGridContextProvider>
+        <div className={ getClassName } style={ getStyle } { ...rest }>
+            { children }
+        </div>
     );
 }
diff --git a/src/layout/card/grid/NitroCardGridView.types.ts b/src/layout/card/grid/NitroCardGridView.types.ts
index f3cc6c80..55b14648 100644
--- a/src/layout/card/grid/NitroCardGridView.types.ts
+++ b/src/layout/card/grid/NitroCardGridView.types.ts
@@ -3,11 +3,5 @@ import { DetailsHTMLAttributes } from 'react';
 export interface NitroCardGridViewProps extends DetailsHTMLAttributes<HTMLDivElement>
 {
     columns?: number;
-    theme?: string;
-}
-
-export class NitroCardGridThemes
-{
-    public static THEME_DEFAULT: string = 'theme-default';
-    public static THEME_SHADOWED: string = 'theme-shadowed';
+    gap?: number;
 }
diff --git a/src/layout/card/grid/context/NitroCardGridContext.tsx b/src/layout/card/grid/context/NitroCardGridContext.tsx
deleted file mode 100644
index 18661b76..00000000
--- a/src/layout/card/grid/context/NitroCardGridContext.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { createContext, FC, useContext } from 'react';
-import { INitroCardGridContext, NitroCardGridContextProps } from './NitroCardGridContext.types';
-
-const NitroCardGridContext = createContext<INitroCardGridContext>({
-    theme: null
-});
-
-export const NitroCardGridContextProvider: FC<NitroCardGridContextProps> = props =>
-{
-    return <NitroCardGridContext.Provider value={ props.value }>{ props.children }</NitroCardGridContext.Provider>
-}
-
-export const useNitroCardGridContext = () => useContext(NitroCardGridContext);
diff --git a/src/layout/card/grid/context/NitroCardGridContext.types.ts b/src/layout/card/grid/context/NitroCardGridContext.types.ts
deleted file mode 100644
index a0f97c95..00000000
--- a/src/layout/card/grid/context/NitroCardGridContext.types.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { ProviderProps } from 'react';
-
-export interface INitroCardGridContext
-{
-    theme: string;
-}
-
-export interface NitroCardGridContextProps extends ProviderProps<INitroCardGridContext>
-{
-
-}
diff --git a/src/layout/card/grid/context/index.ts b/src/layout/card/grid/context/index.ts
deleted file mode 100644
index 9e3f79e8..00000000
--- a/src/layout/card/grid/context/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './NitroCardGridContext';
-export * from './NitroCardGridContext.types';
diff --git a/src/layout/card/grid/index.ts b/src/layout/card/grid/index.ts
index 4b3dea50..8a191eec 100644
--- a/src/layout/card/grid/index.ts
+++ b/src/layout/card/grid/index.ts
@@ -1,4 +1,3 @@
-export * from './context';
 export * from './item';
 export * from './NitroCardGridView';
 export * from './NitroCardGridView.types';
diff --git a/src/layout/card/grid/item/NitroCardGridItemView.scss b/src/layout/card/grid/item/NitroCardGridItemView.scss
index b2959864..ab6ad600 100644
--- a/src/layout/card/grid/item/NitroCardGridItemView.scss
+++ b/src/layout/card/grid/item/NitroCardGridItemView.scss
@@ -1,86 +1,48 @@
-.grid-item-container {
+.grid-item {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     height: 50px;
     max-height: 50px;
+    width: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    border-radius: $border-radius;
+    border-color: $grid-border-color !important;
+    background-color: $grid-bg-color;
+    border: nth(map-values($border-widths), 2) solid;
 
-    .grid-item {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        position: relative;
-        width: 100%;
-        height: 100%;
-        background-position: center;
-        background-repeat: no-repeat;
-        overflow: hidden;
+    &.active {
+        border-color: $grid-active-border-color !important;
+        background-color: $grid-active-bg-color !important;
+    }
 
-        &.theme-default {
-            border-radius: $border-radius;
-            border-color: $grid-border-color !important;
-            background-color: $grid-bg-color;
-            border: nth(map-values($border-widths), 2) solid;
-        }
+    &.unseen {
+        background-color: rgba($success, 0.4);
+    }
 
-        &.theme-shadowed {
-            border-radius: $border-radius;
-            background-color: $light;
+    .badge {
+        top: 2px;
+        right: 2px;
+        font-size: 8px;
+    }
 
-            &::after {
-                position: absolute;
-                content: '';
-                top: 0;
-                bottom: 0;
-                left: 0;
-                right: 0;
-                border-radius: $border-radius;
-                border-bottom: 2px solid white;
-                border-right: 2px solid white;
-                box-shadow: -2px -2px rgba(0, 0, 0, .4), inset 3px 3px rgba(0, 0, 0, .2);
-            }
+    .avatar-image {
+        background-position-y: 10px;
+    }
 
-            &.active {
-                border: nth(map-values($border-widths), 2) solid;
-                border-color: $oslo-gray !important;
-                background-color: #F5F5F5;
+    .trade-button {
+        position: absolute;
+        bottom: 2px;
+        right: 2px;
+        font-size: 5px;
+        padding: 3px;
+        min-height: unset;
 
-                &:after {
-                    content: unset;
-                }
-            }
-        }
-    
-        &.active {
-            border-color: $grid-active-border-color !important;
-            background-color: $grid-active-bg-color !important;
-        }
-
-        &.unseen {
-            background-color: rgba($success, 0.4);
-        }
-    
-        .badge {
-            top: 2px;
-            right: 2px;
-            font-size: 8px;
-        }
-
-        .avatar-image {
-            background-position: center;
-            background-repeat: no-repeat;
-            background-position-y: 12px !important;
-        }
-
-        .trade-button {
-            position: absolute;
-            bottom: 2px;
-            right: 2px;
-            font-size: 5px;
-            padding: 3px;
-            min-height: unset;
-
-            &.left {
-                right: unset;
-                left: 2px;
-            }
+        &.left {
+            right: unset;
+            left: 2px;
         }
     }
 }
diff --git a/src/layout/card/grid/item/NitroCardGridItemView.tsx b/src/layout/card/grid/item/NitroCardGridItemView.tsx
index a1e4b253..3bc431ef 100644
--- a/src/layout/card/grid/item/NitroCardGridItemView.tsx
+++ b/src/layout/card/grid/item/NitroCardGridItemView.tsx
@@ -1,27 +1,50 @@
-import { FC } from 'react';
+import { FC, useMemo } from 'react';
 import { LimitedEditionStyledNumberView } from '../../../../views/shared/limited-edition/styled-number/LimitedEditionStyledNumberView';
-import { useNitroCardGridContext } from '../context';
-import { NitroCardGridThemes } from '../NitroCardGridView.types';
 import { NitroCardGridItemViewProps } from './NitroCardGridItemView.types';
 
 export const NitroCardGridItemView: FC<NitroCardGridItemViewProps> = props =>
 {
-    const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemUnique = false, itemUniqueNumber = 0, itemUnseen = false, columns = undefined, className = '', style = {}, children = null, ...rest } = props;
-    const { theme = NitroCardGridThemes.THEME_DEFAULT } = useNitroCardGridContext();
+    const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemUniqueNumber = -2, itemUnseen = false, className = '', style = {}, children = null, ...rest } = props;
 
-    const imageUrl = `url(${ itemImage })`;
+    const getClassName = useMemo(() =>
+    {
+        let newClassName = 'grid-item gap-1 cursor-pointer overflow-hidden';
+
+        if(itemActive) newClassName += ' active';
+
+        if(itemUniqueNumber === -1) newClassName += ' unique-item sold-out';
+
+        if(itemUniqueNumber > 0) newClassName += ' unique-item';
+
+        if(itemUnseen) newClassName += ' unseen';
+
+        if(itemImage === null) newClassName += ' icon loading-icon';
+
+        if(className && className.length) newClassName += ' ' + className;
+
+        return newClassName;
+    }, [ className, itemActive, itemUniqueNumber, itemUnseen, itemImage ]);
+
+    const getStyle = useMemo(() =>
+    {
+        const newStyle = { ...style };
+
+        if(itemImage) newStyle.backgroundImage = `url(${ itemImage })`;
+
+        if(itemColor) newStyle.backgroundColor = itemColor;
+
+        return newStyle;
+    }, [ style, itemImage, itemColor ]);
 
     return (
-        <div className={ `${ columns === undefined ? 'col' : ('col-' + columns) } pb-1 grid-item-container` }>
-            <div className={ `grid-item ${ theme } cursor-pointer${ itemActive ? ' active' : '' }${ itemUnique ? ' unique-item' : '' }${ itemUnseen ? ' unseen' : ''}${ (itemImage === null ? ' icon loading-icon': '')} ${ className || '' }` } style={ itemImage ? { ...style, backgroundImage: imageUrl } : (itemColor ? { ...style, backgroundColor: itemColor } : style) } { ...rest }>
-                { (itemCount > 1) &&
-                    <span className="position-absolute badge border bg-danger px-1 rounded-circle">{ itemCount }</span> }
-                { itemUnique && 
-                    <div className="position-absolute unique-item-counter">
-                        <LimitedEditionStyledNumberView value={ itemUniqueNumber } />
-                    </div> }
-                { children }
-            </div>
+        <div className={ getClassName } style={ getStyle } { ...rest }>
+            { (itemCount > 1) &&
+                <span className="position-absolute badge border bg-danger px-1 rounded-circle">{ itemCount }</span> }
+            { (itemUniqueNumber > 0) && 
+                <div className="position-absolute unique-item-counter">
+                    <LimitedEditionStyledNumberView value={ itemUniqueNumber } />
+                </div> }
+            { children }
         </div>
     );
 }
diff --git a/src/layout/card/grid/item/NitroCardGridItemView.types.ts b/src/layout/card/grid/item/NitroCardGridItemView.types.ts
index bf005811..97861569 100644
--- a/src/layout/card/grid/item/NitroCardGridItemView.types.ts
+++ b/src/layout/card/grid/item/NitroCardGridItemView.types.ts
@@ -6,8 +6,6 @@ export interface NitroCardGridItemViewProps extends DetailsHTMLAttributes<HTMLDi
     itemColor?: string;
     itemActive?: boolean;
     itemCount?: number;
-    itemUnique?: boolean;
     itemUniqueNumber?: number;
     itemUnseen?: boolean;
-    columns?: number;
 }
diff --git a/src/layout/common/NitroLayoutButtonSize.type.ts b/src/layout/common/NitroLayoutButtonSize.type.ts
new file mode 100644
index 00000000..06e59028
--- /dev/null
+++ b/src/layout/common/NitroLayoutButtonSize.type.ts
@@ -0,0 +1 @@
+export type NitroLayoutButtonSize = 'sm' | 'lg';
diff --git a/src/layout/common/NitroLayoutColumns.type.ts b/src/layout/common/NitroLayoutColumns.type.ts
new file mode 100644
index 00000000..242c622d
--- /dev/null
+++ b/src/layout/common/NitroLayoutColumns.type.ts
@@ -0,0 +1 @@
+export type NitroLayoutColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
diff --git a/src/layout/common/NitroLayoutOverflow.type.ts b/src/layout/common/NitroLayoutOverflow.type.ts
new file mode 100644
index 00000000..0ee52c0f
--- /dev/null
+++ b/src/layout/common/NitroLayoutOverflow.type.ts
@@ -0,0 +1 @@
+export type NitroLayoutOverflow = 'hidden' | 'auto';
diff --git a/src/layout/common/NitroLayoutPosition.type.ts b/src/layout/common/NitroLayoutPosition.type.ts
new file mode 100644
index 00000000..41f7dd67
--- /dev/null
+++ b/src/layout/common/NitroLayoutPosition.type.ts
@@ -0,0 +1 @@
+export type NitroLayoutPosition = 'static' | 'relative' | 'fixed' | 'absolute' | 'sticky';
diff --git a/src/layout/common/NitroLayoutSpacing.type.ts b/src/layout/common/NitroLayoutSpacing.type.ts
new file mode 100644
index 00000000..96e53311
--- /dev/null
+++ b/src/layout/common/NitroLayoutSpacing.type.ts
@@ -0,0 +1 @@
+export type NitroLayoutSpacing = 1 | 2 | 3 | 4 | 5;
diff --git a/src/layout/common/NitroLayoutVariant.type.ts b/src/layout/common/NitroLayoutVariant.type.ts
new file mode 100644
index 00000000..69c4699a
--- /dev/null
+++ b/src/layout/common/NitroLayoutVariant.type.ts
@@ -0,0 +1 @@
+export type NitroLayoutVariant = 'primary' | 'success' | 'danger';
diff --git a/src/layout/common/index.ts b/src/layout/common/index.ts
new file mode 100644
index 00000000..d5d007cc
--- /dev/null
+++ b/src/layout/common/index.ts
@@ -0,0 +1,6 @@
+export * from './NitroLayoutButtonSize.type';
+export * from './NitroLayoutColumns.type';
+export * from './NitroLayoutOverflow.type';
+export * from './NitroLayoutPosition.type';
+export * from './NitroLayoutSpacing.type';
+export * from './NitroLayoutVariant.type';
diff --git a/src/layout/flex-column/NitroLayoutFlexColumn.tsx b/src/layout/flex-column/NitroLayoutFlexColumn.tsx
new file mode 100644
index 00000000..7301b619
--- /dev/null
+++ b/src/layout/flex-column/NitroLayoutFlexColumn.tsx
@@ -0,0 +1,19 @@
+import { FC, useMemo } from 'react';
+import { NitroLayoutFlex } from '../flex/NitroLayoutFlex';
+import { NitroLayoutFlexColumnProps } from './NitroLayoutFlexColumn.types';
+
+export const NitroLayoutFlexColumn: FC<NitroLayoutFlexColumnProps> = props =>
+{
+    const { className = '', ...rest } = props;
+
+    const getClassName = useMemo(() =>
+    {
+        let newClassName = 'flex-column';
+
+        if(className && className.length) newClassName += ` ${ className }`;
+
+        return newClassName;
+    }, [ className ]);
+
+    return <NitroLayoutFlex className={ getClassName } { ...rest } />;
+}
diff --git a/src/layout/flex-column/NitroLayoutFlexColumn.types.ts b/src/layout/flex-column/NitroLayoutFlexColumn.types.ts
new file mode 100644
index 00000000..96ab418d
--- /dev/null
+++ b/src/layout/flex-column/NitroLayoutFlexColumn.types.ts
@@ -0,0 +1,6 @@
+import { NitroLayoutFlexProps } from '../flex/NitroLayoutFlex.types';
+
+export interface NitroLayoutFlexColumnProps extends NitroLayoutFlexProps
+{
+    
+}
diff --git a/src/layout/flex-column/index.ts b/src/layout/flex-column/index.ts
new file mode 100644
index 00000000..4ef3d667
--- /dev/null
+++ b/src/layout/flex-column/index.ts
@@ -0,0 +1,2 @@
+export * from './NitroLayoutFlexColumn';
+export * from './NitroLayoutFlexColumn.types';
diff --git a/src/layout/flex/NitroLayoutFlex.tsx b/src/layout/flex/NitroLayoutFlex.tsx
new file mode 100644
index 00000000..00e83a0a
--- /dev/null
+++ b/src/layout/flex/NitroLayoutFlex.tsx
@@ -0,0 +1,19 @@
+import { FC, useMemo } from 'react';
+import { NitroLayoutBase } from '../base/NitroLayoutBase';
+import { NitroLayoutFlexProps } from './NitroLayoutFlex.types';
+
+export const NitroLayoutFlex: FC<NitroLayoutFlexProps> = props =>
+{
+    const { className = '', ...rest } = props;
+
+    const getClassName = useMemo(() =>
+    {
+        let newClassName = 'd-flex';
+
+        if(className && className.length) newClassName += ` ${ className }`;
+
+        return newClassName;
+    }, [ className ]);
+
+    return <NitroLayoutBase className={ getClassName } { ...rest } />;
+}
diff --git a/src/layout/flex/NitroLayoutFlex.types.ts b/src/layout/flex/NitroLayoutFlex.types.ts
new file mode 100644
index 00000000..25a3818c
--- /dev/null
+++ b/src/layout/flex/NitroLayoutFlex.types.ts
@@ -0,0 +1,6 @@
+import { NitroLayoutBaseProps } from '../base/NitroLayoutBase.types';
+
+export interface NitroLayoutFlexProps extends NitroLayoutBaseProps
+{
+    
+}
diff --git a/src/layout/flex/index.ts b/src/layout/flex/index.ts
new file mode 100644
index 00000000..9d9dd4c9
--- /dev/null
+++ b/src/layout/flex/index.ts
@@ -0,0 +1,2 @@
+export * from './NitroLayoutFlex';
+export * from './NitroLayoutFlex.types';
diff --git a/src/layout/grid/NitroLayoutGrid.tsx b/src/layout/grid/NitroLayoutGrid.tsx
new file mode 100644
index 00000000..531e3b3c
--- /dev/null
+++ b/src/layout/grid/NitroLayoutGrid.tsx
@@ -0,0 +1,19 @@
+import { FC, useMemo } from 'react';
+import { NitroLayoutBase } from '../base';
+import { NitroLayoutGridProps } from './NitroLayoutGrid.types';
+
+export const NitroLayoutGrid: FC<NitroLayoutGridProps> = props =>
+{
+    const { className = '', gap = 3, ...rest } = props;
+
+    const getClassName = useMemo(() =>
+    {
+        let newClassName = 'grid h-100';
+
+        if(className && className.length) newClassName += ' ' + className;
+
+        return newClassName;
+    }, [ className ]);
+
+    return <NitroLayoutBase className={ getClassName } gap={ gap } { ...rest }  />;
+}
diff --git a/src/layout/grid/NitroLayoutGrid.types.ts b/src/layout/grid/NitroLayoutGrid.types.ts
new file mode 100644
index 00000000..537d9003
--- /dev/null
+++ b/src/layout/grid/NitroLayoutGrid.types.ts
@@ -0,0 +1,6 @@
+import { NitroLayoutBaseProps } from '../base';
+
+export interface NitroLayoutGridProps extends NitroLayoutBaseProps
+{
+    
+}
diff --git a/src/layout/grid/column/NitroLayoutGridColumn.tsx b/src/layout/grid/column/NitroLayoutGridColumn.tsx
new file mode 100644
index 00000000..f169ca09
--- /dev/null
+++ b/src/layout/grid/column/NitroLayoutGridColumn.tsx
@@ -0,0 +1,19 @@
+import { FC, useMemo } from 'react';
+import { NitroLayoutFlexColumn } from '../../flex-column/NitroLayoutFlexColumn';
+import { NitroLayoutGridColumnProps } from './NitroLayoutGridColumn.types';
+
+export const NitroLayoutGridColumn: FC<NitroLayoutGridColumnProps> = props =>
+{
+    const { className = '', size = 12, gap = 3, ...rest } = props;
+
+    const getClassName = useMemo(() =>
+    {
+        let newClassName = `g-col-${ size }`;
+
+        if(className && className.length) newClassName += ' ' + className;
+
+        return newClassName;
+    }, [ className, size ]);
+
+    return <NitroLayoutFlexColumn className={ getClassName } gap={ gap } overflow="auto" { ...rest } />
+}
diff --git a/src/layout/grid/column/NitroLayoutGridColumn.types.ts b/src/layout/grid/column/NitroLayoutGridColumn.types.ts
new file mode 100644
index 00000000..c88c3fb0
--- /dev/null
+++ b/src/layout/grid/column/NitroLayoutGridColumn.types.ts
@@ -0,0 +1,8 @@
+import { NitroLayoutColumns, NitroLayoutSpacing } from '../../common';
+import { NitroLayoutFlexColumnProps } from '../../flex-column/NitroLayoutFlexColumn.types';
+
+export interface NitroLayoutGridColumnProps extends NitroLayoutFlexColumnProps
+{
+    size?: NitroLayoutColumns;
+    gap?: NitroLayoutSpacing;
+}
diff --git a/src/layout/grid/column/index.ts b/src/layout/grid/column/index.ts
new file mode 100644
index 00000000..a613fa34
--- /dev/null
+++ b/src/layout/grid/column/index.ts
@@ -0,0 +1,2 @@
+export * from './NitroLayoutGridColumn';
+export * from './NitroLayoutGridColumn.types';
diff --git a/src/layout/grid/index.ts b/src/layout/grid/index.ts
new file mode 100644
index 00000000..48709bda
--- /dev/null
+++ b/src/layout/grid/index.ts
@@ -0,0 +1,3 @@
+export * from './column';
+export * from './NitroLayoutGrid';
+export * from './NitroLayoutGrid.types';
diff --git a/src/layout/index.ts b/src/layout/index.ts
index 81e87964..2859e2a3 100644
--- a/src/layout/index.ts
+++ b/src/layout/index.ts
@@ -1,6 +1,12 @@
+export * from './button';
 export * from './card';
+export * from './common';
 export * from './draggable-window';
+export * from './flex';
+export * from './flex-column';
 export * from './gift-card';
+export * from './grid';
+export * from './loading-habbos';
 export * from './loading-spinner';
 export * from './mini-camera';
 export * from './notification-alert';
diff --git a/src/layout/loading-habbos/index.ts b/src/layout/loading-habbos/index.ts
new file mode 100644
index 00000000..2b36c9c4
--- /dev/null
+++ b/src/layout/loading-habbos/index.ts
@@ -0,0 +1 @@
+export * from './LoadingHabbosView';
diff --git a/src/views/achievements/AchievementsView.scss b/src/views/achievements/AchievementsView.scss
index fa6343fb..f9f69f5d 100644
--- a/src/views/achievements/AchievementsView.scss
+++ b/src/views/achievements/AchievementsView.scss
@@ -1,6 +1,7 @@
 .nitro-achievements {
-    width: 650px;
-    
+    width: $achievement-width;
+    height: $achievement-height;
+
     .score {
         border-color: $grid-border-color !important;
         background-color: $grid-bg-color;
diff --git a/src/views/avatar-editor/AvatarEditorView.scss b/src/views/avatar-editor/AvatarEditorView.scss
index 8c2f6b0d..d0704723 100644
--- a/src/views/avatar-editor/AvatarEditorView.scss
+++ b/src/views/avatar-editor/AvatarEditorView.scss
@@ -1,10 +1,6 @@
 .nitro-avatar-editor {
-    width: 620px;
-
-    .content-area {
-        min-height: 300px;
-        height: 300px;
-    }
+    width: $avatar-editor-width;
+    height: $avatar-editor-height;
 
     .category-item {
         height: 40px;
@@ -82,6 +78,37 @@
 
     .wardrobe-grid {
 
+        .grid-item {
+            height: 140px;
+            max-height: 140px;
+            background-color: $ghost;
+
+            &:after {
+                position: absolute;
+                content: '';
+                top: 75%;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                border-radius: 50%;
+                background-color: $gray-chateau;
+                box-shadow: 0 0 8px 2px rgba($white,.6);
+                transform: scale(2);
+            }
+
+            .avatar-image {
+                position: absolute;
+                bottom: 0;
+                background-position-y: -23px !important;
+                z-index: 4;
+            }
+
+            .figure-button-container {
+                background-color: $gray-chateau;
+                z-index: 3;
+            }
+        }
+
         .grid-item-container {
             height: 142px !important;
             max-height: 142px !important;
diff --git a/src/views/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx b/src/views/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx
index c97fffdd..f664453c 100644
--- a/src/views/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx
+++ b/src/views/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx
@@ -1,6 +1,5 @@
 import { FC, useCallback } from 'react';
 import { NitroCardGridView } from '../../../../layout/card/grid/NitroCardGridView';
-import { NitroCardGridThemes } from '../../../../layout/card/grid/NitroCardGridView.types';
 import { AvatarEditorGridPartItem } from '../../common/AvatarEditorGridPartItem';
 import { AvatarEditorFigureSetItemView } from '../figure-set-item/AvatarEditorFigureSetItemView';
 import { AvatarEditorFigureSetViewProps } from './AvatarEditorFigureSetView.types';
@@ -23,7 +22,7 @@ export const AvatarEditorFigureSetView: FC<AvatarEditorFigureSetViewProps> = pro
     }, [ model, category, setMaxPaletteCount ]);
 
     return (
-        <NitroCardGridView columns={ 3 } theme={ NitroCardGridThemes.THEME_SHADOWED }>
+        <NitroCardGridView columns={ 3 }>
             { (category.parts.length > 0) && category.parts.map((item, index) =>
                 {
                     return <AvatarEditorFigureSetItemView key={ index } partItem={ item } onClick={ selectPart } />;
diff --git a/src/views/avatar-editor/views/model/AvatarEditorModelView.tsx b/src/views/avatar-editor/views/model/AvatarEditorModelView.tsx
index 68e1645b..7bce299c 100644
--- a/src/views/avatar-editor/views/model/AvatarEditorModelView.tsx
+++ b/src/views/avatar-editor/views/model/AvatarEditorModelView.tsx
@@ -71,7 +71,7 @@ export const AvatarEditorModelView: FC<AvatarEditorModelViewProps> = props =>
             <div className="col-5 d-flex flex-column h-100">
                 <AvatarEditorFigureSetView model={ model } category={ activeCategory } setMaxPaletteCount={ setMaxPaletteCount } />
             </div>
-            <div className="col-5 d-flex flex-column h-100">
+            <div className="col-5 d-flex flex-column h-100 gap-2">
                 { (maxPaletteCount >= 1) &&
                     <AvatarEditorPaletteSetView model={ model } category={ activeCategory } paletteSet={ activeCategory.getPalette(0) } paletteIndex={ 0 } /> }
                 { (maxPaletteCount === 2) &&
diff --git a/src/views/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx b/src/views/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx
index 65c2968f..8b32c044 100644
--- a/src/views/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx
+++ b/src/views/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx
@@ -1,6 +1,5 @@
 import { FC, useCallback } from 'react';
 import { NitroCardGridView } from '../../../../layout/card/grid/NitroCardGridView';
-import { NitroCardGridThemes } from '../../../../layout/card/grid/NitroCardGridView.types';
 import { AvatarEditorGridColorItem } from '../../common/AvatarEditorGridColorItem';
 import { AvatarEditorPaletteSetItem } from '../palette-set-item/AvatarEditorPaletteSetItem';
 import { AvatarEditorPaletteSetViewProps } from './AvatarEditorPaletteSetView.types';
@@ -19,7 +18,7 @@ export const AvatarEditorPaletteSetView: FC<AvatarEditorPaletteSetViewProps> = p
     }, [ model, category, paletteSet, paletteIndex ]);
 
     return (
-        <NitroCardGridView columns={ 4 } theme={ NitroCardGridThemes.THEME_SHADOWED } { ...rest }>
+        <NitroCardGridView columns={ 4 } { ...rest }>
             { (paletteSet.length > 0) && paletteSet.map((item, index) =>
                 {
                     return <AvatarEditorPaletteSetItem key={ index } colorItem={ item } onClick={ event => selectColor(item) } />;
diff --git a/src/views/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.tsx b/src/views/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.tsx
index fd0e756b..f6c4e68d 100644
--- a/src/views/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.tsx
+++ b/src/views/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.tsx
@@ -5,7 +5,6 @@ import { GetAvatarRenderManager, GetSessionDataManager } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks';
 import { NitroCardGridItemView } from '../../../../layout/card/grid/item/NitroCardGridItemView';
 import { NitroCardGridView } from '../../../../layout/card/grid/NitroCardGridView';
-import { NitroCardGridThemes } from '../../../../layout/card/grid/NitroCardGridView.types';
 import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
 import { CurrencyIcon } from '../../../shared/currency-icon/CurrencyIcon';
 import { AvatarEditorWardrobeViewProps } from './AvatarEditorWardrobeView.types';
@@ -68,7 +67,7 @@ export const AvatarEditorWardrobeView: FC<AvatarEditorWardrobeViewProps> = props
     return (
         <div className="row h-100">
             <div className="col-12 d-flex h-100">
-                <NitroCardGridView className="wardrobe-grid" columns={ 5 } theme={ NitroCardGridThemes.THEME_DEFAULT }>
+                <NitroCardGridView className="wardrobe-grid" columns={ 5 }>
                     { figures }
                 </NitroCardGridView>
             </div>
diff --git a/src/views/catalog/CatalogView.scss b/src/views/catalog/CatalogView.scss
index 4061767a..ec71c0ad 100644
--- a/src/views/catalog/CatalogView.scss
+++ b/src/views/catalog/CatalogView.scss
@@ -1,11 +1,6 @@
 .nitro-catalog {
-    width: 620px;
-
-    .content-area {
-        min-height: 350px;
-        height: 350px;
-        resize: vertical;
-    }
+    width: $catalog-width;
+    height: $catalog-height;
 
     font[size="16"] {
         font-size: 20px;
diff --git a/src/views/catalog/CatalogView.tsx b/src/views/catalog/CatalogView.tsx
index d69eb842..ec06d572 100644
--- a/src/views/catalog/CatalogView.tsx
+++ b/src/views/catalog/CatalogView.tsx
@@ -205,7 +205,7 @@ export const CatalogView: FC<CatalogViewProps> = props =>
                     <NitroCardContentView>
                         <div className="row h-100">
                             { currentNavigationPage && !navigationHidden &&
-                                <div className="col-3 d-flex flex-column h-100">
+                                <div className="col-3 h-100">
                                     <CatalogNavigationView page={ currentNavigationPage } pendingTree={ pendingTree } setPendingTree={ setPendingTree } />
                                 </div> }
                             <div className="col h-100">
diff --git a/src/views/catalog/common/AttemptCatalogPlacement.ts b/src/views/catalog/common/AttemptCatalogPlacement.ts
new file mode 100644
index 00000000..af342ee3
--- /dev/null
+++ b/src/views/catalog/common/AttemptCatalogPlacement.ts
@@ -0,0 +1,30 @@
+import { CatalogPageMessageOfferData, RoomObjectCategory, RoomObjectPlacementSource } from '@nitrots/nitro-renderer';
+import { GetRoomEngine } from '../../../api';
+import { IsCatalogOfferDraggable } from './IsCatalogOfferDraggable';
+import { ProductTypeEnum } from './ProductTypeEnum';
+
+export const AttemptCatalogPlacement = (offer: CatalogPageMessageOfferData) =>
+{
+    if(!IsCatalogOfferDraggable(offer)) return;
+
+    const product = offer.products[0];
+
+    let category: number = -1;
+
+    switch(product.productType)
+    {
+        case ProductTypeEnum.FLOOR:
+            category = RoomObjectCategory.FLOOR;
+            break;
+        case ProductTypeEnum.WALL:
+            category = RoomObjectCategory.WALL;
+            break;
+    }
+
+    if(category === -1) return;
+
+    if(GetRoomEngine().processRoomObjectPlacement(RoomObjectPlacementSource.CATALOG, -(offer.offerId), category, product.furniClassId, (product.extraParam) ? product.extraParam.toString() : null))
+    {
+        
+    }
+}
diff --git a/src/views/catalog/common/GetProuductIconUrl.ts b/src/views/catalog/common/GetProuductIconUrl.ts
new file mode 100644
index 00000000..c775dd37
--- /dev/null
+++ b/src/views/catalog/common/GetProuductIconUrl.ts
@@ -0,0 +1,47 @@
+import { FurnitureType } from '@nitrots/nitro-renderer';
+import { GetConfiguration, GetRoomEngine, GetSessionDataManager } from '../../../api';
+
+export const GetProductIconUrl = (furniClassId: number, productType: string, customParams: string = null) =>
+{
+    switch(productType.toUpperCase())
+    {
+        case FurnitureType.BADGE:
+            return GetSessionDataManager().getBadgeUrl(customParams);
+        case FurnitureType.ROBOT:
+            return undefined;
+        case FurnitureType.FLOOR:
+            return GetRoomEngine().getFurnitureFloorIconUrl(furniClassId);
+        case FurnitureType.WALL: {
+            const furniData = GetSessionDataManager().getWallItemData(furniClassId);
+            
+            let iconName = '';
+
+            if(furniData)
+            {
+                switch(furniData.className)
+                {
+                    case 'floor':
+                        iconName = [ 'th', furniData.className, customParams ].join('_');
+                        break;
+                    case 'wallpaper':
+                        iconName = [ 'th', 'wall', customParams ].join('_');
+                        break;
+                    case 'landscape':
+                        iconName = [ 'th', furniData.className, customParams.replace('.', '_'), '001' ].join('_');
+                        break;
+                }
+
+                if(iconName !== '')
+                {
+                    const assetUrl = GetConfiguration<string>('catalog.asset.url');
+
+                    return `${ assetUrl }/${ iconName }.png`;
+                }
+            }
+
+            return GetRoomEngine().getFurnitureWallIconUrl(furniClassId, customParams);
+        }
+    }
+
+    return null;
+}
diff --git a/src/views/catalog/common/IsCatalogOfferDraggable.ts b/src/views/catalog/common/IsCatalogOfferDraggable.ts
new file mode 100644
index 00000000..174ce4d0
--- /dev/null
+++ b/src/views/catalog/common/IsCatalogOfferDraggable.ts
@@ -0,0 +1,8 @@
+import { CatalogPageMessageOfferData, RoomControllerLevel } from '@nitrots/nitro-renderer';
+import { GetRoomSession } from '../../../api';
+import { ProductTypeEnum } from './ProductTypeEnum';
+
+export const IsCatalogOfferDraggable = (offer: CatalogPageMessageOfferData) =>
+{
+    return ((GetRoomSession().isRoomOwner || (GetRoomSession().isGuildRoom && (GetRoomSession().controllerLevel >= RoomControllerLevel.GUILD_MEMBER))) && (offer.products.length === 1) && (offer.products[0].productType !== ProductTypeEnum.EFFECT) && (offer.products[0].productType !== ProductTypeEnum.HABBO_CLUB))
+}
diff --git a/src/views/catalog/views/CatalogViews.scss b/src/views/catalog/views/CatalogViews.scss
index 0a5f6295..f6973ade 100644
--- a/src/views/catalog/views/CatalogViews.scss
+++ b/src/views/catalog/views/CatalogViews.scss
@@ -1,5 +1,4 @@
 @import './catalog-icon/CatalogIconView';
+@import './gift/CatalogGiftView';
 @import './navigation/CatalogNavigationView';
 @import './page/CatalogPageView';
-@import './search/CatalogSearchView';
-@import './gift/CatalogGiftView';
diff --git a/src/views/catalog/views/gift/CatalogGiftView.scss b/src/views/catalog/views/gift/CatalogGiftView.scss
index 9f43a086..db61d248 100644
--- a/src/views/catalog/views/gift/CatalogGiftView.scss
+++ b/src/views/catalog/views/gift/CatalogGiftView.scss
@@ -1,4 +1,5 @@
 .nitro-catalog-gift {
+    width: 325px;
     
     .gift-preview {
         width: 80px;
diff --git a/src/views/catalog/views/navigation/CatalogNavigationView.scss b/src/views/catalog/views/navigation/CatalogNavigationView.scss
index e094aaac..cd6cc820 100644
--- a/src/views/catalog/views/navigation/CatalogNavigationView.scss
+++ b/src/views/catalog/views/navigation/CatalogNavigationView.scss
@@ -1,11 +1,21 @@
-.nitro-catalog-navigation {
-    border-color: $grid-border-color !important;
-    background-color: $grid-bg-color !important;
+.nitro-catalog-navigation-grid {
+    border-radius: 0.25rem;
+    border-color: #B6BEC5 !important;
+    background-color: #CDD3D9;
+    border: 2px solid;
 
-    .navigation-container {
-        overflow-y: auto;
+    .grid-item {
+        font-size: $font-size-sm;
+        height: 23px !important;
+        border-color: unset !important;
+        background-color: #CDD3D9;
+        border: 0 !important;
+        padding: 1px 3px;
+
+        i.fas {
+            color: $black;
+            font-size: 10px;
+            padding: 1px;
+        }
     }
 }
-
-@import './item/CatalogNavigationItemView';
-@import './set/CatalogNavigationSetView';
diff --git a/src/views/catalog/views/navigation/CatalogNavigationView.tsx b/src/views/catalog/views/navigation/CatalogNavigationView.tsx
index ac636961..cb8efe9c 100644
--- a/src/views/catalog/views/navigation/CatalogNavigationView.tsx
+++ b/src/views/catalog/views/navigation/CatalogNavigationView.tsx
@@ -1,5 +1,6 @@
 import { INodeData } from '@nitrots/nitro-renderer';
 import { FC, useEffect } from 'react';
+import { NitroCardGridView } from '../../../../layout';
 import { CatalogSearchView } from '../search/CatalogSearchView';
 import { CatalogNavigationViewProps } from './CatalogNavigationView.types';
 import { CatalogNavigationSetView } from './set/CatalogNavigationSetView';
@@ -23,13 +24,15 @@ export const CatalogNavigationView: FC<CatalogNavigationViewProps> = props =>
     }, [ page ]);
     
     return (
-        <>
-            <CatalogSearchView />
-            <div className="border border-2 rounded overflow-hidden nitro-catalog-navigation p-1 h-100">
-                <div className="navigation-container h-100">
-                    <CatalogNavigationSetView page={ page } isFirstSet={ true } pendingTree={ pendingTree } setPendingTree={ setPendingTree } />
+        <div className="row h-100">
+            <div className="d-flex flex-column col gap-2 h-100">
+                <CatalogSearchView />
+                <div className="d-flex flex-column overflow-hidden nitro-catalog-navigation-grid p-1 h-100">
+                    <NitroCardGridView columns={ 1 } gap={ 1 }>
+                        <CatalogNavigationSetView page={ page } isFirstSet={ true } pendingTree={ pendingTree } setPendingTree={ setPendingTree } />
+                    </NitroCardGridView>
                 </div>
             </div>
-        </>
+        </div>
     );
 }
diff --git a/src/views/catalog/views/navigation/item/CatalogNavigationItemView.scss b/src/views/catalog/views/navigation/item/CatalogNavigationItemView.scss
deleted file mode 100644
index b5adfc1c..00000000
--- a/src/views/catalog/views/navigation/item/CatalogNavigationItemView.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.catalog-navigation-item-container {
-
-    .catalog-navigation-item {
-        font-size: $font-size-sm;
-        border-radius: $border-radius;
-
-        i.fas {
-            color: $black;
-            font-size: 10px;
-            padding: 1px;
-        }
-
-        &.active {
-            padding: 1px 2px;
-            background-color: $grid-active-bg-color;
-        }
-    }
-}
diff --git a/src/views/catalog/views/navigation/item/CatalogNavigationItemView.tsx b/src/views/catalog/views/navigation/item/CatalogNavigationItemView.tsx
index 42344628..f618c0e1 100644
--- a/src/views/catalog/views/navigation/item/CatalogNavigationItemView.tsx
+++ b/src/views/catalog/views/navigation/item/CatalogNavigationItemView.tsx
@@ -1,6 +1,7 @@
 import { GetCatalogPageComposer, INodeData } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { SendMessageHook } from '../../../../../hooks/messages/message-event';
+import { NitroCardGridItemView } from '../../../../../layout';
 import { CatalogMode } from '../../../CatalogView.types';
 import { CatalogIconView } from '../../catalog-icon/CatalogIconView';
 import { ACTIVE_PAGES } from '../CatalogNavigationView';
@@ -70,16 +71,14 @@ export const CatalogNavigationItemView: FC<CatalogNavigationItemViewProps> = pro
     }, [ isActive, page ]);
     
     return (
-        <div className="col pb-1 catalog-navigation-item-container">
-            <div className={ 'd-flex align-items-center cursor-pointer catalog-navigation-item ' + (isActive ? 'active ': '') } onClick={ event => select(page) }>
+        <>
+            <NitroCardGridItemView itemActive={ isActive } onClick={ event => select(page) }>
                 <CatalogIconView icon={ page.icon } />
-                <div className="flex-grow-1 text-black text-truncate px-1">{ page.localization }</div>
+                <div className="flex-grow-1 text-black text-truncate">{ page.localization }</div>
                 { (page.children.length > 0) && <i className={ 'fas fa-caret-' + (isExpanded ? 'up' : 'down') } /> }
-            </div>
+            </NitroCardGridItemView>
             { isActive && isExpanded && page.children && (page.children.length > 0) &&
-                <div className="d-flex flex-column mt-1">
-                    <CatalogNavigationSetView page={ page } pendingTree={ pendingTree } setPendingTree={ setPendingTree } />
-                </div> }
-        </div>
+                <CatalogNavigationSetView page={ page } pendingTree={ pendingTree } setPendingTree={ setPendingTree } /> }
+        </>
     );
 }
diff --git a/src/views/catalog/views/navigation/set/CatalogNavigationSetView.scss b/src/views/catalog/views/navigation/set/CatalogNavigationSetView.scss
deleted file mode 100644
index 56d8034c..00000000
--- a/src/views/catalog/views/navigation/set/CatalogNavigationSetView.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.catalog-navigation-set-container {
-
-    .catalog-navigation-set-container {
-        padding-left: 5px;
-
-        .catalog-navigation-item-container {
-            padding-right: 0px !important;
-        }
-    }
-
-    > :last-child {
-        padding-bottom: 0px !important;
-    }
-}
diff --git a/src/views/catalog/views/navigation/set/CatalogNavigationSetView.tsx b/src/views/catalog/views/navigation/set/CatalogNavigationSetView.tsx
index 966fbfd4..3d6199a1 100644
--- a/src/views/catalog/views/navigation/set/CatalogNavigationSetView.tsx
+++ b/src/views/catalog/views/navigation/set/CatalogNavigationSetView.tsx
@@ -26,13 +26,13 @@ export const CatalogNavigationSetView: FC<CatalogNavigationSetViewProps> = props
     }, [ page, isFirstSet, activeChild, pendingTree ]);
     
     return (
-        <div className="row row-cols-1 g-0 catalog-navigation-set-container w-100">
+        <>
             { page && (page.children.length > 0) && page.children.map((page, index) =>
                 {
                     if(!page.visible) return null;
                     
                     return <CatalogNavigationItemView key={ index } page={ page } isActive={ (activeChild === page) } pendingTree={ pendingTree } setPendingTree={ setPendingTree } setActiveChild={ setActiveChild } />
                 }) }
-        </div>
+        </>
     );
 }
diff --git a/src/views/catalog/views/page-details/CatalogPageDetailsView.tsx b/src/views/catalog/views/page-details/CatalogPageDetailsView.tsx
new file mode 100644
index 00000000..390aed62
--- /dev/null
+++ b/src/views/catalog/views/page-details/CatalogPageDetailsView.tsx
@@ -0,0 +1,19 @@
+import { FC } from 'react';
+import { GetCatalogPageImage, GetCatalogPageText } from '../../common/CatalogUtilities';
+import { CatalogPageDetailsViewProps } from './CatalogPageDetailsView.types';
+
+export const CatalogPageDetailsView: FC<CatalogPageDetailsViewProps> = props =>
+{
+    const { pageParser = null } = props;
+
+    if(!pageParser) return null;
+
+    const imageUrl = GetCatalogPageImage(pageParser, 1);
+
+    return (
+        <div className="d-flex flex-column justify-content-center align-items-center overflow-hidden h-100">
+            { imageUrl && <img className="" alt="" src={ imageUrl } /> }
+            <div className="d-flex flex-column fs-6 text-center text-black lh-sm overflow-auto" dangerouslySetInnerHTML={ { __html: GetCatalogPageText(pageParser, 0) } } />
+        </div>
+    );
+}
diff --git a/src/views/catalog/views/page-details/CatalogPageDetailsView.types.ts b/src/views/catalog/views/page-details/CatalogPageDetailsView.types.ts
new file mode 100644
index 00000000..a02c3b6c
--- /dev/null
+++ b/src/views/catalog/views/page-details/CatalogPageDetailsView.types.ts
@@ -0,0 +1,6 @@
+import { CatalogPageMessageParser } from '@nitrots/nitro-renderer';
+
+export interface CatalogPageDetailsViewProps
+{
+    pageParser: CatalogPageMessageParser;
+}
diff --git a/src/views/catalog/views/page/CatalogPageView.scss b/src/views/catalog/views/page/CatalogPageView.scss
index 7a00d29e..7a24edf7 100644
--- a/src/views/catalog/views/page/CatalogPageView.scss
+++ b/src/views/catalog/views/page/CatalogPageView.scss
@@ -1,6 +1,2 @@
 @import './layout/CatalogLayout';
-@import './offer/CatalogPageOfferView';
-@import './offers/CatalogPageOffersView';
-@import './product/CatalogProductView';
 @import './purchase/CatalogPurchaseView';
-@import './search-result/CatalogLayoutSearchResultView';
diff --git a/src/views/catalog/views/page/layout/CatalogLayout.scss b/src/views/catalog/views/page/layout/CatalogLayout.scss
index ff111f8a..d71c9f8a 100644
--- a/src/views/catalog/views/page/layout/CatalogLayout.scss
+++ b/src/views/catalog/views/page/layout/CatalogLayout.scss
@@ -1,10 +1,3 @@
-@import './badge-display/CatalogLayoutBadgeDisplayView';
-@import './default/CatalogLayoutDefaultView';
 @import './frontpage4/CatalogLayoutFrontpage4View';
-@import './pets/CatalogLayoutPetView';
-@import './pets3/CatalogLayoutPets3View';
-@import './single-bundle/CatalogLayoutSingleBundleView';
-@import './spaces-new/CatalogLayoutSpacesView';
-@import './trophies/CatalogLayoutTrophiesView';
-@import './vip-buy/CatalogLayoutVipBuyView';
 @import './info-loyalty/CatalogLayoutInfoLoyaltyView.scss';
+@import './vip-buy/CatalogLayoutVipBuyView';
diff --git a/src/views/catalog/views/page/layout/badge-display/CatalogLayoutBadgeDisplayView.scss b/src/views/catalog/views/page/layout/badge-display/CatalogLayoutBadgeDisplayView.scss
deleted file mode 100644
index 1229e018..00000000
--- a/src/views/catalog/views/page/layout/badge-display/CatalogLayoutBadgeDisplayView.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.nitro-catalog-layout-badge-display {
-
-    .inventory-badge-grid {
-        height: 200px;
-        max-height: 200px;
-    }
-}
diff --git a/src/views/catalog/views/page/layout/badge-display/CatalogLayoutBadgeDisplayView.tsx b/src/views/catalog/views/page/layout/badge-display/CatalogLayoutBadgeDisplayView.tsx
index 4cb90755..1826c10a 100644
--- a/src/views/catalog/views/page/layout/badge-display/CatalogLayoutBadgeDisplayView.tsx
+++ b/src/views/catalog/views/page/layout/badge-display/CatalogLayoutBadgeDisplayView.tsx
@@ -1,5 +1,5 @@
 import { StringDataType } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../../../api';
 import { InventoryBadgesUpdatedEvent, SetRoomPreviewerStuffDataEvent } from '../../../../../../events';
 import { InventoryBadgesRequestEvent } from '../../../../../../events/inventory/InventoryBadgesRequestEvent';
@@ -7,11 +7,9 @@ import { dispatchUiEvent, useUiEvent } from '../../../../../../hooks';
 import { NitroCardGridItemView } from '../../../../../../layout/card/grid/item/NitroCardGridItemView';
 import { NitroCardGridView } from '../../../../../../layout/card/grid/NitroCardGridView';
 import { BadgeImageView } from '../../../../../shared/badge-image/BadgeImageView';
-import { GetOfferName } from '../../../../common/CatalogUtilities';
 import { useCatalogContext } from '../../../../context/CatalogContext';
-import { CatalogRoomPreviewerView } from '../../../catalog-room-previewer/CatalogRoomPreviewerView';
 import { CatalogPageOffersView } from '../../offers/CatalogPageOffersView';
-import { CatalogPurchaseView } from '../../purchase/CatalogPurchaseView';
+import { CatalogProductPreviewView } from '../../product-preview/CatalogProductPreviewView';
 import { CatalogLayoutBadgeDisplayViewProps } from './CatalogLayoutBadgeDisplayView.types';
 
 export const CatalogLayoutBadgeDisplayView: FC<CatalogLayoutBadgeDisplayViewProps> = props =>
@@ -32,18 +30,6 @@ export const CatalogLayoutBadgeDisplayView: FC<CatalogLayoutBadgeDisplayViewProp
 
     useUiEvent(InventoryBadgesUpdatedEvent.BADGES_UPDATED, onInventoryBadgesUpdatedEvent);
 
-    const badgeElements = useMemo(() =>
-    {
-        return badges.map(code =>
-            {
-                return (
-                    <NitroCardGridItemView key={ code } itemActive={ (currentBadge === code) } onMouseDown={ event => setCurrentBadge(code) }> 
-                        <BadgeImageView badgeCode={ code } />
-                    </NitroCardGridItemView>
-                );
-            });
-    }, [ badges, currentBadge ]);
-
     useEffect(() =>
     {
         dispatchUiEvent(new InventoryBadgesRequestEvent(InventoryBadgesRequestEvent.REQUEST_BADGES));
@@ -67,22 +53,26 @@ export const CatalogLayoutBadgeDisplayView: FC<CatalogLayoutBadgeDisplayViewProp
     }, [ currentBadge, activeOffer, roomPreviewer ]);
 
     return (
-        <div className="row h-100 nitro-catalog-layout-badge-display">
-            <div className="d-flex flex-column col-7 h-100">
-                <CatalogPageOffersView offers={ pageParser.offers } />
-                <div className="d-flex flex-column mt-2">
+        <div className="row h-100">
+            <div className="d-flex flex-column col-7 gap-2 h-100">
+                <CatalogPageOffersView className="flex-shrink-0" offers={ pageParser.offers } />
+                <div className="d-flex flex-column overflow-hidden">
                     <div className="text-black fw-bold">{ LocalizeText('catalog_selectbadge') }</div>
-                    <NitroCardGridView className="inventory-badge-grid">
-                        { badgeElements }
+                    <NitroCardGridView>
+                        { badges && (badges.length > 0) && badges.map(code =>
+                            {
+                                return (
+                                    <NitroCardGridItemView key={ code } itemActive={ (currentBadge === code) } onMouseDown={ event => setCurrentBadge(code) }> 
+                                        <BadgeImageView badgeCode={ code } />
+                                    </NitroCardGridItemView>
+                                );
+                            }) }
                     </NitroCardGridView>
                 </div>
             </div>
-            { product &&
-                <div className="position-relative d-flex flex-column col">
-                    <CatalogRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
-                    <div className="fs-6 text-black mt-1 overflow-hidden">{ GetOfferName(activeOffer) }</div>
-                    <CatalogPurchaseView offer={ activeOffer } pageId={ pageParser.pageId } extra={ currentBadge } disabled={ !currentBadge } />
-                </div> }
+            <div className="position-relative d-flex flex-column col-5">
+                <CatalogProductPreviewView pageParser={ pageParser } activeOffer={ activeOffer } roomPreviewer={ roomPreviewer } extra={ currentBadge } disabled={ !currentBadge } />
+            </div>
         </div>
     );
 }
diff --git a/src/views/catalog/views/page/layout/default/CatalogLayoutDefaultView.scss b/src/views/catalog/views/page/layout/default/CatalogLayoutDefaultView.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/views/catalog/views/page/layout/default/CatalogLayoutDefaultView.tsx b/src/views/catalog/views/page/layout/default/CatalogLayoutDefaultView.tsx
index db599364..86d2bd1b 100644
--- a/src/views/catalog/views/page/layout/default/CatalogLayoutDefaultView.tsx
+++ b/src/views/catalog/views/page/layout/default/CatalogLayoutDefaultView.tsx
@@ -1,10 +1,7 @@
 import { FC } from 'react';
-import { LimitedEditionCompletePlateView } from '../../../../../shared/limited-edition/complete-plate/LimitedEditionCompletePlateView';
-import { GetCatalogPageImage, GetCatalogPageText, GetOfferName } from '../../../../common/CatalogUtilities';
 import { useCatalogContext } from '../../../../context/CatalogContext';
-import { CatalogRoomPreviewerView } from '../../../catalog-room-previewer/CatalogRoomPreviewerView';
 import { CatalogPageOffersView } from '../../offers/CatalogPageOffersView';
-import { CatalogPurchaseView } from '../../purchase/CatalogPurchaseView';
+import { CatalogProductPreviewView } from '../../product-preview/CatalogProductPreviewView';
 import { CatalogLayoutDefaultViewProps } from './CatalogLayoutDefaultView.types';
 
 export const CatalogLayoutDefaultView: FC<CatalogLayoutDefaultViewProps> = props =>
@@ -17,24 +14,12 @@ export const CatalogLayoutDefaultView: FC<CatalogLayoutDefaultViewProps> = props
 
     return (
         <div className="row h-100">
-            <div className="col-7 h-100">
+            <div className="d-flex flex-column col-7 h-100">
                 <CatalogPageOffersView offers={ pageParser.offers } />
             </div>
-            { !product &&
-                <div className="position-relative d-flex flex-column col-5 justify-content-center align-items-center overflow-hidden">
-                    <div className="d-block mb-2">
-                        <img alt="" src={ GetCatalogPageImage(pageParser, 1) } />
-                    </div>
-                    <div className="fs-6 text-center text-black lh-sm overflow-hidden">{ GetCatalogPageText(pageParser, 0) }</div>
-                </div> }
-            { product &&
-                <div className="position-relative d-flex flex-column col-5">
-                    <CatalogRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
-                    { product.uniqueLimitedItem &&
-                        <LimitedEditionCompletePlateView uniqueLimitedItemsLeft={ product.uniqueLimitedItemsLeft } uniqueLimitedSeriesSize={ product.uniqueLimitedSeriesSize } /> }
-                    <div className="fs-6 text-black mt-1 overflow-hidden">{ GetOfferName(activeOffer) }</div>
-                    <CatalogPurchaseView offer={ activeOffer } pageId={ pageParser.pageId } />
-                </div> }
+            <div className="position-relative d-flex flex-column col-5 gap-2 h-100 overflow-hidden">
+                <CatalogProductPreviewView pageParser={ pageParser } activeOffer={ activeOffer } roomPreviewer={ roomPreviewer } />
+            </div>
         </div>
     );
 }
diff --git a/src/views/catalog/views/page/layout/pets/CatalogLayoutPetView.scss b/src/views/catalog/views/page/layout/pets/CatalogLayoutPetView.scss
deleted file mode 100644
index 268769fb..00000000
--- a/src/views/catalog/views/page/layout/pets/CatalogLayoutPetView.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.nitro-catalog-layout-pets {
-
-    .color-button {
-        position: absolute;
-        left: 5px;
-        bottom: 5px;
-    }
-
-    @import './name-approval/CatalogPetNameApprovalView';
-}
diff --git a/src/views/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx b/src/views/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx
index f70afb5d..edf293c2 100644
--- a/src/views/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx
+++ b/src/views/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx
@@ -2,11 +2,13 @@ import { ColorConverter, GetSellablePetPalettesComposer, SellablePetPaletteData
 import { FC, useEffect, useMemo, useState } from 'react';
 import { GetProductDataForLocalization, LocalizeText } from '../../../../../../api';
 import { SendMessageHook } from '../../../../../../hooks/messages/message-event';
+import { NitroCardGridItemView, NitroCardGridView } from '../../../../../../layout';
 import { PetImageView } from '../../../../../shared/pet-image/PetImageView';
-import { GetCatalogPageImage, GetCatalogPageText, GetPetAvailableColors, GetPetIndexFromLocalization } from '../../../../common/CatalogUtilities';
+import { GetPetAvailableColors, GetPetIndexFromLocalization } from '../../../../common/CatalogUtilities';
 import { useCatalogContext } from '../../../../context/CatalogContext';
 import { CatalogActions } from '../../../../reducers/CatalogReducer';
 import { CatalogRoomPreviewerView } from '../../../catalog-room-previewer/CatalogRoomPreviewerView';
+import { CatalogPageDetailsView } from '../../../page-details/CatalogPageDetailsView';
 import { CatalogLayoutPetViewProps } from './CatalogLayoutPetView.types';
 import { CatalogLayoutPetPurchaseView } from './purchase/CatalogLayoutPetPurchaseView';
 
@@ -139,44 +141,40 @@ export const CatalogLayoutPetView: FC<CatalogLayoutPetViewProps> = props =>
     if(!activeOffer) return null;
 
     return (
-        <div className="row h-100 nitro-catalog-layout-pets">
-            <div className="col-7 h-100">
-                <div className="row row-cols-5 align-content-start g-0 mb-n1 w-100 h-100 overflow-auto catalog-offers-container single-bundle-items-container">
-                    { colorsShowing && (sellableColors.length > 0) && sellableColors.map((colorSet, index) =>
-                        {
-                            return <div key={ index } className="col pe-1 pb-1 catalog-offer-item-container">
-                                <div className={ 'position-relative border border-2 rounded catalog-offer-item cursor-pointer ' + ((selectedColorIndex === index) ? 'active ' : '') } style={ { backgroundColor: ColorConverter.int2rgb(colorSet[0]) } } onClick={ event => setSelectedColorIndex(index) }>
-                                </div>
-                            </div>;
-                        })}
+        <div className="row h-100">
+            <div className="d-flex flex-column col-7 h-100">
+                <NitroCardGridView columns={ 5 }>
                     { !colorsShowing && (sellablePalettes.length > 0) && sellablePalettes.map((palette, index) =>
                         {
-                            return <div key={ index } className="col pe-1 pb-1 catalog-offer-item-container">
-                                <div className={ 'position-relative border border-2 rounded catalog-offer-item cursor-pointer ' + ((selectedPaletteIndex === index) ? 'active ' : '') } onClick={ event => setSelectedPaletteIndex(index) }>
+                            return (
+                                <NitroCardGridItemView key={ index } itemActive={ (selectedPaletteIndex === index) } onClick={ event => setSelectedPaletteIndex(index) }>
                                     <PetImageView typeId={ petIndex } paletteId={ palette.paletteId } direction={ 2 } headOnly={ true } />
-                                </div>
-                            </div>;
-                        }) }
-                </div>
+                                </NitroCardGridItemView>
+                            );
+                        })}
+                    { colorsShowing && (sellableColors.length > 0) && sellableColors.map((colorSet, index) =>
+                        {
+                            return (
+                                <NitroCardGridItemView key={ index } itemActive={ (selectedColorIndex === index) } itemColor={ ColorConverter.int2rgb(colorSet[0]) } onClick={ event => setSelectedColorIndex(index) } />
+                            );
+                        })}
+                </NitroCardGridView>
+            </div>
+            <div className="position-relative d-flex flex-column col-5">
+                { (petIndex === -1) &&
+                    <CatalogPageDetailsView pageParser={ pageParser } /> }
+                { (petIndex >= 0) &&
+                    <>
+                        <CatalogRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 }>
+                            { (petIndex > -1 && petIndex <= 7) &&
+                                <button type="button" className= { 'btn btn-primary btn-sm color-button ' + (colorsShowing ? 'active ' : '') } onClick={ event => setColorsShowing(!colorsShowing) }>
+                                    <i className="fas fa-fill-drip" />
+                                </button> }
+                        </CatalogRoomPreviewerView>
+                        <div className="fs-6 text-black mt-1 overflow-hidden">{ petBreedName }</div>
+                        <CatalogLayoutPetPurchaseView offer={ activeOffer } pageId={ pageParser.pageId } extra={ petPurchaseString } />
+                    </> }
             </div>
-            { (petIndex === -1) &&
-                <div className="position-relative d-flex flex-column col-5 justify-content-center align-items-center">
-                    <div className="d-block mb-2">
-                        <img alt="" src={ GetCatalogPageImage(pageParser, 1) } />
-                    </div>
-                    <div className="fs-6 text-center text-black lh-sm overflow-hidden">{ GetCatalogPageText(pageParser, 0) }</div>
-                </div> }
-            { (petIndex >= 0) &&
-                <div className="position-relative d-flex flex-column col-5">
-                    <CatalogRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 }>
-                        { (petIndex > -1 && petIndex <= 7) &&
-                            <button type="button" className= { 'btn btn-primary btn-sm color-button ' + (colorsShowing ? 'active ' : '') } onClick={ event => setColorsShowing(!colorsShowing) }>
-                                <i className="fas fa-fill-drip" />
-                            </button> }
-                    </CatalogRoomPreviewerView>
-                    <div className="fs-6 text-black mt-1 overflow-hidden">{ petBreedName }</div>
-                    <CatalogLayoutPetPurchaseView offer={ activeOffer } pageId={ pageParser.pageId } extra={ petPurchaseString } />
-                </div> }
         </div>
     );
 }
diff --git a/src/views/catalog/views/page/layout/pets/name-approval/CatalogPetNameApprovalView.scss b/src/views/catalog/views/page/layout/pets/name-approval/CatalogPetNameApprovalView.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/views/catalog/views/page/layout/pets/purchase/CatalogLayoutPetPurchaseView.tsx b/src/views/catalog/views/page/layout/pets/purchase/CatalogLayoutPetPurchaseView.tsx
index 9f1ebb31..c7b02518 100644
--- a/src/views/catalog/views/page/layout/pets/purchase/CatalogLayoutPetPurchaseView.tsx
+++ b/src/views/catalog/views/page/layout/pets/purchase/CatalogLayoutPetPurchaseView.tsx
@@ -6,6 +6,7 @@ import { useUiEvent } from '../../../../../../../hooks/events/ui/ui-event';
 import { SendMessageHook } from '../../../../../../../hooks/messages/message-event';
 import { CurrencyIcon } from '../../../../../../shared/currency-icon/CurrencyIcon';
 import { CatalogPurchaseButtonView } from '../../../purchase/purchase-button/CatalogPurchaseButtonView';
+import { CatalogPurchaseGiftButtonView } from '../../../purchase/purchase-gift-button/CatalogPurchaseGiftButtonView';
 import { CatalogPetNameApprovalView } from '../name-approval/CatalogPetNameApprovalView';
 import { CatalogLayoutPetPurchaseViewProps } from './CatalogLayoutPetPurchaseView.types';
 
@@ -59,6 +60,8 @@ export const CatalogLayoutPetPurchaseView: FC<CatalogLayoutPetPurchaseViewProps>
                 </div>
                 <div className="d-flex flex-column mt-1">
                     <CatalogPurchaseButtonView className="btn-sm w-100" offer={ offer } pageId={ pageId } extra={ extraData } quantity={ 1 } isPurchaseAllowed={ nameApproved } beforePurchase={ beforePurchase } />
+                    { offer.giftable &&
+                        <CatalogPurchaseGiftButtonView className="btn-sm w-100 mt-1" offer={ offer } pageId={ pageId } extra={ extraData } disabled={ nameApproved } /> }
                 </div>
             </div>
         </>
diff --git a/src/views/catalog/views/page/layout/pets2/CatalogLayoutPets2View.scss b/src/views/catalog/views/page/layout/pets2/CatalogLayoutPets2View.scss
deleted file mode 100644
index 1b85077d..00000000
--- a/src/views/catalog/views/page/layout/pets2/CatalogLayoutPets2View.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-.nitro-catalog-layout-pets2 {
-}
diff --git a/src/views/catalog/views/page/layout/pets2/CatalogLayoutPets2View.tsx b/src/views/catalog/views/page/layout/pets2/CatalogLayoutPets2View.tsx
index 3e901711..06dd970c 100644
--- a/src/views/catalog/views/page/layout/pets2/CatalogLayoutPets2View.tsx
+++ b/src/views/catalog/views/page/layout/pets2/CatalogLayoutPets2View.tsx
@@ -1,23 +1,8 @@
 import { FC } from 'react';
-import { GetCatalogPageImage, GetCatalogPageText } from '../../../../common/CatalogUtilities';
+import { CatalogLayoutPets3View } from '../pets3/CatalogLayoutPets3View';
 import { CatalogLayoutPets2ViewProps } from './CatalogLayoutPets2View.types';
 
 export const CatalogLayoutPets2View: FC<CatalogLayoutPets2ViewProps> = props =>
 {
-    const { pageParser = null } = props;
-    
-    return (
-        <div className="h-100 nitro-catalog-layout-pets3 bg-muted p-1 rounded text-black">
-            <div className="overflow-auto h-100 d-flex flex-column">
-                <div className="d-flex flex-row">
-                    <div className="d-block mb-1 me-1">
-                        <img alt="" src={ GetCatalogPageImage(pageParser, 1) } />
-                    </div>
-                    <h6 className="align-self-center">{ GetCatalogPageText(pageParser, 1) }</h6>
-                </div>
-                <div dangerouslySetInnerHTML={ { __html: GetCatalogPageText(pageParser, 2) } } />
-                {GetCatalogPageText(pageParser, 3) && <div className="mt-auto bg-secondary text-white rounded p-1 text-center" dangerouslySetInnerHTML={{ __html: GetCatalogPageText(pageParser, 3) }} />}
-            </div>
-        </div>
-    );
+    return <CatalogLayoutPets3View { ...props } />
 }
diff --git a/src/views/catalog/views/page/layout/pets3/CatalogLayoutPets3View.scss b/src/views/catalog/views/page/layout/pets3/CatalogLayoutPets3View.scss
deleted file mode 100644
index 2f2bc31c..00000000
--- a/src/views/catalog/views/page/layout/pets3/CatalogLayoutPets3View.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-.nitro-catalog-layout-pets3 {
-}
diff --git a/src/views/catalog/views/page/layout/pets3/CatalogLayoutPets3View.tsx b/src/views/catalog/views/page/layout/pets3/CatalogLayoutPets3View.tsx
index 23fa4048..94ab0a81 100644
--- a/src/views/catalog/views/page/layout/pets3/CatalogLayoutPets3View.tsx
+++ b/src/views/catalog/views/page/layout/pets3/CatalogLayoutPets3View.tsx
@@ -5,18 +5,24 @@ import { CatalogLayoutPets3ViewProps } from './CatalogLayoutPets3View.types';
 export const CatalogLayoutPets3View: FC<CatalogLayoutPets3ViewProps> = props =>
 {
     const { pageParser = null } = props;
+
+    const imageUrl = GetCatalogPageImage(pageParser, 1);
     
     return (
-        <div className="h-100 nitro-catalog-layout-pets3 bg-muted p-1 rounded text-black">
-            <div className="overflow-auto h-100 d-flex flex-column">
-                <div className="d-flex flex-row">
-                    <div className="d-block mb-1 me-1">
-                        <img alt="" src={ GetCatalogPageImage(pageParser, 1) } />
+        <div className="row h-100">
+            <div className="d-flex flex-column col-12 h-100">
+                <div className="d-flex flex-column bg-muted rounded text-black gap-2 p-2 h-100">
+                    <div className="d-flex flex-row align-items-center gap-2">
+                        { imageUrl && <img alt="" src={ GetCatalogPageImage(pageParser, 1) } /> }
+                        <div className="fs-5" dangerouslySetInnerHTML={ { __html: GetCatalogPageText(pageParser, 1) } } />
+                    </div>
+                    <div className="d-flex flex-column align-items-center flex-grow-1 overflow-auto">
+                        <div dangerouslySetInnerHTML={ { __html: GetCatalogPageText(pageParser, 2) } } />
+                    </div>
+                    <div className="d-flex flex-row align-items-center">
+                        <div className="fw-bold" dangerouslySetInnerHTML={ { __html: GetCatalogPageText(pageParser, 3) } } />
                     </div>
-                    <h6 className="align-self-center">{ GetCatalogPageText(pageParser, 1) }</h6>
                 </div>
-                <div dangerouslySetInnerHTML={ { __html: GetCatalogPageText(pageParser, 2) } } />
-                {GetCatalogPageText(pageParser, 3) && <div className="mt-auto bg-secondary text-white rounded p-1 text-center" dangerouslySetInnerHTML={{ __html: GetCatalogPageText(pageParser, 3) }} />}
             </div>
         </div>
     );
diff --git a/src/views/catalog/views/page/layout/single-bundle/CatalogLayoutSingleBundleView.scss b/src/views/catalog/views/page/layout/single-bundle/CatalogLayoutSingleBundleView.scss
deleted file mode 100644
index 664041a9..00000000
--- a/src/views/catalog/views/page/layout/single-bundle/CatalogLayoutSingleBundleView.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.nitro-catalog-layout-single-bundle {
-
-    .single-bundle-items-container {
-        
-    }
-}
diff --git a/src/views/catalog/views/page/layout/single-bundle/CatalogLayoutSingleBundleView.tsx b/src/views/catalog/views/page/layout/single-bundle/CatalogLayoutSingleBundleView.tsx
index c85baeae..bab6711f 100644
--- a/src/views/catalog/views/page/layout/single-bundle/CatalogLayoutSingleBundleView.tsx
+++ b/src/views/catalog/views/page/layout/single-bundle/CatalogLayoutSingleBundleView.tsx
@@ -1,6 +1,7 @@
 import { FC } from 'react';
-import { GetCatalogPageImage, GetCatalogPageText } from '../../../../common/CatalogUtilities';
+import { NitroCardGridView } from '../../../../../../layout';
 import { useCatalogContext } from '../../../../context/CatalogContext';
+import { CatalogPageDetailsView } from '../../../page-details/CatalogPageDetailsView';
 import { CatalogProductView } from '../../product/CatalogProductView';
 import { CatalogPurchaseView } from '../../purchase/CatalogPurchaseView';
 import { CatalogLayoutSingleBundleViewProps } from './CatalogLayoutSingleBundleView.types';
@@ -12,20 +13,17 @@ export const CatalogLayoutSingleBundleView: FC<CatalogLayoutSingleBundleViewProp
     const { activeOffer = null } = catalogState;
 
     return (
-        <div className="row h-100 nitro-catalog-layout-single-bundle">
-            <div className="col-7 h-100">
-                <div className="row row-cols-5 align-content-start g-0 mb-n1 w-100 catalog-offers-container single-bundle-items-container h-100 overflow-auto">
+        <div className="row h-100">
+            <div className="d-flex flex-column col-7 h-100">
+                <NitroCardGridView columns={ 5 }>
                     { activeOffer && activeOffer.products && (activeOffer.products.length > 0) && activeOffer.products.map((product, index) =>
                         {
                             return <CatalogProductView key={ index } isActive={ false } product={ product } />
                         }) }
-                </div>
+                </NitroCardGridView>
             </div>
-            <div className="position-relative d-flex flex-column col-5 justify-content-center align-items-center h-100 overflow-auto">
-                <div className="d-block mb-2">
-                    <img alt="" src={ GetCatalogPageImage(pageParser, 1) } />
-                </div>
-                <div className="fs-6 text-center text-black lh-sm overflow-hidden">{ GetCatalogPageText(pageParser, 0) }</div>
+            <div className="position-relative d-flex flex-column col-5">
+                <CatalogPageDetailsView pageParser={ pageParser } />
                 { activeOffer && <CatalogPurchaseView offer={ activeOffer } pageId={ pageParser.pageId } /> }
             </div>
         </div>
diff --git a/src/views/catalog/views/page/layout/spaces-new/CatalogLayoutSpacesView.scss b/src/views/catalog/views/page/layout/spaces-new/CatalogLayoutSpacesView.scss
deleted file mode 100644
index ce1e1c03..00000000
--- a/src/views/catalog/views/page/layout/spaces-new/CatalogLayoutSpacesView.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.nitro-catalog-layout-spaces {
-
-}
diff --git a/src/views/catalog/views/page/layout/spaces-new/CatalogLayoutSpacesView.tsx b/src/views/catalog/views/page/layout/spaces-new/CatalogLayoutSpacesView.tsx
index c2c15a26..65da4622 100644
--- a/src/views/catalog/views/page/layout/spaces-new/CatalogLayoutSpacesView.tsx
+++ b/src/views/catalog/views/page/layout/spaces-new/CatalogLayoutSpacesView.tsx
@@ -1,12 +1,10 @@
 import { CatalogPageMessageOfferData, IFurnitureData } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { GetSessionDataManager, LocalizeText } from '../../../../../../api';
-import { GetCatalogPageImage, GetCatalogPageText, GetOfferName } from '../../../../common/CatalogUtilities';
 import { ProductTypeEnum } from '../../../../common/ProductTypeEnum';
 import { useCatalogContext } from '../../../../context/CatalogContext';
-import { CatalogRoomPreviewerView } from '../../../catalog-room-previewer/CatalogRoomPreviewerView';
 import { CatalogPageOffersView } from '../../offers/CatalogPageOffersView';
-import { CatalogPurchaseView } from '../../purchase/CatalogPurchaseView';
+import { CatalogProductPreviewView } from '../../product-preview/CatalogProductPreviewView';
 import { CatalogLayoutSpacesViewProps } from './CatalogLayoutSpacesView.types';
 
 export const CatalogLayoutSpacesView: FC<CatalogLayoutSpacesViewProps> = props =>
@@ -68,9 +66,9 @@ export const CatalogLayoutSpacesView: FC<CatalogLayoutSpacesViewProps> = props =
     const product = ((activeOffer && activeOffer.products[0]) || null);
 
     return (
-        <div className="row h-100 nitro-catalog-layout-spaces">
-            <div className="d-flex col-7 flex-column h-100 overflow-hidden">
-                <div className="btn-group mx-auto mb-1 w-100">
+        <div className="row h-100">
+            <div className="d-flex flex-column col-7 gap-2 h-100">
+                <div className="btn-group w-100">
                     { groupNames.map((name, index) =>
                         {
                             return <button key={ index } type="button" className={ 'btn btn-primary btn-sm ' + ((activeGroupIndex === index) ? 'active ' : '' )} onClick={ event => setActiveGroupIndex(index) }>{ LocalizeText(`catalog.spaces.tab.${ name }`) }</button>
@@ -78,19 +76,9 @@ export const CatalogLayoutSpacesView: FC<CatalogLayoutSpacesViewProps> = props =
                 </div>
                 <CatalogPageOffersView offers={ groups[activeGroupIndex] } />
             </div>
-            { !product &&
-                <div className="position-relative d-flex flex-column col-5 justify-content-center align-items-center">
-                    <div className="d-block mb-2">
-                        <img alt="" src={ GetCatalogPageImage(pageParser, 1) } />
-                    </div>
-                    <div className="fs-6 text-center text-black lh-sm overflow-hidden">{ GetCatalogPageText(pageParser, 0) }</div>
-                </div> }
-            { product &&
-                <div className="position-relative d-flex flex-column col">
-                    <CatalogRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
-                    <div className="fs-6 text-black mt-1 overflow-hidden">{ GetOfferName(activeOffer) }</div>
-                    <CatalogPurchaseView offer={ activeOffer } pageId={ pageParser.pageId } />
-                </div> }
+            <div className="position-relative d-flex flex-column col-5">
+                <CatalogProductPreviewView pageParser={ pageParser } activeOffer={ activeOffer } roomPreviewer={ roomPreviewer } />
+            </div>
         </div>
     );
 }
diff --git a/src/views/catalog/views/page/layout/trophies/CatalogLayoutTrophiesView.scss b/src/views/catalog/views/page/layout/trophies/CatalogLayoutTrophiesView.scss
deleted file mode 100644
index 58637ed9..00000000
--- a/src/views/catalog/views/page/layout/trophies/CatalogLayoutTrophiesView.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.nitro-catalog-layout-trophies {
-
-    textarea {
-        height: 119px;
-        resize: none;
-    }
-
-}
diff --git a/src/views/catalog/views/page/layout/trophies/CatalogLayoutTrophiesView.tsx b/src/views/catalog/views/page/layout/trophies/CatalogLayoutTrophiesView.tsx
index 471001a1..03379cf0 100644
--- a/src/views/catalog/views/page/layout/trophies/CatalogLayoutTrophiesView.tsx
+++ b/src/views/catalog/views/page/layout/trophies/CatalogLayoutTrophiesView.tsx
@@ -1,9 +1,7 @@
 import { FC, useState } from 'react';
-import { GetOfferName } from '../../../../common/CatalogUtilities';
 import { useCatalogContext } from '../../../../context/CatalogContext';
-import { CatalogRoomPreviewerView } from '../../../catalog-room-previewer/CatalogRoomPreviewerView';
 import { CatalogPageOffersView } from '../../offers/CatalogPageOffersView';
-import { CatalogPurchaseView } from '../../purchase/CatalogPurchaseView';
+import { CatalogProductPreviewView } from '../../product-preview/CatalogProductPreviewView';
 import { CatalogLayoutTrophiesViewProps } from './CatalogLayoutTrophiesView.types';
 
 export const CatalogLayoutTrophiesView: FC<CatalogLayoutTrophiesViewProps> = props =>
@@ -16,19 +14,14 @@ export const CatalogLayoutTrophiesView: FC<CatalogLayoutTrophiesViewProps> = pro
     const product = ((activeOffer && activeOffer.products[0]) || null);
 
     return (
-        <div className="row h-100 nitro-catalog-layout-trophies">
-            <div className="d-flex flex-column col-7 h-100">
+        <div className="row h-100">
+            <div className="d-flex flex-column col-7 gap-2 h-100">
                 <CatalogPageOffersView offers={ pageParser.offers } />
-                <div className="d-flex mt-2">
-                    <textarea className="form-control w-100" defaultValue={ trophyText || '' } onChange={ event => setTrophyText(event.target.value) }></textarea>
-                </div>
+                <textarea className="flex-grow-1 form-control w-100" defaultValue={ trophyText || '' } onChange={ event => setTrophyText(event.target.value) } />
+            </div>
+            <div className="position-relative d-flex flex-column col-5">
+                <CatalogProductPreviewView pageParser={ pageParser } activeOffer={ activeOffer } roomPreviewer={ roomPreviewer } extra={ trophyText } />
             </div>
-            { product &&
-                <div className="position-relative d-flex flex-column col">
-                    <CatalogRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
-                    <div className="fs-6 text-black mt-1 overflow-hidden">{ GetOfferName(activeOffer) }</div>
-                    <CatalogPurchaseView offer={ activeOffer } pageId={ pageParser.pageId } extra={ trophyText } />
-                </div> }
         </div>
     );
 }
diff --git a/src/views/catalog/views/page/offer/CatalogPageOfferView.scss b/src/views/catalog/views/page/offer/CatalogPageOfferView.scss
deleted file mode 100644
index 7008f0e2..00000000
--- a/src/views/catalog/views/page/offer/CatalogPageOfferView.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-.catalog-offer-item-container {
-    height: 48px;
-    max-height: 48px;
-
-    .catalog-offer-item {
-        width: 100%;
-        height: 100%;
-        border-color: $grid-border-color !important;
-        background-color: $grid-bg-color;
-        background-position: center;
-        background-repeat: no-repeat;
-        overflow: hidden;
-    
-        &.active {
-            border-color: $grid-active-border-color !important;
-            background-color: $grid-active-bg-color;
-        }
-    
-        .badge {
-            top: 2px;
-            right: 2px;
-            font-size: 8px;
-        }
-
-        .avatar-image {
-            width: 100% !important;
-            height: 100% !important;
-            background-position: center;
-            background-repeat: no-repeat;
-            background-position-y: -32px !important;
-        }
-    }
-}
diff --git a/src/views/catalog/views/page/offer/CatalogPageOfferView.tsx b/src/views/catalog/views/page/offer/CatalogPageOfferView.tsx
index 89f6b90f..fb2fae74 100644
--- a/src/views/catalog/views/page/offer/CatalogPageOfferView.tsx
+++ b/src/views/catalog/views/page/offer/CatalogPageOfferView.tsx
@@ -1,5 +1,5 @@
 import { MouseEventType } from '@nitrots/nitro-renderer';
-import { FC, MouseEvent, useCallback } from 'react';
+import { FC, MouseEvent, useCallback, useState } from 'react';
 import { useCatalogContext } from '../../../context/CatalogContext';
 import { CatalogActions } from '../../../reducers/CatalogReducer';
 import { CatalogProductView } from '../product/CatalogProductView';
@@ -8,6 +8,7 @@ import { CatalogPageOfferViewProps } from './CatalogPageOfferView.types';
 export const CatalogPageOfferView: FC<CatalogPageOfferViewProps> = props =>
 {
     const { isActive = false, offer = null } = props;
+    const [ isMouseDown, setMouseDown ] = useState(false);
     const { dispatchCatalogState = null } = useCatalogContext();
 
     const onMouseEvent = useCallback((event: MouseEvent) =>
@@ -24,12 +25,21 @@ export const CatalogPageOfferView: FC<CatalogPageOfferViewProps> = props =>
                     }
                 });
                 return;
+            case MouseEventType.MOUSE_DOWN:
+                setMouseDown(true);
+                return;
+            case MouseEventType.MOUSE_UP:
+                setMouseDown(false);
+                return;
+            case MouseEventType.ROLL_OUT:
+                if(!isMouseDown || !isActive) return;
+                return;
         }
-    }, [ isActive, offer, dispatchCatalogState ]);
+    }, [ isActive, offer, isMouseDown, dispatchCatalogState ]);
 
     const product = ((offer.products && offer.products[0]) || null);
 
     if(!product) return null;
 
-    return <CatalogProductView isActive={ isActive } product={ product } onMouseEvent={ onMouseEvent } />
+    return <CatalogProductView isActive={ isActive } product={ product } onClick={ onMouseEvent } onMouseDown={ onMouseEvent } onMouseUp={ onMouseEvent } onMouseOut={ onMouseEvent } />
 }
diff --git a/src/views/catalog/views/page/offers/CatalogPageOffersView.scss b/src/views/catalog/views/page/offers/CatalogPageOffersView.scss
deleted file mode 100644
index 28192aa4..00000000
--- a/src/views/catalog/views/page/offers/CatalogPageOffersView.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.catalog-offers-container {
-    overflow-y: auto;
-}
diff --git a/src/views/catalog/views/page/offers/CatalogPageOffersView.tsx b/src/views/catalog/views/page/offers/CatalogPageOffersView.tsx
index 5fd81480..994bb7d7 100644
--- a/src/views/catalog/views/page/offers/CatalogPageOffersView.tsx
+++ b/src/views/catalog/views/page/offers/CatalogPageOffersView.tsx
@@ -1,32 +1,21 @@
-import { FC, useEffect } from 'react';
+import { FC } from 'react';
+import { NitroCardGridView } from '../../../../../layout';
 import { useCatalogContext } from '../../../context/CatalogContext';
 import { CatalogPageOfferView } from '../offer/CatalogPageOfferView';
 import { CatalogPageOffersViewProps } from './CatalogPageOffersView.types';
 
 export const CatalogPageOffersView: FC<CatalogPageOffersViewProps> = props =>
 {
-    const { offers = [] } = props;
+    const { offers = [], ...rest } = props;
     const { catalogState = null, dispatchCatalogState = null } = useCatalogContext();
     const { activeOffer = null } = catalogState;
 
-    useEffect(() =>
-    {
-        if(!offers || !offers.length) return;
-
-        // dispatchCatalogState({
-        //     type: CatalogActions.SET_CATALOG_ACTIVE_OFFER,
-        //     payload: {
-        //         activeOffer: offers[0]
-        //     }
-        // });
-    }, [ offers, dispatchCatalogState ]);
-
     return (
-        <div className="row row-cols-5 align-content-start g-0 mb-n1 w-100 catalog-offers-container h-100 overflow-auto">
+        <NitroCardGridView columns={ 5 } { ...rest }>
             { offers && (offers.length > 0) && offers.map((offer, index) =>
                 {
                     return <CatalogPageOfferView key={ index } isActive={ (activeOffer === offer) } offer={ offer } />
-            })}
-        </div>
+                })}
+        </NitroCardGridView>
     );
 }
diff --git a/src/views/catalog/views/page/offers/CatalogPageOffersView.types.ts b/src/views/catalog/views/page/offers/CatalogPageOffersView.types.ts
index 9f7945d0..451510cc 100644
--- a/src/views/catalog/views/page/offers/CatalogPageOffersView.types.ts
+++ b/src/views/catalog/views/page/offers/CatalogPageOffersView.types.ts
@@ -1,6 +1,7 @@
 import { CatalogPageMessageOfferData } from '@nitrots/nitro-renderer';
+import { DetailsHTMLAttributes } from 'react';
 
-export interface CatalogPageOffersViewProps
+export interface CatalogPageOffersViewProps extends DetailsHTMLAttributes<HTMLDivElement>
 {
     offers: CatalogPageMessageOfferData[];
 }
diff --git a/src/views/catalog/views/page/product-preview/CatalogProductPreviewView.tsx b/src/views/catalog/views/page/product-preview/CatalogProductPreviewView.tsx
new file mode 100644
index 00000000..1e278f58
--- /dev/null
+++ b/src/views/catalog/views/page/product-preview/CatalogProductPreviewView.tsx
@@ -0,0 +1,31 @@
+import { FC } from 'react';
+import { LimitedEditionCompletePlateView } from '../../../../shared/limited-edition/complete-plate/LimitedEditionCompletePlateView';
+import { GetOfferName } from '../../../common/CatalogUtilities';
+import { CatalogRoomPreviewerView } from '../../catalog-room-previewer/CatalogRoomPreviewerView';
+import { CatalogPageDetailsView } from '../../page-details/CatalogPageDetailsView';
+import { CatalogPurchaseView } from '../purchase/CatalogPurchaseView';
+import { CatalogProductPreviewViewProps } from './CatalogProductPreviewView.types';
+
+export const CatalogProductPreviewView: FC<CatalogProductPreviewViewProps> = props =>
+{
+    const { pageParser = null, activeOffer = null, roomPreviewer = null, extra = '', disabled = false, children = null } = props;
+
+    const product = ((activeOffer && activeOffer.products[0]) || null);
+
+    if(!product) return <CatalogPageDetailsView pageParser={ pageParser } />;
+
+    return (
+        <>
+            <div className="position-relative d-flex flex-column overflow-auto h-100">
+                <CatalogRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
+                { product.uniqueLimitedItem &&
+                    <LimitedEditionCompletePlateView uniqueLimitedItemsLeft={ product.uniqueLimitedItemsLeft } uniqueLimitedSeriesSize={ product.uniqueLimitedSeriesSize } /> }
+            </div>
+            <div className="d-flex flex-column gap-2">
+                <div className="flex-grow-1 text-black text-truncate">{ GetOfferName(activeOffer) }</div>
+                { children }
+                <CatalogPurchaseView offer={ activeOffer } pageId={ pageParser.pageId } extra={ extra } disabled={ disabled } />
+            </div>
+        </>
+    );
+}
diff --git a/src/views/catalog/views/page/product-preview/CatalogProductPreviewView.types.ts b/src/views/catalog/views/page/product-preview/CatalogProductPreviewView.types.ts
new file mode 100644
index 00000000..249d05ff
--- /dev/null
+++ b/src/views/catalog/views/page/product-preview/CatalogProductPreviewView.types.ts
@@ -0,0 +1,10 @@
+import { CatalogPageMessageOfferData, CatalogPageMessageParser, RoomPreviewer } from '@nitrots/nitro-renderer';
+
+export interface CatalogProductPreviewViewProps
+{
+    pageParser: CatalogPageMessageParser;
+    activeOffer: CatalogPageMessageOfferData;
+    roomPreviewer: RoomPreviewer;
+    extra?: string;
+    disabled?: boolean;
+}
diff --git a/src/views/catalog/views/page/product/CatalogProductView.scss b/src/views/catalog/views/page/product/CatalogProductView.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/views/catalog/views/page/product/CatalogProductView.tsx b/src/views/catalog/views/page/product/CatalogProductView.tsx
index 684488d0..406f6e21 100644
--- a/src/views/catalog/views/page/product/CatalogProductView.tsx
+++ b/src/views/catalog/views/page/product/CatalogProductView.tsx
@@ -1,79 +1,36 @@
-import { FurnitureType } from '@nitrots/nitro-renderer';
 import { FC, useMemo } from 'react';
-import { GetConfiguration, GetRoomEngine, GetSessionDataManager } from '../../../../../api';
+import { NitroCardGridItemView } from '../../../../../layout';
 import { AvatarImageView } from '../../../../shared/avatar-image/AvatarImageView';
-import { LimitedEditionStyledNumberView } from '../../../../shared/limited-edition/styled-number/LimitedEditionStyledNumberView';
+import { GetProductIconUrl } from '../../../common/GetProuductIconUrl';
 import { ProductTypeEnum } from '../../../common/ProductTypeEnum';
 import { CatalogProductViewProps } from './CatalogProductView.types';
 
 export const CatalogProductView: FC<CatalogProductViewProps> = props =>
 {
-    const { isActive = false, product = null, onMouseEvent = null } = props;
+    const { isActive = false, product = null, ...rest } = props;
 
     const iconUrl = useMemo(() =>
     {
         if(!product) return null;
+        
+        return GetProductIconUrl(product.furniClassId, product.productType, product.extraParam);
+    }, [ product ]);
 
-        const productType = product.productType.toUpperCase();
+    const getUniqueNumber = useMemo(() =>
+    {
+        if(!product.uniqueLimitedItem) return 0;
 
-        switch(productType)
-        {
-            case FurnitureType.BADGE:
-                return GetSessionDataManager().getBadgeUrl(product.extraParam);
-            case FurnitureType.ROBOT:
-                return null;
-            case FurnitureType.FLOOR:
-                return GetRoomEngine().getFurnitureFloorIconUrl(product.furniClassId);
-            case FurnitureType.WALL: {
-                const furniData = GetSessionDataManager().getWallItemData(product.furniClassId);
-                
-                let iconName = '';
+        if(!product.uniqueLimitedItemsLeft) return -1;
 
-                if(furniData)
-                {
-                    switch(furniData.className)
-                    {
-                        case 'floor':
-                            iconName = ['th', furniData.className, product.extraParam].join('_');
-                            break;
-                        case 'wallpaper':
-                            iconName = ['th', 'wall', product.extraParam].join('_');
-                            break;
-                        case 'landscape':
-                            iconName = ['th', furniData.className, product.extraParam.replace('.', '_'), '001'].join('_');
-                            break;
-                    }
-
-                    if(iconName !== '')
-                    {
-                        const assetUrl = GetConfiguration<string>('catalog.asset.url');
-
-                        return `${ assetUrl }/${ iconName }.png`;
-                    }
-                }
-
-                return GetRoomEngine().getFurnitureWallIconUrl(product.furniClassId, product.extraParam);
-            }
-        }
-
-        return null;
+        return product.uniqueLimitedSeriesSize;
     }, [ product ]);
 
     if(!product) return null;
 
-    const imageUrl = (iconUrl && iconUrl.length) ? `url(${ iconUrl })` : null;
-
     return (
-        <div className="col pe-1 pb-1 catalog-offer-item-container">
-            <div className={ 'position-relative border border-2 rounded catalog-offer-item cursor-pointer ' + (isActive ? 'active ' : '') + (product.uniqueLimitedItem ? 'unique-item ' : '') + ((product.uniqueLimitedItem && !product.uniqueLimitedItemsLeft) ? 'sold-out ' : '') } style={ { backgroundImage: imageUrl }} onClick={ onMouseEvent }>
-                { !imageUrl && (product.productType === ProductTypeEnum.ROBOT) &&
-                    <AvatarImageView figure={ product.extraParam } direction={ 3 } headOnly={ true } /> }
-                { (product.productCount > 1) && <span className="position-absolute badge border bg-danger px-1 rounded-circle">{ product.productCount }</span> }
-                { product.uniqueLimitedItem && 
-                    <div className="position-absolute unique-item-counter">
-                        <LimitedEditionStyledNumberView value={ product.uniqueLimitedSeriesSize } />
-                    </div> }
-            </div>
-        </div>
+        <NitroCardGridItemView itemImage={ iconUrl } itemActive={ isActive } itemCount={ product.productCount } itemUniqueNumber={ getUniqueNumber } { ...rest }>
+            { (product.productType === ProductTypeEnum.ROBOT) &&
+                <AvatarImageView figure={ product.extraParam } direction={ 3 } headOnly={ true } /> }
+        </NitroCardGridItemView>
     );
 }
diff --git a/src/views/catalog/views/page/product/CatalogProductView.types.ts b/src/views/catalog/views/page/product/CatalogProductView.types.ts
index e059ecf5..b2d94bde 100644
--- a/src/views/catalog/views/page/product/CatalogProductView.types.ts
+++ b/src/views/catalog/views/page/product/CatalogProductView.types.ts
@@ -1,9 +1,8 @@
 import { CatalogPageMessageProductData } from '@nitrots/nitro-renderer';
-import { MouseEventHandler } from 'react';
+import { DetailsHTMLAttributes } from 'react';
 
-export interface CatalogProductViewProps
+export interface CatalogProductViewProps extends DetailsHTMLAttributes<HTMLDivElement>
 {
     isActive: boolean;
     product: CatalogPageMessageProductData;
-    onMouseEvent?: MouseEventHandler<Element>;
 }
diff --git a/src/views/catalog/views/page/purchase/CatalogPurchaseView.scss b/src/views/catalog/views/page/purchase/CatalogPurchaseView.scss
index 4559e425..e4a2a26f 100644
--- a/src/views/catalog/views/page/purchase/CatalogPurchaseView.scss
+++ b/src/views/catalog/views/page/purchase/CatalogPurchaseView.scss
@@ -4,5 +4,3 @@
     width: 29px;
     padding: 3px 5px;
 }
-
-@import './purchase-button/CatalogPurchaseButtonView';
diff --git a/src/views/catalog/views/page/purchase/purchase-button/CatalogPurchaseButtonView.scss b/src/views/catalog/views/page/purchase/purchase-button/CatalogPurchaseButtonView.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/views/catalog/views/page/search-result/CatalogLayoutSearchResultView.scss b/src/views/catalog/views/page/search-result/CatalogLayoutSearchResultView.scss
deleted file mode 100644
index ce60508f..00000000
--- a/src/views/catalog/views/page/search-result/CatalogLayoutSearchResultView.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import './offer/CatalogSearchResultOfferView';
-@import './offers/CatalogSearchResultOffersView';
diff --git a/src/views/catalog/views/page/search-result/CatalogLayoutSearchResultView.tsx b/src/views/catalog/views/page/search-result/CatalogLayoutSearchResultView.tsx
index a234f840..00e30a25 100644
--- a/src/views/catalog/views/page/search-result/CatalogLayoutSearchResultView.tsx
+++ b/src/views/catalog/views/page/search-result/CatalogLayoutSearchResultView.tsx
@@ -17,7 +17,7 @@ export const CatalogLayoutSearchResultView: FC<CatalogLayoutSearchResultViewProp
 
     return (
         <div className="row h-100">
-            <div className="col-7 h-100">
+            <div className="d-flex flex-column col-7 h-100">
                 <CatalogSearchResultOffersView offers={ furnitureDatas } />
             </div>
             { product &&
diff --git a/src/views/catalog/views/page/search-result/offer/CatalogSearchResultOfferView.scss b/src/views/catalog/views/page/search-result/offer/CatalogSearchResultOfferView.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/views/catalog/views/page/search-result/offer/CatalogSearchResultOfferView.tsx b/src/views/catalog/views/page/search-result/offer/CatalogSearchResultOfferView.tsx
index 28290cf9..b7ff3534 100644
--- a/src/views/catalog/views/page/search-result/offer/CatalogSearchResultOfferView.tsx
+++ b/src/views/catalog/views/page/search-result/offer/CatalogSearchResultOfferView.tsx
@@ -1,7 +1,10 @@
-import { FurnitureType, GetProductOfferComposer, MouseEventType } from '@nitrots/nitro-renderer';
-import { FC, MouseEvent, useCallback } from 'react';
-import { GetConfiguration, GetRoomEngine, GetSessionDataManager } from '../../../../../../api';
+import { GetProductOfferComposer, MouseEventType } from '@nitrots/nitro-renderer';
+import { FC, MouseEvent, useCallback, useMemo } from 'react';
 import { SendMessageHook } from '../../../../../../hooks/messages/message-event';
+import { NitroCardGridItemView } from '../../../../../../layout';
+import { AvatarImageView } from '../../../../../shared/avatar-image/AvatarImageView';
+import { GetProductIconUrl } from '../../../../common/GetProuductIconUrl';
+import { ProductTypeEnum } from '../../../../common/ProductTypeEnum';
 import { CatalogSearchResultOfferViewProps } from './CatalogSearchResultOfferView.types';
 
 export const CatalogSearchResultOfferView: FC<CatalogSearchResultOfferViewProps> = props =>
@@ -15,62 +18,22 @@ export const CatalogSearchResultOfferView: FC<CatalogSearchResultOfferViewProps>
             case MouseEventType.MOUSE_DOWN:
                 SendMessageHook(new GetProductOfferComposer(offer.purchaseOfferId));
                 return;
-            case MouseEventType.MOUSE_UP:
-                return;
-            case MouseEventType.ROLL_OUT:
-                return;
         }
     }, [ offer ]);
 
-    function getIconUrl(): string
+    const iconUrl = useMemo(() =>
     {
-        const productType = offer.type.toUpperCase();
+        if(!offer) return null;
+        
+        return GetProductIconUrl(offer.id, offer.type, offer.customParams);
+    }, [ offer ]);
 
-        switch(productType)
-        {
-            case FurnitureType.BADGE:
-                return GetSessionDataManager().getBadgeUrl(offer.customParams);
-            case FurnitureType.FLOOR:
-                return GetRoomEngine().getFurnitureFloorIconUrl(offer.id);
-            case FurnitureType.WALL:
-                const furniData = GetSessionDataManager().getWallItemData(offer.id);
-                
-                let iconName = '';
-
-                if(furniData)
-                {
-                    switch(furniData.className)
-                    {
-                        case 'floor':
-                            iconName = ['th', furniData.className, offer.customParams ].join('_');
-                            break;
-                        case 'wallpaper':
-                            iconName = ['th', 'wall', offer.customParams ].join('_');
-                            break;
-                        case 'landscape':
-                            iconName = ['th', furniData.className, ((offer.customParams && offer.customParams.replace('.', '_')) || null), '001'].join('_');
-                            break;
-                    }
-
-                    if(iconName !== '')
-                    {
-                        const assetUrl = GetConfiguration<string>('catalog.asset.url');
-
-                        return `${ assetUrl }/${ iconName }.png`;
-                    }
-                }
-
-                return GetRoomEngine().getFurnitureWallIconUrl(offer.id, offer.customParams);
-        }
-
-        return '';
-    }
-
-    const imageUrl = `url(${ getIconUrl() })`;
+    if(!offer) return null;
 
     return (
-        <div className="col pe-1 pb-1 catalog-offer-item-container">
-            <div className={ 'position-relative border border-2 rounded catalog-offer-item cursor-pointer ' + (isActive ? 'active ' : '') } style={ { backgroundImage: imageUrl }} onMouseDown={ onMouseEvent } onMouseUp={ onMouseEvent } onMouseOut={ onMouseEvent } />
-        </div>
+        <NitroCardGridItemView itemImage={ iconUrl } itemActive={ isActive } onMouseDown={ onMouseEvent }>
+            { (offer.type === ProductTypeEnum.ROBOT) &&
+                <AvatarImageView figure={ offer.customParams } direction={ 3 } headOnly={ true } /> }
+        </NitroCardGridItemView>
     );
 }
diff --git a/src/views/catalog/views/page/search-result/offers/CatalogSearchResultOffersView.scss b/src/views/catalog/views/page/search-result/offers/CatalogSearchResultOffersView.scss
deleted file mode 100644
index 28192aa4..00000000
--- a/src/views/catalog/views/page/search-result/offers/CatalogSearchResultOffersView.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.catalog-offers-container {
-    overflow-y: auto;
-}
diff --git a/src/views/catalog/views/page/search-result/offers/CatalogSearchResultOffersView.tsx b/src/views/catalog/views/page/search-result/offers/CatalogSearchResultOffersView.tsx
index ae260892..213aade1 100644
--- a/src/views/catalog/views/page/search-result/offers/CatalogSearchResultOffersView.tsx
+++ b/src/views/catalog/views/page/search-result/offers/CatalogSearchResultOffersView.tsx
@@ -1,14 +1,15 @@
 import { GetProductOfferComposer } from '@nitrots/nitro-renderer';
 import { FC, useEffect } from 'react';
 import { SendMessageHook } from '../../../../../../hooks/messages/message-event';
+import { NitroCardGridView } from '../../../../../../layout';
 import { useCatalogContext } from '../../../../context/CatalogContext';
 import { CatalogSearchResultOfferView } from '../offer/CatalogSearchResultOfferView';
 import { CatalogSearchResultOffersViewProps } from './CatalogSearchResultOffersView.types';
 
 export const CatalogSearchResultOffersView: FC<CatalogSearchResultOffersViewProps> = props =>
 {
-    const { offers = [] } = props;
-    const { catalogState } = useCatalogContext();
+    const { offers = [], ...rest } = props;
+    const { catalogState = null } = useCatalogContext();
     const { activeOffer = null } = catalogState;
 
     useEffect(() =>
@@ -19,13 +20,13 @@ export const CatalogSearchResultOffersView: FC<CatalogSearchResultOffersViewProp
     }, [ offers ]);
 
     return (
-        <div className="row row-cols-5 align-content-start g-0 mb-n1 w-100 catalog-offers-container h-100">
+        <NitroCardGridView columns={ 5 } { ...rest }>
             { offers && (offers.length > 0) && offers.map((offer, index) =>
                 {
                     const isActive = (activeOffer && (activeOffer.products[0].furniClassId === offer.id));
 
                     return <CatalogSearchResultOfferView key={ index } isActive={ isActive } offer={ offer } />
-                }) }
-        </div>
+                })}
+        </NitroCardGridView>
     );
 }
diff --git a/src/views/catalog/views/search/CatalogSearchView.scss b/src/views/catalog/views/search/CatalogSearchView.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/views/catalog/views/search/CatalogSearchView.tsx b/src/views/catalog/views/search/CatalogSearchView.tsx
index af6ffb41..ecb9b430 100644
--- a/src/views/catalog/views/search/CatalogSearchView.tsx
+++ b/src/views/catalog/views/search/CatalogSearchView.tsx
@@ -110,7 +110,7 @@ export const CatalogSearchView: FC<CatalogSearchViewProps> = props =>
     }, [ searchValue, processSearch ]);
 
     return (
-        <div className="d-flex mb-1">
+        <div className="d-flex">
             <div className="d-flex flex-grow-1 me-1">
                 <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } value={ searchValue } onChange={ event => setSearchValue(event.target.value) } />
             </div>
diff --git a/src/views/friends/FriendListMessageHandler.types.ts b/src/views/friends/FriendListMessageHandler.types.ts
deleted file mode 100644
index 2a810612..00000000
--- a/src/views/friends/FriendListMessageHandler.types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-
-export interface FriendListMessageHandlerProps
-{
-    
-}
diff --git a/src/views/friends/FriendListMessageHandler.tsx b/src/views/friends/FriendsMessageHandler.tsx
similarity index 54%
rename from src/views/friends/FriendListMessageHandler.tsx
rename to src/views/friends/FriendsMessageHandler.tsx
index e84e72a5..ce84725e 100644
--- a/src/views/friends/FriendListMessageHandler.tsx
+++ b/src/views/friends/FriendsMessageHandler.tsx
@@ -2,20 +2,19 @@ import { FriendListFragmentEvent, FriendListUpdateEvent, FriendRequestsEvent, Ge
 import { FC, useCallback } from 'react';
 import { CreateMessageHook, SendMessageHook } from '../../hooks/messages/message-event';
 import { MessengerSettings } from './common/MessengerSettings';
-import { useFriendListContext } from './context/FriendListContext';
-import { FriendListMessageHandlerProps } from './FriendListMessageHandler.types';
-import { FriendListActions } from './reducers/FriendListReducer';
+import { useFriendsContext } from './context/FriendsContext';
+import { FriendsActions } from './reducers/FriendsReducer';
 
-export const FriendListMessageHandler: FC<FriendListMessageHandlerProps> = props =>
+export const FriendsMessageHandler: FC<{}> = props =>
 {
-    const { friendListState = null, dispatchFriendListState = null } = useFriendListContext();
+    const { friendsState = null, dispatchFriendsState = null } = useFriendsContext();
 
     const onMessengerInitEvent = useCallback((event: MessengerInitEvent) =>
     {
         const parser = event.getParser();
 
-        dispatchFriendListState({
-            type: FriendListActions.UPDATE_SETTINGS,
+        dispatchFriendsState({
+            type: FriendsActions.UPDATE_SETTINGS,
             payload: {
                 settings: new MessengerSettings(
                     parser.userFriendLimit,
@@ -26,47 +25,47 @@ export const FriendListMessageHandler: FC<FriendListMessageHandlerProps> = props
         });
 
         SendMessageHook(new GetFriendRequestsComposer());
-    }, [ dispatchFriendListState ]);
+    }, [ dispatchFriendsState ]);
 
-    const onFriendListFragmentEvent = useCallback((event: FriendListFragmentEvent) =>
+    const onFriendsFragmentEvent = useCallback((event: FriendListFragmentEvent) =>
     {
         const parser = event.getParser();
 
-        dispatchFriendListState({
-            type: FriendListActions.PROCESS_FRAGMENT,
+        dispatchFriendsState({
+            type: FriendsActions.PROCESS_FRAGMENT,
             payload: {
                 fragment: parser.fragment
             }
         });
-    }, [ dispatchFriendListState ]);
+    }, [ dispatchFriendsState ]);
 
-    const onFriendListUpdateEvent = useCallback((event: FriendListUpdateEvent) =>
+    const onFriendsUpdateEvent = useCallback((event: FriendListUpdateEvent) =>
     {
         const parser = event.getParser();
 
-        dispatchFriendListState({
-            type: FriendListActions.PROCESS_UPDATE,
+        dispatchFriendsState({
+            type: FriendsActions.PROCESS_UPDATE,
             payload: {
                 update: parser
             }
         });
-    }, [ dispatchFriendListState ]);
+    }, [ dispatchFriendsState ]);
 
     const onFriendRequestsEvent = useCallback((event: FriendRequestsEvent) =>
     {
         const parser = event.getParser();
         
-        dispatchFriendListState({
-            type: FriendListActions.PROCESS_REQUESTS,
+        dispatchFriendsState({
+            type: FriendsActions.PROCESS_REQUESTS,
             payload: {
                 requests: parser.requests
             }
         });
-    }, [ dispatchFriendListState ]);
+    }, [ dispatchFriendsState ]);
 
     CreateMessageHook(MessengerInitEvent, onMessengerInitEvent);
-    CreateMessageHook(FriendListFragmentEvent, onFriendListFragmentEvent);
-    CreateMessageHook(FriendListUpdateEvent, onFriendListUpdateEvent);
+    CreateMessageHook(FriendListFragmentEvent, onFriendsFragmentEvent);
+    CreateMessageHook(FriendListUpdateEvent, onFriendsUpdateEvent);
     CreateMessageHook(FriendRequestsEvent, onFriendRequestsEvent);
 
     return null;
diff --git a/src/views/friends/FriendsView.scss b/src/views/friends/FriendsView.scss
index 1d882087..3d55929f 100644
--- a/src/views/friends/FriendsView.scss
+++ b/src/views/friends/FriendsView.scss
@@ -1,5 +1,6 @@
-.nitro-friend-list {
+.nitro-friends {
     width: 250px;
 }
 
 @import './views/friend-bar/FriendBarView';
+@import './views/messenger/FriendsMessengerView';
diff --git a/src/views/friends/FriendsView.tsx b/src/views/friends/FriendsView.tsx
index 6e2d74eb..0c9415f7 100644
--- a/src/views/friends/FriendsView.tsx
+++ b/src/views/friends/FriendsView.tsx
@@ -1,54 +1,62 @@
 import { MessengerInitComposer, RoomEngineObjectEvent, RoomObjectCategory, RoomObjectUserType } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useReducer, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { GetRoomSession, LocalizeText } from '../../api';
-import { FriendEnteredRoomEvent, FriendListEvent } from '../../events';
-import { FriendListContentEvent } from '../../events/friend-list/FriendListContentEvent';
-import { FriendListSendFriendRequestEvent } from '../../events/friend-list/FriendListSendFriendRequestEvent';
+import { GetRoomSession } from '../../api';
+import { FriendEnteredRoomEvent, FriendListContentEvent, FriendsEvent } from '../../events';
+import { FriendsSendFriendRequestEvent } from '../../events/friends/FriendsSendFriendRequestEvent';
 import { useRoomEngineEvent } from '../../hooks/events';
 import { dispatchUiEvent, useUiEvent } from '../../hooks/events/ui/ui-event';
 import { SendMessageHook } from '../../hooks/messages/message-event';
-import { NitroCardAccordionItemView, NitroCardAccordionView, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../layout';
-import { FriendListContextProvider } from './context/FriendListContext';
-import { FriendListMessageHandler } from './FriendListMessageHandler';
-import { FriendListReducer, initialFriendList } from './reducers/FriendListReducer';
+import { FriendsContextProvider } from './context/FriendsContext';
+import { FriendsMessageHandler } from './FriendsMessageHandler';
+import { FriendsReducer, initialFriends } from './reducers/FriendsReducer';
 import { FriendBarView } from './views/friend-bar/FriendBarView';
-import { FriendsListView } from './views/list/FriendsListView';
-
-const TABS: string[] = ['friendlist.friends', 'generic.search'];
+import { FriendsListView } from './views/friends-list/FriendsListView';
+import { FriendsMessengerView } from './views/messenger/FriendsMessengerView';
 
 export const FriendsView: FC<{}> = props =>
 {
-    const [ friendListState, dispatchFriendListState ] = useReducer(FriendListReducer, initialFriendList);
-    const { friends = null, requests = null, settings = null } = friendListState;
+    const [ friendsState, dispatchFriendsState ] = useReducer(FriendsReducer, initialFriends);
+    const { friends = [], requests = [], settings = null } = friendsState;
 
-    const [ isVisible, setIsVisible ] = useState(false);
     const [ isReady, setIsReady ] = useState(false);
-    const [ currentTab, setCurrentTab ] = useState<number>(0);
+    const [ isListVisible, setIsListVisible ] = useState(false);
 
-    const onFriendListEvent = useCallback((event: FriendListEvent) =>
+    useEffect(() =>
+    {
+        SendMessageHook(new MessengerInitComposer());
+    }, []);
+
+    useEffect(() =>
+    {
+        if(!settings) return;
+
+        setIsReady(true);
+    }, [ settings ]);
+
+    const onFriendsEvent = useCallback((event: FriendsEvent) =>
     {
         switch(event.type)
         {
-            case FriendListEvent.SHOW_FRIEND_LIST:
-                setIsVisible(true);
+            case FriendsEvent.SHOW_FRIEND_LIST:
+                setIsListVisible(true);
                 return;
-            case FriendListEvent.TOGGLE_FRIEND_LIST:
-                setIsVisible(value => !value);
+            case FriendsEvent.TOGGLE_FRIEND_LIST:
+                setIsListVisible(value => !value);
                 return;
-            case FriendListSendFriendRequestEvent.SEND_FRIEND_REQUEST:
-                const requestEvent = (event as FriendListSendFriendRequestEvent);
+            case FriendsSendFriendRequestEvent.SEND_FRIEND_REQUEST:
+                const requestEvent = (event as FriendsSendFriendRequestEvent);
                 return;
-            case FriendListEvent.REQUEST_FRIEND_LIST:
-                dispatchUiEvent(new FriendListContentEvent(friendListState.friends));
+            case FriendsEvent.REQUEST_FRIEND_LIST:
+                dispatchUiEvent(new FriendListContentEvent(friendsState.friends));
                 return;
         }
-    }, [friendListState.friends]);
+    }, [ friendsState.friends ]);
 
-    useUiEvent(FriendListEvent.SHOW_FRIEND_LIST, onFriendListEvent);
-    useUiEvent(FriendListEvent.TOGGLE_FRIEND_LIST, onFriendListEvent);
-    useUiEvent(FriendListSendFriendRequestEvent.SEND_FRIEND_REQUEST, onFriendListEvent);
-    useUiEvent(FriendListEvent.REQUEST_FRIEND_LIST, onFriendListEvent);
+    useUiEvent(FriendsEvent.SHOW_FRIEND_LIST, onFriendsEvent);
+    useUiEvent(FriendsEvent.TOGGLE_FRIEND_LIST, onFriendsEvent);
+    useUiEvent(FriendsSendFriendRequestEvent.SEND_FRIEND_REQUEST, onFriendsEvent);
+    useUiEvent(FriendsEvent.REQUEST_FRIEND_LIST, onFriendsEvent);
 
     const onRoomEngineObjectEvent = useCallback((event: RoomEngineObjectEvent) =>
     {
@@ -62,7 +70,7 @@ export const FriendsView: FC<{}> = props =>
 
         if(!userData || (userData.type !== RoomObjectUserType.getTypeNumber(RoomObjectUserType.USER))) return;
 
-        const friend = friendListState.friends.find(friend =>
+        const friend = friendsState.friends.find(friend =>
             {
                 return (friend.id === userData.webID);
             });
@@ -70,67 +78,26 @@ export const FriendsView: FC<{}> = props =>
         if(!friend) return;
 
         dispatchUiEvent(new FriendEnteredRoomEvent(userData.roomIndex, RoomObjectCategory.UNIT, userData.webID, userData.name, userData.type));
-    }, [ friendListState.friends ]);
+    }, [ friendsState.friends ]);
 
     useRoomEngineEvent(RoomEngineObjectEvent.ADDED, onRoomEngineObjectEvent);
 
-    useEffect(() =>
-    {
-        if(!settings) return;
-
-        setIsReady(true);
-    }, [ settings ]);
-
-    useEffect(() =>
-    {
-        SendMessageHook(new MessengerInitComposer());
-    }, []);
-
     const onlineFriends = useMemo(() =>
     {
-        if(!friends) return [];
-
         return friends.filter(f => f.online);
     }, [ friends ]);
 
     const offlineFriends = useMemo(() =>
     {
-        if(!friends) return [];
-
         return friends.filter(f => !f.online);
     }, [ friends ]);
 
     return (
-        <FriendListContextProvider value={ { friendListState, dispatchFriendListState } }>
-            <FriendListMessageHandler />
-            { isReady && createPortal(<FriendBarView />, document.getElementById('toolbar-friend-bar-container')) }
-            { isVisible &&
-                <NitroCardView className="nitro-friend-list">
-                    <NitroCardHeaderView headerText={ LocalizeText('friendlist.friends') } onCloseClick={ () => setIsVisible(false) } />
-                    <NitroCardContentView className="p-0">
-                        <NitroCardTabsView>
-                            { TABS.map((tab, index) =>
-                                {
-                                    return (<NitroCardTabsItemView key={ index } isActive={ currentTab === index } onClick={ () => setCurrentTab(index) }>
-                                        { LocalizeText(tab) }
-                                    </NitroCardTabsItemView>);
-                                }) }
-                        </NitroCardTabsView>
-                        <div className="text-black">
-                            { currentTab === 0 && <NitroCardAccordionView>
-                                <NitroCardAccordionItemView headerText={ LocalizeText('friendlist.friends') + ` (${onlineFriends.length})` } defaultState={ true }>
-                                   <FriendsListView list={ onlineFriends } />
-                                </NitroCardAccordionItemView>
-                                <NitroCardAccordionItemView headerText={ LocalizeText('friendlist.friends.offlinecaption') + ` (${offlineFriends.length})` }>
-                                    <FriendsListView list={ offlineFriends } />
-                                </NitroCardAccordionItemView>
-                                { requests.length > 0 && <NitroCardAccordionItemView headerText={ LocalizeText('friendlist.tab.friendrequests') + ` (${requests.length})` }>
-                                    <FriendsListView list={ requests } />
-                                </NitroCardAccordionItemView> }
-                            </NitroCardAccordionView> }
-                        </div>
-                    </NitroCardContentView>
-                </NitroCardView> }
-        </FriendListContextProvider>
+        <FriendsContextProvider value={ { friendsState, dispatchFriendsState } }>
+            <FriendsMessageHandler />
+            { isReady && createPortal(<FriendBarView onlineFriends={ onlineFriends } />, document.getElementById('toolbar-friend-bar-container')) }
+            { isListVisible && <FriendsListView onlineFriends={ onlineFriends } offlineFriends={ offlineFriends } friendRequests={ requests } onCloseClick={ () => setIsListVisible(false) } /> }
+            <FriendsMessengerView />
+        </FriendsContextProvider>
     );
 }
diff --git a/src/views/friends/common/MessengerThread.ts b/src/views/friends/common/MessengerThread.ts
new file mode 100644
index 00000000..a2ee75e1
--- /dev/null
+++ b/src/views/friends/common/MessengerThread.ts
@@ -0,0 +1,83 @@
+import { LocalizeText } from '../../../api';
+import { MessengerFriend } from './MessengerFriend';
+import { MessengerThreadChat } from './MessengerThreadChat';
+import { MessengerThreadChatGroup } from './MessengerThreadChatGroup';
+
+export class MessengerThread
+{
+    public static MESSAGE_RECEIVED: string = 'MT_MESSAGE_RECEIVED';
+
+    private _participant: MessengerFriend;
+    private _groups: MessengerThreadChatGroup[];
+    private _lastUpdated: Date;
+    private _unread: boolean;
+
+    constructor(participant: MessengerFriend, isNew: boolean = true)
+    {
+        this._participant = participant;
+        this._groups = [];
+        this._lastUpdated = new Date();
+        this._unread = false;
+
+        if(isNew)
+        {
+            this.addMessage(-1, LocalizeText('messenger.moderationinfo'), 0, null, MessengerThreadChat.SECURITY_NOTIFICATION);
+
+            this._unread = false;
+        }
+    }
+
+    public addMessage(senderId: number, message: string, secondsSinceSent: number = 0, extraData: string = null, type: number = 0): MessengerThreadChat
+    {
+        const group = this.getLastGroup(senderId);
+
+        if(!group) return;
+
+        const chat = new MessengerThreadChat(senderId, message, secondsSinceSent, extraData, type);
+
+        group.addChat(chat);
+
+        this._lastUpdated = new Date();
+        this._unread = true;
+
+        return chat;
+    }
+
+    private getLastGroup(userId: number): MessengerThreadChatGroup
+    {
+        let group = this._groups[(this._groups.length - 1)];
+
+        if(group && (group.userId === userId)) return group;
+
+        group = new MessengerThreadChatGroup(userId);
+
+        this._groups.push(group);
+
+        return group;
+    }
+
+    public setRead(): void
+    {
+        this._unread = false;
+    }
+
+    public get participant(): MessengerFriend
+    {
+        return this._participant;
+    }
+
+    public get groups(): MessengerThreadChatGroup[]
+    {
+        return this._groups;
+    }
+
+    public get lastUpdated(): Date
+    {
+        return this._lastUpdated;
+    }
+
+    public get unread(): boolean
+    {
+        return this._unread;
+    }
+}
diff --git a/src/views/friends/common/MessengerThreadChat.ts b/src/views/friends/common/MessengerThreadChat.ts
new file mode 100644
index 00000000..2927fecc
--- /dev/null
+++ b/src/views/friends/common/MessengerThreadChat.ts
@@ -0,0 +1,54 @@
+export class MessengerThreadChat
+{
+    public static CHAT: number = 0;
+    public static ROOM_INVITE: number = 1;
+    public static STATUS_NOTIFICATION: number = 2;
+    public static SECURITY_NOTIFICATION: number = 3;
+
+    private _type: number;
+    private _senderId: number;
+    private _message: string;
+    private _secondsSinceSent: number;
+    private _extraData: string;
+    private _date: Date;
+
+    constructor(senderId: number, message: string, secondsSinceSent: number = 0, extraData: string = null, type: number = 0)
+    {
+        this._type = type;
+        this._senderId = senderId;
+        this._message = message;
+        this._secondsSinceSent = secondsSinceSent;
+        this._extraData = extraData;
+        this._date = new Date();
+    }
+
+    public get type(): number
+    {
+        return this._type;
+    }
+
+    public get senderId(): number
+    {
+        return this._senderId;
+    }
+
+    public get message(): string
+    {
+        return this._message;
+    }
+
+    public get secondsSinceSent(): number
+    {
+        return this._secondsSinceSent;
+    }
+
+    public get extraData(): string
+    {
+        return this._extraData;
+    }
+
+    public get date(): Date
+    {
+        return this._date;
+    }
+}
diff --git a/src/views/friends/common/MessengerThreadChatGroup.ts b/src/views/friends/common/MessengerThreadChatGroup.ts
new file mode 100644
index 00000000..661dcb07
--- /dev/null
+++ b/src/views/friends/common/MessengerThreadChatGroup.ts
@@ -0,0 +1,28 @@
+import { MessengerThreadChat } from './MessengerThreadChat';
+
+export class MessengerThreadChatGroup
+{
+    private _userId: number;
+    private _chats: MessengerThreadChat[];
+
+    constructor(userId: number)
+    {
+        this._userId = userId;
+        this._chats = [];
+    }
+
+    public addChat(message: MessengerThreadChat): void
+    {
+        this._chats.push(message);
+    }
+
+    public get userId(): number
+    {
+        return this._userId;
+    }
+
+    public get chats(): MessengerThreadChat[]
+    {
+        return this._chats;
+    }
+}
diff --git a/src/views/friends/context/FriendListContext.tsx b/src/views/friends/context/FriendListContext.tsx
deleted file mode 100644
index 39d23764..00000000
--- a/src/views/friends/context/FriendListContext.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { createContext, FC, useContext } from 'react';
-import { FriendListContextProps, IFriendListContext } from './FriendListContext.type';
-
-const FriendListContext = createContext<IFriendListContext>({
-    friendListState: null,
-    dispatchFriendListState: null
-});
-
-export const FriendListContextProvider: FC<FriendListContextProps> = props =>
-{
-    return <FriendListContext.Provider value={ props.value }>{ props.children }</FriendListContext.Provider>
-}
-
-export const useFriendListContext = () => useContext(FriendListContext);
diff --git a/src/views/friends/context/FriendListContext.type.ts b/src/views/friends/context/FriendListContext.type.ts
deleted file mode 100644
index 6e74c4cb..00000000
--- a/src/views/friends/context/FriendListContext.type.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Dispatch, ProviderProps } from 'react';
-import { IFriendListAction, IFriendListState } from '../reducers/FriendListReducer';
-
-export interface IFriendListContext
-{
-    friendListState: IFriendListState;
-    dispatchFriendListState: Dispatch<IFriendListAction>;
-}
-
-export interface FriendListContextProps extends ProviderProps<IFriendListContext>
-{
-
-}
diff --git a/src/views/friends/context/FriendsContext.tsx b/src/views/friends/context/FriendsContext.tsx
new file mode 100644
index 00000000..5b551102
--- /dev/null
+++ b/src/views/friends/context/FriendsContext.tsx
@@ -0,0 +1,14 @@
+import { createContext, FC, useContext } from 'react';
+import { FriendsContextProps, IFriendsContext } from './FriendsContext.type';
+
+const FriendsContext = createContext<IFriendsContext>({
+    friendsState: null,
+    dispatchFriendsState: null
+});
+
+export const FriendsContextProvider: FC<FriendsContextProps> = props =>
+{
+    return <FriendsContext.Provider value={ props.value }>{ props.children }</FriendsContext.Provider>
+}
+
+export const useFriendsContext = () => useContext(FriendsContext);
diff --git a/src/views/friends/context/FriendsContext.type.ts b/src/views/friends/context/FriendsContext.type.ts
new file mode 100644
index 00000000..a61ef776
--- /dev/null
+++ b/src/views/friends/context/FriendsContext.type.ts
@@ -0,0 +1,13 @@
+import { Dispatch, ProviderProps } from 'react';
+import { IFriendsAction, IFriendsState } from '../reducers/FriendsReducer';
+
+export interface IFriendsContext
+{
+    friendsState: IFriendsState;
+    dispatchFriendsState: Dispatch<IFriendsAction>;
+}
+
+export interface FriendsContextProps extends ProviderProps<IFriendsContext>
+{
+
+}
diff --git a/src/views/friends/reducers/FriendListReducer.tsx b/src/views/friends/reducers/FriendsReducer.tsx
similarity index 76%
rename from src/views/friends/reducers/FriendListReducer.tsx
rename to src/views/friends/reducers/FriendsReducer.tsx
index 3139d735..1901bb49 100644
--- a/src/views/friends/reducers/FriendListReducer.tsx
+++ b/src/views/friends/reducers/FriendsReducer.tsx
@@ -11,14 +11,14 @@ function compareName(a, b)
     return 0;
 }
 
-export interface IFriendListState
+export interface IFriendsState
 {
     settings: MessengerSettings;
     friends: MessengerFriend[];
     requests: MessengerRequest[];
 }
 
-export interface IFriendListAction
+export interface IFriendsAction
 {
     type: string;
     payload: {
@@ -26,34 +26,36 @@ export interface IFriendListAction
         fragment?: FriendParser[];
         update?: FriendListUpdateParser;
         requests?: FriendRequestData[];
+        numberValue?: number;
+        boolValue?: boolean;
     }
 }
 
-export class FriendListActions
+export class FriendsActions
 {
-    public static RESET_STATE: string = 'FLA_RESET_STATE';
-    public static UPDATE_SETTINGS: string = 'FLA_UPDATE_SETTINGS';
-    public static PROCESS_FRAGMENT: string = 'FLA_PROCESS_FRAGMENT';
-    public static PROCESS_UPDATE: string = 'FLA_PROCESS_UPDATE';
-    public static PROCESS_REQUESTS: string = 'FLA_PROCESS_REQUESTS';
+    public static RESET_STATE: string = 'FA_RESET_STATE';
+    public static UPDATE_SETTINGS: string = 'FA_UPDATE_SETTINGS';
+    public static PROCESS_FRAGMENT: string = 'FA_PROCESS_FRAGMENT';
+    public static PROCESS_UPDATE: string = 'FA_PROCESS_UPDATE';
+    public static PROCESS_REQUESTS: string = 'FA_PROCESS_REQUESTS';
 }
 
-export const initialFriendList: IFriendListState = {
+export const initialFriends: IFriendsState = {
     settings: null,
     friends: [],
     requests: []
 }
 
-export const FriendListReducer: Reducer<IFriendListState, IFriendListAction> = (state, action) =>
+export const FriendsReducer: Reducer<IFriendsState, IFriendsAction> = (state, action) =>
 {
     switch(action.type)
     {
-        case FriendListActions.UPDATE_SETTINGS: {
+        case FriendsActions.UPDATE_SETTINGS: {
             const settings = (action.payload.settings || state.settings || null);
 
             return { ...state, settings };
         }
-        case FriendListActions.PROCESS_FRAGMENT: {
+        case FriendsActions.PROCESS_FRAGMENT: {
             const fragment = (action.payload.fragment || null);
             let friends = [ ...state.friends ];
 
@@ -85,7 +87,7 @@ export const FriendListReducer: Reducer<IFriendListState, IFriendListAction> = (
 
             return { ...state, friends };
         }
-        case FriendListActions.PROCESS_UPDATE: {
+        case FriendsActions.PROCESS_UPDATE: {
             const update = (action.payload.update || null);
             let friends = [ ...state.friends ];
 
@@ -95,11 +97,17 @@ export const FriendListReducer: Reducer<IFriendListState, IFriendListAction> = (
                 {
                     const index = friends.findIndex(existingFriend => (existingFriend.id === friend.id));
 
-                    const newFriend = new MessengerFriend();
-                    newFriend.populate(friend);
+                    if(index === -1)
+                    {
+                        const newFriend = new MessengerFriend();
+                        newFriend.populate(friend);
 
-                    if(index > -1) friends[index] = newFriend;
-                    else friends.unshift(newFriend);
+                        friends.unshift(newFriend);
+                    }
+                    else
+                    {
+                        friends[index].populate(friend);
+                    }
                 }
 
                 for(const friend of update.addedFriends) processUpdate(friend);
@@ -118,7 +126,7 @@ export const FriendListReducer: Reducer<IFriendListState, IFriendListAction> = (
 
             return { ...state, friends };
         }
-        case FriendListActions.PROCESS_REQUESTS: {
+        case FriendsActions.PROCESS_REQUESTS: {
             const newRequests = (action.payload.requests || null);
             let requests = [ ...state.requests ];
 
diff --git a/src/views/friends/views/friend-bar-item/FriendBarItemView.tsx b/src/views/friends/views/friend-bar-item/FriendBarItemView.tsx
index b845f530..40873386 100644
--- a/src/views/friends/views/friend-bar-item/FriendBarItemView.tsx
+++ b/src/views/friends/views/friend-bar-item/FriendBarItemView.tsx
@@ -1,6 +1,6 @@
 import { FollowFriendMessageComposer, MouseEventType, UserProfileComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useRef, useState } from 'react';
-import { LocalizeText } from '../../../../api';
+import { LocalizeText, OpenMessengerChat } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks/messages';
 import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
 import { FriendBarItemViewProps } from './FriendBarItemView.types';
@@ -16,6 +16,13 @@ export const FriendBarItemView: FC<FriendBarItemViewProps> = props =>
         SendMessageHook(new FollowFriendMessageComposer(friend.id));
     }, [ friend ]);
 
+    const openMessengerChat = useCallback(() =>
+    {
+        if(!friend) return;
+        
+        OpenMessengerChat(friend.id);
+    }, [ friend ]);
+
     const openProfile = useCallback(() =>
     {
         SendMessageHook(new UserProfileComposer(friend.id));
@@ -59,7 +66,7 @@ export const FriendBarItemView: FC<FriendBarItemViewProps> = props =>
             <div className="text-truncate">{ friend.name }</div>
             { isVisible &&
                 <div className="d-flex justify-content-between">
-                    <i className="icon icon-fb-chat cursor-pointer" />
+                    <i onClick={ openMessengerChat } className="icon icon-fb-chat cursor-pointer" />
                     { friend.followingAllowed && <i onClick={ followFriend } className="icon icon-fb-visit cursor-pointer" /> }
                     <i onClick={ openProfile } className="icon icon-fb-profile cursor-pointer" />
                 </div> }
diff --git a/src/views/friends/views/friend-bar/FriendBarView.tsx b/src/views/friends/views/friend-bar/FriendBarView.tsx
index 3931c4f4..a0347c94 100644
--- a/src/views/friends/views/friend-bar/FriendBarView.tsx
+++ b/src/views/friends/views/friend-bar/FriendBarView.tsx
@@ -1,20 +1,14 @@
 import { FC, useMemo, useState } from 'react';
-import { useFriendListContext } from '../../context/FriendListContext';
 import { FriendBarItemView } from '../friend-bar-item/FriendBarItemView';
 import { FriendBarViewProps } from './FriendBarView.types';
 
 export const FriendBarView: FC<FriendBarViewProps> = props =>
 {
-    const { friendListState = null } = useFriendListContext();
-    const { friends = null } = friendListState;
+    const { onlineFriends = null } = props;
+
     const [ indexOffset, setIndexOffset ] = useState(0);
     const [ maxDisplayCount, setMaxDisplayCount ] = useState(3);
 
-    const onlineFriends = useMemo(() =>
-    {
-        return friends.filter(friend => friend.online);
-    }, [ friends ]);
-
     const canDecreaseIndex = useMemo(() =>
     {
         if(indexOffset === 0) return false;
diff --git a/src/views/friends/views/friend-bar/FriendBarView.types.ts b/src/views/friends/views/friend-bar/FriendBarView.types.ts
index f47af57f..61a040ce 100644
--- a/src/views/friends/views/friend-bar/FriendBarView.types.ts
+++ b/src/views/friends/views/friend-bar/FriendBarView.types.ts
@@ -1,4 +1,5 @@
+import { MessengerFriend } from './../../common/MessengerFriend';
 export interface FriendBarViewProps
 {
-    
+    onlineFriends: MessengerFriend[];
 }
diff --git a/src/views/friends/views/friend-item/FriendsListItemView.tsx b/src/views/friends/views/friends-group-item/FriendsGroupItemView.tsx
similarity index 85%
rename from src/views/friends/views/friend-item/FriendsListItemView.tsx
rename to src/views/friends/views/friends-group-item/FriendsGroupItemView.tsx
index bac0415d..60b2066a 100644
--- a/src/views/friends/views/friend-item/FriendsListItemView.tsx
+++ b/src/views/friends/views/friends-group-item/FriendsGroupItemView.tsx
@@ -1,12 +1,12 @@
 import { FollowFriendMessageComposer, SetRelationshipStatusComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
-import { LocalizeText } from '../../../../api';
+import { LocalizeText, OpenMessengerChat } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks';
 import { UserProfileIconView } from '../../../shared/user-profile-icon/UserProfileIconView';
 import { MessengerFriend } from '../../common/MessengerFriend';
-import { FriendsListItemViewProps } from './FriendsListItemView.types';
+import { FriendsGroupItemViewProps } from './FriendsGroupItemView.types';
 
-export const FriendsListItemView: FC<FriendsListItemViewProps> = props =>
+export const FriendsGroupItemView: FC<FriendsGroupItemViewProps> = props =>
 {
     const { friend = null } = props;
 
@@ -19,6 +19,13 @@ export const FriendsListItemView: FC<FriendsListItemViewProps> = props =>
         SendMessageHook(new FollowFriendMessageComposer(friend.id));
     }, [ friend ]);
 
+    const openMessengerChat = useCallback(() =>
+    {
+        if(!friend) return;
+        
+        OpenMessengerChat(friend.id);
+    }, [ friend ]);
+
     const getCurrentRelationshipName = useCallback(() =>
     {
         if(!friend) return 'none';
@@ -48,7 +55,7 @@ export const FriendsListItemView: FC<FriendsListItemViewProps> = props =>
             <div className="ms-auto d-flex align-items-center gap-1">
                 { !isExpanded && <>
                     { friend.followingAllowed && <i onClick={ followFriend } className="icon icon-friendlist-follow cursor-pointer" title={ LocalizeText('friendlist.tip.follow') } /> }
-                    { friend.online && <i className="icon icon-friendlist-chat cursor-pointer" title={ LocalizeText('friendlist.tip.im') } /> }
+                    { friend.online && <i className="icon icon-friendlist-chat cursor-pointer" onClick={ openMessengerChat } title={ LocalizeText('friendlist.tip.im') } /> }
                     <i className={ 'icon cursor-pointer icon-relationship-' + getCurrentRelationshipName() } onClick={ () => setIsExpanded(true) } title={ LocalizeText('infostand.link.relationship') } />
                     </> }
                 { isExpanded && <>
diff --git a/src/views/friends/views/friend-item/FriendsListItemView.types.ts b/src/views/friends/views/friends-group-item/FriendsGroupItemView.types.ts
similarity index 69%
rename from src/views/friends/views/friend-item/FriendsListItemView.types.ts
rename to src/views/friends/views/friends-group-item/FriendsGroupItemView.types.ts
index df44d3b5..345532b1 100644
--- a/src/views/friends/views/friend-item/FriendsListItemView.types.ts
+++ b/src/views/friends/views/friends-group-item/FriendsGroupItemView.types.ts
@@ -1,6 +1,6 @@
 import { MessengerFriend } from '../../common/MessengerFriend';
 
-export interface FriendsListItemViewProps
+export interface FriendsGroupItemViewProps
 {
     friend: MessengerFriend;
 }
diff --git a/src/views/friends/views/list/FriendsListView.tsx b/src/views/friends/views/friends-group/FriendsGroupView.tsx
similarity index 58%
rename from src/views/friends/views/list/FriendsListView.tsx
rename to src/views/friends/views/friends-group/FriendsGroupView.tsx
index 86ed2707..c5eb989b 100644
--- a/src/views/friends/views/list/FriendsListView.tsx
+++ b/src/views/friends/views/friends-group/FriendsGroupView.tsx
@@ -1,11 +1,11 @@
 import React, { FC } from 'react';
 import { MessengerFriend } from '../../common/MessengerFriend';
 import { MessengerRequest } from '../../common/MessengerRequest';
-import { FriendsListItemView } from '../friend-item/FriendsListItemView';
-import { FriendsRequestItemView } from '../request-item/FriendsRequestItemView';
-import { FriendsListViewProps } from './FriendsListView.types';
+import { FriendsGroupItemView } from '../friends-group-item/FriendsGroupItemView';
+import { FriendsRequestItemView } from '../friends-request-item/FriendsRequestItemView';
+import { FriendsGroupViewProps } from './FriendsGroupView.types';
 
-export const FriendsListView: FC<FriendsListViewProps> = props =>
+export const FriendsGroupView: FC<FriendsGroupViewProps> = props =>
 {
     const { list =  null } = props;
 
@@ -15,7 +15,7 @@ export const FriendsListView: FC<FriendsListViewProps> = props =>
         { list.map((item, index) =>
         {
             if(item instanceof MessengerFriend)
-                return <FriendsListItemView key={ index } friend={ item } />
+                return <FriendsGroupItemView key={ index } friend={ item } />
             else if(item instanceof MessengerRequest)
                 return  <FriendsRequestItemView key={ index } request={ item } />
             else
diff --git a/src/views/friends/views/list/FriendsListView.types.ts b/src/views/friends/views/friends-group/FriendsGroupView.types.ts
similarity index 82%
rename from src/views/friends/views/list/FriendsListView.types.ts
rename to src/views/friends/views/friends-group/FriendsGroupView.types.ts
index 8a4c4bc9..48bc5ee6 100644
--- a/src/views/friends/views/list/FriendsListView.types.ts
+++ b/src/views/friends/views/friends-group/FriendsGroupView.types.ts
@@ -1,7 +1,7 @@
 import { MessengerFriend } from '../../common/MessengerFriend';
 import { MessengerRequest } from '../../common/MessengerRequest';
 
-export interface FriendsListViewProps
+export interface FriendsGroupViewProps
 {
     list: MessengerFriend[] | MessengerRequest[];
 }
diff --git a/src/views/friends/views/friends-list/FriendsListView.tsx b/src/views/friends/views/friends-list/FriendsListView.tsx
new file mode 100644
index 00000000..fd796044
--- /dev/null
+++ b/src/views/friends/views/friends-list/FriendsListView.tsx
@@ -0,0 +1,43 @@
+import { FC, useState } from 'react';
+import { LocalizeText } from '../../../../api';
+import { NitroCardAccordionItemView, NitroCardAccordionView, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../layout';
+import { FriendsGroupView } from '../friends-group/FriendsGroupView';
+import { FriendsListViewProps } from './FriendsListView.types';
+
+const TABS: string[] = ['friendlist.friends', 'generic.search'];
+
+export const FriendsListView: FC<FriendsListViewProps> = props =>
+{
+    const { onlineFriends = [], offlineFriends = [], friendRequests = [], onCloseClick = null } = props;
+    
+    const [ currentTab, setCurrentTab ] = useState<number>(0);
+
+    return (
+        <NitroCardView className="nitro-friends">
+                <NitroCardHeaderView headerText={ LocalizeText('friendlist.friends') } onCloseClick={ onCloseClick } />
+                <NitroCardContentView className="p-0">
+                    <NitroCardTabsView>
+                        { TABS.map((tab, index) =>
+                            {
+                                return (<NitroCardTabsItemView key={ index } isActive={ currentTab === index } onClick={ () => setCurrentTab(index) }>
+                                    { LocalizeText(tab) }
+                                </NitroCardTabsItemView>);
+                            }) }
+                    </NitroCardTabsView>
+                    <div className="text-black">
+                        { currentTab === 0 && <NitroCardAccordionView>
+                            <NitroCardAccordionItemView headerText={ LocalizeText('friendlist.friends') + ` (${onlineFriends.length})` } defaultState={ true }>
+                                <FriendsGroupView list={ onlineFriends } />
+                            </NitroCardAccordionItemView>
+                            <NitroCardAccordionItemView headerText={ LocalizeText('friendlist.friends.offlinecaption') + ` (${offlineFriends.length})` }>
+                                <FriendsGroupView list={ offlineFriends } />
+                            </NitroCardAccordionItemView>
+                            { friendRequests.length > 0 && <NitroCardAccordionItemView headerText={ LocalizeText('friendlist.tab.friendrequests') + ` (${friendRequests.length})` }>
+                                <FriendsGroupView list={ friendRequests } />
+                            </NitroCardAccordionItemView> }
+                        </NitroCardAccordionView> }
+                    </div>
+                </NitroCardContentView>
+            </NitroCardView>
+    );
+};
diff --git a/src/views/friends/views/friends-list/FriendsListView.types.ts b/src/views/friends/views/friends-list/FriendsListView.types.ts
new file mode 100644
index 00000000..01bfcc84
--- /dev/null
+++ b/src/views/friends/views/friends-list/FriendsListView.types.ts
@@ -0,0 +1,9 @@
+import { MessengerFriend } from './../../common/MessengerFriend';
+import { MessengerRequest } from './../../common/MessengerRequest';
+export interface FriendsListViewProps
+{
+    onCloseClick: () => void;
+    onlineFriends: MessengerFriend[];
+    offlineFriends: MessengerFriend[];
+    friendRequests: MessengerRequest[];
+}
diff --git a/src/views/friends/views/friends-request-item/FriendsRequestItemView.tsx b/src/views/friends/views/friends-request-item/FriendsRequestItemView.tsx
new file mode 100644
index 00000000..f25c42f9
--- /dev/null
+++ b/src/views/friends/views/friends-request-item/FriendsRequestItemView.tsx
@@ -0,0 +1,37 @@
+import { AcceptFriendMessageComposer, DeclineFriendMessageComposer } from '@nitrots/nitro-renderer';
+import { FC, useCallback } from 'react';
+import { SendMessageHook } from '../../../../hooks/messages/message-event';
+import { UserProfileIconView } from '../../../shared/user-profile-icon/UserProfileIconView';
+import { FriendsRequestItemViewProps } from './FriendsRequestItemView.types';
+
+export const FriendsRequestItemView: FC<FriendsRequestItemViewProps> = props =>
+{
+    const { request = null } = props;
+
+    const accept = useCallback(() =>
+    {
+        if(!request) return;
+        
+        SendMessageHook(new AcceptFriendMessageComposer(request.id));
+    }, [ request ]);
+
+    const decline = useCallback(() =>
+    {
+        if(!request) return;
+        
+        SendMessageHook(new DeclineFriendMessageComposer(false, request.id));
+    }, [ request ]);
+
+    if(!request) return null;
+
+    return (
+        <div className="px-2 py-1 d-flex gap-1 align-items-center">
+            <UserProfileIconView userId={ request.id } />
+            <div>{ request.name }</div>
+            <div className="ms-auto d-flex align-items-center gap-1">
+               <i className="icon icon-accept cursor-pointer" onClick={ accept } />
+               <i className="icon icon-deny cursor-pointer" onClick={ decline } />
+            </div>
+        </div>
+    );
+};
diff --git a/src/views/friends/views/friends-request-item/FriendsRequestItemView.types.ts b/src/views/friends/views/friends-request-item/FriendsRequestItemView.types.ts
new file mode 100644
index 00000000..4f5c38d5
--- /dev/null
+++ b/src/views/friends/views/friends-request-item/FriendsRequestItemView.types.ts
@@ -0,0 +1,6 @@
+import { MessengerRequest } from '../../common/MessengerRequest';
+
+export interface FriendsRequestItemViewProps
+{
+    request: MessengerRequest;
+}
diff --git a/src/views/friends/views/messenger-thread-group/FriendsMessengerThreadGroup.tsx b/src/views/friends/views/messenger-thread-group/FriendsMessengerThreadGroup.tsx
new file mode 100644
index 00000000..b0d30ea7
--- /dev/null
+++ b/src/views/friends/views/messenger-thread-group/FriendsMessengerThreadGroup.tsx
@@ -0,0 +1,48 @@
+import { FC } from 'react';
+import { GetSessionDataManager } from '../../../../api';
+import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
+import { MessengerThreadChat } from '../../common/MessengerThreadChat';
+import { FriendsMessengerThreadGroupProps } from './FriendsMessengerThreadGroup.types';
+
+export const FriendsMessengerThreadGroup: FC<FriendsMessengerThreadGroupProps> = props =>
+{
+    const { thread = null, group = null } = props;
+
+    if(!thread || !group) return null;
+
+    if(group.userId === -1)
+    {
+        return (
+            <div className="d-flex gap-2 w-100 justify-content-start">
+                { group.chats.map((chat, index) =>
+                    {
+                        return (
+                            <div key={ index } className="text-break">
+                                { chat.type === MessengerThreadChat.SECURITY_NOTIFICATION &&
+                                    <div className="bg-light rounded mb-2 d-flex gap-2 px-2 py-1 small text-muted align-items-center">
+                                        <i className="icon icon-friendlist-warning flex-shrink-0" />
+                                        <div>{ chat.message }</div>
+                                    </div> }
+                            </div>
+                        );
+                    }) }
+            </div>
+        );
+    }
+
+    return (
+        <div className={ 'd-flex gap-2 w-100 justify-content-' + (group.userId === 0 ? 'end' : 'start') }>
+            { (group.userId > 0) &&
+                <div className="message-avatar flex-shrink-0">
+                    <AvatarImageView figure={ thread.participant.figure } direction={ 2 } />
+                </div> }
+            <div className={ 'bg-light text-black border-radius mb-2 rounded py-1 px-2 messages-group-' + (group.userId === 0 ? 'right' : 'left') }>
+                { group.chats.map((chat, index) => <div key={ index } className="text-break">{ chat.message }</div>) }
+            </div>
+            { (group.userId === 0) &&
+                <div className="message-avatar flex-shrink-0">
+                    <AvatarImageView figure={ GetSessionDataManager().figure } direction={ 4 } />
+                </div> }
+        </div>
+    );
+}
diff --git a/src/views/friends/views/messenger-thread-group/FriendsMessengerThreadGroup.types.ts b/src/views/friends/views/messenger-thread-group/FriendsMessengerThreadGroup.types.ts
new file mode 100644
index 00000000..12a0ed17
--- /dev/null
+++ b/src/views/friends/views/messenger-thread-group/FriendsMessengerThreadGroup.types.ts
@@ -0,0 +1,8 @@
+import { MessengerThread } from '../../common/MessengerThread';
+import { MessengerThreadChatGroup } from '../../common/MessengerThreadChatGroup';
+
+export interface FriendsMessengerThreadGroupProps
+{
+    thread: MessengerThread;
+    group: MessengerThreadChatGroup;
+}
diff --git a/src/views/friends/views/messenger-thread/FriendsMessengerThreadView.tsx b/src/views/friends/views/messenger-thread/FriendsMessengerThreadView.tsx
new file mode 100644
index 00000000..3bf6326a
--- /dev/null
+++ b/src/views/friends/views/messenger-thread/FriendsMessengerThreadView.tsx
@@ -0,0 +1,17 @@
+import { FC } from 'react';
+import { FriendsMessengerThreadGroup } from '../messenger-thread-group/FriendsMessengerThreadGroup';
+import { FriendsMessengerThreadViewProps } from './FriendsMessengerThreadView.types';
+
+export const FriendsMessengerThreadView: FC<FriendsMessengerThreadViewProps> = props =>
+{
+    const { thread = null } = props;
+
+    return (
+        <>
+            { (thread.groups.length > 0) && thread.groups.map((group, index) =>
+                {
+                    return <FriendsMessengerThreadGroup key={ index } thread={ thread } group={ group } />;
+                }) }
+        </>
+    );
+}
diff --git a/src/views/friends/views/messenger-thread/FriendsMessengerThreadView.types.ts b/src/views/friends/views/messenger-thread/FriendsMessengerThreadView.types.ts
new file mode 100644
index 00000000..a6e0f4c4
--- /dev/null
+++ b/src/views/friends/views/messenger-thread/FriendsMessengerThreadView.types.ts
@@ -0,0 +1,6 @@
+import { MessengerThread } from '../../common/MessengerThread';
+
+export interface FriendsMessengerThreadViewProps
+{
+    thread: MessengerThread;
+}
diff --git a/src/views/friends/views/messenger/FriendsMessengerView.scss b/src/views/friends/views/messenger/FriendsMessengerView.scss
new file mode 100644
index 00000000..596ab19f
--- /dev/null
+++ b/src/views/friends/views/messenger/FriendsMessengerView.scss
@@ -0,0 +1,79 @@
+.nitro-friends-messenger {
+    width: 280px;
+    resize: both;
+
+    .friend-head {
+        position: relative;
+        width: 40px;
+        height: 40px;
+        overflow: hidden;
+
+        .icon {
+            position: absolute;
+            top: 1px;
+            right: 1px;
+            z-index: 10;
+        }
+
+        .avatar-image {
+            position: absolute;
+            margin-left: -27px;
+            margin-top: -27px;
+        }
+    }
+
+    .chat-title {
+        margin-top: -21px;
+    }
+
+    .chat-messages {
+        height: 200px;
+        min-height: 200px;
+        overflow-y: auto;
+
+        .message-avatar {
+            position: relative;
+            overflow: hidden;
+            width: 50px;
+            height: 50px;
+
+            .avatar-image {
+                position: absolute;
+                margin-left: -22px;
+                margin-top: -25px;
+            }
+        }
+
+        .messages-group-left {
+            position: relative;
+            
+            &:before {
+                position: absolute;
+                content: ' ';
+                width: 0;
+                height: 0;
+                border-right: 8px solid rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
+                border-top: 8px solid transparent;
+                border-bottom: 8px solid transparent;
+                top: 10px;
+                left: -8px;
+            }
+        }
+
+        .messages-group-right {
+            position: relative;
+            
+            &:before {
+                position: absolute;
+                content: ' ';
+                width: 0;
+                height: 0;
+                border-left: 8px solid rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
+                border-top: 8px solid transparent;
+                border-bottom: 8px solid transparent;
+                top: 10px;
+                right: -8px;
+            }
+        }
+    }
+}
diff --git a/src/views/friends/views/messenger/FriendsMessengerView.tsx b/src/views/friends/views/messenger/FriendsMessengerView.tsx
new file mode 100644
index 00000000..dac6a7a5
--- /dev/null
+++ b/src/views/friends/views/messenger/FriendsMessengerView.tsx
@@ -0,0 +1,281 @@
+import { FollowFriendMessageComposer, ILinkEventTracker, NewConsoleMessageEvent, SendMessageComposer, UserProfileComposer } from '@nitrots/nitro-renderer';
+import { FC, KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { AddEventLinkTracker, LocalizeText, RemoveLinkEventTracker } from '../../../../api';
+import { FriendsMessengerIconEvent } from '../../../../events';
+import { BatchUpdates, CreateMessageHook, dispatchUiEvent, SendMessageHook } from '../../../../hooks';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
+import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
+import { MessengerThread } from '../../common/MessengerThread';
+import { MessengerThreadChat } from '../../common/MessengerThreadChat';
+import { useFriendsContext } from '../../context/FriendsContext';
+import { FriendsMessengerThreadView } from '../messenger-thread/FriendsMessengerThreadView';
+
+export const FriendsMessengerView: FC<{}> = props =>
+{
+    const [ isVisible, setIsVisible ] = useState(false);
+    const [ messageThreads, setMessageThreads ] = useState<MessengerThread[]>([]);
+    const [ activeThreadIndex, setActiveThreadIndex ] = useState(-1);
+    const [ hiddenThreadIndexes, setHiddenThreadIndexes ] = useState<number[]>([]);
+    const [ messageText, setMessageText ] = useState('');
+    const { friendsState = null } = useFriendsContext();
+    const { friends = [] } = friendsState;
+    const messagesBox = useRef<HTMLDivElement>();
+    const [ updateValue, setUpdateValue ] = useState({});
+
+    const followFriend = useCallback(() =>
+    {
+        SendMessageHook(new FollowFriendMessageComposer(messageThreads[activeThreadIndex].participant.id));
+    }, [ messageThreads, activeThreadIndex ]);
+
+    const openProfile = useCallback(() =>
+    {
+        SendMessageHook(new UserProfileComposer(messageThreads[activeThreadIndex].participant.id));
+    }, [ messageThreads, activeThreadIndex ]);
+
+    const getFriend = useCallback((userId: number) =>
+    {
+        return ((friends.find(friend => (friend.id === userId))) || null);
+    }, [ friends ]);
+
+    const visibleThreads = useMemo(() =>
+    {
+        return messageThreads.filter((thread, index) =>
+            {
+                if(hiddenThreadIndexes.indexOf(index) >= 0) return false;
+
+                return true;
+            });
+    }, [ messageThreads, hiddenThreadIndexes ]);
+
+    const getMessageThreadWithIndex = useCallback<(userId: number) => [ number, MessengerThread ]>((userId: number) =>
+    {
+        if(messageThreads.length > 0)
+        {
+            for(let i = 0; i < messageThreads.length; i++)
+            {
+                const thread = messageThreads[i];
+
+                if(thread.participant && (thread.participant.id === userId))
+                {
+                    const hiddenIndex = hiddenThreadIndexes.indexOf(i);
+
+                    if(hiddenIndex >= 0)
+                    {
+                        setHiddenThreadIndexes(prevValue =>
+                            {
+                                const newIndexes = [ ...prevValue ];
+
+                                newIndexes.splice(hiddenIndex, 1);
+
+                                return newIndexes;
+                            });
+                    }
+
+                    return [ i, thread ];
+                }
+            }
+        }
+
+        const friend = getFriend(userId);
+
+        if(!friend) return [ -1, null ];
+
+        const thread = new MessengerThread(friend);
+        const newThreads = [ ...messageThreads, thread ];
+
+        setMessageThreads(newThreads);
+
+        return [ (newThreads.length - 1), thread ];
+    }, [ messageThreads, hiddenThreadIndexes, getFriend ]);
+
+    const onNewConsoleMessageEvent = useCallback((event: NewConsoleMessageEvent) =>
+    {
+        const parser = event.getParser();
+        const [ threadIndex, thread ] = getMessageThreadWithIndex(parser.senderId);
+
+        if((threadIndex === -1) || !thread) return;
+
+        thread.addMessage(parser.senderId, parser.messageText, parser.secondsSinceSent, parser.extraData);
+
+        setMessageThreads(prevValue => [ ...prevValue ]);
+    }, [ getMessageThreadWithIndex ]);
+
+    CreateMessageHook(NewConsoleMessageEvent, onNewConsoleMessageEvent);
+
+    const sendMessage = useCallback(() =>
+    {
+        if(!messageText || !messageText.length) return;
+
+        if(activeThreadIndex === -1) return;
+
+        const thread = messageThreads[activeThreadIndex];
+
+        if(!thread) return;
+
+        SendMessageHook(new SendMessageComposer(thread.participant.id, messageText));
+
+        thread.addMessage(0, messageText, 0, null, MessengerThreadChat.CHAT);
+
+        BatchUpdates(() =>
+        {
+            setMessageThreads(prevValue => [ ...prevValue ]);
+            setMessageText('');
+        });
+    }, [ messageThreads, activeThreadIndex, messageText ]);
+
+    const onKeyDown = useCallback((event: KeyboardEvent<HTMLInputElement>) =>
+    {
+        if(event.key !== 'Enter') return;
+
+        sendMessage();
+    }, [ sendMessage ]);
+
+    const linkReceived = useCallback((url: string) =>
+    {
+        const parts = url.split('/');
+
+        if(parts.length < 3) return;
+
+        if(parts[2] === 'open')
+        {
+            setIsVisible(true);
+
+            return;
+        }
+
+        const [ threadIndex ] = getMessageThreadWithIndex(parseInt(parts[2]));
+
+        if(threadIndex === -1) return;
+
+        BatchUpdates(() =>
+        {
+            setActiveThreadIndex(threadIndex);
+            setIsVisible(true);
+        });
+    }, [ getMessageThreadWithIndex ]);
+
+    const closeThread = useCallback((threadIndex: number) =>
+    {
+        setHiddenThreadIndexes(prevValue =>
+            {
+                const values = [ ...prevValue ];
+
+                if(values.indexOf(threadIndex) === -1) values.push(threadIndex);
+
+                return values;
+            });
+    }, []);
+
+    useEffect(() =>
+    {
+        const linkTracker: ILinkEventTracker = {
+            linkReceived,
+            eventUrlPrefix: 'friends/messenger/'
+        };
+
+        AddEventLinkTracker(linkTracker);
+
+        return () => RemoveLinkEventTracker(linkTracker);
+    }, [ linkReceived ]);
+
+    useEffect(() =>
+    {
+        if(!isVisible) return;
+
+        if(activeThreadIndex === -1) setActiveThreadIndex(0);
+    }, [ isVisible, activeThreadIndex ]);
+
+    useEffect(() =>
+    {
+        if(hiddenThreadIndexes.indexOf(activeThreadIndex) >= 0) setActiveThreadIndex(0);
+    }, [ activeThreadIndex, hiddenThreadIndexes ]);
+
+    useEffect(() =>
+    {
+        if(!isVisible || (activeThreadIndex === -1)) return;
+
+        const activeThread = messageThreads[activeThreadIndex];
+
+        if(activeThread.unread)
+        {
+            messagesBox.current.scrollTop = messagesBox.current.scrollHeight;
+            activeThread.setRead();
+            setUpdateValue({});
+        }
+    }, [ isVisible, messageThreads, activeThreadIndex ]);
+
+    useEffect(() =>
+    {
+        if(!visibleThreads.length)
+        {
+            setIsVisible(false);
+
+            dispatchUiEvent(new FriendsMessengerIconEvent(FriendsMessengerIconEvent.UPDATE_ICON, FriendsMessengerIconEvent.HIDE_ICON));
+
+            return;
+        }
+
+        let isUnread = false;
+
+        for(const thread of visibleThreads)
+        {
+            if(thread.unread)
+            {
+                isUnread = true;
+
+                break;
+            }
+        }
+
+        dispatchUiEvent(new FriendsMessengerIconEvent(FriendsMessengerIconEvent.UPDATE_ICON, isUnread ? FriendsMessengerIconEvent.UNREAD_ICON : FriendsMessengerIconEvent.SHOW_ICON));
+    }, [ visibleThreads, updateValue ]);
+
+    if(!isVisible) return null;
+
+    return (
+        <NitroCardView className="nitro-friends-messenger" simple={ true }>
+            <NitroCardHeaderView headerText={ LocalizeText('messenger.window.title', [ 'OPEN_CHAT_COUNT' ], [ visibleThreads.length.toString() ]) } onCloseClick={ event => setIsVisible(false) } />
+            <NitroCardContentView>
+                <div className="d-flex gap-2 overflow-auto pb-1">
+                    { visibleThreads && (visibleThreads.length > 0) && visibleThreads.map((thread, index) =>
+                        {
+                            const messageThreadIndex = messageThreads.indexOf(thread);
+
+                            return (
+                                <div key={ index } className="friend-head rounded flex-shrink-0 cursor-pointer bg-muted" onClick={ event => setActiveThreadIndex(messageThreadIndex) }>
+                                    { thread.unread && <i className="icon icon-friendlist-new-message" /> }
+                                    <AvatarImageView figure={ thread.participant.figure } headOnly={ true } direction={ 3 } />
+                                </div>
+                            );
+                        }) }
+                </div>
+                <hr className="bg-dark mt-3 mb-2" />
+                { (activeThreadIndex >= 0) &&
+                    <>
+                        <div className="text-black chat-title bg-light pe-2 position-absolute">
+                            { LocalizeText('messenger.window.separator', [ 'FRIEND_NAME' ], [ messageThreads[activeThreadIndex].participant.name ]) }
+                        </div>
+                        <div className="d-flex gap-2 mb-2">
+                            <div className="btn-group">
+                                <button className="d-flex justify-content-center align-items-center btn btn-sm btn-primary" onClick={ followFriend }>
+                                    <i className="icon icon-friendlist-follow" />
+                                </button>
+                                <button className="d-flex justify-content-center align-items-center btn btn-sm btn-primary" onClick={ openProfile }>
+                                    <i className="icon icon-user-profile" />
+                                </button>
+                            </div>
+                            <button className="btn btn-sm btn-danger">{ LocalizeText('messenger.window.button.report') }</button>
+                            <button className="btn btn-sm btn-primary ms-auto" onClick={ event => closeThread(activeThreadIndex) }><i className="fas fa-times" /></button>
+                        </div>
+                        <div ref={ messagesBox } className="bg-muted p-2 rounded chat-messages mb-2 d-flex flex-column">
+                            <FriendsMessengerThreadView thread={ messageThreads[activeThreadIndex] } />
+                        </div>
+                        <div className="d-flex gap-2">
+                            <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('messenger.window.input.default', [ 'FRIEND_NAME' ], [ messageThreads[activeThreadIndex].participant.name ]) } value={ messageText } onChange={ event => setMessageText(event.target.value) } onKeyDown={ onKeyDown } />
+                            <button className="btn btn-sm btn-success" onClick={ sendMessage }>{ LocalizeText('widgets.chatinput.say') }</button>
+                        </div>
+                    </> }
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+}
diff --git a/src/views/friends/views/request-item/FriendsRequestItemView.types.ts b/src/views/friends/views/request-item/FriendsRequestItemView.types.ts
index 4f5c38d5..bc01f938 100644
--- a/src/views/friends/views/request-item/FriendsRequestItemView.types.ts
+++ b/src/views/friends/views/request-item/FriendsRequestItemView.types.ts
@@ -1,5 +1,4 @@
-import { MessengerRequest } from '../../common/MessengerRequest';
-
+import { MessengerRequest } from './../../common/MessengerRequest';
 export interface FriendsRequestItemViewProps
 {
     request: MessengerRequest;
diff --git a/src/views/inventory/InventoryView.scss b/src/views/inventory/InventoryView.scss
index 2da93ac4..e01335a2 100644
--- a/src/views/inventory/InventoryView.scss
+++ b/src/views/inventory/InventoryView.scss
@@ -1,11 +1,6 @@
 .nitro-inventory {
-    width: 475px;
-
-    .content-area {
-        min-height: 240px;
-        height: 240px;
-        resize: vertical;
-    }
+    width: $inventory-width;
+    height: $inventory-height;
 
     .empty-image {
         background: url('../../assets/images/inventory/empty.png');
@@ -13,6 +8,3 @@
         height: 181px;
     }
 }
-
-
-@import './views/InventoryViews';
diff --git a/src/views/inventory/views/InventoryViews.scss b/src/views/inventory/views/InventoryViews.scss
deleted file mode 100644
index cd28a3b0..00000000
--- a/src/views/inventory/views/InventoryViews.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import './badge/InventoryBadgeView';
-@import './furniture/InventoryFurnitureView';
diff --git a/src/views/inventory/views/badge/InventoryBadgeView.scss b/src/views/inventory/views/badge/InventoryBadgeView.scss
deleted file mode 100644
index fc975ace..00000000
--- a/src/views/inventory/views/badge/InventoryBadgeView.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.current-badge-container {
-
-    .badge-image {
-        width: 45px;
-        height: 45px;
-    }
-}
-
-.inventory-badge-overflow {
-    height: calc(100% - 91px);
-}
-
-@import './item/InventoryBadgeItemView';
diff --git a/src/views/inventory/views/badge/InventoryBadgeView.tsx b/src/views/inventory/views/badge/InventoryBadgeView.tsx
index 58ce4a56..47f2fe62 100644
--- a/src/views/inventory/views/badge/InventoryBadgeView.tsx
+++ b/src/views/inventory/views/badge/InventoryBadgeView.tsx
@@ -2,6 +2,11 @@ import { RequestBadgesComposer } from '@nitrots/nitro-renderer';
 import { FC, useEffect } from 'react';
 import { LocalizeBadgeName, LocalizeText } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks/messages/message-event';
+import { NitroLayoutButton, NitroLayoutFlex } from '../../../../layout';
+import { NitroLayoutBase } from '../../../../layout/base';
+import { NitroLayoutFlexColumn } from '../../../../layout/flex-column/NitroLayoutFlexColumn';
+import { NitroLayoutGridColumn } from '../../../../layout/grid/column/NitroLayoutGridColumn';
+import { NitroLayoutGrid } from '../../../../layout/grid/NitroLayoutGrid';
 import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
 import { useInventoryContext } from '../../context/InventoryContext';
 import { InventoryBadgeActions } from '../../reducers/InventoryBadgeReducer';
@@ -74,33 +79,26 @@ export const InventoryBadgeView: FC<InventoryBadgeViewProps> = props =>
     }
 
     return (
-        <>
-            <div className="d-flex flex-column h-100 overflow-hidden">
-                <div className="row inventory-badge-overflow">
-                    <div className="col-7 d-flex flex-column h-100">
-                        <InventoryBadgeResultsView badges={ badges } activeBadges={ activeBadges }  />
-                    </div>
-                    <div className="col">
-                        <p className="mb-1 text-black">{ LocalizeText('inventory.badges.activebadges') }</p>
-                        <InventoryActiveBadgeResultsView badges={ activeBadges }  />
-                    </div>
-                </div>
-                <div className="my-auto">
-                    { badge && badge.length &&
-                        <div className="d-flex justify-content-between align-items-center bg-secondary rounded px-2 py-1 mb-1 mt-1">
-                            <div className="d-flex flex-grow-1 current-badge-container">
+        <NitroLayoutGrid>
+            <NitroLayoutGridColumn size={ 7 } gap={ 2 }>
+                <InventoryBadgeResultsView badges={ badges } activeBadges={ activeBadges } />
+            </NitroLayoutGridColumn>
+            <NitroLayoutGridColumn className="justify-content-between" size={ 5 } gap={ 2 } overflow="auto">
+                <NitroLayoutFlexColumn overflow="hidden" gap={ 2 }>
+                    <NitroLayoutBase className="text-black text-truncate">{ LocalizeText('inventory.badges.activebadges') }</NitroLayoutBase>
+                    <InventoryActiveBadgeResultsView badges={ activeBadges }  />
+                </NitroLayoutFlexColumn>
+                { badge && (badge.length > 0) &&
+                    <NitroLayoutFlexColumn gap={ 2 }>
+                        <NitroLayoutFlex className="justify-content-between align-items-center">
+                            <NitroLayoutFlex className="flex-grow-1 align-items-center" gap={ 2 } overflow="hidden">
                                 <BadgeImageView badgeCode={ badge } />
-                                <div className="d-flex flex-column justify-content-center flex-grow-1 ms-2">
-                                    <p className="mb-0">{ LocalizeBadgeName(badge) }</p>
-                                </div>
-                            </div>
-                            <button type="button" className={ 'btn btn-sm btn-' + (isWearingBadge(badge) ? 'danger' : 'success') } disabled={ !isWearingBadge(badge) && !canWearBadges() } onClick={ toggleBadge }>{ LocalizeText(isWearingBadge(badge) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge')}</button>
-                        </div> }
-                    <div className="d-flex justify-content-center align-items-center bg-primary rounded p-1">
-                        <div className="h6 m-0 text-white">{ LocalizeText('achievements_score_description', [ 'score' ], [ '0' ]) }</div>
-                    </div>
-                </div>
-            </div>
-        </>
+                                <NitroLayoutBase className="flex-grow-1 text-black text-truncate">{ LocalizeBadgeName(badge) }</NitroLayoutBase>
+                            </NitroLayoutFlex>
+                        </NitroLayoutFlex>
+                        <NitroLayoutButton variant={ (isWearingBadge(badge) ? 'danger' : 'success') } size="sm" disabled={ !isWearingBadge(badge) && !canWearBadges() } onClick={ toggleBadge }>{ LocalizeText(isWearingBadge(badge) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge') }</NitroLayoutButton>
+                    </NitroLayoutFlexColumn> }
+            </NitroLayoutGridColumn>
+        </NitroLayoutGrid>
     );
 }
diff --git a/src/views/inventory/views/badge/item/InventoryBadgeItemView.scss b/src/views/inventory/views/badge/item/InventoryBadgeItemView.scss
deleted file mode 100644
index d17f5451..00000000
--- a/src/views/inventory/views/badge/item/InventoryBadgeItemView.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.inventory-badge-item-container {
-    height: 48px;
-    max-height: 48px;
-
-    .inventory-badge-item {
-        width: 100%;
-        height: 100%;
-        border-color: $grid-border-color !important;
-        background-color: $grid-bg-color;
-        overflow: hidden;
-    
-        &.active {
-            border-color: $grid-active-border-color !important;
-            background-color: $grid-active-bg-color;
-        }
-    }
-}
diff --git a/src/views/inventory/views/bot/InventoryBotView.tsx b/src/views/inventory/views/bot/InventoryBotView.tsx
index 5ea3ef84..59c02571 100644
--- a/src/views/inventory/views/bot/InventoryBotView.tsx
+++ b/src/views/inventory/views/bot/InventoryBotView.tsx
@@ -2,10 +2,16 @@ import { GetBotInventoryComposer, RoomObjectVariable } from '@nitrots/nitro-rend
 import { FC, useEffect } from 'react';
 import { GetRoomEngine, LocalizeText } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks/messages/message-event';
+import { NitroLayoutButton } from '../../../../layout';
+import { NitroLayoutBase } from '../../../../layout/base';
+import { NitroLayoutFlexColumn } from '../../../../layout/flex-column/NitroLayoutFlexColumn';
+import { NitroLayoutGridColumn } from '../../../../layout/grid/column/NitroLayoutGridColumn';
+import { NitroLayoutGrid } from '../../../../layout/grid/NitroLayoutGrid';
 import { RoomPreviewerView } from '../../../shared/room-previewer/RoomPreviewerView';
 import { attemptBotPlacement } from '../../common/BotUtilities';
 import { useInventoryContext } from '../../context/InventoryContext';
 import { InventoryBotActions } from '../../reducers/InventoryBotReducer';
+import { InventoryCategoryEmptyView } from '../category-empty/InventoryCategoryEmptyView';
 import { InventoryBotViewProps } from './InventoryBotView.types';
 import { InventoryBotResultsView } from './results/InventoryBotResultsView';
 
@@ -62,35 +68,26 @@ export const InventoryBotView: FC<InventoryBotViewProps> = props =>
         roomPreviewer.addAvatarIntoRoom(botData.figure, 0);
     }, [ roomPreviewer, botItem ]);
 
-    if(!botItems || !botItems.length)
-    {
-        return (
-            <div className="row h-100">
-                <div className="col-5 d-flex justify-content-center align-items-center">
-                    <div className="empty-image"></div>
-                </div>
-                <div className="d-flex flex-column col-7 justify-content-center">
-                    <div className="h5 m-0 text-black fw-bold m-0 mb-2">
-                        { LocalizeText('inventory.empty.bots.title') }
-                    </div>
-                    <div className="h6 text-black">{ LocalizeText('inventory.empty.bots.desc') }</div>
-                </div>
-            </div>
-        );
-    }
+    if(!botItems || !botItems.length) return <InventoryCategoryEmptyView title={ LocalizeText('inventory.empty.bots.title') } desc={ LocalizeText('inventory.empty.bots.desc') } />;
 
     return (
-        <div className="row h-100">
-            <div className="col-7 d-flex flex-column h-100">
-                <InventoryBotResultsView botItems={ botItems }  />
-            </div>
-            <div className="d-flex flex-column col-5 justify-space-between">
-                <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
-                { botItem && <div className="d-flex flex-column flex-grow-1">
-                    <p className="flex-grow-1 fs-6 text-black my-2">{ botItem.botData.name }</p>
-                    { !!roomSession && <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptBotPlacement(botItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
-                </div> }
-            </div>
-        </div>
+        <NitroLayoutGrid>
+            <NitroLayoutGridColumn size={ 7 } gap={ 2 }>
+                <InventoryBotResultsView botItems={ botItems } />
+            </NitroLayoutGridColumn>
+            <NitroLayoutGridColumn size={ 5 } gap={ 2 } overflow="auto">
+                <NitroLayoutFlexColumn overflow="hidden" position="relative">
+                    <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
+                </NitroLayoutFlexColumn>
+                { botItem &&
+                    <NitroLayoutFlexColumn className="flex-grow-1" gap={ 2 }>
+                        <NitroLayoutBase className="flex-grow-1 text-black text-truncate">{ botItem.botData.name }</NitroLayoutBase>
+                        { !!roomSession &&
+                            <NitroLayoutButton variant="success" size="sm" onClick={ event => attemptBotPlacement(botItem) }>
+                                { LocalizeText('inventory.furni.placetoroom') }
+                            </NitroLayoutButton> }
+                    </NitroLayoutFlexColumn> }
+            </NitroLayoutGridColumn>
+        </NitroLayoutGrid>
     );
 }
diff --git a/src/views/inventory/views/category-empty/InventoryCategoryEmptyView.tsx b/src/views/inventory/views/category-empty/InventoryCategoryEmptyView.tsx
new file mode 100644
index 00000000..2fe5b4aa
--- /dev/null
+++ b/src/views/inventory/views/category-empty/InventoryCategoryEmptyView.tsx
@@ -0,0 +1,21 @@
+import { FC } from 'react';
+import { NitroLayoutGrid, NitroLayoutGridColumn } from '../../../../layout';
+import { NitroLayoutBase } from '../../../../layout/base';
+import { InventoryCategoryEmptyViewProps } from './InventoryCategoryEmptyView.types';
+
+export const InventoryCategoryEmptyView: FC<InventoryCategoryEmptyViewProps> = props =>
+{
+    const { title = '', desc = '', ...rest } = props;
+    
+    return (
+        <NitroLayoutGrid { ...rest }>
+            <NitroLayoutGridColumn className="justify-content-center align-items-center" size={ 5 } overflow="hidden">
+                <div className="empty-image" />
+            </NitroLayoutGridColumn>
+            <NitroLayoutGridColumn className="justify-content-center" size={ 7 } overflow="hidden">
+                <NitroLayoutBase className="text-black text-truncate fs-5 fw-bold">{ title }</NitroLayoutBase>
+                <NitroLayoutBase className="text-black" overflow="auto">{ desc }</NitroLayoutBase>
+            </NitroLayoutGridColumn>
+        </NitroLayoutGrid>
+    );
+}
diff --git a/src/views/inventory/views/category-empty/InventoryCategoryEmptyView.types.ts b/src/views/inventory/views/category-empty/InventoryCategoryEmptyView.types.ts
new file mode 100644
index 00000000..0d57173b
--- /dev/null
+++ b/src/views/inventory/views/category-empty/InventoryCategoryEmptyView.types.ts
@@ -0,0 +1,7 @@
+import { NitroLayoutGridProps } from '../../../../layout';
+
+export interface InventoryCategoryEmptyViewProps extends NitroLayoutGridProps
+{
+    title: string;
+    desc: string;
+}
diff --git a/src/views/inventory/views/furniture/InventoryFurnitureView.scss b/src/views/inventory/views/furniture/InventoryFurnitureView.scss
deleted file mode 100644
index 089af5ef..00000000
--- a/src/views/inventory/views/furniture/InventoryFurnitureView.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.stuffdata-extra-container {
-    position: absolute;
-    top: 5px;
-    right: 15px;
-}
diff --git a/src/views/inventory/views/furniture/InventoryFurnitureView.tsx b/src/views/inventory/views/furniture/InventoryFurnitureView.tsx
index 67878baa..05e3afb7 100644
--- a/src/views/inventory/views/furniture/InventoryFurnitureView.tsx
+++ b/src/views/inventory/views/furniture/InventoryFurnitureView.tsx
@@ -2,6 +2,11 @@ import { FurnitureListComposer, RoomObjectVariable, Vector3d } from '@nitrots/ni
 import { FC, useEffect, useState } from 'react';
 import { GetRoomEngine, GetSessionDataManager, LocalizeText } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks/messages';
+import { NitroLayoutButton } from '../../../../layout';
+import { NitroLayoutBase } from '../../../../layout/base';
+import { NitroLayoutFlexColumn } from '../../../../layout/flex-column/NitroLayoutFlexColumn';
+import { NitroLayoutGridColumn } from '../../../../layout/grid/column/NitroLayoutGridColumn';
+import { NitroLayoutGrid } from '../../../../layout/grid/NitroLayoutGrid';
 import { LimitedEditionCompactPlateView } from '../../../shared/limited-edition/compact-plate/LimitedEditionCompactPlateView';
 import { RarityLevelView } from '../../../shared/rarity-level/RarityLevelView';
 import { RoomPreviewerView } from '../../../shared/room-previewer/RoomPreviewerView';
@@ -10,6 +15,7 @@ import { attemptItemPlacement } from '../../common/FurnitureUtilities';
 import { GroupItem } from '../../common/GroupItem';
 import { useInventoryContext } from '../../context/InventoryContext';
 import { InventoryFurnitureActions } from '../../reducers/InventoryFurnitureReducer';
+import { InventoryCategoryEmptyView } from '../category-empty/InventoryCategoryEmptyView';
 import { InventoryFurnitureViewProps } from './InventoryFurnitureView.types';
 import { InventoryFurnitureResultsView } from './results/InventoryFurnitureResultsView';
 import { InventoryFurnitureSearchView } from './search/InventoryFurnitureSearchView';
@@ -98,46 +104,35 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
         }
     }, [ roomPreviewer, groupItem ]);
 
-    if(!groupItems || !groupItems.length)
-    {
-        return (
-            <div className="row h-100">
-                <div className="col-5 d-flex justify-content-center align-items-center">
-                    <div className="empty-image"></div>
-                </div>
-                <div className="d-flex flex-column col-7 justify-content-center">
-                    <div className="h5 m-0 text-black fw-bold m-0 mb-2">
-                        { LocalizeText('inventory.empty.title') }
-                    </div>
-                    <div className="h6 text-black">{ LocalizeText('inventory.empty.desc') }</div>
-                </div>
-            </div>
-        );
-    }
+    if(!groupItems || !groupItems.length) return <InventoryCategoryEmptyView title={ LocalizeText('inventory.empty.title') } desc={ LocalizeText('inventory.empty.desc') } />;
 
     return (
-        <div className="row h-100">
-            <div className="col-7 d-flex flex-column h-100">
+        <NitroLayoutGrid>
+            <NitroLayoutGridColumn size={ 7 } gap={ 2 }>
                 <InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
                 <InventoryFurnitureResultsView groupItems={ filteredGroupItems }  />
-            </div>
-            <div className="position-relative d-flex flex-column col-5 justify-space-between">
-                <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
-                { groupItem && groupItem.stuffData.isUnique &&
-                    <div className="stuffdata-extra-container">
-                        <LimitedEditionCompactPlateView uniqueNumber={ groupItem.stuffData.uniqueNumber } uniqueSeries={ groupItem.stuffData.uniqueSeries } />
-                    </div> }
-                { (groupItem && groupItem.stuffData.rarityLevel > -1) &&
-                    <div className="stuffdata-extra-container">
-                        <RarityLevelView level={ groupItem.stuffData.rarityLevel } />
-                    </div> }
+            </NitroLayoutGridColumn>
+            <NitroLayoutGridColumn size={ 5 } gap={ 2 } overflow="auto">
+                <NitroLayoutFlexColumn overflow="hidden" position="relative">
+                    <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
+                    { groupItem && groupItem.stuffData.isUnique &&
+                        <NitroLayoutBase className="top-2 end-2" position="absolute">
+                            <LimitedEditionCompactPlateView uniqueNumber={ groupItem.stuffData.uniqueNumber } uniqueSeries={ groupItem.stuffData.uniqueSeries } />
+                        </NitroLayoutBase> }
+                    { (groupItem && groupItem.stuffData.rarityLevel > -1) &&
+                        <NitroLayoutBase className="top-2 end-2" position="absolute">
+                            <RarityLevelView level={ groupItem.stuffData.rarityLevel } />
+                        </NitroLayoutBase> }
+                </NitroLayoutFlexColumn>
                 { groupItem &&
-                    <div className="d-flex flex-column flex-grow-1">
-                        <p className="flex-grow-1 fs-6 text-black my-2">{ groupItem.name }</p>
+                    <NitroLayoutFlexColumn className="flex-grow-1" gap={ 2 }>
+                        <NitroLayoutBase className="flex-grow-1 text-black text-truncate">{ groupItem.name }</NitroLayoutBase>
                         { !!roomSession &&
-                            <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptItemPlacement(groupItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
-                    </div> }
-            </div>
-        </div>
+                            <NitroLayoutButton variant="success" size="sm" onClick={ event => attemptItemPlacement(groupItem) }>
+                                { LocalizeText('inventory.furni.placetoroom') }
+                            </NitroLayoutButton> }
+                    </NitroLayoutFlexColumn> }
+            </NitroLayoutGridColumn>
+        </NitroLayoutGrid>
     );
 }
diff --git a/src/views/inventory/views/furniture/item/InventoryFurnitureItemView.tsx b/src/views/inventory/views/furniture/item/InventoryFurnitureItemView.tsx
index 4b49d6a3..a75cf789 100644
--- a/src/views/inventory/views/furniture/item/InventoryFurnitureItemView.tsx
+++ b/src/views/inventory/views/furniture/item/InventoryFurnitureItemView.tsx
@@ -46,5 +46,5 @@ export const InventoryFurnitureItemView: FC<InventoryFurnitureItemViewProps> = p
 
     const count = groupItem.getUnlockedCount();
 
-    return <NitroCardGridItemView className={ !count ? 'opacity-0-5 ' : '' } itemImage={ groupItem.iconUrl } itemCount={ count } itemActive={ isActive } itemUnique={ groupItem.stuffData.isUnique } itemUniqueNumber={ groupItem.stuffData.uniqueNumber } itemUnseen={ groupItem.hasUnseenItems } onMouseDown={ onMouseEvent } onMouseUp={ onMouseEvent } onMouseOut={ onMouseEvent } />;
+    return <NitroCardGridItemView className={ !count ? 'opacity-0-5 ' : '' } itemImage={ groupItem.iconUrl } itemCount={ count } itemActive={ isActive } itemUniqueNumber={ groupItem.stuffData.uniqueNumber } itemUnseen={ groupItem.hasUnseenItems } onMouseDown={ onMouseEvent } onMouseUp={ onMouseEvent } onMouseOut={ onMouseEvent } />;
 }
diff --git a/src/views/inventory/views/furniture/search/InventoryFurnitureSearchView.tsx b/src/views/inventory/views/furniture/search/InventoryFurnitureSearchView.tsx
index 599214cd..f7934a19 100644
--- a/src/views/inventory/views/furniture/search/InventoryFurnitureSearchView.tsx
+++ b/src/views/inventory/views/furniture/search/InventoryFurnitureSearchView.tsx
@@ -30,7 +30,7 @@ export const InventoryFurnitureSearchView: FC<InventoryFurnitureSearchViewProps>
     }, [ groupItems, setGroupItems, searchValue ]);
 
     return (
-        <div className="d-flex mb-1">
+        <div className="d-flex">
             <div className="d-flex flex-grow-1 me-1">
                 <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } value={ searchValue } onChange={ event => setSearchValue(event.target.value) } />
             </div>
diff --git a/src/views/inventory/views/pet/InventoryPetView.tsx b/src/views/inventory/views/pet/InventoryPetView.tsx
index 5d8d8d90..b9949c95 100644
--- a/src/views/inventory/views/pet/InventoryPetView.tsx
+++ b/src/views/inventory/views/pet/InventoryPetView.tsx
@@ -2,10 +2,15 @@ import { RequestPetsComposer, RoomObjectVariable } from '@nitrots/nitro-renderer
 import { FC, useEffect } from 'react';
 import { GetRoomEngine, LocalizeText } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks/messages/message-event';
+import { NitroLayoutBase } from '../../../../layout/base';
+import { NitroLayoutFlexColumn } from '../../../../layout/flex-column/NitroLayoutFlexColumn';
+import { NitroLayoutGridColumn } from '../../../../layout/grid/column/NitroLayoutGridColumn';
+import { NitroLayoutGrid } from '../../../../layout/grid/NitroLayoutGrid';
 import { RoomPreviewerView } from '../../../shared/room-previewer/RoomPreviewerView';
 import { attemptPetPlacement } from '../../common/PetUtilities';
 import { useInventoryContext } from '../../context/InventoryContext';
 import { InventoryPetActions } from '../../reducers/InventoryPetReducer';
+import { InventoryCategoryEmptyView } from '../category-empty/InventoryCategoryEmptyView';
 import { InventoryPetViewProps } from './InventoryPetView.types';
 import { InventoryPetResultsView } from './results/InventoryPetResultsView';
 
@@ -62,35 +67,23 @@ export const InventoryPetView: FC<InventoryPetViewProps> = props =>
         roomPreviewer.addPetIntoRoom(petData.figureString);
     }, [ roomPreviewer, petItem ]);
 
-    if(!petItems || !petItems.length)
-    {
-        return (
-            <div className="row h-100">
-                <div className="col-5 d-flex justify-content-center align-items-center">
-                    <div className="empty-image"></div>
-                </div>
-                <div className="d-flex flex-column col-7 justify-content-center">
-                    <div className="h5 m-0 text-black fw-bold m-0 mb-2">
-                        { LocalizeText('inventory.empty.pets.title') }
-                    </div>
-                    <div className="h6 text-black">{ LocalizeText('inventory.empty.pets.desc') }</div>
-                </div>
-            </div>
-        );
-    }
+    if(!petItems || !petItems.length) return <InventoryCategoryEmptyView title={ LocalizeText('inventory.empty.pets.title') } desc={ LocalizeText('inventory.empty.pets.desc') } />;
 
     return (
-        <div className="row h-100">
-            <div className="col-7 d-flex flex-column h-100">
+        <NitroLayoutGrid>
+            <NitroLayoutGridColumn size={ 7 } gap={ 2 }>
                 <InventoryPetResultsView petItems={ petItems }  />
-            </div>
-            <div className="d-flex flex-column col-5 justify-space-between">
-                <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
-                { petItem && <div className="d-flex flex-column flex-grow-1">
-                    <p className="flex-grow-1 fs-6 text-black my-2">{ petItem.petData.name }</p>
-                    { !!roomSession && <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptPetPlacement(petItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
-                </div> }
-            </div>
-        </div>
+            </NitroLayoutGridColumn>
+            <NitroLayoutGridColumn size={ 5 } gap={ 2 } overflow="auto">
+                <NitroLayoutFlexColumn overflow="hidden" position="relative">
+                    <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
+                </NitroLayoutFlexColumn>
+                { petItem &&
+                    <NitroLayoutFlexColumn className="flex-grow-1" gap={ 2 }>
+                        <NitroLayoutBase className="flex-grow-1 text-black text-truncate">{ petItem.petData.name }</NitroLayoutBase>
+                        { !!roomSession && <button type="button" className="btn btn-success btn-sm" onClick={ event => attemptPetPlacement(petItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
+                    </NitroLayoutFlexColumn> }
+            </NitroLayoutGridColumn>
+        </NitroLayoutGrid>
     );
 }
diff --git a/src/views/inventory/views/trade/InventoryTradeView.tsx b/src/views/inventory/views/trade/InventoryTradeView.tsx
index 5969daec..f376e890 100644
--- a/src/views/inventory/views/trade/InventoryTradeView.tsx
+++ b/src/views/inventory/views/trade/InventoryTradeView.tsx
@@ -2,8 +2,12 @@ import { FurnitureListComposer, IObjectData, TradingAcceptComposer, TradingConfi
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { LocalizeText } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks/messages';
+import { NitroLayoutButton, NitroLayoutFlex, NitroLayoutFlexColumn } from '../../../../layout';
+import { NitroLayoutBase } from '../../../../layout/base';
 import { NitroCardGridItemView } from '../../../../layout/card/grid/item/NitroCardGridItemView';
 import { NitroCardGridView } from '../../../../layout/card/grid/NitroCardGridView';
+import { NitroLayoutGridColumn } from '../../../../layout/grid/column/NitroLayoutGridColumn';
+import { NitroLayoutGrid } from '../../../../layout/grid/NitroLayoutGrid';
 import { FurniCategory } from '../../common/FurniCategory';
 import { GroupItem } from '../../common/GroupItem';
 import { IFurnitureItem } from '../../common/IFurnitureItem';
@@ -224,67 +228,81 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
     }, [ tradeData, dispatchFurnitureState ]);
 
     return (
-        <div className="row h-100">
-            <div className="d-flex flex-column col-4 h-100">
-                <InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
-                <NitroCardGridView columns={ 3 }>
-                    { filteredGroupItems && (filteredGroupItems.length > 0) && filteredGroupItems.map((item, index) =>
-                        {
-                            const count = item.getUnlockedCount();
-
-                            return (
-                                <NitroCardGridItemView key={ index } className={ !count ? 'opacity-0-5 ' : '' } itemImage={ item.iconUrl } itemCount={ count } itemActive={ (groupItem === item) } itemUnique={ item.stuffData.isUnique } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => (count && setGroupItem(item)) }>
-                                    { ((count > 0) && (groupItem === item)) &&
-                                        <button className="btn btn-success btn-sm trade-button" onClick={ event => attemptItemOffer(1) }>
-                                            <i className="fas fa-chevron-right" />
-                                        </button> }
-                                </NitroCardGridItemView>
-                            );
-                        }) }
-                </NitroCardGridView>
-                <div className="col-12 badge bg-muted w-100 mt-1">{ groupItem ? groupItem.name : LocalizeText('catalog_selectproduct') }</div>
-            </div>
-            <div className="col-8 row mx-0">
-                <div className="d-flex flex-column col-6">
-                    <span className="d-flex justify-content-between align-items-center text-black small mb-1">{ LocalizeText('inventory.trading.you') } { LocalizeText('inventory.trading.areoffering') }: <i className={ 'small fas ' + (tradeData.ownUser.accepts ? 'fa-lock text-success' : 'fa-unlock text-danger') } /></span>
+        <NitroLayoutGrid>
+            <NitroLayoutGridColumn size={ 4 } gap={ 2 }>
+                <NitroLayoutFlexColumn className="h-100" overflow="auto" gap={ 2 }>
+                    <InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
                     <NitroCardGridView columns={ 3 }>
-                        { Array.from(Array(MAX_ITEMS_TO_TRADE), (e, i) =>
+                        { filteredGroupItems && (filteredGroupItems.length > 0) && filteredGroupItems.map((item, index) =>
                             {
-                                const item = (tradeData.ownUser.items.getWithIndex(i) || null);
-
-                                if(!item) return <NitroCardGridItemView key={ i } />;
+                                const count = item.getUnlockedCount();
 
                                 return (
-                                    <NitroCardGridItemView key={ i } itemActive={ (ownGroupItem === item) } itemImage={ item.iconUrl } itemCount={ item.getTotalCount() } itemUnique={ item.stuffData.isUnique } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setOwnGroupItem(item) }>
-                                        { (ownGroupItem === item) &&
-                                            <button className="btn btn-danger btn-sm trade-button left" onClick={ event => removeItem(item) }>
-                                                <i className="fas fa-chevron-left" />
+                                    <NitroCardGridItemView key={ index } className={ !count ? 'opacity-0-5 ' : '' } itemImage={ item.iconUrl } itemCount={ count } itemActive={ (groupItem === item) } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => (count && setGroupItem(item)) }>
+                                        { ((count > 0) && (groupItem === item)) &&
+                                            <button className="btn btn-success btn-sm trade-button" onClick={ event => attemptItemOffer(1) }>
+                                                <i className="fas fa-chevron-right" />
                                             </button> }
                                     </NitroCardGridItemView>
                                 );
                             }) }
-                        <div className="col-12 badge bg-muted w-100">{ ownGroupItem ? ownGroupItem.name : LocalizeText('catalog_selectproduct') }</div>
                     </NitroCardGridView>
-                </div>
-                <div className="d-flex flex-column col-6">
-                    <span className="d-flex justify-content-between align-items-center  text-black small mb-1">{ tradeData.otherUser.userName } { LocalizeText('inventory.trading.isoffering') }: <i className={ 'small fas ' + (tradeData.otherUser.accepts ? 'fa-lock text-success' : 'fa-unlock text-danger') } /></span>
-                    <NitroCardGridView columns={ 3 }>
-                        { Array.from(Array(MAX_ITEMS_TO_TRADE), (e, i) =>
-                            {
-                                const item = (tradeData.otherUser.items.getWithIndex(i) || null);
+                </NitroLayoutFlexColumn>
+                <NitroLayoutBase className="badge bg-muted w-100">
+                    { groupItem ? groupItem.name : LocalizeText('catalog_selectproduct') }
+                </NitroLayoutBase>
+            </NitroLayoutGridColumn>
+            <NitroLayoutGridColumn size={ 8 } gap={ 2 }>
+                <NitroLayoutGrid overflow="hidden">
+                    <NitroLayoutGridColumn size={ 6 } gap={ 2 }>
+                        <NitroLayoutFlexColumn className="h-100" overflow="auto" gap={ 2 }>
+                            <span className="d-flex justify-content-between align-items-center text-black small mb-1">{ LocalizeText('inventory.trading.you') } { LocalizeText('inventory.trading.areoffering') }: <i className={ 'small fas ' + (tradeData.ownUser.accepts ? 'fa-lock text-success' : 'fa-unlock text-danger') } /></span>
+                            <NitroCardGridView columns={ 3 }>
+                                { Array.from(Array(MAX_ITEMS_TO_TRADE), (e, i) =>
+                                    {
+                                        const item = (tradeData.ownUser.items.getWithIndex(i) || null);
 
-                                if(!item) return <NitroCardGridItemView key={ i } />;
+                                        if(!item) return <NitroCardGridItemView key={ i } />;
 
-                                return <NitroCardGridItemView key={ i } itemActive={ (otherGroupItem === item) } itemImage={ item.iconUrl } itemCount={ item.getTotalCount() } itemUnique={ item.stuffData.isUnique } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setOtherGroupItem(item) } />;
-                            }) }
-                        <div className="col-12 badge bg-muted w-100">{ otherGroupItem ? otherGroupItem.name : LocalizeText('catalog_selectproduct') }</div>
-                    </NitroCardGridView>
-                </div>
-                <div className="d-flex col-12 justify-content-between align-items-end w-100">
-                    <button type="button" className="btn btn-danger" onClick={ cancelTrade }>{ LocalizeText('generic.cancel') }</button>
+                                        return (
+                                            <NitroCardGridItemView key={ i } itemActive={ (ownGroupItem === item) } itemImage={ item.iconUrl } itemCount={ item.getTotalCount() } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setOwnGroupItem(item) }>
+                                                { (ownGroupItem === item) &&
+                                                    <button className="btn btn-danger btn-sm trade-button left" onClick={ event => removeItem(item) }>
+                                                        <i className="fas fa-chevron-left" />
+                                                    </button> }
+                                            </NitroCardGridItemView>
+                                        );
+                                    }) }
+                            </NitroCardGridView>
+                        </NitroLayoutFlexColumn>
+                        <NitroLayoutBase className="badge bg-muted w-100">
+                            { ownGroupItem ? ownGroupItem.name : LocalizeText('catalog_selectproduct') }
+                        </NitroLayoutBase>
+                    </NitroLayoutGridColumn>
+                    <NitroLayoutGridColumn size={ 6 } gap={ 2 }>
+                        <NitroLayoutFlexColumn className="h-100" overflow="auto" gap={ 2 }>
+                            <span className="d-flex justify-content-between align-items-center  text-black small mb-1">{ tradeData.otherUser.userName } { LocalizeText('inventory.trading.isoffering') }: <i className={ 'small fas ' + (tradeData.otherUser.accepts ? 'fa-lock text-success' : 'fa-unlock text-danger') } /></span>
+                            <NitroCardGridView columns={ 3 }>
+                                { Array.from(Array(MAX_ITEMS_TO_TRADE), (e, i) =>
+                                    {
+                                        const item = (tradeData.otherUser.items.getWithIndex(i) || null);
+
+                                        if(!item) return <NitroCardGridItemView key={ i } />;
+
+                                        return <NitroCardGridItemView key={ i } itemActive={ (otherGroupItem === item) } itemImage={ item.iconUrl } itemCount={ item.getTotalCount() } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setOtherGroupItem(item) } />;
+                                    }) }
+                            </NitroCardGridView>
+                        </NitroLayoutFlexColumn>
+                        <NitroLayoutBase className="badge bg-muted w-100">
+                            { otherGroupItem ? otherGroupItem.name : LocalizeText('catalog_selectproduct') }
+                        </NitroLayoutBase>
+                    </NitroLayoutGridColumn>
+                </NitroLayoutGrid>
+                <NitroLayoutFlex className="flex-grow-1 justify-content-between">
+                    <NitroLayoutButton variant="danger" onClick={ cancelTrade }>{ LocalizeText('generic.cancel') }</NitroLayoutButton>
                     { getTradeButton }
-                </div>
-            </div>
-        </div>
+                </NitroLayoutFlex>
+            </NitroLayoutGridColumn>
+        </NitroLayoutGrid>
     );
 }
diff --git a/src/views/navigator/NavigatorView.scss b/src/views/navigator/NavigatorView.scss
index d29e353b..a438267d 100644
--- a/src/views/navigator/NavigatorView.scss
+++ b/src/views/navigator/NavigatorView.scss
@@ -1,11 +1,6 @@
 .nitro-navigator {
-    width: 400px;
-
-    .content-area {
-        min-height: 400px;
-        height: 400px;
-        resize: vertical;
-    }
+    width: $navigator-width;
+    height: $navigator-height;
 }
 
 .nitro-navigator-doorbell {
diff --git a/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx b/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx
index 385a0a4f..8fe49ce2 100644
--- a/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx
+++ b/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx
@@ -1,8 +1,8 @@
 import { RoomBannedUsersComposer, RoomBannedUsersEvent, RoomSettingsEvent, RoomUsersWithRightsComposer, RoomUsersWithRightsEvent, SaveRoomSettingsComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../api';
-import { FriendListEvent } from '../../../../events';
-import { FriendListContentEvent } from '../../../../events/friend-list/FriendListContentEvent';
+import { FriendsEvent } from '../../../../events';
+import { FriendListContentEvent } from '../../../../events/friends/FriendListContentEvent';
 import { dispatchUiEvent, useUiEvent } from '../../../../hooks';
 import { CreateMessageHook, SendMessageHook } from '../../../../hooks/messages';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../layout';
@@ -87,7 +87,7 @@ export const NavigatorRoomSettingsView: FC<{}> = props =>
 
     useEffect(() =>
     {
-        if(roomSettingsData) dispatchUiEvent(new FriendListEvent(FriendListEvent.REQUEST_FRIEND_LIST));
+        if(roomSettingsData) dispatchUiEvent(new FriendsEvent(FriendsEvent.REQUEST_FRIEND_LIST));
     }, [roomSettingsData])
 
     const save = useCallback((data: RoomSettingsData) =>
diff --git a/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx b/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx
index d949cfaa..a12d17bc 100644
--- a/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx
+++ b/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx
@@ -1,6 +1,6 @@
 import { RoomEnterEffect, RoomObjectCategory } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useMemo, useState } from 'react';
-import { GetRoomSession, GetSessionDataManager, RoomWidgetObjectNameEvent, RoomWidgetRoomEngineUpdateEvent, RoomWidgetRoomObjectMessage, RoomWidgetRoomObjectUpdateEvent, RoomWidgetUpdateDanceStatusEvent, RoomWidgetUpdateInfostandEvent, RoomWidgetUpdateInfostandFurniEvent, RoomWidgetUpdateInfostandPetEvent, RoomWidgetUpdateInfostandRentableBotEvent, RoomWidgetUpdateInfostandUserEvent, RoomWidgetUpdateRentableBotChatEvent, RoomWidgetUseProductBubbleEvent, UseProductItem } from '../../../../api';
+import { GetRoomSession, GetSessionDataManager, RoomWidgetObjectNameEvent, RoomWidgetRoomEngineUpdateEvent, RoomWidgetRoomObjectMessage, RoomWidgetRoomObjectUpdateEvent, RoomWidgetUpdateDanceStatusEvent, RoomWidgetUpdateDecorateModeEvent, RoomWidgetUpdateInfostandEvent, RoomWidgetUpdateInfostandFurniEvent, RoomWidgetUpdateInfostandPetEvent, RoomWidgetUpdateInfostandRentableBotEvent, RoomWidgetUpdateInfostandUserEvent, RoomWidgetUpdateRentableBotChatEvent, RoomWidgetUseProductBubbleEvent, UseProductItem } from '../../../../api';
 import { CreateEventDispatcherHook } from '../../../../hooks/events/event-dispatcher.base';
 import { useRoomContext } from '../../context/RoomContext';
 import { AvatarInfoWidgetAvatarView } from './views/avatar/AvatarInfoWidgetAvatarView';
@@ -264,6 +264,13 @@ export const AvatarInfoWidgetView: FC<{}> = props =>
 
     // useUiEvent(FriendEnteredRoomEvent.ENTERED, onFriendEnteredRoomEvent);
 
+    const onRoomWidgetUpdateDecorateModeEvent = useCallback((event: RoomWidgetUpdateDecorateModeEvent) =>
+    {
+        setIsDecorating(event.isDecorating);
+    }, []);
+
+    CreateEventDispatcherHook(RoomWidgetUpdateDecorateModeEvent.UPDATE_DECORATE, eventDispatcher, onRoomWidgetUpdateDecorateModeEvent);
+
     const decorateView = useMemo(() =>
     {
         GetRoomSession().isDecorating = isDecorating;
@@ -274,7 +281,7 @@ export const AvatarInfoWidgetView: FC<{}> = props =>
         const userName = GetSessionDataManager().userName;
         const roomIndex = GetRoomSession().ownRoomIndex;
 
-        return <AvatarInfoWidgetDecorateView userId={ userId } userName={ userName } roomIndex={ roomIndex } setIsDecorating={ setIsDecorating } />;
+        return <AvatarInfoWidgetDecorateView userId={ userId } userName={ userName } roomIndex={ roomIndex } />;
     }, [ isDecorating ]);
 
     const currentView = useMemo(() =>
@@ -316,7 +323,7 @@ export const AvatarInfoWidgetView: FC<{}> = props =>
                     {
                         if(RoomEnterEffect.isRunning()) return null;
 
-                        return <AvatarInfoWidgetOwnAvatarView userData={ event } isDancing={ isDancing } setIsDecorating={ setIsDecorating } close={ clearInfoStandEvent } />;
+                        return <AvatarInfoWidgetOwnAvatarView userData={ event } isDancing={ isDancing } close={ clearInfoStandEvent } />;
                     }
 
                     return <AvatarInfoWidgetAvatarView userData={ event } close={ clearInfoStandEvent } />;
diff --git a/src/views/room/widgets/avatar-info/views/decorate/AvatarInfoWidgetDecorateView.tsx b/src/views/room/widgets/avatar-info/views/decorate/AvatarInfoWidgetDecorateView.tsx
index 5a365394..95b752b0 100644
--- a/src/views/room/widgets/avatar-info/views/decorate/AvatarInfoWidgetDecorateView.tsx
+++ b/src/views/room/widgets/avatar-info/views/decorate/AvatarInfoWidgetDecorateView.tsx
@@ -1,6 +1,7 @@
 import { RoomObjectCategory } from '@nitrots/nitro-renderer';
-import { FC } from 'react';
-import { LocalizeText } from '../../../../../../api';
+import { FC, useCallback } from 'react';
+import { LocalizeText, RoomWidgetUpdateDecorateModeEvent } from '../../../../../../api';
+import { useRoomContext } from '../../../../context/RoomContext';
 import { ContextMenuView } from '../../../context-menu/ContextMenuView';
 import { ContextMenuListItemView } from '../../../context-menu/views/list-item/ContextMenuListItemView';
 import { ContextMenuListView } from '../../../context-menu/views/list/ContextMenuListView';
@@ -8,12 +9,18 @@ import { AvatarInfoWidgetDecorateViewProps } from './AvatarInfoWidgetDecorateVie
 
 export const AvatarInfoWidgetDecorateView: FC<AvatarInfoWidgetDecorateViewProps> = props =>
 {
-    const { userId = -1, userName = '', roomIndex = -1, setIsDecorating = null } = props;
+    const { userId = -1, userName = '', roomIndex = -1 } = props;
+    const { eventDispatcher = null } = useRoomContext();
+
+    const stopDecorating = useCallback(() =>
+    {
+        eventDispatcher.dispatchEvent(new RoomWidgetUpdateDecorateModeEvent(false));
+    }, [ eventDispatcher ]);
     
     return (
         <ContextMenuView objectId={ roomIndex } category={ RoomObjectCategory.UNIT } close={ null }>
             <ContextMenuListView>
-                <ContextMenuListItemView onClick={ event => setIsDecorating(false) }>
+                <ContextMenuListItemView onClick={ stopDecorating }>
                     { LocalizeText('widget.avatar.stop_decorating') }
                 </ContextMenuListItemView>
             </ContextMenuListView>
diff --git a/src/views/room/widgets/avatar-info/views/decorate/AvatarInfoWidgetDecorateView.types.ts b/src/views/room/widgets/avatar-info/views/decorate/AvatarInfoWidgetDecorateView.types.ts
index 2440f17a..86c19e35 100644
--- a/src/views/room/widgets/avatar-info/views/decorate/AvatarInfoWidgetDecorateView.types.ts
+++ b/src/views/room/widgets/avatar-info/views/decorate/AvatarInfoWidgetDecorateView.types.ts
@@ -1,9 +1,7 @@
-import { Dispatch, SetStateAction } from 'react';
 
 export interface AvatarInfoWidgetDecorateViewProps
 {
     userId: number;
     userName: string;
     roomIndex: number;
-    setIsDecorating: Dispatch<SetStateAction<boolean>>;
 }
diff --git a/src/views/room/widgets/avatar-info/views/own-avatar/AvatarInfoWidgetOwnAvatarView.tsx b/src/views/room/widgets/avatar-info/views/own-avatar/AvatarInfoWidgetOwnAvatarView.tsx
index c5555ec3..1fa8c8e0 100644
--- a/src/views/room/widgets/avatar-info/views/own-avatar/AvatarInfoWidgetOwnAvatarView.tsx
+++ b/src/views/room/widgets/avatar-info/views/own-avatar/AvatarInfoWidgetOwnAvatarView.tsx
@@ -1,6 +1,6 @@
 import { AvatarAction, AvatarExpressionEnum, RoomObjectCategory, UserProfileComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
-import { GetCanStandUp, GetCanUseExpression, GetOwnPosture, HasHabboClub, HasHabboVip, IsRidingHorse, LocalizeText, RoomWidgetAvatarExpressionMessage, RoomWidgetChangePostureMessage, RoomWidgetDanceMessage, RoomWidgetMessage, RoomWidgetUserActionMessage } from '../../../../../../api';
+import { GetCanStandUp, GetCanUseExpression, GetOwnPosture, HasHabboClub, HasHabboVip, IsRidingHorse, LocalizeText, RoomWidgetAvatarExpressionMessage, RoomWidgetChangePostureMessage, RoomWidgetDanceMessage, RoomWidgetMessage, RoomWidgetUpdateDecorateModeEvent, RoomWidgetUserActionMessage } from '../../../../../../api';
 import { AvatarEditorEvent } from '../../../../../../events';
 import { dispatchUiEvent, SendMessageHook } from '../../../../../../hooks';
 import { CurrencyIcon } from '../../../../../shared/currency-icon/CurrencyIcon';
@@ -18,9 +18,9 @@ const MODE_SIGNS = 4;
 
 export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProps> = props =>
 {
-    const { userData = null, isDancing = false, setIsDecorating = null, close = null } = props;
+    const { userData = null, isDancing = false, close = null } = props;
     const [ mode, setMode ] = useState((isDancing && HasHabboClub()) ? MODE_CLUB_DANCES : MODE_NORMAL);
-    const { roomSession = null, widgetHandler = null } = useRoomContext();
+    const { roomSession = null, eventDispatcher = null, widgetHandler = null } = useRoomContext();
 
     const processAction = useCallback((name: string) =>
     {
@@ -40,7 +40,7 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
                 switch(name)
                 {
                     case 'decorate':
-                        setIsDecorating(true);
+                        eventDispatcher.dispatchEvent(new RoomWidgetUpdateDecorateModeEvent(true));
                         break;
                     case 'change_looks':
                         dispatchUiEvent(new AvatarEditorEvent(AvatarEditorEvent.SHOW_EDITOR));
@@ -101,7 +101,7 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
         }
 
         if(hideMenu) close();
-    }, [ roomSession, widgetHandler, userData, setIsDecorating, close ]);
+    }, [ roomSession, eventDispatcher, widgetHandler, userData, close ]);
 
     const openProfile = useCallback(() =>
     {
diff --git a/src/views/room/widgets/avatar-info/views/own-avatar/AvatarInfoWidgetOwnAvatarView.types.ts b/src/views/room/widgets/avatar-info/views/own-avatar/AvatarInfoWidgetOwnAvatarView.types.ts
index e462efa6..00db768e 100644
--- a/src/views/room/widgets/avatar-info/views/own-avatar/AvatarInfoWidgetOwnAvatarView.types.ts
+++ b/src/views/room/widgets/avatar-info/views/own-avatar/AvatarInfoWidgetOwnAvatarView.types.ts
@@ -1,10 +1,8 @@
-import { Dispatch, SetStateAction } from 'react';
 import { RoomWidgetUpdateInfostandUserEvent } from '../../../../../../api';
 
 export interface AvatarInfoWidgetOwnAvatarViewProps
 {
     userData: RoomWidgetUpdateInfostandUserEvent;
     isDancing: boolean;
-    setIsDecorating: Dispatch<SetStateAction<boolean>>;
     close: () => void;
 }
diff --git a/src/views/room/widgets/chat/message/ChatWidgetMessageView.scss b/src/views/room/widgets/chat/message/ChatWidgetMessageView.scss
index 9bdbcb6b..9337ed85 100644
--- a/src/views/room/widgets/chat/message/ChatWidgetMessageView.scss
+++ b/src/views/room/widgets/chat/message/ChatWidgetMessageView.scss
@@ -696,7 +696,6 @@
             justify-content: center;
             height: 100%;
             max-height: 24px;
-            image-rendering: -webkit-optimize-contrast;
             overflow: hidden;
 
             .user-image {
@@ -707,8 +706,9 @@
                 height: 130px;
                 background-repeat: no-repeat;
                 background-position: center;
-                transform: scale(0.5) translateZ(0);
+                transform: scale(0.5);
                 overflow: hidden;
+                image-rendering: -webkit-optimize-contrast;
             }
         }
 
diff --git a/src/views/room/widgets/furniture/manipulation-menu/FurnitureManipulationMenuView.tsx b/src/views/room/widgets/furniture/manipulation-menu/FurnitureManipulationMenuView.tsx
index d7b60d69..33752c8f 100644
--- a/src/views/room/widgets/furniture/manipulation-menu/FurnitureManipulationMenuView.tsx
+++ b/src/views/room/widgets/furniture/manipulation-menu/FurnitureManipulationMenuView.tsx
@@ -1,36 +1,17 @@
 import { RoomObjectOperationType } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
-import { ProcessRoomObjectOperation, RoomWidgetRoomObjectUpdateEvent } from '../../../../../api';
+import { ProcessRoomObjectOperation, RoomWidgetRoomObjectUpdateEvent, RoomWidgetUpdateDecorateModeEvent } from '../../../../../api';
+import { BatchUpdates } from '../../../../../hooks';
 import { CreateEventDispatcherHook } from '../../../../../hooks/events/event-dispatcher.base';
 import { useRoomContext } from '../../../context/RoomContext';
 import { ObjectLocationView } from '../../object-location/ObjectLocationView';
 
 export const FurnitureManipulationMenuView: FC<{}> = props =>
 {
-    const { eventDispatcher = null, widgetHandler = null } = useRoomContext();
     const [ isVisible, setIsVisible ] = useState(false);
     const [ objectId, setObjectId ] = useState(-1);
     const [ objectType, setObjectType ] = useState(-1);
-
-    const onRoomWidgetRoomObjectUpdateEvent = useCallback((event: RoomWidgetRoomObjectUpdateEvent) =>
-    {
-        switch(event.type)
-        {
-            case RoomWidgetRoomObjectUpdateEvent.OBJECT_REQUEST_MANIPULATION: {
-                setIsVisible(true);
-                setObjectId(event.id);
-                setObjectType(event.category);
-                return;
-            }
-            case RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED: {
-                return;
-            }
-            case RoomWidgetRoomObjectUpdateEvent.OBJECT_DESELECTED: {
-                setIsVisible(false);
-                return;
-            }
-        }
-    }, []);
+    const { roomSession = null, eventDispatcher = null, widgetHandler = null } = useRoomContext();
 
     const rotateFurniture = useCallback(() =>
     {
@@ -42,22 +23,87 @@ export const FurnitureManipulationMenuView: FC<{}> = props =>
         ProcessRoomObjectOperation(objectId, objectType, RoomObjectOperationType.OBJECT_MOVE);
     }, [ objectId, objectType ]);
 
-    useEffect(() =>
+    const pickupFurniture = useCallback(() =>
     {
-        if(!isVisible) return;
+        ProcessRoomObjectOperation(objectId, objectType, RoomObjectOperationType.OBJECT_PICKUP);
+    }, [ objectId, objectType ]);
 
-        moveFurniture();
-    }, [ isVisible, moveFurniture ]);
+    const onRoomWidgetRoomObjectUpdateEvent = useCallback((event: RoomWidgetRoomObjectUpdateEvent) =>
+    {
+        switch(event.type)
+        {
+            case RoomWidgetRoomObjectUpdateEvent.OBJECT_REQUEST_MANIPULATION: {
+                BatchUpdates(() =>
+                {
+                    setIsVisible(true);
+                    setObjectId(event.id);
+                    setObjectType(event.category);
+                });
+                return;
+            }
+            case RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED: {
+                if(event.id === objectId)
+                {
+                    BatchUpdates(() =>
+                    {
+                        setIsVisible(false);
+                        setObjectId(-1);
+                        setObjectType(-1);
+                    });
+                }
+                return;
+            }
+            case RoomWidgetRoomObjectUpdateEvent.OBJECT_DESELECTED: {
+                BatchUpdates(() =>
+                {
+                    setIsVisible(false);
+                    setObjectId(-1);
+                    setObjectType(-1);
+                });
+                return;
+            }
+        }
+    }, [ objectId ]);
 
     CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.OBJECT_REQUEST_MANIPULATION, eventDispatcher, onRoomWidgetRoomObjectUpdateEvent);
     CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.OBJECT_DESELECTED, eventDispatcher, onRoomWidgetRoomObjectUpdateEvent);
 
+    const onRoomWidgetUpdateDecorateModeEvent = useCallback((event: RoomWidgetUpdateDecorateModeEvent) =>
+    {
+        if(event.isDecorating) return;
+
+        moveFurniture();
+
+        BatchUpdates(() =>
+        {
+            setIsVisible(false);
+            setObjectId(-1);
+            setObjectType(-1);
+        });
+    }, [ moveFurniture ]);
+
+    CreateEventDispatcherHook(RoomWidgetUpdateDecorateModeEvent.UPDATE_DECORATE, eventDispatcher, onRoomWidgetUpdateDecorateModeEvent);
+
+    useEffect(() =>
+    {
+        if(!isVisible)
+        {
+            eventDispatcher.dispatchEvent(new RoomWidgetUpdateDecorateModeEvent(false));
+
+            return;
+        }
+
+        eventDispatcher.dispatchEvent(new RoomWidgetUpdateDecorateModeEvent(true));
+
+        moveFurniture();
+    }, [ eventDispatcher, isVisible, moveFurniture ]);
+
     if(!isVisible) return null;
 
     return (
         <ObjectLocationView objectId={ objectId } category={ objectType }>
             <div className="btn-group">
-                <button type="button" className="btn btn-primary btn-sm">
+                <button type="button" className="btn btn-primary btn-sm" onClick={ pickupFurniture }>
                     <i className="fas fa-times" />
                 </button>
                 <button type="button" className="btn btn-primary btn-sm" onClick={ rotateFurniture }>
diff --git a/src/views/shared/avatar-image/AvatarImage.scss b/src/views/shared/avatar-image/AvatarImage.scss
index f85ca9c4..07022cae 100644
--- a/src/views/shared/avatar-image/AvatarImage.scss
+++ b/src/views/shared/avatar-image/AvatarImage.scss
@@ -3,7 +3,12 @@
     width: 90px;
     height: 130px;
     background-repeat: no-repeat;
-    background-position-x: center;
-    background-position-y: -8px !important;
+    background-position: center -8px;
     pointer-events: none;
+    image-rendering: pixelated;
+
+    &.scale-0-5,
+    &.scale-0-75 {
+        image-rendering: -webkit-optimize-contrast;
+    }
 }
diff --git a/src/views/shared/avatar-image/AvatarImageView.tsx b/src/views/shared/avatar-image/AvatarImageView.tsx
index 5d2a2a33..94ffac65 100644
--- a/src/views/shared/avatar-image/AvatarImageView.tsx
+++ b/src/views/shared/avatar-image/AvatarImageView.tsx
@@ -1,5 +1,5 @@
 import { AvatarScaleType, AvatarSetType } from '@nitrots/nitro-renderer';
-import { FC, useEffect, useRef, useState } from 'react';
+import { FC, useEffect, useMemo, useRef, useState } from 'react';
 import { GetAvatarRenderManager } from '../../../api';
 import { AvatarImageViewProps } from './AvatarImageView.types';
 
@@ -10,6 +10,19 @@ export const AvatarImageView: FC<AvatarImageViewProps> = props =>
     const [ randomValue, setRandomValue ] = useState(-1);
     const isDisposed = useRef(false);
 
+    const getScaleStyle = useMemo(() =>
+    {
+        if(scale === .5) return '0-5';
+
+        if(scale === .75) return '0-75';
+
+        if(scale === 1.25) return '1-25';
+
+        if(scale === 1.50) return '1-50';
+
+        return scale.toString();
+    }, [ scale ]);
+
     useEffect(() =>
     {
         const avatarImage = GetAvatarRenderManager().createAvatarImage(figure, AvatarScaleType.LARGE, gender, {
@@ -50,5 +63,5 @@ export const AvatarImageView: FC<AvatarImageViewProps> = props =>
 
     const url = `url('${ avatarUrl }')`;
         
-    return <div className={ 'avatar-image scale-' + scale } style={ (avatarUrl && url.length) ? { backgroundImage: url } : {} }></div>;
+    return <div className={ 'avatar-image scale-' + getScaleStyle } style={ (avatarUrl && url.length) ? { backgroundImage: url } : {} }></div>;
 }
diff --git a/src/views/shared/badge-image/BadgeImage.scss b/src/views/shared/badge-image/BadgeImage.scss
index d7067045..b08e2de8 100644
--- a/src/views/shared/badge-image/BadgeImage.scss
+++ b/src/views/shared/badge-image/BadgeImage.scss
@@ -1,7 +1,7 @@
 .badge-image {
     position: relative;
-    width: 100%;
-    height: 100%;
+    width: 45px;
+    height: 45px;
     background-repeat: no-repeat;
     background-position: center;
     
diff --git a/src/views/shared/room-previewer/RoomPreviewerView.scss b/src/views/shared/room-previewer/RoomPreviewerView.scss
index 55328299..e6192624 100644
--- a/src/views/shared/room-previewer/RoomPreviewerView.scss
+++ b/src/views/shared/room-previewer/RoomPreviewerView.scss
@@ -12,7 +12,6 @@
         background-color: $light;
         background-repeat: no-repeat;
         background-position: center;
-        image-rendering: auto;
     
         &.border-0 {
             &::after {
diff --git a/src/views/shared/room-previewer/RoomPreviewerView.tsx b/src/views/shared/room-previewer/RoomPreviewerView.tsx
index d30bdb54..4691fd45 100644
--- a/src/views/shared/room-previewer/RoomPreviewerView.tsx
+++ b/src/views/shared/room-previewer/RoomPreviewerView.tsx
@@ -6,9 +6,7 @@ import { RoomPreviewerViewProps } from './RoomPreviewerView.types';
 export const RoomPreviewerView: FC<RoomPreviewerViewProps> = props =>
 {
     const { roomPreviewer = null, height = 0 } = props;
-
     const [ renderingCanvas, setRenderingCanvas ] = useState<IRoomRenderingCanvas>(null);
-
     const elementRef = useRef<HTMLDivElement>();
 
     const update = useCallback((time: number) =>
@@ -41,9 +39,6 @@ export const RoomPreviewerView: FC<RoomPreviewerViewProps> = props =>
 
         const canvas = roomPreviewer.getRenderingCanvas();
 
-        elementRef.current.style.width = `${ width }px`;
-        elementRef.current.style.height = `${ height }px`;
-
         setRenderingCanvas(canvas);
 
         canvas.canvasUpdated = true;
@@ -59,34 +54,31 @@ export const RoomPreviewerView: FC<RoomPreviewerViewProps> = props =>
 
         GetNitroInstance().ticker.add(update);
 
-        function resize(): void
-        {
-            if(!roomPreviewer) return;
+        const resizeObserver = new ResizeObserver(() =>
+            {
+                if(!roomPreviewer || !elementRef.current) return;
 
-            const width = elementRef.current.parentElement.offsetWidth;
+                const width = elementRef.current.parentElement.offsetWidth;
 
-            elementRef.current.style.width = `${ width }px`;
-            elementRef.current.style.height = `${ height }px`;
+                roomPreviewer.modifyRoomCanvas(width, height);
 
-            roomPreviewer.modifyRoomCanvas(width, height);
-
-            update(-1);
-        }
-
-        window.addEventListener('resize', resize);
+                update(-1);
+            });
+        
+        resizeObserver.observe(elementRef.current);
 
         return () =>
         {
-            GetNitroInstance().ticker.remove(update);
+            resizeObserver.disconnect();
 
-            window.removeEventListener('resize', resize);
+            GetNitroInstance().ticker.remove(update);
         }
 
     }, [ renderingCanvas, roomPreviewer, elementRef, height, setupPreviewer, update ]);
 
     return (
         <div className="room-preview-container">
-            <div ref={ elementRef } className="room-preview-image" />
+            <div ref={ elementRef } className="room-preview-image" style={ { height } } />
             { props.children }
         </div>
     );
diff --git a/src/views/toolbar/ToolbarView.scss b/src/views/toolbar/ToolbarView.scss
index 44abb043..57401e81 100644
--- a/src/views/toolbar/ToolbarView.scss
+++ b/src/views/toolbar/ToolbarView.scss
@@ -29,31 +29,28 @@
                 align-items: center;
                 justify-content: center;
                 cursor: pointer;
-                width: 50px;
-                margin: 0 1px;
+                //margin: 0 1px;
                 position: relative;
 
-                .toolbar-avatar {
-                    height: 50px;
+                &.item-avatar {
+                    width: 50px;
+                    height: 45px;
+                    overflow: hidden;
                     
                     .avatar-image {
                         margin-left: -5px;
-                        margin-top: -30px;
-                    }
-
-                    &:hover, &.active {
-                        height: 53px;
+                        margin-top: 25px;
                     }
                 }
 
                 .icon,
-                .toolbar-avatar {
+                &.item-avatar {
                     position: relative;
-                    transition: transform .2s ease-out;
+                    //transition: transform .2s ease-out;
 
                     &:hover, &.active {
-                        -webkit-transform: translate(0, -3px);
-                        transform: translate(0, -3px);
+                        -webkit-transform: translate(-1px, -1px);
+                        transform: translate(-1px, -1px);
                         filter: drop-shadow(2px 2px 0 rgba($black, 0.8));
                     }
                 }
@@ -68,7 +65,7 @@
 
                 .count {
                     top: 0rem;
-                    right: 5px;
+                    right: 2px;
                     font-size: 10px;
                 }
             }
diff --git a/src/views/toolbar/ToolbarView.tsx b/src/views/toolbar/ToolbarView.tsx
index 74b22062..3dcd3322 100644
--- a/src/views/toolbar/ToolbarView.tsx
+++ b/src/views/toolbar/ToolbarView.tsx
@@ -1,7 +1,7 @@
 import { Dispose, DropBounce, EaseOut, FigureUpdateEvent, JumpBy, Motions, NitroToolbarAnimateIconEvent, Queue, UserInfoDataParser, UserInfoEvent, UserProfileComposer, Wait } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
-import { GetRoomSession, GetRoomSessionManager, GetSessionDataManager, GoToDesktop } from '../../api';
-import { AvatarEditorEvent, CatalogEvent, FriendListEvent, InventoryEvent, NavigatorEvent, RoomWidgetCameraEvent } from '../../events';
+import { GetRoomSession, GetRoomSessionManager, GetSessionDataManager, GoToDesktop, OpenMessengerChat } from '../../api';
+import { AvatarEditorEvent, CatalogEvent, FriendsEvent, FriendsMessengerIconEvent, InventoryEvent, NavigatorEvent, RoomWidgetCameraEvent } from '../../events';
 import { AchievementsUIEvent } from '../../events/achievements';
 import { UnseenItemTrackerUpdateEvent } from '../../events/inventory/UnseenItemTrackerUpdateEvent';
 import { ModToolsEvent } from '../../events/mod-tools/ModToolsEvent';
@@ -14,6 +14,10 @@ import { AvatarImageView } from '../shared/avatar-image/AvatarImageView';
 import { ToolbarMeView } from './me/ToolbarMeView';
 import { ToolbarViewItems, ToolbarViewProps } from './ToolbarView.types';
 
+const CHAT_ICON_HIDDEN: number = 0;
+const CHAT_ICON_SHOWING: number = 1;
+const CHAT_ICON_UNREAD: number = 2;
+
 export const ToolbarView: FC<ToolbarViewProps> = props =>
 {
     const { isInRoom } = props;
@@ -21,6 +25,7 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
     const [ userInfo, setUserInfo ] = useState<UserInfoDataParser>(null);
     const [ userFigure, setUserFigure ] = useState<string>(null);
     const [ isMeExpanded, setMeExpanded ] = useState(false);
+    const [ chatIconType, setChatIconType ] = useState(CHAT_ICON_HIDDEN);
     const [ unseenInventoryCount, setUnseenInventoryCount ] = useState(0);
 
     const unseenFriendListCount = 0;
@@ -45,6 +50,13 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
     
     CreateMessageHook(FigureUpdateEvent, onUserFigureEvent);
 
+    const onFriendsMessengerIconEvent = useCallback((event: FriendsMessengerIconEvent) =>
+    {
+        setChatIconType(event.iconType);
+    }, []);
+
+    useUiEvent(FriendsMessengerIconEvent.UPDATE_ICON, onFriendsMessengerIconEvent);
+
     const onUnseenItemTrackerUpdateEvent = useCallback((event: UnseenItemTrackerUpdateEvent) =>
     {
         setUnseenInventoryCount(event.count);
@@ -107,7 +119,7 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
                 dispatchUiEvent(new CatalogEvent(CatalogEvent.TOGGLE_CATALOG));
                 return;
             case ToolbarViewItems.FRIEND_LIST_ITEM:
-                dispatchUiEvent(new CatalogEvent(FriendListEvent.TOGGLE_FRIEND_LIST));
+                dispatchUiEvent(new CatalogEvent(FriendsEvent.TOGGLE_FRIEND_LIST));
                 return;
             case ToolbarViewItems.CAMERA_ITEM:
                 dispatchUiEvent(new RoomWidgetCameraEvent(RoomWidgetCameraEvent.TOGGLE_CAMERA));
@@ -131,6 +143,9 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
                 dispatchUiEvent(new UserSettingsUIEvent(UserSettingsUIEvent.TOGGLE_USER_SETTINGS));
                 setMeExpanded(false);
                 return;
+            case ToolbarViewItems.FRIEND_CHAT_ITEM:
+                OpenMessengerChat();
+                return;
         }
     }, []);
 
@@ -143,25 +158,21 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
     }, []);
 
     return (
-        <div className="nitro-toolbar-container">
+        <div className="nitro-toolbar-container overflow-hidden">
             <TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ isMeExpanded } timeout={ 300 }>
                 <ToolbarMeView handleToolbarItemClick={ handleToolbarItemClick } />
             </TransitionAnimation>
             <div className="d-flex justify-content-between align-items-center nitro-toolbar py-1 px-3">
-                <div className="d-flex align-items-center toolbar-left-side">
-                    <div className="navigation-items navigation-avatar pe-1 me-2">
-                        <div className="navigation-item">
-                            <div className={ 'toolbar-avatar ' + (isMeExpanded ? 'active ' : '') } onClick={ event => setMeExpanded(!isMeExpanded) }>
-                                <AvatarImageView figure={ userFigure } direction={ 2 } />
-                            </div>
+                <div className="d-flex align-items-center">
+                    <div className="navigation-items gap-2">
+                        <div className={ 'navigation-item item-avatar ' + (isMeExpanded ? 'active ' : '') } onClick={ event => setMeExpanded(!isMeExpanded) }>
+                            <AvatarImageView figure={ userFigure } direction={ 2 } />
+                            { (unseenAchievementsCount > 0) &&
+                                <div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenAchievementsCount }</div> }
                         </div>
-                        { (unseenAchievementsCount > 0) && (
-                            <div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenAchievementsCount }</div>) }
-                    </div>
-                    <div className="navigation-items">
                         { isInRoom && (
                             <div className="navigation-item" onClick={ visitDesktop }>
-                                <i className="icon icon-hotelview icon-nitro-light"></i>
+                                <i className="icon icon-habbo"></i>
                             </div>) }
                         { !isInRoom && (
                             <div className="navigation-item">
@@ -188,13 +199,20 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
                     </div>
                     <div id="toolbar-chat-input-container" className="d-flex align-items-center" />
                 </div>
-                <div className="d-flex toolbar-right-side">
-                    <div className="navigation-items">
+                <div className="d-flex align-items-center gap-2">
+                    <div className="navigation-items gap-2">
                         <div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.FRIEND_LIST_ITEM) }>
                             <i className="icon icon-friendall"></i>
                             { (unseenFriendListCount > 0) && (
                                 <div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenFriendListCount }</div>) }
                         </div>
+                        { ((chatIconType === CHAT_ICON_SHOWING) || (chatIconType === CHAT_ICON_UNREAD)) &&
+                            <div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.FRIEND_CHAT_ITEM) }>
+                                { (chatIconType === CHAT_ICON_SHOWING) && <i className="icon icon-message" /> }
+                                { (chatIconType === CHAT_ICON_UNREAD) && <i className="icon icon-message is-unseen" /> }
+                                { (unseenFriendListCount > 0) &&
+                                    <div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenFriendListCount }</div> }
+                            </div> }
                     </div>
                     <div id="toolbar-friend-bar-container" />
                 </div>
diff --git a/src/views/toolbar/ToolbarView.types.ts b/src/views/toolbar/ToolbarView.types.ts
index 0670bca7..48a376d1 100644
--- a/src/views/toolbar/ToolbarView.types.ts
+++ b/src/views/toolbar/ToolbarView.types.ts
@@ -9,6 +9,7 @@ export class ToolbarViewItems
     public static INVENTORY_ITEM: string    = 'TVI_INVENTORY_ITEM';
     public static CATALOG_ITEM: string      = 'TVI_CATALOG_ITEM';
     public static FRIEND_LIST_ITEM: string  = 'TVI_FRIEND_LIST_ITEM';
+    public static FRIEND_CHAT_ITEM: string  = 'TVI_FRIEND_CHAT_ITEM';
     public static CLOTHING_ITEM: string     = 'TVI_CLOTHING_ITEM';
     public static CAMERA_ITEM: string       = 'TVI_CAMERA_ITEM';
     public static MOD_TOOLS_ITEM: string    = 'TVI_MOD_TOOLS_ITEM';
diff --git a/src/views/user-profile/views/badges-container/BadgesContainerView.tsx b/src/views/user-profile/views/badges-container/BadgesContainerView.tsx
index cba4e091..13e84199 100644
--- a/src/views/user-profile/views/badges-container/BadgesContainerView.tsx
+++ b/src/views/user-profile/views/badges-container/BadgesContainerView.tsx
@@ -1,4 +1,5 @@
 import { FC } from 'react';
+import { NitroCardGridItemView, NitroCardGridView } from '../../../../layout';
 import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
 import { BadgesContainerViewProps } from './BadgesContainerView.types';
 
@@ -7,21 +8,36 @@ export const BadgesContainerView: FC<BadgesContainerViewProps> = props =>
     const { badges = null } = props;
 
     return (
-        <div className="row badge-container d-flex mt-1">
-            <div className="nitro-card-grid theme-default">
-                <div className="row row-cols-5 align-content-start">
-                {
-                    badges.map( (badge, index) => 
-{
-                        return (
-                        <div className="grid-item-container" key={index}>
-                            <BadgeImageView badgeCode={badge}/>
-                        </div>
-                        )
-                    })
-                }
-                </div>
-            </div>
+        <div className="row">
+            <NitroCardGridView columns={ 5 }>
+                { badges && (badges.length > 0) && badges.map((badge, index) =>
+                        {
+                            return (
+                                <NitroCardGridItemView key={ index }>
+                                    <BadgeImageView badgeCode={ badge }/>
+                                </NitroCardGridItemView>
+                            )
+                        }) }
+            </NitroCardGridView>
         </div>
-    );
+    )
+
+//     return (
+//         <div className="row badge-container d-flex mt-1">
+//             <div className="nitro-card-grid theme-default">
+//                 <div className="row row-cols-5 align-content-start">
+//                 {
+//                     badges.map( (badge, index) => 
+// {
+//                         return (
+//                         <div className="grid-item-container" key={index}>
+//                             <BadgeImageView badgeCode={badge}/>
+//                         </div>
+//                         )
+//                     })
+//                 }
+//                 </div>
+//             </div>
+//         </div>
+//     );
 }
diff --git a/tsconfig.json b/tsconfig.json
index df4dcf04..ac2a9fd7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -24,6 +24,6 @@
   },
   "include": [
     "src",
-    "node_modules/@nitrots/nitro-renderer/**/*.ts",
+    "node_modules/@nitrots/nitro-renderer/src/**/*.ts",
   ]
 }