diff --git a/src/coverage/runtime/outputters/html_report.cr b/src/coverage/runtime/outputters/html_report.cr
index a90fc2d..66e1196 100644
--- a/src/coverage/runtime/outputters/html_report.cr
+++ b/src/coverage/runtime/outputters/html_report.cr
@@ -22,7 +22,7 @@ class Coverage::Outputter::HtmlReport < Coverage::Outputter
     end
 
     def percent_coverage_str
-      "#{(100*percent_coverage).round(2)}%"
+      "#{(100*percent_coverage).round(2)} %"
     end
   end
 
@@ -42,9 +42,20 @@ class Coverage::Outputter::HtmlReport < Coverage::Outputter
 
     def total_percentage
       if total_relevant == 0
-        "100%"
+        100.0
       else
-        (100.0*(total_covered / total_relevant.to_f)).round(2).to_s + "%"
+        (100.0*(total_covered / total_relevant.to_f)).round(2)
+      end
+    end
+
+    def percentage_covered_color(cov)
+      case cov
+      when 90.0..100.0
+        "green"
+      when 80.0..89.99
+        "yellow"
+      else
+        "red"
       end
     end
 
diff --git a/template/index.html.ecr b/template/index.html.ecr
index 18b68ec..dc693ff 100644
--- a/template/index.html.ecr
+++ b/template/index.html.ecr
@@ -9,7 +9,7 @@
       font-family: 'Helvetica Neue', 'Arial', sans-serif;
     }
     iframe {
-      width: calc(100% - 200px);
+      width: calc(100% - 350px);
       height: 100vh;
       margin: 0;
       border: none;
@@ -20,25 +20,43 @@
       box-sizing: border-box;
       float: left;
       height: 100vh;
-      width: 200px;
+      width: 350px;
       display: block;
       overflow: auto;
+      border-right: 1px solid #AAA;
     }
-
     ul {
       margin: 0;
       list-style: none;
       padding: 0;
     }
+    li {
+      padding: 5px;
+      word-break: break-word;
+    }
+    li.odd {
+      background-color: #efefef;
+    }
+    a {
+      font-weight: bold;
+      color: #333;
+      text-decoration: none;
+    }
+    a:hover {
+      text-decoration: underline;
+    }
+    h3 {
+      border-bottom: 1px solid #aaa;
+    }
   </style>
 </head>
 <body>
   <nav>
-    <a href="summary.html" target="iframe">Index</a>
+    <a href="summary.html" target="iframe">◄ Back to Index</a>
     <h3>Files</h3>
     <ul>
-      <%- @covered_files.each do |file| -%>
-        <li><a href="<%=file.md5%>.html" target="iframe"><%=file.filename%></li>
+      <%- @covered_files.each_with_index do |file, index| -%>
+        <li class="<%= index.odd? ? "odd" : "even" %>"><a href="<%=file.md5%>.html" target="iframe"><%=file.filename%></li>
       <%- end -%>
     </ul>
   </nav>
diff --git a/template/summary.html.ecr b/template/summary.html.ecr
index f3bac36..012e23d 100644
--- a/template/summary.html.ecr
+++ b/template/summary.html.ecr
@@ -9,8 +9,18 @@
       font-family: 'Helvetica Neue', 'Arial', sans-serif;
     }
 
+    body {
+      padding: 20px;
+    }
+
     table {
       margin: auto;
+      border: 1px solid #AAA;
+      width: 100%;
+    }
+
+    thead, tfoot {
+      background-color: #ddd;
     }
 
     th {
@@ -18,18 +28,43 @@
     }
 
     th,td {
-      padding: 0.2em, 1em;
+      padding: 5px 20px;
     }
     tr {
       border-bottom: solid 1px black;
     }
 
+    tr.odd {
+      background-color: #efefef;
+    }
+
+    a {
+      font-weight: bold;
+      color: #333;
+      text-decoration: none;
+    }
+    a:hover {
+      text-decoration: underline;
+    }
+    .bold {
+      font-weight: bold;
+    }
+    .green {
+      color: #090;
+    }
+    .yellow {
+      color: #ddaa00;
+    }
+    .red {
+      color: #900;
+    }
+
   </style>
 </head>
 <body>
   <h1>Covering report</h1>
   <hr>
-  <table>
+  <table cellspacing="0">
     <thead>
       <th>File</th>
       <th>Relevant lines</th>
@@ -37,19 +72,19 @@
       <th>Percentage covered</th>
     </thead>
     <tbody>
-      <%- @covered_files.each do |file| -%>
-      <tr>
+      <%- @covered_files.each_with_index do |file, index| -%>
+      <tr class="<%= index.odd? ? "odd" : "even" %>">
         <td><a href="<%=file.md5%>.html"><%=file.filename%></a></td>
         <td><%=file.relevant_lines%></td>
         <td><%=file.covered_lines%></td>
-        <td><%=file.percent_coverage_str%></td>
+        <td class="<%= percentage_covered_color(cov: file.percent_coverage * 100) %> bold"><%=file.percent_coverage_str%></td>
       </tr>
       <%- end -%>
       <tfoot>
         <th>TOTAL: </th>
         <th><%= total_relevant %></th>
         <th><%= total_covered %></th>
-        <th><%= total_percentage %></th>
+        <th class="<%= percentage_covered_color(cov: total_percentage) %>"><%= total_percentage.to_s %> %</th>
       </tfoot>
     </tbody>
   </table>

File	Relevant lines	Percentage covered
<%=file.filename%>	<%=file.relevant_lines%>	<%=file.covered_lines%>	<%=file.percent_coverage_str%>	<%=file.percent_coverage_str%>
TOTAL:	<%= total_relevant %>	<%= total_covered %>	<%= total_percentage %>	<%= total_percentage.to_s %> %