diff --git a/packages/reactotron-app/App/Commands/ApiResponseCommand.js b/packages/reactotron-app/App/Commands/ApiResponseCommand.js
index 372f9b2da..14b187a7e 100644
--- a/packages/reactotron-app/App/Commands/ApiResponseCommand.js
+++ b/packages/reactotron-app/App/Commands/ApiResponseCommand.js
@@ -33,6 +33,10 @@ class ApiResponseCommand extends Component {
     command: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired
   }
 
+  shouldComponentUpdate (nextProps) {
+    return this.props.command.id !== nextProps.command.id
+  }
+
   renderDataAsObjectTree (data) {
     return <ObjectTree object={data} level={0} />
   }
diff --git a/packages/reactotron-app/App/Commands/BenchmarkReportCommand.js b/packages/reactotron-app/App/Commands/BenchmarkReportCommand.js
index 44fa83a17..9815e9100 100644
--- a/packages/reactotron-app/App/Commands/BenchmarkReportCommand.js
+++ b/packages/reactotron-app/App/Commands/BenchmarkReportCommand.js
@@ -86,6 +86,10 @@ class BenchmarkReportCommand extends Component {
     command: PropTypes.object.isRequired
   }
 
+  shouldComponentUpdate (nextProps) {
+    return this.props.command.id !== nextProps.command.id
+  }
+
   componentDidReact () {
     ReactTooltip.rebuild()
   }
diff --git a/packages/reactotron-app/App/Commands/ClientIntroCommand.js b/packages/reactotron-app/App/Commands/ClientIntroCommand.js
index e2c3ce948..de36279fa 100644
--- a/packages/reactotron-app/App/Commands/ClientIntroCommand.js
+++ b/packages/reactotron-app/App/Commands/ClientIntroCommand.js
@@ -9,6 +9,10 @@ class ClientIntroCommand extends Component {
     command: PropTypes.object.isRequired
   }
 
+  shouldComponentUpdate (nextProps) {
+    return this.props.command.id !== nextProps.command.id
+  }
+
   render () {
     const { command } = this.props
     const { payload } = command
diff --git a/packages/reactotron-app/App/Commands/LogCommand.js b/packages/reactotron-app/App/Commands/LogCommand.js
index c02999eb3..bf331d0ed 100644
--- a/packages/reactotron-app/App/Commands/LogCommand.js
+++ b/packages/reactotron-app/App/Commands/LogCommand.js
@@ -44,6 +44,10 @@ class LogCommand extends Component {
     command: PropTypes.object.isRequired
   }
 
+  shouldComponentUpdate (nextProps) {
+    return this.props.command.id !== nextProps.command.id
+  }
+
   render () {
     const { command } = this.props
     const { payload } = command
diff --git a/packages/reactotron-app/App/Commands/StateActionCompleteCommand.js b/packages/reactotron-app/App/Commands/StateActionCompleteCommand.js
index 3463343db..54525e6e9 100644
--- a/packages/reactotron-app/App/Commands/StateActionCompleteCommand.js
+++ b/packages/reactotron-app/App/Commands/StateActionCompleteCommand.js
@@ -15,6 +15,10 @@ class StateActionComplete extends Component {
     command: PropTypes.object.isRequired
   }
 
+  shouldComponentUpdate (nextProps) {
+    return this.props.command.id !== nextProps.command.id
+  }
+
   render () {
     const { command } = this.props
     const { payload } = command
diff --git a/packages/reactotron-app/App/Commands/StateValuesResponseCommand.js b/packages/reactotron-app/App/Commands/StateValuesResponseCommand.js
index e7f465230..37baebf28 100644
--- a/packages/reactotron-app/App/Commands/StateValuesResponseCommand.js
+++ b/packages/reactotron-app/App/Commands/StateValuesResponseCommand.js
@@ -32,6 +32,10 @@ class StateValuesResponseCommand extends Component {
     command: PropTypes.object.isRequired
   }
 
+  shouldComponentUpdate (nextProps) {
+    return this.props.command.id !== nextProps.command.id
+  }
+
   renderObject (value) {
     return <ObjectTree object={value} level={0} />
   }
diff --git a/packages/reactotron-app/App/Commands/UnknownCommand.js b/packages/reactotron-app/App/Commands/UnknownCommand.js
index 77d4d711a..3434fa89d 100644
--- a/packages/reactotron-app/App/Commands/UnknownCommand.js
+++ b/packages/reactotron-app/App/Commands/UnknownCommand.js
@@ -9,6 +9,10 @@ class UnknownCommand extends Component {
     command: PropTypes.object.isRequired
   }
 
+  shouldComponentUpdate (nextProps) {
+    return this.props.command.id !== nextProps.command.id
+  }
+
   render () {
     const { command } = this.props
     const { payload, type } = command
diff --git a/packages/reactotron-app/App/Foundation/Page.js b/packages/reactotron-app/App/Foundation/Page.js
deleted file mode 100644
index fd11a47c3..000000000
--- a/packages/reactotron-app/App/Foundation/Page.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import React, { Component, PropTypes } from 'react'
-import { observer, inject } from 'mobx-react'
-import AppStyles from '../Theme/AppStyles'
-import Colors from '../Theme/Colors'
-
-const Styles = {
-  container: {
-    ...AppStyles.Layout.vbox,
-    backgroundColor: Colors.screen,
-    position: 'relative',
-    borderTop: `1px solid ${Colors.line}`
-  },
-  topShadow: {
-    height: 5,
-    WebkitBoxShadow: `inset 0px 2px 4px 0px ${Colors.subtleShadow}`
-  },
-  bottomShadow: {
-    height: 5,
-    WebkitBoxShadow: `inset 0px -2px 4px 0px ${Colors.subtleShadow}`
-  }
-}
-
-@inject('session')
-@observer
-class Page extends Component {
-
-  static propTypes = {
-    tabId: PropTypes.string.isRequired
-  }
-
-  render () {
-    const { children, tabId } = this.props
-    let containerStyles = Styles.container
-    const isShowing = this.props.session.ui.tab === tabId
-    containerStyles.display = isShowing ? 'flex' : 'none'
-
-    // <div style={Styles.topShadow}></div>
-    return (
-      <div style={containerStyles}>
-        {children}
-        <div style={Styles.bottomShadow}></div>
-      </div>
-    )
-  }
-
-}
-
-export default Page
diff --git a/packages/reactotron-app/App/Foundation/PageStreaming.js b/packages/reactotron-app/App/Foundation/PageStreaming.js
deleted file mode 100644
index fc88ef4c3..000000000
--- a/packages/reactotron-app/App/Foundation/PageStreaming.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React, { Component } from 'react'
-import { observer } from 'mobx-react'
-import AppStyles from '../Theme/AppStyles'
-import Colors from '../Theme/Colors'
-import CommandList from '../Shared/CommandList'
-
-const Styles = {
-  container: {
-    ...AppStyles.Layout.vbox,
-    backgroundColor: Colors.screen,
-    paddingLeft: 0,
-    paddingRight: 0,
-    paddingTop: 0,
-    paddingBottom: 0,
-    overflowY: 'scroll'
-  }
-}
-
-@observer
-class PageStreaming extends Component {
-
-  render () {
-    return (
-      <div style={Styles.container}>
-        <CommandList />
-      </div>
-    )
-  }
-
-}
-
-export default PageStreaming
diff --git a/packages/reactotron-app/App/Foundation/Timeline.js b/packages/reactotron-app/App/Foundation/Timeline.js
new file mode 100644
index 000000000..caa34d38b
--- /dev/null
+++ b/packages/reactotron-app/App/Foundation/Timeline.js
@@ -0,0 +1,68 @@
+import React, { Component } from 'react'
+import { inject, observer } from 'mobx-react'
+import Colors from '../Theme/Colors'
+import getCommandComponent from '../Commands'
+import { map, reverse } from 'ramda'
+import { dotPath } from 'ramdasauce'
+import AppStyles from '../Theme/AppStyles'
+
+const Styles = {
+  container: {
+    backgroundColor: Colors.screen,
+    ...AppStyles.Layout.vbox
+  },
+  commands: {
+    paddingLeft: 0,
+    paddingRight: 0,
+    paddingTop: 0,
+    paddingBottom: 0,
+    overflowY: 'scroll',
+    overflowX: 'hidden'
+  }
+}
+
+@inject('session')
+@observer
+class Timeline extends Component {
+
+  // fires when we will update
+  componentWillUpdate () {
+    const node = this.refs.commands
+    // http://blog.vjeux.com/2013/javascript/scroll-position-with-react.html
+    // remember our height, position, and if we're at the top
+    this.scrollHeight = node.scrollHeight
+    this.scrollTop = node.scrollTop
+    this.isPinned = this.scrollTop === 0
+  }
+
+  // fires after we did update
+  componentDidUpdate () {
+    // should we be pinned to top, let's not auto-scroll
+    if (this.isPinned) return
+    const node = this.refs.commands
+    // scroll to the place we were before
+    // TODO: this falls apart as we reach max queue size as the scrollHeigh no longer changes
+    node.scrollTop = this.scrollTop + node.scrollHeight - this.scrollHeight
+  }
+
+  render () {
+    // grab the commands, but sdrawkcab
+    const commands = reverse(dotPath('props.session.server.commands.all', this))
+
+    const renderItem = command => {
+      const CommandComponent = getCommandComponent(command)
+      return <CommandComponent key={command.messageId} command={command} />
+    }
+
+    return (
+      <div style={Styles.container} ref='container'>
+        <div style={Styles.commands} ref='commands'>
+          {map(renderItem, commands)}
+        </div>
+      </div>
+    )
+  }
+
+}
+
+export default Timeline
diff --git a/packages/reactotron-app/App/Foundation/VisualRoot.js b/packages/reactotron-app/App/Foundation/VisualRoot.js
index bf923cde1..563a6dcf2 100644
--- a/packages/reactotron-app/App/Foundation/VisualRoot.js
+++ b/packages/reactotron-app/App/Foundation/VisualRoot.js
@@ -1,10 +1,9 @@
 import React, { Component } from 'react'
 import Header from './Header'
-import Page from './Page'
 import Footer from './Footer'
 import Colors from '../Theme/Colors'
 import AppStyles from '../Theme/AppStyles'
-import PageStreaming from './PageStreaming'
+import Timeline from './Timeline'
 import ReactTooltip from 'react-tooltip'
 import SampleModal from '../Dialogs/SampleModal'
 
@@ -23,10 +22,9 @@ export default class VisualRoot extends Component {
     return (
       <div style={Styles.container}>
         <Header />
-        <Page tabId='streaming'>
-          <PageStreaming />
-        </Page>
+        <Timeline />
         <Footer />
+
         <SampleModal />
         <ReactTooltip />
       </div>
diff --git a/packages/reactotron-app/App/Shared/Command.js b/packages/reactotron-app/App/Shared/Command.js
index a83206825..cdff72787 100644
--- a/packages/reactotron-app/App/Shared/Command.js
+++ b/packages/reactotron-app/App/Shared/Command.js
@@ -54,7 +54,9 @@ const Styles = {
   },
   children: {
     minHeight: 40,
-    overflow: 'hidden'
+    overflow: 'hidden',
+    animation: 'fade-up 0.25s',
+    willChange: 'transform opacity'
   }
 }
 
@@ -69,7 +71,7 @@ class Command extends Component {
   }
 
   shouldComponentUpdate (nextProps, nextState) {
-    return this.props.command !== nextProps.command
+    return (this.props.command.id !== nextProps.command.id)
   }
 
   render () {
@@ -90,7 +92,7 @@ class Command extends Component {
             {hasDuration && <span style={Styles.duration}>{ms} ms</span>}
             <Timestamp date={date} style={Styles.timestamp} />
           </div>
-          <div style={Styles.children}>
+          <div style={Styles.children} className='fade-it'>
             {children}
           </div>
         </div>
diff --git a/packages/reactotron-app/App/Shared/CommandList.js b/packages/reactotron-app/App/Shared/CommandList.js
deleted file mode 100644
index e36b93246..000000000
--- a/packages/reactotron-app/App/Shared/CommandList.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import { reverse, map } from 'ramda'
-import { observer, inject } from 'mobx-react'
-import React, { Component } from 'react'
-import getCommandComponent from '../Commands'
-
-const Styles = {
-  container: {
-    paddingTop: 0,
-    paddingBottom: 20
-  },
-  message: {
-  },
-  level: {
-  }
-}
-
-@inject('session')
-@observer
-class CommandList extends Component {
-
-  static propTypes = {
-  }
-
-  render () {
-    const { server } = this.props.session
-    const all = reverse(server.commands.all)
-    const renderItem = command => {
-      const CommandComponent = getCommandComponent(command)
-      return <CommandComponent key={command.messageId} command={command} />
-    }
-    return (
-      <div style={Styles.container}>
-        {map(renderItem, all)}
-      </div>
-    )
-  }
-
-}
-
-export default CommandList
diff --git a/packages/reactotron-app/App/app.global.css b/packages/reactotron-app/App/app.global.css
index 7b2170b3c..4888db8aa 100644
--- a/packages/reactotron-app/App/app.global.css
+++ b/packages/reactotron-app/App/app.global.css
@@ -39,3 +39,8 @@ a.closeButton--jss-0-1 { display: none; }
 *:focus {
     outline: none;
 }
+
+@-webkit-keyframes fade-up {
+  0%   { -webkit-transform: translateY(5%); opacity: 0; }
+  100% { -webkit-transform: translateY(0%); opacity: 1; }
+}