diff --git a/internal_packages/composer/lib/new-compose-button.cjsx b/internal_packages/composer/lib/new-compose-button.cjsx
index 033a52e48..52cd94ef1 100644
--- a/internal_packages/composer/lib/new-compose-button.cjsx
+++ b/internal_packages/composer/lib/new-compose-button.cjsx
@@ -5,10 +5,8 @@ React = require 'react'
 module.exports =
 NewComposeButton = React.createClass
   render: ->
-    <div id="new-compose-button">
-      <button className="btn btn-compose" onClick={@_onNewCompose}>
-        <RetinaImg name="toolbar-compose.png" style={position:'relative', top:-3, left: 3}/>
-      </button>
-    </div>
+    <button style={order: -100} className="btn btn-toolbar" onClick={@_onNewCompose}>
+      <RetinaImg name="toolbar-compose.png" style={position:'relative', top:-3, left: 3}/>
+    </button>
 
   _onNewCompose: -> Actions.composeNewBlankDraft()
diff --git a/internal_packages/composer/stylesheets/composer.less b/internal_packages/composer/stylesheets/composer.less
index e6fe354bf..218650df8 100644
--- a/internal_packages/composer/stylesheets/composer.less
+++ b/internal_packages/composer/stylesheets/composer.less
@@ -262,18 +262,6 @@
 }
 
 
-/////////////////////////////
-// new-compose-button.cjsx //
-/////////////////////////////
-#new-compose-button {
-  order: -100;
-  .btn-compose {
-    margin-top: @spacing-half;
-    margin-left: @spacing-standard;
-  }
-}
-
-
 ///////////////////////////
 // floating-toolbar.cjsx //
 ///////////////////////////
diff --git a/internal_packages/message-list/lib/core-primary-actions.cjsx b/internal_packages/message-list/lib/core-primary-actions.cjsx
deleted file mode 100644
index d43678559..000000000
--- a/internal_packages/message-list/lib/core-primary-actions.cjsx
+++ /dev/null
@@ -1,40 +0,0 @@
-React = require 'react'
-{Actions} = require("inbox-exports")
-
-# Note: These always have a thread, but only sometimes get a
-# message, depending on where in the UI they are being displayed.
-
-module.exports =
-  ReplyButton: React.createClass
-    render: ->
-      <button className="reply-button btn-icon" onClick={@_onReply}><i className="fa fa-mail-reply"></i></button>
-
-    _onReply: (e) ->
-      Actions.composeReply(threadId: @props.thread.id, messageId: @props.message?.id)
-      e.stopPropagation()
-
-  ReplyAllButton: React.createClass
-    render: ->
-      <button className="reply-all-button btn-icon" onClick={@_onReplyAll}><i className="fa fa-mail-reply-all"></i></button>
-
-    _onReplyAll: (e) ->
-      Actions.composeReplyAll(threadId: @props.thread.id, messageId: @props.message?.id)
-      e.stopPropagation()
-
-  ForwardButton: React.createClass
-    render: ->
-      <button className="forward-button btn-icon" onClick={@_onForward}><i className="fa fa-mail-forward"></i></button>
-
-    _onForward: (e) ->
-      Actions.composeForward(threadId: @props.thread.id, messageId: @props.message?.id)
-      e.stopPropagation()
-
-  ArchiveButton: React.createClass
-    render: ->
-      <button className="archive-button btn-icon" onClick={@_onArchive}><i className="fa fa-archive"></i></button>
-
-    _onArchive: (e) ->
-      # Calling archive() sends an Actions.queueTask with an archive task
-      # TODO Turn into an Action
-      @props.thread.archive()
-      e.stopPropagation()
diff --git a/internal_packages/message-list/lib/main.cjsx b/internal_packages/message-list/lib/main.cjsx
index 34f671bf2..3a4c9a65a 100644
--- a/internal_packages/message-list/lib/main.cjsx
+++ b/internal_packages/message-list/lib/main.cjsx
@@ -1,33 +1,17 @@
 React = require "react"
 MessageList = require "./message-list"
+MessageToolbarItems = require "./message-toolbar-items.cjsx"
 {ComponentRegistry} = require 'inbox-exports'
 
-{ReplyButton,
- ReplyAllButton,
- ForwardButton,
- ArchiveButton} = require "./core-primary-actions.cjsx"
-
 module.exports =
   item: null # The DOM item the main React component renders into
 
   activate: (@state={}) ->
     # Register Message List Actions we provide globally
     ComponentRegistry.register
-      name: 'edgehill-reply-button'
-      role: 'MessageListPrimaryAction'
-      view: ReplyButton
-    ComponentRegistry.register
-      name: 'edgehill-reply-all-button'
-      role: 'MessageListPrimaryAction'
-      view: ReplyAllButton
-    ComponentRegistry.register
-      name: 'edgehill-forward-button'
-      role: 'MessageListPrimaryAction'
-      view: ForwardButton
-    ComponentRegistry.register
-      name: 'edgehill-archive-button'
-      role: 'MessageListPrimaryAction'
-      view: ArchiveButton
+      name: 'MessageToolbarItems'
+      role: 'MessageList:Toolbar'
+      view: MessageToolbarItems
 
     ComponentRegistry.register
       name: 'MessageList'
@@ -35,10 +19,7 @@ module.exports =
       view: MessageList
 
   deactivate: ->
-    ComponentRegistry.unregister 'edgehill-reply-button'
-    ComponentRegistry.unregister 'edgehill-reply-all-button'
-    ComponentRegistry.unregister 'edgehill-forward-button'
-    ComponentRegistry.unregister 'edgehill-archive-button'
+    ComponentRegistry.unregister 'MessageToolbarItems'
     ComponentRegistry.unregister 'MessageList'
 
   serialize: -> @state
diff --git a/internal_packages/message-list/lib/message-list.cjsx b/internal_packages/message-list/lib/message-list.cjsx
index e163e3335..1c5467fff 100755
--- a/internal_packages/message-list/lib/message-list.cjsx
+++ b/internal_packages/message-list/lib/message-list.cjsx
@@ -54,12 +54,6 @@ MessageList = React.createClass
       </div>
     </div>
 
-  _messageListPrimaryActions: ->
-    MLActions = ComponentRegistry.findAllViewsByRole('MessageListPrimaryAction')
-    <div className="primary-actions-bar">
-      {<MLAction thread={@state.current_thread} /> for MLAction in MLActions}
-    </div>
-
   _messageListNotificationBars: ->
     MLBars = ComponentRegistry.findAllViewsByRole('MessageListNotificationBar')
     <div className="message-list-notification-bar-wrap">
@@ -151,10 +145,6 @@ MessageList = React.createClass
   # TODO Add actions and notifications back in.
   _oldMessageListHeaders: ->
     return <div></div>
-    <div className="message-list-primary-actions">
-      {@_messageListPrimaryActions()}
-    </div>
-
     <div className="message-list-notification-bars">
       {@_messageListNotificationBars()}
     </div>
diff --git a/internal_packages/message-list/lib/message-toolbar-items.cjsx b/internal_packages/message-list/lib/message-toolbar-items.cjsx
new file mode 100644
index 000000000..34ba66c45
--- /dev/null
+++ b/internal_packages/message-list/lib/message-toolbar-items.cjsx
@@ -0,0 +1,78 @@
+React = require 'react'
+{Actions, ThreadStore} = require 'inbox-exports'
+{RetinaImg} = require 'ui-components'
+
+# Note: These always have a thread, but only sometimes get a
+# message, depending on where in the UI they are being displayed.
+
+ReplyButton = React.createClass
+  render: ->
+    <button className="btn btn-toolbar" onClick={@_onReply}>
+      <RetinaImg name="toolbar-reply.png" />
+    </button>
+
+  _onReply: (e) ->
+    Actions.composeReply(threadId: ThreadStore.selectedId())
+    e.stopPropagation()
+
+ReplyAllButton = React.createClass
+  render: ->
+    <button className="btn btn-toolbar" onClick={@_onReplyAll}>
+      <RetinaImg name="toolbar-reply-all.png" />
+    </button>
+
+  _onReplyAll: (e) ->
+    Actions.composeReplyAll(threadId: ThreadStore.selectedId())
+    e.stopPropagation()
+
+ForwardButton = React.createClass
+  render: ->
+    <button className="btn btn-toolbar" onClick={@_onForward}>
+      <RetinaImg name="toolbar-forward.png" />
+    </button>
+
+  _onForward: (e) ->
+    Actions.composeForward(threadId: ThreadStore.selectedId())
+    e.stopPropagation()
+
+ArchiveButton = React.createClass
+  render: ->
+    <button className="btn btn-toolbar" onClick={@_onArchive}>
+      <RetinaImg name="toolbar-archive.png" />
+    </button>
+
+  _onArchive: (e) ->
+    # Calling archive() sends an Actions.queueTask with an archive task
+    # TODO Turn into an Action
+    ThreadStore.selectedThread().archive()
+    e.stopPropagation()
+
+
+module.exports = React.createClass
+  getInitialState: ->
+    threadIsSelected: false
+
+  render: ->
+    classes = React.addons.classSet
+      "message-toolbar-items": true
+      "hidden": !@state.threadIsSelected
+
+    <div className={classes}>
+      <div className="message-toolbar-items-inner">
+        <ReplyButton />
+        <ReplyAllButton />
+        <ForwardButton />
+        <ArchiveButton />
+      </div>
+    </div>
+
+  componentDidMount: ->
+    @_unsubscribers = []
+    @_unsubscribers.push ThreadStore.listen @_onChange
+
+  componentWillUnmount: ->
+    unsubscribe() for unsubscribe in @_unsubscribers
+
+  _onChange: ->
+    @setState
+      threadIsSelected: ThreadStore.selectedId()?
diff --git a/internal_packages/message-list/stylesheets/message-list.less b/internal_packages/message-list/stylesheets/message-list.less
index 44c87d651..f7f67de39 100644
--- a/internal_packages/message-list/stylesheets/message-list.less
+++ b/internal_packages/message-list/stylesheets/message-list.less
@@ -1,6 +1,32 @@
 @import "ui-variables";
 @import "ui-mixins";
 
+@message-max-width: 800px;
+
+// This class wraps the items that appear above the message list in the
+// toolbar. We want the toolbar items to sit right above the centered
+// content, so we need another 800px-wide container in the toolbar...
+.message-toolbar-items {
+  order: -100;
+  width: 100%;
+  text-align: center;
+  position: absolute;
+  pointer-events: none;
+  transition: opacity .25s ease-in-out;
+
+  .message-toolbar-items-inner {
+    margin: auto;
+    max-width: @message-max-width - @spacing-three-quarters*2;
+    text-align: left;
+    pointer-events: auto;
+  }
+}
+
+// .message-toolbar-items also fades in and out when you select / deselect
+.message-toolbar-items.hidden {
+  opacity: 0;
+}
+
 #message-list {
   position: relative;
 
@@ -27,7 +53,7 @@
     padding: @spacing-double;
     padding-bottom: @spacing-standard;
     width: 100%;
-    max-width: 800px;
+    max-width: @message-max-width;
 
     .participants {
       .contact-chip {
@@ -36,29 +62,6 @@
     }
   }
 
-  // .message-list-primary-actions {
-  //   z-index: 2;
-  //   -webkit-user-select: none;
-  //   padding-top: 6px;
-  //   padding-bottom: 5px;
-  //   padding-left:13px;
-  //   background-color: @background-color;
-  //   border-bottom:1px solid @border-color;
-  //
-  //   .primary-actions-bar {
-  //     width: 100%;
-  //     font-size: 21px;
-  //     line-height: 2;
-  //     .btn-icon {
-  //       padding-top: 0;
-  //       padding-bottom: 0;
-  //     }
-  //     .btn {
-  //       margin-left: 4px;
-  //     }
-  //   }
-  // }
-
   .message-item-wrap {
     position: relative;
     width: 100%;
@@ -73,7 +76,7 @@
 
   .message-item-area {
     width: 100%;
-    max-width: 800px;
+    max-width: @message-max-width;
     margin: 0 auto;
     padding: @spacing-standard @spacing-double;
 
diff --git a/src/sheet.cjsx b/src/sheet.cjsx
index dea4ed907..060a79393 100644
--- a/src/sheet.cjsx
+++ b/src/sheet.cjsx
@@ -90,11 +90,25 @@ Sheet = React.createClass
       </Flexbox>
     </div>
 
+  # Load components that are part of our sheet. For each column,
+  # (eg 'Center') we look for items with a matching `role`. We
+  # then pull toolbar items the following places:
+  #  
+  # - ThreadList:Center:Toolbar
+  # - ComposeButton:Toolbar
+  #
   _getComponentRegistryState: ->
     state = {}
     for column in @props.columns
-      state[column] = ComponentRegistry.findAllViewsByRole "#{@props.type}:#{column}"
-      state["#{column}Toolbar"] = ComponentRegistry.findAllViewsByRole "#{@props.type}:#{column}:Toolbar"
+      views = []
+      toolbarViews = ComponentRegistry.findAllViewsByRole("#{@props.type}:#{column}:Toolbar")
+
+      for {view, name} in ComponentRegistry.findAllByRole("#{@props.type}:#{column}")
+        toolbarViews = toolbarViews.concat(ComponentRegistry.findAllViewsByRole("#{name}:Toolbar"))
+        views.push(view)
+
+      state["#{column}"] = views
+      state["#{column}Toolbar"] = toolbarViews
     state
 
   _pop: ->
diff --git a/static/workspace.less b/static/workspace.less
index 0608b1e0c..9f23df82b 100644
--- a/static/workspace.less
+++ b/static/workspace.less
@@ -67,6 +67,12 @@ atom-workspace {
   // cover up the vertical resizing separators, so the toolbar appears
   // to be one continuous bar.
   z-index: 10;
+
+  .btn-toolbar {
+    margin-top: @spacing-half;
+    margin-left: @spacing-three-quarters;
+    height:32px;
+  }
 }
 
 .flexbox-handle-horizontal {