diff --git a/src/Routes/Login/Login.tsx b/src/Routes/Login/Login.tsx
index f51e7ef..a70ad64 100644
--- a/src/Routes/Login/Login.tsx
+++ b/src/Routes/Login/Login.tsx
@@ -1,12 +1,58 @@
 import * as React from 'react';
-import {View, Text} from 'react-native';
+import {View, Text,  TextInput} from 'react-native';
 import styles from '../../styles';
 import Background from '../../Components/Background/Background';
+import { SafeAreaView} from "react-native";
+import { StatusBar } from "expo-status-bar";
+import { useState } from "react";
+import {TouchableOpacity,} from "react-native";
+
+
 
 export default function Login() {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+
   return (
     <Background>
-      <Text style={{...styles.text_white, ...{fontSize: 32}}}>Login</Text>
-    </Background>
-  );
-}
+       <Text style={{...styles.text_white, ...{fontSize: 32}}}></Text>
+      <SafeAreaView>
+      <View style={styles.container}>
+        <Text style ={styles.loginlabel}>Login to Clip Notes</Text>
+      <StatusBar style="auto" />
+      <View style={styles.inputView}>
+        <TextInput 
+            style={styles.TextInput}
+            placeholder="Username"
+            placeholderTextColor="white"
+            onChangeText={setUsername} 
+            value={username}
+          /> 
+          </View>   
+        
+        <View style={styles.inputView}>
+        <TextInput
+          style={styles.TextInput}
+          placeholder="Password"
+          placeholderTextColor="white"
+          secureTextEntry={true}
+          onChangeText={setPassword} 
+          value={password}
+        />
+      </View>
+
+      <TouchableOpacity>
+        <Text style={styles.forgot_button}>Forgot Password?</Text> 
+      </TouchableOpacity> 
+      <TouchableOpacity style={styles.loginBtn}>
+      <Text style={styles.loginText}>LOGIN</Text>
+      </TouchableOpacity>
+      <TouchableOpacity style={styles.registerbtn}>
+      <Text style={styles.registertext}>REGISTER</Text>
+      </TouchableOpacity>
+      </View>
+      </SafeAreaView>
+    </Background>   
+); 
+};
+ 
diff --git a/src/Routes/Register/Register.tsx b/src/Routes/Register/Register.tsx
index 198b2a6..e2a3297 100644
--- a/src/Routes/Register/Register.tsx
+++ b/src/Routes/Register/Register.tsx
@@ -1,12 +1,56 @@
 import * as React from 'react';
-import {View, Text} from 'react-native';
+import {View, Text, TextInput} from 'react-native';
 import styles from '../../styles';
 import Background from '../../Components/Background/Background';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useState } from "react";
+import {TouchableOpacity} from "react-native";
 
 export default function Register() {
+  const [username, setUsername] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
   return (
     <Background>
-      <Text style={{...styles.text_white, ...{fontSize: 32}}}>Register</Text>
+      <Text style={{...styles.text_white, ...{fontSize: 32}}}></Text>
+      <SafeAreaView>
+      <View style={styles.container}>
+        <Text style ={styles.loginlabel}>Create an Account</Text>
+      <View style={styles.inputView}>
+        <TextInput 
+            style={styles.TextInput}
+            placeholder="Email"
+            placeholderTextColor="white"
+            onChangeText={setEmail} 
+            value={email}
+          /> 
+          </View>   
+          <View style={styles.inputView}>
+        <TextInput 
+            style={styles.TextInput}
+            placeholder="Username"
+            placeholderTextColor="white"
+            onChangeText={setUsername} 
+            value={username}
+          /> 
+          </View>   
+        <View style={styles.inputView}>
+        <TextInput
+          style={styles.TextInput}
+          placeholder="Password"
+          placeholderTextColor="white"
+          secureTextEntry={true}
+          onChangeText={setPassword} 
+          value={password}
+        />
+      </View>
+      <TouchableOpacity style={styles.registerbtn}>
+      <Text style={styles.registertext}>REGISTER</Text>
+      </TouchableOpacity>
+      </View>
+      </SafeAreaView>
     </Background>
+
   );
 }
diff --git a/src/styles.tsx b/src/styles.tsx
index 4b2caff..4b059d6 100644
--- a/src/styles.tsx
+++ b/src/styles.tsx
@@ -1,4 +1,6 @@
 import {StyleSheet} from 'react-native';
+
+
 const styles = StyleSheet.create({
   background: {
     backgroundColor: '#002d4c',
@@ -30,6 +32,77 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
     alignItems: 'center',
   },
+  input: {
+    height: 40,
+    margin: 12,
+    borderWidth: 1,
+  },
+ 
+  inputView: {
+    backgroundColor: "black",
+    borderRadius: 30,
+    width: "70%",
+    height: 45,
+    marginBottom: 20,
+    
+  },
+  TextInput: {
+    color: 'white',
+    height: 50,
+    flex: 1,
+    padding: 10,
+    marginLeft: 5,
+  },
+  forgot_button: {
+    fontWeight: 'bold',
+    color: 'white',
+    height: 30,
+    marginBottom: 10,
+  },
+  loginBtn: {
+    width: "50%",
+    borderRadius: 25,
+    height: 50,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "lightgreen",
+  },
+  registerbtn: {
+    width: "80%",
+    borderRadius: 25,
+    height: 50,
+    alignItems: "center",
+    justifyContent: "center",
+    marginTop: 40,
+    backgroundColor: "orange",
+  },
+  loginText:{
+    color: 'white',
+    fontWeight: 'bold',
+    fontSize: 20,
+  },
+  registertext:{
+    color: 'white',
+    fontWeight: 'bold',
+    fontSize: 20,
+    
+  },
+  container: {
+    marginTop: 30,
+    marginLeft: 22,
+    height: 500,
+    width: 350,
+    borderRadius: 25, 
+    backgroundColor: 'blue',
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  loginlabel:{
+    fontWeight: 'bold',
+    fontSize: 25,
+    marginBottom: 30,
+    color: 'white',
+  },
 });
 
 export default styles;