diff --git a/src/views/toolbar/ToolbarView.scss b/src/views/toolbar/ToolbarView.scss
index 779b8160..6e807297 100644
--- a/src/views/toolbar/ToolbarView.scss
+++ b/src/views/toolbar/ToolbarView.scss
@@ -5,19 +5,20 @@
     width: 100%;
     height: $toolbar-height;
     z-index: $toolbar-zindex;
-    
+
     .nitro-toolbar {
         height: 100%;
         pointer-events: all;
-        background: rgba($dark,.95);
-        box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4);
+        background: rgba($dark, 0.95);
+        box-shadow: inset 0px 5px lighten(rgba($dark, 0.6), 2.5),
+            inset 0 -4px darken(rgba($dark, 0.6), 4);
 
         #toolbar-chat-input-container {
             margin: 0 10px;
 
             @include media-breakpoint-down(sm) {
-                 width: 0px;
-                 height: 0px
+                width: 0px;
+                height: 0px;
             }
         }
 
@@ -26,7 +27,7 @@
             align-items: center;
 
             &.navigation-avatar {
-                border-right: 1px solid rgba(0, 0, 0, .3);
+                border-right: 1px solid rgba(0, 0, 0, 0.3);
             }
 
             .navigation-item {
@@ -41,7 +42,7 @@
                     width: 50px;
                     height: 45px;
                     overflow: hidden;
-                    
+
                     .avatar-image {
                         margin-left: -5px;
                         margin-top: 25px;
@@ -53,7 +54,8 @@
                     position: relative;
                     //transition: transform .2s ease-out;
 
-                    &:hover, &.active {
+                    &:hover,
+                    &.active {
                         -webkit-transform: translate(-1px, -1px);
                         transform: translate(-1px, -1px);
                         filter: drop-shadow(2px 2px 0 rgba($black, 0.8));
@@ -67,12 +69,6 @@
                 .chat-input-container {
                     left: 60px;
                 }
-
-                .count {
-                    top: 0rem;
-                    right: 2px;
-                    font-size: 10px;
-                }
             }
         }
 
@@ -82,28 +78,27 @@
             position: absolute;
             font-size: 12px;
             z-index: $toolbar-memenu-zindex;
-        
+
             .list-group {
-        
                 .list-group-item {
                     min-width: 70px;
-                    transition: all .3s;
+                    transition: all 0.3s;
                     font-size: 10px;
                     text-align: center;
-        
+
                     i {
                         filter: grayscale(1);
                     }
-        
+
                     &:hover {
                         color: $cyan;
                         text-decoration: underline;
-        
+
                         i {
                             filter: grayscale(0);
                         }
                     }
-        
+
                     .count {
                         top: 0px;
                         right: 5px;
@@ -123,7 +118,9 @@
     max-width: 120px;
     max-height: 150px;
     z-index: 500;
-    filter: drop-shadow(2px 1px 0 rgba($white, 1)) drop-shadow(-2px 1px 0 rgba($white, 1)) drop-shadow(0 -2px 0 rgba($white, 1));
+    filter: drop-shadow(2px 1px 0 rgba($white, 1))
+        drop-shadow(-2px 1px 0 rgba($white, 1))
+        drop-shadow(0 -2px 0 rgba($white, 1));
 }
 
-@import './me/ToolbarMeView';
+@import "./me/ToolbarMeView";
diff --git a/src/views/toolbar/ToolbarView.tsx b/src/views/toolbar/ToolbarView.tsx
index 1e9fbab2..30ad7f8d 100644
--- a/src/views/toolbar/ToolbarView.tsx
+++ b/src/views/toolbar/ToolbarView.tsx
@@ -1,16 +1,17 @@
-import { Dispose, DropBounce, EaseOut, FigureUpdateEvent, JumpBy, Motions, NitroToolbarAnimateIconEvent, Queue, UserInfoDataParser, UserInfoEvent, UserProfileComposer, Wait } from '@nitrots/nitro-renderer';
+import { Dispose, DropBounce, EaseOut, FigureUpdateEvent, JumpBy, Motions, NitroToolbarAnimateIconEvent, Queue, UserInfoDataParser, UserInfoEvent, Wait } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
-import { CreateLinkEvent, GetRoomSession, GetRoomSessionManager, GetSessionDataManager, GoToDesktop, OpenMessengerChat } from '../../api';
-import { AvatarEditorEvent, CatalogEvent, FriendsEvent, FriendsMessengerIconEvent, InventoryEvent, NavigatorEvent, RoomWidgetCameraEvent } from '../../events';
+import { CreateLinkEvent, GetRoomSession, GetRoomSessionManager, GetSessionDataManager, GetUserProfile, GoToDesktop, OpenMessengerChat } from '../../api';
+import { AvatarEditorEvent, CatalogEvent, FriendsEvent, FriendsMessengerIconEvent, FriendsRequestCountEvent, InventoryEvent, NavigatorEvent, RoomWidgetCameraEvent } from '../../events';
 import { AchievementsUIEvent, AchievementsUIUnseenCountEvent } from '../../events/achievements';
 import { UnseenItemTrackerUpdateEvent } from '../../events/inventory/UnseenItemTrackerUpdateEvent';
 import { ModToolsEvent } from '../../events/mod-tools/ModToolsEvent';
 import { UserSettingsUIEvent } from '../../events/user-settings/UserSettingsUIEvent';
 import { dispatchUiEvent, useRoomEngineEvent, useUiEvent } from '../../hooks';
-import { CreateMessageHook, SendMessageHook } from '../../hooks/messages/message-event';
+import { CreateMessageHook } from '../../hooks/messages/message-event';
 import { TransitionAnimation } from '../../layout/transitions/TransitionAnimation';
 import { TransitionAnimationTypes } from '../../layout/transitions/TransitionAnimation.types';
 import { AvatarImageView } from '../shared/avatar-image/AvatarImageView';
+import { ItemCountView } from '../shared/item-count/ItemCountView';
 import { ToolbarMeView } from './me/ToolbarMeView';
 import { ToolbarViewItems, ToolbarViewProps } from './ToolbarView.types';
 
@@ -28,9 +29,8 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
     const [ chatIconType, setChatIconType ] = useState(CHAT_ICON_HIDDEN);
     const [ unseenInventoryCount, setUnseenInventoryCount ] = useState(0);
     const [ unseenAchievementCount, setUnseenAchievementCount ] = useState(0);
-
+    const [ unseenFriendRequestCount, setFriendRequestCount ] = useState(0);
     const isMod = GetSessionDataManager().isModerator;
-    const unseenFriendListCount = 0;
 
     const onUserInfoEvent = useCallback((event: UserInfoEvent) =>
     {
@@ -72,27 +72,34 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
 
     useUiEvent(AchievementsUIUnseenCountEvent.UNSEEN_COUNT, onAchievementsUIUnseenCountEvent);
 
+    const onFriendsRequestCountEvent = useCallback((event: FriendsRequestCountEvent) =>
+    {
+        setFriendRequestCount(event.count);
+    }, []);
+
+    useUiEvent(FriendsRequestCountEvent.UPDATE_COUNT, onFriendsRequestCountEvent);
+
     const animationIconToToolbar = useCallback((iconName: string, image: HTMLImageElement, x: number, y: number) =>
     {
         const target = (document.body.getElementsByClassName(iconName)[0] as HTMLElement);
 
         if(!target) return;
         
-        image.className         = 'toolbar-icon-animation';
-        image.style.visibility  = 'visible';
-        image.style.left        = (x + 'px');
-        image.style.top         = (y + 'px');
+        image.className = 'toolbar-icon-animation';
+        image.style.visibility = 'visible';
+        image.style.left = (x + 'px');
+        image.style.top = (y + 'px');
 
         document.body.append(image);
 
         const targetBounds  = target.getBoundingClientRect();
         const imageBounds   = image.getBoundingClientRect();
 
-        const left    = (imageBounds.x - targetBounds.x);
-        const top     = (imageBounds.y - targetBounds.y);
+        const left = (imageBounds.x - targetBounds.x);
+        const top = (imageBounds.y - targetBounds.y);
         const squared = Math.sqrt(((left * left) + (top * top)));
-        const wait    = (500 - Math.abs(((((1 / squared) * 100) * 500) * 0.5)));
-        const height  = 20;
+        const wait = (500 - Math.abs(((((1 / squared) * 100) * 500) * 0.5)));
+        const height = 20;
 
         const motionName = (`ToolbarBouncing[${ iconName }]`);
 
@@ -144,7 +151,7 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
                 setMeExpanded(false);
                 return;
             case ToolbarViewItems.PROFILE_ITEM:
-                SendMessageHook(new UserProfileComposer(GetSessionDataManager().userId));
+                GetUserProfile(GetSessionDataManager().userId);
                 setMeExpanded(false);
                 return;
             case ToolbarViewItems.SETTINGS_ITEM:
@@ -176,7 +183,7 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
                         <div className={ 'navigation-item item-avatar ' + (isMeExpanded ? 'active ' : '') } onClick={ event => setMeExpanded(!isMeExpanded) }>
                             <AvatarImageView figure={ userFigure } direction={ 2 } />
                             { (unseenAchievementCount > 0) &&
-                                <div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenAchievementCount }</div> }
+                                <ItemCountView count={ unseenAchievementCount } /> }
                         </div>
                         { isInRoom && (
                             <div className="navigation-item" onClick={ visitDesktop }>
@@ -194,8 +201,8 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
                         </div>
                         <div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.INVENTORY_ITEM) }>
                             <i className="icon icon-inventory"></i>
-                            { (unseenInventoryCount > 0) && (
-                                <div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenInventoryCount }</div>) }
+                            { (unseenInventoryCount > 0) &&
+                                <ItemCountView count={ unseenInventoryCount } /> }
                         </div>
                         { isInRoom && (
                             <div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.CAMERA_ITEM) }>
@@ -212,15 +219,13 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
                     <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>) }
+                            { (unseenFriendRequestCount > 0) &&
+                                <ItemCountView count={ unseenFriendRequestCount } /> }
                         </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" className="d-none d-lg-block" />
diff --git a/src/views/toolbar/me/ToolbarMeView.tsx b/src/views/toolbar/me/ToolbarMeView.tsx
index 510e68ef..8a707870 100644
--- a/src/views/toolbar/me/ToolbarMeView.tsx
+++ b/src/views/toolbar/me/ToolbarMeView.tsx
@@ -1,6 +1,7 @@
 import { RoomObjectCategory } from '@nitrots/nitro-renderer';
 import { FC, useEffect } from 'react';
 import { GetRoomEngine, GetRoomSession } from '../../../api';
+import { ItemCountView } from '../../shared/item-count/ItemCountView';
 import { ToolbarViewItems } from '../ToolbarView.types';
 import { ToolbarMeViewProps } from './ToolbarMeView.types';
 
@@ -29,7 +30,7 @@ export const ToolbarMeView: FC<ToolbarMeViewProps> = props =>
                 <div className="navigation-item" onClick={ () => handleToolbarItemClick(ToolbarViewItems.ACHIEVEMENTS_ITEM) }>
                     <i className="icon icon-me-achievements"></i>
                     { (unseenAchievementCount > 0) &&
-                        <div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenAchievementCount }</div> }
+                        <ItemCountView count={ unseenAchievementCount } /> }
                 </div>
                 <div className="navigation-item" onClick={ () => handleToolbarItemClick(ToolbarViewItems.PROFILE_ITEM) }>
                     <i className="icon icon-me-profile"></i>