diff --git a/app/components/ChannelBox.js b/app/components/ChannelBox.js
new file mode 100644
index 0000000..ca1fe8d
--- /dev/null
+++ b/app/components/ChannelBox.js
@@ -0,0 +1,16 @@
+// @flow
+import React from 'react';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import Avatar from '@material-ui/core/Avatar';
+
+const ChannelBox = ({ channelName, message }) => (
+  <ListItem>
+    <Avatar>
+      {channelName}
+    </Avatar>
+    <ListItemText primary={channelName} secondary={message} />
+  </ListItem>
+);
+
+export default ChannelBox;
diff --git a/app/components/ChannelList.js b/app/components/ChannelList.js
new file mode 100644
index 0000000..a78728e
--- /dev/null
+++ b/app/components/ChannelList.js
@@ -0,0 +1,20 @@
+// @flow
+import React, { Fragment } from 'react';
+import List from '@material-ui/core/List';
+import Divider from '@material-ui/core/Divider';
+import ChannelBox from './ChannelBox';
+
+const ChannelList = ({ channels }) => (
+  <List>
+    {Object.keys(channels).map((channel) => (
+      <Fragment key={channel}>
+        <ChannelBox channelName={channel} />
+        <li>
+          <Divider />
+        </li>
+      </Fragment>
+    ))}
+  </List>
+)
+
+export default ChannelList;
diff --git a/app/components/ChatBox.js b/app/components/ChatBox.js
index 1c7906e..fcc5689 100644
--- a/app/components/ChatBox.js
+++ b/app/components/ChatBox.js
@@ -3,12 +3,12 @@ import React from 'react';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
 import Avatar from '@material-ui/core/Avatar';
-import WorkIcon from '@material-ui/icons/Work';
+import ChatBubbleOutline from '@material-ui/icons/ChatBubbleSharp';
 
 const ChatBox = ({ username, message }) => (
   <ListItem>
     <Avatar>
-      <WorkIcon />
+      <ChatBubbleOutline />
     </Avatar>
     <ListItemText primary={`${username}`} secondary={message} />
   </ListItem>
diff --git a/app/components/ContextPanel.js b/app/components/ContextPanel.js
new file mode 100644
index 0000000..2a9ba8a
--- /dev/null
+++ b/app/components/ContextPanel.js
@@ -0,0 +1,10 @@
+import React, { Fragment } from 'react';
+import ChannelList from './ChannelList';
+
+const ContextPanel = ({ channels }) => (
+  <Fragment>
+    <ChannelList channels={channels} />
+  </Fragment>
+);
+
+export default ContextPanel;
diff --git a/app/components/Home.js b/app/components/Home.js
index 099098b..8fb884c 100644
--- a/app/components/Home.js
+++ b/app/components/Home.js
@@ -1,9 +1,11 @@
 // @flow
 import React, { Component } from 'react';
 import StatusJS from 'status-js-api';
+import { isNil } from 'lodash';
 import Grid from '@material-ui/core/Grid';
 import routes from '../constants/routes';
 import ChatRoom from './ChatRoom';
+import ContextPanel from './ContextPanel';
 import { User } from '../utils/actors';
 
 
@@ -95,11 +97,11 @@ status.connect("ws://localhost:8546");
     }
 
     render() {
-      const { messages } = this.state;
+      const { messages, channels } = this.state;
       return (
         <Grid container spacing={0}>
           <Grid item xs={3}>
-            <div>test</div>
+            {!isNil(channels) && <ContextPanel channels={channels} />}
           </Grid>
           <Grid item xs={9}>
             <ChatRoom messages={messages} sendMessage={this.sendMessage}/>
diff --git a/package.json b/package.json
index 0f58d58..15f4e8c 100644
--- a/package.json
+++ b/package.json
@@ -264,6 +264,7 @@
     "electron-updater": "^3.1.6",
     "formik": "^1.3.1",
     "history": "^4.7.2",
+    "lodash": "^4.17.11",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
     "react-hot-loader": "^4.3.4",