diff --git a/web/css/style.css b/web/css/style.css
index aa6672b..89b6931 100644
--- a/web/css/style.css
+++ b/web/css/style.css
@@ -4,6 +4,22 @@
     color: #62AC5B !important;
     font-family: "Exo 2" !important;
 }
+.charts {
+    width:100%;
+    border:4px double black;
+}
+.charted {
+    width:5em;
+    height:5em;
+}
+#map {
+    height:45em;
+    background-image: url(../images/placeholdermap.jpg);
+    background-size: cover;
+    width:97%;
+    margin-right:auto;
+    margin-left:auto;
+}
 ::-webkit-input-placeholder, :-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder {
     color: #999999;
 }
diff --git a/web/images/placeholdermap.jpg b/web/images/placeholdermap.jpg
new file mode 100644
index 0000000..a247bcf
Binary files /dev/null and b/web/images/placeholdermap.jpg differ
diff --git a/web/pages/about.html b/web/pages/about.html
index 0955985..9e7dab4 100644
--- a/web/pages/about.html
+++ b/web/pages/about.html
@@ -1,4 +1,91 @@
+<script type="text/javascript">
+    var chart1 = c3.generate({
+        colors: {
+            data1: '#1F77B4',
+            data2: '#62AC5B',
+        },
+        data: {
+            columns: [
+                ['US High School/Middle School ', 33.33],
+                ['Non-US/Non-Student', 66.66],
+            ],
+            type: 'donut',
+            onclick: function(d, i) {
+                console.log("onclick", d, i);
+            },
+            onmouseover: function(d, i) {
+                console.log("onmouseover", d, i);
+            },
+            onmouseout: function(d, i) {
+                console.log("onmouseout", d, i);
+            }
+        },
+        donut: {
+            title: "Competitors"
+        },
+        bindto: "#chart1"
+    });
+    /*var chart2 = c3.generate({
+        colors: {
+            data1: '#1F77B4',
+            data2: '#62AC5B',
+        },
+        data: {
+            columns: [
+                ['Solved ', 33.33],
+                ['Unsolved', 66.66],
+            ],
+            type: 'donut',
+            onclick: function(d, i) {
+                console.log("onclick", d, i);
+            },
+            onmouseover: function(d, i) {
+                console.log("onmouseover", d, i);
+            },
+            onmouseout: function(d, i) {
+                console.log("onmouseout", d, i);
+            }
+        },
+        donut: {
+            title: "Silly Ceasar"
+        },
+        bindto: "#chart2"
+    });
+    var chart3 = c3.generate({
+        colors: {
+            data1: '#1F77B4',
+            data2: '#62AC5B',
+        },
+        data: {
+            columns: [
+                ['Solved ', 16],
+                ['Unsolved', 25],
+            ],
+            type: 'donut',
+            onclick: function(d, i) {
+                console.log("onclick", d, i);
+            },
+            onmouseover: function(d, i) {
+                console.log("onmouseover", d, i);
+            },
+            onmouseout: function(d, i) {
+                console.log("onmouseout", d, i);
+            }
+        },
+        donut: {
+            title: "Hard Binary"
+        },
+        bindto: "#chart3"
+    });*/
+</script>
 <div class="fade_in text-center">
     <h1 class="heading1">About</h1>
-    <h2 class="heading2">(insert stuff here)</h2>
+    <div id="map"></div>
+    <br>
+    <div id="chart1"></div>
+    <br>
+    <!--<div id="chart2"></div>
+    <br>
+    <div id="chart3"></div>-->
+    <br>
 </div>