diff --git a/default.nix b/default.nix
index 657ff3f..16c4fd2 100644
--- a/default.nix
+++ b/default.nix
@@ -1,7 +1,14 @@
 { nixpkgs ? import <nixpkgs> {}, compiler ? "ghcjs" }:
     let
        pkgs = nixpkgs.pkgs.haskell.packages.${compiler};
+       misoRepo = /Users/elliot/a/mine/miso;
+       miso = misoRepo + "/miso/miso.nix";
+       misoHtml = misoRepo + "/miso-html/miso-html.nix";
     in
       pkgs.callPackage ./product-chart-demo.nix {
-          miso = pkgs.callPackage /Users/elliot/a/mine/miso/miso.nix {};
+          miso = pkgs.callPackage miso {
+	    miso-html = pkgs.callPackage misoHtml {};
+	  };
+          miso-html = pkgs.callPackage misoHtml {};
       }
+
diff --git a/product-chart-demo.cabal b/product-chart-demo.cabal
index 4f7b53b..4ed0509 100644
--- a/product-chart-demo.cabal
+++ b/product-chart-demo.cabal
@@ -15,5 +15,6 @@ executable main
                      , ghcjs-base
                      , ghcjs-dom
                      , miso
+                     , miso-html
                      , text
   default-language:    Haskell2010
diff --git a/product-chart-demo.nix b/product-chart-demo.nix
index 84463a5..5da0183 100644
--- a/product-chart-demo.nix
+++ b/product-chart-demo.nix
@@ -1,6 +1,4 @@
-{ mkDerivation, base, containers, ghcjs-base, ghcjs-dom, miso, stdenv, text,
-  closurecompiler
-}:
+{ mkDerivation, stdenv, base, containers, ghcjs-base, ghcjs-dom, text, miso, miso-html, closurecompiler }:
 mkDerivation {
   pname = "product-chart-demo";
   version = "0.1.0.0";
@@ -8,7 +6,7 @@ mkDerivation {
   isLibrary = false;
   isExecutable = true;
   executableHaskellDepends = [
-    base containers ghcjs-base ghcjs-dom miso text
+    base containers ghcjs-base ghcjs-dom miso miso-html text
   ];
   license = stdenv.lib.licenses.unfree;
 }
diff --git a/src/Main.hs b/src/Main.hs
index 1501c39..e6fd14e 100644
--- a/src/Main.hs
+++ b/src/Main.hs
@@ -16,7 +16,7 @@ import           GHCJS.DOM.Element
 import           GHCJS.DOM.Document
 import           GHCJS.DOM.Node
 import           Miso
-
+import           Miso.Html
 
 addCss :: String -> IO ()
 addCss urlLocal = do
@@ -142,7 +142,7 @@ main :: IO ()
 main = do
   addAllCss
   clearBody
-  startApp model' view update defaultEvents (Proxy :: Proxy '[]) []
+  startApp model' view update defaultSettings
     where
       model' :: Model
       model' = Model chart' deletedRows' Nothing
@@ -190,10 +190,10 @@ chartModifier :: DragType -> Int -> Int -> Chart -> Chart
 chartModifier DragColumn from to chart = chart{chartOrder=shift from to (chart & chartOrder)}
 chartModifier DragRow    from to chart = chart{chartData=shift from to (chart & chartData)}
 
-view :: Model -> VTree ChartAction
+view :: Model -> View ChartAction
 view model = master (tableView model)
 
-tableView :: Model -> [VTree ChartAction]
+tableView :: Model -> [View ChartAction]
 tableView (Model modelChart _ dragInfo) =
   [ div_ [classes ["row"]]
     [ div_ [classes ["col-xs-12"]]
@@ -236,7 +236,7 @@ tableView (Model modelChart _ dragInfo) =
       Just info -> chartModifier (dragType info) (sourceIndex info) (destIndex info) modelChart
 
 
-toHead :: Maybe DragInfo -> [T.Text] -> VTree ChartAction
+toHead :: Maybe DragInfo -> [T.Text] -> View ChartAction
 toHead dragInfo columnNames =
   thead_ []
     [ tr_ []
@@ -255,7 +255,7 @@ toHead dragInfo columnNames =
          ])
         [ text_ columnName ]
 
-toBody :: Maybe DragInfo -> Chart -> VTree ChartAction
+toBody :: Maybe DragInfo -> Chart -> View ChartAction
 toBody dragInfo Chart{chartData=rows, chartOrder=columnNames} =
   tbody_ [] $
     for (zip [1..] rows) $ \(rowIndex, row) ->
@@ -281,7 +281,7 @@ toBody dragInfo Chart{chartData=rows, chartOrder=columnNames} =
           ]
         ]
 
-showColData :: ColumnName -> T.Text -> VTree a
+showColData :: ColumnName -> T.Text -> View a
 showColData col content
   | col == "Image"  = span_ [] [img_ [class_ "img-thumbnail", src_ content, alt_ "Amazon Product Image" ]]
   | col == "Price"  = text_ ("$" <> content)
@@ -289,7 +289,7 @@ showColData col content
   | otherwise       = text_ content
 
 
-toStars :: Float -> VTree a
+toStars :: Float -> View a
 toStars amount =
   span_ []
     [ star (amount - 0)
@@ -318,36 +318,39 @@ shift fromIndex toIndex xs = left ++ (item : right)
     (left, right) = splitAt (toIndex - 1) xs'
 
 
-fa :: T.Text -> VTree a
+fa :: T.Text -> View a
 fa icon = span_ [class_ $ "fa fa-" <> icon] []
 
 
-nav_ = mkNode "nav"
-i_ = mkNode "i"
-button_ = mkNode "button"
-img_ attrs = mkNode "img" attrs []
+mkNodeTxt :: T.Text -> [Attribute a] -> [View a] -> View a
+mkNodeTxt = mkNode HTML
+
+nav_ = mkNodeTxt "nav"
+i_ = mkNodeTxt "i"
+button_ = mkNodeTxt "button"
+img_ attrs = mkNodeTxt "img" attrs []
 
 src_, role_, alt_ :: T.Text -> Attribute a
 src_ url = prop "src" url
 role_ = prop "role"
 alt_ = prop "alt"
 
-br_ attrs = mkNode "br" attrs []
-h5_ = mkNode "h5"
-h2_ = mkNode "h2"
+br_ attrs = mkNodeTxt "br" attrs []
+h5_ = mkNodeTxt "h5"
+h2_ = mkNodeTxt "h2"
 
 
 classes :: [T.Text] -> Attribute a
 classes = class_ . T.unwords
 
-master :: [VTree a] -> VTree a
+master :: [View a] -> View a
 master content = div_ []
   [ topnav
   , div_ [class_ "container"] content
   ]
 
 
-topnav :: VTree a
+topnav :: View a
 topnav =
   div_ [classes ["navbar", "navbar-inverse", "navbar-static-top"], role_ "navigation"]
     [ div_ [classes ["container"]]