diff --git a/server/socket/index.js b/server/socket/index.js
index 5dd4e98..129bb89 100644
--- a/server/socket/index.js
+++ b/server/socket/index.js
@@ -18,23 +18,27 @@ module.exports = io => {
       io.to(message.to).emit('message', message)
     })
 
-    socket.on('join', namespace => {
-      const socketId = socket.id
-      console.log(`${socketId} joins ${namespace}`)
-      socket.join(namespace, () => {
-        io.to(namespace).emit('user joined', { namespace, socketId })
-        sendNamespace(namespace)
+    socket.on('join', room => {
+      console.log(`${socket.id} joins ${room}`)
+      socket.join(room, () => {
+        io.to(room).emit('user joined', { room, socketId: socket.id })
+        io.of(room).clients((error, clients) => {
+          if (error) throw error
+          socket.emit('got client list', clients)
+        })
       })
     })
-
-    socket.on('part', namespace => {
-      const socketId = socket.id
-      console.log('part', socketId, namespace)
-      socket.leave(namespace, () => {
-        io.to(namespace).emit('user left', { namespace, socketId })
-        sendNamespace(namespace)
+    socket.on('get all clients', () => {
+      io.clients((e, c) => {
+        if (e) console.log(e)
+        console.log('all clients:', c)
       })
     })
+    socket.on('part', namespace => {
+      console.log('part', socket.id, namespace)
+      io.to(namespace).emit('user left', { namespace, socketId: socket.id })
+      socket.leave(namespace)
+    })
 
     socket.on('change nick', nick => {
       io.emit('changed nick', { socketId: socket.id, nick: nick })
@@ -56,14 +60,5 @@ module.exports = io => {
       console.log(`${socket.id} has disconnected.`)
       //sendNamespaces()
     })
-
-    const sendNamespace = namespace => {
-      if (!io.sockets.adapter.rooms[namespace]) return
-      const newNamespace = {
-        namespace,
-        sockets: Object.keys(io.sockets.adapter.rooms[namespace].sockets),
-      }
-      io.emit('got namespace', newNamespace)
-    }
   })
 }
diff --git a/src/App.js b/src/App.js
index bdfd691..ab53f45 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,19 +1,16 @@
 import React from 'react'
 import socket from './socket'
+import { Topbar, Sidebar, Messages } from './components'
 
-import { Navbar, Nav, Dropdown, Button } from 'react-bootstrap'
 import uuid from 'uuid'
 import moment from 'moment'
 
 const initialState = {
   loading: true,
-  messages: [],
-  message: '',
-  allNamespaces: [],
-  chats: [],
-  namespace: '/',
-  allUsers: [],
-  user: {},
+  allSockets: [],
+  allMessages: [],
+  buffers: [],
+  buffer: '/',
 }
 
 class App extends React.Component {
@@ -21,10 +18,13 @@ class App extends React.Component {
     super()
     this.state = initialState
     this.socket = socket
-    this.handleChange = this.handleChange.bind(this)
     this.submitMessage = this.submitMessage.bind(this)
     this.join = this.join.bind(this)
     this.readMessages = this.readMessages.bind(this)
+    this.countUnreadMessages = this.countUnreadMessages.bind(this)
+    this.readMessages = this.readMessages.bind(this)
+    this.activateChat = this.activateChat.bind(this)
+    this.query = this.query.bind(this)
   }
 
   async fetchData() {
@@ -34,10 +34,9 @@ class App extends React.Component {
   componentDidMount() {
     this.fetchData()
     this.socket.on('connect', () => {
-      console.log(`I am ${socket.id}`)
+      console.log(`I am ${this.socket.id}`)
       this.join('#projex')
-      const user = { socketId: this.socket.id, nick: this.socket.id }
-      this.setState({ user })
+      this.socket.nick = this.socket.id
     })
 
     this.socket.on('user connected', user => {
@@ -48,119 +47,122 @@ class App extends React.Component {
 
     this.socket.on('user disconnected', socketId => {
       console.log(`${socketId} disconnected.`)
-      const allUsers = this.state.allUsers.map(u => {
-        if (u.socketId === socketId) u.offline = true
-        return u
-      })
-      const oldNick = allUsers.find(u => u.socketId === socketId).nick
-      this.setState({ allUsers })
-      // inform channels user was part of
-      this.state.chats.map(c => {
-        if (c === socketId) {
-          const messages = this.state.messages.concat(
-            this.formatMessage(
-              `${oldNick} disconnected`,
-              socketId,
-              '[server]',
-              c,
-              c === this.state.namespace ? true : false
-            )
-          )
-          this.setState({ messages })
-        }
-        this.state.allNamespaces.map(n => {
-          if (n.namespace === c && n.sockets.find(s => s === socketId)) {
-            const messages = this.state.messages.concat(
-              this.formatMessage(
-                `${oldNick} disconnected`,
-                socketId,
-                '[server]',
-                c,
-                c === this.state.namespace ? true : false
-              )
-            )
-            this.setState({ messages })
-          }
-          return n
-        })
-        return c
-      })
+      // const allUsers = this.state.allUsers.map(u => {
+      //   if (u.socketId === socketId) u.offline = true
+      //   return u
+      // })
+      // const oldNick = allUsers.find(u => u.socketId === socketId).nick
+      // this.setState({ allUsers })
+      // // inform channels user was part of
+      // this.state.chats.map(c => {
+      //   if (c === socketId) {
+      //     const messages = this.state.messages.concat(
+      //       this.formatMessage(
+      //         `${oldNick} disconnected`,
+      //         socketId,
+      //         '[server]',
+      //         c,
+      //         c === this.state.namespace ? true : false
+      //       )
+      //     )
+      //     this.setState({ messages })
+      //   }
+      //   this.state.allNamespaces.map(n => {
+      //     if (n.namespace === c && n.sockets.find(s => s === socketId)) {
+      //       const messages = this.state.messages.concat(
+      //         this.formatMessage(
+      //           `${oldNick} disconnected`,
+      //           socketId,
+      //           '[server]',
+      //           c,
+      //           c === this.state.namespace ? true : false
+      //         )
+      //       )
+      //       this.setState({ messages })
+      //     }
+      //     return n
+      //   })
+      //   return c
+      // })
     })
 
     this.socket.on('user joined', data => {
-      const { namespace, socketId } = data
-      const user = this.state.allUsers.find(u => u.socketId === socketId)
-      console.log(`${user.nick} joined ${namespace}`)
-      const messages = this.state.messages.concat(
-        this.formatMessage(
-          `${user.nick} joined ${namespace}`,
-          socketId,
-          '[server]',
-          namespace,
-          namespace === this.state.namespace ? true : false
-        )
-      )
-      this.setState({ messages })
+      console.log(data)
+      // const { namespace, socketId } = data
+      // const user = this.state.allUsers.find(u => u.socketId === socketId)
+      // console.log(`${user.nick} joined ${namespace}`)
+      // const messages = this.state.messages.concat(
+      //   this.formatMessage(
+      //     `${user.nick} joined ${namespace}`,
+      //     socketId,
+      //     '[server]',
+      //     namespace,
+      //     namespace === this.state.namespace ? true : false
+      //   )
+      // )
+      // this.setState({ messages })
     })
 
     this.socket.on('user left', data => {
-      const { namespace, socketId } = data
-      const user = this.state.allUsers.find(u => u.socketId === socketId)
-      console.log(`${user.nick} left ${namespace}`)
-      const messages = this.state.messages.concat(
-        this.formatMessage(
-          `${user.nick} left ${namespace}`,
-          socketId,
-          '[server]',
-          namespace,
-          namespace === this.state.namespace ? true : false
-        )
-      )
-      this.setState({ messages })
+      console.log(data)
+      // const { namespace, socketId } = data
+      // const user = this.state.allUsers.find(u => u.socketId === socketId)
+      // console.log(`${user.nick} left ${namespace}`)
+      // const messages = this.state.messages.concat(
+      //   this.formatMessage(
+      //     `${user.nick} left ${namespace}`,
+      //     socketId,
+      //     '[server]',
+      //     namespace,
+      //     namespace === this.state.namespace ? true : false
+      //   )
+      // )
+      // this.setState({ messages })
     })
 
     this.socket.on('changed nick', user => {
-      if (user.socketId === this.state.user.socketId) return
-      console.log(`${user.socketId} is now known as ${user.nick}.`)
-      const allUsers = this.state.allUsers
-      const oldNick = allUsers.find(u => u.socketId === user.socketId).nick
-      // inform channels user is part of
-      this.state.chats.map(c => {
-        if (c === user.socketId) {
-          const messages = this.state.messages.concat(
-            this.formatMessage(
-              `${oldNick} is now known as ${user.nick}`,
-              user.socketId,
-              '[server]',
-              c,
-              c === this.state.namespace ? true : false
-            )
-          )
-          this.setState({ messages })
-        }
-        this.state.allNamespaces.map(n => {
-          if (n.namespace === c && n.sockets.find(s => s === user.socketId)) {
-            const messages = this.state.messages.concat(
-              this.formatMessage(
-                `${oldNick} is now known as ${user.nick}`,
-                user.socketId,
-                '[server]',
-                c,
-                c === this.state.namespace ? true : false
-              )
-            )
-            this.setState({ messages })
-          }
-          return n
-        })
-        return c
-      })
-      // update nick
-      allUsers.map(u => {
-        if (u.socketId === user.socketId) u.nick = user.nick
-        return u
-      })
-      this.setState({ allUsers })
+      console.log(user)
+      // if (user.socketId === this.state.user.socketId) return
+      // console.log(`${user.socketId} is now known as ${user.nick}.`)
+      // const allUsers = this.state.allUsers
+      // const oldNick = allUsers.find(u => u.socketId === user.socketId).nick
+      // // inform channels user is part of
+      // this.state.chats.map(c => {
+      //   if (c === user.socketId) {
+      //     const messages = this.state.messages.concat(
+      //       this.formatMessage(
+      //         `${oldNick} is now known as ${user.nick}`,
+      //         user.socketId,
+      //         '[server]',
+      //         c,
+      //         c === this.state.namespace ? true : false
+      //       )
+      //     )
+      //     this.setState({ messages })
+      //   }
+      //   this.state.allNamespaces.map(n => {
+      //     if (n.namespace === c && n.sockets.find(s => s === user.socketId)) {
+      //       const messages = this.state.messages.concat(
+      //         this.formatMessage(
+      //           `${oldNick} is now known as ${user.nick}`,
+      //           user.socketId,
+      //           '[server]',
+      //           c,
+      //           c === this.state.namespace ? true : false
+      //         )
+      //       )
+      //       this.setState({ messages })
+      //     }
+      //     return n
+      //   })
+      //   return c
+      // })
+      // // update nick
+      // allUsers.map(u => {
+      //   if (u.socketId === user.socketId) u.nick = user.nick
+      //   return u
+      // })
+      // this.setState({ allUsers })
     })
 
     this.socket.on('got namespace', namespace => {
@@ -201,10 +203,6 @@ class App extends React.Component {
     })
   }
 
-  handleChange(e) {
-    this.setState({ [e.target.name]: e.target.value })
-  }
-
   parseCommand() {
     const args = this.state.message.split(' ')
     const cmd = args[0].slice(1)
@@ -239,15 +237,14 @@ class App extends React.Component {
     }
     return message
   }
-  submitMessage(e) {
-    e.preventDefault()
-
-    if (this.state.message[0] === '/') return this.parseCommand()
-    if (!this.state.message.length > 0) return
+  submitMessage(msg) {
+    console.log(msg)
+    if (msg[0] === '/') return this.parseCommand()
+    if (!msg.length > 0) return
 
     this.sendMessage(
       this.formatMessage(
-        this.state.message,
+        msg,
         this.state.user.socketId,
         this.state.user.nick,
         this.state.namespace
@@ -262,13 +259,13 @@ class App extends React.Component {
   renderError() {
     return <div>something went wrong.</div>
   }
-  join(namespace) {
-    if (namespace.slice(0, 1) !== '#') return alert('Use a leading #, silly!')
-    if (this.state.chats.find(c => c === namespace)) return
-    console.log('joining', namespace)
-    const chats = this.state.chats.concat(namespace)
-    this.socket.emit('join', namespace)
-    this.setState({ namespace, chats })
+  join(room) {
+    if (room[0] !== '#') return alert('Use a leading #, silly!')
+    if (this.state.chats.find(c => c === room)) return
+    console.log('joining', room)
+    const chats = this.state.chats.concat(room)
+    this.socket.emit('join', room, ack => console.log('ack', ack))
+    this.setState({ room, chats })
   }
   part(namespace) {
     console.log(`leaving ${namespace}`)
@@ -335,157 +332,21 @@ class App extends React.Component {
         : this.state.namespace === this.state.user.socketId
         ? 'Namespace'
         : 'Chat with'
-
+    console.log(this.socket)
     return (
       <main role="main" className="d-flex h-100 flex-column">
-        {/*Navbar*/}
-        <Navbar bg="dark" variant="dark" expand="lg">
-          <Navbar.Toggle aria-controls="basic-navbar-nav" />
-          <Navbar.Collapse id="basic-navbar-nav">
-            <Nav className="ml-auto mr-3">
-              <Dropdown>
-                <Dropdown.Toggle variant="dark" id="dropdown-basic">
-                  Users
-                </Dropdown.Toggle>
-
-                <Dropdown.Menu className="bg-dark">
-                  {this.state.allUsers
-                    .filter(
-                      u => u.socketId !== this.socket.id && u.offline !== true
-                    )
-                    .map(u => (
-                      <Dropdown.Item
-                        key={u.socketId}
-                        className="bg-dark text-light"
-                        onClick={() => this.query(u)}
-                      >
-                        {u.nick}
-                      </Dropdown.Item>
-                    ))}
-                </Dropdown.Menu>
-              </Dropdown>
-              <Dropdown>
-                <Dropdown.Toggle variant="dark" id="dropdown-basic">
-                  Channels
-                </Dropdown.Toggle>
-
-                <Dropdown.Menu className="bg-dark">
-                  {this.state.allNamespaces
-                    .filter(n => n.namespace[0] === '#')
-                    .map(r => (
-                      <Dropdown.Item
-                        key={r.namespace}
-                        className="bg-dark text-light"
-                        onClick={() => this.join(r.namespace)}
-                      >
-                        {r.namespace}
-                      </Dropdown.Item>
-                    ))}
-                </Dropdown.Menu>
-              </Dropdown>
-            </Nav>
-          </Navbar.Collapse>
-        </Navbar>
-
+        <Topbar query={this.query} join={this.join} {...this.state} />
         <div className="d-flex h-100">
-          {/*Side Bar 2*/}
-          <div
-            className="d-flex flex-column col-sm-2 bg-dark text-light p-2"
-            id="sidebar2"
-          >
-            <h5 className=" border-bottom pb-2">Chats</h5>
-            <Button
-              key="/"
-              className="btn btn-dark d-flex"
-              onClick={() => this.activateChat('/')}
-            >
-              <div className="mr-auto">server</div>
-              {/*<div className="ml-auto">{this.state.allUsers.length}</div>*/}
-            </Button>
-            {this.state.chats.map(c => (
-              <Button
-                key={c}
-                className="btn btn-dark d-flex"
-                onClick={() => this.activateChat(c)}
-              >
-                <div
-                  className={`mr-auto ${
-                    this.countUnreadMessages(c) > 0 ? 'text-danger' : ''
-                  }`}
-                >
-                  {c[0] === '#' ||
-                  !this.state.allUsers.find(u => u.socketId === c)
-                    ? c
-                    : this.state.allUsers.find(u => u.socketId === c)['nick']}
-                </div>
-                {this.countUnreadMessages(c) > 0 ? (
-                  <div className="mr-auto badge bg-danger">
-                    {this.countUnreadMessages(c)}
-                  </div>
-                ) : null}
-                {/* user count for channels */}
-                {c[0] === '#' &&
-                this.state.allNamespaces &&
-                this.state.allNamespaces.find(n => n.namespace === c) ? (
-                  <div className="ml-auto">
-                    {
-                      this.state.allNamespaces.find(n => n.namespace === c)
-                        .sockets.length
-                    }
-                  </div>
-                ) : null}
-              </Button>
-            ))}
-          </div>
-
-          {/*Main Section*/}
-          <div className="bg-secondary d-flex flex-column flex-grow-1 px-2 pb-4">
-            {/*Main Section Header*/}
-            <div className="d-flex justify-content-between flex-wrap flex-md-nowrap pt-3 pb-2 mb-3 border-bottom">
-              <h4 className="mr-auto ml-3">
-                {title} {this.state.namespace}
-              </h4>
-            </div>
-            {/*Main Section Content*/}
-            <div className="d-flex flex-column border border-secondary flex-grow-1">
-              <div className="bg-dark flex-grow-1 p-2 text-light">
-                {this.state.messages
-                  .filter(
-                    m =>
-                      (m.to[0] === '#' && m.to === this.state.namespace) ||
-                      (m.to[0] !== '#' && m.from === this.state.namespace) ||
-                      (m.from === this.state.user.socketId &&
-                        m.to === this.state.namespace)
-                  )
-                  .map(m => (
-                    <div
-                      className="row d-flex justify-content-between"
-                      key={m.id}
-                    >
-                      <div className="col">{m.date}</div>
-                      <div className="col">{m.nick}</div>
-                      <div>{m.text}</div>
-                    </div>
-                  ))}
-              </div>
-              <form onSubmit={this.submitMessage}>
-                <input
-                  className="bg-light p-2 w-100"
-                  name="message"
-                  value={this.state.message}
-                  placeholder="Enter message"
-                  onChange={this.handleChange}
-                />
-                <Button
-                  className="btn btn-dark"
-                  type="submit"
-                  onSubmit={this.submitMessage}
-                >
-                  submit as {this.state.user.nick}
-                </Button>
-              </form>
-            </div>
-          </div>
+          <Sidebar
+            activateChat={this.activateChat}
+            countUnreadMessages={this.countUnreadMessages}
+            {...this.state}
+          />
+          <Messages
+            title={title}
+            submitMessage={this.submitMessage}
+            {...this.state}
+          />
         </div>
       </main>
     )
diff --git a/src/components/MessageEntryForm.js b/src/components/MessageEntryForm.js
new file mode 100644
index 0000000..af420cf
--- /dev/null
+++ b/src/components/MessageEntryForm.js
@@ -0,0 +1,42 @@
+import React from 'react'
+import { Button } from 'react-bootstrap'
+
+class MessageEntryForm extends React.Component {
+  constructor() {
+    super()
+    this.state = { message: '' }
+    this.handleChange = this.handleChange.bind(this)
+    this.handleSubmit = this.handleSubmit.bind(this)
+  }
+
+  handleChange(e) {
+    this.setState({ [e.target.name]: e.target.value })
+  }
+
+  handleSubmit(e) {
+    e.preventDefault()
+    this.props.submitMessage(this.state.message)
+  }
+  render() {
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <input
+          className="bg-light p-2 w-100"
+          name="message"
+          value={this.state.message}
+          placeholder="Enter message"
+          onChange={this.handleChange}
+        />
+        <Button
+          className="btn btn-dark"
+          type="submit"
+          onSubmit={this.handleSubmit}
+        >
+          submit as {this.props.user.nick}
+        </Button>
+      </form>
+    )
+  }
+}
+
+export default MessageEntryForm
diff --git a/src/components/Messages.js b/src/components/Messages.js
new file mode 100644
index 0000000..03f08d1
--- /dev/null
+++ b/src/components/Messages.js
@@ -0,0 +1,37 @@
+import React from 'react'
+import MessageEntryForm from './MessageEntryForm'
+const Messages = props => {
+  const { title, namespace, messages, user, submitMessage } = props
+  return (
+    <div className="bg-secondary d-flex flex-column flex-grow-1 px-2 pb-4">
+      {/*Main Section Header*/}
+      <div className="d-flex justify-content-between flex-wrap flex-md-nowrap pt-3 pb-2 mb-3 border-bottom">
+        <h4 className="mr-auto ml-3">
+          {title} {namespace}
+        </h4>
+      </div>
+      {/*Main Section Content*/}
+      <div className="d-flex flex-column border border-secondary flex-grow-1">
+        <div className="bg-dark flex-grow-1 p-2 text-light">
+          {messages
+            .filter(
+              m =>
+                (m.to[0] === '#' && m.to === namespace) ||
+                (m.to[0] !== '#' && m.from === namespace) ||
+                (m.from === user.socketId && m.to === namespace)
+            )
+            .map(m => (
+              <div className="row d-flex justify-content-between" key={m.id}>
+                <div className="col">{m.date}</div>
+                <div className="col">{m.nick}</div>
+                <div>{m.text}</div>
+              </div>
+            ))}
+        </div>
+        <MessageEntryForm submitMessage={submitMessage} user={user} />
+      </div>
+    </div>
+  )
+}
+
+export default Messages
diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
new file mode 100644
index 0000000..3f5bf32
--- /dev/null
+++ b/src/components/Sidebar.js
@@ -0,0 +1,60 @@
+import React from 'react'
+import { Button } from 'react-bootstrap'
+
+const Sidebar = props => {
+  const {
+    activateChat,
+    chats,
+    allUsers,
+    countUnreadMessages,
+    allNamespaces,
+  } = props
+  return (
+    <div
+      className="d-flex flex-column col-sm-2 bg-dark text-light p-2"
+      id="sidebar2"
+    >
+      <h5 className=" border-bottom pb-2">Chats</h5>
+      <Button
+        key="/"
+        className="btn btn-dark d-flex"
+        onClick={() => activateChat('/')}
+      >
+        <div className="mr-auto">server</div>
+        {/*<div className="ml-auto">{allUsers.length}</div>*/}
+      </Button>
+      {chats.map(c => (
+        <Button
+          key={c}
+          className="btn btn-dark d-flex"
+          onClick={() => activateChat(c)}
+        >
+          <div
+            className={`mr-auto ${
+              countUnreadMessages(c) > 0 ? 'text-danger' : ''
+            }`}
+          >
+            {c[0] === '#' || !allUsers.find(u => u.socketId === c)
+              ? c
+              : allUsers.find(u => u.socketId === c)['nick']}
+          </div>
+          {countUnreadMessages(c) > 0 ? (
+            <div className="mr-auto badge bg-danger">
+              {countUnreadMessages(c)}
+            </div>
+          ) : null}
+          {/* user count for channels */}
+          {c[0] === '#' &&
+          allNamespaces &&
+          allNamespaces.find(n => n.namespace === c) ? (
+            <div className="ml-auto">
+              {allNamespaces.find(n => n.namespace === c).sockets.length}
+            </div>
+          ) : null}
+        </Button>
+      ))}
+    </div>
+  )
+}
+
+export default Sidebar
diff --git a/src/components/Topbar.js b/src/components/Topbar.js
new file mode 100644
index 0000000..7600b54
--- /dev/null
+++ b/src/components/Topbar.js
@@ -0,0 +1,56 @@
+import React from 'react'
+import { Navbar, Nav, Dropdown } from 'react-bootstrap'
+
+const Topbar = props => {
+  const { allUsers, user, allNamespaces, query, join } = props
+
+  return (
+    <Navbar bg="dark" variant="dark" expand="lg">
+      <Navbar.Toggle aria-controls="basic-navbar-nav" />
+      <Navbar.Collapse id="basic-navbar-nav">
+        <Nav className="ml-auto mr-3">
+          <Dropdown>
+            <Dropdown.Toggle variant="dark" id="dropdown-basic">
+              Users
+            </Dropdown.Toggle>
+
+            <Dropdown.Menu className="bg-dark">
+              {allUsers
+                .filter(u => u.socketId !== user.id && u.offline !== true)
+                .map(u => (
+                  <Dropdown.Item
+                    key={u.socketId}
+                    className="bg-dark text-light"
+                    onClick={() => query(u)}
+                  >
+                    {u.nick}
+                  </Dropdown.Item>
+                ))}
+            </Dropdown.Menu>
+          </Dropdown>
+          <Dropdown>
+            <Dropdown.Toggle variant="dark" id="dropdown-basic">
+              Channels
+            </Dropdown.Toggle>
+
+            <Dropdown.Menu className="bg-dark">
+              {allNamespaces
+                .filter(n => n.namespace[0] === '#')
+                .map(r => (
+                  <Dropdown.Item
+                    key={r.namespace}
+                    className="bg-dark text-light"
+                    onClick={() => join(r.namespace)}
+                  >
+                    {r.namespace}
+                  </Dropdown.Item>
+                ))}
+            </Dropdown.Menu>
+          </Dropdown>
+        </Nav>
+      </Navbar.Collapse>
+    </Navbar>
+  )
+}
+
+export default Topbar
diff --git a/src/components/index.js b/src/components/index.js
new file mode 100644
index 0000000..83c2698
--- /dev/null
+++ b/src/components/index.js
@@ -0,0 +1,3 @@
+export { default as Messages } from './Messages'
+export { default as Sidebar } from './Sidebar'
+export { default as Topbar } from './Topbar'