diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index 8e59368..502aca5 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -28,3 +28,8 @@
 .table:last-child {
     margin-bottom: 0px;
 }
+
+/* Allow non-<a> elements to look exactly like <a> elements */
+.hyperlink {
+    @extend a;
+}
diff --git a/app/assets/stylesheets/top4.css.scss b/app/assets/stylesheets/top4.css.scss
index 5be90df..84cef4b 100644
--- a/app/assets/stylesheets/top4.css.scss
+++ b/app/assets/stylesheets/top4.css.scss
@@ -2,15 +2,20 @@
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
 
-.top4.toprow {
-    height: 300px;
+.toprow {
+    // At 992 px the ordinal bar graph drops down
+    @media (min-width: 992px) {
+        height: 300px;
+    }
+
+    .top4, .panel, #top-coders, #top-repos {
+        height: 100%;
+    }
 }
 
 div.top4 {
     margin: auto;
-    .panel {
-        height: 100%;
-    }
+
 
     #top-coders {
         td {
@@ -21,7 +26,7 @@ div.top4 {
             font-size: 20pt;
             text-align: right;
             width: 45px;
-            height: 45px;
+            height: 20%;
         }
         .avatar {
             width: 45px;
@@ -39,7 +44,7 @@ div.top4 {
 
         tr:first-child {
             width: 90px;
-            height: 90px;
+            height: 40%;
             .name {
                 font-size: 15pt;
             }
diff --git a/app/views/bounties/index.html.erb b/app/views/bounties/index.html.erb
index 7b9e53c..ca32f68 100644
--- a/app/views/bounties/index.html.erb
+++ b/app/views/bounties/index.html.erb
@@ -17,33 +17,37 @@
         <th>Repo</th>
         <th>Issue</th>
         <th data-sort-initial-order="desc">Total bounty</th>
-        <th data-sort-initial-order="desc">My bounty</th>
+        <% if coder_signed_in? %>
+            <th data-sort-initial-order="desc">My bounty</th>
+        <% end %>
         </tr>
     </thead>
     <tbody>
         <% @issues.each do |issue| %>
-        <% repo = issue.repository %>
-        <tr id="issue-<%= issue.id %>", issue.repository>
-            <td><%= link_to repo.name, repo %> </td>
-            <td><%= link_to issue.title, issue.github_url %></td>
-            <td class="total-bounty"><%= issue.total_bounty_value %></td>
-            <td>
-            <div class="input-group">
-                <%= form_for find_bounty(issue, current_coder),
-                            url: {action: 'update_or_create'},
-                            method: :post,
-                            remote: true do |f| %>
-                <%= f.hidden_field :issue_id %>
-                <%= f.text_field :absolute_value,
-                  autocomplete: 'off', class: 'form-control text-right'%>
-                <span class='input-group-btn'>
-                    <%= f.submit(value: 'Put', data: {disable_with: 'Saving'},
-                                class: 'btn btn-default') %>
-                </span>
+            <% repo = issue.repository %>
+            <tr id="issue-<%= issue.id %>", issue.repository>
+                <td><%= link_to repo.name, repo %> </td>
+                <td><%= link_to issue.title, issue.github_url %></td>
+                <td class="total-bounty"><%= issue.total_bounty_value %></td>
+                <% if coder_signed_in? %>
+                    <td>
+                        <div class="input-group">
+                            <%= form_for find_bounty(issue, current_coder),
+                                        url: {action: 'update_or_create'},
+                                        method: :post,
+                                        remote: true do |f| %>
+                            <%= f.hidden_field :issue_id %>
+                            <%= f.text_field :absolute_value,
+                              autocomplete: 'off', class: 'form-control text-right'%>
+                            <span class='input-group-btn'>
+                                <%= f.submit(value: 'Put', data: {disable_with: 'Saving'},
+                                            class: 'btn btn-default') %>
+                            </span>
+                            <% end %>
+                        </div>
+                    </td>
                 <% end %>
-            </div>
-            </td>
-        </tr>
+            </tr>
         <% end %>
     </tbody>
     </table>
diff --git a/app/views/top4/show.html.erb b/app/views/top4/show.html.erb
index 5e741b7..443bedb 100644
--- a/app/views/top4/show.html.erb
+++ b/app/views/top4/show.html.erb
@@ -4,8 +4,7 @@
     <div class="page-header text-center">
     <h1>Weekly Overview</h1>
     </div>
-
-    <div class="row">
+    <div class="row toprow">
     <div class="top4 col-md-6">
       <div class="panel panel-default table-responsive scoreboard">
         <table id="top-coders" class="table table-striped">
@@ -78,8 +77,15 @@
 </div>
 
 <script>
+<%
+  repo_urls = {}
+  @top_repos.each do |repo|
+    repo_urls[repo.name] = url_for( repo )
+  end
+%>
 var repos = <%=raw @top_repos.to_json %>;
-var contributors = <%=raw @repo_contributors.to_json %>
+var contributors = <%=raw @repo_contributors.to_json %>;
+var urls_map = <%=raw repo_urls.to_json %>;
 
 for (var i = 0; i < repos.length; i++) {
   repos[i].contributors = contributors[i].slice(0,3);
@@ -110,101 +116,114 @@ var y = d3.scale.linear()
     .domain([0, d3.max(repos, function(d) { return d.score; })]);
 
 var colors = d3.scale.ordinal()
-  .range(['#1976d2','#2196f3', '#64b5f6','#bbdefb'])
-  .domain([0,1,2,3]);
+    .range(['#1976d2','#2196f3', '#64b5f6','#bbdefb'])
+    .domain([0,1,2,3]);
 
 var chart = d3.select("#top-repos")
-  .append("g")
+    .append("g")
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 
 var repo_groups = chart.selectAll("g")
-  .data(repos)
-  .enter().append("g")
-  .attr("transform", function(d) {
-    return "translate(" + x(d.name) + "," + (height - y(d.score)) + ")";
-  });
+    .data(repos)
+    .enter().append("g")
+    .attr("transform", function(d) {
+      return "translate(" + x(d.name) + "," + (height - y(d.score)) + ")";
+    });
 
 repo_groups.append("rect")
-  .attr("class", "repo-bar")
-  .attr("y", function(d) { return y(d.score); })
-  .attr("height", 0)
-  .attr("width", x.rangeBand())
-  .transition().duration(1000)
-  .attr("y", 0)
-  .attr("height", function(d) { return y(d.score); })
+    .attr("class", "repo-bar")
+    .attr("y", function(d) { return y(d.score); })
+    .attr("height", 0)
+    .attr("width", x.rangeBand())
+    .transition().duration(1000)
+    .attr("y", 0)
+    .attr("height", function(d) { return y(d.score); });
 
 repo_groups.append("text")
-  .attr("class", "repo-label")
-  .attr("x", x.rangeBand()/2)
-  .attr("y", ".5em")
-  .attr("opacity", 0)
-  .text(function(d) {return d.score;});
+    .attr("class", "repo-label")
+    .attr("x", x.rangeBand()/2)
+    .attr("y", ".5em")
+    .attr("opacity", 0)
+    .text(function(d) {return d.score;});
 
 var contributor_groups = repo_groups.selectAll(".contributor")
-  .data(function(d) { return d.contributors; })
-  .enter().append("g")
-  .attr("class", "contributor")
-  .attr("transform", "translate(0,"+height+")");
+    .data(function(d) { return d.contributors; })
+    .enter().append("g")
+    .attr("class", "contributor")
+    .attr("transform", "translate(0,"+height+")");
 
 //collapse groups
 repo_groups.each(function(d) {
   var h = d.score;
   d3.select(this).selectAll(".contributor")
-    .attr("transform", "translate(0,"+y(h)+")");
+      .attr("transform", "translate(0,"+y(h)+")");
 });
 
 contributor_groups
-  .append("rect")
-  .attr("class", "contributor-bar")
-  .attr("height", 0)
-  .attr("width", x.rangeBand())
-  .style("fill", function(d, i) { return colors(i); });
+    .append("rect")
+    .attr("class", "contributor-bar")
+    .attr("height", 0)
+    .attr("width", x.rangeBand())
+    .style("fill", function(d, i) { return colors(i); });
 
 contributor_groups
-  .append("text")
-  .attr("class", "contributor-name")
-  .attr("x", x.rangeBand()/2)
-  .attr("y", "1em")
-  .text(function(d) { return d.github_name; });
+    .append("text")
+    .attr("class", "contributor-name")
+    .attr("x", x.rangeBand()/2)
+    .attr("y", "1em")
+    .text(function(d) { return d.github_name; });
 
 repo_groups
-  .on("mouseenter", function(d) {
-    var t = d3.select(this).transition().duration(500);
-    // breakdown
-    t.selectAll(".contributor")
-      .attr("transform", function(d) {
-        return "translate(0,"+(y(d.y0))+")";
-      });
-    t.selectAll(".contributor-bar")
-      .attr("height", function(d) { return y(d.score); });
-    // label
-    t.select(".repo-label")
-      .attr("y", "-.25em")
-      .attr("opacity", 1);
-  })
-  .on("mouseleave", function(d) {
-    var t = d3.select(this).transition().duration(500);
-    var h = d.score;
-    // breakdown
-    t.selectAll(".contributor")
-      .attr("transform", "translate(0,"+y(h)+")");
-    t.selectAll(".contributor-bar")
-      .attr("height", 0);
-    // label
-    t.select(".repo-label")
-      .attr("y", ".5em")
-      .attr("opacity", 0);
-  });
+    .on("mouseenter", function(d) {
+      var t = d3.select(this).transition().duration(500);
+      // breakdown
+      t.selectAll(".contributor")
+        .attr("transform", function(d) {
+          return "translate(0,"+(y(d.y0))+")";
+        });
+      t.selectAll(".contributor-bar")
+        .attr("height", function(d) { return y(d.score); });
+      // label
+      t.select(".repo-label")
+        .attr("y", "-.25em")
+        .attr("opacity", 1);
+    })
+    .on("mouseleave", function(d) {
+      var t = d3.select(this).transition().duration(500);
+      var h = d.score;
+      // breakdown
+      t.selectAll(".contributor")
+        .attr("transform", "translate(0,"+y(h)+")");
+      t.selectAll(".contributor-bar")
+        .attr("height", 0);
+      // label
+      t.select(".repo-label")
+        .attr("y", ".5em")
+        .attr("opacity", 0);
+    })
+    .on("click", function(d){
+          window.location.href = urls_map[d.name];
+    });
 
 var xAxis = d3.svg.axis()
+    .orient("bottom")
     .scale(x)
-    .orient("bottom");
+    .tickFormat(
+      function(d){
+        d3.select(this).on("click",function(){
+          // on click, redirect
+          window.location.href = urls_map[d];
+        })
+        .classed("hyperlink",true);
+        return d;
+      }
+    );
 
 chart.append("g")
     .attr("class", "axis xaxis")
     .attr("transform", "translate(0," + height + ")")
     .call(xAxis)
     .selectAll("text")
-        .attr("dy", "1em");
+    .attr("dy", "1em");
 
 </script>