diff --git a/static/js/app/views/mix/mixDetailView.js b/static/js/app/views/mix/mixDetailView.js
new file mode 100644
index 0000000..ea3c7f2
--- /dev/null
+++ b/static/js/app/views/mix/mixDetailView.js
@@ -0,0 +1,41 @@
+// Generated by CoffeeScript 1.3.3
+(function() {
+  var __hasProp = {}.hasOwnProperty,
+    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
+
+  define(['marionette', 'models/mix/mixItem', 'views/mix/mixItemView', 'text!/tpl/MixDetailView'], function(Marionette, MixItem, MixItemView, Template) {
+    var MixDetailView;
+    MixDetailView = (function(_super) {
+
+      __extends(MixDetailView, _super);
+
+      function MixDetailView() {
+        return MixDetailView.__super__.constructor.apply(this, arguments);
+      }
+
+      MixDetailView.prototype.template = _.template(Template);
+
+      MixDetailView.prototype.regions = {
+        mix: "#mix",
+        comments: "#comments"
+      };
+
+      MixDetailView.prototype.onRender = function() {
+        var view;
+        view = new MixItemView({
+          tagName: "div",
+          className: "mix-listing audio-listing-single",
+          model: this.model
+        });
+        this.mix.show(view);
+        view.renderComments();
+        return true;
+      };
+
+      return MixDetailView;
+
+    })(Marionette.Layout);
+    return MixDetailView;
+  });
+
+}).call(this);
diff --git a/static/js/app/views/mix/mixListLayout.js b/static/js/app/views/mix/mixListLayout.js
new file mode 100644
index 0000000..1f186cb
--- /dev/null
+++ b/static/js/app/views/mix/mixListLayout.js
@@ -0,0 +1,48 @@
+// Generated by CoffeeScript 1.3.3
+(function() {
+  var __hasProp = {}.hasOwnProperty,
+    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
+
+  define(['marionette', 'vent', 'views/widgets/mixTabHeaderView', 'views/mix/mixListView', 'text!/tpl/MixListLayoutView'], function(Marionette, vent, MixTabHeaderView, MixListView, Template) {
+    var MixListRegionView;
+    MixListRegionView = (function(_super) {
+
+      __extends(MixListRegionView, _super);
+
+      function MixListRegionView() {
+        return MixListRegionView.__super__.constructor.apply(this, arguments);
+      }
+
+      MixListRegionView.prototype.template = _.template(Template);
+
+      MixListRegionView.prototype.regions = {
+        headerRegion: "#mix-list-heading",
+        bodyRegion: "#mix-list-body"
+      };
+
+      MixListRegionView.prototype.initialize = function() {
+        return this.listenTo(vent, "mix:showlist", this.showMixList);
+      };
+
+      MixListRegionView.prototype.onShow = function() {
+        return this.headerRegion.show(new MixTabHeaderView());
+      };
+
+      MixListRegionView.prototype.showMixList = function(options) {
+        console.log("Layout: showoing mixlist");
+        this.bodyRegion.show(new MixListView(options));
+        return this.tabChanged(options.order_by);
+      };
+
+      MixListRegionView.prototype.tabChanged = function(type) {
+        $('#mix-tab li[id=li-' + type + ']', this.el).addClass('active');
+        return true;
+      };
+
+      return MixListRegionView;
+
+    })(Marionette.Layout);
+    return MixListRegionView;
+  });
+
+}).call(this);
diff --git a/static/js/app/views/widgets/mixTabHeader.js b/static/js/app/views/widgets/mixTabHeader.js
new file mode 100644
index 0000000..9c922b4
--- /dev/null
+++ b/static/js/app/views/widgets/mixTabHeader.js
@@ -0,0 +1,21 @@
+// Generated by CoffeeScript 1.3.3
+(function() {
+  var __hasProp = {}.hasOwnProperty,
+    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
+
+  define(['marionette', 'vent', 'text!/tpl/NowPlayingView'], function(Marionette, vent, Template) {
+    var MixTabheaderView;
+    return MixTabheaderView = (function(_super) {
+
+      __extends(MixTabheaderView, _super);
+
+      function MixTabheaderView() {
+        return MixTabheaderView.__super__.constructor.apply(this, arguments);
+      }
+
+      return MixTabheaderView;
+
+    })(Marionette.ItemView);
+  });
+
+}).call(this);
diff --git a/static/js/app/views/widgets/mixTabHeaderView.js b/static/js/app/views/widgets/mixTabHeaderView.js
new file mode 100644
index 0000000..d356e99
--- /dev/null
+++ b/static/js/app/views/widgets/mixTabHeaderView.js
@@ -0,0 +1,24 @@
+// Generated by CoffeeScript 1.3.3
+(function() {
+  var __hasProp = {}.hasOwnProperty,
+    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
+
+  define(['marionette', 'underscore', 'vent', 'text!/tpl/MixTabHeaderView'], function(Marionette, _, vent, Template) {
+    var MixTabHeaderView;
+    MixTabHeaderView = (function(_super) {
+
+      __extends(MixTabHeaderView, _super);
+
+      function MixTabHeaderView() {
+        return MixTabHeaderView.__super__.constructor.apply(this, arguments);
+      }
+
+      MixTabHeaderView.prototype.template = _.template(Template);
+
+      return MixTabHeaderView;
+
+    })(Marionette.ItemView);
+    return MixTabHeaderView;
+  });
+
+}).call(this);