diff --git a/src/widgets/pinned-messages.jsx b/src/widgets/pinned-messages.jsx
new file mode 100644
index 00000000..493e3656
--- /dev/null
+++ b/src/widgets/pinned-messages.jsx
@@ -0,0 +1,50 @@
+// Send message form.
+import React from 'react';
+import { injectIntl } from 'react-intl';
+import { Drafty } from 'tinode-sdk';
+
+import { previewFormatter } from '../lib/formatters.js';
+
+class PinnedMessages extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.handleCancel = this.handleCancel.bind(this);
+    this.handleSelected = this.handleSelected.bind(this);
+  }
+
+  handleCancel(e) {
+    e.preventDefault();
+    this.props.onCancel(this.props.messages[this.props.selected].seq);
+  }
+
+  handleSelected(e) {
+    e.preventDefault();
+    this.props.onSelected(this.props.messages[this.props.selected].seq);
+  }
+
+  render() {
+    let shown = (this.props.messages || [])[this.props.selected];
+    shown = shown ? Drafty.format(shown.content, previewFormatter, {
+      formatMessage: this.props.intl.formatMessage.bind(this.props.intl),
+      authorizeURL: this.props.tinode.authorizeURL.bind(this.props.tinode)
+    }) : null;
+
+    const dots = [];
+    this.props.messages.forEach(_ => {
+      const cn = dots.length == this.props.selected ? 'adot' : 'dot';
+      dots.push(<div key={dots.length} className={cn} />);
+    });
+
+    return shown ?
+      (<div id="pinned-wrapper">
+        <div className="cancel">
+          <a href="#" onClick={this.handleCancel}><i className="material-icons gray">close</i></a>
+        </div>
+        <div className="pinned-scroll">{dots}</div>
+        <div className="pinned" onClick={this.handleSelected}>{shown}</div>
+      </div>) : null;
+  }
+}
+
+export default injectIntl(PinnedMessages);