diff --git a/gulpfile.js b/gulpfile.js
index 1913ded9b5..d5dda3105d 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -76,21 +76,20 @@ gulp.task('playgroundFiles', function() {
 
 gulp.task('playgroundJs', function() {
   return gulp.src(config.src.playgroundJs)
-   .pipe(traceurCompile())
+    .pipe(rename({extname: ''})) //hack, see: https://github.com/sindresorhus/gulp-traceur/issues/54
+    .pipe(plumber())
+    .pipe(traceur({
+        modules: 'instantiate',
+        moduleName: true,
+        annotations: true,
+        types: true
+    }))
+    .pipe(rename({extname: '.js'})) //hack, see: https://github.com/sindresorhus/gulp-traceur/issues/54
     .pipe(gulp.dest(config.dist));
 });
 
 function traceurCompile() {
   return lazypipe()
-    .pipe(rename, {extname: ''}) //hack, see: https://github.com/sindresorhus/gulp-traceur/issues/54
-    .pipe(plumber)
-    .pipe(traceur, {
-        modules: 'instantiate',
-        moduleName: true,
-        annotations: true,
-        types: true
-    })
-    .pipe(rename, {extname: '.js'}) //hack, see: https://github.com/sindresorhus/gulp-traceur/issues/54
     ();
 }
 gulp.task('js', function () {
@@ -99,7 +98,15 @@ gulp.task('js', function () {
       // Forces the files to register themselves with 'ionic' prefix
       file.dirname = 'ionic/' + file.dirname;
     }))
-    .pipe(traceurCompile())
+    .pipe(rename({extname: ''})) //hack, see: https://github.com/sindresorhus/gulp-traceur/issues/54
+    .pipe(plumber())
+    .pipe(traceur({
+        modules: 'instantiate',
+        moduleName: true,
+        annotations: true,
+        types: true
+    }))
+    .pipe(rename({extname: '.js'})) //hack, see: https://github.com/sindresorhus/gulp-traceur/issues/54
     // compiled js files in playground go to the playground root, everything else goes in /ionic
     .pipe(gulp.dest('dist'));
 });
diff --git a/playground/basic-example/main.js b/playground/basic-example/main.js
index 77a6fef132..2995cdc929 100644
--- a/playground/basic-example/main.js
+++ b/playground/basic-example/main.js
@@ -2,13 +2,14 @@ import {bootstrap} from 'angular2/core';
 import {Component, Template} from 'angular2/angular2';
 import {Tabbar} from 'ionic/components/tabbar/tabbar';
 import {Modal} from 'ionic/components/modal/modal';
+import {SideMenu, SideMenuParent} from 'ionic/components/sidemenu/sidemenu';
 
 import 'ionic/components/tabbar/mixins/android/android-tabbar';
 
 @Component({ selector: '[playground-main]' })
 @Template({
   url: 'main.html',
-  directives: [Tabbar, Modal]
+  directives: [Tabbar, Modal, SideMenu, SideMenuParent]
 })
 class PlaygroundMain {
   constructor() {
diff --git a/src/components/app/ionic.scss b/src/components/app/ionic.scss
index b1eafc147b..d03922ea4f 100644
--- a/src/components/app/ionic.scss
+++ b/src/components/app/ionic.scss
@@ -19,4 +19,5 @@
 @import "../button/button";
 @import "../tabbar/tabbar";
 @import "../modal/modal";
+@import "../sidemenu/sidemenu";
 
diff --git a/src/components/sidemenu/sidemenu.js b/src/components/sidemenu/sidemenu.js
index 5e70ee581f..b6452d8ceb 100644
--- a/src/components/sidemenu/sidemenu.js
+++ b/src/components/sidemenu/sidemenu.js
@@ -1,7 +1,65 @@
-import {Component, Template} from 'angular2/angular2';
-import {ViewGroup} from '../view-group';
+import {Component, Template, Inject, Parent, NgElement} from 'angular2/angular2';
+import {Ion} from '../ion';
+// import {EdgeDragGesture} from '../../core/gestures/edge-drag-gesture';
 
-class Sidemenu extends ViewGroup {
-  constructor() {
+@Component({
+  selector: 'ion-side-menu',
+  bind: {
+    side: 'side'
+  }
+})
+@Template({
+  inline: `<content></content>`
+})
+export class SideMenu extends Ion {
+  constructor(
+    @Parent() sideMenuParent: SideMenuParent, 
+    @NgElement() element: NgElement
+  ) {
+    this.el = element;
+    // this.gesture = new EdgeDragGesture(sideMenuParent.el.domElement, this);
+    this._drag = {};
+    super();
+  }
+  onDragStart(ev) {
+    this._drag = {
+      width: this.el.domElement.offsetWidth
+    };
+    this.el.domElement.classList.add('no-animate');
+  }
+  onDrag(ev) {
+    var pos = this._drag.pos =  Math.max(0, Math.min(ev.center.x, this._drag.width));
+    this.el.domElement.style.transform = 'translate3d(0,' + pos + 'px,0)';
+  }
+  onDragEnd(ev) {
+    var { pos, width } = this._drag;
+    this.el.domElement.style.transform = '';
+    if (pos < width / 2) {
+      this.close();
+    } else if (pos > width / 2) {
+      this.open();
+    }
+    this.el.domElement.style.transform = '';
+    this.el.domElement.classList.remove('no-animate');
+    this._drag = null;
+  }
+  open() {
+    this.el.domElement.classList.add('open');
+  }
+  close() {
+    this.el.domElement.classList.remove('open');
+  }
+}
+
+@Component({
+  selector: 'ion-side-menu-parent'
+})
+@Template({
+  inline: '<content></content>'
+})
+export class SideMenuParent extends Ion {
+  constructor(@NgElement() element: NgElement) {
+    this.el = element;
+    super();
   }
 }
diff --git a/src/components/sidemenu/sidemenu.scss b/src/components/sidemenu/sidemenu.scss
index e69de29bb2..f1caecff70 100644
--- a/src/components/sidemenu/sidemenu.scss
+++ b/src/components/sidemenu/sidemenu.scss
@@ -0,0 +1,20 @@
+ion-side-menu {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 304px;
+
+  background: rgba(255,0,0,0.5);
+  border-right: 1px solid black;
+
+  transition: transform 0.3s;
+
+  transform: translate3d(0, -304px, 0);
+  &.open {
+    transform: translate3d(0,0,0);
+  }
+  &.no-animate {
+    transition-duration: 0s;
+  }
+}
diff --git a/src/components/tabbar/mixins/android/android-tabbar.js b/src/components/tabbar/mixins/android/android-tabbar.js
index 6d4470361c..b4154d1519 100644
--- a/src/components/tabbar/mixins/android/android-tabbar.js
+++ b/src/components/tabbar/mixins/android/android-tabbar.js
@@ -5,13 +5,5 @@ import {TabbarConfig} from '../../tabbar';
 TabbarConfig.platform('android')
   .template('./android-template.html')
   .mixin(function(tabbar) {
-    // Draggable(tabbar)
-    // tabbarInstance.setAsHeader()
-
-    tabbar.extend({
-      press() {
-        alert('pressing from android mixin');
-      }
-    });
   });
 
diff --git a/src/components/tabbar/tabbar.js b/src/components/tabbar/tabbar.js
index d941bdbd88..7989e08e3f 100644
--- a/src/components/tabbar/tabbar.js
+++ b/src/components/tabbar/tabbar.js
@@ -13,7 +13,9 @@ export var TabbarConfig = new IonConfigService();
   services: [TabbarConfig]
 })
 @Template({
-  inline: `<button (click)="press()">Tabbar: {{title}} {{$config.id}}</button>`
+  inline: `<button (click)="press()">
+  Tabbar: {{title}} {{$config.id}}
+</button>`
 })
 export class Tabbar extends Ion {
   constructor(
diff --git a/src/core/gestures/drag-gesture.js b/src/core/gestures/drag-gesture.js
new file mode 100644
index 0000000000..bec31868a8
--- /dev/null
+++ b/src/core/gestures/drag-gesture.js
@@ -0,0 +1,31 @@
+import {Gesture} from './gesture';
+var noop = function() {};
+
+class DragGesture extends Gesture {
+  // constructor(element, opts = {}) {
+  //   super(element, opts);
+  //   this.onDrag = opts.onDrag;
+  //   this.onDragStart = opts.onDragStart;
+  //   this.onDragEnd = opts.onDragEnd;
+  // }
+  // listen() {
+  //   super.listen();
+  //   this.hammertime.on('dragstart', this._onDragStart.bind(this));
+  //   this.hammertime.on('drag', this._onDrag.bind(this));
+  //   this.hammertime.on('dragend', this._onDragEnd.bind(this));
+  // }
+  // unlisten() {
+  //   super.unlisten();
+  //   this.hammertime.destroy();
+  // }
+
+  // _onDragStart(ev) {
+  //   (this.onDragStart || noop)(ev);
+  // }
+  // _onDrag(ev) {
+  //   (this.onDrag || noop)(ev);
+  // }
+  // _onDragEnd(ev) {
+  //   (this.onDragEnd || noop)(ev);
+  // }
+}
diff --git a/src/core/gestures/edge-drag-gesture.js b/src/core/gestures/edge-drag-gesture.js
new file mode 100644
index 0000000000..6d3efbf055
--- /dev/null
+++ b/src/core/gestures/edge-drag-gesture.js
@@ -0,0 +1,17 @@
+import {DragGesture} from './drag-gesture';
+
+class EdgeDragGesture extends DragGesture {
+  // constructor(element, opts = { edge = 'left', buffer = 25 } = {}) {
+  //   super(element, opts);
+  // }
+
+  // _onDragStart(ev) {
+  //   var { buffer, edge } = this._options;
+  //   var { gesture } = ev;
+  //   if (edge === 'left' && gesture.center.x > buffer) return;
+  //   if (edge === 'top' && gesture.center.y > buffer) return;
+  //   if (edge === 'right' && gesture.center.y < window.innerWidth - buffer) return;
+  //   if (edge === 'bottom' && gesture.center.y < window.innerHeight - buffer) return;
+  //   super._onDragStart(ev);
+  // }
+}
diff --git a/src/core/gestures/edgePanGesture b/src/core/gestures/edgePanGesture
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/core/gestures/gesture.js b/src/core/gestures/gesture.js
new file mode 100644
index 0000000000..6d26cfbcae
--- /dev/null
+++ b/src/core/gestures/gesture.js
@@ -0,0 +1,37 @@
+
+export class Gesture {
+  // constructor(element, opts = {}) {
+  //   this.element = element;
+  //   this._options = opts;
+  // }
+  // options(opts = {}) {
+  //   extend(this._options, opts);
+  // }
+
+  // listen() {
+  //   this.hammertime = Hammer(element, this._options);
+  // }
+  // unlisten() {
+  //   this.hammertime.destroy();
+  //   this.hammertime = null;
+  // }
+  // destroy() {
+  //   this.hammertime.destroy();
+  // }
+}
+
+// TODO make a utils.js
+function extend() {
+  for (var i = 0, ii = arguments.length; i < ii; i++) {
+    var obj = arguments[i];
+    if (obj) {
+      var keys = Object.keys(obj);
+      for (var j = 0, jj = keys.length; j < jj; j++) {
+        var key = keys[j];
+        if (!ILLEGAL_ASSIGN_FIELDS[key]) {
+          this[key] = obj[key];
+        }
+      }
+    }
+  }
+}
diff --git a/src/core/gestures/panGesture.js b/src/core/gestures/panGesture.js
deleted file mode 100644
index 8b13789179..0000000000
--- a/src/core/gestures/panGesture.js
+++ /dev/null
@@ -1 +0,0 @@
-