diff --git a/demo/demo.css b/demo/demo.css
index de418d3..6a3440b 100644
--- a/demo/demo.css
+++ b/demo/demo.css
@@ -18,7 +18,7 @@ h1 {
     font-weight: 800; 
     text-transform: lowercase;
     line-height: 80px;
-    margin: 20px 0 0 0;
+    margin: 20px 0 20px 0;
 }
 
 h1 a:link, h1 a:visited, h1 a:hover, h1 a:active {
@@ -31,7 +31,6 @@ h1 img {
     height: 45px;
     -moz-border-radius: 9px;
     border-radius: 9px;
-    margin-bottom: 20px;
 }
 
 pre { 
@@ -57,6 +56,20 @@ a:active {
     color: #54396e;
 }
 
+#columns {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 10px;
+}
+
+#columns div {
+    float: left;
+    width : auto;
+    height: 10px;
+}
+
 /* SPAN elements with the classes below are added by prettyprint. */
 .str { color: #0fa954; }
 .kwd { color: #e61d5f; }
diff --git a/demo/demo.js b/demo/demo.js
index 58c179a..e69de29 100644
--- a/demo/demo.js
+++ b/demo/demo.js
@@ -1,30 +0,0 @@
-
-var c, g;
-var frameRate = 1000/60;
-var width, height;
-
-var checkAsset = 0;
-var letterWidth = 50;
-
-function setup() {
-    
-    c = document.getElementById('helvetica-demo');
-    g = c.getContext('2d');
-    
-    width  = c.width;
-    height = c.height;
-    
-    g.font = "800 80px helvetica, arial, sans-serif";
-    frameRate = setInterval("draw()", frameRate);
-}
-
-
-function draw() {
-    
-    g.fillStyle = "#fff";
-    g.fillRect(0, 0, width, height);
-    
-    g.fillStyle = "#222";
-    g.fillText(controllableObject.pageTitle, 0, 80);
-    
-}
\ No newline at end of file
diff --git a/index.html b/index.html
index fb683f1..4a68188 100644
--- a/index.html
+++ b/index.html
@@ -15,8 +15,7 @@
         <script type="text/javascript" src="controllers/controller.number.js"></script>
         <script type="text/javascript" src="controllers/controller.boolean.js"></script>
         <script type="text/javascript" src="controllers/controller.function.js"></script>
-        <script type="text/javascript" src="demo/swell.js"></script>
-        <script type="text/javascript" src="demo/demo.js"></script>
+        <!-- <script type="text/javascript" src="demo/demo.js"></script> -->
         <script type="text/javascript">
             var controllableObject = 
                {   
@@ -37,18 +36,18 @@
                prettyPrint();
 
                GUI.start();
-
+               
                // Creates a number box
                GUI.add(controllableObject, "numberProperty");
 
                // Creates a slider (min, max)
-               GUI.add(controllableObject, "constrainedNum", -100, 100)
+               GUI.add(controllableObject, "constrainedNum", 0, 16);
 
                // Creates a slider with notches
-               GUI.add(controllableObject, "notchedNum", 0, 800, 100)
+               GUI.add(controllableObject, "notchedNum", 0, 800, 100);
 
                // Creates a text field
-               GUI.add(controllableObject, "pageTitle");
+               GUI.add(document.getElementById('helvetica-demo'), "innerHTML");
 
                // Creates a checkbox
                GUI.add(controllableObject, "booleanProperty");
@@ -57,12 +56,12 @@
                GUI.add(controllableObject, "functionProperty")
                   .setName("Fire a Function");
                
-               setup();
+
             };
         </script>
     </head>
     <body>
-        <h1><a href = "http://twitter.com/guidat"><img src = "demo/assets/favicon.gif" border = "0" alt = "GUI-DAT flag" /></a><canvas id = "helvetica-demo"  width = "500" height = "100">gui-dat</canvas></h1>
+        <h1><a href = "http://twitter.com/guidat"><img src = "demo/assets/favicon.gif" border = "0" alt = "GUI-DAT flag" /></a><span id = "helvetica-demo">gui-dat</span></h1>
         <p>
             is a super-light javascript library for making GUI elements. It is inspired by <a href = "http://www.sojamo.de/libraries/controlP5/">controlP5</a>.
         </p>
@@ -70,20 +69,22 @@
         <pre id="demo-pre" class="prettyprint">
 var controllableObject = 
    {   
-	  numberProperty: 20,
-	  constrainedNum: 0,
-	  notchedNum: 240,
-	  textProperty: "a string",
-	  anotherTextProperty: "another string",
-	  booleanProperty: false,
-	  anotherBooleanProperty: false,
-	  functionProperty: function() {
-		 alert("I am a function!");
-	  }
+      numberProperty: 20,
+      constrainedNum: 0,
+      notchedNum: 240,
+      pageTitle: "gui-dat",
+      anotherTextProperty: "another string",
+      booleanProperty: false,
+      anotherBooleanProperty: false,
+      functionProperty: function() {
+         alert("I am a function!");
+      }
    };
 
 window.onload = function() {
 
+   prettyPrint();
+
    GUI.start();
 
    // Creates a number box
@@ -91,12 +92,12 @@ window.onload = function() {
 
    // Creates a slider (min, max)
    GUI.add(controllableObject, "constrainedNum", -100, 100)
-   
+
    // Creates a slider with notches
    GUI.add(controllableObject, "notchedNum", 0, 800, 100)
 
    // Creates a text field
-   GUI.add(controllableObject, "textProperty");
+   GUI.add(controllableObject, "pageTitle");
 
    // Creates a checkbox
    GUI.add(controllableObject, "booleanProperty");
@@ -104,11 +105,11 @@ window.onload = function() {
    // Creates a button
    GUI.add(controllableObject, "functionProperty")
       .setName("Fire a Function");
-
 };
         </pre>
         <footer>
             By <a href="http://georgemichaelbrower.com/">George Michael Brower</a>, <a href="http://jonobr1.com/">Jono Brandel</a>, and <a href="http://github.com/jonobr1/GUI-DAT">you</a>.
         </footer>
+        <div id = "columns"></div>
     </body>
 </html>
\ No newline at end of file
