diff --git a/public/grid/index.html b/public/grid/index.html
index 6e301748..ba9f1774 100644
--- a/public/grid/index.html
+++ b/public/grid/index.html
@@ -74,6 +74,7 @@ <h2 class="text-center">
     <script id="state-template" type="text/x-handlebars-template">
       <tr>
         <td> <a href="{{stateHref}}"> {{state}} </a> </td>
+        <td> {{state_score}} </td>
         {{#each this.datasets}}
         <td class="grade grade-{{grade}}">
           <a href="{{datasetHref}}">
@@ -86,6 +87,7 @@ <h2 class="text-center">
     <script id="dataset-template" type="text/x-handlebars-template">
       <tr>
         <th>State</th>
+        <th>Score</th>
         {{#each this}}
         <th><span><a href="{{datatypeHref}}">{{datatype}}</a></span></th>
         {{/each}} </tr>
diff --git a/public/grid/js/grid.js b/public/grid/js/grid.js
index d45e1d3f..3a031fe7 100644
--- a/public/grid/js/grid.js
+++ b/public/grid/js/grid.js
@@ -159,11 +159,19 @@ function mapInfo(data, tabletop) {
 
      setupDatatypes(allTypes);
 
+     /* Reverse the state abbreviations' keys and values. */
+     reversed = {};
+     for(var key in state_abbreviations){
+         reversed[state_abbreviations[key]] = key;
+     }
+     state_abbreviations = reversed;
+
      var rows = _.chain(rawData)
          .groupBy("State")
          .map(function(datasets, state) {
              var row = {
                  state: state,
+                 state_score: place_scores[state_abbreviations[state]] + "%",
                  state: datasets[0]["State"],
                  stateHref: URI().filename("datasets.html").search({
                      "state": state
@@ -201,9 +209,7 @@ function mapInfo(data, tabletop) {
              var html = stateTemplate(row);
              $("#states").append(html);
          })
-
      .value();
-
      $('[data-toggle="tooltip"]').tooltip()
  }