diff --git a/app/assets/javascripts/app/models/stream.js b/app/assets/javascripts/app/models/stream.js
index 3873f8650f964eb73ab1eeb3130f014208e4878d..459c71056803f8904200944065e085862844f4f8 100644
--- a/app/assets/javascripts/app/models/stream.js
+++ b/app/assets/javascripts/app/models/stream.js
@@ -59,5 +59,12 @@ app.models.Stream = Backbone.Collection.extend({
 
   add : function(models){
     this.items.add(models)
+  },
+
+  preload : function(){
+    var preloadJson = window.preLoadContent && JSON.parse(window.preLoadContent)
+    delete window.preLoadContent // always do this just to be safe in preventing dirty state across navigates
+
+    if(preloadJson) { this.items.reset(preloadJson) }
   }
 });
diff --git a/app/assets/javascripts/app/pages/profile.js b/app/assets/javascripts/app/pages/profile.js
index 1c569f7765d90ff56019aef48ba19583e7563c5e..6625e837e35e793baa5d5153103157b959faaaf6 100644
--- a/app/assets/javascripts/app/pages/profile.js
+++ b/app/assets/javascripts/app/pages/profile.js
@@ -1,12 +1,13 @@
 //= require ../views/small_frame
+//= require ../views/profile_info_view
 
 app.pages.Profile = app.views.Base.extend({
-
   className : "container",
 
   templateName : "profile",
 
   subviews : {
+    "#profile-info" : "profileInfo",
     "#canvas" : "canvasView"
   },
 
@@ -19,10 +20,10 @@ app.pages.Profile = app.views.Base.extend({
   initialize : function(options) {
     this.model = new app.models.Profile.findByGuid(options.personId)
     this.stream = options && options.stream || new app.models.Stream()
-    this.stream.fetch();
-    this.model.bind("change", this.render, this) //this should go on profile info view when it gets Extracted
+    this.stream.preload()
 
-    this.canvasView = new app.views.Canvas({model : this.stream})
+    this.canvasView = new app.views.Canvas({ model : this.stream })
+    this.profileInfo = new app.views.ProfileInfo({ model : this.model })
   },
 
   toggleEdit : function(evt) {
@@ -30,5 +31,4 @@ app.pages.Profile = app.views.Base.extend({
     this.editMode = !this.editMode
     this.$el.toggleClass("edit-mode")
   }
-
 });
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views.js b/app/assets/javascripts/app/views.js
index 29051fa010228e4bc56d97b7d332d1d4e5145124..b385554250b51507f79220227911d202500ac5bb 100644
--- a/app/assets/javascripts/app/views.js
+++ b/app/assets/javascripts/app/views.js
@@ -89,7 +89,8 @@ app.views.infiniteScrollMixin = {
     this.bind("loadMore", this.fetchAndshowLoader, this)
     this.stream.bind("fetched", this.hideLoader, this)
     this.stream.bind("allItemsLoaded", this.unbindInfScroll, this)
-    this.collection.bind("add", this.addPost, this);
+
+    this.collection.bind("add", this.addPostView, this);
 
     var throttledScroll = _.throttle(_.bind(this.infScroll, this), 200);
     $(window).scroll(throttledScroll);
@@ -99,12 +100,15 @@ app.views.infiniteScrollMixin = {
     if(this.stream.isFetching()) { this.showLoader() }
   },
 
-  addPost : function(post) {
-    var postView = new this.postClass({ model: post })
-      , placeInStream = (this.collection.at(0).id == post.id) ? "prepend" : "append";
-
-    this.$el[placeInStream](postView.render().el);
+  createPostView : function(post){
+    var postView = new this.postClass({ model: post });
     this.postViews.push(postView)
+    return postView
+  },
+
+  addPostView : function(post) {
+    var placeInStream = (this.collection.at(0).id == post.id) ? "prepend" : "append";
+    this.$el[placeInStream](this.createPostView(post).render().el);
   },
 
   unbindInfScroll : function() {
@@ -122,7 +126,7 @@ app.views.infiniteScrollMixin = {
   },
 
   hideLoader: function() {
-    $("#paginate .loader").addClass("hidden")
+      $("#paginate .loader").addClass("hidden")
   },
 
   infScroll : function() {
diff --git a/app/assets/javascripts/app/views/canvas_view.js b/app/assets/javascripts/app/views/canvas_view.js
index d356791cf1bea66319d82aec0e188434ab4bea2f..20122214c648b1dc7c0ecf07406d8c4e864b8acf 100644
--- a/app/assets/javascripts/app/views/canvas_view.js
+++ b/app/assets/javascripts/app/views/canvas_view.js
@@ -1,19 +1,26 @@
-app.views.Canvas = app.views.Base.extend(_.extend(app.views.infiniteScrollMixin, {
+app.views.Canvas = app.views.Base.extend(_.extend({}, app.views.infiniteScrollMixin,  {
   initialize: function(){
     this.stream = this.model
     this.collection = this.stream.items
-    this.postClass = app.views.SmallFrame,
+    this.postClass = app.views.SmallFrame
     this.setupInfiniteScroll()
   },
 
   renderTemplate : function() {
-    this.postRenderTemplate();
-    //setTimeout(_.bind(this.mason, this), 1000)
+    this.stream.items.each(_.bind(function(post){
+      this.$el.append(this.createPostView(post).render().el);
+    }, this))
+    //needs to be defered so it happens after html rendering finishes
+    _.defer(_.bind(this.mason, this))
   },
 
-  mason : function() {
+  addPostView : function(post) {
+    _.defer(_.bind(function(){ this.$el.isotope("insert", this.createPostView(post).render().$el) }, this))
+  },
+
+    mason : function() {
     this.$el.isotope({
       itemSelector : '.canvas-frame'
     })
   }
-}))
+}));
diff --git a/app/assets/javascripts/app/views/profile_info_view.js b/app/assets/javascripts/app/views/profile_info_view.js
new file mode 100644
index 0000000000000000000000000000000000000000..f94f6d2235c2651975cbf84e184baca1c52ab6ca
--- /dev/null
+++ b/app/assets/javascripts/app/views/profile_info_view.js
@@ -0,0 +1,7 @@
+app.views.ProfileInfo = app.views.Base.extend({
+  templateName : "profile-info",
+
+  initialize : function(){
+    this.model.bind("change", this.render, this) //this should go on profile info view when it gets Extracted
+  }
+})
\ No newline at end of file
diff --git a/app/assets/stylesheets/new_styles/_spinner.scss b/app/assets/stylesheets/new_styles/_spinner.scss
index 0e9c72ba11813ebc2378eb46678042e5bee43b4b..25b39218475ae3fe27797ffeef945d4e4f2a3488 100644
--- a/app/assets/stylesheets/new_styles/_spinner.scss
+++ b/app/assets/stylesheets/new_styles/_spinner.scss
@@ -8,6 +8,11 @@
 
   .loader {
     display: inline-block;
+
+    &.hidden{
+      display : none;
+    }
+
     width : 14px;
     height: 14px;
     background-image : url(asset_path("static-loader.png", "image"))
diff --git a/app/assets/templates/profile-info.jst.hbs b/app/assets/templates/profile-info.jst.hbs
new file mode 100644
index 0000000000000000000000000000000000000000..ef9608aa94263fc2638302ebc25115805f03939d
--- /dev/null
+++ b/app/assets/templates/profile-info.jst.hbs
@@ -0,0 +1,7 @@
+<h1>{{full_name}}</h1>
+<dl>
+    <dt>Location:</dt><dd>{{location}}</dd>
+    <dt>Bio:</dt><dd>{{bio}}</dd>
+    <dt>Birthday:</dt><dd>{{birthday}}</dd>
+    <dt>Gender:</dt><dd>{{gender}}</dd>
+</dl>
\ No newline at end of file
diff --git a/app/assets/templates/profile.jst.hbs b/app/assets/templates/profile.jst.hbs
index 7e4d648029fc2b9f06ef2897a7ad84fe0f1fcbd3..0fc16c89544e7c5b76589dfc87ea73eaf6bdfa99 100644
--- a/app/assets/templates/profile.jst.hbs
+++ b/app/assets/templates/profile.jst.hbs
@@ -2,15 +2,7 @@
     editing...
 </div>
 
-<section id="profile_info">
-    <h1>{{full_name}}</h1>
-    <dl>
-        <dt>Location:</dt><dd>{{location}}</dd>
-        <dt>Bio:</dt><dd>{{bio}}</dd>
-        <dt>Birthday:</dt><dd>{{birthday}}</dd>
-        <dt>Gender:</dt><dd>{{gender}}</dd>
-    </dl>
-</section>
+<section id="profile-info"/>
 
 <a href="/posts/new">COMPOSE</a> |
 <a href="#" id="edit-mode-toggle">EDIT</a>
diff --git a/app/controllers/people_controller.rb b/app/controllers/people_controller.rb
index 3a38809640587804f21fe4061d9d45ed844dde30..5684cf359d4693674754c508fbe0f2a1df5b1d50 100644
--- a/app/controllers/people_controller.rb
+++ b/app/controllers/people_controller.rb
@@ -123,7 +123,7 @@ class PeopleController < ApplicationController
       format.all do
         if params[:ex]
           @page = :experimental
-          render 'experimental', :layout => 'post'
+          render :text => @stream.stream_posts.as_api_response(:backbone).to_json, :layout => 'post'
         else
           respond_with @person, :locals => {:post_type => :all}
         end
diff --git a/app/views/layouts/post.html.haml b/app/views/layouts/post.html.haml
index ae393cd621a6e8eac08ebf694cbbd3304b8dcbb8..25e7711dad01a8bd6ae36d92cdf02a1da62e8c12 100644
--- a/app/views/layouts/post.html.haml
+++ b/app/views/layouts/post.html.haml
@@ -55,5 +55,4 @@
   %body
     = flash_messages
     #container
-
-    = yield
+    = javascript_tag  "window.preLoadContent = '#{escape_javascript(yield)}'"
diff --git a/spec/javascripts/app/pages/profile_spec.js b/spec/javascripts/app/pages/profile_spec.js
index ab0032ecca89e2ac7aa3f588afe307f7cf1d02db..23db4a1bbe3d3da9f14db4a92ede09d5f12bb927 100644
--- a/spec/javascripts/app/pages/profile_spec.js
+++ b/spec/javascripts/app/pages/profile_spec.js
@@ -18,10 +18,10 @@ describe("app.pages.Profile", function(){
     expect(this.page.canvasView.model).toBe(this.stream)
   });
 
-  it("fetches the stream for the user", function(){
-    spyOn(this.stream, "fetch")
+  it("preloads the stream for the user", function(){
+    spyOn(this.stream, "preload")
     new app.pages.Profile({stream : this.stream})
-    expect(this.stream.fetch).toHaveBeenCalled()
+    expect(this.stream.preload).toHaveBeenCalled()
   })
 
   describe("rendering", function(){
diff --git a/spec/javascripts/app/views/photos_view_spec.js b/spec/javascripts/app/views/photos_view_spec.js
index 2a240e8569451992ade92e21fbcf33d8ada01e00..6c24f5e6e57dd206b027190ec59f0ce8e42346e6 100644
--- a/spec/javascripts/app/views/photos_view_spec.js
+++ b/spec/javascripts/app/views/photos_view_spec.js
@@ -12,7 +12,7 @@ describe("app.views.Photos", function() {
     // do this manually because we've moved loadMore into render??
     this.view.render();
     _.each(this.view.collection.models, function(photo) {
-      this.view.addPost(photo);
+      this.view.addPostView(photo);
     }, this);
   });
 
diff --git a/spec/javascripts/app/views/stream_view_spec.js b/spec/javascripts/app/views/stream_view_spec.js
index 616c1d4a8aaa680831c768f6295895c8b3b9ab6e..0e98fff70720cdbbe1e030beed1cff3893b6f2cc 100644
--- a/spec/javascripts/app/views/stream_view_spec.js
+++ b/spec/javascripts/app/views/stream_view_spec.js
@@ -12,7 +12,7 @@ describe("app.views.Stream", function() {
     // do this manually because we've moved loadMore into render??
     this.view.render();
     _.each(this.view.collection.models, function(post) {
-      this.view.addPost(post);
+      this.view.addPostView(post);
     }, this);
   });