diff --git a/features/step_definitions/trumpeter_steps.rb b/features/step_definitions/trumpeter_steps.rb
index f8f3a6593..f4caaa9de 100644
--- a/features/step_definitions/trumpeter_steps.rb
+++ b/features/step_definitions/trumpeter_steps.rb
@@ -17,6 +17,14 @@ def select_from_dropdown(option_text, dropdown)
   #assert dropdown text is link
 end
 
+def go_to_framer
+  click_button "Next"
+end
+
+def finalize_frame
+  click_button "done"
+end
+
 When /^I trumpet$/ do
   visit new_post_path
 end
@@ -59,6 +67,23 @@ Then /^"([^"]*)" should have the "([^"]*)" picture$/ do |post_text, file_name|
   image.should be_present
 end
 
+When /^I go through the default composer$/ do
+  go_to_framer
+  finalize_frame
+end
+
+When /^I start the framing process$/ do
+  go_to_framer
+end
+
+When /^I finalize my frame$/ do
+  finalize_frame
+end
+
 Then /^"([^"]*)" should have (\d+) pictures$/ do |post_text, number_of_pictures|
   find_post_by_text(post_text).all(".photo_attachments img").size.should == number_of_pictures.to_i
+end
+
+Then /^I should see "([^"]*)" in the framer preview$/ do |post_text|
+  pending
 end
\ No newline at end of file
diff --git a/features/trumpeter.feature b/features/trumpeter.feature
index f33cc6818..4c2929e87 100644
--- a/features/trumpeter.feature
+++ b/features/trumpeter.feature
@@ -9,7 +9,7 @@ Feature: Creating a new post
     And I write "I love RMS"
     When I select "Public" in my aspects dropdown
     And I upload a fixture picture with filename "button.gif"
-    When I press "Share"
+    When I go through the default composer
     When I go to "/stream"
     Then I should see "I love RMS" as the first post in my stream
     And "I love RMS" should be a public post in my stream
@@ -18,7 +18,7 @@ Feature: Creating a new post
   Scenario: Posting to Aspects
     And I write "This is super skrunkle"
     When I select "All Aspects" in my aspects dropdown
-    And I press "Share"
+    And I go through the default composer
     When I go to "/stream"
     Then I should see "This is super skrunkle" as the first post in my stream
     Then "This is super skrunkle" should be a limited post in my stream
@@ -27,7 +27,7 @@ Feature: Creating a new post
    Given a user named "Alice Smith" with email "alice@alice.alice"
    And a user with email "bob@bob.bob" is connected with "alice@alice.alice"
    And I mention "alice@alice.alice"
-   And I press "Share"
+   And I go through the default composer
    And I go to "/stream"
    Then I follow "Alice Smith"
 
@@ -35,6 +35,15 @@ Feature: Creating a new post
     When I write "check out these pictures"
     And I upload a fixture picture with filename "button.gif"
     And I upload a fixture picture with filename "button.gif"
-    And I press "Share"
+    And I go through the default composer
     And I go to "/stream"
     Then "check out these pictures" should have 2 pictures
+
+  Scenario: Framing your frame
+    When I write "This shit is super customized"
+    And I upload a fixture picture with filename "button.gif"
+    And I start the framing process
+    Then I should see "This shit is super customized" in the framer preview
+    When I finalize my frame
+    Then "This is super skrunkle" should be the first post in my stream
+
diff --git a/public/javascripts/app/forms/picture_form.js b/public/javascripts/app/forms/picture_form.js
index cd16fbf84..f8aaf64fd 100644
--- a/public/javascripts/app/forms/picture_form.js
+++ b/public/javascripts/app/forms/picture_form.js
@@ -18,7 +18,6 @@ app.forms.Picture = app.forms.Base.extend({
   },
 
   submitForm : function (){
-    console.log("meow")
     this.$("form").submit();
   },
 
diff --git a/public/javascripts/app/models/status_message.js b/public/javascripts/app/models/status_message.js
index fbd0c5405..753c63b64 100644
--- a/public/javascripts/app/models/status_message.js
+++ b/public/javascripts/app/models/status_message.js
@@ -3,16 +3,14 @@ app.models.StatusMessage = app.models.Post.extend({
     return this.isNew() ? '/status_messages' : '/posts/' + this.get("id");
   },
 
-  mungeAndSave : function(){
-    var mungedAttrs = {
+  toJSON : function(){
+    return {
       status_message : _.clone(this.attributes),
-      'aspect_ids[]' : this.get("aspect_ids"),
-      photos : this.photos.pluck("id"),
+      'aspect_ids' : this.get("aspect_ids").split(","),
+      photos : this.photos && this.photos.pluck("id"),
       services : mungeServices(this.get("services"))
     }
 
-    this.save(mungedAttrs)
-
     function mungeServices (values) {
       if(!values) { return; }
       return values.length > 1 ?  values :  [values]
diff --git a/public/javascripts/app/pages/framer.js b/public/javascripts/app/pages/framer.js
new file mode 100644
index 000000000..e9d8bea9a
--- /dev/null
+++ b/public/javascripts/app/pages/framer.js
@@ -0,0 +1,12 @@
+app.pages.Framer = app.views.Base.extend({
+  templateName : "framer",
+
+  events : {
+    "click button.done" : "saveFrame"
+  },
+
+  saveFrame : function(){
+    console.log(app.frame.toJSON(), app.frame)
+    app.frame.save()
+  }
+})
\ No newline at end of file
diff --git a/public/javascripts/app/pages/post-new.js b/public/javascripts/app/pages/post-new.js
index b2f74d8da..ab8ed72a1 100644
--- a/public/javascripts/app/pages/post-new.js
+++ b/public/javascripts/app/pages/post-new.js
@@ -3,14 +3,18 @@ app.pages.PostNew = app.views.Base.extend({
 
   subviews : { "#new-post" : "postForm"},
 
+  events : {
+    "click button.next" : "navigateNext"
+  },
+
   initialize : function(){
     this.model = new app.models.StatusMessage()
     this.postForm = new app.forms.Post({model : this.model})
-
-    this.model.bind("setFromForm", this.saveModel, this)
   },
 
-  saveModel : function(){
-    this.model.mungeAndSave();
+  navigateNext : function(){
+    this.postForm.setModelAttributes()
+    app.frame = this.model;
+    app.router.navigate("framer", true)
   }
 });
diff --git a/public/javascripts/app/router.js b/public/javascripts/app/router.js
index d56ece7c7..f45d158e4 100644
--- a/public/javascripts/app/router.js
+++ b/public/javascripts/app/router.js
@@ -18,25 +18,25 @@ app.Router = Backbone.Router.extend({
 
     "posts/new" : "newPost",
     "posts/:id": "singlePost",
-    "p/:id": "singlePost"
+    "p/:id": "singlePost",
+    "framer": "framer"
   },
 
   stream : function() {
     app.stream = new app.models.Stream();
-    app.page = new app.views.Stream({model : app.stream}).render();
+    app.page = new app.views.Stream({model : app.stream});
     app.publisher = app.publisher || new app.views.Publisher({collection : app.stream.posts});
 
-    var streamFacesView = new app.views.StreamFaces({collection : app.stream.posts}).render();
+    var streamFacesView = new app.views.StreamFaces({collection : app.stream.posts});
 
-    $("#main_stream").html(app.page.el);
-    $('#selected_aspect_contacts .content').html(streamFacesView.el);
+    $("#main_stream").html(app.page.render().el);
+    $('#selected_aspect_contacts .content').html(streamFacesView.render().el);
   },
 
   photos : function() {
     app.photos = new app.models.Photos();
-    app.page = new app.views.Photos({model : app.photos}).render();
-
-    $("#main_stream").html(app.page.el);
+    app.page = new app.views.Photos({model : app.photos});
+    $("#main_stream").html(app.page.render().el);
   },
 
   newPost : function(){
@@ -44,6 +44,11 @@ app.Router = Backbone.Router.extend({
     $("#container").html(page.render().el)
   },
 
+  framer : function(){
+    var page = new app.pages.Framer();
+    $("#container").html(page.render().el)
+  },
+
   singlePost : function(id) {
     var page = new app.pages.PostViewer({ id: id });
     $("#container").html(page.el);
diff --git a/public/javascripts/app/templates/framer.handlebars b/public/javascripts/app/templates/framer.handlebars
new file mode 100644
index 000000000..6860c23d8
--- /dev/null
+++ b/public/javascripts/app/templates/framer.handlebars
@@ -0,0 +1 @@
+<button class="done btn-primary">done</button>
\ No newline at end of file
diff --git a/public/javascripts/app/templates/post-new.handlebars b/public/javascripts/app/templates/post-new.handlebars
index afd1988e0..ab2b6264a 100644
--- a/public/javascripts/app/templates/post-new.handlebars
+++ b/public/javascripts/app/templates/post-new.handlebars
@@ -1,3 +1,4 @@
 <div class="container">
   <div id="new-post"></div>
+  <button class="btn-primary next">Next</button>
 </div>
diff --git a/public/javascripts/app/views.js b/public/javascripts/app/views.js
index 095b0e5cf..6cd4f336e 100644
--- a/public/javascripts/app/views.js
+++ b/public/javascripts/app/views.js
@@ -21,7 +21,7 @@ app.views.Base = Backbone.View.extend({
   },
 
   defaultPresenter : function(){
-    var modelJson = this.model ? this.model.toJSON() : {}
+    var modelJson = this.model ? _.clone(this.model.attributes) : {}
     return _.extend(modelJson, {
       current_user : app.currentUser.attributes,
       loggedIn : app.currentUser.authenticated()
diff --git a/public/javascripts/app/views/publisher_view.js b/public/javascripts/app/views/publisher_view.js
index 963949338..2274aeb74 100644
--- a/public/javascripts/app/views/publisher_view.js
+++ b/public/javascripts/app/views/publisher_view.js
@@ -22,8 +22,9 @@ app.views.Publisher = Backbone.View.extend({
 
     var serializedForm = $(evt.target).closest("form").serializeObject();
 
-    // save status message
-    var statusMessage = new app.models.StatusMessage();
+    // lulz this code should be killed.
+    var statusMessage = new app.models.Post();
+
     statusMessage.save({
       "status_message" : {
         "text" : serializedForm["status_message[text]"]
diff --git a/spec/javascripts/app/forms/post_form_spec.js b/spec/javascripts/app/forms/post_form_spec.js
index 2fbb3591f..646b41e80 100644
--- a/spec/javascripts/app/forms/post_form_spec.js
+++ b/spec/javascripts/app/forms/post_form_spec.js
@@ -9,6 +9,7 @@ describe("app.forms.Post", function(){
       this.view.render()
     })
 
+
     describe("submitting a valid form", function(){
       beforeEach(function(){
         this.view.$("form #text_with_markup").val("Oh My")
diff --git a/spec/javascripts/app/pages/framer_spec.js b/spec/javascripts/app/pages/framer_spec.js
new file mode 100644
index 000000000..c32e016d7
--- /dev/null
+++ b/spec/javascripts/app/pages/framer_spec.js
@@ -0,0 +1,18 @@
+describe("app.pages.Framer", function(){
+  beforeEach(function(){
+    app.frame = new app.models.StatusMessage();
+    this.page = new app.pages.Framer();
+  });
+
+  describe("rendering", function(){
+    beforeEach(function(){
+      this.page.render();
+    });
+
+    it("saves the model when you click done",function(){
+      spyOn(app.frame, "save");
+      this.page.$("button.done").click();
+      expect(app.frame.save).toHaveBeenCalled();
+    });
+  });
+});
\ No newline at end of file
diff --git a/spec/javascripts/app/pages/post_new_spec.js b/spec/javascripts/app/pages/post_new_spec.js
index 20055757b..0c701e51f 100644
--- a/spec/javascripts/app/pages/post_new_spec.js
+++ b/spec/javascripts/app/pages/post_new_spec.js
@@ -3,15 +3,30 @@ describe("app.pages.PostNew", function(){
     this.page = new app.pages.PostNew()
   })
 
-  it("renders", function(){
-    this.page.render();
-  })
+  describe("rendering", function(){
+    beforeEach(function(){
+      this.page.render();
+    })
 
-  context("when the model receives setFromForm", function(){
-    it("it calls mungeAndSave", function(){
-      spyOn(this.page.model, "mungeAndSave")
-      this.page.model.trigger("setFromForm")
-      expect(this.page.model.mungeAndSave).toHaveBeenCalled();
+    describe("clicking next", function(){
+      beforeEach(function(){
+        spyOn(app.router, "navigate")
+        spyOn(this.page.postForm, "setModelAttributes")
+        this.page.$("button.next").click()
+      })
+
+      it("calls tells the form to set the models attributes", function(){
+        expect(this.page.postForm.setModelAttributes).toHaveBeenCalled();
+      });
+
+      it("stores a reference to the form as app.composer" , function(){
+        expect(this.page.model).toBeDefined()
+        expect(app.frame).toBe(this.page.model)
+      });
+
+      it("navigates to the framer", function(){
+        expect(app.router.navigate).toHaveBeenCalledWith("framer", true)
+      });
     })
   })
 });
\ No newline at end of file
diff --git a/spec/javascripts/support/jasmine.yml b/spec/javascripts/support/jasmine.yml
index 0bf5fd76a..81f68950c 100644
--- a/spec/javascripts/support/jasmine.yml
+++ b/spec/javascripts/support/jasmine.yml
@@ -18,8 +18,8 @@ src_files:
   - public/javascripts/vendor/underscore.js
   - public/javascripts/vendor/jquery-1.7.1.min.js
   - public/javascripts/vendor/jquery-ui-1.8.9.custom.min.js
-  - public/javascripts/vendor/bootstrap/bootstrap-popover.js
   - public/javascripts/vendor/bootstrap/bootstrap-twipsy.js
+  - public/javascripts/vendor/bootstrap/bootstrap-popover.js
   - public/javascripts/vendor/jquery.tipsy.js
   - public/javascripts/vendor/jquery.infinitescroll.min.js
   - public/javascripts/vendor/jquery.autoresize.js