diff --git a/app/presenters/post_presenter.rb b/app/presenters/post_presenter.rb
index 41440bd27..7f5aaae32 100644
--- a/app/presenters/post_presenter.rb
+++ b/app/presenters/post_presenter.rb
@@ -22,7 +22,8 @@ class PostPresenter
         :previous_post => self.previous_post_path,
         :likes => self.likes,
         :reshares => self.reshares,
-        :comments => self.comments
+        :comments => self.comments,
+        :participations => self.participations
       }),
       :templateName => template_name
     }
@@ -40,6 +41,11 @@ class PostPresenter
     as_api(post.reshares)
   end
 
+  def participations
+    as_api(post.participations)
+  end
+
+
   def user_like
     return unless user_signed_in?
     if like = post.likes.where(:author_id => person.id).first
diff --git a/public/javascripts/app/models/post.js b/public/javascripts/app/models/post.js
index d2dd9b6a6..43252fc0c 100644
--- a/public/javascripts/app/models/post.js
+++ b/public/javascripts/app/models/post.js
@@ -41,7 +41,7 @@ app.models.Post = Backbone.Model.extend({
     var self = this;
     this.participations.create({}, {success : function(resp){
       self.set(resp.attributes.post)
-      self.trigger('feedback', self)
+      self.trigger('interacted', self)
     }});
   },
 
@@ -52,7 +52,7 @@ app.models.Post = Backbone.Model.extend({
 
     participationModel.destroy({success : function(model, resp){
       self.set(resp.post);
-      self.trigger('feedback', this)
+      self.trigger('interacted', this)
     }});
   },
 
@@ -69,7 +69,7 @@ app.models.Post = Backbone.Model.extend({
     var self = this;
     this.likes.create({}, {success : function(resp){
       self.set(resp.get("post"))
-      self.trigger('feedback', self)
+      self.trigger('interacted', self)
     }});
   },
 
@@ -80,7 +80,7 @@ app.models.Post = Backbone.Model.extend({
 
     likeModel.destroy({success : function(model, resp) {
       self.set(resp.post);
-      self.trigger('feedback', this)
+      self.trigger('interacted', this)
     }});
   }
 });
diff --git a/public/javascripts/app/pages/post-viewer.js b/public/javascripts/app/pages/post-viewer.js
index 61cd0a0bc..74f3733c4 100644
--- a/public/javascripts/app/pages/post-viewer.js
+++ b/public/javascripts/app/pages/post-viewer.js
@@ -5,7 +5,7 @@ app.pages.PostViewer = app.views.Base.extend({
   subviews : {
     "#post-content" : "postView",
     "#post-nav" : "navView",
-    "#post-feedback" : "feedbackView",
+    "#post-feedback" : "interactionsView",
     "#header-container" : "authorView"
   },
 
@@ -22,9 +22,8 @@ app.pages.PostViewer = app.views.Base.extend({
     return new app.views.PostViewerNav({ model : this.model })
   },
 
-  feedbackView : function() {
-    if(!window.app.user()) { return null }
-    return new app.views.PostViewerFeedback({ model : this.model })
+  interactionsView : function() {
+    return new app.views.PostViewerInteractions({ model : this.model })
   },
 
   authorView : function() {
diff --git a/public/javascripts/app/templates/post-viewer.handlebars b/public/javascripts/app/templates/post-viewer.handlebars
index 3c690065f..f2ace3ec2 100644
--- a/public/javascripts/app/templates/post-viewer.handlebars
+++ b/public/javascripts/app/templates/post-viewer.handlebars
@@ -10,33 +10,86 @@
 
 <!-- extraction needed! -->
 
-<div id="post-reactions">
+<div id="post-interactions">
+
   <div id="post-feedback"></div>
 
-  <div id="post-interactions" style="display:none;">
-    <div id="post-interactions-container">
-      <div id="post-comments">
-        {{#each last_three_comments}}
-          <div class="post-comment media">
-            <div class="img">
-              <a href="/people/{{author.guid}}" class="author-name">
-                <img src="{{author.avatar.small}}" class="avatar smaller"/>
-              </a>
-            </div>
+  <div id="post-info" style="display:none;">
+    <div id="post-info-container">
 
-            <div class="bd">
-              <div>
+      <div id="post-reactions">
+        <div class="well media">
+          <div class="img">
+            <i class="icon-heart icon-red"></i>
+          </div>
+          <div id="post-likes" class="bd">
+            {{#each likes}}
+              {{#with author}}
+                <a href="/people/{{guid}}">
+                  <img src="{{avatar.small}}" class="avatar micro" title="{{name}}"/ >
+                </a>
+              {{/with}}
+            {{/each}}
+          </div>
+        </div>
+
+        <div id="post-follows">
+          <div class="well media">
+            <div class="img">
+              <i class="icon-plus icon-green"></i>
+            </div>
+            <div id="post-likes" class="bd">
+              {{#each participations}}
+                {{#with author}}
+                  <a href="/people/{{guid}}">
+                    <img src="{{avatar.small}}" class="avatar micro" title="{{name}}"/ >
+                  </a>
+                {{/with}}
+              {{/each}}
+            </div>
+          </div>
+        </div>
+
+        <div id="post-reshares">
+          <div class="well media">
+            <div class="img">
+              <i class="icon-retweet icon-blue"></i>
+            </div>
+            <div id="post-likes" class="bd">
+              {{#each reshares}}
+                {{#with author}}
+                  <a href="/people/{{guid}}">
+                    <img src="{{avatar.small}}" class="avatar micro" title="{{name}}"/ >
+                  </a>
+                {{/with}}
+              {{/each}}
+            </div>
+          </div>
+        </div>
+
+        <div id="post-comments">
+          {{#each last_three_comments}}
+            <div class="post-comment media">
+              <div class="img">
                 <a href="/people/{{author.guid}}" class="author-name">
-                  {{author.name}}
+                  <img src="{{author.avatar.small}}" class="avatar smaller"/>
                 </a>
               </div>
 
-              <div class="comment-content">
-                {{text}}
+              <div class="bd">
+                <div>
+                  <a href="/people/{{author.guid}}" class="author-name">
+                    {{author.name}}
+                  </a>
+                </div>
+
+                <div class="comment-content">
+                  {{text}}
+                </div>
               </div>
             </div>
-          </div>
-        {{/each}}
+          {{/each}}
+        </div>
       </div>
 
       <div id="new-post-comment">
diff --git a/public/javascripts/app/templates/post-viewer/interactions.handlebars b/public/javascripts/app/templates/post-viewer/interactions.handlebars
new file mode 100644
index 000000000..8bfc0ef3c
--- /dev/null
+++ b/public/javascripts/app/templates/post-viewer/interactions.handlebars
@@ -0,0 +1,88 @@
+<div id="post-feedback"></div>
+
+<div id="post-info" style="display:none;">
+  <div id="post-info-container">
+
+    <div id="post-reactions">
+      <div class="well media">
+        <div class="img">
+          <i class="icon-heart icon-red"></i>
+        </div>
+        <div id="post-likes" class="bd">
+          {{#each likes}}
+            {{#with author}}
+              <a href="/people/{{guid}}">
+                <img src="{{avatar.small}}" class="avatar micro" title="{{name}}"/ >
+              </a>
+            {{/with}}
+          {{/each}}
+        </div>
+      </div>
+
+      <div id="post-follows">
+        <div class="well media">
+          <div class="img">
+            <i class="icon-plus icon-green"></i>
+          </div>
+          <div id="post-likes" class="bd">
+            {{#each participations}}
+              {{#with author}}
+                <a href="/people/{{guid}}">
+                  <img src="{{avatar.small}}" class="avatar micro" title="{{name}}"/ >
+                </a>
+              {{/with}}
+            {{/each}}
+          </div>
+        </div>
+      </div>
+
+      <div id="post-reshares">
+        <div class="well media">
+          <div class="img">
+            <i class="icon-retweet icon-blue"></i>
+          </div>
+          <div id="post-likes" class="bd">
+            {{#each reshares}}
+              {{#with author}}
+                <a href="/people/{{guid}}">
+                  <img src="{{avatar.small}}" class="avatar micro" title="{{name}}"/ >
+                </a>
+              {{/with}}
+            {{/each}}
+          </div>
+        </div>
+      </div>
+
+      <div id="post-comments">
+        {{#each last_three_comments}}
+          <div class="post-comment media">
+            <div class="img">
+              <a href="/people/{{author.guid}}" class="author-name">
+                <img src="{{author.avatar.small}}" class="avatar smaller"/>
+              </a>
+            </div>
+
+            <div class="bd">
+              <div>
+                <a href="/people/{{author.guid}}" class="author-name">
+                  {{author.name}}
+                </a>
+              </div>
+
+              <div class="comment-content">
+                {{text}}
+              </div>
+            </div>
+          </div>
+        {{/each}}
+      </div>
+    </div>
+
+    <div id="new-post-comment">
+      <div id="new-post-comment-container">
+        <textarea class="new-comment-text" placeholder="Comment"></textarea>
+      </div>
+    </div>
+
+  </div>
+</div>
diff --git a/public/javascripts/app/templates/post-viewer/reactions.handlebars b/public/javascripts/app/templates/post-viewer/reactions.handlebars
new file mode 100644
index 000000000..56bb63c9b
--- /dev/null
+++ b/public/javascripts/app/templates/post-viewer/reactions.handlebars
@@ -0,0 +1,72 @@
+<div class="well media">
+  <div class="img">
+    <i class="icon-heart icon-red"></i>
+  </div>
+  <div id="post-likes" class="bd">
+    {{#each likes}}
+      {{#with author}}
+        <a href="/people/{{guid}}">
+          <img src="{{avatar.small}}" class="avatar micro" title="{{name}}"/ >
+        </a>
+      {{/with}}
+    {{/each}}
+  </div>
+</div>
+
+<div id="post-follows">
+  <div class="well media">
+    <div class="img">
+      <i class="icon-plus icon-green"></i>
+    </div>
+    <div id="post-likes" class="bd">
+      {{#each participations}}
+        {{#with author}}
+          <a href="/people/{{guid}}">
+            <img src="{{avatar.small}}" class="avatar micro" title="{{name}}"/ >
+          </a>
+        {{/with}}
+      {{/each}}
+    </div>
+  </div>
+</div>
+
+<div id="post-reshares">
+  <div class="well media">
+    <div class="img">
+      <i class="icon-retweet icon-blue"></i>
+    </div>
+    <div id="post-likes" class="bd">
+      {{#each reshares}}
+        {{#with author}}
+          <a href="/people/{{guid}}">
+            <img src="{{avatar.small}}" class="avatar micro" title="{{name}}"/ >
+          </a>
+        {{/with}}
+      {{/each}}
+    </div>
+  </div>
+</div>
+
+<div id="post-comments">
+  {{#each last_three_comments}}
+    <div class="post-comment media">
+      <div class="img">
+        <a href="/people/{{author.guid}}" class="author-name">
+          <img src="{{author.avatar.small}}" class="avatar smaller"/>
+        </a>
+      </div>
+
+      <div class="bd">
+        <div>
+          <a href="/people/{{author.guid}}" class="author-name">
+            {{author.name}}
+          </a>
+        </div>
+
+        <div class="comment-content">
+          {{text}}
+        </div>
+      </div>
+    </div>
+  {{/each}}
+</div>
diff --git a/public/javascripts/app/views/feedback_view.js b/public/javascripts/app/views/feedback_view.js
index ec412a920..62a5551c2 100644
--- a/public/javascripts/app/views/feedback_view.js
+++ b/public/javascripts/app/views/feedback_view.js
@@ -11,7 +11,7 @@ app.views.Feedback = app.views.Base.extend({
   },
 
   initialize : function() {
-    this.model.bind('feedback', this.render, this);
+    this.model.bind('interacted', this.render, this);
   },
 
   presenter : function() {
@@ -42,7 +42,7 @@ app.views.Feedback = app.views.Base.extend({
         app.stream && app.stream.add(reshare);
 
         model.set(resp.get("post"))
-        model.trigger("feedback")
+        model.trigger("interacted")
       }
     });
   },
diff --git a/public/javascripts/app/views/post_feedback_view.js b/public/javascripts/app/views/post_feedback_view.js
index e3ed6ac5d..07e9cc892 100644
--- a/public/javascripts/app/views/post_feedback_view.js
+++ b/public/javascripts/app/views/post_feedback_view.js
@@ -9,6 +9,7 @@ app.views.PostViewerFeedback = app.views.Feedback.extend({
     "click .like" : "toggleLike",
     "click .follow" : "toggleFollow",
     "click .reshare" : "resharePost",
+
     "click .comment" : "comment"
   },
 
@@ -16,7 +17,10 @@ app.views.PostViewerFeedback = app.views.Feedback.extend({
 
   comment : function(evt){
     if(evt) { evt.preventDefault() }
-    $("#post-interactions").slideToggle()
+    $("#post-info").slideToggle()
+
+    this.removeTooltips()
+    console.log(this.model)
   }
 
 })
diff --git a/public/javascripts/app/views/post_interactions_view.js b/public/javascripts/app/views/post_interactions_view.js
new file mode 100644
index 000000000..684e11555
--- /dev/null
+++ b/public/javascripts/app/views/post_interactions_view.js
@@ -0,0 +1,21 @@
+app.views.PostViewerInteractions = app.views.Base.extend({
+
+  className : "",
+
+  subviews : {
+    "#post-feedback" : "feedbackView",
+    "#post-reactions" : "reactionsView"
+  },
+
+  templateName: "post-viewer/interactions",
+
+  feedbackView : function() {
+    if(!window.app.user()) { return null }
+    return new app.views.PostViewerFeedback({ model : this.model })
+  },
+
+  reactionsView : function() {
+    if(!window.app.user()) { return null }
+    return new app.views.PostViewerReactions({ model : this.model })
+  }
+})
diff --git a/public/javascripts/app/views/post_reactions_view.js b/public/javascripts/app/views/post_reactions_view.js
new file mode 100644
index 000000000..700dd0d61
--- /dev/null
+++ b/public/javascripts/app/views/post_reactions_view.js
@@ -0,0 +1,13 @@
+app.views.PostViewerReactions = app.views.Base.extend({
+
+  className : "",
+
+  templateName: "post-viewer/reactions",
+
+  events : { },
+
+  initialize : function() {
+    this.model.bind('interacted', this.render, this);
+  },
+
+})
diff --git a/public/stylesheets/sass/new-templates.scss b/public/stylesheets/sass/new-templates.scss
index 848d91803..6f6261b27 100644
--- a/public/stylesheets/sass/new-templates.scss
+++ b/public/stylesheets/sass/new-templates.scss
@@ -38,10 +38,10 @@ $light-grey: #999;
   opacity: $val;
 }
 
-@mixin border-radius($pixels:3px) {
-  -webkit-border-radius: $pixels;
-  -moz-border-radius: $pixels;
-  border-radius: $pixels;
+@mixin border-radius($top:3px, $bottom:$top) {
+  -webkit-border-radius: $top $top $bottom $bottom;
+  -moz-border-radius: $top $top $bottom $bottom;
+  border-radius: $top $top $bottom $bottom;
 }
 
 @mixin transition($type, $speed) {
@@ -256,9 +256,16 @@ $light-grey: #999;
   padding: 20px;
 }
 
-.avatar.smaller {
-  height: 35px;
-  width: 35px;
+.avatar {
+  &.micro {
+    height: 20px;
+    width: 20px;
+  }
+
+  &.smaller {
+    height: 35px;
+    width: 35px;
+  }
 }
 
 .author-name {
@@ -298,7 +305,7 @@ $light-grey: #999;
   }
 }
 
-#post-reactions {
+#post-interactions {
   position: fixed;
   width: 100%;
   bottom: 0;
@@ -306,13 +313,17 @@ $light-grey: #999;
   text-align: center;
 }
 
-#post-interactions {
+#post-reactions {
+  overflow: auto;
+}
+
+#post-info {
   @include center(horizontal);
   z-index: 20;
 
-  #post-interactions-container {
-    @include box-shadow(0, 6px, 15px, #000);
-    @include border-radius();
+  #post-info-container {
+    @include box-shadow(0, 6px, 20px, #000);
+    @include border-radius(3px, 0px);
 
     border-top: 1px solid #555;
     border-right: 1px solid #444;
@@ -325,11 +336,35 @@ $light-grey: #999;
     color: #ccc;
   }
 
+  .well {
+    margin: 5px;
+    padding: 5px;
+    text-align: left;
+
+    max-height: 20px;
+    overflow: hidden;
+
+    background: {
+      color: #222;
+      color: rgba(0,0,0,0.3);
+    }
+
+    border: {
+      bottom: 1px solid #444;
+      top: 1px solid #111;
+    }
+
+    .avatar {
+      @include border-radius();
+      margin-right: 2px;
+    }
+
+  }
+
   #post-comments {
     text-align: left;
     padding-top: 0;
     max-height: 500px;
-    overflow: auto;
   }
 
   #new-post-comment {
diff --git a/spec/javascripts/app/views/feedback_view_spec.js b/spec/javascripts/app/views/feedback_view_spec.js
index 57988cf75..2620919b4 100644
--- a/spec/javascripts/app/views/feedback_view_spec.js
+++ b/spec/javascripts/app/views/feedback_view_spec.js
@@ -19,7 +19,7 @@ describe("app.views.Feedback", function(){
   describe("triggers", function() {
     it('re-renders when the model triggers feedback', function(){
       spyOn(this.view, "postRenderTemplate")
-      this.view.model.trigger("feedback")
+      this.view.model.trigger("interacted")
       expect(this.view.postRenderTemplate).toHaveBeenCalled()
     })
   })