diff --git a/new-gui/.expo/packager-info.json b/new-gui/.expo/packager-info.json
index 4f4e744..c04af40 100755
--- a/new-gui/.expo/packager-info.json
+++ b/new-gui/.expo/packager-info.json
@@ -1,9 +1,10 @@
 {
-  "expoServerPort": 19000,
-  "expoServerNgrokUrl": "https://mg-3p3.anonymous.new-gui.exp.direct",
-  "packagerNgrokUrl": "https://packager.mg-3p3.anonymous.new-gui.exp.direct",
-  "ngrokPid": 16404,
+  "expoServerPort": null,
+  "expoServerNgrokUrl": null,
+  "packagerNgrokUrl": null,
+  "ngrokPid": null,
   "devToolsPort": 19002,
-  "packagerPort": 19001,
-  "packagerPid": 8216
+  "packagerPort": null,
+  "packagerPid": null,
+  "webpackServerPort": null
 }
\ No newline at end of file
diff --git a/new-gui/.expo/settings.json b/new-gui/.expo/settings.json
index 0564125..fcc6472 100755
--- a/new-gui/.expo/settings.json
+++ b/new-gui/.expo/settings.json
@@ -1,7 +1,7 @@
 {
   "hostType": "lan",
   "lanType": "ip",
-  "dev": false,
-  "minify": true,
+  "dev": true,
+  "minify": false,
   "urlRandomness": "mg-3p3"
 }
\ No newline at end of file
diff --git a/new-gui/src/commons/serverRequest/index.js b/new-gui/src/commons/serverRequest/index.js
index 19314ef..f87af1d 100755
--- a/new-gui/src/commons/serverRequest/index.js
+++ b/new-gui/src/commons/serverRequest/index.js
@@ -1,3 +1,3 @@
-//const HOST = "52.39.77.219";
-const HOST = "192.168.1.8";
+const HOST = "52.39.77.219";
+//const HOST = "192.168.1.8";
 export const SERVER_URL = "http://" + HOST + ":8080";
\ No newline at end of file
diff --git a/new-gui/src/components/UserInformationPanel/index.js b/new-gui/src/components/UserInformationPanel/index.js
index 607fc15..53f0be0 100755
--- a/new-gui/src/components/UserInformationPanel/index.js
+++ b/new-gui/src/components/UserInformationPanel/index.js
@@ -1,7 +1,7 @@
 import { mapDispatchToProps, mapStateToProps } from "../../commons/redux";
 import React, { Component } from "react";
 import { KeyboardAvoidingView,Platform,StatusBar,View,SafeAreaView, Text,Alert,
-     SectionList, StyleSheet, TouchableOpacity,Image,TextInput,Dimensions,ImageBackground } from "react-native";
+     SectionList, StyleSheet, TouchableOpacity,Image,TextInput,Dimensions,ImageBackground,Keyboard,Animated } from "react-native";
 import { connect } from "react-redux";
 import { withNavigation } from "react-navigation";
 import { Ionicons } from '@expo/vector-icons';
@@ -13,14 +13,42 @@ import { CheckBox,Input, Button } from "react-native-elements";
 const FETCH_URL  = SERVER_URL + "/user/fetch-user";
 const UPDATE_URL = SERVER_URL + "/user/update-user";
 
-const scaleAvatar=0.3
+const scaleAvatar=0.15
 
 class EditableLabel extends Component{
 
+    constructor(props){
+        super(props);
+        this.keyboardHeight = new Animated.Value(0);
+    }
+
+
     componentWillMount(){
         this.setState({editable:false,myText:this.props.value});
+        this.keyboardDidShowSub = Keyboard.addListener('keyboardDidShow', this.keyboardDidShow);
+        this.keyboardDidHideSub = Keyboard.addListener('keyboardDidHide', this.keyboardDidHide);
     }
 
+    componentWillUnmount() {
+        this.keyboardDidShowSub.remove();
+        this.keyboardDidHideSub.remove();
+    }
+
+    keyboardDidShow = (event) => {
+        Animated.timing(this.keyboardHeight, {
+          duration: 0.1,
+          toValue: event.endCoordinates.height,
+        }).start();
+    };
+  
+    keyboardDidHide = (event) => {
+        Animated.timing(this.keyboardHeight, {
+          duration: 0.1,
+          toValue: 0,
+        }).start();
+    };
+
+
     renderInput()
     {
         if(this.props.type === "number" || this.props.type === "string")
@@ -252,7 +280,6 @@ class UserInformationComponent extends Component {
                 <Image style={styles.avatarImage}  source={require('../../images/person.png')}></Image>
                 </Svg>
                 <Text style={styles.userName}>{this.state.userInfo.username}</Text>
-                <KeyboardAvoidingView style={{flex:1}} behavior = 'position' enabled>
                 <SectionList
                     stickySectionHeadersEnabled={true}
                     renderItem={({item, index, section}) => {
@@ -295,7 +322,6 @@ class UserInformationComponent extends Component {
                     ]}
                     keyExtractor={(item, index) => item + index}
                 />
-                </KeyboardAvoidingView>
             </View>
         );
         else
diff --git a/new-gui/src/components/UserLoginPanel/index.js b/new-gui/src/components/UserLoginPanel/index.js
index 51813a3..bf32c11 100755
--- a/new-gui/src/components/UserLoginPanel/index.js
+++ b/new-gui/src/components/UserLoginPanel/index.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import {
   StyleSheet, Text, View, TextInput, TouchableOpacity, 
   Alert, TouchableWithoutFeedback, Keyboard, AsyncStorage,
-  KeyboardAvoidingView
+  KeyboardAvoidingView,Animated
 } from 'react-native';
 
 import { Input } from "react-native-elements";
@@ -24,6 +24,37 @@ class UserLoginPanel extends Component {
         header: null
     }
 
+    constructor(props){
+        super(props);
+        this.keyboardHeight = new Animated.Value(0);
+    }
+
+    componentWillMount () {
+        this.keyboardDidShowSub = Keyboard.addListener('keyboardDidShow', this.keyboardDidShow);
+        this.keyboardDidHideSub = Keyboard.addListener('keyboardDidHide', this.keyboardDidHide);
+    }
+    
+    componentWillUnmount() {
+        this.keyboardDidShowSub.remove();
+        this.keyboardDidHideSub.remove();
+    }
+
+    keyboardDidShow = (event) => {
+          Animated.timing(this.keyboardHeight, {
+            duration: 0.1,
+            toValue: event.endCoordinates.height,
+          }).start();
+      };
+    
+      keyboardDidHide = (event) => {
+          Animated.timing(this.keyboardHeight, {
+            duration: 0.1,
+            toValue: 0,
+          }).start();
+      };
+
+
+
     // save user data in frontend storage
     _storeTokenData = async(token) => {
         try {
@@ -74,8 +105,7 @@ class UserLoginPanel extends Component {
 	render(){
 		return(
             <TouchableWithoutFeedback onPress={()=> Keyboard.dismiss()}>
-                <View style={styles.container}>
-                <KeyboardAvoidingView style={{flex:1}} behavior="padding" enabled>
+                <Animated.View style={[styles.container,{paddingBottom: this.keyboardHeight}]}>
                     <Logo/>
                     <View style={styles.formContainer}>
                         <Input
@@ -109,8 +139,7 @@ class UserLoginPanel extends Component {
                             <Text style={styles.signupButton}>Signup</Text>
                         </TouchableOpacity>
                     </View>
-                    </KeyboardAvoidingView>
-                </View>       
+                    </Animated.View> 
             </TouchableWithoutFeedback>
 		);
 	}
diff --git a/new-gui/src/components/UserSignupPanel/index.js b/new-gui/src/components/UserSignupPanel/index.js
index a8573d3..604e7ca 100755
--- a/new-gui/src/components/UserSignupPanel/index.js
+++ b/new-gui/src/components/UserSignupPanel/index.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { View, StyleSheet, ScrollView, Picker, Alert, AsyncStorage,KeyboardAvoidingView } from "react-native";
+import { Keyboard,View, StyleSheet, ScrollView, Picker, Alert, AsyncStorage, Animated } from "react-native";
 
 import { Button, CheckBox, Input, Text } from "react-native-elements";
 
@@ -9,6 +9,37 @@ const SIGNUP_URL = SERVER_URL + "/sign-up";
 
 class UserSignupPanel extends Component {
 
+    constructor(props){
+        super(props);
+        this.keyboardHeight = new Animated.Value(0);
+    }
+
+    componentWillMount () {
+        this.keyboardDidShowSub = Keyboard.addListener('keyboardDidShow', this.keyboardDidShow);
+        this.keyboardDidHideSub = Keyboard.addListener('keyboardDidHide', this.keyboardDidHide);
+    }
+    
+    componentWillUnmount() {
+        this.keyboardDidShowSub.remove();
+        this.keyboardDidHideSub.remove();
+    }
+
+    keyboardDidShow = (event) => {
+        Animated.timing(this.keyboardHeight, {
+          duration: 0.1,
+          toValue: event.endCoordinates.height,
+        }).start();
+    };
+  
+    keyboardDidHide = (event) => {
+        Animated.timing(this.keyboardHeight, {
+          duration: 0.1,
+          toValue: 0,
+        }).start();
+    };
+
+
+
     state = {
         username : "",
         usernameError : "",
@@ -137,7 +168,7 @@ class UserSignupPanel extends Component {
 
     render() {
         return (
-            <KeyboardAvoidingView style={{flex:1}} behavior="position">
+            <Animated.View style={{paddingBottom: this.keyboardHeight}}>
             <ScrollView style={styles.scrollViewContainer}>
                 <View style={styles.sectionView}>
                     <Text h4
@@ -318,7 +349,7 @@ class UserSignupPanel extends Component {
                     onPress={() => this.onSubmitSignUpForm()}
                 ></Button>
             </ScrollView>
-            </KeyboardAvoidingView>
+            </Animated.View>
         );
     }
 }
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..329bf1d
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,49 @@
+{
+  "requires": true,
+  "lockfileVersion": 1,
+  "dependencies": {
+    "js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+    },
+    "prop-types": {
+      "version": "15.7.2",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+      "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.8.1"
+      }
+    },
+    "react-is": {
+      "version": "16.8.4",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.4.tgz",
+      "integrity": "sha512-PVadd+WaUDOAciICm/J1waJaSvgq+4rHE/K70j0PFqKhkTBsPv/82UGQJNXAngz1fOQLLxI6z1sEDmJDQhCTAA=="
+    },
+    "react-native-iphone-x-helper": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.2.0.tgz",
+      "integrity": "sha512-xIeTo4s77wwKgBZLVRIZC9tM9/PkXS46Ul76NXmvmixEb3ZwqGdQesR3zRiLMOoIdfOURB6N9bba9po7+x9Bag=="
+    },
+    "react-native-keyboard-aware-scrollview": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/react-native-keyboard-aware-scrollview/-/react-native-keyboard-aware-scrollview-2.0.0.tgz",
+      "integrity": "sha512-VAkwrmNl00bjTLXcvB3EMxuJ06kEBVRfpUq61X0Wl6Gdy1iSQpv04dVbZZ3KIflA9VhAlE0HFPltLLXIGjf2Ug=="
+    }
+  }
+}