diff --git a/src/components/friends/views/friends-bar/FriendsBarView.tsx b/src/components/friends/views/friends-bar/FriendsBarView.tsx
index 52055d5..62c371e 100644
--- a/src/components/friends/views/friends-bar/FriendsBarView.tsx
+++ b/src/components/friends/views/friends-bar/FriendsBarView.tsx
@@ -38,7 +38,7 @@ export const FriendBarView: FC<{ onlineFriends: MessengerFriend[]; requestsCount
             { (requestsCount > 0) &&
                 <motion.div variants={ itemVariants }>
                     <div className="flex h-[34px] items-center rounded-[7px] border border-[#9fc56f] bg-[#5f7d2f] px-[10px] text-[0.74rem] font-bold whitespace-nowrap text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.18),0_2px_0_rgba(0,0,0,0.25)]">
-                        { requestsCount } richieste
+                        { requestsCount } { LocalizeText('friendbar.requests.title') }
                     </div>
                 </motion.div> }
             <motion.div variants={itemVariants}>
diff --git a/src/components/toolbar/ToolbarView.tsx b/src/components/toolbar/ToolbarView.tsx
index 3e7b98d..38758cd 100644
--- a/src/components/toolbar/ToolbarView.tsx
+++ b/src/components/toolbar/ToolbarView.tsx
@@ -3,15 +3,28 @@ import { AnimatePresence, motion } from 'framer-motion';
 import { FC, useEffect, useState } from 'react';
 import { GetConfigurationValue, MessengerIconState, OpenMessengerChat, setYoutubeRoomEnabled, VisitDesktop } from '../../api';
 import { Flex, LayoutAvatarImageView, LayoutItemCountView } from '../../common';
-import { useAchievements, useFriends, useInventoryUnseenTracker, useMessageEvent, useMessenger, useNitroEvent, useSessionInfo } from '../../hooks';
+import { useAchievements, useFriends, useInventoryUnseenTracker, useMessageEvent, useMessenger, useNitroEvent, useSessionInfo, useWiredTools } from '../../hooks';
 import { ToolbarItemView } from './ToolbarItemView';
 import { ToolbarMeView } from './ToolbarMeView';
 import { YouTubePlayerView } from './YouTubePlayerView';
 
+const containerVariants = {
+    hidden: {},
+    visible: { transition: { staggerChildren: 0.05 } },
+    exit: { transition: { staggerChildren: 0.03, staggerDirection: -1 as const } }
+};
+
+const itemVariants = {
+    hidden: { opacity: 0, y: 10, scale: 0.8 },
+    visible: { opacity: 1, y: 0, scale: 1, transition: { type: 'spring', stiffness: 400, damping: 22 } },
+    exit: { opacity: 0, y: 6, scale: 0.85, transition: { duration: 0.1 } }
+};
+
 export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
 {
     const { isInRoom } = props;
     const [ isMeExpanded, setMeExpanded ] = useState(false);
+    const [ isToolbarOpen, setIsToolbarOpen ] = useState(false);
     const [ useGuideTool, setUseGuideTool ] = useState(false);
     const [ youtubeEnabled, setYoutubeEnabled ] = useState(false);
     const { userFigure = null } = useSessionInfo();
@@ -19,7 +32,10 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
     const { getTotalUnseen = 0 } = useAchievements();
     const { requests = [] } = useFriends();
     const { iconState = MessengerIconState.HIDDEN } = useMessenger();
+    const { openMonitor, showToolbarButton } = useWiredTools();
     const isMod = GetSessionDataManager().isModerator;
+    const hasDesktopUnifiedShell = (isInRoom && isToolbarOpen);
+    const showDesktopShell = (isToolbarOpen || !isInRoom);
 
     useMessageEvent<YouTubeRoomSettingsEvent>(YouTubeRoomSettingsEvent, event =>
     {
@@ -62,13 +78,11 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
 
             const targetBounds = target.getBoundingClientRect();
             const imageBounds = image.getBoundingClientRect();
-
             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 motionName = (`ToolbarBouncing[${ iconName }]`);
 
             if(!Motions.getMotionByTag(motionName))
@@ -87,55 +101,220 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
     return (
         <>
             { youtubeEnabled && <YouTubePlayerView /> }
-            <AnimatePresence> { isMeExpanded && ( <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.3 }}>
-					<ToolbarMeView setMeExpanded={ setMeExpanded } unseenAchievementCount={ getTotalUnseen } useGuideTool={ useGuideTool } />
-				</motion.div> )}
-			</AnimatePresence>
-            <Flex alignItems="center" className="absolute bottom-0 left-0 w-full h-[55px] bg-[rgba(28,28,32,.95)] [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] py-1 px-3" gap={ 2 }>
-                <Flex alignItems="center" gap={ 2 } className="flex-shrink-0">
-                    <Flex center pointer className={ 'relative w-[50px] h-[45px] overflow-hidden ' + (isMeExpanded ? 'active ' : '') } onClick={ event =>
-                    {
-                        setMeExpanded(!isMeExpanded);
-                        event.stopPropagation();
-                    } }>
-                        <LayoutAvatarImageView className="-ml-[5px] mt-[25px]" direction={ 2 } figure={ userFigure } position="absolute" />
-                        { (getTotalUnseen > 0) &&
-                            <LayoutItemCountView count={ getTotalUnseen } /> }
-                    </Flex>
-                    { isInRoom &&
-                        <ToolbarItemView icon="habbo" onClick={ event => VisitDesktop() } /> }
-                    { !isInRoom &&
-                        <ToolbarItemView icon="house" onClick={ event => CreateLinkEvent('navigator/goto/home') } /> }
-                    <ToolbarItemView icon="rooms" onClick={ event => CreateLinkEvent('navigator/toggle') } />
-                    { GetConfigurationValue('game.center.enabled') &&
-                        <ToolbarItemView icon="game" onClick={ event => CreateLinkEvent('games/toggle') } /> }
-                    <ToolbarItemView icon="catalog" onClick={ event => CreateLinkEvent('catalog/toggle') } />
-                    <ToolbarItemView icon="inventory" onClick={ event => CreateLinkEvent('inventory/toggle') }>
-                        { (getFullCount > 0) &&
-                            <LayoutItemCountView count={ getFullCount } /> }
-                    </ToolbarItemView>
-                    { isInRoom &&
-                        <ToolbarItemView icon="camera" onClick={ event => CreateLinkEvent('camera/toggle') } /> }
-                    { youtubeEnabled &&
-                        <ToolbarItemView icon="youtube" onClick={ openYouTubePlayer } /> }
-                    { isMod &&
-                        <ToolbarItemView icon="modtools" onClick={ event => CreateLinkEvent('mod-tools/toggle') } /> }
-                    { isMod &&
-                        <ToolbarItemView icon="furnieditor" onClick={ event => CreateLinkEvent('furni-editor/toggle') } /> }
-                </Flex>
-                <Flex alignItems="center" justifyContent="center" className="lg:flex-1 lg:min-w-0 lg:max-w-[600px] lg:mx-auto max-lg:flex-none max-lg:w-0 max-lg:max-w-0 max-lg:overflow-visible" id="toolbar-chat-input-container" />
-                <Flex alignItems="center" gap={ 2 } className="flex-shrink-0">
-                    <Flex gap={ 2 }>
-                        <ToolbarItemView icon="friendall" onClick={ event => CreateLinkEvent('friends/toggle') }>
-                            { (requests.length > 0) &&
-                                <LayoutItemCountView count={ requests.length } /> }
-                        </ToolbarItemView>
-                        { ((iconState === MessengerIconState.SHOW) || (iconState === MessengerIconState.UNREAD)) &&
-                            <ToolbarItemView className={ (iconState === MessengerIconState.UNREAD) && 'is-unseen' } icon="message" onClick={ event => OpenMessengerChat() } /> }
-                    </Flex>
-                    <div className="hidden lg:block" id="toolbar-friend-bar-container" />
-                </Flex>
-            </Flex>
+
+            { isInRoom &&
+                <div className={ `fixed bottom-0 left-0 right-0 z-40 flex h-[52px] items-end px-0 pt-[2px] pb-0 pointer-events-none md:left-1/2 md:right-auto md:h-[52px] md:w-[420px] md:-translate-x-1/2 md:items-center md:px-[6px] md:py-[4px] lg:w-[460px] ${ isToolbarOpen ? (hasDesktopUnifiedShell ? 'md:rounded-none md:border-0 md:bg-transparent md:shadow-none rounded-t-[12px] border border-b-0 border-white/8 bg-[rgba(10,10,12,0.58)] shadow-[0_-6px_18px_rgba(0,0,0,0.18)]' : 'rounded-t-[12px] border border-b-0 border-white/8 bg-[rgba(10,10,12,0.58)] shadow-[0_-6px_18px_rgba(0,0,0,0.18)]') : 'border-0 bg-transparent shadow-none md:border-0 md:bg-transparent md:shadow-none' }` }>
+                    <motion.div
+                        className="tb-toggle pointer-events-auto mr-2 mb-[4px] flex-shrink-0 md:mb-0"
+                        onClick={ () => setIsToolbarOpen(value => !value) }
+                        whileTap={ { scale: 0.9 } }>
+                        <svg
+                            className={ `h-3.5 w-3.5 text-white/70 transition-transform duration-300 ${ isToolbarOpen ? 'rotate-180 md:-rotate-90' : 'rotate-0 md:rotate-90' }` }
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={ 2.5 } d="M5 15l7-7 7 7" />
+                        </svg>
+                    </motion.div>
+                    <Flex
+                        alignItems="center"
+                        justifyContent="center"
+                        className="pointer-events-auto h-full w-full min-w-0 flex-1 px-[6px] md:px-0"
+                        id="toolbar-chat-input-container" />
+                    <div className="pointer-events-auto relative mr-[6px] shrink-0 md:hidden">
+                        <ToolbarItemView icon="friendall" onClick={ () => CreateLinkEvent('friends/toggle') } className="tb-icon" />
+                        { (requests.length > 0) &&
+                            <LayoutItemCountView count={ requests.length } className="absolute -right-1 top-0" /> }
+                    </div>
+                </div> }
+
+            <AnimatePresence>
+                { (isToolbarOpen || !isInRoom) &&
+                    <>
+                        { showDesktopShell &&
+                            <motion.div
+                                key="desktop-unified-shell"
+                                initial={ { opacity: 0, y: 8 } }
+                                animate={ { opacity: 1, y: 0 } }
+                                exit={ { opacity: 0, y: 8 } }
+                                transition={ { type: 'spring', stiffness: 260, damping: 26 } }
+                                className="pointer-events-none fixed bottom-0 left-0 right-0 z-[39] hidden h-[52px] rounded-t-[12px] border border-b-0 border-white/8 bg-[rgba(10,10,12,0.58)] shadow-[0_-6px_18px_rgba(0,0,0,0.18)] md:block" /> }
+
+                        <motion.div
+                            key="left-nav"
+                            initial={ { opacity: 0, x: isInRoom ? -10 : 0, y: isInRoom ? 0 : 8 } }
+                            animate={ { opacity: 1, x: 0, y: 0 } }
+                            exit={ { opacity: 0, x: isInRoom ? -10 : 0, y: isInRoom ? 0 : 8 } }
+                            transition={ { type: 'spring', stiffness: 300, damping: 28 } }
+                            className="fixed bottom-0 left-0 z-40 hidden h-[52px] max-w-[calc(50vw-242px)] items-center overflow-visible pl-3 pointer-events-auto md:flex">
+                            <motion.div variants={ containerVariants } initial="hidden" animate="visible" exit="exit" className={ `tb-open-shell flex h-[52px] max-w-full items-center gap-2 overflow-visible px-[8px] pt-[10px] pb-[2px] ${ showDesktopShell ? 'bg-transparent' : 'rounded-t-[10px] border border-b-0 border-white/8 bg-[rgba(10,10,12,0.58)] shadow-[0_-6px_18px_rgba(0,0,0,0.18)]' }` }>
+                                <motion.div variants={ itemVariants }>
+                                    { isInRoom
+                                        ? <ToolbarItemView icon="habbo" onClick={ () => VisitDesktop() } className="tb-icon" />
+                                        : <ToolbarItemView icon="house" onClick={ () => CreateLinkEvent('navigator/goto/home') } className="tb-icon" /> }
+                                </motion.div>
+                                <motion.div variants={ itemVariants }>
+                                    <ToolbarItemView icon="rooms" onClick={ () => CreateLinkEvent('navigator/toggle') } className="tb-icon" />
+                                </motion.div>
+                                { GetConfigurationValue('game.center.enabled') &&
+                                    <motion.div variants={ itemVariants }>
+                                        <ToolbarItemView icon="game" onClick={ () => CreateLinkEvent('games/toggle') } className="tb-icon" />
+                                    </motion.div> }
+                                <motion.div variants={ itemVariants }>
+                                    <ToolbarItemView icon="catalog" onClick={ () => CreateLinkEvent('catalog/toggle/normal') } className="tb-icon" />
+                                </motion.div>
+                                <motion.div variants={ itemVariants }>
+                                    <ToolbarItemView icon="buildersclub" onClick={ () => CreateLinkEvent('catalog/toggle/builder') } className="tb-icon" />
+                                </motion.div>
+                                <motion.div variants={ itemVariants } className="relative">
+                                    <ToolbarItemView icon="inventory" onClick={ () => CreateLinkEvent('inventory/toggle') } className="tb-icon" />
+                                    { (getFullCount > 0) &&
+                                        <LayoutItemCountView count={ getFullCount } className="absolute -right-1 top-0" /> }
+                                </motion.div>
+                                <motion.div variants={ itemVariants } className="relative">
+                                    <AnimatePresence>
+                                        { isMeExpanded &&
+                                            <motion.div
+                                                initial={ { opacity: 0, y: 6, scale: 0.97 } }
+                                                animate={ { opacity: 1, y: 0, scale: 1 } }
+                                                exit={ { opacity: 0, y: 6, scale: 0.97 } }
+                                                transition={ { type: 'spring', stiffness: 420, damping: 28 } }
+                                                className="pointer-events-auto absolute bottom-[calc(100%+8px)] left-1/2 z-50 -translate-x-1/2">
+                                                <ToolbarMeView setMeExpanded={ setMeExpanded } unseenAchievementCount={ getTotalUnseen } useGuideTool={ useGuideTool } />
+                                            </motion.div> }
+                                    </AnimatePresence>
+                                    <motion.div whileHover={ { scale: 1.15 } } whileTap={ { scale: 1 } } className="cursor-pointer" onClick={ event => { setMeExpanded(value => !value); event.stopPropagation(); } }>
+                                        <LayoutAvatarImageView headOnly={ true } direction={ 2 } figure={ userFigure } className="tb-icon !h-[63px] !w-[32px] !bg-center !bg-no-repeat" style={ { marginTop: '2px' } } />
+                                    </motion.div>
+                                    { (getTotalUnseen > 0) &&
+                                        <LayoutItemCountView count={ getTotalUnseen } className="pointer-events-none absolute -right-1 -top-1 z-10" /> }
+                                </motion.div>
+                                { (isInRoom && showToolbarButton) &&
+                                    <motion.div variants={ itemVariants }>
+                                        <ToolbarItemView icon="wired-tools" onClick={ openMonitor } className="tb-icon" />
+                                    </motion.div> }
+                                { isInRoom &&
+                                    <motion.div variants={ itemVariants }>
+                                        <ToolbarItemView icon="camera" onClick={ () => CreateLinkEvent('camera/toggle') } className="tb-icon" />
+                                    </motion.div> }
+                                { youtubeEnabled &&
+                                    <motion.div variants={ itemVariants }>
+                                        <ToolbarItemView icon="youtube" onClick={ openYouTubePlayer } className="tb-icon" />
+                                    </motion.div> }
+                                { isMod &&
+                                    <motion.div variants={ itemVariants }>
+                                        <ToolbarItemView icon="modtools" onClick={ () => CreateLinkEvent('mod-tools/toggle') } className="tb-icon" />
+                                    </motion.div> }
+                                { isMod &&
+                                    <motion.div variants={ itemVariants }>
+                                        <ToolbarItemView icon="furnieditor" onClick={ () => CreateLinkEvent('furni-editor/toggle') } className="tb-icon" />
+                                    </motion.div> }
+                            </motion.div>
+                        </motion.div>
+
+                        <motion.div
+                            key="right-nav"
+                            initial={ { opacity: 0, x: 10 } }
+                            animate={ { opacity: 1, x: 0 } }
+                            exit={ { opacity: 0, x: 10 } }
+                            transition={ { type: 'spring', stiffness: 300, damping: 28 } }
+                            className={ `fixed bottom-0 z-40 hidden h-[52px] max-w-[calc(50vw-242px)] items-center overflow-visible pr-3 pointer-events-auto md:flex ${ isInRoom ? 'right-0' : 'right-3' }` }>
+                                <motion.div variants={ containerVariants } initial="hidden" animate="visible" exit="exit" className="tb-open-shell flex h-[52px] max-w-full items-center gap-3 overflow-visible bg-transparent px-[8px] pt-[10px] pb-[2px]">
+                                    <motion.div variants={ itemVariants } className="relative">
+                                        <ToolbarItemView icon="friendall" onClick={ () => CreateLinkEvent('friends/toggle') } className="tb-icon" />
+                                        { (requests.length > 0) &&
+                                            <LayoutItemCountView count={ requests.length } className="absolute -right-2 -top-1" /> }
+                                    </motion.div>
+                                    { ((iconState === MessengerIconState.SHOW) || (iconState === MessengerIconState.UNREAD)) &&
+                                        <motion.div variants={ itemVariants }>
+                                            <ToolbarItemView className={ `tb-icon ${ iconState === MessengerIconState.UNREAD ? 'is-unseen animate-pulse' : '' }` } icon="message" onClick={ () => OpenMessengerChat() } />
+                                        </motion.div> }
+                                    <div className="mx-1 hidden h-5 w-[1px] bg-white/20 md:block" />
+                                    <div className="hidden h-full shrink-0 md:block" id="toolbar-friend-bar-container-desktop" />
+                                </motion.div>
+                            </motion.div>
+
+                        <motion.div
+                            key="mobile-nav"
+                            initial={ { opacity: 0, y: 8 } }
+                            animate={ { opacity: 1, y: 0 } }
+                            exit={ { opacity: 0, y: 8 } }
+                            transition={ { type: 'spring', stiffness: 300, damping: 28 } }
+                            className={ `fixed left-1/2 z-40 flex w-[95vw] -translate-x-1/2 items-center overflow-visible pointer-events-auto md:hidden ${ isInRoom ? 'bottom-[52px] rounded-t-[12px] border border-b-0 border-white/8 bg-[rgba(10,10,12,0.58)] px-[6px] py-[4px] shadow-[0_-6px_18px_rgba(0,0,0,0.18)]' : 'bottom-0' }` }>
+                            <motion.div variants={ containerVariants } initial="hidden" animate="visible" exit="exit" className="tb-bar-scroll flex h-full min-w-0 flex-1 items-center gap-2 overflow-x-auto overflow-y-visible px-1">
+                                <motion.div variants={ itemVariants }>
+                                    { isInRoom
+                                        ? <ToolbarItemView icon="habbo" onClick={ () => VisitDesktop() } className="tb-icon" />
+                                        : <ToolbarItemView icon="house" onClick={ () => CreateLinkEvent('navigator/goto/home') } className="tb-icon" /> }
+                                </motion.div>
+                                <motion.div variants={ itemVariants }>
+                                    <ToolbarItemView icon="rooms" onClick={ () => CreateLinkEvent('navigator/toggle') } className="tb-icon" />
+                                </motion.div>
+                                { GetConfigurationValue('game.center.enabled') &&
+                                    <motion.div variants={ itemVariants }>
+                                        <ToolbarItemView icon="game" onClick={ () => CreateLinkEvent('games/toggle') } className="tb-icon" />
+                                    </motion.div> }
+                                <motion.div variants={ itemVariants }>
+                                    <ToolbarItemView icon="catalog" onClick={ () => CreateLinkEvent('catalog/toggle/normal') } className="tb-icon" />
+                                </motion.div>
+                                <motion.div variants={ itemVariants }>
+                                    <ToolbarItemView icon="buildersclub" onClick={ () => CreateLinkEvent('catalog/toggle/builder') } className="tb-icon" />
+                                </motion.div>
+                                <motion.div variants={ itemVariants } className="relative">
+                                    <ToolbarItemView icon="inventory" onClick={ () => CreateLinkEvent('inventory/toggle') } className="tb-icon" />
+                                    { (getFullCount > 0) &&
+                                        <LayoutItemCountView count={ getFullCount } className="absolute -right-1 top-0" /> }
+                                </motion.div>
+                            </motion.div>
+                            <motion.div variants={ itemVariants } className="relative mx-[2px] shrink-0">
+                                <AnimatePresence>
+                                    { isMeExpanded &&
+                                        <motion.div
+                                            initial={ { opacity: 0, y: 6, scale: 0.97 } }
+                                            animate={ { opacity: 1, y: 0, scale: 1 } }
+                                            exit={ { opacity: 0, y: 6, scale: 0.97 } }
+                                            transition={ { type: 'spring', stiffness: 420, damping: 28 } }
+                                            className="pointer-events-auto absolute bottom-[calc(100%+10px)] left-1/2 z-[70] -translate-x-1/2">
+                                            <ToolbarMeView setMeExpanded={ setMeExpanded } unseenAchievementCount={ getTotalUnseen } useGuideTool={ useGuideTool } />
+                                        </motion.div> }
+                                    </AnimatePresence>
+                                    <motion.div whileHover={ { scale: 1.08 } } whileTap={ { scale: 0.95 } } className="cursor-pointer" onClick={ event => { setMeExpanded(value => !value); event.stopPropagation(); } }>
+                                        <LayoutAvatarImageView headOnly={ true } direction={ 2 } figure={ userFigure } className="tb-icon !h-[44px] !w-[32px] !bg-center !bg-no-repeat" style={ { marginTop: '4px' } } />
+                                    </motion.div>
+                                    { (getTotalUnseen > 0) &&
+                                        <LayoutItemCountView count={ getTotalUnseen } className="pointer-events-none absolute -right-1 -top-1 z-10" /> }
+                                </motion.div>
+                            <motion.div variants={ containerVariants } initial="hidden" animate="visible" exit="exit" className="tb-bar-scroll flex h-full items-center gap-2 overflow-x-auto overflow-y-visible px-1">
+                                { (isInRoom && showToolbarButton) &&
+                                    <motion.div variants={ itemVariants }>
+                                        <ToolbarItemView icon="wired-tools" onClick={ openMonitor } className="tb-icon" />
+                                    </motion.div> }
+                                { isInRoom &&
+                                    <motion.div variants={ itemVariants }>
+                                        <ToolbarItemView icon="camera" onClick={ () => CreateLinkEvent('camera/toggle') } className="tb-icon" />
+                                    </motion.div> }
+                                { youtubeEnabled &&
+                                    <motion.div variants={ itemVariants }>
+                                        <ToolbarItemView icon="youtube" onClick={ openYouTubePlayer } className="tb-icon" />
+                                    </motion.div> }
+                                { isMod &&
+                                    <motion.div variants={ itemVariants }>
+                                        <ToolbarItemView icon="modtools" onClick={ () => CreateLinkEvent('mod-tools/toggle') } className="tb-icon" />
+                                    </motion.div> }
+                                { isMod &&
+                                    <motion.div variants={ itemVariants }>
+                                        <ToolbarItemView icon="furnieditor" onClick={ () => CreateLinkEvent('furni-editor/toggle') } className="tb-icon" />
+                                    </motion.div> }
+                                { !isInRoom &&
+                                    <motion.div variants={ itemVariants } className="relative">
+                                        <ToolbarItemView icon="friendall" onClick={ () => CreateLinkEvent('friends/toggle') } className="tb-icon" />
+                                        { (requests.length > 0) &&
+                                            <LayoutItemCountView count={ requests.length } className="absolute -right-2 -top-1" /> }
+                                    </motion.div> }
+                            </motion.div>
+                        </motion.div>
+                    </> }
+            </AnimatePresence>
         </>
     );
 };
diff --git a/src/css/toolbar/ToolBar.css b/src/css/toolbar/ToolBar.css
new file mode 100644
index 0000000..0e9f766
--- /dev/null
+++ b/src/css/toolbar/ToolBar.css
@@ -0,0 +1,56 @@
+.tb-icon {
+    opacity: 1;
+    cursor: pointer;
+    transition: transform 0.15s ease;
+
+    &:hover {
+        transform: translateY(-2px);
+    }
+
+    &:active {
+        transform: translateY(0);
+    }
+}
+
+.tb-toggle {
+    display: flex;
+    width: 32px;
+    height: 32px;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border-radius: 9px;
+    background: rgba(18, 16, 14, 0.80);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
+    transition: background 0.15s, border-color 0.15s;
+
+    &:hover {
+        background: rgba(30, 26, 20, 0.88);
+        border-color: rgba(255, 255, 255, 0.13);
+    }
+}
+
+.tb-bar-scroll {
+    overflow-x: auto;
+    overflow-y: visible;
+    flex-wrap: nowrap;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
+
+.tb-open-shell {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
diff --git a/src/index.tsx b/src/index.tsx
index 5ce3538..066ba96 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -32,6 +32,8 @@ import './css/room/RoomWidgets.css';
 
 import './css/slider.css';
 
+import './css/toolbar/ToolBar.css';
+
 import './css/widgets/FurnitureWidgets.css';
 
 createRoot(document.getElementById('root')).render(<App />);