diff --git a/.gitignore b/.gitignore
index 4dcd9f6b3..eaa1220fd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -43,4 +43,5 @@ Thumbs.db
 !*.config.js
 
 # Output Files
-demo/dist
\ No newline at end of file
+demo/dist
+bundles
\ No newline at end of file
diff --git a/README.md b/README.md
index 456acbe62..10ea9cf28 100644
--- a/README.md
+++ b/README.md
@@ -40,6 +40,20 @@ N.B. you can import individual component modules:
 import {SuiCheckboxModule, SuiRatingModule} from 'ng2-semantic-ui';
 ```
 
+### SystemJS
+
+If you're using SystemJS, add the following to your `systemjs.config.js` file:
+
+```js
+var config = {
+    ...
+    map: {
+        ...
+        'ng2-semantic-ui': 'npm:ng2-semantic-ui/bundles/ng2-semantic-ui.umd.min.js'
+    }
+}
+```
+
 Now you're good to go!
 
 ## Dependencies
diff --git a/components/util/positioning.service.ts b/components/util/positioning.service.ts
index 254bf73fc..108a39a91 100644
--- a/components/util/positioning.service.ts
+++ b/components/util/positioning.service.ts
@@ -1,5 +1,6 @@
 import {ElementRef, EventEmitter} from '@angular/core';
-const Popper = require('popper.js');
+// We import the ES5 version manually so that rollup can uglify it.
+import Popper from "popper.js/dist/popper.es5.js";
 
 export type PositioningPlacement = "inherit" | "top-start" | "top" | "top-end" | "left-start" | "left" | "left-end" | "bottom-start" | "bottom" | "bottom-end" | "right-start" | "right" | "right-end";
 
diff --git a/demo/src/app/app.component.html b/demo/src/app/app.component.html
index 24ac537d8..901284cad 100644
--- a/demo/src/app/app.component.html
+++ b/demo/src/app/app.component.html
@@ -1,5 +1,5 @@
 <sui-sidebar-container>
-    <sui-sidebar class="vertical inverted" transition="overlay" direction="left" #sidebar>
+    <sui-sidebar class="vertical inverted" transition="uncover" direction="left" #sidebar>
         <demo-sidebar (onItemSelected)="sidebar.close()"></demo-sidebar>
     </sui-sidebar>
     <sui-sidebar-sibling [isDimmedWhenVisible]="true">
diff --git a/demo/src/app/pages/getting-started/getting-started.page.html b/demo/src/app/pages/getting-started/getting-started.page.html
index b4fee3e92..959c331be 100644
--- a/demo/src/app/pages/getting-started/getting-started.page.html
+++ b/demo/src/app/pages/getting-started/getting-started.page.html
@@ -27,6 +27,10 @@ <h2 class="ui dividing header">Installation</h2>
         <demo-codeblock language="typescript" [src]="individualImportCode"></demo-codeblock>
     </div>
     <p>Now you're good to go!</p>
+    <p><strong>Note</strong> if you're using SystemJS, add the following to your <code>systemjs.config.js</code> file:</p>
+    <div class="ui segment">
+        <demo-codeblock language="typescript" [src]="systemJSCode"></demo-codeblock>
+    </div>
     <h2 class="ui dividing header">Dependencies</h2>
     <div class="ui bulleted list">
         <div class="item"><a href="https://angular.io">Angular 2</a> (^4.0.0)</div>
diff --git a/demo/src/app/pages/getting-started/getting-started.page.ts b/demo/src/app/pages/getting-started/getting-started.page.ts
index 1ba58ca47..3b4b55345 100644
--- a/demo/src/app/pages/getting-started/getting-started.page.ts
+++ b/demo/src/app/pages/getting-started/getting-started.page.ts
@@ -12,7 +12,7 @@ import { Component } from '@angular/core';
 })
 export class GettingStartedPage {
     public installCode:string = `$ npm install ng2-semantic-ui --save`;
-    public includeCssCode:string = `<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css">`;
+    public includeCssCode:string = `<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css">`;
     public importCode:string = `import {SuiModule} from 'ng2-semantic-ui';`;
     public moduleImportCode:string = `
 import {SuiModule} from 'ng2-semantic-ui';
@@ -23,6 +23,15 @@ import {SuiModule} from 'ng2-semantic-ui';
     bootstrap: [AppComponent]
 })
 export class AppModule {}
+`;
+    public systemJSCode:string = `
+var config = {
+    ...
+    map: {
+        ...
+        'ng2-semantic-ui': 'npm:ng2-semantic-ui/bundles/ng2-semantic-ui.umd.min.js'
+    }
+}
 `;
     public individualImportCode:string = `import {SuiCheckboxModule, SuiRatingModule} from 'ng2-semantic-ui';`;
 }
diff --git a/package.json b/package.json
index 061075580..e92830b84 100644
--- a/package.json
+++ b/package.json
@@ -1,9 +1,9 @@
 {
   "name": "ng2-semantic-ui",
-  "main": "ng2-semantic-ui.dist.js",
+  "main": "bundles/ng2-semantic-ui.umd.min.js",
   "module": "index.js",
   "typings": "index.d.ts",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Angular 2 Semantic UI Components",
   "repository": {
     "type": "git",
@@ -51,7 +51,6 @@
     "@angular/router": "^4.0.0",
     "@types/prismjs": "~1.4.18",
     "@types/protractor": "~4.0.0",
-    "@types/requirejs": "~2.1.28",
     "codelyzer": "~2.0.0-beta.4",
     "jasmine-core": "~2.5.2",
     "jasmine-spec-reporter": "~3.2.0",
diff --git a/rollup.config.js b/rollup.config.js
index 00de760b5..eff4ad60c 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -5,9 +5,9 @@ import uglify from 'rollup-plugin-uglify'
 export default {
     moduleName: 'ng2-semantic-ui',
     entry: 'index.js',
-    dest: 'ng2-semantic-ui.dist.js', // output a single application bundle
+    dest: 'bundles/ng2-semantic-ui.umd.min.js', // output a single application bundle
     sourceMap: false,
-    format: 'iife',
+    format: 'umd',
     onwarn: function(warning) {
         // Skip certain warnings
       
@@ -16,7 +16,7 @@ export default {
             return;
         }
         // intercepts in some rollup versions
-        if (warning.indexOf("The 'this' keyword is equivalent to 'undefined'") > -1 ) {
+        if (warning.message.indexOf("The 'this' keyword is equivalent to 'undefined'") > -1 ) {
             return;
         }
       
@@ -24,13 +24,24 @@ export default {
         console.warn(warning.message);
     },
     plugins: [
-        nodeResolve({ jsnext: true, module: true }),
+        nodeResolve({
+            jsnext: true,
+            module: true
+        }),
         commonjs({
             include: [
-                'node_modules/rxjs/**',
-                'node_modules/element-closest/**'
+                'node_modules/element-closest/**',
+                'node_modules/popper.js/**'
             ]
         }),
         uglify()
-    ]
+    ],
+    external: [
+        '@angular/common',
+        '@angular/core',
+        '@angular/forms',
+        '@angular/http',
+        '@angular/platform-browser',
+        'rxjs'
+  ],
 }
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 7015717b8..c7170d956 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,7 +13,8 @@
             "@angular/core": ["node_modules/@angular/core"],
             "@angular/common": ["node_modules/@angular/common"],
             "@angular/forms": ["node_modules/@angular/form"],
-            "rxjs": ["node_modules/rxjs"]
+            "rxjs": ["node_modules/rxjs"],
+            "popper.js/dist/popper.es5.js": ["typings/popper.override.ts"]
         },
         "rootDir": ".",
         "sourceMap": true,