diff --git a/osu-framework b/osu-framework
index fcf36739bc..e1ac6316aa 160000
--- a/osu-framework
+++ b/osu-framework
@@ -1 +1 @@
-Subproject commit fcf36739bc8a97b43a08ce0b29bd7c67ce1a3547
+Subproject commit e1ac6316aa3862efb8e79e585a7b4c901a4e1b3c
diff --git a/osu.Game/Graphics/OsuColour.cs b/osu.Game/Graphics/OsuColour.cs
index b666442f19..3d83668d07 100644
--- a/osu.Game/Graphics/OsuColour.cs
+++ b/osu.Game/Graphics/OsuColour.cs
@@ -85,5 +85,7 @@ namespace osu.Game.Graphics
         public readonly Color4 Red = FromHex(@"ed1121");
         public readonly Color4 RedDark = FromHex(@"ba0011");
         public readonly Color4 RedDarker = FromHex(@"870000");
+
+        public readonly Color4 ChatBlue = FromHex(@"17292e");
     }
 }
diff --git a/osu.Game/OsuGame.cs b/osu.Game/OsuGame.cs
index ccead95ede..a84333df8c 100644
--- a/osu.Game/OsuGame.cs
+++ b/osu.Game/OsuGame.cs
@@ -160,7 +160,7 @@ namespace osu.Game
             });
 
             //overlay elements
-            LoadComponentAsync(chat = new ChatOverlay { Depth = 0 }, overlayContent.Add);
+            LoadComponentAsync(chat = new ChatOverlay { Depth = -1 }, mainContent.Add);
             LoadComponentAsync(options = new OptionsOverlay { Depth = -1 }, overlayContent.Add);
             LoadComponentAsync(musicController = new MusicController
             {
@@ -320,8 +320,7 @@ namespace osu.Game
         {
             base.UpdateAfterChildren();
 
-            if (intro?.ChildScreen != null)
-                intro.ChildScreen.Padding = new MarginPadding { Top = Toolbar.Position.Y + Toolbar.DrawHeight };
+            mainContent.Padding = new MarginPadding { Top = Toolbar.Position.Y + Toolbar.DrawHeight };
 
             Cursor.State = currentScreen?.HasLocalCursorDisplayed == false ? Visibility.Visible : Visibility.Hidden;
         }
diff --git a/osu.Game/Online/Chat/Drawables/ChatLine.cs b/osu.Game/Overlays/Chat/ChatLine.cs
similarity index 87%
rename from osu.Game/Online/Chat/Drawables/ChatLine.cs
rename to osu.Game/Overlays/Chat/ChatLine.cs
index 6bfa25755f..d4063efbb5 100644
--- a/osu.Game/Online/Chat/Drawables/ChatLine.cs
+++ b/osu.Game/Overlays/Chat/ChatLine.cs
@@ -6,10 +6,11 @@ using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Primitives;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Sprites;
+using osu.Game.Online.Chat;
 using OpenTK;
 using OpenTK.Graphics;
 
-namespace osu.Game.Online.Chat.Drawables
+namespace osu.Game.Overlays.Chat
 {
     public class ChatLine : Container
     {
@@ -62,7 +63,10 @@ namespace osu.Game.Online.Chat.Drawables
             return username_colours[message.UserId % username_colours.Length];
         }
 
-        private const float padding = 200;
+        public const float LEFT_PADDING = message_padding + padding * 2;
+
+        private const float padding = 15;
+        private const float message_padding = 200;
         private const float text_size = 20;
 
         public ChatLine(Message message)
@@ -72,13 +76,13 @@ namespace osu.Game.Online.Chat.Drawables
             RelativeSizeAxes = Axes.X;
             AutoSizeAxes = Axes.Y;
 
-            Padding = new MarginPadding { Left = 15, Right = 15 };
+            Padding = new MarginPadding { Left = padding, Right = padding };
 
             Children = new Drawable[]
             {
                 new Container
                 {
-                    Size = new Vector2(padding, text_size),
+                    Size = new Vector2(message_padding, text_size),
                     Children = new Drawable[]
                     {
                         new OsuSpriteText
@@ -106,7 +110,7 @@ namespace osu.Game.Online.Chat.Drawables
                 {
                     RelativeSizeAxes = Axes.X,
                     AutoSizeAxes = Axes.Y,
-                    Padding = new MarginPadding { Left = padding + 15 },
+                    Padding = new MarginPadding { Left = message_padding + padding },
                     Children = new Drawable[]
                     {
                         new OsuSpriteText
diff --git a/osu.Game/Overlays/Chat/ChatTabControl.cs b/osu.Game/Overlays/Chat/ChatTabControl.cs
new file mode 100644
index 0000000000..c7e1382255
--- /dev/null
+++ b/osu.Game/Overlays/Chat/ChatTabControl.cs
@@ -0,0 +1,182 @@
+// Copyright (c) 2007-2017 ppy Pty Ltd <contact@ppy.sh>.
+// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
+
+using osu.Framework.Allocation;
+using osu.Framework.Extensions.Color4Extensions;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Primitives;
+using osu.Framework.Graphics.Sprites;
+using osu.Framework.Graphics.UserInterface;
+using osu.Framework.Input;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Sprites;
+using osu.Game.Graphics.UserInterface;
+using osu.Game.Online.Chat;
+using OpenTK;
+using OpenTK.Graphics;
+
+namespace osu.Game.Overlays.Chat
+{
+    public class ChatTabControl : OsuTabControl<Channel>
+    {
+        protected override TabItem<Channel> CreateTabItem(Channel value) => new ChannelTabItem(value);
+
+        private const float shear_width = 10;
+
+        public ChatTabControl()
+        {
+            TabContainer.Margin = new MarginPadding { Left = 50 };
+            TabContainer.Spacing = new Vector2(-shear_width, 0);
+            TabContainer.Masking = false;
+
+            AddInternal(new TextAwesome
+            {
+                Icon = FontAwesome.fa_comments,
+                Anchor = Anchor.CentreLeft,
+                Origin = Anchor.CentreLeft,
+                TextSize = 20,
+                Padding = new MarginPadding(10),
+            });
+        }
+
+        private class ChannelTabItem : TabItem<Channel>
+        {
+            private Color4 backgroundInactive;
+            private Color4 backgroundHover;
+            private Color4 backgroundActive;
+
+            private readonly SpriteText text;
+            private readonly Box box;
+            private readonly Box highlightBox;
+
+            public override bool Active
+            {
+                get { return base.Active; }
+                set
+                {
+                    if (Active == value) return;
+
+                    base.Active = value;
+                    updateState();
+                }
+            }
+
+            private void updateState()
+            {
+                if (Active)
+                    fadeActive();
+                else
+                    fadeInactive();
+            }
+
+            private const float transition_length = 400;
+
+            private void fadeActive()
+            {
+                ResizeTo(new Vector2(Width, 1.1f), transition_length, EasingTypes.OutQuint);
+
+                box.FadeColour(backgroundActive, transition_length, EasingTypes.OutQuint);
+                highlightBox.FadeIn(transition_length, EasingTypes.OutQuint);
+                text.Font = @"Exo2.0-Bold";
+            }
+
+            private void fadeInactive()
+            {
+                ResizeTo(new Vector2(Width, 1), transition_length, EasingTypes.OutQuint);
+
+                box.FadeColour(backgroundInactive, transition_length, EasingTypes.OutQuint);
+                highlightBox.FadeOut(transition_length, EasingTypes.OutQuint);
+                text.Font = @"Exo2.0-Regular";
+            }
+
+            protected override bool OnHover(InputState state)
+            {
+                if (!Active)
+                    box.FadeColour(backgroundHover, transition_length, EasingTypes.OutQuint);
+                return true;
+            }
+
+            protected override void OnHoverLost(InputState state)
+            {
+                updateState();
+            }
+
+            [BackgroundDependencyLoader]
+            private void load(OsuColour colours)
+            {
+                backgroundActive = colours.ChatBlue;
+                backgroundInactive = colours.Gray4;
+                backgroundHover = colours.Gray7;
+
+                highlightBox.Colour = colours.Yellow;
+
+                updateState();
+            }
+
+            public ChannelTabItem(Channel value) : base(value)
+            {
+                Width = 150;
+
+                RelativeSizeAxes = Axes.Y;
+
+                Anchor = Anchor.BottomLeft;
+                Origin = Anchor.BottomLeft;
+
+                Shear = new Vector2(shear_width / ChatOverlay.TAB_AREA_HEIGHT, 0);
+
+                Masking = true;
+                EdgeEffect = new EdgeEffect
+                {
+                    Type = EdgeEffectType.Shadow,
+                    Radius = 10,
+                    Colour = Color4.Black.Opacity(0.2f),
+                };
+
+                Children = new Drawable[]
+                {
+                    box = new Box
+                    {
+                        EdgeSmoothness = new Vector2(1, 0),
+                        RelativeSizeAxes = Axes.Both,
+                    },
+                    highlightBox = new Box
+                    {
+                        Width = 5,
+                        Alpha = 0,
+                        Anchor = Anchor.BottomRight,
+                        Origin = Anchor.BottomRight,
+                        EdgeSmoothness = new Vector2(1, 0),
+                        RelativeSizeAxes = Axes.Y,
+                    },
+                    new Container
+                    {
+                        Shear = new Vector2(-shear_width / ChatOverlay.TAB_AREA_HEIGHT, 0),
+                        RelativeSizeAxes = Axes.Both,
+                        Children = new Drawable[]
+                        {
+                            new TextAwesome
+                            {
+                                Icon = FontAwesome.fa_hashtag,
+                                Anchor = Anchor.CentreLeft,
+                                Origin = Anchor.CentreLeft,
+                                Colour = Color4.Black,
+                                X = -10,
+                                Alpha = 0.2f,
+                                TextSize = ChatOverlay.TAB_AREA_HEIGHT,
+                            },
+                            text = new OsuSpriteText
+                            {
+                                Margin = new MarginPadding(5),
+                                Origin = Anchor.CentreLeft,
+                                Anchor = Anchor.CentreLeft,
+                                Text = value.ToString(),
+                                TextSize = 18,
+                            },
+                        }
+                    }
+                };
+            }
+        }
+    }
+}
diff --git a/osu.Game/Online/Chat/Drawables/DrawableChannel.cs b/osu.Game/Overlays/Chat/DrawableChannel.cs
similarity index 94%
rename from osu.Game/Online/Chat/Drawables/DrawableChannel.cs
rename to osu.Game/Overlays/Chat/DrawableChannel.cs
index d179f851b2..39dc1914ab 100644
--- a/osu.Game/Online/Chat/Drawables/DrawableChannel.cs
+++ b/osu.Game/Overlays/Chat/DrawableChannel.cs
@@ -7,8 +7,9 @@ using System.Linq;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Primitives;
+using osu.Game.Online.Chat;
 
-namespace osu.Game.Online.Chat.Drawables
+namespace osu.Game.Overlays.Chat
 {
     public class DrawableChannel : Container
     {
diff --git a/osu.Game/Overlays/ChatOverlay.cs b/osu.Game/Overlays/ChatOverlay.cs
index 3630ad0518..15f8586125 100644
--- a/osu.Game/Overlays/ChatOverlay.cs
+++ b/osu.Game/Overlays/ChatOverlay.cs
@@ -16,19 +16,20 @@ using osu.Game.Graphics.Sprites;
 using osu.Game.Online.API;
 using osu.Game.Online.API.Requests;
 using osu.Game.Online.Chat;
-using osu.Game.Online.Chat.Drawables;
 using osu.Game.Graphics.UserInterface;
 using osu.Framework.Graphics.Primitives;
 using osu.Framework.Graphics.UserInterface;
 using OpenTK.Graphics;
 using osu.Framework.Input;
 using osu.Game.Configuration;
+using osu.Game.Graphics;
+using osu.Game.Overlays.Chat;
 
 namespace osu.Game.Overlays
 {
     public class ChatOverlay : FocusedOverlayContainer, IOnlineComponent
     {
-        private const float textbox_height = 40;
+        private const float textbox_height = 60;
 
         private ScheduledDelegate messageRequest;
 
@@ -42,9 +43,14 @@ namespace osu.Game.Overlays
 
         public const float DEFAULT_HEIGHT = 0.4f;
 
+        public const float TAB_AREA_HEIGHT = 50;
+
         private GetMessagesRequest fetchReq;
 
-        private readonly OsuTabControl<Channel> channelTabs;
+        private readonly ChatTabControl channelTabs;
+
+        private readonly Box chatBackground;
+        private readonly Box tabBackground;
 
         private Bindable<double> chatHeight;
 
@@ -56,45 +62,76 @@ namespace osu.Game.Overlays
             Anchor = Anchor.BottomLeft;
             Origin = Anchor.BottomLeft;
 
+            const float padding = 5;
+
             Children = new Drawable[]
             {
-                channelTabs = new OsuTabControl<Channel>
+                new Container
                 {
-                    RelativeSizeAxes = Axes.X,
-                    Height = 20,
-                },
-                new Box
-                {
-                    Depth = float.MaxValue,
+                    Name = @"chat area",
                     RelativeSizeAxes = Axes.Both,
-                    Colour = Color4.Black,
-                    Alpha = 0.9f,
-                },
-                currentChannelContainer = new Container
-                {
-                    RelativeSizeAxes = Axes.Both,
-                    Padding = new MarginPadding { Top = 25, Bottom = textbox_height + 5 },
+                    Padding = new MarginPadding { Top = TAB_AREA_HEIGHT },
+                    Children = new Drawable[]
+                    {
+                        chatBackground = new Box
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                        },
+                        currentChannelContainer = new Container
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                            Padding = new MarginPadding
+                            {
+                                Top = padding,
+                                Bottom = textbox_height + padding
+                            },
+                        },
+                        new Container
+                        {
+                            Anchor = Anchor.BottomLeft,
+                            Origin = Anchor.BottomLeft,
+                            RelativeSizeAxes = Axes.X,
+                            Height = textbox_height,
+                            Padding = new MarginPadding
+                            {
+                                Top = padding * 2,
+                                Bottom = padding * 2,
+                                Left = ChatLine.LEFT_PADDING + padding * 2,
+                                Right = padding * 2,
+                            },
+                            Children = new Drawable[]
+                            {
+                                inputTextBox = new FocusedTextBox
+                                {
+                                    RelativeSizeAxes = Axes.Both,
+                                    Height = 1,
+                                    PlaceholderText = "type your message",
+                                    Exit = () => State = Visibility.Hidden,
+                                    OnCommit = postMessage,
+                                    HoldFocus = true,
+                                }
+                            }
+                        }
+                    }
                 },
                 new Container
                 {
-                    Anchor = Anchor.BottomLeft,
-                    Origin = Anchor.BottomLeft,
+                    Name = @"tabs area",
                     RelativeSizeAxes = Axes.X,
-                    Height = textbox_height,
-                    Padding = new MarginPadding(5),
+                    Height = TAB_AREA_HEIGHT,
                     Children = new Drawable[]
                     {
-                        inputTextBox = new FocusedTextBox
+                        tabBackground = new Box
                         {
                             RelativeSizeAxes = Axes.Both,
-                            Height = 1,
-                            PlaceholderText = "type your message",
-                            Exit = () => State = Visibility.Hidden,
-                            OnCommit = postMessage,
-                            HoldFocus = true,
-                        }
+                            Colour = Color4.Black,
+                        },
+                        channelTabs = new ChatTabControl
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                        },
                     }
-                }
+                },
             };
 
             channelTabs.Current.ValueChanged += newChannel => CurrentChannel = newChannel;
@@ -153,14 +190,20 @@ namespace osu.Game.Overlays
         }
 
         [BackgroundDependencyLoader]
-        private void load(APIAccess api, OsuConfigManager config)
+        private void load(APIAccess api, OsuConfigManager config, OsuColour colours)
         {
             this.api = api;
             api.Register(this);
 
             chatHeight = config.GetBindable<double>(OsuConfig.ChatDisplayHeight);
-            chatHeight.ValueChanged += h => Height = (float)h;
+            chatHeight.ValueChanged += h =>
+            {
+                Height = (float)h;
+                tabBackground.FadeTo(Height == 1 ? 1 : 0.8f, 200);
+            };
             chatHeight.TriggerChange();
+
+            chatBackground.Colour = colours.ChatBlue;
         }
 
         private long? lastMessageId;
diff --git a/osu.Game/Screens/OsuScreen.cs b/osu.Game/Screens/OsuScreen.cs
index 0b3ecb4f5a..16bdd6132f 100644
--- a/osu.Game/Screens/OsuScreen.cs
+++ b/osu.Game/Screens/OsuScreen.cs
@@ -7,6 +7,7 @@ using osu.Framework.Screens;
 using osu.Game.Beatmaps;
 using osu.Game.Database;
 using osu.Game.Graphics.Containers;
+using OpenTK;
 
 namespace osu.Game.Screens
 {
@@ -96,6 +97,9 @@ namespace osu.Game.Screens
             }
             else if (bg != null)
             {
+                // this makes up for the fact our padding changes when the global toolbar is visible.
+                bg.Scale = new Vector2(1.06f);
+
                 AddInternal(new ParallaxContainer
                 {
                     Depth = float.MaxValue,
diff --git a/osu.Game/osu.Game.csproj b/osu.Game/osu.Game.csproj
index be031ee95b..ebe92d0cad 100644
--- a/osu.Game/osu.Game.csproj
+++ b/osu.Game/osu.Game.csproj
@@ -75,6 +75,7 @@
     <Compile Include="Beatmaps\Drawables\BeatmapBackgroundSprite.cs" />
     <Compile Include="Beatmaps\DifficultyCalculator.cs" />
     <Compile Include="Online\API\Requests\PostMessageRequest.cs" />
+    <Compile Include="Overlays\Chat\ChatTabControl.cs" />
     <Compile Include="Overlays\Music\FilterControl.cs" />
     <Compile Include="Overlays\Music\PlaylistItem.cs" />
     <Compile Include="Overlays\Music\PlaylistList.cs" />
@@ -305,8 +306,8 @@
     <Compile Include="Online\API\Requests\GetMessagesRequest.cs" />
     <Compile Include="Online\API\Requests\ListChannelsRequest.cs" />
     <Compile Include="Online\Chat\Channel.cs" />
-    <Compile Include="Online\Chat\Drawables\DrawableChannel.cs" />
-    <Compile Include="Online\Chat\Drawables\ChatLine.cs" />
+    <Compile Include="Overlays\Chat\DrawableChannel.cs" />
+    <Compile Include="Overlays\Chat\ChatLine.cs" />
     <Compile Include="Online\Chat\Message.cs" />
     <Compile Include="OsuGame.cs" />
     <Compile Include="OsuGameBase.cs" />