diff --git a/web/src/main/webapp/features/agentInfo/agentInfoMain.html b/web/src/main/webapp/features/agentInfo/agentInfoMain.html
index a46b7625c851..1601ee681f2e 100644
--- a/web/src/main/webapp/features/agentInfo/agentInfoMain.html
+++ b/web/src/main/webapp/features/agentInfo/agentInfoMain.html
@@ -3,21 +3,25 @@
     <div ng-include=" 'warning' "></div>
     <div ng-include=" 'info' "></div>
     <div ng-include=" 'loading' "></div>
-    <div style="padding-top:20px;">
-        <div>
-            <div>
-                <div class="datetimepicker input-group input-group-sm date" style="float:left;width:189px;margin-right:4px;">
-                     <input id="target-picker" type="text" class="form-control">
-                     <span class="input-group-btn">
-                        <button class="btn btn-default btn-success" ng-click="selectTime()">
-                            <span class="glyphicon glyphicon-search"></span>
-                        </button>
-                     </span>
-                </div>
-                <button type="button" class="btn btn-default btn-success btn-sm" ng-click="zoomInTimeSlider()" style="float:left;margin-right:4px"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
-                <button type="button" class="btn btn-default btn-success btn-sm" ng-click="zoomOutTimeSlider()" style="float:left;margin-right:4px"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
-            </div>
-        </div>
+    <div class="slider">
+		<div class="slider-command">
+			<button type="button" class="btn btn-default btn-success btn-sm" ng-click="moveHead()" style="margin-right:22px;"><span class="glyphicon glyphicon-fast-forward"></span></button>
+			<button type="button" class="btn btn-default btn-success btn-sm" ng-click="moveNext()"><span class="glyphicon glyphicon-forward"></span></button>
+			<button type="button" class="btn btn-default btn-success btn-sm" ng-click="movePrev()"><span class="glyphicon glyphicon-backward"></span></button>
+
+			<button type="button" class="btn btn-default btn-success btn-sm" ng-click="zoomOutTimeSlider()" style="margin-right:4px;"><span class="glyphicon glyphicon-minus"></span></button>
+			<button type="button" class="btn btn-default btn-success btn-sm" ng-click="zoomInTimeSlider()"><span class="glyphicon glyphicon-plus"></span></button>
+
+			<div class="datetimepicker input-group input-group-sm date" style="width:189px;margin-right:4px;float:right">
+				 <input id="target-picker" type="text" class="form-control">
+				 <span class="input-group-btn">
+					<button class="btn btn-default btn-success" ng-click="selectTime()">
+						<span class="glyphicon glyphicon-search"></span>
+					</button>
+				 </span>
+			</div>
+		</div>
+		<span>Timeline</span>
         <svg id="timeSlider" class="timeSlider" width="100%" height="90px" style="margin-top:6px"></svg>
     </div>
     <div class="panel panel-info" ng-show="showEventInfo">
@@ -44,12 +48,14 @@ <h3 class="panel-title">{{eventInfo.eventTypeDesc}} - Event <span class="glyphic
         </div>
     </div>
     <div>
-        <h3>Information <span style="float:right;font-size:16px;" class="label label-default">{{formatDate(selectTime)}}</span></h3>
-
+        <h3 style="text-align:right"><span style="font-size:16px;" class="label label-default">{{formatDate(selectTime)}}</span></h3>
         <div class="row">
             <div class="col-md-12">
-                <table class="table table-striped table-condensed" style="font-size:12px;">
+                <table class="table table-condensed" style="font-size:12px;margin-bottom:0px">
                     <tbody>
+					<tr>
+						<td colspan="4"><h4>Information</h4></td>
+					</tr>
                     <tr>
                         <td class="col-md-2 text-right"><strong>Application Name</strong></td>
                         <td class="col-md-3 text-left" ng-show="isSameApplication()">{{agent.applicationName}}</td>
@@ -101,11 +107,11 @@ <h3>Information <span style="float:right;font-size:16px;" class="label label-def
                 </table>
             </div>
         </div>
-        <div ng-show="showDetail">
-            <h3>Detail</h3>
+        <div ng-show="showDetail" style="margin-top:4px;">
+			<div style="position:relative;width:0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #BBB5B5;"></div>
             <div class="row">
                 <div class="col-md-12">
-                    <table class="table table-condensed table-bordered" style="font-size:12px;">
+                    <table class="table table-condensed table-bordered" style="font-size:12px;margin-bottom:20px;">
                         <tbody>
                         <tr class="active">
                             <td class="col-md-2 text-right"><strong>Server Info</strong></td>
@@ -114,7 +120,7 @@ <h3>Detail</h3>
                                 <span ng-hide="agent.serverMetaData.serverInfo.length">N/A</span>
                             </td>
                         </tr>
-                        <tr>
+                        <tr style="background-color:#FFF;">
                             <td class="text-right"><strong>JVM Arguments</strong></td>
                             <td class="text-left">
                                 <div style="overflow:auto;max-height:200px;" ng-show="agent.serverMetaData.vmArgs.length">
@@ -153,7 +159,7 @@ <h3>Detail</h3>
             </div>
         </div>
     </div>
-    <div>
+    <div class="chart-collection">
         <div class="row">
             <div class="col-md-6">
                 <h4><span class="glyphicon glyphicon-question-sign heapTooltip" style="cursor:pointer;float:right;"></span> {{memoryGroup[0].title}}</h4>
diff --git a/web/src/main/webapp/features/agentList/agentList.html b/web/src/main/webapp/features/agentList/agentList.html
index 139bd212eeb6..4538b9c8affd 100644
--- a/web/src/main/webapp/features/agentList/agentList.html
+++ b/web/src/main/webapp/features/agentList/agentList.html
@@ -1,7 +1,8 @@
 <div class="agent-list-directive">
-    <div class="control-group" ng-class="{success: searchAgents.name}">
-        <input type="text" ng-model="searchAgents.name" class="searchbox" placeholder="Search Agents"><span class="glyphicon glyphicon-question-sign agentListTooltip" style="position:absolute;right:2px;top:5px;cursor:pointer;font-size:14px;"></span>
-    </div>
+	<div class="searchbox">
+		<input type="text" ng-model="searchAgents.name" placeholder="Search Agents"/>
+		<span class="glyphicon glyphicon-question-sign agentListTooltip"></span>
+	</div>
     <ul class="nav nav-list">
         <li ng-repeat="(key, group) in agentGroup">
             <h5 class="nav-header" tooltip="{{key}}" tooltip-placement="bottom">
diff --git a/web/src/main/webapp/lib/css/pinpoint.css b/web/src/main/webapp/lib/css/pinpoint.css
index 7861f3c57a19..56fb2bb16f45 100644
--- a/web/src/main/webapp/lib/css/pinpoint.css
+++ b/web/src/main/webapp/lib/css/pinpoint.css
@@ -239,8 +239,8 @@ canvas {outline:none}
 	padding-left: 20px;
 }
 .inspector-container {
-    width:95%;
-    position:relative;
+    margin-left: 12px;
+    margin-right: 22px;
 }
 .sidebar-spy {
     position: absolute;
@@ -257,18 +257,54 @@ canvas {outline:none}
     -moz-border-radius: 0;
     border-radius: 0;
 }
+.inspector-container table tr:nth-child(odd) {
+    background-color: #F3F3F3;
+}
+.inspector-container table tr:nth-child(even) {
+    background-color: #EDEDED;
+}
+.inspector-container table {
+    border: 1px solid #ECECEC;
+}
+.inspector-container table td {
+    border-top: none !important;
+}
+.inspector-container h4 {
+    color: #55B951 !important;
+    font-size: 12px !important;
+    margin: 2px !important;
+}
+.inspector-container .chart-collection {
+    border: 1px solid #ECECEC;
+    padding: 8px;
+    margin-top: 20px;
+}
 
 .main-spy {
-    margin-left: 250px;
+    margin-left: 238px;
     height: 100%;
-    overflow: auto;
+    overflow-y: auto;
+    overflow-x: hidden;
 }
 .inspector-datepicker {
     width: 190px !important;
 }
 
 .agent-list-directive .searchbox {
-    width: 100%;
+    height: 38px;
+    border-bottom: 1px solid #EDEDED;
+    background-color: #F5F5F5;
+}
+.agent-list-directive .searchbox input {
+    width: 200px;
+    margin: 5px 0px 0px 8px;
+}
+.agent-list-directive .searchbox span {
+    top: 11px;
+    right: 6px;
+    cursor:pointer;
+    position: absolute;
+    font-size: 14px;
 }
 
 .agent-list-directive .nav li > a:hover,
@@ -291,7 +327,7 @@ canvas {outline:none}
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    -o-text-overow: ellipsis;
+    border-radius: 0px;
 }
 
 .agent-list-directive .nav-list li > a {
@@ -352,6 +388,24 @@ canvas {outline:none}
     border-top-right-radius: 0px;
     border-top-left-radius: 0px;
 }
+.inspector-container .slider-command {
+    height: 38px;
+    padding: 4px 0px 4px 12px;
+    text-align: right;
+    margin-left:-12px;
+    margin-right:-22px;
+    margin-bottom: 20px;
+    background-color: #F5F5F5;
+}
+.inspector-container .slider-command > button {
+    float:right;
+}
+.inspector-container .slider > span {
+    float: left;
+    font-size: 12px;
+    line-height: 2;
+    margin-bottom:-26px;
+}
 .timeSlider .hide {
     display: none;
 }
diff --git a/web/src/main/webapp/styles/inspector.css b/web/src/main/webapp/styles/inspector.css
index dded1d82fd1b..26821730dd86 100644
--- a/web/src/main/webapp/styles/inspector.css
+++ b/web/src/main/webapp/styles/inspector.css
@@ -1,6 +1,6 @@
 .inspector-container {
-    width:95%;
-    position:relative;
+    margin-left: 12px;
+    margin-right: 22px;
 }
 .sidebar-spy {
     position: absolute;
@@ -17,18 +17,54 @@
     -moz-border-radius: 0;
     border-radius: 0;
 }
+.inspector-container table tr:nth-child(odd) {
+    background-color: #F3F3F3;
+}
+.inspector-container table tr:nth-child(even) {
+    background-color: #EDEDED;
+}
+.inspector-container table {
+    border: 1px solid #ECECEC;
+}
+.inspector-container table td {
+    border-top: none !important;
+}
+.inspector-container h4 {
+    color: #55B951 !important;
+    font-size: 12px !important;
+    margin: 2px !important;
+}
+.inspector-container .chart-collection {
+    border: 1px solid #ECECEC;
+    padding: 8px;
+    margin-top: 20px;
+}
 
 .main-spy {
-    margin-left: 250px;
+    margin-left: 238px;
     height: 100%;
-    overflow: auto;
+    overflow-y: auto;
+    overflow-x: hidden;
 }
 .inspector-datepicker {
     width: 190px !important;
 }
 
 .agent-list-directive .searchbox {
-    width: 100%;
+    height: 38px;
+    border-bottom: 1px solid #EDEDED;
+    background-color: #F5F5F5;
+}
+.agent-list-directive .searchbox input {
+    width: 200px;
+    margin: 5px 0px 0px 8px;
+}
+.agent-list-directive .searchbox span {
+    top: 11px;
+    right: 6px;
+    cursor:pointer;
+    position: absolute;
+    font-size: 14px;
 }
 
 .agent-list-directive .nav li > a:hover,
@@ -51,7 +87,7 @@
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    -o-text-overow: ellipsis;
+    border-radius: 0px;
 }
 
 .agent-list-directive .nav-list li > a {
@@ -112,6 +148,24 @@
     border-top-right-radius: 0px;
     border-top-left-radius: 0px;
 }
+.inspector-container .slider-command {
+    height: 38px;
+    padding: 4px 0px 4px 12px;
+    text-align: right;
+    margin-left:-12px;
+    margin-right:-22px;
+    margin-bottom: 20px;
+    background-color: #F5F5F5;
+}
+.inspector-container .slider-command > button {
+    float:right;
+}
+.inspector-container .slider > span {
+    float: left;
+    font-size: 12px;
+    line-height: 2;
+    margin-bottom:-26px;
+}
 .timeSlider .hide {
     display: none;
 }