diff --git a/src/components/views/rooms/LinkPreviewWidget.js b/src/components/views/rooms/LinkPreviewWidget.js
index 3398b021fb..ba438c1d12 100644
--- a/src/components/views/rooms/LinkPreviewWidget.js
+++ b/src/components/views/rooms/LinkPreviewWidget.js
@@ -73,13 +73,36 @@ module.exports = React.createClass({
         this.unmounted = true;
     },
 
+    onImageClick: function(ev) {
+        var p = this.state.preview;
+        if (ev.button != 0 || ev.metaKey) return;
+        ev.preventDefault();
+        var ImageView = sdk.getComponent("elements.ImageView");
+
+        var src = p["og:image"];
+        if (src && src.startsWith("mxc://")) {
+            src = MatrixClientPeg.get().mxcUrlToHttp(src);
+        }
+
+        var params = {
+            src: src,
+            width: p["og:image:width"],
+            height: p["og:image:height"],
+            name: p["og:title"] || p["og:description"] || this.props.link,
+            fileSize: p["matrix:image:size"],
+            link: this.props.link,
+        };
+
+        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
+    },
+
     render: function() {
         var p = this.state.preview;
         if (!p) return <div/>;
 
         // FIXME: do we want to factor out all image displaying between this and MImageBody - especially for lightboxing?
         var image = p["og:image"];
-        var imageMaxWidth = 600, imageMaxHeight = 400;
+        var imageMaxWidth = 100, imageMaxHeight = 100;
         if (image && image.startsWith("mxc://")) {
             image = MatrixClientPeg.get().mxcUrlToHttp(image, imageMaxWidth, imageMaxHeight);
         }
@@ -91,24 +114,23 @@ module.exports = React.createClass({
 
         var img;
         if (image) {
-            img = (
-                <div className="mx_LinkPreviewWidget_image" style={{ height: thumbHeight }}>
-                    <a href={ this.props.link } target="_blank">
-                        <img style={{ maxWidth: imageMaxWidth, maxHeight: imageMaxHeight }} src={ image } />
-                    </a>
-                </div>
-            );
+            img = <div className="mx_LinkPreviewWidget_image" style={{ height: thumbHeight }}>
+                    <img style={{ maxWidth: imageMaxWidth, maxHeight: imageMaxHeight }} src={ image } onClick={ this.onImageClick }/>
+                  </div>
         }
 
         return (
             <div className="mx_LinkPreviewWidget" >
+                { img }
                 <div className="mx_LinkPreviewWidget_caption">
                     <div className="mx_LinkPreviewWidget_title"><a href={ this.props.link } target="_blank">{ p["og:title"] }</a></div>
-                    <div className="mx_LinkPreviewWidget_siteName">{ p["og:site_name"] ? ("from " + p["og:site_name"]) : null }</div>
+                    <div className="mx_LinkPreviewWidget_siteName">{ p["og:site_name"] ? (" - " + p["og:site_name"]) : null }</div>
+                    <div className="mx_LinkPreviewWidget_description" ref="description">
+                        { p["og:description"] }
+                    </div>
                 </div>
-                { img }
-                <div className="mx_LinkPreviewWidget_description" ref="description">{ p["og:description"] } <a href={ this.props.link } target="_blank">Read more</a></div>
-                <img className="mx_LinkPreviewWidget_indicator" src="img/icon-link.svg" width="13" height="16" />
+                <img className="mx_LinkPreviewWidget_cancel" src="img/cancel.svg" width="18" height="18"
+                     onClick={ this.props.onCancelClick }/>
             </div>
         );
     }