diff --git a/assets/Images/react-native.png b/assets/Images/react-native.png
deleted file mode 100644
index a24781a..0000000
Binary files a/assets/Images/react-native.png and /dev/null differ
diff --git a/package.json b/package.json
index 17f4d1f..fb45480 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "react-timer-mixin": "^0.13.3",
     "redux": "^3.0.4",
     "redux-thunk": "^1.0.0",
-    "sendbird": "^2.1.7"
+    "sendbird": "^2.1.6"
   },
   "devDependencies": {
     "babel-core": "6.3.17",
diff --git a/shared/actions/sendbird.js b/shared/actions/sendbird.js
index 6a774d7..c3be496 100644
--- a/shared/actions/sendbird.js
+++ b/shared/actions/sendbird.js
@@ -1,6 +1,8 @@
 import { SENDBIRD_CONNECT, SENDBIRD_CONNECT_ERROR, SENDBIRD_CONNECTED, SENDBIRD_SET_USER } from '../constants/ActionTypes'
 import { SENDBIRD_APP_ID } from '../constants/Config'
 
+import { listChannels } from './channels'
+
 import sendbird from 'sendbird'
 
 function shouldConnect(state) {
@@ -27,6 +29,10 @@ function requestConnect(id, user) {
       image_url: '',
       access_token: '',
       successFunc: (data) => {
+        console.log(data)
+
+        dispatch(listChannels())
+
         dispatch({
           type: SENDBIRD_CONNECTED
         })
@@ -47,7 +53,7 @@ function getGuestId() {
   // which we only have 1k to test with,
   // so save the guest id per client
   const now = new Date()
-  return 'dev-native' //now.getTime()
+  return now.getTime()
 }
 
 export function connectSendbird(user) {
diff --git a/shared/components/elements/Bubble.js b/shared/components/atoms/Bubble.js
similarity index 100%
rename from shared/components/elements/Bubble.js
rename to shared/components/atoms/Bubble.js
diff --git a/shared/components/elements/Button.js b/shared/components/atoms/Button.js
similarity index 100%
rename from shared/components/elements/Button.js
rename to shared/components/atoms/Button.js
diff --git a/shared/components/elements/EmptyState.js b/shared/components/atoms/EmptyState.js
similarity index 100%
rename from shared/components/elements/EmptyState.js
rename to shared/components/atoms/EmptyState.js
diff --git a/shared/components/elements/LoadingIndicator.js b/shared/components/atoms/LoadingIndicator.js
similarity index 100%
rename from shared/components/elements/LoadingIndicator.js
rename to shared/components/atoms/LoadingIndicator.js
diff --git a/shared/components/elements/MenuGroupLabel.js b/shared/components/atoms/MenuGroupLabel.js
similarity index 92%
rename from shared/components/elements/MenuGroupLabel.js
rename to shared/components/atoms/MenuGroupLabel.js
index bc6ab43..572a65f 100644
--- a/shared/components/elements/MenuGroupLabel.js
+++ b/shared/components/atoms/MenuGroupLabel.js
@@ -3,7 +3,7 @@ import React, {
   View
 } from 'react-native'
 
-import Text from './Text'
+import Text from 'Text'
 import globalStyles from '../../constants/GlobalStyles'
 
 export default class NavListHeader extends Component {
@@ -19,7 +19,6 @@ export default class NavListHeader extends Component {
 const styles = {
   text: {
     ...globalStyles.navigationHeader,
-    color: '#fff',
     letterSpacing: 1
   },
   container: {
diff --git a/shared/components/elements/MenuItem.js b/shared/components/atoms/MenuItem.js
similarity index 80%
rename from shared/components/elements/MenuItem.js
rename to shared/components/atoms/MenuItem.js
index 86898bd..31f7db0 100644
--- a/shared/components/elements/MenuItem.js
+++ b/shared/components/atoms/MenuItem.js
@@ -11,8 +11,8 @@ import { navigateTo, closeSideMenu } from '../../actions/navigation'
 import globalStyles from '../../constants/GlobalStyles'
 import colors from '../../constants/Colors'
 
-import Bubble from './Bubble'
-import Text from './Text'
+import Bubble from '../atoms/Bubble'
+import Text from '../atoms/Text'
 
 
 export default class MenuItem extends Component {
@@ -20,8 +20,7 @@ export default class MenuItem extends Component {
     text: PropTypes.string,
     selected: PropTypes.bool,
     handlePress: PropTypes.func,
-    notificationCounter: PropTypes.number,
-    style: PropTypes.any
+    notificationCounter: PropTypes.number
   };
 
   _handlePress() {
@@ -37,7 +36,7 @@ export default class MenuItem extends Component {
 
     return (
       <TouchableHighlight onPress={this._handlePress.bind(this)} activeOpacity={0.6} underlayColor="transparent">
-        <View style={this.props.selected ? [styles.container, this.props.style, styles.active] : [styles.container, this.props.style]}>
+        <View style={this.props.selected ? [styles.container, styles.active] : styles.container}>
           <Text style={styles.text}>{this.props.text}</Text>
           {notificationCounterMarkup}
         </View>
@@ -56,10 +55,13 @@ const styles = {
   active: {
     backgroundColor: 'rgba(0, 0, 0, 0.1)'
   },
+  icon: {
+    position: 'relative',
+    fontSize: 26,
+    color: 'white'
+  },
   text: {
     ...globalStyles.navigation,
-    paddingLeft: 2,
-    fontSize: 16,
-    color: '#fff'
+    paddingLeft: 2
   }
 }
diff --git a/shared/components/elements/Separator.js b/shared/components/atoms/Separator.js
similarity index 100%
rename from shared/components/elements/Separator.js
rename to shared/components/atoms/Separator.js
diff --git a/shared/components/elements/Text.js b/shared/components/atoms/Text.js
similarity index 100%
rename from shared/components/elements/Text.js
rename to shared/components/atoms/Text.js
diff --git a/shared/components/elements/TimePast.js b/shared/components/atoms/TimePast.js
similarity index 100%
rename from shared/components/elements/TimePast.js
rename to shared/components/atoms/TimePast.js
diff --git a/shared/components/container/ActionBar.js b/shared/components/container/ActionBar.js
index 433fcff..94f1151 100644
--- a/shared/components/container/ActionBar.js
+++ b/shared/components/container/ActionBar.js
@@ -12,8 +12,8 @@ import { toggleSideMenu, navigateToWithHistory, navigateBack } from '../../actio
 import globalStyles from '../../constants/GlobalStyles'
 import colors from '../../constants/Colors'
 
-import Text from '../elements/Text'
-import Bubble from '../elements/Bubble'
+import Text from './../atoms/Text'
+import Bubble from './../atoms/Bubble'
 
 
 class ActionBar extends Component {
@@ -99,7 +99,9 @@ const styles = {
     height: 44,
     flexDirection: 'row',
     backgroundColor: colors.MAIN_COLOR,
-    justifyContent: 'space-between'
+    justifyContent: 'space-between',
+    borderBottomColor: colors.BORDER,
+    borderBottomWidth: 1
   },
   bubble: {
     position: 'relative',
diff --git a/shared/components/container/ListItem.js b/shared/components/container/ListItem.js
index 71785a2..80dc049 100644
--- a/shared/components/container/ListItem.js
+++ b/shared/components/container/ListItem.js
@@ -6,11 +6,11 @@ import React, {
   TouchableHighlight
 } from 'react-native'
 
-import Text from './../elements/Text'
-import LoadingIndicator from './../elements/LoadingIndicator'
+import Text from './../atoms/Text'
+import LoadingIndicator from './../atoms/LoadingIndicator'
 import colors from '../../constants/Colors'
 import globalStyles from '../../constants/GlobalStyles'
-import Bubble from './../elements/Bubble'
+import Bubble from './../atoms/Bubble'
 
 export default class ListItem extends Component {
   static propTypes = {
diff --git a/shared/components/container/MenuContainer.js b/shared/components/container/MenuContainer.js
index 02cdccc..b185ce5 100644
--- a/shared/components/container/MenuContainer.js
+++ b/shared/components/container/MenuContainer.js
@@ -12,10 +12,7 @@ import { navigateTo, resetTo } from '../../actions/navigation'
 
 import globalStyles from '../../constants/GlobalStyles'
 
-import Profile from '../elements/Profile'
-import Text from '../elements/Text'
-import MenuGroupLabel from '../elements/MenuGroupLabel'
-import MenuItem from '../elements/MenuItem'
+import MenuGroupLabel from './../atoms/MenuGroupLabel'
 import MenuItemContainer from './MenuItemContainer'
 
 const window = Dimensions.get('window')
@@ -23,48 +20,40 @@ const window = Dimensions.get('window')
 class MenuContainer extends Component {
   render() {
 
+    console.log()
+
     const publicChannels = []
 
-    let publicChannelsDummy = []
-    publicChannelsDummy.forEach((channelName) => {
+    this.props.channels.forEach((channel) => {
       publicChannels.push(
-        <MenuItemContainer key={'MenuChannel' + channelName} text={channelName} navTarget='conversation'/>
+        <MenuItemContainer key={'MenuChannel' + channel.name} text={channel.name} navTarget='channel' channel={channel} />
       )
     })
 
     return (
-      <View style={styles.background}>
+      <Image source={require('../../../assets/Images/drawer_background.jpg')} style={styles.backgroundImage}>
         <View style={styles.statusbar}></View>
         <View style={styles.container}>
           <ScrollView style={styles.scrollContainer}>
+            <MenuGroupLabel text='Public Channels'/>
+            {publicChannels}
 
-            <Profile />
-
-            <MenuItem
-              key={'MenuChannelsList'}
-              text="list channels"
-              navTarget='channels'
-              style={styles.highlight}/>
-            <MenuGroupLabel text='Joined Channels'/>
-            {publicChannels.length > 0 ? publicChannels : <Text style={styles.noJoinedChannles}>no joined channels</Text>}
+            <MenuGroupLabel text='Private Chats'/>
 
             <MenuGroupLabel text='More'/>
             <MenuItemContainer text='Settings' navTarget='settings'/>
+            <MenuItemContainer text='About us' navTarget='aboutUs'/>
             {Platform.OS === 'android' ?
               <View style={{height: 100, width: window.width}}/> : null
             }
           </ScrollView>
         </View>
-      </View>
+      </Image>
     )
   }
 }
 
 const styles = {
-  background: {
-    flex: 1,
-    backgroundColor: '#6e5baa',
-  },
   container: {
     flexDirection: 'row'
   },
@@ -107,15 +96,6 @@ const styles = {
     height: 0,
     width: window.width * 0.8,
     flex: 1
-  },
-  highlight: {
-    backgroundColor: '#32c5e6',
-    marginTop: 20,
-    marginBottom: 20
-  },
-  noJoinedChannles: {
-    margin: 20,
-    color: '#fff'
   }
 }
 
@@ -126,8 +106,8 @@ if (Platform.OS === 'ios') {
 export default connect(
   (state) => {
     return {
-      login: state.login,
-      notifications: state.notifications
+      channels: state.channels.list,
+
     }
   },
   (dispatch) => {
diff --git a/shared/components/container/MenuItemContainer.js b/shared/components/container/MenuItemContainer.js
index efaa006..e085ebc 100644
--- a/shared/components/container/MenuItemContainer.js
+++ b/shared/components/container/MenuItemContainer.js
@@ -1,18 +1,17 @@
 import React, {
   Component,
-  View,
   PropTypes,
-  TouchableHighlight
 } from 'react-native'
 
 import { connect } from 'react-redux/native'
 import { navigateTo, closeSideMenu } from '../../actions/navigation'
 
-import MenuItem from '../elements/MenuItem'
+import MenuItem from '../atoms/MenuItem'
 
 class MenuItemContainer extends Component {
   static propTypes = {
     navTarget: PropTypes.string,
+    channel: PropTypes.object,
     text: PropTypes.string,
     handlePress: PropTypes.func,
     notificationCounter: PropTypes.number
@@ -31,7 +30,7 @@ class MenuItemContainer extends Component {
     if (this.props.handlePress) {
       this.props.handlePress()
     } else if (this.props.route !== this.props.navTarget) {
-      this.props.navigateTo(this.props.navTarget)
+      this.props.navigateTo(this.props.navTarget, { channel: this.props.channel })
     } else {
       this.props.closeSideMenu()
     }
@@ -44,6 +43,7 @@ class MenuItemContainer extends Component {
         selected={this.props.navTarget === this.props.route}
         handlePress={this._handlePress.bind(this)}
         notificationCounter={this.props.notificationCounter}
+        channel={this.props.chnnel}
       />
     )
   }
diff --git a/shared/components/container/SendbirdConnect.js b/shared/components/container/SendbirdConnect.js
index f809be8..aa786c7 100644
--- a/shared/components/container/SendbirdConnect.js
+++ b/shared/components/container/SendbirdConnect.js
@@ -13,7 +13,7 @@ import { connect } from 'react-redux'
 import { resetTo } from '../../actions/navigation'
 import { connectSendbird } from '../../actions/sendbird'
 
-import Button from '../elements/Button'
+import Button from '../atoms/Button'
 
 class SendbirdConnect extends Component {
 
@@ -36,13 +36,13 @@ class SendbirdConnect extends Component {
 
   render() {
     return (
-      <View >
+      <View>
         <TextInput
           ref="inputNickname"
           disabled={this.props.sendbird.connecting}
           style={styles.input}
           autoCorrect={false}
-          placeholder="nickname"
+          placeholder=""
           placeholderTextColor="#bbbbbb"
           keyboardType="default"
           autoCapitalize="none"
@@ -52,13 +52,7 @@ class SendbirdConnect extends Component {
           returnKeyType="next"
         />
 
-        <Button
-          onPress={this.onConnect.bind(this)}
-          color="#32c5e6"
-          textColor="#fff"
-          text="Enter"
-          style={styles.button}
-        />
+        <Button onPress={this.onConnect.bind(this)}>Login</Button>
       </View>
     )
   }
@@ -75,13 +69,6 @@ const styles = {
     marginBottom: 10,
     backgroundColor: '#eee',
     width: 200
-  },
-  button: {
-    container: {
-      width: 200,
-      marginLeft: 15,
-      marginRight: 15,
-    }
   }
 }
 
@@ -95,6 +82,6 @@ export default connect(
   }),
   dispatch => ({
     connect: (id, user) => dispatch(connectSendbird(id, user)),
-    goToChat: () => dispatch(resetTo('messenger'))
+    goToChat: () => dispatch(resetTo('settings'))
   })
 )(SendbirdConnect)
\ No newline at end of file
diff --git a/shared/components/elements/IntroText.js b/shared/components/elements/IntroText.js
deleted file mode 100644
index 75a9ad1..0000000
--- a/shared/components/elements/IntroText.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React, {
-  Component,
-  PropTypes,
-  View,
-  TouchableHighlight
-} from 'react-native'
-
-import Text from './Text'
-
-export default class IntroText extends Component {
-
-  render() {
-    return (
-      <View style={styles.intro}>
-        <Text style={styles.heading}>Messenger</Text>
-
-        <View>
-          <View>
-            <Text style={styles.instructions}>
-              Exercises:
-            </Text>
-          </View>
-          <View><Text style={styles.instructions}>1. Add the team logo</Text></View>
-          <View><Text style={styles.instructions}>2. Display the username</Text></View>
-          <View><Text style={styles.instructions}>3. Toggle and display the channel list</Text></View>
-          <View><Text style={styles.instructions}>4. Join a channel by clicking on it</Text></View>
-          <View><Text style={styles.instructions}>5. Open and show a messenger-channel</Text></View>
-          <View><Text style={styles.instructions}>6. Send and display messages</Text></View>
-        </View>
-      </View>
-    )
-  }
-}
-
-const styles = {
-  intro: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    margin: 20
-  },
-  heading: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-    color: '#abb8c4',
-    marginBottom: 20
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
-    fontSize: 14
-  }
-}
\ No newline at end of file
diff --git a/shared/components/elements/Profile.js b/shared/components/elements/Profile.js
deleted file mode 100644
index bda52ca..0000000
--- a/shared/components/elements/Profile.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React, {
-  Component,
-  Image,
-  View
-} from 'react-native'
-
-import Text from './Text'
-
-export default class Profile extends Component {
-
-  render() {
-    return (
-      <View style={styles.container}>
-        <Text>Username</Text>
-      </View>
-    )
-  }
-}
-
-const styles = {
-  container: {
-    margin: 20
-  }
-}
\ No newline at end of file
diff --git a/shared/components/elements/TeamLogo.js b/shared/components/elements/TeamLogo.js
deleted file mode 100644
index 5a6e7e4..0000000
--- a/shared/components/elements/TeamLogo.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React, {
-  Component,
-  Image,
-  View
-} from 'react-native'
-
-import Text from './Text'
-
-export default class TeamLogo extends Component {
-
-  render() {
-    return (
-      <View style={styles.container}>
-        <Image
-          style={styles.image}
-          source={require('../../../assets/Images/react-native.png')} />
-        <Text>HackReact Team</Text>
-      </View>
-    )
-  }
-}
-
-const styles = {
-  container: {
-    margin: 20
-  },
-  image: {
-    width: 200,
-    height: 100
-  }
-}
\ No newline at end of file
diff --git a/shared/components/pages/ChannelPage.js b/shared/components/pages/ChannelPage.js
new file mode 100644
index 0000000..6b29833
--- /dev/null
+++ b/shared/components/pages/ChannelPage.js
@@ -0,0 +1,124 @@
+import React, {
+  Platform,
+  Component,
+  Dimensions,
+  DeviceEventEmitter,
+  View,
+  ScrollView,
+  InteractionManager,
+  TextInput
+} from 'react-native'
+import { connect } from 'react-redux/native'
+
+import globalStyles from '../../constants/GlobalStyles'
+import colors from '../../constants/Colors'
+
+import ActionBar from '../container/ActionBar'
+import LoadingIndicator from '../atoms/LoadingIndicator'
+import Text from '../atoms/Text'
+import Button from '../atoms/Button'
+
+class ChannelPage extends Component {
+  state = {
+    interactionsFinished: false,
+    keyboardHeight: 0
+  };
+
+  componentDidMount() {
+    InteractionManager.runAfterInteractions(() => {
+      this.setState({interactionsFinished: true})
+    })
+  }
+
+  componentWillMount() {
+    DeviceEventEmitter.addListener('keyboardWillShow', this.keyboardWillShow.bind(this))
+    DeviceEventEmitter.addListener('keyboardWillHide', this.keyboardWillHide.bind(this))
+  }
+
+  keyboardWillShow(e) {
+    this.setState({keyboardHeight: e.endCoordinates.height})
+  }
+
+  keyboardWillHide(e) {
+    this.setState({keyboardHeight: 0})
+  }
+
+  _sendMessage() {
+
+  }
+
+  render() {
+    let interactionsFinishedMarkup = <LoadingIndicator />
+
+    if (this.state.interactionsFinished) {
+      interactionsFinishedMarkup = (
+        <View style={styles.container}>
+          <ScrollView showsVerticalScrollIndicator={false} keyboardShouldPersistTaps={true}>
+            <Text>message ....</Text>
+          </ScrollView>
+          <View style={[styles.messageInputContainer, {marginBottom: this.state.keyboardHeight}]}>
+            <TextInput
+              value={this.state.text}
+              multiline={true}
+              autoCorrect={true}
+              ref="input"
+              onChangeText={(text) => { this.setState({text: text}) }}
+              style={styles.input}
+              placeholder="Enter comment" />
+
+            <Button
+              text="Post"
+              color={colors.MAIN_COLOR}
+              textColor={colors.WHITE}
+              style={{container: {borderRadius: 4 } }}
+              onPress={this._sendMessage.bind(this)} />
+          </View>
+        </View>
+      )
+    }
+
+    return (
+      <View style={styles.container}>
+        <ActionBar title={(this.props.channel || {}).name}/>
+        {interactionsFinishedMarkup}
+      </View>
+    )
+  }
+}
+
+const window = Dimensions.get('window')
+const styles = {
+  input: {
+    ...globalStyles.m,
+    width: window.width - 70,
+    backgroundColor: colors.INPUT_BG,
+    paddingLeft: 10,
+    paddingTop: 0,
+    paddingBottom: 0,
+    borderRadius: 4,
+    marginRight: 6
+  },
+  container: {
+    flex: 1,
+    backgroundColor: '#fff'
+  },
+  commentsHeadline: {
+    ...globalStyles.s,
+    marginLeft: 15,
+    marginVertical: 15
+  },
+  messageInputContainer: {
+    flexDirection: 'row',
+    width: window.width,
+    height: 59,
+    borderColor: colors.LINE,
+    borderWidth: 0,
+    borderTopWidth: 1,
+    padding: 8
+  }
+}
+
+export default connect(
+  null,
+  null
+)(ChannelPage)
diff --git a/shared/components/pages/ChannelsPage.js b/shared/components/pages/ChannelsPage.js
deleted file mode 100644
index 6065d23..0000000
--- a/shared/components/pages/ChannelsPage.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import React, {
-  Platform,
-  Component,
-  View,
-  ScrollView,
-  InteractionManager,
-  Switch
-} from 'react-native'
-import { connect } from 'react-redux/native'
-
-import { listChannels } from '../../actions/channels'
-
-import ActionBar from '../container/ActionBar'
-import LoadingIndicator from '../elements/LoadingIndicator'
-import Text from '../elements/Text'
-import IntroText from '../elements/IntroText'
-
-class ChannelsPage extends Component {
-  state = {
-    interactionsFinished: false
-  };
-
-  componentDidMount() {
-    InteractionManager.runAfterInteractions(() => {
-      this.setState({interactionsFinished: true})
-
-      this.props.listChannels()
-    })
-  }
-
-  render() {
-    let interactionsFinishedMarkup = <LoadingIndicator/>
-
-    if (this.state.interactionsFinished) {
-      interactionsFinishedMarkup = <Text>Lade Channels</Text>
-    }
-
-    return (
-      <View style={styles.container}>
-        <ActionBar title="Available Channels"/>
-        <ScrollView showsVerticalScrollIndicator={false} keyboardShouldPersistTaps={true}>
-          {interactionsFinishedMarkup}
-        </ScrollView>
-      </View>
-    )
-  }
-}
-
-const styles = {
-  container: {
-    flex: 1,
-    backgroundColor: '#f7f8fc'
-  }
-}
-
-
-export default connect(
-  null,
-  (dispatch) => {
-    return {
-      listChannels: () => dispatch(listChannels())
-    }
-  }
-)(ChannelsPage)
diff --git a/shared/components/pages/InitialView.js b/shared/components/pages/InitialView.js
index cc39573..04b0107 100644
--- a/shared/components/pages/InitialView.js
+++ b/shared/components/pages/InitialView.js
@@ -15,13 +15,14 @@ import TimerMixin from 'react-timer-mixin'
 
 import Dimensions from 'Dimensions'
 
-import Button from '../elements/Button'
-import Text from '../elements/Text'
-import LoadingIndicator from '../elements/LoadingIndicator'
+import Button from '../atoms/Button'
+import Text from '../atoms/Text'
+import LoadingIndicator from '../atoms/LoadingIndicator'
 
 import ActionBar from '../container/ActionBar'
 import SendbirdConnect from '../container/SendbirdConnect'
 
+
 import colors, { MAIN_COLOR } from '../../constants/Colors'
 import globalStyles from '../../constants/GlobalStyles'
 
@@ -30,10 +31,19 @@ class InitialView extends Component {
   render() {
     return (
       <View style={styles.container}>
+        <ActionBar title="HackReact" />
         <View style={styles.content}>
-          <Text style={styles.headline}>
-            hackreact messenger
+          <Text style={styles.welcome}>
+            Welcome to React Native!
+          </Text>
+          <Text style={styles.instructions}>
+            Enjoy coding with elbstack :)
           </Text>
+          <Text style={styles.instructions}>
+            Press Cmd+R to reload,{'\n'}
+            Cmd+D or shake for dev menu
+          </Text>
+
           <SendbirdConnect />
         </View>
       </View>
@@ -46,19 +56,17 @@ const window = Dimensions.get('window')
 const styles = {
   container: {
     flex: 1,
-    backgroundColor: '#6e5baa',
+    backgroundColor: '#F5FCFF',
   },
   content: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center'
   },
-  headline: {
+  welcome: {
     fontSize: 20,
     textAlign: 'center',
     margin: 10,
-    color: '#fff',
-    marginBottom: 20
   },
   instructions: {
     textAlign: 'center',
diff --git a/shared/components/pages/MessengerPage.js b/shared/components/pages/MessengerPage.js
deleted file mode 100644
index 81738f6..0000000
--- a/shared/components/pages/MessengerPage.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import React, {
-  Platform,
-  Component,
-  View,
-  ScrollView,
-  InteractionManager,
-  Switch
-} from 'react-native'
-import { connect } from 'react-redux/native'
-
-import ActionBar from '../container/ActionBar'
-import LoadingIndicator from '../elements/LoadingIndicator'
-import Text from '../elements/Text'
-import IntroText from '../elements/IntroText'
-
-class MessengerPage extends Component {
-  state = {
-    interactionsFinished: false
-  };
-
-  componentDidMount() {
-    InteractionManager.runAfterInteractions(() => {
-      this.setState({interactionsFinished: true})
-    })
-  }
-
-  render() {
-    let interactionsFinishedMarkup = <LoadingIndicator/>
-
-    if (this.state.interactionsFinished) {
-      interactionsFinishedMarkup = <IntroText />
-    }
-
-    return (
-      <View style={styles.container}>
-        <ActionBar title="Messenger"/>
-        <ScrollView showsVerticalScrollIndicator={false} keyboardShouldPersistTaps={true}>
-          {interactionsFinishedMarkup}
-        </ScrollView>
-      </View>
-    )
-  }
-}
-
-const styles = {
-  container: {
-    flex: 1,
-    backgroundColor: '#f7f8fc'
-  }
-}
-
-
-export default connect(
-  null,
-  null
-)(MessengerPage)
diff --git a/shared/components/pages/SettingsPage.js b/shared/components/pages/SettingsPage.js
index e748ce2..86b0d71 100644
--- a/shared/components/pages/SettingsPage.js
+++ b/shared/components/pages/SettingsPage.js
@@ -11,9 +11,9 @@ import { connect } from 'react-redux/native'
 import { toggleSettings } from '../../actions/settings'
 
 import ActionBar from '../container/ActionBar'
-import LoadingIndicator from '../elements/LoadingIndicator'
-import Text from '../elements/Text'
-import Separator from '../elements/Separator'
+import LoadingIndicator from '../atoms/LoadingIndicator'
+import Text from '../atoms/Text'
+import Separator from '../atoms/Separator'
 
 import globalStyles from '../../constants/GlobalStyles'
 import colors from '../../constants/Colors'
@@ -75,7 +75,7 @@ class SettingsPage extends Component {
               <Text style={styles.settingsItemLabel}>{item.label}</Text>
               <Switch
                 style={[styles.settingsSwitch, {marginRight: rightMargin}]}
-                onValueChange={value =>  this._onValueChange(item.key, value) }
+                onValueChange={(value) => { this._onValueChange(item.key, value) }}
                 value={this.props.settings[item.key]}
               />
             </View>
diff --git a/shared/constants/ActionTypes.js b/shared/constants/ActionTypes.js
index 89c5e99..2bb4a5f 100644
--- a/shared/constants/ActionTypes.js
+++ b/shared/constants/ActionTypes.js
@@ -20,4 +20,4 @@ export const SENDBIRD_CONNECTED = 'SENDBIRD_CONNECTED'
 export const SENDBIRD_SET_USER = 'SENDBIRD_SET_USER'
 
 export const SENDBIRD_LIST_CHANNELS = 'SENDBIRD_LIST_CHANNELS'
-export const SENDBIRD_LIST_CHANNELS_ERROR = 'SENDBIRD_LIST_CHANNELS_ERROR'
\ No newline at end of file
+export const SENDBIRD_LIST_CHANNELS_ERROR = 'SENDBIRD_LIST_CHANNELS_ERROR'
diff --git a/shared/constants/Colors.js b/shared/constants/Colors.js
index e8475ed..985f468 100644
--- a/shared/constants/Colors.js
+++ b/shared/constants/Colors.js
@@ -1,4 +1,4 @@
-export const MAIN_COLOR = '#6e5baa'
+export const MAIN_COLOR = '#00bffe'
 export const DARKGREY = '#666666'
 export const LIGHTGREY = '#b0b0b0'
 export const WHITE = '#fff'
diff --git a/shared/constants/Config.js b/shared/constants/Config.js
index 2f159c1..4cc0547 100644
--- a/shared/constants/Config.js
+++ b/shared/constants/Config.js
@@ -1,2 +1,3 @@
 export const SENDBIRD_APP_ID='C6849D70-112B-46D8-B3DA-EDCC2EA36C76'
 export const GENERIC_ERROR_MESSAGE = 'Something went wrong, please try again later.'
+
diff --git a/shared/navigator/renderScene.js b/shared/navigator/renderScene.js
index 56620ee..fa91e04 100644
--- a/shared/navigator/renderScene.js
+++ b/shared/navigator/renderScene.js
@@ -1,8 +1,8 @@
 import React, { Text, View } from 'react-native'
 
 import InitialView from '../components/pages/InitialView'
-import MessengerPage from '../components/pages/MessengerPage'
 import SettingsPage from '../components/pages/SettingsPage'
+import ChannelPage from '../components/pages/ChannelPage'
 
 export default function renderScene(route) {
   let currentView
@@ -10,12 +10,12 @@ export default function renderScene(route) {
     case 'welcome':
       currentView = <InitialView />
       break
-    case 'messenger':
-      currentView = <MessengerPage />
-      break
     case 'settings':
       currentView = <SettingsPage />
       break
+    case 'channel':
+      currentView = <ChannelPage {...route.params} />
+      break
     default:
       currentView = <View style={{flex: 1, backgroundColor: '#fff'}}><Text>404</Text></View>
   }
diff --git a/shared/reducers/channels.js b/shared/reducers/channels.js
index e09b48d..c660505 100644
--- a/shared/reducers/channels.js
+++ b/shared/reducers/channels.js
@@ -1,6 +1,10 @@
 import { SENDBIRD_LIST_CHANNELS } from '../constants/ActionTypes'
 
-export default function channels(state = {}, action) {
+const initialState = {
+  list: []
+}
+
+export default function channels(state = initialState, action) {
   switch (action.type) {
     case SENDBIRD_LIST_CHANNELS:
       return Object.assign(
@@ -9,10 +13,7 @@ export default function channels(state = {}, action) {
         {
           page: action.data.page,
           next: action.data.next,
-          list: action.data.channels.reduce((memo, channel)=> ({
-            ...memo,
-            [channel.id]: channel
-          }), {})
+          list: action.data.channels
         }
       )
     default:
diff --git a/shared/reducers/index.js b/shared/reducers/index.js
index 9f0c0f4..4cb1f67 100644
--- a/shared/reducers/index.js
+++ b/shared/reducers/index.js
@@ -1,8 +1,8 @@
 import { combineReducers } from 'redux'
 import channels from './channels'
+import navigation from './navigation'
 import sendbird from './sendbird'
 import settings from './settings'
-import navigation from './navigation'
 
 const rootReducer = combineReducers({
   channels,