From d8aa1d88eaa644883adda463fa4b972b5bcad5b1 Mon Sep 17 00:00:00 2001
From: SpoinkyNL <spoinky.nl@gmail.com>
Date: Mon, 1 Feb 2016 13:04:18 +0100
Subject: [PATCH] Redesigned all setting windows

---
 Artemis/Artemis/App.config                    |  11 +-
 .../AudioVisualization.Designer.cs            |  28 ++-
 .../AudioVisualization.settings               |  15 +-
 .../AudioVisualizer/AudioVisualizerModel.cs   |   9 +-
 .../AudioVisualizerSettings.cs                |  20 +-
 .../AudioVisualizer/AudioVisualizerView.xaml  | 161 +++++++------
 .../Modules/Effects/Debug/DebugEffectModel.cs |   2 +
 .../Effects/Debug/DebugEffectSettings.cs      |  10 +-
 .../Effects/Debug/DebugEffectView.xaml        | 148 ++++++------
 .../Effects/TypeWave/TypeWaveView.xaml        | 185 ++++++++-------
 .../CounterStrike/CounterStrikeView.xaml      | 214 +++++++++---------
 .../Modules/Games/Dota2/Dota2View.xaml        |   2 +-
 .../Games/RocketLeague/RocketLeagueView.xaml  |  82 ++++---
 .../Modules/Games/Witcher3/Witcher3View.xaml  |  20 +-
 .../VolumeDisplay/VolumeDisplayView.xaml      |  72 +++---
 Artemis/Artemis/Views/ShellView.xaml          |   3 +-
 16 files changed, 531 insertions(+), 451 deletions(-)

diff --git a/Artemis/Artemis/App.config b/Artemis/Artemis/App.config
index 054e00c87..3ae824369 100644
--- a/Artemis/Artemis/App.config
+++ b/Artemis/Artemis/App.config
@@ -59,11 +59,14 @@
       <setting name="FadeSpeed" serializeAs="String">
         <value>3</value>
       </setting>
-      <setting name="MainColor" serializeAs="String">
-        <value>#FF0000FF</value>
+      <setting name="TopColor" serializeAs="String">
+        <value>#FFF90000</value>
       </setting>
-      <setting name="SecondaryColor" serializeAs="String">
-        <value>#FF1E90FF</value>
+      <setting name="MiddleColor" serializeAs="String">
+        <value>#FFFF761E</value>
+      </setting>
+      <setting name="BottomColor" serializeAs="String">
+        <value>#FF00DF00</value>
       </setting>
     </Artemis.Modules.Effects.AudioVisualizer.AudioVisualization>
     <Artemis.Modules.Games.CounterStrike.CounterStrike>
diff --git a/Artemis/Artemis/Modules/Effects/AudioVisualizer/AudioVisualization.Designer.cs b/Artemis/Artemis/Modules/Effects/AudioVisualizer/AudioVisualization.Designer.cs
index 99a9b8ff1..259d054f2 100644
--- a/Artemis/Artemis/Modules/Effects/AudioVisualizer/AudioVisualization.Designer.cs
+++ b/Artemis/Artemis/Modules/Effects/AudioVisualizer/AudioVisualization.Designer.cs
@@ -73,25 +73,37 @@ namespace Artemis.Modules.Effects.AudioVisualizer {
         
         [global::System.Configuration.UserScopedSettingAttribute()]
         [global::System.Diagnostics.DebuggerNonUserCodeAttribute()]
-        [global::System.Configuration.DefaultSettingValueAttribute("#FF0000FF")]
-        public global::System.Windows.Media.Color MainColor {
+        [global::System.Configuration.DefaultSettingValueAttribute("#FFF90000")]
+        public global::System.Windows.Media.Color TopColor {
             get {
-                return ((global::System.Windows.Media.Color)(this["MainColor"]));
+                return ((global::System.Windows.Media.Color)(this["TopColor"]));
             }
             set {
-                this["MainColor"] = value;
+                this["TopColor"] = value;
             }
         }
         
         [global::System.Configuration.UserScopedSettingAttribute()]
         [global::System.Diagnostics.DebuggerNonUserCodeAttribute()]
-        [global::System.Configuration.DefaultSettingValueAttribute("#FF1E90FF")]
-        public global::System.Windows.Media.Color SecondaryColor {
+        [global::System.Configuration.DefaultSettingValueAttribute("#FFFF761E")]
+        public global::System.Windows.Media.Color MiddleColor {
             get {
-                return ((global::System.Windows.Media.Color)(this["SecondaryColor"]));
+                return ((global::System.Windows.Media.Color)(this["MiddleColor"]));
             }
             set {
-                this["SecondaryColor"] = value;
+                this["MiddleColor"] = value;
+            }
+        }
+        
+        [global::System.Configuration.UserScopedSettingAttribute()]
+        [global::System.Diagnostics.DebuggerNonUserCodeAttribute()]
+        [global::System.Configuration.DefaultSettingValueAttribute("#FF00DF00")]
+        public global::System.Windows.Media.Color BottomColor {
+            get {
+                return ((global::System.Windows.Media.Color)(this["BottomColor"]));
+            }
+            set {
+                this["BottomColor"] = value;
             }
         }
     }
diff --git a/Artemis/Artemis/Modules/Effects/AudioVisualizer/AudioVisualization.settings b/Artemis/Artemis/Modules/Effects/AudioVisualizer/AudioVisualization.settings
index 345bfd3a7..4c8f5d200 100644
--- a/Artemis/Artemis/Modules/Effects/AudioVisualizer/AudioVisualization.settings
+++ b/Artemis/Artemis/Modules/Effects/AudioVisualizer/AudioVisualization.settings
@@ -1,7 +1,5 @@
 <?xml version='1.0' encoding='utf-8'?>
-
-<SettingsFile xmlns="http://schemas.microsoft.com/VisualStudio/2004/01/settings" CurrentProfile="(Default)"
-              GeneratedClassNamespace="Artemis.Modules.Effects.AudioVisualizer" GeneratedClassName="AudioVisualization">
+<SettingsFile xmlns="http://schemas.microsoft.com/VisualStudio/2004/01/settings" CurrentProfile="(Default)" GeneratedClassNamespace="Artemis.Modules.Effects.AudioVisualizer" GeneratedClassName="AudioVisualization">
   <Profiles />
   <Settings>
     <Setting Name="Sensitivity" Type="System.Int32" Scope="User">
@@ -16,11 +14,14 @@
     <Setting Name="FadeSpeed" Type="System.Int32" Scope="User">
       <Value Profile="(Default)">3</Value>
     </Setting>
-    <Setting Name="MainColor" Type="System.Windows.Media.Color" Scope="User">
-      <Value Profile="(Default)">#FF0000FF</Value>
+    <Setting Name="TopColor" Type="System.Windows.Media.Color" Scope="User">
+      <Value Profile="(Default)">#FFF90000</Value>
     </Setting>
-    <Setting Name="SecondaryColor" Type="System.Windows.Media.Color" Scope="User">
-      <Value Profile="(Default)">#FF1E90FF</Value>
+    <Setting Name="MiddleColor" Type="System.Windows.Media.Color" Scope="User">
+      <Value Profile="(Default)">#FFFF761E</Value>
+    </Setting>
+    <Setting Name="BottomColor" Type="System.Windows.Media.Color" Scope="User">
+      <Value Profile="(Default)">#FF00DF00</Value>
     </Setting>
   </Settings>
 </SettingsFile>
\ No newline at end of file
diff --git a/Artemis/Artemis/Modules/Effects/AudioVisualizer/AudioVisualizerModel.cs b/Artemis/Artemis/Modules/Effects/AudioVisualizer/AudioVisualizerModel.cs
index 1e1241a61..516f07555 100644
--- a/Artemis/Artemis/Modules/Effects/AudioVisualizer/AudioVisualizerModel.cs
+++ b/Artemis/Artemis/Modules/Effects/AudioVisualizer/AudioVisualizerModel.cs
@@ -4,6 +4,7 @@ using System.Drawing;
 using System.Drawing.Drawing2D;
 using System.Linq;
 using Artemis.Models;
+using Artemis.Utilities;
 using Artemis.Utilities.Audio;
 using Artemis.Utilities.Keyboard;
 using NAudio.CoreAudioApi;
@@ -64,11 +65,9 @@ namespace Artemis.Modules.Effects.AudioVisualizer
                     MainModel.ActiveKeyboard,
                     0, 0, new List<Color>
                     {
-                        //ColorHelpers.MediaColorToDrawingColor(Settings.MainColor),
-                        //ColorHelpers.MediaColorToDrawingColor(Settings.SecondaryColor)
-                        Color.Red,
-                        Color.Yellow,
-                        Color.Green,
+                        ColorHelpers.ToDrawingColor(Settings.TopColor),
+                        ColorHelpers.ToDrawingColor(Settings.MiddleColor),
+                        ColorHelpers.ToDrawingColor(Settings.BottomColor)
                     },
                     LinearGradientMode.Vertical) {ContainedBrush = false});
 
diff --git a/Artemis/Artemis/Modules/Effects/AudioVisualizer/AudioVisualizerSettings.cs b/Artemis/Artemis/Modules/Effects/AudioVisualizer/AudioVisualizerSettings.cs
index 318febb9f..b0935fc28 100644
--- a/Artemis/Artemis/Modules/Effects/AudioVisualizer/AudioVisualizerSettings.cs
+++ b/Artemis/Artemis/Modules/Effects/AudioVisualizer/AudioVisualizerSettings.cs
@@ -14,8 +14,9 @@ namespace Artemis.Modules.Effects.AudioVisualizer
         public int Bars { get; set; }
         public bool FromBottom { get; set; }
         public int FadeSpeed { get; set; }
-        public Color MainColor { get; set; }
-        public Color SecondaryColor { get; set; }
+        public Color TopColor { get; set; }
+        public Color MiddleColor { get; set; }
+        public Color BottomColor { get; set; }
 
         public override sealed void Load()
         {
@@ -23,8 +24,9 @@ namespace Artemis.Modules.Effects.AudioVisualizer
             Bars = AudioVisualization.Default.Bars;
             FromBottom = AudioVisualization.Default.FromBottom;
             FadeSpeed = AudioVisualization.Default.FadeSpeed;
-            MainColor = AudioVisualization.Default.MainColor;
-            SecondaryColor = AudioVisualization.Default.SecondaryColor;
+            TopColor = AudioVisualization.Default.TopColor;
+            MiddleColor = AudioVisualization.Default.MiddleColor;
+            BottomColor = AudioVisualization.Default.BottomColor;
         }
 
         public override sealed void Save()
@@ -33,8 +35,9 @@ namespace Artemis.Modules.Effects.AudioVisualizer
             AudioVisualization.Default.Bars = Bars;
             AudioVisualization.Default.FromBottom = FromBottom;
             AudioVisualization.Default.FadeSpeed = FadeSpeed;
-            AudioVisualization.Default.MainColor = MainColor;
-            AudioVisualization.Default.SecondaryColor = SecondaryColor;
+            AudioVisualization.Default.TopColor = TopColor;
+            AudioVisualization.Default.MiddleColor = MiddleColor;
+            AudioVisualization.Default.BottomColor = BottomColor;
 
             AudioVisualization.Default.Save();
         }
@@ -45,8 +48,9 @@ namespace Artemis.Modules.Effects.AudioVisualizer
             Bars = 21;
             FromBottom = true;
             FadeSpeed = 3;
-            MainColor = Color.FromArgb(255, 0, 0, 255);
-            SecondaryColor = Color.FromArgb(255, 30, 144, 255);
+            TopColor = Color.FromArgb(255, 249, 0, 0);
+            MiddleColor = Color.FromArgb(255, 255, 118, 30);
+            BottomColor = Color.FromArgb(255, 0, 223, 0);
         }
     }
 }
\ No newline at end of file
diff --git a/Artemis/Artemis/Modules/Effects/AudioVisualizer/AudioVisualizerView.xaml b/Artemis/Artemis/Modules/Effects/AudioVisualizer/AudioVisualizerView.xaml
index 72d86fab9..0b2cc56fb 100644
--- a/Artemis/Artemis/Modules/Effects/AudioVisualizer/AudioVisualizerView.xaml
+++ b/Artemis/Artemis/Modules/Effects/AudioVisualizer/AudioVisualizerView.xaml
@@ -3,99 +3,116 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
              xmlns:cal="http://www.caliburnproject.org"
              xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"
-             xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
              mc:Ignorable="d"
-             d:DesignHeight="407.812" d:DesignWidth="671.484"
-             cal:Bind.AtDesignTime="True">
+             d:DesignHeight="476.986" d:DesignWidth="538.772">
     <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
         <Grid Margin="15, 5, 15, 5">
             <Grid.ColumnDefinitions>
-                <ColumnDefinition Width="320" />
-                <ColumnDefinition Width="*" />
+                <ColumnDefinition Width="Auto" />
+                <ColumnDefinition />
             </Grid.ColumnDefinitions>
             <Grid.RowDefinitions>
                 <RowDefinition Height="Auto" />
-                <RowDefinition />
-                <RowDefinition />
-                <RowDefinition />
-                <RowDefinition />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="*" />
+
             </Grid.RowDefinitions>
-            <StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">
-                <Label FontSize="20"
-                       Style="{DynamicResource DescriptionHeaderStyle}" HorizontalAlignment="Left">
+            <StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Margin="0,0,1,0">
+                <Label FontSize="20" Style="{DynamicResource DescriptionHeaderStyle}" HorizontalAlignment="Left">
                     <Label.Content>
-                        <AccessText TextWrapping="Wrap" Text="Visualizes the default audio device on the keyboard." />
+                        <AccessText TextWrapping="Wrap"
+                                    Text="Visualizes the default audio device on the keyboard." />
                     </Label.Content>
                 </Label>
                 <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                     <Label Content="Enable effect" Margin="0 3 0 0" HorizontalAlignment="Right" />
                     <ToggleButton x:Name="EffectEnabled" Margin="0 3 0 0" Width="25" Height="25"
-                                  IsChecked="{Binding Path=EffectEnabled, Mode=OneWay}"
                                   Style="{DynamicResource MetroCircleToggleButtonStyle}"
                                   cal:Message.Attach="[Event Click] = [Action ToggleEffect]" />
                 </StackPanel>
             </StackPanel>
-            <StackPanel Grid.Row="1"
-                        Grid.Column="0"
-                        HorizontalAlignment="Left" Width="130">
-                <Label FontSize="16" Content="Main color" Style="{DynamicResource DescriptionHeaderStyle}"
-                       FontFamily="Segoe UI Semibold" Foreground="#535353" Width="130" />
-                <xctk:ColorPicker x:Name="MainColor"
-                                  SelectedColor="{Binding Path=AudioVisualizerSettings.MainColor, Mode=TwoWay}" />
-            </StackPanel>
-            <StackPanel Grid.Row="1"
-                        Grid.Column="1"
-                        HorizontalAlignment="Left" Width="130">
-                <Label FontSize="16" Content="Secondary color" Style="{DynamicResource DescriptionHeaderStyle}"
-                       FontFamily="Segoe UI Semibold" Foreground="#535353" Width="130" />
-                <xctk:ColorPicker x:Name="SecondaryColor"
-                                  SelectedColor="{Binding Path=AudioVisualizerSettings.SecondaryColor, Mode=TwoWay}" />
-            </StackPanel>
-            <!-- Sensitivity slider -->
-            <StackPanel Grid.Row="2"
-                        Grid.Column="0"
-                        HorizontalAlignment="Left" Width="132">
-                <Label FontSize="16" Content="Sensitivity" Style="{DynamicResource DescriptionHeaderStyle}"
-                       Foreground="#535353" FontFamily="Segoe UI Semibold" />
-                <Slider x:Name="Sensitivity"
-                        VerticalAlignment="top"
-                        HorizontalAlignment="Left"
-                        Width="132"
-                        TickPlacement="BottomRight"
-                        TickFrequency="1"
-                        Value="{Binding Path=AudioVisualizerSettings.Sensitivity, Mode=TwoWay}" Minimum="1"
-                        Maximum="10"
-                        SmallChange="1"
-                        IsSnapToTickEnabled="True" />
-            </StackPanel>
-            <StackPanel Grid.Row="3"
-                        Grid.Column="0"
-                        HorizontalAlignment="Left" Width="130">
-                <controls:ToggleSwitch IsChecked="{Binding Path=AudioVisualizerSettings.FromBottom, Mode=TwoWay}"
-                                       Header="Origin"
-                                       OnLabel="Bottom" OffLabel="Top"
-                                       Margin="5,3,0,0" Width="125" />
-            </StackPanel>
-            <!-- Fadeout slider -->
-            <StackPanel Grid.Row="3"
-                        Grid.Column="1"
-                        HorizontalAlignment="Left" Width="132">
-                <Label FontSize="16" Content="Fade speed" Style="{DynamicResource DescriptionHeaderStyle}"
-                       Foreground="#535353" FontFamily="Segoe UI Semibold" />
-                <Slider x:Name="FadeSpeed"
-                        VerticalAlignment="top"
-                        HorizontalAlignment="Left"
-                        Width="132"
-                        TickPlacement="BottomRight"
-                        TickFrequency="1"
-                        Value="{Binding Path=AudioVisualizerSettings.FadeSpeed, Mode=TwoWay}" Minimum="1" Maximum="10"
-                        SmallChange="1"
-                        IsSnapToTickEnabled="True" />
-            </StackPanel>
+
+            <!-- Top color -->
+            <TextBlock Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center"
+                       Height="16" Margin="0,8">
+                Color used on top
+            </TextBlock>
+            <xctk:ColorPicker x:Name="TopColor"
+                              SelectedColor="{Binding Path=AudioVisualizerSettings.TopColor, Mode=TwoWay}"
+                              Grid.Row="1" Grid.Column="1" Width="110" HorizontalAlignment="Right"
+                              VerticalAlignment="Center" Margin="0,5,-1,5" Height="22" />
+
+            <!-- Middle color -->
+            <TextBlock Grid.Row="2" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center"
+                       Height="16" Margin="0,8">
+                Color used in the middle
+            </TextBlock>
+            <xctk:ColorPicker x:Name="MiddleColor"
+                              SelectedColor="{Binding Path=AudioVisualizerSettings.MiddleColor, Mode=TwoWay}"
+                              Grid.Row="2" Grid.Column="1" Width="110" HorizontalAlignment="Right"
+                              VerticalAlignment="Center" Margin="0,5,-1,5" Height="22" />
+
+            <!-- Bottom color -->
+            <TextBlock Grid.Row="3" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center"
+                       Height="16" Margin="0,8">
+                Color used on the bottom
+            </TextBlock>
+            <xctk:ColorPicker x:Name="Bottom"
+                              SelectedColor="{Binding Path=AudioVisualizerSettings.BottomColor, Mode=TwoWay}"
+                              Grid.Row="3" Grid.Column="1" Width="110" HorizontalAlignment="Right"
+                              VerticalAlignment="Center" Margin="0,5,-1,5" Height="22" />
+
+            <!-- Bar direction -->
+            <TextBlock Grid.Row="4" Grid.Column="0" HorizontalAlignment="Left" Width="116" VerticalAlignment="Center"
+                       Height="16" Margin="0,9,0,10">
+                Grow bars bottom
+            </TextBlock>
+            <controls:ToggleSwitch IsChecked="{Binding Path=AudioVisualizerSettings.FromBottom, Mode=TwoWay}"
+                                   Grid.Row="4" Grid.Column="1" HorizontalAlignment="Right" OnLabel="Yes"
+                                   OffLabel="No"
+                                   Margin="0,0,-5,0" Width="114" />
+
+            <!-- Bars amount -->
+            <TextBlock Grid.Row="5" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center"
+                       Height="16" Margin="0,8">
+                Bars amount (less bars means thicker bars)
+            </TextBlock>
+            <Slider x:Name="Bars" Grid.Row="5" Grid.Column="1" VerticalAlignment="Center"
+                    HorizontalAlignment="Right" Width="110" TickPlacement="BottomRight" TickFrequency="1"
+                    Value="{Binding Path=AudioVisualizerSettings.Bars, Mode=TwoWay}" Minimum="2" Maximum="21"
+                    SmallChange="1" IsSnapToTickEnabled="True" />
+            
+            <!-- Sensitivity -->
+            <TextBlock Grid.Row="6" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center"
+                       Height="16" Margin="0,8">
+                Volume sensitivity multiplier
+            </TextBlock>
+            <Slider x:Name="Sensitivity" Grid.Row="6" Grid.Column="1" VerticalAlignment="Center"
+                    HorizontalAlignment="Right" Width="110" TickPlacement="BottomRight" TickFrequency="1"
+                    Value="{Binding Path=AudioVisualizerSettings.Sensitivity, Mode=TwoWay}" Minimum="1" Maximum="10"
+                    SmallChange="1" IsSnapToTickEnabled="True" />
+
+            <!-- Fade speed -->
+            <TextBlock Grid.Row="7" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center"
+                       Height="16" Margin="0,8">
+                Bar fade-out speed
+            </TextBlock>
+            <Slider x:Name="FadeSpeed" Grid.Row="7" Grid.Column="1" VerticalAlignment="Center"
+                    HorizontalAlignment="Right" Width="110" TickPlacement="BottomRight" TickFrequency="1"
+                    Value="{Binding Path=AudioVisualizerSettings.FadeSpeed, Mode=TwoWay}" Minimum="1" Maximum="3"
+                    SmallChange="1" IsSnapToTickEnabled="True" />
+
             <!-- Buttons -->
-            <StackPanel Grid.Column="0" Grid.Row="4" Orientation="Horizontal" VerticalAlignment="Bottom">
+            <StackPanel Grid.Column="0" Grid.Row="8" Orientation="Horizontal" VerticalAlignment="Bottom">
                 <Button x:Name="ResetSettings" Content="Reset effect" VerticalAlignment="Top" Width="100"
                         Style="{DynamicResource SquareButtonStyle}" />
                 <Button x:Name="SaveSettings" Content="Save changes" VerticalAlignment="Top" Width="100"
diff --git a/Artemis/Artemis/Modules/Effects/Debug/DebugEffectModel.cs b/Artemis/Artemis/Modules/Effects/Debug/DebugEffectModel.cs
index 6808295c9..2ed1a0325 100644
--- a/Artemis/Artemis/Modules/Effects/Debug/DebugEffectModel.cs
+++ b/Artemis/Artemis/Modules/Effects/Debug/DebugEffectModel.cs
@@ -45,6 +45,8 @@ namespace Artemis.Modules.Effects.Debug
             KeyboardRectangle.Width = Settings.Width;
             KeyboardRectangle.GradientMode = Settings.Type;
             KeyboardRectangle.Rotate = Settings.Rotate;
+            KeyboardRectangle.Scale = Settings.Scale;
+            Scale = Settings.Scale;
         }
 
         public override Bitmap GenerateBitmap()
diff --git a/Artemis/Artemis/Modules/Effects/Debug/DebugEffectSettings.cs b/Artemis/Artemis/Modules/Effects/Debug/DebugEffectSettings.cs
index 668c2ad76..a891a5115 100644
--- a/Artemis/Artemis/Modules/Effects/Debug/DebugEffectSettings.cs
+++ b/Artemis/Artemis/Modules/Effects/Debug/DebugEffectSettings.cs
@@ -12,8 +12,8 @@ namespace Artemis.Modules.Effects.Debug
 
         public int Width { get; set; }
         public int Height { get; set; }
-        public int Spread { get; set; }
         public bool Rotate { get; set; }
+        public int Scale { get; set; }
         public LinearGradientMode Type { get; set; }
 
         public override sealed void Load()
@@ -27,11 +27,11 @@ namespace Artemis.Modules.Effects.Debug
 
         public override sealed void ToDefault()
         {
-            Width = 6;
-            Height = 100;
-            Spread = 0;
+            Width = 84;
+            Height = 24;
+            Scale = 4;
             Type = LinearGradientMode.Horizontal;
-            Rotate = false;
+            Rotate = true;
         }
     }
 }
\ No newline at end of file
diff --git a/Artemis/Artemis/Modules/Effects/Debug/DebugEffectView.xaml b/Artemis/Artemis/Modules/Effects/Debug/DebugEffectView.xaml
index bb625d63f..1f4083f27 100644
--- a/Artemis/Artemis/Modules/Effects/Debug/DebugEffectView.xaml
+++ b/Artemis/Artemis/Modules/Effects/Debug/DebugEffectView.xaml
@@ -5,99 +5,92 @@
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:cal="http://www.caliburnproject.org"
              xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"
+             xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
              mc:Ignorable="d"
-             d:DesignHeight="407.812" d:DesignWidth="671.484"
-             cal:Bind.AtDesignTime="True">
+             d:DesignHeight="476.986" d:DesignWidth="538.772">
     <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
         <Grid Margin="15, 5, 15, 5">
             <Grid.ColumnDefinitions>
-                <ColumnDefinition Width="320" />
-                <ColumnDefinition Width="*" />
+                <ColumnDefinition Width="Auto" />
+                <ColumnDefinition />
             </Grid.ColumnDefinitions>
             <Grid.RowDefinitions>
                 <RowDefinition Height="Auto" />
-                <RowDefinition />
-                <RowDefinition />
-                <RowDefinition />
-                <RowDefinition />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="*" />
+
             </Grid.RowDefinitions>
-            <StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">
-                <Label FontSize="20"
-                       Style="{DynamicResource DescriptionHeaderStyle}" HorizontalAlignment="Left">
+            <StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Margin="0,0,1,0">
+                <Label FontSize="20" MaxWidth="500" Style="{DynamicResource DescriptionHeaderStyle}"
+                       HorizontalAlignment="Left">
                     <Label.Content>
-                        <AccessText TextWrapping="Wrap" Text="A debug effect." />
+                        <AccessText TextWrapping="Wrap"
+                                    Text="A few debugging options, also lets you see what is being sent to the keyboard" />
                     </Label.Content>
                 </Label>
                 <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                     <Label Content="Enable effect" Margin="0 3 0 0" HorizontalAlignment="Right" />
                     <ToggleButton x:Name="EffectEnabled" Margin="0 3 0 0" Width="25" Height="25"
-                                  IsChecked="{Binding Path=EffectEnabled, Mode=OneWay}"
                                   Style="{DynamicResource MetroCircleToggleButtonStyle}"
                                   cal:Message.Attach="[Event Click] = [Action ToggleEffect]" />
                 </StackPanel>
             </StackPanel>
-            <StackPanel Grid.Row="1"
-                        Grid.Column="0"
-                        HorizontalAlignment="Left">
-                <Label FontSize="16" Content="Direction" Style="{DynamicResource DescriptionHeaderStyle}"
-                       Foreground="#535353" FontFamily="Segoe UI Semibold" />
-                <ComboBox x:Name="RectangleTypes" Width="120" />
 
-            </StackPanel>
-            <StackPanel Grid.Row="2"
-                        Grid.Column="0"
-                        HorizontalAlignment="Left">
-                <Label FontSize="16" Content="Width" Style="{DynamicResource DescriptionHeaderStyle}"
-                       Foreground="#535353" FontFamily="Segoe UI Semibold" />
-                <Slider x:Name="Width"
-                        VerticalAlignment="top"
-                        HorizontalAlignment="Left"
-                        Width="132"
-                        TickPlacement="BottomRight"
-                        TickFrequency="1"
-                        Value="{Binding Path=DebugEffectSettings.Width, Mode=TwoWay}" Minimum="1" Maximum="84"
-                        SmallChange="1"
-                        IsSnapToTickEnabled="True" />
-            </StackPanel>
-            <StackPanel Grid.Row="2"
-                        Grid.Column="1"
-                        HorizontalAlignment="Left">
-                <Label FontSize="16" Content="Height" Style="{DynamicResource DescriptionHeaderStyle}"
-                       Foreground="#535353" FontFamily="Segoe UI Semibold" />
-                <Slider x:Name="Height"
-                        VerticalAlignment="top"
-                        HorizontalAlignment="Left"
-                        Width="200"
-                        TickPlacement="BottomRight"
-                        TickFrequency="1"
-                        Value="{Binding Path=DebugEffectSettings.Height, Mode=TwoWay}" Minimum="0" Maximum="24"
-                        SmallChange="1"
-                        IsSnapToTickEnabled="True" />
-            </StackPanel>
-            <StackPanel Grid.Row="3"
-                        Grid.Column="1"
-                        HorizontalAlignment="Left">
-                <controls:ToggleSwitch IsChecked="{Binding Path=DebugEffectSettings.Rotate, Mode=TwoWay}"
-                                       Header="Rotate" OnLabel="Yes" OffLabel="No"
-                                       Margin="0 3 0 0" Width="125" />
-            </StackPanel>
-            <StackPanel Grid.Row="3"
-                        Grid.Column="0"
-                        HorizontalAlignment="Left">
-                <Label FontSize="16" Content="Spread" Style="{DynamicResource DescriptionHeaderStyle}"
-                       Foreground="#535353" FontFamily="Segoe UI Semibold" />
-                <Slider x:Name="Spread"
-                        VerticalAlignment="top"
-                        HorizontalAlignment="Left"
-                        Width="132"
-                        TickPlacement="BottomRight"
-                        TickFrequency="1"
-                        Value="{Binding Path=DebugEffectSettings.Spread, Mode=TwoWay}" Minimum="0" Maximum="5"
-                        SmallChange="1"
-                        IsSnapToTickEnabled="True" />
-            </StackPanel>
+            <!-- Direction -->
+            <TextBlock Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center"
+                       Height="16" Margin="0,8">
+                Color gradient direction
+            </TextBlock>
+            <ComboBox Grid.Row="1" Grid.Column="1" Width="110" HorizontalAlignment="Right" VerticalAlignment="Center"
+                      x:Name="RectangleTypes" />
+
+            <!-- Width -->
+            <TextBlock Grid.Row="2" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center"
+                       Height="16" Margin="0,8">
+                Debug-rectangle width
+            </TextBlock>
+            <Slider x:Name="Width" Grid.Row="2" Grid.Column="1" VerticalAlignment="Center"
+                    HorizontalAlignment="Right" Width="110" TickPlacement="None" TickFrequency="1"
+                    Value="{Binding Path=DebugEffectSettings.Width, Mode=TwoWay}" Minimum="0" Maximum="84"
+                    SmallChange="1" IsSnapToTickEnabled="True" />
+
+            <!-- Height -->
+            <TextBlock Grid.Row="3" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center"
+                       Height="16" Margin="0,8">
+                Debug-rectangle height
+            </TextBlock>
+            <Slider x:Name="Height" Grid.Row="3" Grid.Column="1" VerticalAlignment="Center"
+                    HorizontalAlignment="Right" Width="110" TickPlacement="None" TickFrequency="1"
+                    Value="{Binding Path=DebugEffectSettings.Height, Mode=TwoWay}" Minimum="0" Maximum="24"
+                    SmallChange="1" IsSnapToTickEnabled="True" />
+
+            <!-- Scale -->
+            <TextBlock Grid.Row="4" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center"
+                       Height="16" Margin="0,8">
+                Debug-rectangle scale (higher means more fluent)
+            </TextBlock>
+            <Slider x:Name="Scale" Grid.Row="4" Grid.Column="1" VerticalAlignment="Center"
+                    HorizontalAlignment="Right" Width="110" TickPlacement="BottomRight" TickFrequency="1"
+                    Value="{Binding Path=DebugEffectSettings.Scale, Mode=TwoWay}" Minimum="1" Maximum="4"
+                    SmallChange="1" IsSnapToTickEnabled="True" />
+            
+            <!-- Color rotation -->
+            <TextBlock Grid.Row="5" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center"
+                       Height="16" Margin="0,9,0,10">
+                Rotate colors on debug-rectangle
+            </TextBlock>
+            <controls:ToggleSwitch IsChecked="{Binding Path=DebugEffectSettings.Rotate, Mode=TwoWay}"
+                                   Grid.Row="5" Grid.Column="1" HorizontalAlignment="Right" OnLabel="Yes"
+                                   OffLabel="No"
+                                   Margin="0,0,-5,0" Width="114" />
+
             <!-- Preview panel -->
-            <StackPanel Grid.Column="1" Grid.Row="1">
+            <StackPanel Grid.Row="6" Grid.Column="0" HorizontalAlignment="Left" Margin="0,25,0,0">
                 <TextBlock>
                     <InlineUIContainer>
                         <GroupBox Header="Preview" Margin="0" Height="70" Width="118">
@@ -109,6 +102,15 @@
                     </InlineUIContainer>
                 </TextBlock>
             </StackPanel>
+            
+            <!-- Buttons -->
+            <StackPanel Grid.Column="0" Grid.Row="8" Orientation="Horizontal" VerticalAlignment="Bottom">
+                <Button x:Name="ResetSettings" Content="Reset effect" VerticalAlignment="Top" Width="100"
+                        Style="{DynamicResource SquareButtonStyle}" />
+                <Button x:Name="SaveSettings" Content="Save changes" VerticalAlignment="Top" Width="100"
+                        Margin="10,0,0,0"
+                        Style="{DynamicResource SquareButtonStyle}" />
+            </StackPanel>
         </Grid>
     </ScrollViewer>
 </UserControl>
\ No newline at end of file
diff --git a/Artemis/Artemis/Modules/Effects/TypeWave/TypeWaveView.xaml b/Artemis/Artemis/Modules/Effects/TypeWave/TypeWaveView.xaml
index dff148892..11a99aae2 100644
--- a/Artemis/Artemis/Modules/Effects/TypeWave/TypeWaveView.xaml
+++ b/Artemis/Artemis/Modules/Effects/TypeWave/TypeWaveView.xaml
@@ -7,108 +7,123 @@
              xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
              xmlns:cal="http://www.caliburnproject.org"
              mc:Ignorable="d"
-             d:DesignHeight="407.812" d:DesignWidth="671.484"
-             cal:Bind.AtDesignTime="True">
+             d:DesignHeight="476.986" d:DesignWidth="538.772">
     <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
         <Grid Margin="15, 5, 15, 5">
             <Grid.ColumnDefinitions>
-                <ColumnDefinition Width="320" />
-                <ColumnDefinition Width="*" />
+                <ColumnDefinition Width="Auto" />
+                <ColumnDefinition />
             </Grid.ColumnDefinitions>
             <Grid.RowDefinitions>
                 <RowDefinition Height="Auto" />
-                <RowDefinition />
-                <RowDefinition />
-                <RowDefinition />
-                <RowDefinition />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="*" />
+
             </Grid.RowDefinitions>
-            <StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">
-                <Label FontSize="20"
-                       Style="{DynamicResource DescriptionHeaderStyle}" HorizontalAlignment="Left">
+            <StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Margin="0,0,1,0">
+                <Label FontSize="20" Style="{DynamicResource DescriptionHeaderStyle}" HorizontalAlignment="Left">
                     <Label.Content>
-                        <AccessText TextWrapping="Wrap" Text="Creates waves on the keyboard as you press keys." />
+                        <AccessText TextWrapping="Wrap"
+                                    Text="Creates waves on the keyboard as you press keys." />
                     </Label.Content>
                 </Label>
                 <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                     <Label Content="Enable effect" Margin="0 3 0 0" HorizontalAlignment="Right" />
                     <ToggleButton x:Name="EffectEnabled" Margin="0 3 0 0" Width="25" Height="25"
-                                  IsChecked="{Binding Path=EffectEnabled, Mode=OneWay}"
                                   Style="{DynamicResource MetroCircleToggleButtonStyle}"
                                   cal:Message.Attach="[Event Click] = [Action ToggleEffect]" />
                 </StackPanel>
             </StackPanel>
-            <StackPanel Grid.Row="1"
-                        Grid.Column="0"
-                        HorizontalAlignment="Left">
-                <controls:ToggleSwitch IsChecked="{Binding Path=TypeWaveSettings.IsRandomColors, Mode=TwoWay}"
-                                       Header="Random colors" OnLabel="Yes" OffLabel="No"
-                                       Margin="0 3 0 0" Width="125" />
-            </StackPanel>
-            <StackPanel Grid.Row="2"
-                        Grid.Column="0"
-                        HorizontalAlignment="Left">
-                <controls:ToggleSwitch IsChecked="{Binding Path=TypeWaveSettings.IsShiftColors, Mode=TwoWay}"
-                                       Header="Shift colors"
-                                       OnLabel="Yes" OffLabel="No"
-                                       Margin="0 3 0 0" Width="125" />
-            </StackPanel>
-            <!-- TTL slider -->
-            <StackPanel Grid.Row="3"
-                        Grid.Column="0"
-                        HorizontalAlignment="Left">
-                <Label FontSize="16" Content="Time to live" Style="{DynamicResource DescriptionHeaderStyle}"
-                       FontFamily="Segoe UI Semibold" Foreground="#535353" />
-                <Slider VerticalAlignment="top"
-                        HorizontalAlignment="Left"
-                        Width="132"
-                        TickPlacement="BottomRight"
-                        TickFrequency="100"
-                        x:Name="TypeWaveSettings_TimeToLive"
-                        Value="{Binding Path=TypeWaveSettings.TimeToLive, Mode=TwoWay}" Minimum="100" Maximum="2000"
-                        SmallChange="45"
-                        IsSnapToTickEnabled="True" />
-            </StackPanel>
-            <StackPanel Grid.Row="1"
-                        Grid.Column="1"
-                        HorizontalAlignment="Left">
-                <Label FontSize="16" Content="Wave color" Style="{DynamicResource DescriptionHeaderStyle}"
-                       FontFamily="Segoe UI Semibold" Foreground="#535353" Width="125" />
-                <xctk:ColorPicker x:Name="WaveColor"
-                                  SelectedColor="{Binding Path=TypeWaveSettings.WaveColor, Mode=TwoWay}" />
-            </StackPanel>
-            <!-- Shift speed slider -->
-            <StackPanel Grid.Row="2"
-                        Grid.Column="1"
-                        HorizontalAlignment="Left">
-                <Label FontSize="16" Content="Color shift speed" Style="{DynamicResource DescriptionHeaderStyle}"
-                       Foreground="#535353" FontFamily="Segoe UI Semibold" />
-                <Slider x:Name="ColorShiftSpeed"
-                        VerticalAlignment="top"
-                        HorizontalAlignment="Left"
-                        Width="132"
-                        TickPlacement="BottomRight"
-                        TickFrequency="10"
-                        Value="{Binding Path=TypeWaveSettings.ShiftColorSpeed, Mode=TwoWay}" Minimum="1" Maximum="200"
-                        SmallChange="5"
-                        IsSnapToTickEnabled="True" />
-            </StackPanel>
-            <!-- Spread Speed slider -->
-            <StackPanel Grid.Row="3"
-                        Grid.Column="1"
-                        HorizontalAlignment="Left">
-                <Label FontSize="16" Content="Spread speed" Style="{DynamicResource DescriptionHeaderStyle}"
-                       Foreground="#535353" FontFamily="Segoe UI Semibold" />
-                <Slider x:Name="SpreadSpeed"
-                        VerticalAlignment="top"
-                        HorizontalAlignment="Left"
-                        Width="132"
-                        TickPlacement="BottomRight"
-                        TickFrequency="1"
-                        Value="{Binding Path=TypeWaveSettings.SpreadSpeed, Mode=TwoWay}" Minimum="1" Maximum="6"
-                        SmallChange="1"
-                        IsSnapToTickEnabled="True" />
-            </StackPanel>
-            <StackPanel Grid.Column="0" Grid.Row="4" Orientation="Horizontal" VerticalAlignment="Bottom">
+
+            <!-- Color -->
+            <TextBlock Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center"
+                       Height="16" Margin="0,8">
+                Wave color
+            </TextBlock>
+            <xctk:ColorPicker x:Name="MiddleColor"
+                              SelectedColor="{Binding Path=TypeWaveSettings.WaveColor, Mode=TwoWay}"
+                              Grid.Row="1" Grid.Column="1" Width="110" HorizontalAlignment="Right"
+                              VerticalAlignment="Center" Margin="0,5,-1,5" Height="22" />
+            
+            <!-- Random colors -->
+            <TextBlock Grid.Row="2" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center"
+                       Height="16" Margin="0,8">
+                Use random colors
+            </TextBlock>
+            <controls:ToggleSwitch IsChecked="{Binding Path=TypeWaveSettings.IsRandomColors, Mode=TwoWay}"
+                                   Grid.Row="2" Grid.Column="1" HorizontalAlignment="Right" OnLabel="Yes"
+                                   OffLabel="No"
+                                   Margin="0,0,-5,0" Width="114" />
+            
+            <!-- Shift color -->
+            <TextBlock Grid.Row="3" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center"
+                       Height="16" Margin="0,8">
+                Shift through colors as the wave grows
+            </TextBlock>
+            <controls:ToggleSwitch IsChecked="{Binding Path=TypeWaveSettings.IsShiftColors, Mode=TwoWay}"
+                                   Grid.Row="3" Grid.Column="1" HorizontalAlignment="Right" OnLabel="Yes"
+                                   OffLabel="No"
+                                   Margin="0,0,-5,0" Width="114" />
+
+            <!-- Shift speed -->
+            <TextBlock Grid.Row="4" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center"
+                       Height="16" Margin="0,8">
+                Speed to shift colors at
+            </TextBlock>
+            <Slider x:Name="ColorShiftSpeed" Grid.Row="4" Grid.Column="1" VerticalAlignment="Center"
+                    HorizontalAlignment="Right" Width="110" TickPlacement="None" TickFrequency="1"
+                    Value="{Binding Path=TypeWaveSettings.ShiftColorSpeed, Mode=TwoWay}" Minimum="1" Maximum="200"
+                    SmallChange="45" IsSnapToTickEnabled="True" />
+            
+            <!-- TTL -->
+            <TextBlock Grid.Row="5" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center"
+                       Height="16" Margin="0,8">
+                Wave time to live
+            </TextBlock>
+            <Slider x:Name="TimeToLive" Grid.Row="5" Grid.Column="1" VerticalAlignment="Center"
+                    HorizontalAlignment="Right" Width="110" TickPlacement="None" TickFrequency="1"
+                    Value="{Binding Path=TypeWaveSettings.TimeToLive, Mode=TwoWay}" Minimum="100" Maximum="2000"
+                    SmallChange="45" IsSnapToTickEnabled="True" />
+
+            <!-- Growth speed -->
+            <TextBlock Grid.Row="6" Grid.Column="0" HorizontalAlignment="Left" Width="116" VerticalAlignment="Center"
+                       Height="16" Margin="0,9,0,10">
+                Wave growth speed
+            </TextBlock>
+            <Slider x:Name="SpreadSpeed" Grid.Row="6" Grid.Column="1" VerticalAlignment="Center"
+                    HorizontalAlignment="Right" Width="110" TickPlacement="BottomRight" TickFrequency="1"
+                    Value="{Binding Path=TypeWaveSettings.SpreadSpeed, Mode=TwoWay}" Minimum="1" Maximum="6"
+                    SmallChange="1" IsSnapToTickEnabled="True" />
+
+            <!-- Sensitivity -->
+            <TextBlock Grid.Row="7" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center"
+                       Height="16" Margin="0,8">
+                Volume sensitivity multiplier
+            </TextBlock>
+            <Slider x:Name="Sensitivity" Grid.Row="7" Grid.Column="1" VerticalAlignment="Center"
+                    HorizontalAlignment="Right" Width="110" TickPlacement="BottomRight" TickFrequency="1"
+                    Value="{Binding Path=AudioVisualizerSettings.Sensitivity, Mode=TwoWay}" Minimum="1" Maximum="10"
+                    SmallChange="1" IsSnapToTickEnabled="True" />
+
+            <!-- Fade speed -->
+            <TextBlock Grid.Row="8" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center"
+                       Height="16" Margin="0,8">
+                Bar fade-out speed
+            </TextBlock>
+            <Slider x:Name="FadeSpeed" Grid.Row="8" Grid.Column="1" VerticalAlignment="Center"
+                    HorizontalAlignment="Right" Width="110" TickPlacement="BottomRight" TickFrequency="1"
+                    Value="{Binding Path=AudioVisualizerSettings.FadeSpeed, Mode=TwoWay}" Minimum="1" Maximum="3"
+                    SmallChange="1" IsSnapToTickEnabled="True" />
+
+            <!-- Buttons -->
+            <StackPanel Grid.Column="0" Grid.Row="9" Orientation="Horizontal" VerticalAlignment="Bottom">
                 <Button x:Name="ResetSettings" Content="Reset effect" VerticalAlignment="Top" Width="100"
                         Style="{DynamicResource SquareButtonStyle}" />
                 <Button x:Name="SaveSettings" Content="Save changes" VerticalAlignment="Top" Width="100"
diff --git a/Artemis/Artemis/Modules/Games/CounterStrike/CounterStrikeView.xaml b/Artemis/Artemis/Modules/Games/CounterStrike/CounterStrikeView.xaml
index 0be92cb60..948cc83c1 100644
--- a/Artemis/Artemis/Modules/Games/CounterStrike/CounterStrikeView.xaml
+++ b/Artemis/Artemis/Modules/Games/CounterStrike/CounterStrikeView.xaml
@@ -7,116 +7,128 @@
              xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"
              xmlns:cal="http://www.caliburnproject.org"
              mc:Ignorable="d"
-             d:DesignHeight="475.61" d:DesignWidth="519.512">
+             d:DesignHeight="476.986" d:DesignWidth="538.772">
     <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
-    <Grid Margin="15, 5, 15, 5">
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="320" />
-            <ColumnDefinition Width="*" />
-        </Grid.ColumnDefinitions>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="Auto" />
-            <RowDefinition Height="80" />
-            <RowDefinition />
-            <RowDefinition />
-            <RowDefinition />
-            <RowDefinition />
-            <RowDefinition />
+        <Grid Margin="15, 5, 15, 5">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="Auto"/>
+                <ColumnDefinition />
+            </Grid.ColumnDefinitions>
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="80" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="*" />
 
-        </Grid.RowDefinitions>
-        <StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">
-            <Label FontSize="20" Style="{DynamicResource DescriptionHeaderStyle}" HorizontalAlignment="Left">
-                <Label.Content>
-                    <AccessText TextWrapping="Wrap"
-                                Text="Shows verious game states and events on the keyboard." />
-                </Label.Content>
-            </Label>
-            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
-                <Label Content="Enable effect" Margin="0 3 0 0" HorizontalAlignment="Right" />
-                <ToggleButton x:Name="EffectEnabled" Margin="0 3 0 0" Width="25" Height="25"
-                              Style="{DynamicResource MetroCircleToggleButtonStyle}" />
+            </Grid.RowDefinitions>
+            <StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Margin="0,0,1,0">
+                <Label FontSize="20" Style="{DynamicResource DescriptionHeaderStyle}" HorizontalAlignment="Left">
+                    <Label.Content>
+                        <AccessText TextWrapping="Wrap"
+                                    Text="Shows verious game states and events on the keyboard." />
+                    </Label.Content>
+                </Label>
+                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
+                    <Label Content="Enable effect" Margin="0 3 0 0" HorizontalAlignment="Right" />
+                    <ToggleButton x:Name="EffectEnabled" Margin="0 3 0 0" Width="25" Height="25"
+                                  Style="{DynamicResource MetroCircleToggleButtonStyle}" />
+                </StackPanel>
             </StackPanel>
-        </StackPanel>
 
-        <StackPanel Grid.Row="1"
-                    Grid.Column="0"
-                    Grid.ColumnSpan="2">
-            <Label FontSize="16" Content="CS:GO Directory" Style="{DynamicResource DescriptionHeaderStyle}"
-                   FontFamily="Segoe UI Semibold" Foreground="#535353" Width="130" HorizontalAlignment="Left" />
-            <Grid>
-                <TextBox x:Name="GameDirectory" Height="23" TextWrapping="Wrap" Margin="5,0,30,0"
-                         Text="{Binding Path=CounterStrikeSettings.GameDirectory, Mode=TwoWay}"
-                         cal:Message.Attach="[Event LostFocus] = [Action PlaceConfigFile]" />
-                <Button x:Name="BrowseDirectory" Content="..." RenderTransformOrigin="-0.039,-0.944"
-                        HorizontalAlignment="Right" Width="25"
-                        Style="{DynamicResource SquareButtonStyle}" Height="25" />
-            </Grid>
-        </StackPanel>
-        <StackPanel Grid.Row="2"
-                    Grid.Column="0"
-                    HorizontalAlignment="Left">
+            <StackPanel Grid.Row="1"
+                        Grid.Column="0"
+                        Grid.ColumnSpan="2" Margin="0,0,1,0">
+                <Label FontSize="16" Content="CS:GO Directory" Style="{DynamicResource DescriptionHeaderStyle}"
+                       FontFamily="Segoe UI Semibold" Foreground="#535353" Width="130" HorizontalAlignment="Left" />
+                <Grid>
+                    <TextBox x:Name="GameDirectory" Height="23" TextWrapping="Wrap" Margin="5,0,30,0"
+                             Text="{Binding Path=CounterStrikeSettings.GameDirectory, Mode=TwoWay}"
+                             cal:Message.Attach="[Event LostFocus] = [Action PlaceConfigFile]" />
+                    <Button x:Name="BrowseDirectory" Content="..." RenderTransformOrigin="-0.039,-0.944"
+                            HorizontalAlignment="Right" Width="25"
+                            Style="{DynamicResource SquareButtonStyle}" Height="25" />
+                </Grid>
+            </StackPanel>
+
+            <!-- Ammo display -->
+            <TextBlock Grid.Row="2" Grid.Column="0" HorizontalAlignment="Left" Width="130" VerticalAlignment="Center"
+                       Height="16" Margin="0,10,0,9">
+                Display ammo on F-keys
+            </TextBlock>
             <controls:ToggleSwitch IsChecked="{Binding Path=CounterStrikeSettings.AmmoEnabled, Mode=TwoWay}"
-                                   Header="Ammo display"
-                                   OnLabel="Yes" OffLabel="No"
-                                   Margin="5,3,0,0" Width="180" />
-        </StackPanel>
-        <StackPanel Grid.Row="3"
-                    Grid.Column="0"
-                    HorizontalAlignment="Left">
-            <Label FontSize="16" Content="Ammo main color" Style="{DynamicResource DescriptionHeaderStyle}"
-                   FontFamily="Segoe UI Semibold" Foreground="#535353" Width="180" />
+                                   Grid.Row="2" Grid.Column="1" HorizontalAlignment="Right" OnLabel="Yes" OffLabel="No"
+                                   Margin="0,0,-5,0" Width="114" />
+
+            <!-- Ammo main color -->
+            <TextBlock Grid.Row="3" Grid.Column="0" HorizontalAlignment="Left" Width="94" VerticalAlignment="Center"
+                       Height="16" Margin="0,8">
+                Main ammo color
+            </TextBlock>
             <xctk:ColorPicker x:Name="MainColor"
                               SelectedColor="{Binding Path=CounterStrikeSettings.AmmoMainColor, Mode=TwoWay}"
-                              Margin="5,0,0,0" />
-        </StackPanel>
-        <StackPanel Grid.Row="3"
-                    Grid.Column="1"
-                    HorizontalAlignment="Left">
-            <Label FontSize="16" Content="Ammo secondary color" Style="{DynamicResource DescriptionHeaderStyle}"
-                   FontFamily="Segoe UI Semibold" Foreground="#535353" Width="180" />
+                              Grid.Row="3" Grid.Column="1" Width="110" HorizontalAlignment="Right"
+                              VerticalAlignment="Center" Margin="0,5,-1,5" Height="22" />
+
+            <!-- Ammo secondary color -->
+            <TextBlock Grid.Row="4" Grid.Column="0" HorizontalAlignment="Left" Width="122" VerticalAlignment="Center"
+                       Height="16" Margin="0,8">
+                Secondary ammo color
+            </TextBlock>
             <xctk:ColorPicker x:Name="SecondaryColor"
                               SelectedColor="{Binding Path=CounterStrikeSettings.AmmoSecondaryColor, Mode=TwoWay}"
-                              Margin="5,0,0,0" />
-        </StackPanel>
-        <StackPanel Grid.Row="4"
-                    Grid.Column="0"
-                    HorizontalAlignment="Left">
-            <controls:ToggleSwitch IsChecked="{Binding Path=CounterStrikeSettings.SmokeEnabled, Mode=TwoWay}"
-                                   Header="Smoked effect"
-                                   OnLabel="Yes" OffLabel="No"
-                                   Margin="5,3,0,0" Width="180" />
-        </StackPanel>
-        <StackPanel Grid.Row="4"
-                    Grid.Column="1"
-                    HorizontalAlignment="Left">
-            <controls:ToggleSwitch IsChecked="{Binding Path=CounterStrikeSettings.FlashEnabled, Mode=TwoWay}"
-                                   Header="Flashed effect"
-                                   OnLabel="Yes" OffLabel="No"
-                                   Margin="5,3,0,0" Width="180" />
-        </StackPanel>
-        <StackPanel Grid.Row="5"
-                    Grid.Column="0"
-                    HorizontalAlignment="Left">
-            <controls:ToggleSwitch IsChecked="{Binding Path=CounterStrikeSettings.TeamColorEnabled, Mode=TwoWay}"
-                                   Header="Team colors"
-                                   OnLabel="Yes" OffLabel="No"
-                                   Margin="5,3,0,0" Width="180" />
-        </StackPanel>
-        <StackPanel Grid.Row="5"
-                    Grid.Column="1"
-                    HorizontalAlignment="Left">
-            <controls:ToggleSwitch IsChecked="{Binding Path=CounterStrikeSettings.LowHpEnabled, Mode=TwoWay}"
-                                   Header="Low HP effect"
-                                   OnLabel="Yes" OffLabel="No"
-                                   Margin="5,3,0,0" Width="180" />
-        </StackPanel>
+                              Grid.Row="4" Grid.Column="1" Width="110" HorizontalAlignment="Right"
+                              VerticalAlignment="Center" Margin="0,5,-1,5" Height="22" />
 
-        <StackPanel Grid.Column="0" Grid.Row="6" Orientation="Horizontal" VerticalAlignment="Bottom">
-            <Button x:Name="ResetSettings" Content="Reset effect" VerticalAlignment="Top" Width="100"
-                    Style="{DynamicResource SquareButtonStyle}" />
-            <Button x:Name="SaveSettings" Content="Save changes" VerticalAlignment="Top" Width="100" Margin="10,0,0,0"
-                    Style="{DynamicResource SquareButtonStyle}" />
-        </StackPanel>
-    </Grid>
+            <!-- Smoke effect -->
+            <TextBlock Grid.Row="5" Grid.Column="0" HorizontalAlignment="Left" Width="116" VerticalAlignment="Center"
+                       Height="16" Margin="0,9,0,10">
+                Display smoked effect
+            </TextBlock>
+            <controls:ToggleSwitch IsChecked="{Binding Path=CounterStrikeSettings.SmokeEnabled, Mode=TwoWay}"
+                                   Grid.Row="5" Grid.Column="1" HorizontalAlignment="Right" OnLabel="Yes" OffLabel="No"
+                                   Margin="0,0,-5,0" Width="114" />
+
+            <!-- Flash effect -->
+            <TextBlock Grid.Row="6" Grid.Column="0" HorizontalAlignment="Left" Width="113" VerticalAlignment="Center"
+                       Height="16" Margin="0,10,0,9">
+                Display flashed effect
+            </TextBlock>
+            <controls:ToggleSwitch IsChecked="{Binding Path=CounterStrikeSettings.FlashEnabled, Mode=TwoWay}"
+                                   Grid.Row="6" Grid.Column="1" HorizontalAlignment="Right" OnLabel="Yes" OffLabel="No"
+                                   Margin="0,0,-5,0" Width="114" />
+
+            <!-- Team color -->
+            <TextBlock Grid.Row="7" Grid.Column="0" HorizontalAlignment="Left" Width="181" VerticalAlignment="Center"
+                       Height="16" Margin="0,9,0,10">
+                Color keyboard according to team
+            </TextBlock>
+            <controls:ToggleSwitch IsChecked="{Binding Path=CounterStrikeSettings.TeamColorEnabled, Mode=TwoWay}"
+                                   Grid.Row="7" Grid.Column="1" HorizontalAlignment="Right" OnLabel="Yes" OffLabel="No"
+                                   Margin="0,0,-5,0" Width="114" />
+
+            <!-- Team color -->
+            <TextBlock Grid.Row="8" Grid.Column="0" HorizontalAlignment="Left" Width="160" VerticalAlignment="Center"
+                       Height="16" Margin="0,10,0,9">
+                Color keyboard red on low HP
+            </TextBlock>
+            <controls:ToggleSwitch IsChecked="{Binding Path=CounterStrikeSettings.LowHpEnabled, Mode=TwoWay}"
+                                   Grid.Row="8" Grid.Column="1" HorizontalAlignment="Right" OnLabel="Yes" OffLabel="No"
+                                   Margin="0,0,-5,0" Width="114" />
+
+            <!-- Buttons -->
+            <StackPanel Grid.Column="0" Grid.Row="9" Orientation="Horizontal" VerticalAlignment="Bottom">
+                <Button x:Name="ResetSettings" Content="Reset effect" VerticalAlignment="Top" Width="100"
+                        Style="{DynamicResource SquareButtonStyle}" />
+                <Button x:Name="SaveSettings" Content="Save changes" VerticalAlignment="Top" Width="100"
+                        Margin="10,0,0,0"
+                        Style="{DynamicResource SquareButtonStyle}" />
+            </StackPanel>
+        </Grid>
     </ScrollViewer>
 </UserControl>
\ No newline at end of file
diff --git a/Artemis/Artemis/Modules/Games/Dota2/Dota2View.xaml b/Artemis/Artemis/Modules/Games/Dota2/Dota2View.xaml
index e4f44d378..deffd25e7 100644
--- a/Artemis/Artemis/Modules/Games/Dota2/Dota2View.xaml
+++ b/Artemis/Artemis/Modules/Games/Dota2/Dota2View.xaml
@@ -7,7 +7,7 @@
              d:DesignHeight="300" d:DesignWidth="300">
     <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
         <Grid>
-            <TextBlock Text="{Binding Content}" />
+            <TextBlock Text="Dota 2 support is still to be done." />
         </Grid>
     </ScrollViewer>
 </UserControl>
\ No newline at end of file
diff --git a/Artemis/Artemis/Modules/Games/RocketLeague/RocketLeagueView.xaml b/Artemis/Artemis/Modules/Games/RocketLeague/RocketLeagueView.xaml
index 6e6e05baa..f93341ca3 100644
--- a/Artemis/Artemis/Modules/Games/RocketLeague/RocketLeagueView.xaml
+++ b/Artemis/Artemis/Modules/Games/RocketLeague/RocketLeagueView.xaml
@@ -3,28 +3,29 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-             xmlns:cal="http://www.caliburnproject.org"
              xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
              mc:Ignorable="d"
-             d:DesignHeight="383.137" d:DesignWidth="591.211"
-             cal:Bind.AtDesignTime="True">
+             d:DesignHeight="476.986" d:DesignWidth="538.772">
     <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
         <Grid Margin="15, 5, 15, 5">
             <Grid.ColumnDefinitions>
-                <ColumnDefinition Width="320" />
-                <ColumnDefinition Width="*" />
+                <ColumnDefinition Width="Auto" />
+                <ColumnDefinition />
             </Grid.ColumnDefinitions>
             <Grid.RowDefinitions>
                 <RowDefinition Height="Auto" />
                 <RowDefinition Height="Auto" />
-                <RowDefinition />
-                <RowDefinition />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="*" />
+
             </Grid.RowDefinitions>
-            <StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">
+            <StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Margin="0,0,1,0">
                 <Label FontSize="20" Style="{DynamicResource DescriptionHeaderStyle}" HorizontalAlignment="Left">
                     <Label.Content>
                         <AccessText TextWrapping="Wrap"
-                                    Text="Fills up the keyboard according to the amount of boost you have." Width="536" />
+                                    Text="Shows your boost amount on the keyboard." />
                     </Label.Content>
                 </Label>
                 <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
@@ -33,34 +34,41 @@
                                   Style="{DynamicResource MetroCircleToggleButtonStyle}" />
                 </StackPanel>
             </StackPanel>
-            <StackPanel Grid.Row="1"
-                        Grid.Column="0"
-                        HorizontalAlignment="Left">
-                <Label FontSize="16" Content="Main color" Style="{DynamicResource DescriptionHeaderStyle}"
-                       FontFamily="Segoe UI Semibold" Foreground="#535353" Width="130" />
-                <xctk:ColorPicker x:Name="MainColor"
-                                  SelectedColor="{Binding Path=RocketLeagueSettings.MainColor, Mode=TwoWay}" />
-            </StackPanel>
-            <StackPanel Grid.Row="1"
-                        Grid.Column="1"
-                        HorizontalAlignment="Left">
-                <Label FontSize="16" Content="Secondary color" Style="{DynamicResource DescriptionHeaderStyle}"
-                       FontFamily="Segoe UI Semibold" Foreground="#535353" Width="130" />
-                <xctk:ColorPicker x:Name="SecondaryColor"
-                                  SelectedColor="{Binding Path=RocketLeagueSettings.SecondaryColor, Mode=TwoWay}" />
-            </StackPanel>
-            <StackPanel Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2" VerticalAlignment="Top">
-                <Label FontSize="16"
-                       Style="{DynamicResource DescriptionHeaderStyle}"
-                       FontFamily="Segoe UI Semibold" Foreground="#535353" Width="500" Margin="0,10,0,0" HorizontalAlignment="Left">
-                    <Label.Content>
-                        <AccessText TextWrapping="Wrap"
-                                    Text="Tip: To find a color combination you like, start an exhibition match, pickup 100 boost and play around with the colors. They'll appear on your keyboard immediately! Once you're satisfied don't forget to click save changes."
-                                    FontStyle="Italic" FontSize="12" />
-                    </Label.Content>
-                </Label>
-            </StackPanel>
-            <StackPanel Grid.Column="0" Grid.Row="3" Orientation="Horizontal" VerticalAlignment="Bottom">
+
+            <!-- Main color -->
+            <TextBlock Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center"
+                       Height="16" Margin="0,8">
+                Main boost display color
+            </TextBlock>
+            <xctk:ColorPicker x:Name="MainColor"
+                              SelectedColor="{Binding Path=RocketLeagueSettings.MainColor, Mode=TwoWay}"
+                              Grid.Row="1" Grid.Column="1" Width="110" HorizontalAlignment="Right"
+                              VerticalAlignment="Center" Margin="0,5,-1,5" Height="22" />
+
+            <!-- Secondary color -->
+            <TextBlock Grid.Row="2" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center"
+                       Height="16" Margin="0,8">
+                Secondary boost display color
+            </TextBlock>
+            <xctk:ColorPicker x:Name="SecondaryColor"
+                              SelectedColor="{Binding Path=RocketLeagueSettings.SecondaryColor, Mode=TwoWay}"
+                              Grid.Row="2" Grid.Column="1" Width="110" HorizontalAlignment="Right"
+                              VerticalAlignment="Center" Margin="0,5,-1,5" Height="22" />
+
+            <TextBlock Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" VerticalAlignment="Center" Margin="0,8"
+                       TextWrapping="Wrap" HorizontalAlignment="Left" FontFamily="Segoe UI Semibold"
+                       Foreground="#535353" MaxWidth="520" TextAlignment="Justify">
+                Tip: To find a color combination you like, start an exhibition match, pickup 100 boost and play around with the colors.
+                They'll appear on your keyboard immediately! Once you're satisfied don't forget to click save changes.
+            </TextBlock>
+            <TextBlock Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2" VerticalAlignment="Center" Margin="0,8"
+                       TextWrapping="Wrap" HorizontalAlignment="Left" FontFamily="Segoe UI Semibold"
+                       Foreground="#535353" MaxWidth="520" TextAlignment="Justify">
+                Note: Requires patch x.x. When a new patch is released Artemis downloads new pointers for the latest version (unless disabled in settings).
+            </TextBlock>
+
+            <!-- Buttons -->
+            <StackPanel Grid.Column="0" Grid.Row="9" Orientation="Horizontal" VerticalAlignment="Bottom">
                 <Button x:Name="ResetSettings" Content="Reset effect" VerticalAlignment="Top" Width="100"
                         Style="{DynamicResource SquareButtonStyle}" />
                 <Button x:Name="SaveSettings" Content="Save changes" VerticalAlignment="Top" Width="100"
diff --git a/Artemis/Artemis/Modules/Games/Witcher3/Witcher3View.xaml b/Artemis/Artemis/Modules/Games/Witcher3/Witcher3View.xaml
index 806199965..4d0601f9e 100644
--- a/Artemis/Artemis/Modules/Games/Witcher3/Witcher3View.xaml
+++ b/Artemis/Artemis/Modules/Games/Witcher3/Witcher3View.xaml
@@ -8,8 +8,8 @@
     <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
         <Grid Margin="15, 5, 15, 5">
             <Grid.ColumnDefinitions>
-                <ColumnDefinition Width="320" />
-                <ColumnDefinition Width="*" />
+                <ColumnDefinition Width="Auto" />
+                <ColumnDefinition />
             </Grid.ColumnDefinitions>
             <Grid.RowDefinitions>
                 <RowDefinition Height="Auto" />
@@ -28,18 +28,12 @@
                                   Style="{DynamicResource MetroCircleToggleButtonStyle}" />
                 </StackPanel>
             </StackPanel>
-            <StackPanel Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2" VerticalAlignment="Top">
-                <Label FontSize="16"
-                       Style="{DynamicResource DescriptionHeaderStyle}"
-                       FontFamily="Segoe UI Semibold" Foreground="#535353" Height="79" Margin="0,10,0,0">
-                    <Label.Content>
-                        <AccessText TextWrapping="Wrap"
-                                    Text="Note: Requires patch 1.12. When a new patch is released Artemis download new pointers for the latest version (unless disabled in settings)."
-                                    FontStyle="Italic" FontSize="12" Width="515" />
+            <TextBlock Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2" VerticalAlignment="Center" Margin="0,8"
+                       TextWrapping="Wrap" HorizontalAlignment="Left" FontFamily="Segoe UI Semibold"
+                       Foreground="#535353" MaxWidth="520" TextAlignment="Justify">
+                Note: Requires patch x.x. When a new patch is released Artemis downloads new pointers for the latest version (unless disabled in settings).
+            </TextBlock>
 
-                    </Label.Content>
-                </Label>
-            </StackPanel>
         </Grid>
     </ScrollViewer>
 </UserControl>
\ No newline at end of file
diff --git a/Artemis/Artemis/Modules/Overlays/VolumeDisplay/VolumeDisplayView.xaml b/Artemis/Artemis/Modules/Overlays/VolumeDisplay/VolumeDisplayView.xaml
index 41fdb18de..ac8362e64 100644
--- a/Artemis/Artemis/Modules/Overlays/VolumeDisplay/VolumeDisplayView.xaml
+++ b/Artemis/Artemis/Modules/Overlays/VolumeDisplay/VolumeDisplayView.xaml
@@ -6,54 +6,64 @@
              xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
              xmlns:cal="http://www.caliburnproject.org"
              mc:Ignorable="d"
-             d:DesignHeight="407.812" d:DesignWidth="671.484"
-             cal:Bind.AtDesignTime="True">
+             d:DesignHeight="476.986" d:DesignWidth="538.772">
     <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
         <Grid Margin="15, 5, 15, 5">
             <Grid.ColumnDefinitions>
-                <ColumnDefinition Width="320" />
-                <ColumnDefinition Width="*" />
+                <ColumnDefinition Width="Auto" />
+                <ColumnDefinition />
             </Grid.ColumnDefinitions>
             <Grid.RowDefinitions>
                 <RowDefinition Height="Auto" />
-                <RowDefinition />
-                <RowDefinition />
-                <RowDefinition />
-                <RowDefinition />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="*" />
+
             </Grid.RowDefinitions>
-            <StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">
-                <Label FontSize="20"
-                       Style="{DynamicResource DescriptionHeaderStyle}" HorizontalAlignment="Left">
+            <StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Margin="0,0,1,0">
+                <Label FontSize="20" MaxWidth="500" Style="{DynamicResource DescriptionHeaderStyle}"
+                       HorizontalAlignment="Left">
                     <Label.Content>
-                        <AccessText TextWrapping="Wrap" Text="Displays media key actions on the keyboard." />
+                        <AccessText TextWrapping="Wrap" Text="Shows the Windows volume on the keyboard" />
                     </Label.Content>
                 </Label>
                 <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
-                    <Label Content="Enable effect" Margin="0 3 0 0" HorizontalAlignment="Right" />
+                    <Label Content="Enable overlay" Margin="0 3 0 0" HorizontalAlignment="Right" />
                     <ToggleButton x:Name="EffectEnabled" Margin="0 3 0 0" Width="25" Height="25"
-                                  IsChecked="{Binding Path=VolumeDisplaySettings.Enabled, Mode=TwoWay}"
                                   Style="{DynamicResource MetroCircleToggleButtonStyle}"
                                   cal:Message.Attach="[Event Click] = [Action ToggleEffect]" />
                 </StackPanel>
             </StackPanel>
-            <StackPanel Grid.Row="1"
-                        Grid.Column="0"
-                        HorizontalAlignment="Left">
-                <Label FontSize="16" Content="Main color" Style="{DynamicResource DescriptionHeaderStyle}"
-                       FontFamily="Segoe UI Semibold" Foreground="#535353" Width="134" HorizontalAlignment="Left" />
-                <xctk:ColorPicker x:Name="MainColor"
-                                  SelectedColor="{Binding Path=VolumeDisplaySettings.MainColor, Mode=TwoWay}" />
-            </StackPanel>
-            <StackPanel Grid.Row="1"
-                        Grid.Column="1"
-                        HorizontalAlignment="Left">
-                <Label FontSize="16" Content="Secondary color" Style="{DynamicResource DescriptionHeaderStyle}"
-                       FontFamily="Segoe UI Semibold" Foreground="#535353" />
-                <xctk:ColorPicker x:Name="SecondaryColor"
-                                  SelectedColor="{Binding Path=VolumeDisplaySettings.SecondaryColor, Mode=TwoWay}" />
-            </StackPanel>
 
-            <StackPanel Grid.Column="0" Grid.Row="4" Orientation="Horizontal" VerticalAlignment="Bottom">
+            <!-- Main color -->
+            <TextBlock Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Height="16"
+                       Margin="0,8">
+                Main volume display color
+            </TextBlock>
+            <xctk:ColorPicker x:Name="MainColor"
+                              SelectedColor="{Binding Path=VolumeDisplaySettings.MainColor, Mode=TwoWay}"
+                              Grid.Row="1" Grid.Column="1" Width="110" HorizontalAlignment="Right"
+                              VerticalAlignment="Center" Margin="0,5,-1,5" Height="22" />
+
+            <!-- Secondary color -->
+            <TextBlock Grid.Row="2" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Height="16"
+                       Margin="0,8">
+                Secondary volume display color
+            </TextBlock>
+            <xctk:ColorPicker x:Name="SecondaryColor"
+                              SelectedColor="{Binding Path=VolumeDisplaySettings.SecondaryColor, Mode=TwoWay}"
+                              Grid.Row="2" Grid.Column="1" Width="110" HorizontalAlignment="Right"
+                              VerticalAlignment="Center" Margin="0,5,-1,5" Height="22" />
+
+            <TextBlock Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" VerticalAlignment="Center" Margin="0,8"
+                       TextWrapping="Wrap" HorizontalAlignment="Left" FontFamily="Segoe UI Semibold"
+                       Foreground="#535353" MaxWidth="520" TextAlignment="Justify">
+                Note: This is an overlay. It will go over any other active effect, and is only shown at certain moments (in this case when changing volume).
+            </TextBlock>
+
+            <!-- Buttons -->
+            <StackPanel Grid.Column="0" Grid.Row="9" Orientation="Horizontal" VerticalAlignment="Bottom">
                 <Button x:Name="ResetSettings" Content="Reset effect" VerticalAlignment="Top" Width="100"
                         Style="{DynamicResource SquareButtonStyle}" />
                 <Button x:Name="SaveSettings" Content="Save changes" VerticalAlignment="Top" Width="100"
diff --git a/Artemis/Artemis/Views/ShellView.xaml b/Artemis/Artemis/Views/ShellView.xaml
index e24a586c8..e59a53a7d 100644
--- a/Artemis/Artemis/Views/ShellView.xaml
+++ b/Artemis/Artemis/Views/ShellView.xaml
@@ -7,7 +7,8 @@
                       xmlns:cal="http://www.caliburnproject.org"
                       mc:Ignorable="d"
                       cal:Message.Attach="[Event Closing] = [Action OnClose($eventArgs)]"
-                      Title="Artemis" Height="600" Width="718"
+                      Title="Artemis" Height="670" Width="675"
+                      MinWidth="500" MinHeight="400"
                       GlowBrush="{DynamicResource AccentColorBrush}">
     <Controls:MetroWindow.RightWindowCommands>
         <Controls:WindowCommands>