diff --git a/static/css/style.css b/static/css/style.css
index 173468e..342adc0 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -5,7 +5,7 @@ h1 {
   letter-spacing: -1px;
 }
 p, li, blockquote {
-  font-size: 18px;
+  font-size: 27px;
   font-weight: 200;
   line-height: 27px;
   color: inherit;
@@ -41,3 +41,12 @@ table.table tbody td {
     position: relative;
     right: -15px;
 }
+.modal .tablechart {
+    right: -28px;
+}
+.community-area .modal .jqplot-xaxis, .community-area .modal .jqplot-yaxis {
+    color: #000;
+}
+.modal-header {
+    color: #2F4F4F;
+    background-color: #EE7600;
diff --git a/templates/index.html b/templates/index.html
index aa31218..588a37f 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -21,10 +21,10 @@
     <script type="text/javascript" src="static/js/tablechart/jquery.tablechart.js"></script>
     <script>
     $(document).ready(function() {
-        $('.community-data').tablechart({
+        var options = {
             height: 50,
             plotOptions: {
-                seriesColors: [ '#999999' ],
+                seriesColors: [ '#9999ff' ],
                 gridPadding : {top:0, bottom: 0, right:0, left:0},
                 legend: {
                     show: false
@@ -43,12 +43,12 @@
                     yaxis: {
                         min: {{ chart_min }},
                         max: {{ chart_max }},
-                        numberTicks: 3
+                        numberTicks: 5
                     },
                     xaxis: {
                         min: 1999,
                         max: 2009,
-                        numberTicks: 10
+                        numberTicks: 8
                     }
                 },
                 highlighter: {
@@ -57,6 +57,14 @@
                     tooltipLocation: 'n'
                 }
             }
+        };
+        $('.community-data').tablechart(options);
+        options.height=200;
+        options.width=500;
+        $(".modal").one("shown",function() {
+            var community_area = $(this).parent();
+            var table = community_area.find("table").clone();
+            table.appendTo($(this)).tablechart(options);
         });
     });
     </script>
@@ -71,7 +79,19 @@ <h1>Birth rates by community area</h1>
     <div class="row-fluid">
         {% for row in table %}
         <div class="community-area">
-            <h2>{{ row.0.title() }}</h2>
+            <h2>
+                {{ row.0.title() }}
+                <a href="#modal-{{ loop.index }}" data-toggle="modal">enlarge</a>
+            </h2>
+            <div class="modal hide fade" id="modal-{{ loop.index }}" data-backdrop="">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+                    <h3>{{ row.0.title() }}</h3>
+                </div>
+                <div class="modal-body">
+
+                </div>
+            </div>
             <table class="community-data table">
                 <thead>
                     <tr>