diff --git a/src/view.js b/src/view.js
index 671336af..6e6cf111 100644
--- a/src/view.js
+++ b/src/view.js
@@ -4,17 +4,18 @@ recline.DataExplorer = Backbone.View.extend({
   tagName: 'div',
   className: 'data-explorer',
   template: ' \
-    <div class="dataexplorer-tableview-nav"> \
-      <span class="dataexplorer-tableview-nav-toggle"> \
-        <input type="radio" id="dataexplorer-tableview-nav-grid" name="dataexplorer-tableview-nav-toggle" value="grid" checked="checked" /> \
-        <label for="dataexplorer-tableview-nav-grid">Grid</label> \
-        <input type="radio" id="dataexplorer-tableview-nav-graph" name="dataexplorer-tableview-nav-toggle" value="chart" /> \
-        <label for="dataexplorer-tableview-nav-graph">Graph</label> \
+    <div class="nav"> \
+      <span class="nav-toggle"> \
+        <input type="radio" id="datatable" name="nav-toggle" value="datatable" checked="checked" /> \
+        <label for="nav-datatable">Data Table</label> \
+        <input type="radio" id="nav-graph" name="nav-toggle" value="graph" /> \
+        <label for="nav-graph">Graph</label> \
       </span> \
     </div> \
   ',
 
   events: {
+    'change input[name="nav-toggle"]': 'navChange'
   },
 
   initialize: function() {
@@ -24,11 +25,28 @@ recline.DataExplorer = Backbone.View.extend({
     this.dataTable = new recline.DataTable({
       model: this.model
     });
+    this.flotGraph = new recline.FlotGraph({
+      model: this.model
+    });
+    this.flotGraph.el.hide();
     this.el.append(this.dataTable.el)
+    this.el.append(this.flotGraph.el);
   },
 
   render: function() {
     $(this.el).html($(this.template));
+  },
+
+  navChange: function(e) {
+    // TODO: really ugly and will not scale to more widgets ...
+    var widgetToShow = $(e.target).val();
+    if (widgetToShow == 'datatable') {
+      this.flotGraph.el.hide();
+      this.dataTable.el.show();
+    } else if (widgetToShow == 'graph') {
+      this.flotGraph.el.show();
+      this.dataTable.el.hide();
+    }
   }
 });
 
@@ -43,6 +61,7 @@ recline.DataTable = Backbone.View.extend({
   },
 
   initialize: function() {
+    this.el = $(this.el);
     var that = this;
     this.model.fetch().then(function() {
       that.model.getRows().then(function(rows) {
@@ -78,9 +97,9 @@ recline.FlotGraph = Backbone.View.extend({
 
   // TODO: normalize css
   template: ' \
-  <div class="dataexplorer-tableview-panel dataexplorer-tableview-graph"></div> \
-  <div class="dataexplorer-tableview-editor"> \
-    <div class="dataexplorer-tableview-editor-info dataexplorer-tableview-editor-hide-info"> \
+  <div class="panel graph"></div> \
+  <div class="editor"> \
+    <div class="editor-info editor-hide-info"> \
       <h1><span></span>Help</h1> \
       <p>To create a chart select a column (group) to use as the x-axis \
          then another column (Series A) to plot against it.</p> \
@@ -90,25 +109,25 @@ recline.FlotGraph = Backbone.View.extend({
     </div> \
     <form> \
       <ul> \
-        <li class="dataexplorer-tableview-editor-type"> \
+        <li class="editor-type"> \
           <label>Graph Type</label> \
           <select></select> \
         </li> \
-        <li class="dataexplorer-tableview-editor-group"> \
+        <li class="editor-group"> \
           <label>Group Column (x-axis)</label> \
           <select></select> \
         </li> \
-        <li class="dataexplorer-tableview-editor-series"> \
+        <li class="editor-series"> \
           <label>Series <span>A (y-axis)</span></label> \
           <select></select> \
         </li> \
       </ul> \
-      <div class="dataexplorer-tableview-editor-buttons"> \
-        <button class="dataexplorer-tableview-editor-add">Add Series</button> \
+      <div class="editor-buttons"> \
+        <button class="editor-add">Add Series</button> \
       </div> \
-      <div class="dataexplorer-tableview-editor-buttons dataexplorer-tableview-editor-submit"> \
-        <button class="dataexplorer-tableview-editor-save">Save</button> \
-        <input type="hidden" class="dataexplorer-tableview-editor-id" value="chart-1" /> \
+      <div class="editor-buttons editor-submit"> \
+        <button class="editor-save">Save</button> \
+        <input type="hidden" class="editor-id" value="chart-1" /> \
       </div> \
     </form> \
   </div> \
@@ -119,6 +138,7 @@ recline.FlotGraph = Backbone.View.extend({
   },
 
   initialize: function() {
+    this.el = $(this.el);
   },
   toTemplateJSON: function() {
     return {};