diff --git a/.gitignore b/.gitignore
index b512c09..ccd2256 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
-node_modules
\ No newline at end of file
+node_modules
+app/**/*.js
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..c30cd0e
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,7 @@
+// Place your settings in this file to overwrite default and user settings.
+{
+	"files.exclude": {
+		"**/*.js": {"when": "$(basename).ts"},
+		"**/*.js.map": {"when": "$(basename).ts"}
+	}
+}
\ No newline at end of file
diff --git a/app.js b/app.js
index 2bacbf7..2663cda 100644
--- a/app.js
+++ b/app.js
@@ -11,6 +11,7 @@ var app = express();
 
 // expose node_modules to client app
 app.use(express.static("./node_modules/"));
+app.use(express.static("./app/"));
 
 // uncomment after placing your favicon in /public
 //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
diff --git a/app/app.component.ts b/app/app.component.ts
deleted file mode 100644
index 6e01506..0000000
--- a/app/app.component.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import {Component} from 'angular2/core';
-@Component({
-    selector: 'my-app',
-    template: '<h1>My First Angular 2 App</h1>'
-})
-export class AppComponent { }
\ No newline at end of file
diff --git a/app/components/app.component.css b/app/components/app.component.css
new file mode 100644
index 0000000..3c47381
--- /dev/null
+++ b/app/components/app.component.css
@@ -0,0 +1,5 @@
+h1 {
+	color: white;
+	background: darkred;
+	padding: 20px;
+}
\ No newline at end of file
diff --git a/app/components/app.component.html b/app/components/app.component.html
new file mode 100644
index 0000000..e5b1605
--- /dev/null
+++ b/app/components/app.component.html
@@ -0,0 +1 @@
+<h1>My First {{name}} app</h1>
\ No newline at end of file
diff --git a/app/components/app.component.ts b/app/components/app.component.ts
new file mode 100644
index 0000000..f6bddcc
--- /dev/null
+++ b/app/components/app.component.ts
@@ -0,0 +1,9 @@
+import {Component} from 'angular2/core';
+@Component({
+    selector: 'my-app',
+    templateUrl: 'components/app.component.html',
+    styleUrls: ['components/app.component.css']
+})
+export class AppComponent {
+    name: string = "Angular 2";
+}
\ No newline at end of file
diff --git a/app/main.ts b/app/main.ts
index 5fd3b31..3414c0b 100644
--- a/app/main.ts
+++ b/app/main.ts
@@ -1,4 +1,4 @@
 import {bootstrap}    from 'angular2/platform/browser'
-import {AppComponent} from './app.component'
+import {AppComponent} from './components/app.component'
 
 bootstrap(AppComponent);
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 4b5676e..fe449c3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -24,7 +24,7 @@
           }
         }
       });
-      System.import('javascripts/app/main')
+      System.import('main')
             .then(null, console.error.bind(console));
     </script>
 
diff --git a/public/javascripts/app/app.component.js b/public/javascripts/app/app.component.js
deleted file mode 100644
index 37268cf..0000000
--- a/public/javascripts/app/app.component.js
+++ /dev/null
@@ -1,35 +0,0 @@
-System.register(['angular2/core'], function(exports_1) {
-    var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-        return c > 3 && r && Object.defineProperty(target, key, r), r;
-    };
-    var __metadata = (this && this.__metadata) || function (k, v) {
-        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-    };
-    var core_1;
-    var AppComponent;
-    return {
-        setters:[
-            function (core_1_1) {
-                core_1 = core_1_1;
-            }],
-        execute: function() {
-            AppComponent = (function () {
-                function AppComponent() {
-                }
-                AppComponent = __decorate([
-                    core_1.Component({
-                        selector: 'my-app',
-                        template: '<h1>My First Angular 2 App</h1>'
-                    }), 
-                    __metadata('design:paramtypes', [])
-                ], AppComponent);
-                return AppComponent;
-            })();
-            exports_1("AppComponent", AppComponent);
-        }
-    }
-});
-//# sourceMappingURL=app.component.js.map
\ No newline at end of file
diff --git a/public/javascripts/app/app.component.js.map b/public/javascripts/app/app.component.js.map
deleted file mode 100644
index a10df0b..0000000
--- a/public/javascripts/app/app.component.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"app.component.js","sourceRoot":"","sources":["../../../app/app.component.ts"],"names":["AppComponent","AppComponent.constructor"],"mappings":";;;;;;;;;;;;;;;;;;YACA;gBAAAA;gBAI4BC,CAACA;gBAJ7BD;oBAACA,gBAASA,CAACA;wBACPA,QAAQA,EAAEA,QAAQA;wBAClBA,QAAQA,EAAEA,iCAAiCA;qBAC9CA,CAACA;;iCAC2BA;gBAADA,mBAACA;YAADA,CAACA,AAJ7B,IAI6B;YAJ7B,uCAI6B,CAAA"}
\ No newline at end of file
diff --git a/public/javascripts/app/main.js b/public/javascripts/app/main.js
deleted file mode 100644
index da70522..0000000
--- a/public/javascripts/app/main.js
+++ /dev/null
@@ -1,16 +0,0 @@
-System.register(['angular2/platform/browser', './app.component'], function(exports_1) {
-    var browser_1, app_component_1;
-    return {
-        setters:[
-            function (browser_1_1) {
-                browser_1 = browser_1_1;
-            },
-            function (app_component_1_1) {
-                app_component_1 = app_component_1_1;
-            }],
-        execute: function() {
-            browser_1.bootstrap(app_component_1.AppComponent);
-        }
-    }
-});
-//# sourceMappingURL=main.js.map
\ No newline at end of file
diff --git a/public/javascripts/app/main.js.map b/public/javascripts/app/main.js.map
deleted file mode 100644
index c759929..0000000
--- a/public/javascripts/app/main.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"main.js","sourceRoot":"","sources":["../../../app/main.ts"],"names":[],"mappings":";;;;;;;;;;;YAGA,mBAAS,CAAC,4BAAY,CAAC,CAAC"}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index ad9b48a..f6ad237 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,9 +3,11 @@
     "target": "es5",
     "module": "system",
     "rootDir": "app",
-    "outDir": "public/javascripts/app",
+    "outDir": "app",
     "moduleResolution": "node",
-    "sourceMap": true,
+    "sourceMap": false,
+    "inlineSources": true,
+    "inlineSourceMap": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "removeComments": false,