diff --git a/lib/app_component.dart b/lib/app_component.dart
index c5d72e2..2ea152e 100644
--- a/lib/app_component.dart
+++ b/lib/app_component.dart
@@ -1,11 +1,14 @@
 import 'package:angular/angular.dart';
 
+import 'dart:html' as html;
+import 'package:rules_of_living/src/App.dart';
+
 @Component(
   selector: 'my-app',
   template: '''
-  <h1>Hello {{name}}</h1>
+  <h1>Cellular Automata - The Rules of Life</h1>
   <div id="output">
-      <canvas id="canvas"></canvas>
+      <canvas #caCanvas width="500" height="500"></canvas>
   </div>
   <div id="controls">
       <button id="run">Run</button>
@@ -16,6 +19,24 @@ import 'package:angular/angular.dart';
   </div>
   ''',
 )
-class AppComponent {
-  var name = 'Darth Marty';
+class AppComponent implements OnInit {
+  var name = "World";
+
+  App engine;
+
+  @ViewChild("caCanvas")
+  html.CanvasElement canvas;
+
+  @override
+  void ngOnInit() {
+    canvas.context2D.setFillColorRgb(255, 0, 0);
+    canvas.context2D.fillRect(0, 0, 200, 150);
+    engine = new App(canvas);
+    html.window.animationFrame.then(animFrame);
+  }
+
+  void animFrame(num now) {
+    engine.process(now);
+    html.window.animationFrame.then(animFrame);
+  }
 }
diff --git a/web/main.dart b/web/main.dart
index 149766a..3415d86 100644
--- a/web/main.dart
+++ b/web/main.dart
@@ -1,23 +1,7 @@
-import 'dart:html' as html;
-
-import 'package:rules_of_living/App.dart';
-
 import 'package:angular/angular.dart';
 import 'package:rules_of_living/app_component.template.dart' as ng;
 
-html.CanvasElement el;
-App engine;
 
 void main() {
   runApp(ng.AppComponentNgFactory);
-
-  el = new html.CanvasElement(width: 500, height: 500);
-  html.querySelector('#output').append(el);
-  engine = new App(el);
-  html.window.animationFrame.then(animFrame);
-}
-
-void animFrame(num now) {
-  engine.process(now);
-  html.window.animationFrame.then(animFrame);
 }