diff --git a/app/components/elements.js b/app/components/elements.js
index 61701f12..bdd31f49 100644
--- a/app/components/elements.js
+++ b/app/components/elements.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import {useEffect, useState, useRef} from 'react';
-import { Platform, View, Text, Image, TouchableOpacity, ScrollView, StyleSheet, TextInput, Modal, TouchableWithoutFeedback, ActivityIndicator, Alert, KeyboardAvoidingView } from 'react-native'
-import { Card, ListItem, Button, Icon, Divider, Input, Overlay, CheckBox } from 'react-native-elements'
+import { useState, useRef} from 'react';
+import { Platform, View, Text, Image, TouchableOpacity, ScrollView, StyleSheet, TextInput, Modal, ActivityIndicator, Alert } from 'react-native'
+import { Button, Icon, Divider, Input } from 'react-native-elements'
 import {ActionSheet} from 'native-base';
 import DateTimePicker from '@react-native-community/datetimepicker';
 import DateTimePickerModal from "react-native-modal-datetime-picker";
diff --git a/app/components/header.js b/app/components/header.js
index bba9a422..016a1e80 100644
--- a/app/components/header.js
+++ b/app/components/header.js
@@ -192,7 +192,7 @@ class CustomHeader extends React.Component {
           </View>
         </ImageBackground>
       </View>
-    </View>
+      </View>
     )
   }
 }
diff --git a/app/components/tab/Tabs.js b/app/components/tab/Tabs.js
index 66b9e687..bd2ab57f 100644
--- a/app/components/tab/Tabs.js
+++ b/app/components/tab/Tabs.js
@@ -18,7 +18,7 @@ interface Props {
 const Tabs = (props: Props) => {
   const layout = useWindowDimensions();
   
-  const [index, setIndex ] = useState(0);
+  const [index, setIndex ] = useState(props.tab || 0);
 
   const renderScene = props.renderScene;
   const routes = props.routes;
diff --git a/app/components/theme.style.js b/app/components/theme.style.js
index 94fafa41..20f8aeb6 100644
--- a/app/components/theme.style.js
+++ b/app/components/theme.style.js
@@ -1,4 +1,4 @@
-import {Stylesheet, Dimensions} from 'react-native';
+import {Platform, Dimensions} from 'react-native';
 import moment from 'moment';
 
 const colors = {
@@ -85,10 +85,13 @@ const formatter = {
   }
 }
 
+const platform = Platform.OS;
+
 export default {
   colors,
   screen,
   font,
   card,
-  formatter
+  formatter,
+  platform
 }
\ No newline at end of file
diff --git a/app/screens/account/add.js b/app/screens/account/add.js
index 0b495f5b..58c0b003 100644
--- a/app/screens/account/add.js
+++ b/app/screens/account/add.js
@@ -165,7 +165,6 @@ class AddAccountCard extends React.PureComponent {
           color={this.props.app_theme?.theme.colors.text}
           visible={this.state.loading} />
         <CustomHeader title="" navigation={this.props.navigation} main={false} onBackPress={() => this.props.navigation.goBack()} back={true} />
-        <Container>
           <View style={{flex: 1}}> 
             <View style={{width: '100%', height: 90, alignSelf: 'center', marginTop: 50}}>
               <Image source={Assets.logo.unioil} style={{width: '100%', height: '85%', resizeMode: 'contain'}} />
@@ -173,7 +172,7 @@ class AddAccountCard extends React.PureComponent {
             <View style={{flex: 1, alignItems: 'center'}}>
               <Text style={{alignSelf: 'center', fontFamily: 'Arial', fontWeight: 'bold', fontSize: 25, padding: 15, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>Add Card</Text>
               <Text style={{alignSelf: 'center', marginTop: 5, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, fontFamily: 'Arial', fontSize: 16}}>
-                Enter you 16-digit card number.
+                Enter your 16-digit card number.
               </Text>
               <View style={{flexDirection: 'row', marginTop: 20, alignItems: 'center'}}> 
                 <CustomInput 
@@ -199,7 +198,6 @@ class AddAccountCard extends React.PureComponent {
               </View>
             </View>
           </View>
-        </Container>
       </CustomSafeArea>
     )
   }
diff --git a/app/screens/account/index.js b/app/screens/account/index.js
index 18fd458b..c820c2e7 100644
--- a/app/screens/account/index.js
+++ b/app/screens/account/index.js
@@ -253,11 +253,12 @@ class About extends React.PureComponent {
             style={{width: '100%', height: '85%', resizeMode: 'contain'}}
           />
         </View>
-        <Container style={{height: 100}}>
+        <View style={{flex: 1}}>
           <View>
-            <View style={{flexDirection: 'row', padding: 20}}>
-              <View style={{flex: 1}}>
+            <View style={{flexDirection: 'row', padding: 20, marginBottom: 15}}>
+              <View>
                 <NBImage
+                  style={{height: 50, width: 50, marginRight: 10}}
                   source={this.state.data ? this.state.data.photo == '' ? Assets.logo.profileHolder : {uri: this.state.data.photo} : Assets.logo.profileHolder}
                 />
               </View>
@@ -286,7 +287,7 @@ class About extends React.PureComponent {
           </View>
   
           {this.renderAccount()}
-        </Container>
+        </View>
         {this.state.accounts.length < 5 ?
         <View
           style={{
diff --git a/app/screens/login/apply/details.js b/app/screens/login/apply/details.js
index 9d644135..972201fc 100644
--- a/app/screens/login/apply/details.js
+++ b/app/screens/login/apply/details.js
@@ -6,11 +6,14 @@ import {
   View, 
   Text, 
   Image, 
-  Alert 
+  Alert,
+  Keyboard
 } from 'react-native';
 import { 
   FormControl, 
   Input, 
+  KeyboardAvoidingView, 
+  ScrollView, 
   Stack
 } from 'native-base';
 import CustomHeader from '../../../components/header.js';
@@ -58,6 +61,9 @@ class ApplyCardDetails extends React.Component {
   constructor(props) {
     super(props)
     this.card = props.route.params || {}
+
+    this.keyboardOpenListener = null;
+    this.keyboardCloseListener = null;
   }
 
   state = {
@@ -73,7 +79,6 @@ class ApplyCardDetails extends React.Component {
   }
 
   componentWillUnmount() {
-
   }
 
   init = async () => {
@@ -128,60 +133,68 @@ class ApplyCardDetails extends React.Component {
     return (
       <CustomSafeArea>
         <CustomHeader title="" menu={false} back={true} backscreen="ApplySelectCard" navigation={this.props.navigation} />
-        <View style={{flex: 1}}>
-          <View style={{flex: 1, justifyContent: 'flex-start', alignItems: 'flex-start', padding: 20}}>
-            <View style={{padding: 10, width: '100%'}}>
-              <Image source={{uri: this.card.image}} style={{width: '100%', height: Theme.screen.h * .32, borderRadius: 10}} />
-            </View>
-            <Text style={{padding: 15, paddingTop: 5, paddingLeft: 0, fontSize: 16, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black, fontWeight: 'bold'}}>
-              {this.card.name}
-            </Text>
-            <Text style={{fontSize: 13.5, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, width: '100%'}}>
-              {this.card.description}
-            </Text>
-    
-            <View style={{flex: 1, width: '100%'}}>
-              <View style={{width: '100%', opacity: this.handleShowForm()}}>
-                <View style={{alignItems: 'center', alignSelf: 'center', marginTop: 20}}>
-                  <Text style={{fontSize: 20, fontWeight: 'bold', textAlign: 'center', padding: 10, color: 'black', paddingBottom: 20}}>Enter ID Number</Text>
-                  {/* <View style={{flexDirection: 'row'}}>
-                    <Text style={{padding: 10, fontSize: 16, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>
-                      {this.card.id_number_description ? this.card.id_number_description : ""}
-                    </Text>
-                    <TouchableOpacity onPress={() => Alert.alert("Information", this.state.info ? this.state.info.value : "")} style={{padding: 10, paddingLeft: 0}}>
-                      <Icon.Foundation name="info" color={Theme.colors.gray} size={20} />
+        <KeyboardAvoidingView
+          style={{flex: 1}}
+          behavior='padding'
+          keyboardVerticalOffset={Platform.OS === 'ios' ? 50 : 70}
+        >
+          <ScrollView contentContainerStyle={{height: Theme.screen.h * .85}}>
+            <View style={{flex: 1, justifyContent: 'flex-start', alignItems: 'flex-start', padding: 20}}>
+              <View style={{padding: 10, width: '100%'}}>
+                <Image source={{uri: this.card.image}} style={{width: '100%', height: Theme.screen.h * .28, borderRadius: 10}} />
+              </View>
+              <Text style={{padding: 15, paddingTop: 5, paddingLeft: 0, fontSize: 16, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black, fontWeight: 'bold'}}>
+                {this.card.name}
+              </Text>
+              <Text style={{fontSize: 13.5, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, width: '100%'}}>
+                {this.card.description}
+              </Text>
+      
+              <View style={{flex: 1, width: '100%'}}>
+                <View style={{width: '100%', opacity: this.handleShowForm()}}>
+                  <View style={{alignItems: 'center', alignSelf: 'center', marginTop: 20}}>
+                    <Text style={{fontSize: 20, fontWeight: 'bold', textAlign: 'center', padding: 10, color: 'black', paddingBottom: 20}}>Enter ID Number</Text>
+                    {/* <View style={{flexDirection: 'row'}}>
+                      <Text style={{padding: 10, fontSize: 16, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>
+                        {this.card.id_number_description ? this.card.id_number_description : ""}
+                      </Text>
+                      <TouchableOpacity onPress={() => Alert.alert("Information", this.state.info ? this.state.info.value : "")} style={{padding: 10, paddingLeft: 0}}>
+                        <Icon.Foundation name="info" color={Theme.colors.gray} size={20} />
+                      </TouchableOpacity>
+                    </View> */}
+                  </View>
+                </View>
+        
+                <FormControl style={{width: '100%', opacity: this.handleShowForm()}}>
+                  <Stack>
+                    <FormControl.Label style={{ color: this.props.app_theme?.theme.colors.text }}>ID Number</FormControl.Label>
+                    <Input 
+                      style={{ color: this.props.app_theme?.theme.colors.text }}
+                      placeholder="ID Number"
+                      value={this.state.cardid || ""}
+                      onChangeText={(value) => {
+                        this.setState({ cardid: value })
+                        if(value != "") this.setState({ valid: true })
+                        else this.setState({ valid: false })
+                      }} 
+                    />
+                  </Stack>
+                </FormControl>
+                <View style={{flex: 1, justifyContent: 'flex-end'}}>
+                {
+                  this.state.canProceed ?
+                    <TouchableOpacity onPress={() => this.onNext()} style={{backgroundColor: !this.handleShowForm() ? Theme.colors.primary : this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.primary, padding: 15, marginTop: 20, width: '100%', borderRadius: 10, elevation: 3}}>
+                      <Text style={{textAlign: 'center', color: "#fff", fontSize: 16}}>Next</Text>
+                    </TouchableOpacity> : 
+                    <TouchableOpacity disabled={!this.state.valid} onPress={() => this.onNext()} style={{backgroundColor: this.state.valid ? Theme.colors.primary : this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.primary + "15", padding: 15, marginTop: 20, width: '100%', borderRadius: 10, elevation: this.state.valid ? 3 : 0}}>
+                      <Text style={{textAlign: 'center', color: "#fff", fontSize: 16}}>Next</Text>
                     </TouchableOpacity>
-                  </View> */}
+                }
                 </View>
               </View>
-      
-              <FormControl style={{width: '100%', opacity: this.handleShowForm()}}>
-                <Stack>
-                  <FormControl.Label style={{ color: this.props.app_theme?.theme.colors.text }}>ID Number</FormControl.Label>
-                  <Input 
-                    style={{ color: this.props.app_theme?.theme.colors.text }}
-                    placeholder="ID Number"
-                    value={this.state.cardid || ""}
-                    onChangeText={(value) => {
-                      this.setState({ cardid: value })
-                      if(value != "") this.setState({ valid: true })
-                      else this.setState({ valid: false })
-                    }} 
-                  />
-                </Stack>
-              </FormControl>
-              {
-                this.state.canProceed ?
-                  <TouchableOpacity onPress={() => this.onNext()} style={{backgroundColor: !this.handleShowForm() ? Theme.colors.primary : this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.primary, padding: 15, marginTop: 20, width: '100%', borderRadius: 10, elevation: 3}}>
-                    <Text style={{textAlign: 'center', color: "#fff", fontSize: 16}}>Next</Text>
-                  </TouchableOpacity> : 
-                  <TouchableOpacity disabled={!this.state.valid} onPress={() => this.onNext()} style={{backgroundColor: this.state.valid ? Theme.colors.primary : this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.primary + "15", padding: 15, marginTop: 20, width: '100%', borderRadius: 10, elevation: this.state.valid ? 3 : 0}}>
-                    <Text style={{textAlign: 'center', color: "#fff", fontSize: 16}}>Next</Text>
-                  </TouchableOpacity>
-              }
             </View>
-          </View>
-        </View>
+          </ScrollView>
+        </KeyboardAvoidingView>
       </CustomSafeArea>
     );
   }
diff --git a/app/screens/login/apply/form.js b/app/screens/login/apply/form.js
index 50043633..6a865153 100644
--- a/app/screens/login/apply/form.js
+++ b/app/screens/login/apply/form.js
@@ -18,6 +18,7 @@ import moment from 'moment';
 import DB from '../../../components/storage/';
 import REQUEST from '../../../components/api/';
 import CustomSafeArea from '../../../components/safeArea.component.js';
+import { KeyboardAvoidingView } from 'native-base';
 
 const CustomInput = (props) => {
 
@@ -394,130 +395,136 @@ class ApplyForm extends React.Component {
           onCancel={() => this.setState({ datepicker: false })}
         />
         <CustomHeader title="" menu={false} back={true} onBackPress={() => this.props.navigation.goBack()} navigation={this.props.navigation} />
-        <ScrollView>
-        <View style={{flex: 1}}> 
-          <View style={{flex: 1, alignItems: 'center'}}>
-            <Text style={{alignSelf: 'center', fontFamily: 'Arial', fontWeight: 'bold', fontSize: 25, padding: 15, marginTop: 25, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>Enter Your Details</Text>
-            <Text style={{alignSelf: 'center', textAlign: 'center', width: '90%', marginTop: 0, padding: 15, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, fontFamily: 'Arial', fontSize: 16}}>
-              Fill out the remaining forms and you're good to go!
-            </Text>
-            <CustomInput
-              title="First Name"
-              value={this.state.fname}
-              index={1}
-              current={this.state.activeInput}
-              keyboardType={'ascii-capable'}
-              textColor={this.props.app_theme?.theme.colors.text}
-              isDarkMode={this.props.app_theme?.theme.dark}
-              focus={this.state.focus}
-              error={this.state.errors && this.state.errors.firstname ? this.state.errors.firstname : false}
-              errorMessage={this.state.errors && this.state.errors.firstname ? this.state.errors.firstname[0] : ""}
-              onFocus={() => {
-                this.setState({ activeInput: 1, focus: true })
-              }}
-              onChangeText={this.onChangeTextValueFirstname}
-            />
-            <CustomInput
-              top={50} 
-              title="Last Name"
-              value={this.state.lname}
-              index={2}
-              current={this.state.activeInput}
-              keyboardType={'ascii-capable'}
-              textColor={this.props.app_theme?.theme.colors.text}
-              isDarkMode={this.props.app_theme?.theme.dark}
-              focus={this.state.focus}
-              error={this.state.errors && this.state.errors.lastname ? this.state.errors.lastname : false}
-              errorMessage={this.state.errors && this.state.errors.lastname ? this.state.errors.lastname[0] : ""}
-              onFocus={() => {
-                this.setState({ activeInput: 2, focus: true })
-              }}
-              onChangeText={this.onChangeTextValueLastname}
-            />
-            <CustomInput
-              top={50} 
-              title="Email Address"
-              value={this.state.email}
-              index={3}
-              current={this.state.activeInput}
-              focus={this.state.focus}
-              textColor={this.props.app_theme?.theme.colors.text}
-              isDarkMode={this.props.app_theme?.theme.dark}
-              error={this.state.errors && this.state.errors.email ? this.state.errors.email : false}
-              errorMessage={this.state.errors && this.state.errors.email ? this.state.errors.email[0] : ""}
-              onFocus={() => {
-                this.setState({ activeInput: 3, focus: true })
-              }}
-              onChangeText={(val) => {
-                this.setState({ email: val })
-              }}
-            />
-  
-            <View style={{flexDirection: 'row', width: '80%', marginTop: 35, alignItems: 'center'}}> 
-              <View style={{flex: 1}}>
-                {this.state.activeInput >= 4 ? <Text style={{fontSize: 12, color: this.state.activeInput == 4 && this.state.focus ? Theme.colors.accent : Theme.colors.darkGray, marginTop: -25, marginBottom: 15}}>Birthday</Text> : null}
-                <TouchableOpacity 
-                  onPress={() => {
-                    this.setState({ focus: true, activeInput: 4, datepicker: true })
-                    if(this.state.errors && this.state.errors.birthdate) delete this.state.errors.birthdate
-                  }}>
-                  <View style={{paddingTop: 15, paddingBottom: 5,borderColor: this.state.errors && this.state.errors.birthdate ? Theme.colors.primary : 'gray', borderBottomWidth: this.state.errors && this.state.errors.birthdate ? 1.5 : 1}}>
-                    <Text style={{fontSize: 17, fontFamily: 'Arial', color: (this.state.birthdate && this.props.app_theme?.theme.dark) ? this.props.app_theme?.theme.colors.text : this.state.birthdate ? Theme.colors.textPrimary : Theme.colors.darkGray}}>{this.state.birthdate || "Birthday"}</Text>
-                  </View>
-                </TouchableOpacity>
-                {this.state.errors && this.state.errors.birthdate ? 
-                <Text style={{fontSize: 12, color: Theme.colors.primary, marginTop: 5, marginBottom: 15, width: '90%'}}>
-                  {this.state.errors?.birthdate[0]}
-                </Text> : null}
-              </View>
-            </View>
-  
-            <CustomInput
-              top={50} 
-              index={5}
-              current={this.state.activeInput}
-              focus={this.state.focus}
-              title="Mobile Number"
-              value={this.state.number && this.state.number.length <= 2 ? '+63' : this.state.number}
-              keyboardType="numeric"
-              maxlength={13}
-              textColor={this.props.app_theme?.theme.colors.text}
-              isDarkMode={this.props.app_theme?.theme.dark}
-              error={this.state.errors && this.state.errors.mobile ? this.state.errors.mobile : false}
-              errorMessage={this.state.errors && this.state.errors.mobile ? this.state.errors.mobile[0] : ""}
-              onFocus={() => {
-                this.setState({ activeInput: 5, focus: true })
-                if(this.state.number == null) this.setState({ number: '+63' })
-              }}
-              onChangeText={(val) => {
-                this.setState({ number: val, errors: null })
-                if(this.state.agree){
-                  if(val.length < 13) this.setState({ valid: false })
-                  else if(val.length == 13) this.setState({ valid: true })
-                }
-              }}
-            />  
-            <View style={{flexDirection: 'row', width: '80%', marginTop: 15, alignItems: 'center'}}> 
-              <TouchableOpacity onPress={() => this.state.fname && this.state.lname && this.state.birthdate && this.state.email && this.state.number ? this.onAgree() : null} style={{flex: 0, paddingTop: 15}}>
-                {!this.state.agree ? <Icon.Feather color={this.props.app_theme?.theme.colors.text} name="square" size={20} /> : <Icon.AntDesign name="checksquare" color={Theme.colors.accent} size={20} />}
-              </TouchableOpacity>
-              <View style={{flex: 1, paddingTop: 10, paddingHorizontal: 10}}>
-                <View style={{flexDirection: 'row', paddingTop: 5, alignItems: 'center'}}>
-                  <Text style={{ color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>I agree to </Text>
-                  <TouchableOpacity style={{ paddingVertical: 10 }} onPress={() => this.props.navigation.navigate("TermsConditions", {screen: 'ApplyForm'})}>
-                    <Text style={{color: Theme.colors.primary}}>Unioil's Data Privacy Policy.</Text>
+        <KeyboardAvoidingView 
+          style={{flex: 1}}
+          behavior="padding"
+          keyboardVerticalOffset={Theme.platform === 'ios' ? 50 : 70}
+        >
+          <ScrollView>
+          <View style={{flex: 1}}> 
+            <View style={{flex: 1, alignItems: 'center'}}>
+              <Text style={{alignSelf: 'center', fontFamily: 'Arial', fontWeight: 'bold', fontSize: 25, padding: 15, marginTop: 25, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>Enter Your Details</Text>
+              <Text style={{alignSelf: 'center', textAlign: 'center', width: '90%', marginTop: 0, padding: 15, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, fontFamily: 'Arial', fontSize: 16}}>
+                Fill out the remaining forms and you're good to go!
+              </Text>
+              <CustomInput
+                title="First Name"
+                value={this.state.fname}
+                index={1}
+                current={this.state.activeInput}
+                keyboardType={'ascii-capable'}
+                textColor={this.props.app_theme?.theme.colors.text}
+                isDarkMode={this.props.app_theme?.theme.dark}
+                focus={this.state.focus}
+                error={this.state.errors && this.state.errors.firstname ? this.state.errors.firstname : false}
+                errorMessage={this.state.errors && this.state.errors.firstname ? this.state.errors.firstname[0] : ""}
+                onFocus={() => {
+                  this.setState({ activeInput: 1, focus: true })
+                }}
+                onChangeText={this.onChangeTextValueFirstname}
+              />
+              <CustomInput
+                top={50} 
+                title="Last Name"
+                value={this.state.lname}
+                index={2}
+                current={this.state.activeInput}
+                keyboardType={'ascii-capable'}
+                textColor={this.props.app_theme?.theme.colors.text}
+                isDarkMode={this.props.app_theme?.theme.dark}
+                focus={this.state.focus}
+                error={this.state.errors && this.state.errors.lastname ? this.state.errors.lastname : false}
+                errorMessage={this.state.errors && this.state.errors.lastname ? this.state.errors.lastname[0] : ""}
+                onFocus={() => {
+                  this.setState({ activeInput: 2, focus: true })
+                }}
+                onChangeText={this.onChangeTextValueLastname}
+              />
+              <CustomInput
+                top={50} 
+                title="Email Address"
+                value={this.state.email}
+                index={3}
+                current={this.state.activeInput}
+                focus={this.state.focus}
+                textColor={this.props.app_theme?.theme.colors.text}
+                isDarkMode={this.props.app_theme?.theme.dark}
+                error={this.state.errors && this.state.errors.email ? this.state.errors.email : false}
+                errorMessage={this.state.errors && this.state.errors.email ? this.state.errors.email[0] : ""}
+                onFocus={() => {
+                  this.setState({ activeInput: 3, focus: true })
+                }}
+                onChangeText={(val) => {
+                  this.setState({ email: val })
+                }}
+              />
+    
+              <View style={{flexDirection: 'row', width: '80%', marginTop: 35, alignItems: 'center'}}> 
+                <View style={{flex: 1}}>
+                  {this.state.activeInput >= 4 ? <Text style={{fontSize: 12, color: this.state.activeInput == 4 && this.state.focus ? Theme.colors.accent : Theme.colors.darkGray, marginTop: -25, marginBottom: 15}}>Birthday</Text> : null}
+                  <TouchableOpacity 
+                    onPress={() => {
+                      this.setState({ focus: true, activeInput: 4, datepicker: true })
+                      if(this.state.errors && this.state.errors.birthdate) delete this.state.errors.birthdate
+                    }}>
+                    <View style={{paddingTop: 15, paddingBottom: 5,borderColor: this.state.errors && this.state.errors.birthdate ? Theme.colors.primary : 'gray', borderBottomWidth: this.state.errors && this.state.errors.birthdate ? 1.5 : 1}}>
+                      <Text style={{fontSize: 17, fontFamily: 'Arial', color: (this.state.birthdate && this.props.app_theme?.theme.dark) ? this.props.app_theme?.theme.colors.text : this.state.birthdate ? Theme.colors.textPrimary : Theme.colors.darkGray}}>{this.state.birthdate || "Birthday"}</Text>
+                    </View>
                   </TouchableOpacity>
+                  {this.state.errors && this.state.errors.birthdate ? 
+                  <Text style={{fontSize: 12, color: Theme.colors.primary, marginTop: 5, marginBottom: 15, width: '90%'}}>
+                    {this.state.errors?.birthdate[0]}
+                  </Text> : null}
                 </View>
               </View>
-            </View>
-            <View style={{alignItems: 'center', justifyContent: 'flex-end', padding: 20, marginTop: 20}}>
-              <TouchableOpacity onPress={() => this.onSubmit()} disabled={!this.state.valid} style={{padding: 20, paddingTop: 15, width: Theme.screen.w - 60, paddingBottom: 15, borderRadius: 10, backgroundColor: this.state.valid ? Theme.colors.primary : this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.primary + "15"}}>
-                <Text style={{fontSize: 16, fontFamily: 'Arial', textAlign: 'center', color: '#fff'}}>Submit</Text>
-              </TouchableOpacity>
-            </View>
-          </View>        
-        </View>
-        </ScrollView>
+    
+              <CustomInput
+                top={50} 
+                index={5}
+                current={this.state.activeInput}
+                focus={this.state.focus}
+                title="Mobile Number"
+                value={this.state.number && this.state.number.length <= 2 ? '+63' : this.state.number}
+                keyboardType="numeric"
+                maxlength={13}
+                textColor={this.props.app_theme?.theme.colors.text}
+                isDarkMode={this.props.app_theme?.theme.dark}
+                error={this.state.errors && this.state.errors.mobile ? this.state.errors.mobile : false}
+                errorMessage={this.state.errors && this.state.errors.mobile ? this.state.errors.mobile[0] : ""}
+                onFocus={() => {
+                  this.setState({ activeInput: 5, focus: true })
+                  if(this.state.number == null) this.setState({ number: '+63' })
+                }}
+                onChangeText={(val) => {
+                  this.setState({ number: val, errors: null })
+                  if(this.state.agree){
+                    if(val.length < 13) this.setState({ valid: false })
+                    else if(val.length == 13) this.setState({ valid: true })
+                  }
+                }}
+              />  
+              <View style={{flexDirection: 'row', width: '80%', marginTop: 15, alignItems: 'center'}}> 
+                <TouchableOpacity onPress={() => this.state.fname && this.state.lname && this.state.birthdate && this.state.email && this.state.number ? this.onAgree() : null} style={{flex: 0, paddingTop: 15}}>
+                  {!this.state.agree ? <Icon.Feather color={this.props.app_theme?.theme.colors.text} name="square" size={20} /> : <Icon.AntDesign name="checksquare" color={Theme.colors.accent} size={20} />}
+                </TouchableOpacity>
+                <View style={{flex: 1, paddingTop: 10, paddingHorizontal: 10}}>
+                  <View style={{flexDirection: 'row', paddingTop: 5, alignItems: 'center'}}>
+                    <Text style={{ color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>I agree to </Text>
+                    <TouchableOpacity style={{ paddingVertical: 10 }} onPress={() => this.props.navigation.navigate("TermsConditions", {screen: 'ApplyForm'})}>
+                      <Text style={{color: Theme.colors.primary}}>Unioil's Data Privacy Policy.</Text>
+                    </TouchableOpacity>
+                  </View>
+                </View>
+              </View>
+              <View style={{alignItems: 'center', justifyContent: 'flex-end', padding: 20, marginTop: 20}}>
+                <TouchableOpacity onPress={() => this.onSubmit()} disabled={!this.state.valid} style={{padding: 20, paddingTop: 15, width: Theme.screen.w - 60, paddingBottom: 15, borderRadius: 10, backgroundColor: this.state.valid ? Theme.colors.primary : this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.primary + "15"}}>
+                  <Text style={{fontSize: 16, fontFamily: 'Arial', textAlign: 'center', color: '#fff'}}>Submit</Text>
+                </TouchableOpacity>
+              </View>
+            </View>        
+          </View>
+          </ScrollView>
+        </KeyboardAvoidingView>
       </CustomSafeArea>
     );
   }
diff --git a/app/screens/main/station/fragments/searchbar.js b/app/screens/main/station/fragments/searchbar.js
index ea0fd23a..a52d9d8f 100644
--- a/app/screens/main/station/fragments/searchbar.js
+++ b/app/screens/main/station/fragments/searchbar.js
@@ -13,7 +13,7 @@ export default function SearchBar(props){
           <Icon.Ionicons name="md-search" size={22} color={props.textColor} />
         </View>
         <View style={{flex: 5, backgroundColor: props.isDarkMode ? Theme.colors.darkGray : Theme.colors.white, justifyContent: 'center'}}>
-          <TextInput autoFocus={props.autofocus} value={props.value} onFocus={props.onFocus} onChangeText={props.onChangeText} style={{fontSize: 17, color: props.isDarkMode ? props.textColor : Theme.colors.black}} placeholder="Search for city" placeholderTextColor={Theme.colors.lightGray} />
+          <TextInput autoFocus={props.autofocus} value={props.value} onFocus={props.onFocus} onChangeText={props.onChangeText} style={{fontSize: 17, color: props.isDarkMode ? props.textColor : Theme.colors.black}} placeholder="Search for a station name" placeholderTextColor={Theme.colors.lightGray} />
         </View>
         {props.clear ? <TouchableOpacity onPress={props.onClear} activeOpacity={1} style={{flex: 0, backgroundColor: '#fff', padding: 10, justifyContent: 'center'}}>
           <Icon.Ionicons name="md-close" size={22} color={Theme.colors.darkGray} />
diff --git a/app/screens/main/station/xindex.js b/app/screens/main/station/xindex.js
index acccd5b3..7ce2ebea 100644
--- a/app/screens/main/station/xindex.js
+++ b/app/screens/main/station/xindex.js
@@ -134,7 +134,7 @@ class Stations extends React.Component {
               <Icon.Ionicons name="md-search" size={22} color={Theme.colors.darkGray} />
             </View>
             <View style={{flex: 5, backgroundColor: '#fff', justifyContent: 'center'}}>
-              <TextInput style={{fontSize: 17}} placeholder="Search for city" />
+              <TextInput style={{fontSize: 17}} placeholder="Search for a station name" />
             </View>
           </View>
         </View>
@@ -166,120 +166,6 @@ class Stations extends React.Component {
 
 export default Stations
 
-// export default function Stations(navigation) {
-
-//   const [loading, setloading] = useState(false)
-//   const [panel, setpanel] = useState(null)
-//   const [showPanel, setshowpanel] = useState(false)
-//   const [session, setsession] = useState(null)
-//   const [stations, setstations] = useState([])
-//   const [initialRegion, setinitialRegion] = useState({
-//     latitude: 14.599512,
-//     longitude: 120.984222,
-//     latitudeDelta: 0.0922,
-//     longitudeDelta: 0.0421,
-//   })
-//   const [mylocation, setmylocation] = useState({})
-
-//   const fetch = async () => {
-//     setloading(true)
-//     panel.hide()
-//     let session = await DB.session()
-//     await setsession(session)
-//     REQUEST('gas_stations', 'post', {
-//       Authorization: session.token
-//     }, {}, {
-//       lcard_uuid: session.user.lcard_uuid,
-//       longitude: mylocation.longitude,
-//       latitude: mylocation.latitude
-//     }, function(res){
-//       setloading(false)
-//       setstations(res.data)
-//       panel.show()
-//       updateRegion()
-//     }, function(e){
-//       console.log(e)
-//       setloading(false)
-//     })
-//     setloading(false)
-//   }
-
-//   const updateRegion = () => {
-//     if(stations.length > 0){
-//       let region = initialRegion
-//       region.latitude = parseFloat(stations[0].latitude)
-//       region.longitude = parseFloat(stations[0].longitude)
-//       region.latitudeDelta = 0.00700
-//       region.longitudeDelta = 0.00100
-//       setinitialRegion(region)
-//     }
-//   }
-
-//   const init = async () => {
-//     Geolocation.getCurrentPosition(info => setmylocation(info.coords) );
-//     // if(!mylocation.accuracy){
-//     //   alert("Location is disabled")
-//     //   return
-//     // }
-//     fetch()
-//   }
-
-//   useEffect(() => {
-//     init()
-//   }, [])
-
-//   return (
-//     <SafeAreaView style={{flex: 1}}>
-//       <CustomHeader title="Stations" menu={true} navigation={navigation} />
-      
-//       <View style={styles.mapContainer}>
-//         <MapView
-//           provider={PROVIDER_GOOGLE}
-//           loadingEnabled={true}
-//           style={styles.map}
-//           showsUserLocation={true}
-//           region={initialRegion}
-//         />
-//       </View>
-
-//       <View style={{flex: 0, backgroundColor: '#fff', border: 1, margin: 15, height: 50, padding: 0, justifyContent: 'flex-start', alignItems: 'center', borderRadius: 15, elevation: 10}}>
-//         <View style={{flex: 1, flexDirection: 'row', justifyContent: 'center'}}>
-//           <View style={{flex: 0, backgroundColor: '#fff', padding: 10, justifyContent: 'center'}}>
-//             <Icon.Ionicons name="md-search" size={22} color={Theme.colors.darkGray} />
-//           </View>
-//           <View style={{flex: 5, backgroundColor: '#fff', justifyContent: 'center'}}>
-//             <TextInput style={{fontSize: 17}} placeholder="Search for city" />
-//           </View>
-//         </View>
-//       </View>
-
-//       {/* <View style={ showPanel ? {...styles.panelActiveContainer} : {...styles.panelInctiveContainer}}> */}
-//       <View style={styles.panelInctiveContainer}>
-//         <SlidingUpPanel 
-//           ref={c => setpanel(c)}
-//           backdropOpacity={1}
-//           allowDragging={true}
-//           showBackdrop={false}
-//           draggableRange={{top: Theme.screen.h / 2.35, bottom: Theme.screen.h / 1.96}}>
-//           <View style={{flex: 1, alignItems: 'center', justifyContent: 'flex-start', backgroundColor: '#fff'}}>
-//             <TouchableOpacity activeOpacity={1} onPress={() => setshowpanel(true)} style={{ width: '100%', height: 60, top: -70}}>
-//               <View style={{flex: 1, flexDirection: 'row', backgroundColor: Theme.colors.lightGray, justifyContent: 'flex-start', padding: 20, alignItems: 'flex-start'}}>
-//                 <Text style={{flex: 4, color: Theme.colors.textPrimary, fontSize: 14}}>Unioil Stations found: {stations.length}</Text>
-//                 <View style={{flex: 0}}>{loading ? <ActivityIndicator color="gray" /> : null}</View>
-//               </View>
-//             </TouchableOpacity>
-//             <ScrollView>
-//               {renderStations(stations)}
-//               <View style={{height: Theme.screen.h}}></View>
-//             </ScrollView>
-             
-//           </View>
-//         </SlidingUpPanel>
-//       </View>
-//     </SafeAreaView>
-//   );
-// }
-
 const styles = StyleSheet.create({
   mapContainer: {
     ...StyleSheet.absoluteFillObject,
diff --git a/app/screens/mpin/setmpin.js b/app/screens/mpin/setmpin.js
index d76db235..ab9d87b9 100644
--- a/app/screens/mpin/setmpin.js
+++ b/app/screens/mpin/setmpin.js
@@ -5,9 +5,12 @@ import {
     TouchableOpacity, 
     ScrollView, 
     Alert, 
-    Dimensions } from 'react-native';
+    Dimensions, 
+    KeyboardAvoidingView} from 'react-native';
 import { connect } from "react-redux";
 import { saveUserInfo } from "../../redux/actions/AppUserInfoActions";
+import Icon from '../../components/icons.js';
+import CustomHeader from '../../components/header.js';
 import Crypto from '../../components/crypto.js';
 import Elements from '../../components/elements.js';
 import NetInfo from "../../components/netstatus";
@@ -149,13 +152,21 @@ class Setmpin extends React.Component {
     render() {
         return(
             <CustomSafeArea>
-                <View>
-                    <View style={{flexDirection: 'row', height: this.props.height ? this.props.height : 55, padding: 5, backgroundColor: Theme.colors.primary, top: Platform.OS =='ios' && this.props.top ? this.props.top : 0}}>
+                {/* <View style={{flexDirection: 'row', backgroundColor: Theme.colors.primary}}>
+                    <View style={{flex: .5, justifyContent: 'center'}}>
+                    <TouchableOpacity style={{height: 40, width: 40, alignItems: 'center', justifyContent: 'center', borderWidth: 1}} onPress={() => this.props.navigation.goBack()}>
+                        <Icon.AntDesign name={"arrowleft"} size={20} style={{color: "#FFF"}} />
+                    </TouchableOpacity>
+                    </View>
+                    <View style={{flex: 1, flexDirection: 'row', height: this.props.height ? this.props.height : 55, padding: 5, backgroundColor: Theme.colors.primary, top: Platform.OS =='ios' && this.props.top ? this.props.top : 0}}>
                         <View style={{flex:3, justifyContent: 'center'}}>
                             <Text style={{textAlign:'center', fontSize: 17, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : '#fff'}}>Set your mobile PIN</Text>
                         </View>
                     </View>
-                </View>
+                    <View style={{flex: .5}} />
+                </View> */}
+                <CustomHeader title="Set your mobile PIN" menu={false} back={true} onBackPress={() => this.props.navigation.goBack()} navigation={this.props.navigation} />
+
                 <Elements.loaderView 
                     title="Validating"
                     message="Please wait..."
@@ -163,33 +174,39 @@ class Setmpin extends React.Component {
                     backgroundColor={this.props.app_theme?.theme.colors.border}
                     color={this.props.app_theme?.theme.colors.text}
                     visible={this.state.loading} />
-                <ScrollView style={{ flex: 1 }}>
-                    <View style={{ flex: 1, marginTop: 45, }}>
-                        <Text style={{ padding: 10, textAlign: 'center', fontFamily: 'arial', fontSize: 16, fontStyle: 'italic', marginBottom: 50, marginHorizontal: 30, fontWeight: 'bold', color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black }}>To keep your app secure, you will be asked for an MPIN to open your app.</Text>
-                        <View style={{ flex: 1, alignItems: 'center' }}>
-                            <Text style={{ padding: 15, alignSelf: 'flex-start', fontFamily: 'arial', fontSize: 16, marginLeft: 40, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : 'gray', marginBottom: 15 }}>Enter 4-digit MPIN</Text>
-                            <CustomOTPInput
-                                containerStyle={{ marginBottom: 30 }} 
-                                secureTextEntry={true}
-                                textColor={this.props.app_theme?.theme.colors.text}
-                                isDarkMode={this.props.app_theme?.theme.dark}
-                                onChangeText={(v) => {
-                                    this.setState({ mpin: v, valid: v.length == 4 ? true : false })
-                                }}/>
-                            <Text style={{ marginTop: 30, padding: 15, alignSelf: 'flex-start', fontFamily: 'arial', fontSize: 16, marginLeft: 40, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : 'gray', marginBottom: 15 }}>Confirm 4-digit MPIN</Text>
-                            <CustomOTPInput 
-                                secureTextEntry={true}
-                                textColor={this.props.app_theme?.theme.colors.text}
-                                isDarkMode={this.props.app_theme?.theme.dark}
-                                onChangeText={(v) => {
-                                    this.setState({ confirmMpin: v, valid: v.length == 4 ? true : false })
-                                }}/>
-                            {(this.state.confirmMpin.length > 0 && !this.checkValidMpin()) && (
-                                <Text style={{ textAlign: 'center', fontFamily: 'arial', fontSize: 12, marginLeft: 45, color: Theme.colors.primary, alignSelf: 'flex-start', marginTop: 5 }}>Please ensure that your MPIN is matched</Text>
-                            )}
-                        </View>
-                    </View>
-                </ScrollView>
+                    <KeyboardAvoidingView
+                    style={{flex: 1}}
+                    behavior='padding'
+                    keyboardVerticalOffset={Platform.OS === 'ios' ? 50 : 70}
+                    >
+                        <ScrollView style={{ flex: 1 }}>
+                            <View style={{ flex: 1, marginTop: 45, }}>
+                                <Text style={{ padding: 10, textAlign: 'center', fontFamily: 'arial', fontSize: 16, fontStyle: 'italic', marginBottom: 50, marginHorizontal: 30, fontWeight: 'bold', color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black }}>To keep your app secure, you will be asked for an MPIN to open your app.</Text>
+                                <View style={{ flex: 1, alignItems: 'center' }}>
+                                    <Text style={{ padding: 15, alignSelf: 'flex-start', fontFamily: 'arial', fontSize: 16, marginLeft: 40, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : 'gray', marginBottom: 15 }}>Enter 4-digit MPIN</Text>
+                                    <CustomOTPInput
+                                        containerStyle={{ marginBottom: 30 }} 
+                                        secureTextEntry={true}
+                                        textColor={this.props.app_theme?.theme.colors.text}
+                                        isDarkMode={this.props.app_theme?.theme.dark}
+                                        onChangeText={(v) => {
+                                            this.setState({ mpin: v, valid: v.length == 4 ? true : false })
+                                        }}/>
+                                    <Text style={{ marginTop: 30, padding: 15, alignSelf: 'flex-start', fontFamily: 'arial', fontSize: 16, marginLeft: 40, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : 'gray', marginBottom: 15 }}>Confirm 4-digit MPIN</Text>
+                                    <CustomOTPInput 
+                                        secureTextEntry={true}
+                                        textColor={this.props.app_theme?.theme.colors.text}
+                                        isDarkMode={this.props.app_theme?.theme.dark}
+                                        onChangeText={(v) => {
+                                            this.setState({ confirmMpin: v, valid: v.length == 4 ? true : false })
+                                        }}/>
+                                    {(this.state.confirmMpin.length > 0 && !this.checkValidMpin()) && (
+                                        <Text style={{ textAlign: 'center', fontFamily: 'arial', fontSize: 12, marginLeft: 45, color: Theme.colors.primary, alignSelf: 'flex-start', marginTop: 5 }}>Please ensure that your MPIN is matched</Text>
+                                    )}
+                                </View>
+                            </View>
+                        </ScrollView>
+                    </KeyboardAvoidingView>
                 <TouchableOpacity disabled={!this.checkValidMpin()} style={{ marginHorizontal: 30, padding: 20, backgroundColor: this.state.valid && this.checkValidMpin() ? Theme.colors.primary : this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.primary + "15", alignItems: 'center', justifyContent: 'flex-end', borderRadius: 10, marginBottom: 10, elevation: this.state.valid ? 3 : 0 }} onPress={() => this.setAppMpin()}>
                     <Text style={{ fontFamily: 'arial', fontSize: 18, color: Theme.colors.white  }}>Submit</Text>
                 </TouchableOpacity>
diff --git a/app/screens/myprofile/card.js b/app/screens/myprofile/card.js
index e39dc1f4..e9fdca8d 100644
--- a/app/screens/myprofile/card.js
+++ b/app/screens/myprofile/card.js
@@ -80,8 +80,8 @@ class MyCard extends React.Component {
   render() {
     return (
       <View style={{ flex: 1, backgroundColor: this.props.app_theme?.theme.colors.background }}>
-        <View style={{flex: 1, width: '100%', height: 250, padding: 15, borderRadius: 15}}>
-          <ImageBackground source={this.state.isConnected ? this.renderImage() : this.renderImage()} style={{height: '100%', resizeMode: 'stretch', overflow: 'hidden', borderRadius: 15}} >
+        <View style={{flex: 1, padding: 15, borderRadius: 15}}>
+          <ImageBackground source={this.state.isConnected ? this.renderImage() : this.renderImage()} style={{height: Theme.screen.h * .3, overflow: 'hidden', borderRadius: 15}} >
             <View style={{marginTop: '32%'}}>
               <Text style={{fontSize: 15, paddingLeft: 5, fontFamily: 'Arial', color: this.getFontColor(this.state.userDetails?.card_type)}}>{this.renderName() || null}</Text>
               <Text style={{fontSize: 15, paddingLeft: 5,fontFamily: 'Arial', color: this.getFontColor(this.state.userDetails?.card_type)}}>{this.renderCardNumber() || null}</Text>
diff --git a/app/screens/myprofile/index.js b/app/screens/myprofile/index.js
index 7696fce4..9f1c1f99 100644
--- a/app/screens/myprofile/index.js
+++ b/app/screens/myprofile/index.js
@@ -64,11 +64,13 @@ class MyProfile extends React.PureComponent {
 	}
 
 	render() {
+		const { tab } = this.props.route.params;
+
 		return (
 			<CustomSafeArea>
 				<CustomHeader title="My Profile" onBackPress={() => this.props.navigation.goBack()} menu={false} navigation={this.props} />
 				<Container style={{ flex: 1, backgroundColor: this.props.app_theme?.theme.colors.background }}>
-					<Tabs renderScene={this.sceneMap()} routes={this.routes()}/>
+					<Tabs tab={tab} renderScene={this.sceneMap()} routes={this.routes()}/>
 				</Container>
 			</CustomSafeArea>
 		)
diff --git a/app/screens/myprofile/profile/edit.js b/app/screens/myprofile/profile/edit.js
index 2d2422e5..f9980c99 100644
--- a/app/screens/myprofile/profile/edit.js
+++ b/app/screens/myprofile/profile/edit.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SafeAreaView, ScrollView, TouchableOpacity, View, Text, Alert } from 'react-native';
+import { KeyboardAvoidingView, ScrollView, TouchableOpacity, View, Text, Alert } from 'react-native';
 import { Avatar } from 'react-native-elements';
 import { connect } from "react-redux";
 import { saveUserInfo, savePlainUserInfo } from "../../../redux/actions/AppUserInfoActions";
@@ -466,6 +466,11 @@ class EditProfile extends React.PureComponent {
             navigation={this.props.navigation} 
           />
           
+        <KeyboardAvoidingView 
+          style={{flex: 1}} 
+          behavior="padding"
+          keyboardVerticalOffset={Theme.platform === 'ios' ? 50 : 70}
+        >
           <ScrollView style={{flex: 1}}>
             <View style={{flex: 1, flexDirection: 'row', padding: 15}}>
               <View style={{flex: 1}}>
@@ -636,6 +641,7 @@ class EditProfile extends React.PureComponent {
               </TouchableOpacity>
             </View>
           </ScrollView>
+        </KeyboardAvoidingView>
         </CustomSafeArea>
         <Elements.customAlert 
           open={this.state.openModal}
diff --git a/app/screens/payatpump/fragments/searchbar.js b/app/screens/payatpump/fragments/searchbar.js
index 929c5fe7..fbfb2b9a 100644
--- a/app/screens/payatpump/fragments/searchbar.js
+++ b/app/screens/payatpump/fragments/searchbar.js
@@ -11,7 +11,7 @@ export default function SearchBar(props){
           <Icon.Ionicons name="md-search" size={22} color={props.isDarkMode ? props.textColor : Theme.colors.darkGray} />
         </View>
         <View style={{flex: 5, backgroundColor: props.isDarkMode ? Theme.colors.darkGray : Theme.colors.white, justifyContent: 'center', borderTopRightRadius: 50, borderBottomRightRadius: 50}}>
-          <TextInput autoFocus={props.autofocus} value={props.value} onFocus={props.onFocus} onChangeText={props.onChangeText} style={{fontSize: 17, color: props.isDarkMode ? props.textColor : Theme.colors.black}} placeholder="Search for city" placeholderTextColor={Theme.colors.lightGray} />
+          <TextInput autoFocus={props.autofocus} value={props.value} onFocus={props.onFocus} onChangeText={props.onChangeText} style={{fontSize: 17, color: props.isDarkMode ? props.textColor : Theme.colors.black}} placeholder="Search for a station name" placeholderTextColor={Theme.colors.lightGray} />
         </View>
         {props.clear ? <TouchableOpacity onPress={props.onClear} activeOpacity={1} style={{backgroundColor: props.isDarkMode ? Theme.colors.darkGray : Theme.colors.white, width: 50, justifyContent: 'center', alignItems: 'center', borderTopRightRadius: 50, borderBottomRightRadius: 50}}>
           <Icon.Ionicons name="md-close" size={22} color={props.isDarkMode ? props.textColor : Theme.colors.darkGray} />
diff --git a/app/screens/tracker/add.js b/app/screens/tracker/add.js
index eda2ee40..1c3b6758 100644
--- a/app/screens/tracker/add.js
+++ b/app/screens/tracker/add.js
@@ -53,8 +53,7 @@ const Tracker = (navigation) => {
   return (
     <CustomSafeArea>
       <CustomHeader title="Add Tracker" menu={false} back={true} backscreen="Tracker" navigation={navigation} />
-      <Container>
-        <View style={{marginTop: 20, padding: 0}}>
+        <View style={{marginTop: 20, padding: 0, alignItems: 'center'}}>
           <CustomForm 
             items={
               [
@@ -108,7 +107,6 @@ const Tracker = (navigation) => {
           style={{ width: '90%', marginLeft: '5%', marginTop: Theme.screen.h / 3, borderRadius: 10, padding: 15, backgroundColor: Theme.colors.primary}}>
           <Text style={{alignSelf: 'center', color: '#fff', fontSize: 16, fontFamily: 'Arial'}}>Save Tracker</Text>
         </TouchableOpacity>
-      </Container>
       
       <Elements.CustomDatePicker 
         visible={datepicker}
diff --git a/ios/RNUnioilLoyaltyApp.xcodeproj/project.pbxproj b/ios/RNUnioilLoyaltyApp.xcodeproj/project.pbxproj
index 4d0d24f6..57224e88 100644
--- a/ios/RNUnioilLoyaltyApp.xcodeproj/project.pbxproj
+++ b/ios/RNUnioilLoyaltyApp.xcodeproj/project.pbxproj
@@ -1065,7 +1065,7 @@
 				CODE_SIGN_ENTITLEMENTS = "RNUnioilLoyaltyApp/Unioil Loyalty App.entitlements";
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 4;
+				CURRENT_PROJECT_VERSION = 5;
 				DEVELOPMENT_TEAM = J29MB7XX75;
 				ENABLE_BITCODE = NO;
 				FRAMEWORK_SEARCH_PATHS = (
@@ -1240,7 +1240,7 @@
 				CODE_SIGN_ENTITLEMENTS = "RNUnioilLoyaltyApp/Unioil Loyalty App.entitlements";
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 4;
+				CURRENT_PROJECT_VERSION = 5;
 				DEVELOPMENT_TEAM = J29MB7XX75;
 				FRAMEWORK_SEARCH_PATHS = (
 					"$(inherited)",
diff --git a/ios/RNUnioilLoyaltyApp.xcworkspace/xcuserdata/macbookpro2017.xcuserdatad/UserInterfaceState.xcuserstate b/ios/RNUnioilLoyaltyApp.xcworkspace/xcuserdata/macbookpro2017.xcuserdatad/UserInterfaceState.xcuserstate
index c9872bfe..326e95a4 100644
Binary files a/ios/RNUnioilLoyaltyApp.xcworkspace/xcuserdata/macbookpro2017.xcuserdatad/UserInterfaceState.xcuserstate and b/ios/RNUnioilLoyaltyApp.xcworkspace/xcuserdata/macbookpro2017.xcuserdatad/UserInterfaceState.xcuserstate differ