diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass
index 32b586213..b97a1e1dc 100644
--- a/app/assets/stylesheets/application.css.sass
+++ b/app/assets/stylesheets/application.css.sass
@@ -15,7 +15,7 @@
 @import 'publisher'
 @import 'facebox'
 @import 'aspects'
-@import 'conversations'
+@import 'popover'
 
 /* ====== media ====== */
 .media
@@ -1854,31 +1854,6 @@ a.toggle_selector
     &.hidden
       :display none
 
-.popover
-  .close
-    @include opacity(0)
-    @include transition(opacity, 0.2s)
-    :position relative
-    :top 1px
-    :right -5px
-    :float right
-    .icons-deletelabel
-      :height 14px
-      :width 14px
-
-    img
-      margin-top: 10px
-
-  &:hover
-    .close
-      @include opacity(0.5)
-
-      &:hover
-        @include opacity(1)
-body
-  .popover
-    :z-index 1000
-
 .nsfw-shield
   @include border-radius(3px)
   :background-color $background-grey
diff --git a/app/assets/stylesheets/conversations.css.scss b/app/assets/stylesheets/conversations.css.scss
index 168497612..597a958dc 100644
--- a/app/assets/stylesheets/conversations.css.scss
+++ b/app/assets/stylesheets/conversations.css.scss
@@ -1,19 +1,77 @@
+.span-24 {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+
+.conversations_container {
+  padding-top: 40px;
+
+  .stream_element {
+    border-bottom: 1px solid $border-grey;
+    &:first-child {
+      border-top: none;
+    }
+    .last_author {
+      font-size: 12px;
+      color: $text-dark-grey;
+    }
+    a.author{
+      font-weight: bold;
+      unicode-bidi: bidi-override;
+    }
+  }
+  .stream .stream_element {
+    padding: 10px;
+    p {
+      margin: 0 0 1em 0;
+      word-wrap: break-word;
+      &:last-child { margin-bottom: 0; }
+    }
+
+    .new_message { border-bottom: none; }
+    .timeago { font-size: smaller; }
+    textarea { width: 95%; }
+    .button.creation {
+      $button-border-color: #aaa;
+      @include border-radius(3px);
+      @include box-shadow(0,1px,1px,#cfcfcf);
+      @include transition(border);
+      @include button-gradient($creation-blue);
+      font-size: 12px;
+      color: #fff;
+      padding: 4px 9px;
+      min-width: 90px;
+      min-height: 10px;
+      border: 1px solid darken($button-border-color,20%);
+
+      cursor: pointer;
+      white-space: nowrap;
+
+      &:hover {
+        @include button-gradient-hover($creation-blue);
+        border: 1px solid darken($button-border-color,35%);
+        text-decoration: none;
+      }
+    }
+  }
+}
+  
 .conversation_participants {
   box-shadow: 0 2px 3px -3px #666;
   -webkit-box-shadow: 0 2px 3px -3px #666;
   -moz-box-shadow: 0 2px 3px -3px #666;
   
   background-color: $background-white;
-  margin-bottom: 10px;
+  margin-bottom: 5px;
   border-bottom: 1px solid $border-grey;
-  padding: 10px;
-  padding-top: 0px;
-  width: 560px;
+  padding: 5px;
   line-height: 0px;
 
   a.close_conversation {
     display: block;
-    margin-top: 5px;
+    margin-top: 10px;
     float: right;
 
     .icons-deletelabel {
@@ -22,12 +80,6 @@
     }
   }
 
-  h3 {
-    margin: 0px;
-    margin-top: 6px;
-    padding-bottom: 10px;
-  }
-
   .avatar {
     height: 30px;
     width: 30px;
@@ -51,20 +103,42 @@
 
 .stream_element.conversation {
   padding: 8px;
+  
+  .subject {
+    font-size: 14px;
+  }
 
   .message_count, .unread_message_count {
     @include border-radius(5px);
     float: right;
-    right: 5px;
-    padding: 0px 5px;
+    padding: 0px 6px;
     position: relative;
     color: $background-grey;
     font-size: 12px;
     font-weight: normal;
   }
   
-  .message_count { background-color: #999; }
-  .unread_message_count { background-color: #b11; }
+  .message_count { 
+    background-color: #999;
+    right: 0px;
+  }
+  .unread_message_count { 
+    background-color: #b11;
+    right: 4px;
+  }
+  
+  .participants_link {
+    clear: right;
+    float: right;
+    color: #aaa;
+  }
+
+  .icons-users {
+    margin-left: 4px;
+    display: block;
+    width: 25px;
+    height: 16px;
+  }
   .participant_count { font-weight: normal; }
 
   .timestamp {
@@ -74,24 +148,18 @@
     color: $blue;
   }
 
-  .participants_link {
-    margin-top: 5px;
-    clear: right;
-    float: right;
-    color: #aaa;
+  .last_message {
+    font-size: 12px;
   }
-
-  .icons-users {
-    display: block;
-    width: 25px;
-    height: 16px;
-  }
-
   .conversation_participants_popover_content {
     display: none;
   }
 
   .conversation_participants_popover {
+    .avatar {
+      margin-bottom: 10px;
+      margin-right: 10px;
+    }
     margin: 0px auto;
     padding-left: 12px;
   }
@@ -100,12 +168,19 @@
     display: inline;
     width: 35px;
     height: 35px;
-    margin-right: 10px;
-    margin-bottom: 10px;
+    margin-top: 5px;
   }
 
   .participants_left { display: block; }
-  &:hover:not(.selected) { background-color: $highlight-white; }
+  &:hover:not(.selected) { 
+    background-color: lighten($blue,5%);
+    .subject,
+    .last_author,
+    .last_message {
+      color: $white;
+    }
+    .timestamp { color: $background-grey; }
+  }
   &.selected:hover { background-color: lighten($blue,5%); }
   &:hover { cursor: pointer; }
 }
@@ -118,32 +193,27 @@
   background-color: $blue;
     
   .subject,
-  .last_author {
+  .last_author,
+  .last_message {
     color: $white;
   }
   .timestamp { color: $background-grey; }
 }
 
 #left_pane {
+  border-right: solid 1px $border-grey;
   h3 {
     padding-bottom: 0;
-    margin-bottom: 15px;
   }
 
   #left_pane_header {
-    position: fixed;
-    top: 50px;
-    width: 320px;
-    height: 40px;
     padding: 10px;
+    padding-right: 20px;
     border-bottom: 1px solid $border-grey;
   }
 
   #conversation_inbox {
-    position: fixed;
     bottom: 0px;
-    top: 125px;
-    width: 350px;
     overflow-y: auto;
     overflow-x: none;
 
diff --git a/app/assets/stylesheets/new-templates.css.scss b/app/assets/stylesheets/new-templates.css.scss
index 4c3c4ecbf..523c14bc0 100644
--- a/app/assets/stylesheets/new-templates.css.scss
+++ b/app/assets/stylesheets/new-templates.css.scss
@@ -26,3 +26,7 @@
 @import 'bootstrap-headerfix';
 @import 'opengraph';
 @import 'single-post-view';
+
+/* conversations */
+@import 'conversations';
+@import 'popover';
diff --git a/app/assets/stylesheets/popover.css.scss b/app/assets/stylesheets/popover.css.scss
new file mode 100644
index 000000000..1e29e5d5f
--- /dev/null
+++ b/app/assets/stylesheets/popover.css.scss
@@ -0,0 +1,28 @@
+.popover {
+  .close {
+    @include opacity(0);
+    @include transition(opacity, 0.2s);
+    position: relative;
+    top: 1px;
+    right: -5px;
+    float: right;
+    .icons-deletelabel {
+      height: 14px;
+      width: 14px;
+    }
+
+    img { margin-top: 10px; }
+  }
+
+  &:hover {
+    .close {
+      @include opacity(0.5);
+
+      &:hover { @include opacity(1); }
+    }
+  }
+}
+body {
+  .popover { z-index: 1000; }
+}
+
diff --git a/app/controllers/conversations_controller.rb b/app/controllers/conversations_controller.rb
index 8b85e43f1..8fae94655 100644
--- a/app/controllers/conversations_controller.rb
+++ b/app/controllers/conversations_controller.rb
@@ -1,5 +1,6 @@
 class ConversationsController < ApplicationController
   before_filter :authenticate_user!
+  before_filter -> { @css_framework = :bootstrap }
 
   respond_to :html, :mobile, :json, :js
 
diff --git a/app/views/conversations/_conversation.haml b/app/views/conversations/_conversation.haml
index 264c3767f..5459acf38 100644
--- a/app/views/conversations/_conversation.haml
+++ b/app/views/conversations/_conversation.haml
@@ -5,21 +5,24 @@
 .conversation-wrapper{ :"data-conversation-path" => conversation_path(conversation) }
   .stream_element.conversation{:data=>{:guid=>conversation.id}, :class => ('unread' if unread_counts[conversation.id].to_i > 0)}
     .media
+      = link_to content_tag(:span, nil, class: 'icons-users', title: t('.participants')), '#', :class => 'participants_link', "data-conversation-id" => conversation.id
+      = render :partial => 'participants_popover', :locals => { :conversation => conversation }
+      = render(:partial => 'conversation_subject',
+                  :locals => { :conversation => conversation,
+                               :unread_count => unread_counts[conversation.id].to_i })
+      
       .img
         - if authors[conversation.id].present?
           = person_image_tag(authors[conversation.id])
 
       .bg
-        = render(:partial => 'conversation_subject',
-                  :locals => { :conversation => conversation,
-                               :unread_count => unread_counts[conversation.id].to_i })
-
+        %time.timeago.timestamp{:datetime => conversation.updated_at.iso8601}
+          = t('ago', :time =>  time_ago_in_words(conversation.updated_at))
         .last_author
-          %time.timeago.timestamp{:datetime => conversation.updated_at.iso8601}
-            = t('ago', :time =>  time_ago_in_words(conversation.updated_at))
 
           - if authors[conversation.id].present?
             = authors[conversation.id].name
+        .last_message
+          - if conversation.messages.present?
+            = conversation.messages.last.text[0..40]
  
-          = link_to content_tag(:span, nil, class: 'icons-users', title: t('.participants')), '#', :class => 'participants_link', "data-conversation-id" => conversation.id
-          = render :partial => 'participants_popover', :locals => { :conversation => conversation }
diff --git a/app/views/conversations/_show.haml b/app/views/conversations/_show.haml
index 61b1af12c..3f5e16f65 100644
--- a/app/views/conversations/_show.haml
+++ b/app/views/conversations/_show.haml
@@ -16,16 +16,15 @@
   - for participant in conversation.participants
     = person_image_link(participant, :size => :thumb_small)
 
-.span-15.last
-  .stream
-    = render :partial => 'messages/message', :collection => conversation.messages
+.stream
+  = render :partial => 'messages/message', :collection => conversation.messages
 
-    .stream_element.new_message
-      .media
-        .img
-          = owner_image_tag(:thumb_small)
+  .stream_element.new_message
+    .media
+      .img
+        = owner_image_tag(:thumb_small)
 
-        .bd
-          = form_for [conversation, Message.new] do |message|
-            = message.text_area :text, :rows => 5, :tabindex => 1
-            = message.submit t('.reply').capitalize, 'data-disable-with' => t('.replying'), :class => 'button creation', :tabindex => 2
+      .bd
+        = form_for [conversation, Message.new] do |message|
+          = message.text_area :text, :rows => 5, :tabindex => 1
+          = message.submit t('.reply').capitalize, 'data-disable-with' => t('.replying'), :class => 'button creation', :tabindex => 2
diff --git a/app/views/conversations/index.haml b/app/views/conversations/index.haml
index 115ffe2b0..7151bbcab 100644
--- a/app/views/conversations/index.haml
+++ b/app/views/conversations/index.haml
@@ -12,30 +12,33 @@
 :css
   footer{ display:none;}
 
-#left_pane
-  #left_pane_header
-    %h3
-      .right
-        = link_to t('.new_message'), new_conversation_path, :class => 'button', :rel => 'facebox'
-      = t('.inbox')
+.container-fluid.conversations_container
+  .row-fluid
+    .span4
+      #left_pane
+        #left_pane_header
+          %h3
+            .pull-right
+              = link_to t('.new_message'), new_conversation_path, :class => 'btn btn-default', :rel => 'facebox'
+            = t('.inbox')
 
-  #conversation_inbox
-    .stream.conversations
-      - if @conversations.count > 0
-        = render :partial => 'conversations/conversation', :collection => @conversations, :locals => {:authors => @authors, :unread_counts => @unread_counts}
-      - else
-        #no_conversations
-          = t('.no_messages')
-      = will_paginate @conversations
+        #conversation_inbox
+          .stream.conversations
+            - if @conversations.count > 0
+              = render :partial => 'conversations/conversation', :collection => @conversations, :locals => {:authors => @authors, :unread_counts => @unread_counts}
+            - else
+              #no_conversations
+                = t('.no_messages')
+            = will_paginate @conversations
 
 
-.span-15.prepend-9.last
-  .stream_container
-    #conversation_show
-      - if @conversation
-        = render 'conversations/show', :conversation => @conversation
-      - else
-        #no_conversation_text
-          = t('.no_conversation_selected')
-        #no_conversation_controls
-          = link_to t('.create_a_new_message'), new_conversation_path, :rel => 'facebox'
+    .span8
+      .stream_container
+        #conversation_show
+          - if @conversation
+            = render 'conversations/show', :conversation => @conversation
+          - else
+            #no_conversation_text
+              = t('.no_conversation_selected')
+            #no_conversation_controls
+              = link_to t('.create_a_new_message'), new_conversation_path, :rel => 'facebox'