diff --git a/v2/assets/css/style.css b/v2/assets/css/style.css
index 630a19e..685888e 100644
--- a/v2/assets/css/style.css
+++ b/v2/assets/css/style.css
@@ -758,4 +758,31 @@ li.incomplete:before, li.incomplete .step {
 .modal.in .modal-dialog {
     transform: translate(0px, 100px);
 }
-
+address, caption, cite, code, dfn, em, strong, th, var {
+    opacity: 0.8 !important; 
+}
+div.toc ul li a {
+    border-radius: 7px;
+}
+circle.parent {
+    fill-opacity: 1 !important;
+    stroke: none !important;
+    fill: #E6E6E6!important;
+}
+circle
+{
+    fill-opacity:1 !important;
+    stroke:none !important;
+}
+circle[depth='1'] {
+    fill: #27AA37 !important;
+}
+circle[depth='2'] {
+    fill: #FEE188 !important;
+}
+circle[depth='3'] {
+    fill: #6FB3E0 !important;
+}
+circle[depth='4'] {
+    fill: #D15B47 !important;
+}
\ No newline at end of file
diff --git a/v2/src/app/monitoring/overview.tpl.html b/v2/src/app/monitoring/overview.tpl.html
index 6022d49..881d013 100644
--- a/v2/src/app/monitoring/overview.tpl.html
+++ b/v2/src/app/monitoring/overview.tpl.html
@@ -5,88 +5,116 @@
 </div>
 
 <div class="container row side-padding-0 top-padding-0">
-    <div class="toc" id="toc">
+    <div class="toc info-icons" id="toc">
         <ul class="tiles">
 		<li>
-		<a href="javascript::getSummary(01_intro);">
-		<em> 1</em>
+		<a href="javascript::getSummary(01_intro);" style="background-color: #6C9842">
+		<em>
+			<span class="glyphicon glyphicon-list-alt">
+			</span>
+		</em>
 		<br>
 		Cluster Summary
 		</a>
 		</li>
 		<li>
-		<a href="javascript::getSummary(02_quickstart);">
-		<em> 2</em>
+		<a href="javascript::getSummary(02_quickstart);" style="background-color: #D6487E;">
+		<em>
+		<image src="assets/img/controller.png" width="110" height="110" style="margin-bottom: 35px;"></image>
+		</em>
 		<br>
 		Controller
 		</a>
 		</li>
 		<li>
-		<a href="javascript::getSummary(01_intro);">
-		<em> 3</em>
+		<a href="javascript::getSummary(01_intro);" style="background-color: #FFB752;">
+		<em> 
+			<span class="glyphicon glyphicon-warning-sign" style="padding-left: 8px;">
+			</span>
+		</em>
 		<br>
 		Alerts
 		</a>
 		</li>
 		<li>
-		<a href="javascript::getSummary(01_intro);">
-		<em> 4</em>
+		<a href="javascript::getSummary(01_intro);" style="background-color: #7B68AF;">
+		<em>
+			<image src="assets/img/compute.png" width="80" height="80" style="margin-bottom: 35px;"></image>
+		</em>
 		<br>
 		Compute
 		</a>
 		</li>
 		<li>
-		<a href="javascript::getSummary(01_intro);">
-		<em> 5</em>
+		<a href="javascript::getSummary(01_intro);" style="background-color: #7B68AF;">
+		<em>
+			<image src="assets/img/security.png" width="80" height="80" style="margin-bottom: 35px;"></image>
+		</em>
 		<br>
 		Security
 		</a>
 		</li>
 		<li>
-		<a href="javascript::getSummary(01_intro);">
-		<em> 6</em>
+		<a href="javascript::getSummary(01_intro);" style="background-color: #A0A0A0;">
+		<em>
+			<image src="assets/img/database.png" width="90" height="90" style="margin-bottom: 35px;"></image>
+		</em>
 		<br>
 		Database
 		</a>
 		</li>
 		<li>
-		<a href="javascript::getSummary(01_intro);">
-		<em> 7</em>
+		<a href="javascript::getSummary(01_intro);" style="background-color: #A0A0A0;">
+		<em>
+			<image src="assets/img/image.png" width="90" height="90" style="margin-bottom: 35px;"></image>
+		</em>
 		<br>
 		Image
 		</a>
 		</li>
 		<li>
-		<a href="javascript::getSummary(01_intro);">
-		<em> 8</em>
+		<a href="javascript::getSummary(01_intro);" style="background-color: #A0A0A0;">
+		<em>
+			<span class="glyphicon glyphicon-hdd">
+			</span> 
+		</em>
 		<br>
 		Store
 		</a>
 		</li>
 		<li>
-		<a href="javascript::getSummary(01_intro);">
-		<em> 9</em>
+		<a href="javascript::getSummary(01_intro);" style="background-color: #6FB3E0;">
+		<em>
+			<image src="assets/img/messagebus1.png" width="90" height="90" style="margin-bottom: 35px;"></image>
+		</em>
 		<br>
 		Message Bus
 		</a>
 		</li>
 		<li>
-		<a href="javascript::getSummary(01_intro);">
-		<em> 10</em>
+		<a href="javascript::getSummary(01_intro);" style="background-color: #6FB3E0;">
+		<em>
+			<image src="assets/img/processes.png" width="90" height="90" style="margin-bottom: 35px;"></image>
+		</em>
 		<br>
 		Processes
 		</a>
 		</li>
 		<li>
-		<a href="javascript::getSummary(01_intro);">
-		<em> 11</em>
+		<a href="javascript::getSummary(01_intro);" style="background-color: #6FB3E0;">
+		<em>
+			<image src="assets/img/monitor.png" width="90" height="90" style="margin-bottom: 35px;"></image>
+		</em>
 		<br>
 		Monitoring
 		</a>
 		</li>
 		<li>
-		<a href="javascript::getSummary(01_intro);">
-		<em> 12</em>
+		<a href="javascript::getSummary(01_intro);" style="background-color: #6FB3E0;">
+		<em>
+			<span class="glyphicon glyphicon-user">
+			</span>
+		</em>
 		<br>
 		Users
 		</a>
diff --git a/v2/src/common/charts.js b/v2/src/common/charts.js
index 527f37d..1552236 100644
--- a/v2/src/common/charts.js
+++ b/v2/src/common/charts.js
@@ -339,7 +339,7 @@ angular.module('compass.charts', [])
                         else if (d.depth == 1)
                             return "assets/img/switch1.png";
                         else
-                            return "assets/img/server.png";
+                            return "assets/img/server1.png";
                     })
                     .attr("width", imgWidth)
                     .attr("height", imgHeight);
@@ -354,7 +354,7 @@ angular.module('compass.charts', [])
                         if (d.depth == 0)
                             return 0;
                         else
-                            return 0.4;
+                            return 0.3;
                     });
 
                 nodeEnter.append("text")