diff --git a/src/api/avatar/AvatarEditorThumbnailsHelper.ts b/src/api/avatar/AvatarEditorThumbnailsHelper.ts
index 88a7906..2c21ebd 100644
--- a/src/api/avatar/AvatarEditorThumbnailsHelper.ts
+++ b/src/api/avatar/AvatarEditorThumbnailsHelper.ts
@@ -84,7 +84,6 @@ export class AvatarEditorThumbnailsHelper
 
                 if(!hasAsset)
                 {
-                    console.log(`${ AvatarFigurePartType.SCALE }_${ AvatarFigurePartType.STD }_${ part.type }_${ part.id }`);
                     continue;
                 }
 
diff --git a/src/components/friends/views/friends-bar/FriendBarItemView.tsx b/src/components/friends/views/friends-bar/FriendBarItemView.tsx
index 7e4a5a4..d646344 100644
--- a/src/components/friends/views/friends-bar/FriendBarItemView.tsx
+++ b/src/components/friends/views/friends-bar/FriendBarItemView.tsx
@@ -1,6 +1,6 @@
-import { MouseEventType } from '@nitrots/nitro-renderer';
+import { FindNewFriendsMessageComposer, MouseEventType } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useRef, useState } from 'react';
-import { GetUserProfile, LocalizeText, MessengerFriend, OpenMessengerChat } from '../../../../api';
+import { GetUserProfile, LocalizeText, MessengerFriend, OpenMessengerChat, SendMessageComposer } from '../../../../api';
 import { Button, LayoutAvatarImageView, LayoutBadgeImageView } from '../../../../common';
 import { useFriends } from '../../../../hooks';
 
@@ -33,27 +33,34 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props =>
     if(!friend)
     {
         return (
-            <Button className="border w-[130px] mx-[3px] my-0 z-0 relative pl-[37px] text-left friend-bar-search" justifyContent="start" size="md">
-                <div className="absolute -top-[3px] left-[5px] w-[31px] h-[34px] bg-[url('@/assets/images/toolbar/friend-search.png')]" />
-                <div className="truncate">{ LocalizeText('friend.bar.find.title') }</div>
-            </Button>
+            <div ref={ elementRef } className={ 'friend-bar-item btn btn-secondary w-[130px] mx-[3px] my-0 z-0 relative pl-[37px] text-left friend-bar-search ' + (isVisible ? 'friend-bar-search-item-active' : '') } onClick={ () => setVisible(prev => !prev) }>
+                <div className="friend-bar-item-head absolute -top-[3px] left-[5px] w-[31px] h-[34px] bg-[url('@/assets/images/toolbar/friend-search.png')]" />
+                <div className="truncate text-white text-[13px]">{ LocalizeText('friend.bar.find.title') }</div>
+                { isVisible &&
+                    <div className="search-content mt-3">
+                        <div className="bg-white text-black px-1 py-1 text-xs">{ LocalizeText('friend.bar.find.text') }</div>
+                        <Button className="mt-2 mb-4" variant="secondary" onClick={ () => SendMessageComposer(new FindNewFriendsMessageComposer()) }>{ LocalizeText('friend.bar.find.button') }</Button>
+                    </div> }
+            </div>
         );
     }
 
     return (
-        <Button className={ ' block w-[130px] mx-[3px] my-0 z-0 relative pl-[37px] text-left' + (isVisible ? 'mb-[21px]' : '') } justifyContent="start" size="md" variant={ 'success' } onClick={ event => setVisible(prevValue => !prevValue) }>
-            <div className={ `friend-bar-item-head absolute ${ friend.id > 0 ? '-top-[30px] -left-[30px]' : '-top-[5px] -left-[3.5px]' }` }>
-                { (friend.id > 0) && <LayoutAvatarImageView direction={ 2 } figure={ friend.figure } headOnly={ true } /> }
-                { (friend.id <= 0) && <LayoutBadgeImageView badgeCode={ friend.figure } isGroup={ true } /> }
+        <div ref={ elementRef } className={ `friend-bar-item btn btn-success ${ isVisible ? 'w-[165px]' : 'w-[130px]' } mx-[3px] my-0 z-0 relative text-left${ isVisible ? ' mb-[84px]' : '' }` } style={{ paddingLeft: friend.id > 0 ? '70px' : '46px', paddingRight: isVisible ? '4px' : undefined }} onClick={ () => setVisible(prev => !prev) }>
+            <div className={ `friend-bar-item-head absolute ${ friend.id > 0 ? '-top-[31px] -left-[25px]' : '-top-[5px] -left-[3.5px]' }` }>
+                { (friend.id > 0) &&
+                    <LayoutAvatarImageView direction={ isVisible ? 2 : 3 } figure={ friend.figure } headOnly={ !isVisible } /> }
+                { (friend.id <= 0) &&
+                    <LayoutBadgeImageView badgeCode="ADM" isGroup={ false } /> }
             </div>
-            <div className="truncate">{ friend.name }</div>
+            <div className="truncate text-white text-[13px]">{ friend.name }</div>
             { isVisible &&
-                <div className="flex justify-between">
-                    <div className="cursor-pointer nitro-friends-spritesheet icon-friendbar-chat" onClick={ event => OpenMessengerChat(friend.id) } />
+                <div className="flex justify-between gap-2 mt-1">
+                    <div className="cursor-pointer nitro-friends-spritesheet icon-friendbar-chat" onClick={ event => { event.stopPropagation(); OpenMessengerChat(friend.id); } } />
                     { friend.followingAllowed &&
-                        <div className="cursor-pointer nitro-friends-spritesheet icon-friendbar-visit" onClick={ event => followFriend(friend) } /> }
-                    <div className="cursor-pointer nitro-friends-spritesheet icon-profile" onClick={ event => GetUserProfile(friend.id) } />
+                        <div className="cursor-pointer nitro-friends-spritesheet icon-friendbar-visit" onClick={ event => { event.stopPropagation(); followFriend(friend); } } /> }
+                    <div className="cursor-pointer nitro-friends-spritesheet icon-profile" onClick={ event => { event.stopPropagation(); GetUserProfile(friend.id); } } />
                 </div> }
-        </Button>
+        </div>
     );
 };
diff --git a/src/components/friends/views/messenger/FriendsMessengerView.tsx b/src/components/friends/views/messenger/FriendsMessengerView.tsx
index 354ddd5..bbb5222 100644
--- a/src/components/friends/views/messenger/FriendsMessengerView.tsx
+++ b/src/components/friends/views/messenger/FriendsMessengerView.tsx
@@ -2,7 +2,7 @@ import { AddLinkEventTracker, FollowFriendMessageComposer, GetSessionDataManager
 import { FC, KeyboardEvent, useEffect, useRef, useState } from 'react';
 import { FaTimes } from 'react-icons/fa';
 import { GetUserProfile, LocalizeText, ReportType, SendMessageComposer } from '../../../../api';
-import { Button, Column, Flex, Grid, LayoutAvatarImageView, LayoutBadgeImageView, LayoutGridItem, LayoutItemCountView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
+import { Button, Column, Flex, Grid, LayoutAvatarImageView, LayoutGridItem, LayoutItemCountView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
 import { useHelp, useMessenger } from '../../../../hooks';
 import { NitroInput } from '../../../../layout';
 import { FriendsMessengerThreadView } from './messenger-thread/FriendsMessengerThreadView';
@@ -107,33 +107,32 @@ export const FriendsMessengerView: FC<{}> = props =>
     if(!isVisible) return null;
 
     return (
-        <NitroCardView className="nitro-friends-messenger" theme="primary-slim" uniqueKey="nitro-friends-messenger">
+        <NitroCardView className="nitro-friends-messenger w-[800px] h-[720px]" theme="primary-slim" uniqueKey="nitro-friends-messenger">
             <NitroCardHeaderView headerText={ LocalizeText('messenger.window.title', [ 'OPEN_CHAT_COUNT' ], [ visibleThreads.length.toString() ]) } onCloseClick={ event => setIsVisible(false) } />
             <NitroCardContentView>
                 <Grid overflow="hidden">
                     <Column overflow="hidden" size={ 4 }>
                         <Text bold>{ LocalizeText('toolbar.icon.label.messenger') }</Text>
                         <Column fit overflow="auto">
-                            <div className="flex flex-col">
+                            <Column>
                                 { visibleThreads && (visibleThreads.length > 0) && visibleThreads.map(thread =>
                                 {
                                     return (
-                                        <LayoutGridItem key={ thread.threadId } itemActive={ (activeThread === thread) } onClick={ event => setActiveThreadId(thread.threadId) }>
-                                            { thread.unread &&
-                                                <LayoutItemCountView count={ thread.unreadCount } /> }
-                                            <div className="flex w-full items-center gap-1">
-                                                <div className="flex items-center friend-head px-1">
-                                                    { (thread.participant.id > 0) &&
-                                                        <LayoutAvatarImageView direction={ 3 } figure={ thread.participant.figure } headOnly={ true } /> }
-                                                    { (thread.participant.id <= 0) &&
-                                                        <LayoutBadgeImageView badgeCode={ thread.participant.figure } isGroup={ true } /> }
-                                                </div>
-                                                <Text grow truncate>{ thread.participant.name }</Text>
-                                            </div>
+                                        <LayoutGridItem key={ thread.threadId } itemActive={ (activeThread === thread) } onClick={ event => setActiveThreadId(thread.threadId) } className="py-1 px-2">
+                                            { thread.unread && <LayoutItemCountView className="text-black" count={ thread.unreadCount } /> }
+                                            <Flex fullWidth gap={ 1 } style={{ minHeight: '50px' }}>
+                                                <LayoutAvatarImageView
+                                                    figure={ thread.participant.id > 0 ? thread.participant.figure : thread.participant.figure === 'ADM' ? 'ha-3409-1413-70.lg-285-89.ch-3032-1334-109.sh-3016-110.hd-185-1359.ca-3225-110-62.wa-3264-62-62.fa-1206-90.hr-3322-1403' : thread.participant.figure }
+                                                    headOnly={ true }
+                                                    direction={ thread.participant.id > 0 ? 2 : 3 }
+                                                    style={{ width: '50px', height: '80px', backgroundPosition: 'center 45%', flexShrink: 0, alignSelf: 'flex-end' }}
+                                                />
+                                                <Text truncate grow className="self-center">{ thread.participant.name }</Text>
+                                            </Flex>
                                         </LayoutGridItem>
                                     );
                                 }) }
-                            </div>
+                            </Column>
                         </Column>
                     </Column>
                     <Column overflow="hidden" size={ 8 }>
@@ -141,19 +140,20 @@ export const FriendsMessengerView: FC<{}> = props =>
                             <>
                                 <Text bold center>{ LocalizeText('messenger.window.separator', [ 'FRIEND_NAME' ], [ activeThread.participant.name ]) }</Text>
                                 <Flex alignItems="center" gap={ 1 } justifyContent="between">
-                                    <div className="flex gap-1">
-                                        <div className="relative inline-flex align-middle">
-                                            <Button onClick={ followFriend }>
-                                                <div className="nitro-friends-spritesheet icon-follow" />
+                                    { (activeThread.participant.id > 0) &&
+                                        <div className="flex gap-1">
+                                            <div className="relative inline-flex align-middle">
+                                                <Button onClick={ followFriend }>
+                                                    <div className="nitro-friends-spritesheet icon-follow" />
+                                                </Button>
+                                                <Button onClick={ openProfile }>
+                                                    <div className="nitro-friends-spritesheet icon-profile-sm" />
+                                                </Button>
+                                            </div>
+                                            <Button variant="danger" onClick={ () => report(ReportType.IM, { reportedUserId: activeThread.participant.id }) }>
+                                                { LocalizeText('messenger.window.button.report') }
                                             </Button>
-                                            <Button onClick={ openProfile }>
-                                                <div className="nitro-friends-spritesheet icon-profile-sm" />
-                                            </Button>
-                                        </div>
-                                        <Button variant="danger" onClick={ () => report(ReportType.IM, { reportedUserId: activeThread.participant.id }) }>
-                                            { LocalizeText('messenger.window.button.report') }
-                                        </Button>
-                                    </div>
+                                        </div> }
                                     <Button onClick={ event => closeThread(activeThread.threadId) }>
                                         <FaTimes className="fa-icon" />
                                     </Button>
diff --git a/src/components/friends/views/messenger/messenger-thread/FriendsMessengerThreadGroup.tsx b/src/components/friends/views/messenger/messenger-thread/FriendsMessengerThreadGroup.tsx
index 6827fb1..b9ace6c 100644
--- a/src/components/friends/views/messenger/messenger-thread/FriendsMessengerThreadGroup.tsx
+++ b/src/components/friends/views/messenger/messenger-thread/FriendsMessengerThreadGroup.tsx
@@ -58,7 +58,8 @@ export const FriendsMessengerThreadGroup: FC<{ thread: MessengerThread, group: M
                     <LayoutAvatarImageView direction={ 2 } figure={ groupChatData.figure } /> }
             </Base>
             <Base className={ 'bg-light text-black border-radius mb-2 rounded py-1 px-2 messages-group-' + (isOwnChat ? 'right' : 'left') }>
-                <Base className="font-bold	">
+                <Base className="font-bold">
+                    <Base className="small text-muted">{ group.chats[0].date.toLocaleTimeString() }</Base>
                     { isOwnChat && GetSessionDataManager().userName }
                     { !isOwnChat && (groupChatData ? groupChatData.username : thread.participant.name) }
                 </Base>
diff --git a/src/css/friends/FriendsView.css b/src/css/friends/FriendsView.css
new file mode 100644
index 0000000..aad4844
--- /dev/null
+++ b/src/css/friends/FriendsView.css
@@ -0,0 +1,198 @@
+/* ── Friends spritesheet icons ── */
+.nitro-friends-spritesheet {
+    background: url('@/assets/images/friends/friends-spritesheet.png') transparent no-repeat;
+
+    &.icon-friendbar-visit {
+        width: 21px;
+        height: 21px;
+        background-position: -38px -5px;
+    }
+
+    &.icon-heart {
+        width: 16px;
+        height: 14px;
+        background-position: -5px -67px;
+    }
+
+    &.icon-new-message {
+        width: 14px;
+        height: 14px;
+        background-position: -96px -53px;
+    }
+
+    &.icon-none {
+        width: 16px;
+        height: 14px;
+        background-position: -31px -67px;
+    }
+
+    &.icon-profile {
+        width: 21px;
+        height: 21px;
+        background-position: -5px -36px;
+    }
+
+    &.icon-profile-sm {
+        width: 13px;
+        height: 11px;
+        background-position: -51px -91px;
+
+        &:hover {
+            width: 13px;
+            height: 11px;
+            background-position: -74px -91px;
+        }
+    }
+
+    &.icon-smile {
+        width: 16px;
+        height: 14px;
+        background-position: -57px -67px;
+    }
+
+    &.icon-warning {
+        width: 23px;
+        height: 21px;
+        background-position: -5px -5px;
+    }
+
+    &.icon-accept {
+        width: 13px;
+        height: 14px;
+        background-position: -5px -91px;
+    }
+
+    &.icon-add {
+        width: 16px;
+        height: 15px;
+        background-position: -69px -31px;
+    }
+
+    &.icon-bobba {
+        width: 16px;
+        height: 14px;
+        background-position: -96px -5px;
+    }
+
+    &.icon-chat {
+        width: 17px;
+        height: 16px;
+        background-position: -69px -5px;
+    }
+
+    &.icon-deny {
+        width: 13px;
+        height: 14px;
+        background-position: -28px -91px;
+    }
+
+    &.icon-follow {
+        width: 16px;
+        height: 14px;
+        background-position: -96px -29px;
+    }
+
+    &.icon-friendbar-chat {
+        width: 20px;
+        height: 21px;
+        background-position: -36px -36px;
+    }
+}
+
+.messenger-notification-icon {
+    background: url('@/assets/images/friends/messenger_notification_icon.png') transparent no-repeat;
+    width: 25px;
+    height: 25px;
+}
+
+.nitro-friends {
+    width: 250px;
+    height: 300px;
+
+    & .search-input {
+        border: 0;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+    }
+}
+
+.nitro-friends-room-invite {
+    width: 250px;
+}
+
+.nitro-friends-remove-confirmation {
+    width: 250px;
+}
+
+.friend-bar {
+    & .friend-bar-item {
+        pointer-events: all;
+
+        &.friend-bar-search-item-active {
+            background-color: #b69b83;
+            border: 2px solid #e2c1a3;
+
+            & .search-content {
+                font-size: 12px;
+            }
+        }
+
+        & .friend-bar-item-head {
+            pointer-events: none;
+        }
+    }
+}
+
+.nitro-friends-messenger {
+    & .layout-grid-item {
+        min-height: 50px;
+    }
+
+    & .chat-messages {
+        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 #DFDFDF;
+                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 #DFDFDF;
+                border-top: 8px solid transparent;
+                border-bottom: 8px solid transparent;
+                top: 10px;
+                right: -8px;
+            }
+        }
+    }
+}
diff --git a/src/hooks/friends/useFriends.ts b/src/hooks/friends/useFriends.ts
index aa4d49f..319fead 100644
--- a/src/hooks/friends/useFriends.ts
+++ b/src/hooks/friends/useFriends.ts
@@ -193,7 +193,7 @@ const useFriendsState = () =>
             {
                 const index = newValue.findIndex(existing => (existing.requesterUserId === request.requesterUserId));
 
-                if(index > 0)
+                if(index !== -1)
                 {
                     newValue[index] = CloneObject(newValue[index]);
                     newValue[index].populate(request);