diff --git a/src/Umbraco.Web.UI.Client/src/less/sections.less b/src/Umbraco.Web.UI.Client/src/less/sections.less
index c764280c8d..bd89d0e359 100644
--- a/src/Umbraco.Web.UI.Client/src/less/sections.less
+++ b/src/Umbraco.Web.UI.Client/src/less/sections.less
@@ -4,15 +4,15 @@
 ul.sections {
 	margin: 0;
 	display: block;
-	background: @blackLight;
+	background: @purple;
 	height: 100%;
 	width: 80px;
-    border-right: 1px solid @grayDark;
+    border-right: 1px solid @purple;
 }
 
 ul.sections li {
 	display: block;
-	border-left: 4px @blackLight solid;
+	border-left: 4px @purple solid;
 	-webkit-transition: all .3s linear;
 	-moz-transition: all .3s linear;
 	transition: all .3s linear;
@@ -25,7 +25,7 @@ ul.sections li img.icon-section {
     line-height: 20px; /* set line-height to ensure all icons use same line-height */
     display: inline-block;
 	margin: 1px 0 0 0;
-	opacity: 0.4;
+	color: @purple-l2;
 	-webkit-transition: all .3s linear;
 	-moz-transition: all .3s linear;
 	transition: all .3s linear;
@@ -34,16 +34,16 @@ ul.sections li img.icon-section {
 ul.sections:hover li [class^="icon-"], 
 ul.sections:hover li [class*=" icon-"],
 ul.sections:hover li img.icon-section {
-	opacity: 1
+	color: @white;
 }
 
 ul.sections li a {
 	display: block;
 	text-decoration: none;
 	text-align: center;
-	color: @grayLight;
+	color: @white;
 	padding: 20px 4px 4px 0;
-	border-bottom: 1px solid @grayDark;
+	border-bottom: 1px solid @purple-d1;
 	width: 100%;
 	height: 100%;
 	margin: 0 0 0 -4px;
@@ -73,7 +73,7 @@ ul.sections li.avatar {
 	padding: 22px 0 2px 0;
 	text-align: center;
 	margin: 0 0 0 -4px;
-	border-bottom: 1px solid @grayDark;
+	border-bottom: 1px solid @purple-d1;
 }
 
 ul.sections li.avatar a {
@@ -93,18 +93,30 @@ ul.sections li.avatar a img {
 	opacity: 0.4
 }
 
-ul.sections li.current, ul.sections li:hover {
-    border-left: 4px @orange solid;
+ul.sections li.current {
+	background-color: @purple-d1;
 }
 
-ul.sections li.avatar.current, ul.sections li.avatar:hover {
-	border-left: 4px @blackLight solid;
+ul.sections li.current, 
+ul.sections li:hover {
+    border-left: 4px @green solid;
+}
+
+ul.sections li.avatar.current, 
+ul.sections li.avatar:hover {
+	border-left: 4px @purple solid;
 }
 
 ul.sections li.current a{
     padding-left: 0px;
 }
 
+ul.sections li.current [class^="icon-"], 
+ul.sections li.current [class*=" icon-"],
+ul.sections li.current img.icon-section {
+	color: @white;
+}
+
 ul.sections li.help {	
 	margin: 0;
 	position: absolute;
@@ -156,7 +168,7 @@ ul.sections-tray {
 	width: 80px;
 
     & > li:first-child > a {
-        border-top: 1px solid #343434;
+        border-top: 1px solid @purple;
     }
 
     & > li {