diff --git a/Support/css/default/print.css b/Support/css/default/print.css
index 90b1ccd..ba53871 100644
--- a/Support/css/default/print.css
+++ b/Support/css/default/print.css
@@ -11,6 +11,7 @@
 	background-color: #FFF;
 	display: block;
 	float: left;
+	padding: 3px;
 	padding-right: 1em;
 }
 
@@ -23,6 +24,7 @@
 }
 
 #todo_list a {
+	color: #000;
 	text-decoration: none;
 }
 
@@ -30,10 +32,51 @@
 	color: #000;
 }
 
-#todo_list table td {
+#todo_list td {
+	position: relative;
 	text-align: left;
+	vertical-align: top;
+	
 }
 
 #todo_list #toplink {
 	display: none;
+}
+
+#todo_list .box {
+	padding-right: 0.5em;
+	display: inline-block;
+	border-radius: 2px;
+	border: 1px solid #000;
+	box-shadow: inset 0px 1px 2px #000;
+	margin-left: 8px;
+	margin-right: 16px;
+	padding: 0 !important;
+	opacity: 0.6;
+}
+
+#todo_list table .box {
+	position: absolute;
+	top: 0.2em;
+	width: 10px;
+	height: 10px;
+}
+
+#todo_list .counters .box {
+	border: 0;
+	box-shadow: none;
+	padding: 0;
+	margin: 0;
+	margin-right: 3px;
+}
+#todo_list .todo_comment {
+	display: inline-block;
+	margin-left: 30px;
+}
+
+#info_no_results,
+#todo_list table th,
+label,
+input {
+	display:none;
 }
\ No newline at end of file
diff --git a/Support/css/default/style.css b/Support/css/default/style.css
index 8fc9267..d2a60f3 100644
--- a/Support/css/default/style.css
+++ b/Support/css/default/style.css
@@ -1,30 +1,121 @@
+#tm_webpreview_content {
+	background: #aaa !important;	
+}
+
 #todo_list table {
 	clear: both;
-	border-collapse: collapse;
+	border-spacing: 0 1px;
+	width: 100%;
 }
 
 #todo_list h3 {
+	font-family: "Helvetica Neue";
+	font-size: 2em;
+	text-shadow: 0 1px 1px #f1f1f1;
 	clear: both;
 }
 
+#current_dir_container {
+	text-shadow: 0 1px 1px #f1f1f1;
+}
+
 #todo_list_list td, #todo_list th {
-	font-family: monospace;
+	font-family: "Helvetica Neue";
+	font-size: 1.2em;
+}
+
+#todo_list a {
+	color: #333;
+	text-decoration: none;
+}
+
+#todo_list a:hover {
+	border-bottom: 1px solid #333;
 }
 
+
 #todo_list th {
 	white-space: nowrap;
-	border-bottom: 1px solid #000;
 	text-align: left;
 }
 
 #todo_list th a {
+	color: #555;
 	text-decoration: none;
 }
 
+#todo_list .todo input {
+	float: left;
+}
+
 #todo_list td {
+	position:relative;
 	font-size: 9pt;
-	padding: 0.5ex 1ex 0.5ex 0;
 	vertical-align: top;
+	border-radius:3px;
+	border: 1px solid #fff;
+	padding: 3px 2px;
+	background: #f7f7f7;
+	background-image: -webkit-linear-gradient(#fafafa, #f1f1f1);
+	overflow: hidden;
+	text-shadow: 0 1px 1px #fff;
+	line-height: 1.8em;
+}
+
+#todo_list .comment {
+	border-top-right-radius: 0px;
+	border-bottom-right-radius: 0px;
+	border-right: 1px solid #ddd;
+	margin-left: -2px;
+	box-shadow: 0px 1px 2px #444;	
+}
+
+#todo_list .file {
+	border-top-left-radius: 0px;
+	border-bottom-left-radius: 0px;
+	margin-left: -2px;
+	box-shadow: 0px 1px 2px #444;
+	padding: 0px 8px;
+}
+
+#todo_list .box {
+	display: inline-block;
+	border-radius: 2px;
+	border: 1px solid #000;
+	box-shadow: inset 0px 1px 2px #000;
+	margin-left: 8px;
+	margin-right: 16px;
+	padding: 0 !important;
+	opacity: 0.6;
+}
+
+#todo_list .counters .box {
+	min-width: 2em;
+	padding-left: 3px;
+	padding-right: 3px;
+	margin-left: 8px;
+	margin-right: 8px;
+	text-shadow: 0 1px 1px #333;
+	
+}
+
+#todo_list table .box {
+	position: absolute;
+	top: 30%;
+	width: 10px;
+	height: 10px;
+}
+
+#todo_list .todo_comment {
+	display: inline-block;
+	margin-left: 40px;
+}
+
+#todo_list .item_line {
+	font-family: Menlo;
+	vertical-align: middle;
+	font-size: 7pt;
+	padding-left: 8px;
 }
 
 #todo_list tr.alternate {
@@ -43,27 +134,38 @@
 }
 
 #todo_list .counters {
+	background-image: -webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,rgba(255,255,255,0.7)),color-stop(100%,rgba(201,201,201,0.7)));
+	background-image: -webkit-linear-gradient(top,rgba(255,255,255,0.7),rgba(201,201,201,0.7));
+	border-radius: 3px;
+	box-shadow: 1px 0 0 rgba(255,255,255,0.15),-1px 0 0 rgba(255,255,255,0.15),0 1px 0 rgba(255,255,255,0.2);
+	line-height: 1.8em;
 	padding: 0;
 	overflow: hidden;
+	box-shadow: 0px 1px 2px #444;
+	
 }
 
 #todo_list .counters li {
 	display: block;
 	float: left;
 	padding: 1ex;
-	border: 1px solid #444;
 	border-collapse: collapse;
 	min-width: 6em;
 	text-align: center;
 }
 
 #todo_list .counters li a {
-	color: #FFF;
+	color: #333;
+	text-shadow: 0 1px 1px #f1f1f1;
+}
+
+#todo_list .counters .alignright {
+	float: right;
 }
 
 #todo_list .bg_total, #todo_list #total_count {
-	color: #FFF;
-	background-color: #000;
+	color: #000;
+	text-shadow: 0 1px 1px #f1f1f1;
 }
 
 #todo_list td.type {
@@ -85,26 +187,10 @@
 	right: 1em;
 }
 
-label.filter {
-  position: absolute;
-  padding-top: 4px;
+label {
+	text-shadow: 0 1px 1px #f1f1f1;
 }
 
 label.disabled {
   opacity: .66;
-}
-
-#filter, #trigger_relative_paths {
-	margin-left: 4em;
-}
-
-fieldset {
-	clear: both;
-}
-fieldset p {
-	margin: 0;
-}
-
-fieldset p ~ p {
-	margin-top: 1ex;
 }
\ No newline at end of file
diff --git a/Support/template_head.rhtml b/Support/template_head.rhtml
index 0291193..9b2dc77 100644
--- a/Support/template_head.rhtml
+++ b/Support/template_head.rhtml
@@ -13,8 +13,9 @@
 <div id="todo_list">
 	<ul class="counters">
 		<% tags.each do |tag| %>
-			<li id="counter_tab_<%= tag[:label].sub(/\W/, '_') %>" class="bg_<%= tag[:label].sub(/\W/, '_') %>" <% if tag[:trim_if_empty] then %>style="display: none;"<% end %>><a onclick="goTo('jump_to_<%= tag[:label].sub(/\W/, '_') %>'); return false;" href="#jump_to_<%= tag[:label].sub(/\W/, '_') %>" accesskey="<%= tag[:label][0..0] %>"><%= tag[:label] %></a>: <span id="count_<%= tag[:label].sub(/\W/, '_') %>">0</span></li>
+			<li id="counter_tab_<%= tag[:label].sub(/\W/, '_') %>" <% if tag[:trim_if_empty] then %>style="display: none;"<% end %>><div class="box bg_<%= tag[:label] %>"><span id="count_<%= tag[:label].sub(/\W/, '_') %>">0</span></div><a onclick="goTo('jump_to_<%= tag[:label].sub(/\W/, '_') %>'); return false;" href="#jump_to_<%= tag[:label].sub(/\W/, '_') %>" accesskey="<%= tag[:label][0..0] %>"><%= tag[:label] %></a></li>
 		<% end %>
-		<li id="counter_tab_total" class="bg_total %>"><a href="#" onclick="return false;">Total</a>: <span id="total_count">counting…</span></li>
+		<li id="counter_tab_total"><div class="box bg_total"><span id="total_count">counting…</span></div><a href="#" onclick="return false;">Total</a></li>
+		<li class="alignright"><input type="checkbox" id="trigger_relative_paths" <% if project_dir == "" %>disabled="true"<% end %>> <label for="trigger_relative_paths" <% if project_dir == "" %>class="disabled"<% end %> title="Show relative file paths for tasks.">Paths</label>&nbsp;&nbsp;<input type="search" value="" id="filter" size="30" results="10" placeholder="Filter&hellip;" title="Filter tasks&hellip;"></li>
 	</ul>
 	<p id="current_dir_container" style="clear: both;">Scanning directory: <span id="current_dir"></span></p>
diff --git a/Support/template_item.rhtml b/Support/template_item.rhtml
index b102e97..5bb3cc2 100644
--- a/Support/template_item.rhtml
+++ b/Support/template_item.rhtml
@@ -1,9 +1,14 @@
 <tr id="item_<%= tag[:label] %>_<%= match[:index] %>">
-	<td class="file">
-		<a title="<%= html_escape(match[:content]) %>" href="<%= TextMate.file_link(match[:file], match[:line]) %>">
-		<span class="item_relative_path todo_hidden"><%= "#{html_escape(match[:file].sub(Regexp.new(project_dir+"/?"), ''))}" %></span><span class="item_filename"><%= "#{html_escape(File.basename(match[:file]))}" %></span></a> (<%= match[:line] %>)
+	<td class="comment <%= tag[:label] %>">
+		<div class="todo">
+			<div class="box bg_<%= tag[:label] %>"></div>
+			<span class="todo_comment"><%= match[:match] %></span>
+		</div>
 	</td>
-	<td class="comment">
-		<%= match[:match] %>
+	<td class="file">
+		<div class="todo">
+			<a title="<%= html_escape(match[:content]) %>" href="<%= TextMate.file_link(match[:file], match[:line]) %>">
+			<span class="item_relative_path todo_hidden"><%= "#{html_escape(match[:file].sub(Regexp.new(project_dir+"/?"), ''))}" %></span><span class="item_filename"><%= "#{html_escape(File.basename(match[:file]))}" %></span> <span class="item_line"><%= match[:line] %></span></a>
+		</div>
 	</td>
 </tr>
diff --git a/Support/template_tail.rhtml b/Support/template_tail.rhtml
index 4f0107c..eb1767d 100644
--- a/Support/template_tail.rhtml
+++ b/Support/template_tail.rhtml
@@ -1,16 +1,10 @@
-	<script type="text/javascript" charset="utf-8">
-		document.getElementById("current_dir_container").style.display = "none";
-		var box = document.getElementById("total_count");
-		box.innerHTML = "<%= total %>";
-	</script>
-	
-	<fieldset>
-		<legend>Options</legend>
-		<p><label class="filter">Filter:</label><input type="text" value="" id="filter" size="40"></p>
-		<p><input type="checkbox" id="trigger_relative_paths" <% if project_dir == "" %>disabled="true"<% end %>> <label for="trigger_relative_paths" <% if project_dir == "" %>class="disabled"<% end %>>Show relative paths</label> </p>
-	</fieldset>
-	
-	<% tags.each do |tag| %>
+<script type="text/javascript" charset="utf-8">
+	document.getElementById("current_dir_container").style.display = "none";
+	var box = document.getElementById("total_count");
+	box.innerHTML = "<%= total %>";
+</script>
+
+<% tags.each do |tag| %>
 	<% next if tag[:matches].length == 0 %>
 		
 		<% tag[:matches].each do |match| %>
@@ -23,8 +17,8 @@
 		<h3 id="heading_<%= tag[:label] %>"><a id="jump_to_<%= tag[:label] %>"><%= tag[:label] %></a></h3>
 		<table class="todo_content sortable" id="table_<%= tag[:label] %>">
 			<tr>
-				<th>File</th>
-				<th>Comment</th>
+				<th>Sort</th>
+				<th>Files</th>
 			</tr>
 
 			<% tag[:matches].each do |match| %>
@@ -92,4 +86,5 @@
 			el.className = "item_relative_path" + (on ? "" : " todo_hidden");
 		};
 	}
+	
 </script>
\ No newline at end of file