diff --git a/js/embark.js b/js/embark.js
index d8632b873c..912ab4157c 100644
--- a/js/embark.js
+++ b/js/embark.js
@@ -263,11 +263,11 @@ EmbarkJS.Messages.sendMessage = function(options) {
   return this.currentMessages.sendMessage(options);
 };
 
-EmbarkJS.Messages.listenTo = function(options) {
+EmbarkJS.Messages.listenTo = function(options, callback) {
   if (!this.currentMessages) {
     throw new Error('Messages provider not set; e.g EmbarkJS.Messages.setProvider("whisper")');
   }
-  return this.currentMessages.listenTo(options);
+  return this.currentMessages.listenTo(options, callback);
 };
 
 EmbarkJS.Utils = {
diff --git a/lib/modules/whisper/js/embarkjs.js b/lib/modules/whisper/js/embarkjs.js
index 27bd1f7b2f..4cfa98fea9 100644
--- a/lib/modules/whisper/js/embarkjs.js
+++ b/lib/modules/whisper/js/embarkjs.js
@@ -64,7 +64,7 @@ __embarkWhisperNewWeb3.sendMessage = function (options) {
   });
 };
 
-__embarkWhisperNewWeb3.listenTo = function (options) {
+__embarkWhisperNewWeb3.listenTo = function (options, callback) {
   var topics = options.topic || options.topics;
 
   let promise = new __MessageEvents();
@@ -82,12 +82,15 @@ __embarkWhisperNewWeb3.listenTo = function (options) {
     var payload = JSON.parse(EmbarkJS.Utils.toAscii(result.payload));
     var data;
     data = {
-      topic: result.topic,
+      topic: EmbarkJS.Utils.toAscii(result.topic),
       data: payload,
       //from: result.from,
       time: result.timestamp
     };
 
+    if (callback) {
+      return callback(null, data);
+    }
     promise.cb(payload, data, result);
   });
 
diff --git a/templates/demo/app/components/whisper.js b/templates/demo/app/components/whisper.js
index be78c62e0b..3c056bf214 100644
--- a/templates/demo/app/components/whisper.js
+++ b/templates/demo/app/components/whisper.js
@@ -1,105 +1,118 @@
 import EmbarkJS from 'Embark/EmbarkJS';
 import React from 'react';
-import { Alert, Form, FormGroup, FormControl, HelpBlock, Button } from 'react-bootstrap';
- 
+import {Alert, Form, FormGroup, FormControl, Button} from 'react-bootstrap';
+
 class Whisper extends React.Component {
 
-    constructor(props) {
-      super(props);
+  constructor (props) {
+    super(props);
 
-      this.state = {
-          listenTo: '',
-          channel: '',
-          message: '',
-          subscribedChannels: [],
-          messageList: [],
-          logs: []
-      }
-    }
+    this.state = {
+      listenTo: '',
+      channel: '',
+      message: '',
+      subscribedChannels: [],
+      messageList: [],
+      logs: []
+    };
+  }
 
-    handleChange(e, name){
-        this.state[name] = e.target.value;
-        this.setState(this.state);
-    }
+  handleChange (e, name) {
+    this.state[name] = e.target.value;
+    this.setState(this.state);
+  }
 
-    sendMessage(e){
-        e.preventDefault();
-        EmbarkJS.Messages.sendMessage({topic: this.state.channel, data: this.state.message});
-        this.addToLog("EmbarkJS.Messages.sendMessage({topic: '" + this.state.channel + "', data: '" + this.state.message + "'})");
-    }
+  sendMessage (e) {
+    e.preventDefault();
+    EmbarkJS.Messages.sendMessage({topic: this.state.channel, data: this.state.message});
+    this.addToLog("EmbarkJS.Messages.sendMessage({topic: '" + this.state.channel + "', data: '" + this.state.message + "'})");
+  }
 
-    listenToChannel(e){
-        e.preventDefault();
+  listenToChannel (e) {
+    e.preventDefault();
 
-        this.state.subscribedChannels.push(`subscribed to ${this.state.listenTo} now try sending a message`);
+    const subscribedChannels = this.state.subscribedChannels;
+    subscribedChannels.push(<span>Subscribed to <b>{this.state.listenTo}</b>. Now try sending a message</span>);
+    this.setState({
+      subscribedChannels
+    });
 
-        EmbarkJS.Messages.listenTo({topic: [this.state.listenTo]})
-            .then(message => this.state.messageList.push(`channel: ${this.state.listenTo}  message: ${message}`))
+    EmbarkJS.Messages.listenTo({topic: [this.state.listenTo]}, (error, message) => {
+      const messageList = this.state.messageList;
+      if (error) {
+        messageList.push(<span className="alert-danger">Error: {error}</span>);
+      } else {
+        messageList.push(<span>Channel: <b>{message.topic}</b> |  Message: <b>{message.data}</b></span>);
+      }
+      this.setState({
+        messageList
+      });
+    });
 
-        this.addToLog("EmbarkJS.Messages.listenTo({topic: ['" + this.state.listenTo + "']}).then(function(message) {})");
-    }
+    this.addToLog("EmbarkJS.Messages.listenTo({topic: ['" + this.state.listenTo + "']}).then(function(message) {})");
+  }
 
-    addToLog(txt){
-        this.state.logs.push(txt);
-        this.setState({logs: this.state.logs});
-    }
+  addToLog (txt) {
+    this.state.logs.push(txt);
+    this.setState({logs: this.state.logs});
+  }
 
-    render(){
-        return (
-       <React.Fragment>
-            {
-                !this.props.enabled ?
-                <React.Fragment>
-                <Alert bsStyle="warning">The node you are using does not support Whisper</Alert>
-                <Alert bsStyle="warning">The node uses an unsupported version of Whisper</Alert>
-                </React.Fragment> : ''
-            }
-            <h3>Listen To channel</h3>
-            <Form inline>
-                <FormGroup>
-                    <FormControl
-                        type="text"
-                        defaultValue={this.state.listenTo}
-                        placeholder="channel"
-                        onChange={e => this.handleChange(e, 'listenTo')} />
-                    <Button bsStyle="primary" onClick={(e) => this.listenToChannel(e)}>Start Listening</Button>
-                    <div id="subscribeList">
-                    { this.state.subscribedChannels.map((item, i) => <p key={i}>{item}</p>) }
-                    </div>
-                    <p>messages received:</p>
-                    <div id="messagesList">
-                    { this.state.messageList.map((item, i) => <p key={i}>{item}</p>) }
-                    </div>
-                </FormGroup>
-            </Form>
+  render () {
+    return (
+      <React.Fragment>
+        {
+          !this.props.enabled ?
+            <React.Fragment>
+              <Alert bsStyle="warning">The node you are using does not support Whisper</Alert>
+              <Alert bsStyle="warning">The node uses an unsupported version of Whisper</Alert>
+            </React.Fragment> : ''
+        }
+        <h3>Listen To channel</h3>
+        <Form inline>
+          <FormGroup>
+            <FormControl
+              type="text"
+              defaultValue={this.state.listenTo}
+              placeholder="channel"
+              onChange={e => this.handleChange(e, 'listenTo')}/>
+            <Button bsStyle="primary" onClick={(e) => this.listenToChannel(e)}>Start Listening</Button>
+            <div id="subscribeList">
+              {this.state.subscribedChannels.map((item, i) => <p key={i}>{item}</p>)}
+            </div>
+            <p>messages received:</p>
+            <div id="messagesList">
+              {this.state.messageList.map((item, i) => <p key={i}>{item}</p>)}
+            </div>
+          </FormGroup>
+        </Form>
 
-            <h3>Send Message</h3>
-            <Form inline>
-                <FormGroup>
-                    <FormControl
-                        type="text"
-                        defaultValue={this.state.channel}
-                        placeholder="channel"
-                        onChange={e => this.handleChange(e, 'channel')} />
-                    <FormControl
-                        type="text"
-                        defaultValue={this.state.message}
-                        placeholder="message"
-                        onChange={e => this.handleChange(e, 'message')} />
-                    <Button bsStyle="primary" onClick={(e) => this.sendMessage(e)}>Send Message</Button>
-                </FormGroup>
-            </Form>
+        <h3>Send Message</h3>
+        <Form inline>
+          <FormGroup>
+            <FormControl
+              type="text"
+              defaultValue={this.state.channel}
+              placeholder="channel"
+              onChange={e => this.handleChange(e, 'channel')}/>
+            <FormControl
+              type="text"
+              defaultValue={this.state.message}
+              placeholder="message"
+              onChange={e => this.handleChange(e, 'message')}/>
+            <Button bsStyle="primary" onClick={(e) => this.sendMessage(e)}>Send Message</Button>
+          </FormGroup>
+        </Form>
 
-            <p>Javascript calls being made: </p>
-            <div className="logs">
-            <p>EmbarkJS.Messages.setProvider('whisper')</p>
-            {
-                this.state.logs.map((item, i) => <p key={i}>{item}</p>)
-            }
-            </div>
-        </React.Fragment>
-        );
-    }
+        <p>Javascript calls being made: </p>
+        <div className="logs">
+          <p>EmbarkJS.Messages.setProvider('whisper')</p>
+          {
+            this.state.logs.map((item, i) => <p key={i}>{item}</p>)
+          }
+        </div>
+      </React.Fragment>
+    );
+  }
 }
 
 export default Whisper;