diff --git a/package.json b/package.json
index 438c31a..578e892 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "expo-status-bar": "~1.0.2",
     "expo-updates": "~0.3.2",
     "moment": "^2.29.1",
+    "prop-types": "^15.7.2",
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-native": "~0.63.3",
diff --git a/src/components/GroupsList/GroupsList.js b/src/components/GroupsList/GroupsList.js
index 202ef82..fd54e70 100644
--- a/src/components/GroupsList/GroupsList.js
+++ b/src/components/GroupsList/GroupsList.js
@@ -47,10 +47,13 @@ const data = [
 ];
 
 export default class GroupsList extends Component {
-    renderItem = ({ item }) => {
-        return <GroupsItem item={item} />;
+
+
+    renderItem = ({ item}) => {
+        return <GroupsItem item={item}/>;
     };
 
+
     render() {
         return (
             <FlatList
diff --git a/src/components/react-native-messenger/InputModule/InputModule.js b/src/components/react-native-messenger/InputModule/InputModule.js
index dba0dea..ad623b4 100644
--- a/src/components/react-native-messenger/InputModule/InputModule.js
+++ b/src/components/react-native-messenger/InputModule/InputModule.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { View, TextInput, Keyboard, Platform } from 'react-native';
 import { TouchableRipple } from 'react-native-paper';
 import Icon from 'react-native-vector-icons/MaterialIcons';
-import AppStyles from 'src/config/styles';
+import AppStyles from '../../../config/styles';
 import styles from './styles';
 
 export default class InputModule extends Component {
diff --git a/src/components/react-native-messenger/InputModule/styles.js b/src/components/react-native-messenger/InputModule/styles.js
index cd008d1..b4eb389 100644
--- a/src/components/react-native-messenger/InputModule/styles.js
+++ b/src/components/react-native-messenger/InputModule/styles.js
@@ -1,7 +1,7 @@
 import { StyleSheet } from 'react-native';
-import Metrics from 'src/config/metrics';
-import AppStyles from 'src/config/styles';
-import { isIphoneX } from 'src/lib/isIphoneX';
+import Metrics from '../../../config/metrics';
+import AppStyles from '../../../config/styles';
+import { isIphoneX } from '../../../lib/isIphoneX';
 
 const styles = StyleSheet.create({
     container: {
diff --git a/src/components/react-native-messenger/KeyboardSpacer/KeyboardSpacer.js b/src/components/react-native-messenger/KeyboardSpacer/KeyboardSpacer.js
new file mode 100755
index 0000000..ac62056
--- /dev/null
+++ b/src/components/react-native-messenger/KeyboardSpacer/KeyboardSpacer.js
@@ -0,0 +1,67 @@
+/* Used to manage keyboard spacing
+ * NOTE: takes variance as optional prop to vary keyboard height if wanted.
+ * View expands based on keyboard height.
+ */
+import React, { Component } from 'react';
+import { Keyboard, Animated } from 'react-native';
+import PropTypes from 'prop-types';
+import styles from './styles';
+
+export default class KeyboardSpacer extends Component {
+    constructor(props, context) {
+        super(props, context);
+        this.state = {
+            keyboardHeight: 0
+        };
+        this.imageHeight = new Animated.Value(0);
+    }
+
+    componentDidMount() {
+        this.keyboardDidShowListener = Keyboard.addListener(
+            'keyboardWillShow',
+            this.keyboardWillShow
+        );
+        this.keyboardDidHideListener = Keyboard.addListener(
+            'keyboardWillHide',
+            this.keyboardWillHide
+        );
+    }
+
+    componentWillUnmount() {
+        this.keyboardDidShowListener.remove();
+        this.keyboardDidHideListener.remove();
+    }
+
+    keyboardWillShow = e => {
+        Animated.timing(this.imageHeight, {
+            duration: 240,
+            toValue: e.endCoordinates.height
+        }).start();
+    };
+
+    keyboardWillHide = () => {
+        Animated.timing(this.imageHeight, {
+            duration: 240,
+            toValue: 0
+        }).start();
+    };
+
+    render() {
+        return (
+            <Animated.View
+                style={[
+                    styles.wrapper,
+                    { width: this.imageHeight, height: this.imageHeight }
+                ]}
+            />
+        );
+    }
+}
+
+KeyboardSpacer.propTypes = {
+    variance: PropTypes.number
+};
+
+KeyboardSpacer.defaultProps = {
+    variance: 0
+};
diff --git a/src/components/react-native-messenger/KeyboardSpacer/index.js b/src/components/react-native-messenger/KeyboardSpacer/index.js
new file mode 100755
index 0000000..da9ded2
--- /dev/null
+++ b/src/components/react-native-messenger/KeyboardSpacer/index.js
@@ -0,0 +1,2 @@
+import KeyboardSpacer from './KeyboardSpacer';
+export default KeyboardSpacer;
diff --git a/src/components/react-native-messenger/KeyboardSpacer/styles.js b/src/components/react-native-messenger/KeyboardSpacer/styles.js
new file mode 100755
index 0000000..4436f03
--- /dev/null
+++ b/src/components/react-native-messenger/KeyboardSpacer/styles.js
@@ -0,0 +1,7 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+    wrapper: {}
+});
+
+export default styles;
diff --git a/src/components/react-native-messenger/Toolbar/Toolbar.js b/src/components/react-native-messenger/Toolbar/Toolbar.js
index da9b8f3..efa2cbd 100644
--- a/src/components/react-native-messenger/Toolbar/Toolbar.js
+++ b/src/components/react-native-messenger/Toolbar/Toolbar.js
@@ -45,9 +45,9 @@ class Toolbar extends Component {
                     subtitle={'Active 32 minutes ago'}
                 />
 
-                <Appbar.Action icon="call" onPress={() => {}} />
+                {/* <Appbar.Action icon="call" onPress={() => {}} />
                 <Appbar.Action icon="videocam" onPress={() => {}} />
-                <Appbar.Action icon="error-outline" onPress={() => {}} />
+                <Appbar.Action icon="error-outline" onPress={() => {}} /> */}
             </Appbar.Header>
         );
     }
diff --git a/src/components/react-native-messenger/index.js b/src/components/react-native-messenger/index.js
index e249b03..1832539 100644
--- a/src/components/react-native-messenger/index.js
+++ b/src/components/react-native-messenger/index.js
@@ -5,9 +5,9 @@ import {
     TouchableWithoutFeedback,
     Keyboard
 } from 'react-native';
-import Toolbar from './Toolbar';
+// import Toolbar from './Toolbar';
 import InputModule from './InputModule';
-import KeyboardSpacer from '../KeyboardSpacer';
+import KeyboardSpacer from './KeyboardSpacer';
 
 export default class Messenger extends Component {
     onBackPress = () => {
@@ -21,7 +21,7 @@ export default class Messenger extends Component {
     render() {
         return (
             <View style={{ flex: 1 }}>
-                <Toolbar onBackPress={this.onBackPress} />
+                {/* <Toolbar onBackPress={this.onBackPress} /> */}
                 <TouchableWithoutFeedback onPress={this.dismissKeyboard}>
                     <View style={{ flex: 1 }} />
                 </TouchableWithoutFeedback>
diff --git a/src/lib/createReducer.js b/src/lib/createReducer.js
new file mode 100644
index 0000000..28f5110
--- /dev/null
+++ b/src/lib/createReducer.js
@@ -0,0 +1,13 @@
+/*
+ * Will dynamically create reducers
+ * enforcing a unique way to describe reducers
+ */
+export default function createReducer(initialState, handlers) {
+    return function reducer(state = initialState, action) {
+        if (handlers.hasOwnProperty(action.type)) {
+            return handlers[action.type](state, action);
+        } else {
+            return state;
+        }
+    };
+}
diff --git a/src/lib/isIphoneX.js b/src/lib/isIphoneX.js
new file mode 100644
index 0000000..fa95679
--- /dev/null
+++ b/src/lib/isIphoneX.js
@@ -0,0 +1,19 @@
+import { Dimensions, Platform } from 'react-native';
+
+export function isIphoneX() {
+    let dimen = Dimensions.get('window');
+    return (
+        Platform.OS === 'ios' &&
+        !Platform.isPad &&
+        !Platform.isTVOS &&
+        (dimen.height === 812 || dimen.width === 812)
+    );
+}
+
+export function ifIphoneX(iphoneXStyle, regularStyle) {
+    if (isIphoneX()) {
+        return iphoneXStyle;
+    } else {
+        return regularStyle;
+    }
+}
diff --git a/src/screens/ChatScreen/ChatScreen.js b/src/screens/ChatScreen/ChatScreen.js
index 4ab8407..06ed4a2 100644
--- a/src/screens/ChatScreen/ChatScreen.js
+++ b/src/screens/ChatScreen/ChatScreen.js
@@ -1,11 +1,12 @@
 import React, { Component } from 'react';
 import { View } from 'react-native';
-import Messenger from 'src/components/react-native-messenger';
+import Messenger from '../../components/react-native-messenger';
 
 export default class ChatScreen extends Component {
     onBackPress = () => {
         this.props.navigation.goBack();
     };
+
     render() {
         return (
             <View style={{ flex: 1 }}>
diff --git a/src/screens/GroupScreen/GroupScreen.js b/src/screens/GroupScreen/GroupScreen.js
index 491aad1..c2e7f24 100644
--- a/src/screens/GroupScreen/GroupScreen.js
+++ b/src/screens/GroupScreen/GroupScreen.js
@@ -3,13 +3,21 @@ import { View } from 'react-native';
 
 import GroupsList from '../../components/GroupsList';
 import styles from './styles';
+import FormButton from '../../components/FormButton';
+
+export default function GroupScreen({ navigation }) {
+
+
 
-export default class GroupsScreen extends Component {
-    render() {
         return (
             <View style={styles.container}>
                 <GroupsList />
+                <FormButton
+                buttonTitle="Chat with Friends"
+                onPress={() => navigation.navigate('Chat')}
+                />
+
             </View>
         );
-    }
+
 }
\ No newline at end of file