diff --git a/source/constants/appstyle.js b/source/constants/appstyle.js
new file mode 100644
index 0000000..38ecf8c
--- /dev/null
+++ b/source/constants/appstyle.js
@@ -0,0 +1,16 @@
+import {Dimensions} from 'react-native';
+
+const SCREEN_WIDTH = Dimensions.get('window').width;
+const SCREEN_HEIGHT = Dimensions.get('window').height;
+console.log('SCREEN_WIDTH ->',SCREEN_WIDTH)
+console.log('SCREEN_HEIGHT ->',SCREEN_HEIGHT)
+
+const width = 320;
+const height = 568;
+
+export const spacingHorizontal = (size) => {
+  return (SCREEN_WIDTH / width) * size;
+};
+export const spacingVertical = (size) => {
+  return (SCREEN_HEIGHT / height) * size;
+};
diff --git a/source/screens/login/index.js b/source/screens/login/index.js
index 45bf864..48fd4e4 100644
--- a/source/screens/login/index.js
+++ b/source/screens/login/index.js
@@ -1,6 +1,7 @@
 import React, {useState} from 'react';
 import {StyleSheet, View, Text} from 'react-native';
 import {TextInput, TouchableOpacity} from 'react-native-gesture-handler';
+import {spacingVertical, spacingHorizontal} from '../../constants/appstyle';
 
 const Login = (props) => {
   const [username, setUsername] = useState('');
@@ -17,9 +18,7 @@ const Login = (props) => {
     }
     setUsername('');
     setPassword('');
-	};
-	
-	console.log("props",props)
+  };
 
   return (
     <View style={styles.container}>
@@ -44,12 +43,15 @@ const Login = (props) => {
       />
       <TouchableOpacity style={styles.buttonStyle} onPress={() => loginPress()}>
         <Text>Login</Text>
-			</TouchableOpacity>
+      </TouchableOpacity>
 
-			<TouchableOpacity onPress={() => {props.navigation.navigate('Signup')}}>
-				<Text>Signup</Text>
-			</TouchableOpacity>
-			
+      <TouchableOpacity
+        style={styles.buttonStyle}
+        onPress={() => {
+          props.navigation.navigate('Signup');
+        }}>
+        <Text>Signup</Text>
+      </TouchableOpacity>
     </View>
   );
 };
@@ -61,25 +63,26 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   textInputStyle: {
-    width: '80%',
-    height: 40,
+    width: spacingHorizontal(280),
+    height: spacingVertical(30),
     borderBottomWidth: 1,
-    marginBottom: 10,
+    marginBottom: spacingVertical(10),
   },
   buttonStyle: {
     backgroundColor: '#90ee90',
     borderRadius: 10,
-    height: 40,
-    width: 200,
+    height: spacingVertical(30),
+    width: spacingHorizontal(200),
     justifyContent: 'center',
     alignItems: 'center',
+    margin: spacingVertical(5),
   },
   statusMessageContainer: {
-    padding: 10,
-    margin: 10,
+    padding: spacingHorizontal(10),
+    margin: spacingHorizontal(10),
   },
   statusMessagestyle: {
-    fontSize: 14,
+    fontSize: spacingHorizontal(14),
   },
 });
 
diff --git a/source/screens/signup/index.js b/source/screens/signup/index.js
index 0cd9c3f..ccff0ea 100644
--- a/source/screens/signup/index.js
+++ b/source/screens/signup/index.js
@@ -1,41 +1,145 @@
 import React, {useState} from 'react';
-import {StyleSheet, View, Text} from 'react-native';
-import {TextInput, TouchableOpacity} from 'react-native-gesture-handler';
+import {
+  StyleSheet,
+  ScrollView,
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+} from 'react-native';
+import {spacingVertical, spacingHorizontal} from '../../constants/appstyle';
 
 const Signup = () => {
-  const [username, setUsername] = useState('');
+  const [firstname, setFirstname] = useState('');
+  const [lastname, setLastname] = useState('');
+  const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
-  const [message, setMessage] = useState('');
+  const [firstnameError, setFirstnameError] = useState('');
+  const [lastnameError, setLastnameError] = useState('');
+  const [emailError, setEmailError] = useState('');
+  const [passwordError, setPasswordError] = useState('');
+  const [isValid, setFormValidity] = useState(true);
+
+  const validEmailRegex = RegExp(
+    /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i,
+  );
+
   const formField = ['firstname', 'lastname', 'email', 'password'];
 
-  const loginPress = () => {
-    if (username === '' || password === '') {
-      setMessage('please fill all the required fields !');
-    } else if (username === 'ajay' && password == 'hrhk@1234') {
-      setMessage('User login successful');
+  getValue = (fieldNmae) => {
+    if (fieldNmae === 'firstname') {
+      return firstname;
+    } else if (fieldNmae === 'lastname') {
+      return lastname;
+    } else if (fieldNmae === 'email') {
+      return email;
+    } else if (fieldNmae === 'password') {
+      return password;
+    } else if (fieldNmae === 'firstnameError') {
+      return firstnameError;
+    } else if (fieldNmae === 'lastnameError') {
+      return lastnameError;
+    } else if (fieldNmae === 'emailError') {
+      return emailError;
+    } else if (fieldNmae === 'passwordError') {
+      return passwordError;
+    }
+  };
+
+  validateForm = () => {
+    if (
+      firstname.length == 0 ||
+      lastname.length == 0 ||
+      password.length == 0 ||
+      email.length == 0
+    ) {
+      return setFormValidity(true);
+    } else if (
+      firstnameError.length > 0 ||
+      lastnameError.length > 0 ||
+      passwordError.length > 0 ||
+      emailError.length > 0
+    ) {
+      return setFormValidity(true);
     } else {
-      setMessage('Incorrect Details');
+      return setFormValidity(false);
+    }
+  };
+  setValue = (text, fieldNmae) => {
+    switch (fieldNmae) {
+      case 'email':
+        setEmail(text);
+        validEmailRegex.test(text)
+          ? setEmailError('')
+          : setEmailError('Email is not valid!');
+        break;
+      case 'password':
+        setPassword(text);
+        text.length < 8
+          ? setPasswordError('Password must be 8 characters long!')
+          : setPasswordError('');
+        break;
+      case 'firstname':
+        setFirstname(text);
+        text.length < 2
+          ? setFirstnameError(
+              'first name should be greater then 2 characters long!',
+            )
+          : setFirstnameError('');
+        break;
+      case 'lastname':
+        setLastname(text);
+        text.length < 2
+          ? setLastnameError(
+              'last name should be greater then 2  characters long!',
+            )
+          : setLastnameError('');
+        break;
+      default:
+        break;
     }
-    setUsername('');
-    setPassword('');
+    validateForm();
   };
 
-  return (
-    <View style={styles.container}>
-      {formField.map((field) => {
-        <TextInput
-          style={styles.textInputStyle}
-          onChangeText={(text) => setUsername(text)}
-          placeholder={field}
-          value={field}
-          required
-        />;
-      })}
+  submit = () => {
+    if (!isValid) {
+      console.log('Signup successful');
+    }
+  };
 
-      <TouchableOpacity style={styles.buttonStyle} onPress={() => loginPress()}>
-        <Text>Sign up</Text>
-      </TouchableOpacity>
-    </View>
+  return (
+    <ScrollView
+      contentContainerStyle={{flexGrow: 1}}
+      keyboardShouldPersistTaps="handled">
+      <View style={styles.container}>
+        {formField.map((field) => {
+          return (
+            <View key={field}>
+              <TextInput
+                style={styles.textInputStyle}
+                onChangeText={(text) => setValue(text, field)}
+                placeholder={field}
+                value={getValue(field)}
+                required
+              />
+              <View style={styles.errorViewStyle}>
+                {true ? (
+                  <Text style={styles.errorText}>
+                    {getValue(`${field}Error`)}
+                  </Text>
+                ) : null}
+              </View>
+            </View>
+          );
+        })}
+        <TouchableOpacity
+          disabled={isValid}
+          style={styles.buttonStyle}
+          onPress={() => submit()}>
+          <Text>Sign up</Text>
+        </TouchableOpacity>
+      </View>
+    </ScrollView>
   );
 };
 
@@ -46,24 +150,35 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   textInputStyle: {
-    width: '80%',
-    height: 40,
+    width: spacingHorizontal(280),
+    height: spacingVertical(30),
     borderBottomWidth: 1,
-    marginBottom: 10,
+    marginBottom: spacingVertical(10),
+    fontSize: 20,
   },
   buttonStyle: {
     backgroundColor: '#90ee90',
     borderRadius: 10,
-    height: 40,
-    width: 200,
+    height: spacingVertical(30),
+    width: spacingHorizontal(200),
     justifyContent: 'center',
     alignItems: 'center',
+    margin: spacingVertical(5),
   },
   statusMessageContainer: {
-    padding: 10,
-    margin: 10,
+    padding: spacingHorizontal(10),
+    margin: spacingHorizontal(10),
   },
   statusMessagestyle: {
+    fontSize: spacingHorizontal(14),
+  },
+  errorViewStyle: {
+    height: spacingVertical(14),
+    borderRadius: 10,
+    alignItems: 'flex-end',
+  },
+  errorText: {
+    color: '#ff6600',
     fontSize: 14,
   },
 });