diff --git a/app/lib/components/Room.jsx b/app/lib/components/Room.jsx
index 653b377..47a5a44 100644
--- a/app/lib/components/Room.jsx
+++ b/app/lib/components/Room.jsx
@@ -13,7 +13,7 @@ import Me from './Me';
 import Peers from './Peers';
 import AudioPeers from './PeerAudio/AudioPeers';
 import Notifications from './Notifications';
-import ToolAreaButton from './ToolArea/ToolAreaButton';
+// import ToolAreaButton from './ToolArea/ToolAreaButton';
 import ToolArea from './ToolArea/ToolArea';
 import FullScreenView from './FullScreenView';
 import VideoWindow from './VideoWindow/VideoWindow';
@@ -97,8 +97,6 @@ class Room extends React.Component
 
 							<Notifications />
 
-							<ToolAreaButton />
-
 							{room.advancedMode ?
 								<div className='state' data-tip='Server status'>
 									<div className={classnames('icon', room.state)} />
diff --git a/app/lib/components/ToolArea/ToolArea.jsx b/app/lib/components/ToolArea/ToolArea.jsx
index 925bd31..5165796 100644
--- a/app/lib/components/ToolArea/ToolArea.jsx
+++ b/app/lib/components/ToolArea/ToolArea.jsx
@@ -24,7 +24,7 @@ class ToolArea extends React.Component
 			unreadMessages,
 			unreadFiles,
 			toggleToolArea,
-			closeToolArea
+			unread
 		} = this.props;
 
 		const VisibleTab = {
@@ -50,11 +50,21 @@ class ToolArea extends React.Component
 					})}
 				>
 					<div
-						className={classNames('toolarea-close-button button', {
-							on : toolAreaOpen
-						})}
-						onClick={closeToolArea}
-					/>
+						className='toolarea-button'
+						onClick={toggleToolArea}
+					>
+						<span className='content'>
+							<div
+								className='toolarea-icon'
+							/>
+							<p>Toolbox</p>
+						</span>
+						{!toolAreaOpen && unread > 0 && (
+							<span className={classNames('badge', { long: unread >= 10 })}>
+								{unread}
+							</span>
+						)}
+					</div>
 					<div className='tab-headers'>
 						<TabHeader
 							id='chat'
@@ -97,14 +107,17 @@ ToolArea.propTypes =
 	unreadFiles    : PropTypes.number.isRequired,
 	toolAreaOpen   : PropTypes.bool,
 	toggleToolArea : PropTypes.func.isRequired,
-	closeToolArea  : PropTypes.func.isRequired
+	closeToolArea  : PropTypes.func.isRequired,
+	unread         : PropTypes.number.isRequired
 };
 
 const mapStateToProps = (state) => ({
 	currentToolTab : state.toolarea.currentToolTab,
 	unreadMessages : state.toolarea.unreadMessages,
 	unreadFiles    : state.toolarea.unreadFiles,
-	toolAreaOpen   : state.toolarea.toolAreaOpen
+	toolAreaOpen   : state.toolarea.toolAreaOpen,
+	unread         : state.toolarea.unreadMessages +
+		state.toolarea.unreadFiles
 });
 
 const mapDispatchToProps = {
diff --git a/app/stylus/components/ToolArea.styl b/app/stylus/components/ToolArea.styl
index d47852b..9283d42 100644
--- a/app/stylus/components/ToolArea.styl
+++ b/app/stylus/components/ToolArea.styl
@@ -63,6 +63,93 @@
 		}
 	}
 
+	> .toolarea-button {
+		text-align: center;
+		writing-mode: vertical-rl;
+		text-orientation: mixed;
+		list-style: none;
+		height: 115px;
+		width: 35px;
+		left: -35px;
+		top: 50%;
+		transform: translate(0, -50%);
+		position: absolute;
+		cursor: pointer;
+
+		> .badge {
+			border-radius: 50%;
+			writing-mode: horizontal-tb;
+			font-size: 1rem;
+			background: #b12525;
+			color: #fff;
+			text-align: center;
+			margin-top: -10px;
+			line-height: 1rem;
+			margin-left: -0px;
+			position: absolute;
+			padding: 0.2rem 0.4rem;
+			top: 0;
+			left: 0;
+
+			&.long {
+				border-radius: 25% / 50%;
+				margin-top: -13px;
+				margin-left: -4px;
+			}
+		}
+
+		> .content {
+			border: 1px solid #AAA;
+			width: 100%;
+			height: 100%;
+			display: flex;
+			border-bottom-left-radius: 6px;
+			border-top-left-radius: 6px;
+			background: #FFF;
+			color: #333;
+			z-index: 2;
+			border-right-color: #FFF;
+
+			&:before, &:after {
+				border: 1px solid #AAA;
+				position: absolute;
+				width: 6px;
+				height: 6px;
+				content: "";
+			}
+
+			&:before {
+				top: -6px;
+				right: 0;
+				border-bottom-right-radius: 6px;
+				border-width: 0px 1px 1px 0px;
+				box-shadow: 0px 3px 0 #FFF;
+			}
+
+			&:after {
+				bottom: -6px;
+				right: 0;
+				border-top-right-radius: 6px;
+				border-width: 1px 1px 0px 0px;
+				box-shadow: 0px -3px 0 #FFF;
+			}
+
+			> .toolarea-icon {
+				background-position: center;
+				background-size: 75%;
+				background-repeat: no-repeat;
+				border-radius: 100%;
+				height: 32px;
+				width: 32px;
+
+				background-image: url('/resources/images/icon_tool_area_black.svg');
+			}
+
+			> p {
+				padding: 9px;
+			}
+		}
+	}
 }
 
 @media (min-width: 600px) {