diff --git a/res/css/views/rooms/_PinnedEventTile.scss b/res/css/views/rooms/_PinnedEventTile.scss
index ca790ef8f0..f7417272b6 100644
--- a/res/css/views/rooms/_PinnedEventTile.scss
+++ b/res/css/views/rooms/_PinnedEventTile.scss
@@ -25,26 +25,29 @@ limitations under the License.
     background-color: $event-selected-color;
 }
 
-.mx_PinnedEventTile .mx_PinnedEventTile_sender {
+.mx_PinnedEventTile .mx_PinnedEventTile_sender,
+.mx_PinnedEventTile .mx_PinnedEventTile_timestamp {
     color: #868686;
     font-size: 0.8em;
     vertical-align: top;
-    display: block;
+    display: inline-block;
     padding-bottom: 3px;
 }
 
-.mx_PinnedEventTile .mx_EventTile_content {
-    margin-left: 50px;
-    position: relative;
-    top: 0;
-    left: 0;
+.mx_PinnedEventTile .mx_PinnedEventTile_timestamp {
+    padding-left: 15px;
+    display: none;
 }
 
-.mx_PinnedEventTile .mx_BaseAvatar {
+.mx_PinnedEventTile .mx_PinnedEventTile_senderAvatar .mx_BaseAvatar {
     float: left;
     margin-right: 10px;
 }
 
+.mx_PinnedEventTile:hover .mx_PinnedEventTile_timestamp {
+    display: inline-block;
+}
+
 .mx_PinnedEventTile:hover .mx_PinnedEventTile_actions {
     display: block;
 }
@@ -63,5 +66,12 @@ limitations under the License.
 
 .mx_PinnedEventTile_gotoButton {
     display: inline-block;
-    font-size: 0.8em;
+    font-size: 0.7em; // Smaller text to avoid conflicting with the layout
 }
+
+.mx_PinnedEventTile_message {
+    margin-left: 50px;
+    position: relative;
+    top: 0;
+    left: 0;
+}
\ No newline at end of file
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 8045d43104..4dfd89ec0a 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -40,6 +40,9 @@ export default class extends React.Component {
 
         /* called when the image has loaded */
         onWidgetLoad: PropTypes.func.isRequired,
+
+        /* the maximum image height to use */
+        maxImageHeight: PropTypes.number,
     }
 
     static contextTypes = {
@@ -249,8 +252,9 @@ export default class extends React.Component {
 
         const content = this.props.mxEvent.getContent();
         const timelineWidth = this.refs.body.offsetWidth;
-        const maxHeight = 600; // let images take up as much width as they can so long as the height doesn't exceed 600px.
-        // the alternative here would be 600*timelineWidth/800; to scale them down to fit inside a 4:3 bounding box
+        const maxHeight = this.props.maxImageHeight || 600; // let images take up as much width as they can so long
+        // as the height doesn't exceed 600px. The alternative here would be 600*timelineWidth/800; to scale them down
+        // to fit inside a 4:3 bounding box
 
         // FIXME: this will break on clientside generated thumbnails (as per e2e rooms)
         // which may well be much smaller than the 800x600 bounding box.
diff --git a/src/components/views/messages/MessageEvent.js b/src/components/views/messages/MessageEvent.js
index 7358e297c7..38f55c9d70 100644
--- a/src/components/views/messages/MessageEvent.js
+++ b/src/components/views/messages/MessageEvent.js
@@ -39,8 +39,11 @@ module.exports = React.createClass({
         /* callback called when dynamic content in events are loaded */
         onWidgetLoad: PropTypes.func,
 
-        /* the shsape of the tile, used */
+        /* the shape of the tile, used */
         tileShape: PropTypes.string,
+
+        /* the maximum image height to use, if the event is an image */
+        maxImageHeight: PropTypes.number,
     },
 
     getEventTileOps: function() {
@@ -78,6 +81,7 @@ module.exports = React.createClass({
             highlightLink={this.props.highlightLink}
             showUrlPreview={this.props.showUrlPreview}
             tileShape={this.props.tileShape}
+            maxImageHeight={this.props.maxImageHeight}
             onWidgetLoad={this.props.onWidgetLoad} />;
     },
 });
diff --git a/src/components/views/rooms/PinnedEventTile.js b/src/components/views/rooms/PinnedEventTile.js
index b63fdde0a8..d0572e489a 100644
--- a/src/components/views/rooms/PinnedEventTile.js
+++ b/src/components/views/rooms/PinnedEventTile.js
@@ -22,6 +22,7 @@ import AccessibleButton from "../elements/AccessibleButton";
 import MessageEvent from "../messages/MessageEvent";
 import MemberAvatar from "../avatars/MemberAvatar";
 import { _t } from '../../../languageHandler';
+import {formatFullDate} from '../../../DateUtils';
 
 module.exports = React.createClass({
     displayName: 'PinnedEventTile',
@@ -80,11 +81,20 @@ module.exports = React.createClass({
                     { unpinButton }
                 </div>
 
-                <MemberAvatar member={sender} width={avatarSize} height={avatarSize} />
+                <span className="mx_PinnedEventTile_senderAvatar">
+                    <MemberAvatar member={sender} width={avatarSize} height={avatarSize} />
+                </span>
                 <span className="mx_PinnedEventTile_sender">
                     { sender.name }
                 </span>
-                <MessageEvent mxEvent={this.props.mxEvent} className="mx_PinnedEventTile_body" />
+                <span className="mx_PinnedEventTile_timestamp">
+                    { formatFullDate(new Date(this.props.mxEvent.getTs())) }
+                </span>
+                <div className="mx_PinnedEventTile_message">
+                    <MessageEvent mxEvent={this.props.mxEvent} className="mx_PinnedEventTile_body" maxImageHeight={150}
+                                  onWidgetLoad={() => {}} // we need to give this, apparently
+                    />
+                </div>
             </div>
         );
     },