diff --git a/embark-ui/src/components/Communication.js b/embark-ui/src/components/Communication.js
new file mode 100644
index 000000000..8433d69eb
--- /dev/null
+++ b/embark-ui/src/components/Communication.js
@@ -0,0 +1,119 @@
+import PropTypes from "prop-types";
+import React, {Component} from 'react';
+import {Button, Form} from 'tabler-react';
+
+class Communication extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      listenTo: '',
+      channel: '',
+      message: '',
+      subscribedChannels: [],
+      messageList: [],
+      logs: []
+    };
+  }
+
+  handleChange(e, name) {
+    this.setState({
+      [name]: e.target.value
+    });
+  }
+
+  sendMessage(e) {
+    e.preventDefault();
+    this.props.sendMessage(this.state.channel, this.state.message);
+    this.addToLog("EmbarkJS.Messages.sendMessage({topic: '" + this.state.channel + "', data: '" + this.state.message + "'})");
+  }
+
+  listenToChannel(e) {
+    e.preventDefault();
+
+    const subscribedChannels = this.state.subscribedChannels;
+    subscribedChannels.push(<span>Subscribed to <b>{this.state.listenTo}</b>. Now try sending a message</span>);
+    this.setState({
+      subscribedChannels
+    });
+
+    this.props.listenToMessages(this.state.listenTo);
+    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});
+  }
+
+  render() {
+    return (
+      <React.Fragment>
+        <h3>Listen To channel</h3>
+        <Form.FieldSet>
+          <Form.Group label="Whisper channel" isRequired>
+            <Form.Input name="text-input"
+                        defaultValue={this.state.listenTo}
+                        placeholder="channel"
+                        onChange={e => this.handleChange(e, 'listenTo')}/>
+          </Form.Group>
+          <Button color="primary" onClick={(e) => this.listenToChannel(e)}>Start Listening</Button>
+          <div id="subscribeList">
+            {this.state.subscribedChannels.map((item, i) => <p key={i}>{item}</p>)}
+          </div>
+          {this.props.messages && this.props.messages.channels && Boolean(Object.keys(this.props.messages.channels).length) &&
+          <React.Fragment>
+            <p>Messages received:</p>
+            <div id="messagesList">
+              {Object.keys(this.props.messages.channels).map((channelName, i) => {
+                return (<React.Fragment key={'channel-' + i}>
+                  <p><b>{channelName}</b></p>
+                  {this.props.messages.channels[channelName].messages.map((message, f) => {
+                    return <p key={`${message}-${i}-${f}`}>{message}</p>;
+                  })}
+                </React.Fragment>);
+              })}
+            </div>
+          </React.Fragment>
+          }
+        </Form.FieldSet>
+
+        <h3>Send Message</h3>
+
+        <Form.FieldSet>
+          <Form.Group label="Whisper channel" isRequired>
+            <Form.Input name="text-input"
+                        defaultValue={this.state.channel}
+                        placeholder="channel"
+                        onChange={e => this.handleChange(e, 'channel')}/>
+          </Form.Group>
+          <Form.Group label="Message" isRequired>
+            <Form.Input name="text-input"
+                        defaultValue={this.state.message}
+                        placeholder="message"
+                        onChange={e => this.handleChange(e, 'message')}/>
+          </Form.Group>
+          <Button color="primary" onClick={(e) => this.sendMessage(e)}>Send Message</Button>
+
+        </Form.FieldSet>
+
+        <p>Javascript calls being made: </p>
+        <div className="logs">
+          <p>EmbarkJS.Messages.setProvider&#x00028;&apos;whisper&apos;&#x00029;</p>
+          {
+            this.state.logs.map((item, i) => <p key={i}>{item}</p>)
+          }
+        </div>
+      </React.Fragment>
+    );
+  }
+}
+
+Communication.propTypes = {
+  sendMessage: PropTypes.func,
+  listenToMessages: PropTypes.func,
+  messages: PropTypes.object
+};
+
+export default Communication;
+
diff --git a/embark-ui/src/containers/CommunicationContainer.js b/embark-ui/src/containers/CommunicationContainer.js
index 53e131c28..74ecc455e 100644
--- a/embark-ui/src/containers/CommunicationContainer.js
+++ b/embark-ui/src/containers/CommunicationContainer.js
@@ -1,51 +1,17 @@
 import PropTypes from "prop-types";
 import React, {Component} from 'react';
 import connect from "react-redux/es/connect/connect";
-import {Alert, Button, Form, Icon} from 'tabler-react';
+import {Alert, Icon} from 'tabler-react';
 import {messageSend, messageListen} from "../actions";
+import Communication from "../components/Communication";
 
 class CommunicationContainer extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      listenTo: '',
-      channel: '',
-      message: '',
-      subscribedChannels: [],
-      messageList: [],
-      logs: []
-    };
+  sendMessage(topic, message) {
+    this.props.messageSend({topic, message});
   }
 
-  handleChange(e, name) {
-    this.setState({
-      [name]: e.target.value
-    });
-  }
-
-  sendMessage(e) {
-    e.preventDefault();
-    this.props.messageSend({topic: this.state.channel, message: this.state.message});
-    this.addToLog("EmbarkJS.Messages.sendMessage({topic: '" + this.state.channel + "', data: '" + this.state.message + "'})");
-  }
-
-  listenToChannel(e) {
-    e.preventDefault();
-
-    const subscribedChannels = this.state.subscribedChannels;
-    subscribedChannels.push(<span>Subscribed to <b>{this.state.listenTo}</b>. Now try sending a message</span>);
-    this.setState({
-      subscribedChannels
-    });
-
-    this.props.messageListen(this.state.listenTo);
-    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});
+  listenToChannel(channel) {
+    this.props.messageListen(channel);
   }
 
   render() {
@@ -56,67 +22,16 @@ class CommunicationContainer extends Component {
         <Alert type="warning">The node uses an unsupported version of Whisper</Alert>
       </React.Fragment>;
     } else if (!this.enabled) {
-      isEnabledMessage = <Alert bsStyle="secondary "><Icon name="refresh-cw" /> Checking Whisper support, please wait</Alert>;
+      isEnabledMessage =
+        <Alert bsStyle="secondary "><Icon name="refresh-cw"/> Checking Whisper support, please wait</Alert>;
     }
 
     return (
       <React.Fragment>
         {isEnabledMessage}
-        <h3>Listen To channel</h3>
-        <Form.FieldSet>
-          <Form.Group label="Whisper channel" isRequired>
-            <Form.Input name="text-input"
-                        defaultValue={this.state.listenTo}
-                        placeholder="channel"
-                        onChange={e => this.handleChange(e, 'listenTo')}/>
-          </Form.Group>
-          <Button color="primary" onClick={(e) => this.listenToChannel(e)}>Start Listening</Button>
-          <div id="subscribeList">
-            {this.state.subscribedChannels.map((item, i) => <p key={i}>{item}</p>)}
-          </div>
-          {this.props.messages && this.props.messages.channels && Boolean(Object.keys(this.props.messages.channels).length) &&
-          <React.Fragment>
-            <p>Messages received:</p>
-            <div id="messagesList">
-              {Object.keys(this.props.messages.channels).map((channelName, i) => {
-                return (<React.Fragment key={'channel-' + i}>
-                  <p><b>{channelName}</b></p>
-                  {this.props.messages.channels[channelName].messages.map((message, f) => {
-                    return <p key={`${message}-${i}-${f}`}>{message}</p>;
-                  })}
-                </React.Fragment>);
-              })}
-            </div>
-          </React.Fragment>
-          }
-        </Form.FieldSet>
-
-        <h3>Send Message</h3>
-
-        <Form.FieldSet>
-          <Form.Group label="Whisper channel" isRequired>
-            <Form.Input name="text-input"
-                        defaultValue={this.state.channel}
-                        placeholder="channel"
-                        onChange={e => this.handleChange(e, 'channel')}/>
-          </Form.Group>
-          <Form.Group label="Message" isRequired>
-            <Form.Input name="text-input"
-                        defaultValue={this.state.message}
-                        placeholder="message"
-                        onChange={e => this.handleChange(e, 'message')}/>
-          </Form.Group>
-          <Button color="primary" onClick={(e) => this.sendMessage(e)}>Send Message</Button>
-
-        </Form.FieldSet>
-
-        <p>Javascript calls being made: </p>
-        <div className="logs">
-          <p>EmbarkJS.Messages.setProvider&#x00028;&apos;whisper&apos;&#x00029;</p>
-          {
-            this.state.logs.map((item, i) => <p key={i}>{item}</p>)
-          }
-        </div>
+        <Communication listenToMessages={(channel) => this.listenToChannel(channel)}
+                       sendMessage={(channel, message) => this.sendMessage(channel, message)}
+                       messages={this.props.messages}/>
       </React.Fragment>
     );
   }