diff --git a/package.json b/package.json
index 715cdbbdf..7ace27641 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "lodash": "4.16.4",
     "react": "15.3.2",
     "react-native": "0.34.1",
+    "react-native-button": "1.7.1",
     "react-native-keyboard-spacer": "0.3.0",
     "react-native-router-flux": "3.36.0",
     "react-redux": "4.4.5",
diff --git a/src/components/channels_list_view.js b/src/components/channels_list_view.js
index 34f3b06ff..acd7c01f6 100644
--- a/src/components/channels_list_view.js
+++ b/src/components/channels_list_view.js
@@ -2,59 +2,57 @@
 // See License.txt for license information.
 
 import React, {Component, PropTypes} from 'react';
-import {ListView, StyleSheet, View, Text} from 'react-native';
-const {DataSource} = ListView;
+import {View, Text} from 'react-native';
 import {Actions as Routes} from 'react-native-router-flux';
+import Button from 'react-native-button';
 import _ from 'lodash';
-import ErrorText from 'components/error_text';
 
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        flexDirection: 'column',
-        alignItems: 'center',
-        paddingTop: 200,
-        backgroundColor: 'white'
-    }
-});
+import ErrorText from 'components/error_text';
+import {GlobalStyles} from 'styles';
 
 const propTypes = {
+    teams: PropTypes.object.isRequired,
     channels: PropTypes.object.isRequired,
     actions: PropTypes.object.isRequired
 };
 
 class ChannelsListView extends Component {
     static propTypes = propTypes;
-    ds: DataSource = new DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
 
     componentWillMount() {
         this.props.actions.fetchChannels();
     }
 
     componentWillReceiveProps(props) {
-        if (props.channels.currentChannelId &&
-          !this.props.channels.currentChannelId) {
+        const {currentChannelId} = props.channels;
+        if (currentChannelId &&
+          currentChannelId !== this.props.channels.currentChannelId) {
             Routes.goToPostsList();
         }
     }
 
-    setChannel(channel) {
-        this.props.actions.selectChannel(channel);
-    }
-
     render() {
+        const {data: teams, currentTeamId} = this.props.teams;
+        const currentTeam = teams[currentTeamId];
         const channels = _.values(this.props.channels.data);
         return (
-            <View style={styles.container}>
-                <ListView
-                    dataSource={this.ds.cloneWithRows(channels)}
-                    enableEmptySections={true}
-                    renderRow={(channel) => (
-                        <Text onPress={() => this.props.actions.selectChannel(channel)}>
-                            {channel.display_name}
-                        </Text>
-                    )}
-                />
+            <View style={GlobalStyles.container}>
+                <Text style={GlobalStyles.header}>
+                    {currentTeam.display_name}
+                </Text>
+                <Text style={GlobalStyles.subheader}>
+                    {'Your channels:'}
+                </Text>
+                {_.map(channels, (channel) => (
+                    <Button
+                        key={channel.id}
+                        onPress={() => this.props.actions.selectChannel(channel)}
+                        style={GlobalStyles.buttonListItemText}
+                        containerStyle={GlobalStyles.buttonListItem}
+                    >
+                        {channel.display_name}
+                    </Button>
+                ))}
 
                 <ErrorText error={this.props.channels.error}/>
             </View>
diff --git a/src/components/login_view.js b/src/components/login_view.js
index dba8b56e2..826e64365 100644
--- a/src/components/login_view.js
+++ b/src/components/login_view.js
@@ -2,7 +2,7 @@
 // See License.txt for license information.
 
 import React, {Component, PropTypes} from 'react';
-import {Image, StyleSheet, Text, TextInput, View} from 'react-native';
+import {View, Text, TextInput, Image} from 'react-native';
 import {Actions as Routes} from 'react-native-router-flux';
 
 import Button from 'components/button';
@@ -10,19 +10,6 @@ import ErrorText from 'components/error_text';
 import {GlobalStyles} from 'styles';
 import logo from 'images/logo.png';
 
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        flexDirection: 'column',
-        alignItems: 'center',
-        paddingTop: 200,
-        backgroundColor: 'white'
-    },
-    logo: {
-        marginBottom: 10
-    }
-});
-
 const propTypes = {
     login: PropTypes.object.isRequired,
     actions: PropTypes.object.isRequired
@@ -51,13 +38,13 @@ export default class LoginView extends Component {
 
     render() {
         return (
-            <View style={styles.container}>
+            <View style={GlobalStyles.container}>
                 <Image
-                    style={styles.logo}
+                    style={GlobalStyles.logo}
                     source={logo}
                 />
-                <Text>{'Mattermost'}</Text>
-                <Text>
+                <Text style={GlobalStyles.header}>{'Mattermost'}</Text>
+                <Text style={GlobalStyles.subheader}>
                     {'All team communication in one place, searchable and accessible anywhere'}
                 </Text>
                 <TextInput
@@ -67,6 +54,7 @@ export default class LoginView extends Component {
                     placeholder='Email or Username'
                     autoCorrect={false}
                     autoCapitalize='none'
+                    underlineColorAndroid='transparent'
                 />
                 <TextInput
                     value={this.state.password}
@@ -75,6 +63,7 @@ export default class LoginView extends Component {
                     placeholder='Password'
                     autoCorrect={false}
                     autoCapitalize='none'
+                    underlineColorAndroid='transparent'
                 />
                 <Button
                     onPress={() => this.signIn()}
diff --git a/src/components/select_server_view.js b/src/components/select_server_view.js
index eae9f31a0..b1890877e 100644
--- a/src/components/select_server_view.js
+++ b/src/components/select_server_view.js
@@ -2,32 +2,17 @@
 // See License.txt for license information.
 
 import React, {Component} from 'react';
+import {View, Text, TextInput, Image} from 'react-native';
+import KeyboardSpacer from 'react-native-keyboard-spacer';
+import {Actions as Routes} from 'react-native-router-flux';
+import _ from 'lodash';
 
 import Client from 'client/client_instance.js';
 import Config from 'config/config.js';
-
-import Button from './button';
-import {Image, StyleSheet, Text, TextInput, View} from 'react-native';
-import KeyboardSpacer from 'react-native-keyboard-spacer';
-import {Actions as Routes} from 'react-native-router-flux';
-
+import Button from 'components/button';
+import ErrorText from 'components/error_text';
 import {GlobalStyles} from 'styles';
 import logo from 'images/logo.png';
-import ErrorText from './error_text';
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        flexDirection: 'column',
-        alignItems: 'center',
-        paddingTop: 200,
-        backgroundColor: 'white'
-    },
-
-    logo: {
-        marginBottom: 10
-    }
-});
 
 class SelectServerView extends Component {
     static propTypes = {
@@ -59,22 +44,25 @@ class SelectServerView extends Component {
 
     render() {
         return (
-            <View style={styles.container}>
+            <View style={GlobalStyles.container}>
                 <Image
-                    style={styles.logo}
+                    style={GlobalStyles.logo}
                     source={logo}
                 />
-                <Text style={GlobalStyles.label}>{'Enter Server URL'}</Text>
+                <Text style={_.at(GlobalStyles, ['header', 'label'])}>
+                    {'Enter Server URL'}
+                </Text>
                 <TextInput
-                    style={GlobalStyles.inputBox}
+                    value={this.state.serverUrl}
                     onChangeText={(serverUrl) => this.setState({serverUrl})}
                     onSubmitEditing={this.onClick}
+                    style={GlobalStyles.inputBox}
                     autoCapitalize='none'
                     autoCorrect={false}
                     keyboardType='url'
                     placeholder='https://mattermost.example.com'
                     returnKeyType='go'
-                    value={this.state.serverUrl}
+                    underlineColorAndroid='transparent'
                 />
                 <Button
                     text='Proceed'
diff --git a/src/components/select_team_view.js b/src/components/select_team_view.js
index 07ae0e28f..2d5ab618b 100644
--- a/src/components/select_team_view.js
+++ b/src/components/select_team_view.js
@@ -3,26 +3,15 @@
 
 import React, {Component, PropTypes} from 'react';
 
-import {Image, StyleSheet, Picker, View} from 'react-native';
+import {View, Text, Image} from 'react-native';
 import {Actions as Routes} from 'react-native-router-flux';
+import Button from 'react-native-button';
 import _ from 'lodash';
 
 import ErrorText from 'components/error_text';
+import {GlobalStyles} from 'styles';
 import logo from 'images/logo.png';
 
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        flexDirection: 'column',
-        alignItems: 'center',
-        paddingTop: 200,
-        backgroundColor: 'white'
-    },
-    logo: {
-        marginBottom: 10
-    }
-});
-
 const propTypes = {
     teams: PropTypes.object.isRequired,
     actions: PropTypes.object.isRequired
@@ -36,33 +25,40 @@ export default class SelectTeamView extends Component {
     }
 
     componentWillReceiveProps(props) {
-        if (props.teams.currentTeamId && !this.props.teams.currentTeamId) {
+        const {currentTeamId} = props.teams;
+        if (currentTeamId &&
+          currentTeamId !== this.props.teams.currentTeamId) {
             Routes.goToChannelsList();
         }
     }
 
     render() {
+        const teams = _.values(this.props.teams.data);
         return (
-            <View style={styles.container}>
+            <View style={GlobalStyles.container}>
                 <Image
-                    style={styles.logo}
+                    style={GlobalStyles.logo}
                     source={logo}
                 />
-                <Picker
-                    style={{width: 300}}
-                    onValueChange={(team) => {
-                        this.props.actions.selectTeam(team);
-                    }}
-                >
-                    {_.map(this.props.teams.data, (team) => (
-                        <Picker.Item
-                            key={team.id}
-                            label={team.display_name}
-                            value={team}
-                        />
-                    ))}
-                </Picker>
-
+                <Text style={GlobalStyles.header}>
+                    {'Mattermost'}
+                </Text>
+                <Text style={GlobalStyles.subheader}>
+                    {'All team communication in one place, searchable and accessible anywhere'}
+                </Text>
+                <Text style={GlobalStyles.subheader}>
+                    {'Your teams:'}
+                </Text>
+                {_.map(teams, (team) => (
+                    <Button
+                        key={team.id}
+                        onPress={() => this.props.actions.selectTeam(team)}
+                        style={GlobalStyles.buttonListItemText}
+                        containerStyle={GlobalStyles.buttonListItem}
+                    >
+                        {team.display_name}
+                    </Button>
+                ))}
                 <ErrorText error={this.props.teams.error}/>
             </View>
         );
diff --git a/src/containers/channels_list_container.js b/src/containers/channels_list_container.js
index 6ec7140cf..be9b288cc 100644
--- a/src/containers/channels_list_container.js
+++ b/src/containers/channels_list_container.js
@@ -8,6 +8,7 @@ import ChannelsListView from 'components/channels_list_view';
 
 function mapStateToProps(state) {
     return {
+        teams: state.entities.teams,
         channels: state.entities.channels
     };
 }
diff --git a/src/styles/index.js b/src/styles/index.js
index bc9ef09a4..08c601206 100644
--- a/src/styles/index.js
+++ b/src/styles/index.js
@@ -7,6 +7,42 @@
 import {StyleSheet} from 'react-native';
 
 export const GlobalStyles = StyleSheet.create({
+    container: {
+        flex: 1,
+        flexDirection: 'column',
+        alignItems: 'center',
+        paddingTop: 200,
+        backgroundColor: 'white'
+    },
+    logo: {
+        marginBottom: 10
+    },
+    header: {
+        fontSize: 36,
+        fontWeight: '600'
+    },
+    subheader: {
+        fontSize: 18,
+        fontWeight: '300',
+        color: '#777'
+    },
+    buttonListItemText: {
+        textAlign: 'left',
+        fontSize: 18,
+        fontWeight: '400',
+        color: '#777'
+    },
+    buttonListItem: {
+        alignSelf: 'stretch',
+        height: 50,
+        marginHorizontal: 15,
+        marginVertical: 5,
+        padding: 13,
+        backgroundColor: '#fafafa',
+        borderWidth: 1,
+        borderRadius: 3,
+        borderColor: '#d5d5d5'
+    },
     button: {
         margin: 3,
         paddingTop: 10,
@@ -47,4 +83,4 @@ export const GlobalStyles = StyleSheet.create({
         alignSelf: 'stretch',
         borderRadius: 3
     }
-});
\ No newline at end of file
+});