diff --git a/.gitignore b/.gitignore
index 09d1d0a..d22d33e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,6 @@
 *.iml
 atlassian-ide-plugin.xml
 node_modules/
+typings/
+app/**/*.js
+app/**/*.js.map
\ No newline at end of file
diff --git a/app/app.component.ts b/app/app.component.ts
new file mode 100644
index 0000000..0ea17ab
--- /dev/null
+++ b/app/app.component.ts
@@ -0,0 +1,11 @@
+import { Component } from "@angular/core";
+
+@Component({
+    "selector":"dencode-app",
+    "template": `
+    <h1>dencode.org</h1>
+    `
+})
+export class AppComponent {
+
+}
diff --git a/app/main.ts b/app/main.ts
new file mode 100644
index 0000000..04cabf1
--- /dev/null
+++ b/app/main.ts
@@ -0,0 +1,5 @@
+import {bootstrap} from "@angular/platform-browser-dynamic";
+
+import {AppComponent} from "./app.component";
+
+bootstrap(AppComponent);
diff --git a/index.html b/index.html
index dadf298..d469d4c 100644
--- a/index.html
+++ b/index.html
@@ -1,19 +1,32 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<meta charset="UTF-8" />
-	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
-	<title>Decode? Encode? DENcode!</title>
-	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
-	<script type="text/javascript" src="utf8.js"></script>
-	<script type="text/javascript" src="quoted-printable.js"></script>
-	<script type="text/javascript" src="dencode.js"></script>
-	<link rel="stylesheet" type="text/css" href="dencode.css" />
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
+    <title>Decode? Encode? DENcode!</title>
+    <link rel="stylesheet" type="text/css" href="dencode.css"/>
+    <!--<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>-->
+    <!--<script type="text/javascript" src="utf8.js"></script>-->
+    <!--<script type="text/javascript" src="quoted-printable.js"></script>-->
+    <!--<script type="text/javascript" src="dencode.js"></script>-->
+    <script type="text/javascript" src="node_modules/core-js/client/shim.js"></script>
+    <script type="text/javascript" src="node_modules/zone.js/dist/zone.js"></script>
+    <script type="text/javascript" src="node_modules/reflect-metadata/Reflect.js"></script>
+    <script type="text/javascript" src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script type="text/javascript" src="systemjs.config.js"></script>
+    <script type="text/javascript">
+        System.import("app").catch(function (err) {
+            console.log(err);
+        });
+    </script>
 </head>
 <body>
-	<h1>Decode? Encode? DENcode!</h1>
-	<noscript>This webpage lets you decode and encode data and text to and from various formats. But
-	it requires you to <strong>enable Javascript</strong> to do so. So please turn it on in your
-	Browser. You won't regret it!</noscript>
+<h1>Decode? Encode? DENcode!</h1>
+<noscript>This webpage lets you decode and encode data and text to and from various formats. But
+    it requires you to <strong>enable Javascript</strong> to do so. So please turn it on in your
+    Browser. You won't regret it!
+</noscript>
+<dencode-app>Please hold on, we're starting the turbines ...</dencode-app>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/systemjs.config.js b/systemjs.config.js
new file mode 100644
index 0000000..4ea7cf2
--- /dev/null
+++ b/systemjs.config.js
@@ -0,0 +1,47 @@
+/**
+ * System configuration for Angular 2 samples
+ * Adjust as necessary for your application needs.
+ */
+(function(global) {
+    // map tells the System loader where to look for things
+    var map = {
+        'app':                        'app', // 'dist',
+        '@angular':                   'node_modules/@angular',
+//        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
+        'rxjs':                       'node_modules/rxjs'
+    };
+    // packages tells the System loader how to load when no filename and/or no extension
+    var packages = {
+        'app':                        { main: 'main.js',  defaultExtension: 'js' },
+        'rxjs':                       { defaultExtension: 'js' },
+//        'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
+    };
+    var ngPackageNames = [
+        'common',
+        'compiler',
+        'core',
+        'http',
+        'platform-browser',
+        'platform-browser-dynamic',
+        'router',
+        'router-deprecated',
+        'upgrade',
+    ];
+    // Individual files (~300 requests):
+    function packIndex(pkgName) {
+        packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
+    }
+    // Bundled (~40 requests):
+    function packUmd(pkgName) {
+        packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
+    };
+    // Most environments should use UMD; some (Karma) need the individual index files
+    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
+    // Add package entries for angular packages
+    ngPackageNames.forEach(setPackageConfig);
+    var config = {
+        map: map,
+        packages: packages
+    }
+    System.config(config);
+})(this);
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..e6a6eac
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "removeComments": false,
+    "noImplicitAny": false
+  }
+}
diff --git a/typings.json b/typings.json
new file mode 100644
index 0000000..192935f
--- /dev/null
+++ b/typings.json
@@ -0,0 +1,7 @@
+{
+  "globalDependencies": {
+    "core-js": "registry:dt/core-js#0.0.0+20160317120654",
+    "jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
+    "node": "registry:dt/node#4.0.0+20160509154515"
+  }
+}
\ No newline at end of file