diff --git a/app/assets/images/timeline/pp.png b/app/assets/images/timeline/pp.png
new file mode 100644
index 00000000..029c483b
Binary files /dev/null and b/app/assets/images/timeline/pp.png differ
diff --git a/app/assets/javascripts/orbitTimeline.js b/app/assets/javascripts/orbitTimeline.js
index cc85edb2..7a11583f 100644
--- a/app/assets/javascripts/orbitTimeline.js
+++ b/app/assets/javascripts/orbitTimeline.js
@@ -26,7 +26,7 @@ var orbitTimeline = function(dom){
 				totalul = $("#scale_wrapper ul").length
 				$(".t_scale").width((totalul*350) + totalyearwidth);
 			}
-			
+			t.bubble_fx();
 			$('.tinycanvas').tinyscrollbar({ 
 				axis: 'x',
 				onMove: function(x){
@@ -38,9 +38,10 @@ var orbitTimeline = function(dom){
 								for(eve in t.events){
 									t.makeBubble(t.events[eve]);
 									totalul = $("#scale_wrapper ul").length
-									$(".t_scale").width((totalul*350) + totalyearwidth);
+									$(".t_scale").width((totalul*360) + totalyearwidth + 314);
 								}
 								$('.tinycanvas').tinyscrollbar_update(x);
+								t.bubble_fx();
 							});
 						}
 					}
@@ -63,16 +64,16 @@ var orbitTimeline = function(dom){
 						t.events.push(bubbleData);
 						if(cur_year != year){
 							year = cur_year;
-							scale.append($("<div class='group year w1 h1 hp vp thmtxt thmc1'>"+(year+1)+"</div><div data-content='"+year+"'></div>"));
+							scale.append($("<div class='group year w1 h1 hp vp thmtxt thmc1'>"+(year+1)+"</div><div class='region_year group' data-content='"+year+"'></div>"));
 						} 
 						if(cur_mon != mon){
 							mon = cur_mon;
 							var yr = scale.find("div[data-content="+year+"]");
-							yr.append($("<div class='group month' data-content='"+cdt+"'><div class='month_heading'>"+t.monthList[parseInt(formname)]+"</div><div class='bubble_list'></div></div>"))					
+							yr.append($("<div class='group month' data-content='"+cdt+"'><div class='month_heading vp hp'>"+t.monthList[parseInt(formname)]+"</div><div class='bubble_list'></div></div>"))					
 						}
 					});
 				});
-				scale.append($("<div class='group year w1 h1 thmtxt thmc1'>"+year+"</div><div data-content='"+(year-1)+"'></div>"));
+				scale.append($("<div class='group year w1 h1 hp vp thmtxt thmc1'>"+year+"</div><div class='region_year group' data-content='"+(year-1)+"'></div>"));
 				t.fromdate = [year,formname-1];
 				if(typeof callbackFn == "function"){
 					callbackFn.call(this,scale);
@@ -101,10 +102,10 @@ var orbitTimeline = function(dom){
 		bubble.show();
 		bubble.click(function(){
 			o.toolPopup({
-				parent: $(this),
-				html : "<div><h3>"+bubbleData.jtitle+"</h3><span><h2>Co-Authors: </h2>"+bubbleData.coauthors+"</span><span><h2>Abstract: </h2>"+bubbleData.abstract+"</span></div>",
-				height: "auto",
-				width:"300px"
+				parent: $(this).parent(),
+				html : "<div class='bubble_content'><h2>"+bubbleData.jtitle+"</h2><h3>Co-Authors</h3><span class='context'>"+bubbleData.coauthors+"</span><h3>Abstract</h3><span class='context'>"+bubbleData.abstract+"</span></div>",
+				height: "392px",
+				width:"310px"
 			});
 		})//.mouseout(function(){t.oapi.toolPopup("destroy");})
 	}
@@ -127,19 +128,19 @@ var orbitTimeline = function(dom){
 						if(cur_year != year){
 							year = cur_year;
 							if(scale.find("div[data-content="+year+"]").length == 0){
-								scale.append($("<div class='scale_region year'>"+(year+1)+"</div><div data-content='"+year+"'></div>"));
+								scale.append($("<div class='group year w1 h1 hp vp thmtxt thmc1'>"+(year+1)+"</div><div class='region_year group' data-content='"+year+"'></div>"));
 							}
 						} 
 						if(cur_mon != mon){
 							mon = cur_mon;
 							var yr = scale.find("div[data-content="+year+"]");
-							yr.append($("<div class='scale_region month' data-content='"+cdt+"'><div class='month_heading'>"+t.monthList[parseInt(formname)]+"</div><div class='bubble_list'></div></div>"))					
+							yr.append($("<div class='group month' data-content='"+cdt+"'><div class='month_heading vp hp'>"+t.monthList[parseInt(formname)]+"</div><div class='bubble_list'></div></div>"))					
 						}
 					});
 				});
 				if(papersArray.length != 0){
 					if(scale.find("div[data-content="+(year-1)+"]").length == 0)
-						scale.append($("<div class='scale_region year'>"+year+"</div><div data-content='"+(year-1)+"'></div>"));
+						scale.append($("<div class='group year w1 h1 hp vp thmtxt thmc1'>"+year+"</div><div class='region_year group' data-content='"+(year-1)+"'></div>"));
 					t.ajaxload = true;
 					t.fromdate = [year,formname-1];
 				}
@@ -149,4 +150,31 @@ var orbitTimeline = function(dom){
 			})
 		
 	}
+	this.bubble_fx = function(){
+		$('.bubble').on({
+				mouseover: function(){
+					$(this)
+						.addClass('hover')
+						.append('<span class="icon-chevron-right" />');
+				},
+				mouseout: function(){
+					$(this)
+						.removeClass('hover')
+						.find('.icon-chevron-right').remove();
+				},
+				click: function(){
+					$(this)
+						.parents('#timeline')
+						.find('.bubble, .date')
+						.removeClass('thmc1 thmtxt');
+					$(this)
+						.addClass('thmc1 thmtxt');
+					$(this)
+						.find('.date')
+						.addClass('thmtxt');
+					$(this)
+						.append('<div class="bubble_arrow"/>');
+				}
+			});
+	}
 }
\ No newline at end of file
diff --git a/app/assets/javascripts/orbitdesktopAPI.js b/app/assets/javascripts/orbitdesktopAPI.js
index a89e0230..ba38b62e 100644
--- a/app/assets/javascripts/orbitdesktopAPI.js
+++ b/app/assets/javascripts/orbitdesktopAPI.js
@@ -172,8 +172,8 @@ var orbitDesktopAPI = function(){
 				settings.height = (!settings.height ? "50px" : settings.height);
 				settings.width = (!settings.width ? "150px" : settings.width);
 				settings.html = (!settings.html ?  "" : settings.html);
-				var leftpos = settings.parent.width();
-				var toolpopup = $("<div class='desktop_toolpopup' style='height:"+settings.height+";width:"+settings.width+"; left:"+leftpos+"px;'><span>"+settings.html+"</span></div>");
+				var leftpos = settings.parent.outerWidth();
+				var toolpopup = $("<div class='desktop_toolpopup' style='height:"+settings.height+";width:"+settings.width+"; left:"+leftpos+"px;'>"+settings.html+"</div>");
 				settings.parent.css("position","relative");
 				settings.parent.prepend(toolpopup);
 				toolpopup.click(function(event){
diff --git a/app/assets/stylesheets/desktopmain.css b/app/assets/stylesheets/desktopmain.css
index f997db40..cf355384 100644
--- a/app/assets/stylesheets/desktopmain.css
+++ b/app/assets/stylesheets/desktopmain.css
@@ -69,9 +69,10 @@ a:focus { outline: none; }
 	min-width: 800px;
 	}
 #side { 
-	width: 156px;
+	width: 60px;
 	height: 516px;
 	position: absolute;
+	margin-right: 96px;
 	top: 120px;
 	left: 0;
 	z-index: 10;
@@ -737,9 +738,9 @@ a:focus { outline: none; }
 	position: absolute;
 	z-index: 10px;
 	display: none;
-	padding: 10px;
+	padding: 12px;
 	cursor: default;
-	background-color: #ccc;
+	background-color: #fff;
 }
 .desktop_toolpopup span {
 	margin: 3px 0 3px 0;
diff --git a/app/assets/stylesheets/orbitTimeline.css.erb b/app/assets/stylesheets/orbitTimeline.css.erb
index 6a0042a1..220d5796 100644
--- a/app/assets/stylesheets/orbitTimeline.css.erb
+++ b/app/assets/stylesheets/orbitTimeline.css.erb
@@ -1,11 +1,43 @@
+#orbit .viewport {
+	background: -1px 4px url(<%= asset_path "timeline/ruler.png" %>) repeat-x;
+}
+.time_nav a, .time_nav_c a {
+	display: block;
+}
+.time_nav {
+	position: absolute;
+	left: -60px;
+	top: 0;
+}
+.time_nav a {
+	line-height: 60px;
+	text-align: center;
+	font-size: 18px;
+}
+.time_nav .active {
+	background-color: #333;
+	color: #fff;
+}
+.time_nav_c {
+	position: absolute;
+	left: -60px;
+	bottom: 0;
+	background-color: #efefef;
+}
+.time_nav_c a {
+	width: 30px;
+	height: 36px;
+	float: left;
+	line-height: 36px;
+	text-align: center;
+}
 .t_scale {
 	height: 516px;
-	background: 0 0 url(<%= asset_path "timeline/ruler.png" %>) repeat-x;
 }
 #scale_wrapper {
 	overflow: hidden;
-	padding: 36px 0 0 12px;
-	background: 0 60px url(<%= asset_path "timeline/date_connector.png" %>) repeat-x;
+	padding: 24px 0 0 12px;
+	background: 0 48px url(<%= asset_path "timeline/date_connector.png" %>) repeat-x;
 }
 #timline_marker {
 	width:100px;
@@ -24,18 +56,26 @@
 .group {
 	margin-right: 48px;
 }
-.month {}
+.month {
+
+}
 .year {
 	font-size: 30px;
 	margin-right: 24px;
 	border-right: solid 12px #efefef;
+	border-left: solid 12px #efefef;
+}
+.region_year {
+	position: relative;
 }
 .month_heading {
 	color: #333;
 	font-family: 'Open sans', sans-serif;
 	font-size: 21px;
-	background-color: #efefef;
 	display: inline-block;
+	margin-top: -10px;
+	padding-top: 22px;
+	background: #efefef 9px 0 url(<%= asset_path "timeline/pp.png" %>) no-repeat;
 }
 
 .bubble_list ul {
@@ -52,4 +92,58 @@
 	font-size: 12px;
 	font-family: Arial, sans-serif;
 	margin-bottom: 12px;
+	position: relative;
+}
+.date {
+	display: block;
+	padding: 8px 0 0 0;
+	color: #999;
+}
+.bubble_arrow {
+	width: 0; 
+	height: 0; 
+	border-top: 14px solid transparent;
+	border-bottom: 14px solid transparent; 
+	border-right: 14px solid #fff;
+	position: absolute;
+	right: -1px;
+	top: 50%;
+	margin-top: -14px;
+	z-index: 99;
+}
+.bubble .icon-chevron-right {
+	position: absolute;
+	top: 0;
+	right: 0;
+	width: 15px;
+	height: 74px;
+	line-height: 74px;
+	font-size: 15px;
+}
+.desktop_toolpopup {
+	z-index: 9;
+	border: solid 1px #ccc;
+	font-family: Arial, sans-serif;
+	color: #666;
+	font-size: 12px;
+}
+.desktop_toolpopup h2 {
+	font-size: 18px;
+	padding: 0 0 20px 0;
+	margin: 0 0 20px 0;
+	border-bottom: solid 1px #d7d7d7;
+	color: #333;
+}
+.desktop_toolpopup h3 {
+	font-size: 15px;
+	padding: 0 0 20px 0;
+	margin: 20px 0 0 0;
+	color: #333;
+}
+.desktop_toolpopup .bubble_content {
+	overflow: hidden;
+	height: 368px;
+}
+.desktop_toolpopup .context {
+	line-height: 1.5em;
 }
\ No newline at end of file
diff --git a/app/views/desktop/orbit.html.erb b/app/views/desktop/orbit.html.erb
index b4c714d4..c73d7526 100644
--- a/app/views/desktop/orbit.html.erb
+++ b/app/views/desktop/orbit.html.erb
@@ -27,13 +27,25 @@
 		</div>
 	</div>
 	<div id="holder">
+		<div class="time_nav">
+			<ul>
+				<li><a href="" class="wh3 hh3 admbg active">2013</a></li>
+				<li><a href="" class="wh3 hh3 admbg">2012</a></li>
+				<li><a href="" class="wh3 hh3 admbg">2011</a></li>
+				<li><a href="" class="wh3 hh3 admbg">2010</a></li>
+				<li><a href="" class="wh3 hh3 admbg">2009</a></li>
+				<li><a href="" class="wh3 hh3 admbg">2008</a></li>
+				<li><a href="" class="wh3 hh3 admbg">2007</a></li>
+				<li><a href="" class="wh3 hh3 admbg">2006</a></li>
+			</ul>
+		</div>
+		<div class="time_nav_c wh3 hh2"><a href=""><span class="icon-chevron-left"></span></a><a href=""><span class="icon-chevron-right"></span></a></div>
 		<div id="" class="ph admbg">
 			<div class="tinycanvas">
 			<div class="scrollbar sb_h vp"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
 			<div class="viewport">
 			
 				<div id="timeline" class="overview">
-				
 				</div>
 			</div>
 		</div>