diff --git a/app/components/AboutModal.js b/app/components/AboutModal.js
index e7edcbd..84eb2e3 100644
--- a/app/components/AboutModal.js
+++ b/app/components/AboutModal.js
@@ -1,27 +1,30 @@
 import React from 'react';
 import { Text } from 'react-native';
 import PropTypes from 'prop-types';
-import { Modal, Portal, Surface, Title } from 'react-native-paper';
+import { Dialog, Portal, Surface, Title } from 'react-native-paper';
+import KeyboardAwareDialog from './KeyBoardAwareDialog';
+
+const DialogType = Platform.OS === 'ios' ? KeyboardAwareDialog : Dialog;
 
 import styles from '../assets/styles/blink/_AboutModal.scss';
 
 const AboutModal = (props) => {
     return (
         <Portal>
-            <Modal visible={props.show} onDismiss={props.close}>
+            <DialogType visible={props.show} onDismiss={props.close}>
                 <Surface style={styles.container}>
-                    <Title style={styles.title}>About Sylk</Title>
+                    <Dialog.Title style={styles.title}>About Sylk</Dialog.Title>
                     <Text style={styles.body}>Sylk is the WebRTC client companion for SylkServer</Text>
                     <Text style={styles.body}>http://sylkserver.com</Text>
                 </Surface>
-            </Modal>
+            </DialogType>
         </Portal>
     );
 }
 
 AboutModal.propTypes = {
     show: PropTypes.bool.isRequired,
     close: PropTypes.func.isRequired
 };
 
 export default AboutModal;
diff --git a/app/components/CallMeMaybeModal.js b/app/components/CallMeMaybeModal.js
index 561dd6b..df80a90 100644
--- a/app/components/CallMeMaybeModal.js
+++ b/app/components/CallMeMaybeModal.js
@@ -1,85 +1,88 @@
 import React, { Component } from 'react';
 import { View } from 'react-native';
 import PropTypes from 'prop-types';
-import { Modal, Title, Surface, Portal, IconButton, Text } from 'react-native-paper';
+import { Dialog, Title, Surface, Portal, IconButton, Text } from 'react-native-paper';
 import autoBind from 'auto-bind';
 import { openComposer } from 'react-native-email-link';
+import KeyboardAwareDialog from './KeyBoardAwareDialog';
+
+const DialogType = Platform.OS === 'ios' ? KeyboardAwareDialog : Dialog;
 
 import utils from '../utils';
 import styles from '../assets/styles/blink/_CallMeMaybeModal.scss';
 
 class CallMeMaybeModal extends Component {
     constructor(props) {
         super(props);
         autoBind(this);
     }
 
     handleClipboardButton(event) {
         utils.copyToClipboard(this.props.callUrl);
         this.props.notificationCenter().postSystemNotification('Call me', {body: 'Web address copied to the clipboard'});
         this.props.close();
     }
 
     handleEmailButton(event) {
 
         const sipUri = this.props.callUrl.split('/').slice(-1)[0];    // hack!
         const emailMessage = `You can call me using a Web browser at ${this.props.callUrl} or a SIP client at ${sipUri} ` +
                              'or by using the freely available Sylk WebRTC client app at http://sylkserver.com';
         const subject = 'Call me, maybe?';
 
         openComposer({
             subject,
             body: emailMessage
         })
 
         // Linking.canOpenURL(this.emailLink)
         //     .then((supported) => {
         //         if (!supported) {
         //         } else {
         //             return Linking.openURL(url);
         //         }
         //     })
         //     .catch((err) => {
         //         this.props.notificationCenter().postSystemNotification('Call me', {body: 'Unable to open email app'});
         //     });
 
         this.props.close();
     }
 
     render() {
 
         return (
             <Portal>
-                <Modal visible={this.props.show} onDismiss={this.props.close}>
+                <DialogType visible={this.props.show} onDismiss={this.props.close}>
                     <Surface style={styles.container}>
-                        <Title style={styles.title}>Call me, maybe?</Title>
+                        <Dialog.Title style={styles.title}>Call me, maybe?</Dialog.Title>
                         <Text style={styles.body}>
                             Share {this.props.callUrl} with others so they can easily call you.
                         </Text>
                         <View style={styles.iconContainer}>
                             <IconButton
                                 size={34}
                                 onPress={this.handleClipboardButton}
                                 icon="content-copy"
                             />
                             <IconButton
                                 size={34}
                                 onPress={this.handleEmailButton}
                                 icon="email"
                             />
                         </View>
                     </Surface>
-                </Modal>
+                </DialogType>
             </Portal>
         );
     }
 }
 
 CallMeMaybeModal.propTypes = {
     show               : PropTypes.bool.isRequired,
     close              : PropTypes.func.isRequired,
     callUrl            : PropTypes.string.isRequired,
     notificationCenter : PropTypes.func.isRequired
 };
 
 export default CallMeMaybeModal;
diff --git a/app/components/ConferenceModal.js b/app/components/ConferenceModal.js
index 418e749..3e52d0c 100644
--- a/app/components/ConferenceModal.js
+++ b/app/components/ConferenceModal.js
@@ -1,77 +1,80 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Portal, Modal, Title, Button, Text, TextInput, Surface } from 'react-native-paper';
+import { Portal, Dialog, Button, Text, TextInput, Surface } from 'react-native-paper';
+import KeyboardAwareDialog from './KeyBoardAwareDialog';
+
+const DialogType = Platform.OS === 'ios' ? KeyboardAwareDialog : Dialog;
 
 import config from '../config';
 import styles from '../assets/styles/blink/_ConferenceModal.scss';
 
 class ConferenceModal extends Component {
     constructor(props) {
         super(props);
         this.state = {
             conferenceTargetUri: props.targetUri.split('@')[0],
             managed: false
         };
         this.handleConferenceTargetChange = this.handleConferenceTargetChange.bind(this);
         this.onHide = this.onHide.bind(this);
         this.join = this.join.bind(this);
     }
 
     componentWillReceiveProps(nextProps) {
         this.setState({conferenceTargetUri: nextProps.targetUri.split('@')[0]});
     }
 
     handleConferenceTargetChange(value) {
         this.setState({conferenceTargetUri: value});
     }
 
     join(event) {
         event.preventDefault();
         const uri = `${this.state.conferenceTargetUri.replace(/[\s()-]/g, '')}@${config.defaultConferenceDomain}`;
         this.props.handleConferenceCall(uri.toLowerCase(), this.state.managed);
     }
 
     onHide() {
         this.props.handleConferenceCall(null);
     }
 
     render() {
         const validUri = this.state.conferenceTargetUri.length > 0 && this.state.conferenceTargetUri.indexOf('@') === -1;
 
         return (
             <Portal>
-                <Modal visible={this.props.show} onDismiss={this.onHide}>
+                <DialogType visible={this.props.show} onDismiss={this.onHide}>
                     <Surface style={styles.container}>
-                        <Title style={styles.title}>Join Conference</Title>
+                        <Dialog.Title style={styles.title}>Join Conference</Dialog.Title>
                         <Text style={styles.body}>Enter the room you wish to join</Text>
                         <TextInput
-                            mode="outlined"
+                            mode="flat"
                             autoCapitalize="none"
                             label="Conference Room"
                             placeholder="Conference Room"
                             onChangeText={this.handleConferenceTargetChange}
                             required
                             value={this.state.conferenceTargetUri}
                         />
                         <Button
                             mode="contained"
                             onPress={this.join}
                             disabled={!validUri}
                             icon="video"
                         >
                             Join
                         </Button>
                     </Surface>
-                </Modal>
+                </DialogType>
             </Portal>
         );
     }
 }
 
 ConferenceModal.propTypes = {
     show: PropTypes.bool.isRequired,
     handleConferenceCall: PropTypes.func.isRequired,
     targetUri: PropTypes.string.isRequired
 };
 
 export default ConferenceModal;
diff --git a/app/components/EnrollmentModal.js b/app/components/EnrollmentModal.js
index 4ead3ae..a0935d7 100644
--- a/app/components/EnrollmentModal.js
+++ b/app/components/EnrollmentModal.js
@@ -1,203 +1,203 @@
 import React, { Component } from 'react';
 import { View, KeyboardAvoidingView, Platform, ScrollView } from 'react-native';
 import PropTypes from 'prop-types';
 import superagent from 'superagent';
 import autoBind from 'auto-bind';
 import { Dialog, Portal, Button, TextInput, Title, Surface, HelperText, Snackbar } from 'react-native-paper';
 import KeyboardAwareDialog from './KeyBoardAwareDialog';
 
 const DialogType = Platform.OS === 'ios' ? KeyboardAwareDialog : Dialog;
 
 import styles from '../assets/styles/blink/_EnrollmentModal.scss';
 
 import config from '../config';
 
 class EnrollmentModal extends Component {
     constructor(props) {
         super(props);
         autoBind(this);
 
         // save the initial state so we can restore it later
         this.initialState = {
             yourName: '',
             username: '',
             password: '',
             password2: '',
             email: '',
             enrolling: false,
             error: '',
             errorVisible: false
         };
         this.state = Object.assign({}, this.initialState);
     }
 
     handleFormFieldChange(value, name) {
         this.setState({
             [name]: value
         });
     }
 
     enrollmentFormSubmitted(event) {
         event.preventDefault();
         // validate the password fields
         if (this.state.password !== this.state.password2) {
             this.setState({error: 'Password missmatch'});
             return;
         }
         this.setState({enrolling: true, error:''});
         superagent.post(config.enrollmentUrl)
                   .send(superagent.serialize['application/x-www-form-urlencoded']({username: this.state.username,
                                                                                    password: this.state.password,
                                                                                    email: this.state.email,
                                                                                    display_name: this.state.yourName}))   //eslint-disable-line camelcase
                   .end((error, res) => {
                       this.setState({enrolling: false});
                       if (error) {
                           this.setState({error: error.toString(), errorVisible: true});
                           return;
                       }
                       let data;
                       try {
                           data = JSON.parse(res.text);
                       } catch (e) {
                           this.setState({error: 'Could not decode response data', errorVisible: true});
                           return;
                       }
                       if (data.success) {
                           this.props.handleEnrollment({accountId: data.sip_address,
                                                        password: this.state.password});
                           this.setState(this.initialState);
                       } else if (data.error === 'user_exists') {
                           this.setState({error: 'User already exists', errorVisible: true});
                       } else {
                           this.setState({error: data.error_message, errorVisible: true});
                       }
                   });
     }
 
     onHide() {
         this.props.handleEnrollment(null);
         this.setState(this.initialState);
     }
 
     render() {
         let buttonText = 'Create';
         let buttonIcon = null;
         if (this.state.enrolling) {
             buttonIcon = "cog";
         }
 
         return (
             <Portal>
                 <DialogType visible={this.props.show} onDismiss={this.onHide}>
-                        <Surface style={styles.container}>
-                            <Dialog.Title style={styles.title}>Create account</Dialog.Title>
-                            <TextInput
-                                mode="flat"
-                                label="Display name"
-                                name="yourName"
-                                type="text"
-                                placeholder="Alice"
-                                onChangeText={(text) => {this.handleFormFieldChange(text, 'yourName');}}
-                                required
-                                value={this.state.yourName}
-                                disabled={this.state.enrolling}
-                                returnKeyType="next"
-                                onSubmitEditing={() => this.usernameInput.focus()}
-                            />
-                            <TextInput
-                                mode="flat"
-                                label="Username"
-                                name="username"
-                                autoCapitalize="none"
-                                placeholder="alice"
-                                onChangeText={(text) => {this.handleFormFieldChange(text, 'username');}}
-                                required
+                    <Surface style={styles.container}>
+                        <Dialog.Title style={styles.title}>Create account</Dialog.Title>
+                        <TextInput
+                            mode="flat"
+                            label="Display name"
+                            name="yourName"
+                            type="text"
+                            placeholder="Alice"
+                            onChangeText={(text) => {this.handleFormFieldChange(text, 'yourName');}}
+                            required
+                            value={this.state.yourName}
+                            disabled={this.state.enrolling}
+                            returnKeyType="next"
+                            onSubmitEditing={() => this.usernameInput.focus()}
+                        />
+                        <TextInput
+                            mode="flat"
+                            label="Username"
+                            name="username"
+                            autoCapitalize="none"
+                            placeholder="alice"
+                            onChangeText={(text) => {this.handleFormFieldChange(text, 'username');}}
+                            required
 
-                                value={this.state.username}
-                                disabled={this.state.enrolling}
-                                returnKeyType="next"
-                                ref={ref => {
-                                    this.usernameInput = ref;
-                                }}
-                                onSubmitEditing={() => this.passwordInput.focus()}
-                            />
-                            <HelperText
-                                type="info"
-                                visible={true}
-                            >
-                                @{config.enrollmentDomain}
-                            </HelperText>
-                            <TextInput
-                                mode="flat"
-                                label="Password"
-                                name="password"
-                                secureTextEntry={true}
-                                textContentType="password"
-                                onChangeText={(text) => {this.handleFormFieldChange(text, 'password');}}
-                                required value={this.state.password}
-                                disabled={this.state.enrolling}
-                                returnKeyType="next"
-                                ref={ref => {
-                                    this.passwordInput = ref;
-                                }}
-                                onSubmitEditing={() => this.password2Input.focus()}
-                            />
-                            <TextInput
-                                mode="flat"
-                                label="Verify password"
-                                secureTextEntry={true}
-                                textContentType="password"
-                                name="password2"
-                                onChangeText={(text) => {this.handleFormFieldChange(text, 'password2');}}
-                                required value={this.state.password2}
-                                disabled={this.state.enrolling}
-                                returnKeyType="next"
-                                ref={ref => {
-                                    this.password2Input = ref;
-                                }}
-                                onSubmitEditing={() => this.emailInput.focus()}
-                            />
-                            <TextInput
-                                mode="flat"
-                                label="E-Mail"
-                                textContentType="emailAddress"
-                                name="email"
-                                autoCapitalize="none"
-                                placeholder="alice@atlanta.example.com"
-                                onChangeText={(text) => {this.handleFormFieldChange(text, 'email');}}
-                                required value={this.state.email}
-                                disabled={this.state.enrolling}
-                                returnKeyType="go"
-                                ref={ref => {
-                                    this.emailInput = ref;
-                                }}
-                            />
+                            value={this.state.username}
+                            disabled={this.state.enrolling}
+                            returnKeyType="next"
+                            ref={ref => {
+                                this.usernameInput = ref;
+                            }}
+                            onSubmitEditing={() => this.passwordInput.focus()}
+                        />
+                        <HelperText
+                            type="info"
+                            visible={true}
+                        >
+                            @{config.enrollmentDomain}
+                        </HelperText>
+                        <TextInput
+                            mode="flat"
+                            label="Password"
+                            name="password"
+                            secureTextEntry={true}
+                            textContentType="password"
+                            onChangeText={(text) => {this.handleFormFieldChange(text, 'password');}}
+                            required value={this.state.password}
+                            disabled={this.state.enrolling}
+                            returnKeyType="next"
+                            ref={ref => {
+                                this.passwordInput = ref;
+                            }}
+                            onSubmitEditing={() => this.password2Input.focus()}
+                        />
+                        <TextInput
+                            mode="flat"
+                            label="Verify password"
+                            secureTextEntry={true}
+                            textContentType="password"
+                            name="password2"
+                            onChangeText={(text) => {this.handleFormFieldChange(text, 'password2');}}
+                            required value={this.state.password2}
+                            disabled={this.state.enrolling}
+                            returnKeyType="next"
+                            ref={ref => {
+                                this.password2Input = ref;
+                            }}
+                            onSubmitEditing={() => this.emailInput.focus()}
+                        />
+                        <TextInput
+                            mode="flat"
+                            label="E-Mail"
+                            textContentType="emailAddress"
+                            name="email"
+                            autoCapitalize="none"
+                            placeholder="alice@atlanta.example.com"
+                            onChangeText={(text) => {this.handleFormFieldChange(text, 'email');}}
+                            required value={this.state.email}
+                            disabled={this.state.enrolling}
+                            returnKeyType="go"
+                            ref={ref => {
+                                this.emailInput = ref;
+                            }}
+                        />
                         <Button
                             icon={buttonIcon}
                             loading={this.state.enrolling}
                             disabled={this.state.enrolling}
                             onPress={this.enrollmentFormSubmitted}
                         >
                             {buttonText}
                         </Button>
                         <Snackbar
                             visible={this.state.errorVisible}
                             duration={2000}
                             onDismiss={() => this.setState({ errorVisible: false })}
                         >
                             {this.state.error}
                         </Snackbar>
                     </Surface>
                 </DialogType>
             </Portal>
         );
     }
 }
 
 EnrollmentModal.propTypes = {
     handleEnrollment: PropTypes.func.isRequired,
     show: PropTypes.bool.isRequired
 };
 
 export default EnrollmentModal;
diff --git a/app/components/EscalateConferenceModal.js b/app/components/EscalateConferenceModal.js
index 853fb6c..55a2753 100644
--- a/app/components/EscalateConferenceModal.js
+++ b/app/components/EscalateConferenceModal.js
@@ -1,73 +1,76 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { View } from 'react-native';
 import autoBind from 'auto-bind';
-import { Title, Portal, Modal, Paragraph, TextInput, Surface, Button } from 'react-native-paper';
+import { Portal, Dialog, Paragraph, TextInput, Surface, Button } from 'react-native-paper';
+import KeyboardAwareDialog from './KeyBoardAwareDialog';
+
+const DialogType = Platform.OS === 'ios' ? KeyboardAwareDialog : Dialog;
 
 import styles from '../assets/styles/blink/_EscalateConferenceModal.scss';
 
 import config from '../config';
 
 class EscalateConferenceModal extends React.Component {
     constructor(props) {
         super(props);
         autoBind(this);
         this.state = {
             users: null
         }
     }
 
     escalate(event) {
         event.preventDefault();
         const uris = [];
         if (this.state.users) {
             for (let item of this.state.users.split(',')) {
                 item = item.trim();
                 if (item.indexOf('@') === -1) {
                     item = `${item}@${config.defaultDomain}`;
                 }
                 uris.push(item);
             };
         }
         uris.push(this.props.call.remoteIdentity.uri);
         this.props.escalateToConference(uris);
     }
 
     onInputChange(value) {
         this.setState({users: value});
     }
 
     render() {
         return (
             <Portal>
-                <Modal visible={this.props.show} onDismiss={this.props.close}>
+                <DialogType visible={this.props.show} onDismiss={this.props.close}>
                     <Surface style={styles.container}>
-                        <Title>Move to conference</Title>
+                        <Dialog.Title>Move to conference</Dialog.Title>
                         <Paragraph>Please enter the account(s) you wish to add to this call. After pressing Move, all parties will be invited to join a conference.</Paragraph>
                         <View>
                             <TextInput
                                 mode="flat"
                                 label="Users"
                                 id="inputTarget"
                                 onChangeText={this.onInputChange}
                                 placeholder="alice@sip2sip.info,bob,carol"
                                 required
                                 autoCapitalize="none"
                             />
                             <Button style={styles.button} onPress={this.escalate} icon="send">Move</Button>
                         </View>
                     </Surface>
-                </Modal>
+                </DialogType>
             </Portal>
         );
     }
 }
 
 EscalateConferenceModal.propTypes = {
     show: PropTypes.bool.isRequired,
     close: PropTypes.func.isRequired,
     call: PropTypes.object,
     escalateToConference: PropTypes.func
 };
 
 export default EscalateConferenceModal;
diff --git a/app/components/InviteParticipantsModal.js b/app/components/InviteParticipantsModal.js
index c27ac24..9620006 100644
--- a/app/components/InviteParticipantsModal.js
+++ b/app/components/InviteParticipantsModal.js
@@ -1,72 +1,75 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import autoBind from 'auto-bind';
-import { Modal, Portal, Text, Button, Surface, TextInput, Title } from 'react-native-paper';
+import { Dialog, Portal, Text, Button, Surface, TextInput } from 'react-native-paper';
+import KeyboardAwareDialog from './KeyBoardAwareDialog';
+
+const DialogType = Platform.OS === 'ios' ? KeyboardAwareDialog : Dialog;
 
 import config from '../config';
 import styles from '../assets/styles/blink/_InviteParticipantsModal.scss';
 
 class InviteParticipantsModal extends Component {
     constructor(props) {
         super(props);
         autoBind(this);
         this.state = {
             users: null
         }
     }
 
     invite(event) {
         event.preventDefault();
         const uris = [];
         if (this.state.users) {
             this.state.users.split(',').forEach((item) => {
                 item = item.trim();
                 if (item.indexOf('@') === -1) {
                     item = `${item}@${config.defaultDomain}`;
                 }
                 uris.push(item);
             });
         }
         if (uris && this.props.call) {
             this.props.call.inviteParticipants(uris);
         }
         this.props.close();
     }
 
     onInputChange(value) {
         this.setState({users: value});
     }
 
     render() {
         return (
             <Portal>
-                <Modal visible={this.props.show} onDismiss={this.props.close}>
+                <DialogType visible={this.props.show} onDismiss={this.props.close}>
                     <Surface style={styles.container}>
-                        <Title id="cmodal-title-sm">Invite Online Users</Title>
+                        <Dialog.Title>Invite Online Users</Dialog.Title>
 
-                        <Text className="lead">Enter the users you wish to invite</Text>
+                        <Text>Enter the users you wish to invite</Text>
                         <TextInput
                             mode="flat"
                             name="users"
                             label="Users"
                             onChangeText={this.onInputChange}
                             value={this.state.users}
                             placeholder="alice@sip2sip.info,bob,carol"
                             required
                             autoCapitalize="none"
                         />
-                        <Button onPress={this.invite} icon="email">Invite</Button>
+                        <Button mode="contained" onPress={this.invite} icon="email">Invite</Button>
                     </Surface>
-                </Modal>
+                </DialogType>
             </Portal>
         );
     }
 }
 
 InviteParticipantsModal.propTypes = {
     show: PropTypes.bool.isRequired,
     close: PropTypes.func.isRequired,
     call: PropTypes.object
 };
 
 export default InviteParticipantsModal;