diff --git a/App.js b/App.js
index 6cbb521..181e02a 100644
--- a/App.js
+++ b/App.js
@@ -3,21 +3,23 @@ import { NavigationContainer } from "@react-navigation/native";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 
 import HomeScreen from "./src/screens/HomeScreen";
-import SignInScreen from "./src/screens/SignInScreen";
+// import SignInScreen from "./src/screens/SignInScreen";
 import DonateScreen from "./src/screens/DonateScreen";
 import WebsitesScreen from "./src/screens/WebsitesScreen";
+import VolunteerFormScreen from "./src/screens/VolunteerFormScreen";
 
 const Stack = createNativeStackNavigator();
 
 export default function App() {
   return (
-    <NavigationContainer>
-      <Stack.Navigator initialRouteName="Home">
-        <Stack.Screen name="Home" component={HomeScreen} />
-        <Stack.Screen name="Sign In" component={SignInScreen} />
-        <Stack.Screen name="Donate" component={DonateScreen} />
-        <Stack.Screen name="Websites" component={WebsitesScreen} />
-      </Stack.Navigator>
-    </NavigationContainer>
+    // <NavigationContainer>
+    //   <Stack.Navigator initialRouteName="Home">
+    //     <Stack.Screen name="Home" component={HomeScreen} />
+    //     <Stack.Screen name="Sign In" component={SignInScreen} />
+    //     <Stack.Screen name="Donate" component={DonateScreen} />
+    //     <Stack.Screen name="Websites" component={WebsitesScreen} />
+    //   </Stack.Navigator>
+    // </NavigationContainer>
+    <VolunteerFormScreen></VolunteerFormScreen>
   );
 }
diff --git a/src/components/BackButton.js b/src/components/BackButton.js
index 69e4898..06b094f 100644
--- a/src/components/BackButton.js
+++ b/src/components/BackButton.js
@@ -2,20 +2,21 @@ import { StyleSheet, Text, View, Image } from "react-native";
 
 export default function BackButton(props) {
   return (
-    <View
-      style={[
-        styles.back,
-        props.opaque ? { backgroundColor: "rgba(0,0,0,0.8)" } : {},
-      ]}
-    >
-      <Text>{"\n\n\n"}</Text>
-      <Image
-        source={require("./../assets/caret-left.png")}
-        style={props.opaque ? { tintColor: "white" } : {}}
-      />
-      <Text style={[styles.backText, props.opaque ? { color: "white" } : {}]}>
-        Back
-      </Text>
+    <View>
+      <View
+        style={[
+          styles.back,
+          props.opaque ? { backgroundColor: "rgba(0,0,0,0.8)" } : {},
+        ]}
+      >
+        <Image
+          source={require("./../assets/caret-left.png")}
+          style={props.opaque ? { tintColor: "white" } : {}}
+        />
+        <Text style={[styles.backText, props.opaque ? { color: "white" } : {}]}>
+          Back
+        </Text>
+      </View>
     </View>
   );
 }
@@ -24,11 +25,6 @@ const styles = StyleSheet.create({
   back: {
     flexDirection: "row",
     alignItems: "center",
-    justifyContent: "center",
-    alignSelf: "flex-start",
-    paddingRight: "13%",
-    borderRadius: 30,
-    marginVertical: "-10%",
   },
 
   backText: {
diff --git a/src/components/MultipleChoice.js b/src/components/MultipleChoice.js
index 69f6344..c864460 100644
--- a/src/components/MultipleChoice.js
+++ b/src/components/MultipleChoice.js
@@ -2,10 +2,19 @@
 import React from "react";
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
 
-const MultipleChoice = ({ options, selectedOption, onSelect }) => {
+const MultipleChoice = ({
+  title,
+  options,
+  selectedOption,
+  onSelect,
+  color = "black",
+}) => {
   return (
-    <View>
-      <Text style={styles.label}>Performance Type *</Text>
+    <View style={{ marginBottom: 20 }}>
+      <Text style={styles.label}>
+        <Text style={{ color: color }}>{title}</Text>
+        <Text style={{ color: "red" }}> *</Text>
+      </Text>
       {options.map((option) => (
         <TouchableOpacity
           key={option.value}
@@ -33,9 +42,8 @@ const MultipleChoice = ({ options, selectedOption, onSelect }) => {
 
 const styles = StyleSheet.create({
   label: {
-    fontSize: 16,
+    fontSize: 25,
     marginVertical: 10,
-    fontWeight: "bold",
   },
   option: {
     flexDirection: "row",
@@ -59,11 +67,12 @@ const styles = StyleSheet.create({
   },
   optionText: {
     marginLeft: 10,
-    fontSize: 14,
+    fontSize: 20,
+    flexWrap: "wrap",
   },
   selectedText: {
     color: "#1E90FF",
-    fontWeight: "bold",
+    fontWeight: "condensedBold",
   },
 });
 
diff --git a/src/components/NextButton.js b/src/components/NextButton.js
index 26a4bc5..7a3cd9d 100644
--- a/src/components/NextButton.js
+++ b/src/components/NextButton.js
@@ -3,8 +3,7 @@ import { StyleSheet, Text, View, Image } from "react-native";
 export default function NextButton() {
   return (
     <View style={styles.back}>
-      <Text>{"\n\n\n"}</Text>
-      <Text style={styles.backText}>Next</Text>
+      <Text style={styles.backText}>{"Next"}</Text>
       <Image
         source={require("./../assets/caret-left.png")}
         style={styles.caret}
@@ -17,11 +16,10 @@ const styles = StyleSheet.create({
   back: {
     flexDirection: "row",
     alignItems: "center",
-    justifyContent: "center",
-    paddingLeft: "5%",
+    justifyContent: "flex-end",
     borderRadius: 15,
-    height: 59,
-    width: 114,
+    height: 60,
+    width: 120,
     backgroundColor: "black",
   },
 
diff --git a/src/components/TextField.js b/src/components/TextField.js
index be34b1f..ce1bfaf 100644
--- a/src/components/TextField.js
+++ b/src/components/TextField.js
@@ -1,29 +1,38 @@
 import { StyleSheet, Text, TextInput, View } from "react-native";
 
-export default function TextField(props) {
+export default function TextField({
+  title,
+  subtitle = "",
+  setText,
+  keyboardType,
+  borderColor = "black",
+}) {
   return (
     // TODO
-    <View style={styles.container}>
-      <Text>
-        {props.title}
-        <Text style={styles.red}>*</Text>
+    <View>
+      <Text style={{ fontSize: 25 }}>
+        <Text>{title}</Text>
+        <Text style={{ color: "red" }}> *</Text>
       </Text>
-      <TextInput style={styles.inputField}></TextInput>
+      <Text style={{ fontSize: 1 }}>{"\n"}</Text>
+      <Text style={{ fontSize: 20, color: "#707070" }}>{subtitle}</Text>
+      <TextInput
+        style={[styles.inputField, { borderColor: borderColor }]}
+        onChangeText={(text) => setText(text)}
+        keyboardType={keyboardType}
+      ></TextInput>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   inputField: {
+    height: 50,
     borderRadius: 15,
     borderWidth: 3,
-    flexGrow: 0.5,
-    textAlignVertical: "top",
-  },
-  red: {
-    color: "red",
-  },
-  container: {
-    flexGrow: 1,
+    fontSize: 30,
+    textAlign: "center",
+    marginBottom: 20,
+    paddingHorizontal: "10%",
   },
 });
diff --git a/src/screens/ContactInfoScreen.js b/src/screens/ContactInfoScreen.js
deleted file mode 100644
index 5ab8780..0000000
--- a/src/screens/ContactInfoScreen.js
+++ /dev/null
@@ -1,100 +0,0 @@
-import {
-  Pressable,
-  View,
-  SafeAreaView,
-  KeyboardAvoidingView,
-  StyleSheet,
-  Text,
-} from "react-native";
-import BackButton from "../components/BackButton";
-import TextField from "../components/TextField";
-import NextButton from "../components/NextButton";
-
-export default function ContactInfoScreen() {
-  return (
-    // TODO
-    <SafeAreaView style={styles.container}>
-      <View style={styles.backButton}>
-        <Pressable>
-          <BackButton />
-        </Pressable>
-      </View>
-
-      <View style={styles.header}>
-        <Text style={[styles.heading, { textAlign: "center" }]}>
-          Contact Info
-        </Text>
-        <Text style={[styles.instructions, { textAlign: "center" }]}>
-          Please fill in the following details about the person who will be
-          performing at the concert.
-        </Text>
-      </View>
-      <KeyboardAvoidingView style={styles.body} behavior="height">
-        <View style={styles.form}>
-          <TextField
-            style={styles.field}
-            title="Performer's Full Name "
-          ></TextField>
-          <TextField
-            style={styles.field}
-            title="City of Residence "
-          ></TextField>
-          <TextField style={styles.field} title="Phone Number "></TextField>
-          <TextField style={styles.field} title="Performer's Age "></TextField>
-        </View>
-        <Pressable style={styles.nextButton}>
-          <NextButton />
-        </Pressable>
-      </KeyboardAvoidingView>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    paddingVertical: "7%",
-    display: "flex",
-    alignItems: "stretch",
-    flexDirection: "column",
-    flex: 1,
-    minHeight: "100%",
-  },
-  body: {
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "space-between",
-    flex: 3,
-    alignItems: "stretch",
-    paddingHorizontal: "8%",
-  },
-  form: {
-    display: "flex",
-    alignItems: "stretch",
-    flex: 6,
-  },
-  heading: {
-    fontSize: 64,
-    fontWeight: "condensedBold",
-  },
-  header: {
-    alignItems: "center",
-    paddingHorizontal: "5%",
-    flex: 1,
-  },
-  backButton: {
-    alignSelf: "flex-start",
-  },
-  instructions: {
-    fontSize: 20,
-    flexWrap: "wrap",
-  },
-  field: {
-    flex: 1,
-    backgroundColor: "blue",
-  },
-  nextButton: {
-    alignSelf: "flex-end",
-    flex: 2,
-    justifyContent: "flex-end",
-  },
-});
diff --git a/src/screens/PerformanceDetailsScreen.js b/src/screens/PerformanceDetailsScreen.js
deleted file mode 100644
index 3d9b3c5..0000000
--- a/src/screens/PerformanceDetailsScreen.js
+++ /dev/null
@@ -1,61 +0,0 @@
-// PerformanceDetailsScreen.js
-import React, { useState } from "react";
-import { View, StyleSheet, ScrollView, Button } from "react-native";
-import MultipleChoice from "../components/MultipleChoice";
-import TextField from "../components/TextField";
-
-const PerformanceDetailsScreen = () => {
-  const [performanceType, setPerformanceType] = useState("individual");
-  const [timeLimit, setTimeLimit] = useState("");
-  const [recordingLink, setRecordingLink] = useState("");
-
-  const performanceOptions = [
-    { label: "Individual performance only", value: "individual" },
-    {
-      label: "Individual performance and music instrument presentation",
-      value: "individualPresentation",
-    },
-    { label: "Group performance only", value: "group" },
-    {
-      label: "Group performance and music instrument presentation",
-      value: "groupPresentation",
-    },
-    {
-      label: "Library Band Ensemble (Band, Orchestra, or Choir)",
-      value: "library",
-    },
-  ];
-
-  return (
-    <ScrollView contentContainerStyle={styles.container}>
-      <MultipleChoice
-        options={performanceOptions}
-        selectedOption={performanceType}
-        onSelect={setPerformanceType}
-      />
-      <TextField
-        title="Length of Performance"
-        placeholder="Time Limit: X minutes"
-        value={timeLimit}
-        onChangeText={setTimeLimit}
-      />
-      <TextField
-        title="Recording Link"
-        placeholder="Share to YouTube / Google Drive"
-        value={recordingLink}
-        onChangeText={setRecordingLink}
-      />
-      <Button title="Next" onPress={() => {}} />
-    </ScrollView>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flexGrow: 1,
-    padding: 20,
-    backgroundColor: "#fff",
-  },
-});
-
-export default PerformanceDetailsScreen;
diff --git a/src/screens/SignInScreen.js b/src/screens/SignInScreen.js
index c90ff86..31f1beb 100644
--- a/src/screens/SignInScreen.js
+++ b/src/screens/SignInScreen.js
@@ -1,133 +1,134 @@
-import {
-  StyleSheet,
-  Text,
-  View,
-  SafeAreaView,
-  Pressable,
-  Image,
-} from "react-native";
+// import {
+//   StyleSheet,
+//   Text,
+//   View,
+//   SafeAreaView,
+//   Pressable,
+//   Image,
+// } from "react-native";
 
-import {
-  GoogleSignin,
-  statusCodes,
-  isErrorWithCode,
-} from "@react-native-google-signin/google-signin";
+// import {
+//   GoogleSignin,
+//   statusCodes,
+//   isErrorWithCode,
+// } from "@react-native-google-signin/google-signin";
 
-import BackButton from "../components/BackButton";
+// import BackButton from "../components/BackButton";
 
-GoogleSignin.configure({
-  webClientId:
-    "761199370622-3r5phtt6a1s6lm6554htodbk8u4k9p8f.apps.googleusercontent.com",
-  iosClientId:
-    "761199370622-qdq0afvq19r47p34rgjsso84leub5dlj.apps.googleusercontent.com",
-});
+// GoogleSignin.configure({
+//   webClientId:
+//     "761199370622-3r5phtt6a1s6lm6554htodbk8u4k9p8f.apps.googleusercontent.com", // client ID of type WEB for your server. Required to get the `idToken` on the user object, and for offline access.
+//   scopes: ["https://www.googleapis.com/auth/drive.readonly"], // what API you want to access on behalf of the user, default is email and profile
+//   iosClientId:
+//     "761199370622-qdq0afvq19r47p34rgjsso84leub5dlj.apps.googleusercontent.com", // [iOS] if you want to specify the client ID of type iOS (otherwise, it is taken from GoogleService-Info.plist)
+// });
 
-export default function SignInScreen() {
-  return (
-    <SafeAreaView style={styles.container}>
-      <Pressable>
-        <BackButton />
-      </Pressable>
-      <View style={styles.body}>
-        <Text style={styles.title}>Sign In</Text>
-        <Text style={styles.paragraph}>
-          {"\n"}
-          {"Thank you for choosing to help\n"}
-          {"make our volunteer concerts a\n"}
-          {"success! To begin, please sign\n"}
-          {"in using your Google account.\n"}
-        </Text>
+// export default function SignInScreen() {
+//   return (
+//     <SafeAreaView style={styles.container}>
+//       <Pressable>
+//         <BackButton />
+//       </Pressable>
+//       <View style={styles.body}>
+//         <Text style={styles.title}>Sign In</Text>
+//         <Text style={styles.paragraph}>
+//           {"\n"}
+//           {"Thank you for choosing to help\n"}
+//           {"make our volunteer concerts a\n"}
+//           {"success! To begin, please sign\n"}
+//           {"in using your Google account.\n"}
+//         </Text>
 
-        <Pressable
-          style={[styles.OAuth, styles.GoogleOAuth]}
-          onPress={async () => {
-            try {
-              await GoogleSignin.hasPlayServices();
-              const userInfo = await GoogleSignin.signIn();
-              console.log("success");
-              console.log(JSON.stringify(userInfo, null, 2));
-            } catch (error) {
-              if (isErrorWithCode(error)) {
-                switch (error.code) {
-                  case statusCodes.SIGN_IN_CANCELLED:
-                    // user cancelled the login flow
-                    console.log("Cancelled");
-                    break;
-                  case statusCodes.IN_PROGRESS:
-                    // operation (eg. sign in) already in progress
-                    console.log("In progress");
-                    break;
-                  case statusCodes.PLAY_SERVICES_NOT_AVAILABLE:
-                    // play services not available or outdated
-                    console.log("Play services not available or outdated");
-                    break;
-                  case statusCodes.SIGN_IN_REQUIRED:
-                    console.log("Sign in required");
-                    break;
-                  default:
-                    console.log(error);
-                    break;
-                  // some other error happened
-                }
-              } else {
-                console.log("WOAH This is outta my control");
-                // an error that's not related to google sign in occurred
-              }
-            }
-          }}
-        >
-          <Image
-            style={styles.OAuthLogo}
-            source={require("../assets/google.png")}
-          />
-          <Text style={[styles.OAuthText]}> Sign in with Google</Text>
-        </Pressable>
-      </View>
-    </SafeAreaView>
-  );
-}
+//         <Pressable
+//           style={[styles.OAuth, styles.GoogleOAuth]}
+//           onPress={async () => {
+//             try {
+//               await GoogleSignin.hasPlayServices();
+//               const userInfo = await GoogleSignin.signIn();
+//               console.log("success");
+//               console.log(JSON.stringify(userInfo, null, 2));
+//             } catch (error) {
+//               if (isErrorWithCode(error)) {
+//                 switch (error.code) {
+//                   case statusCodes.SIGN_IN_CANCELLED:
+//                     // user cancelled the login flow
+//                     console.log("Cancelled");
+//                     break;
+//                   case statusCodes.IN_PROGRESS:
+//                     // operation (eg. sign in) already in progress
+//                     console.log("In progress");
+//                     break;
+//                   case statusCodes.PLAY_SERVICES_NOT_AVAILABLE:
+//                     // play services not available or outdated
+//                     console.log("Play services not available or outdated");
+//                     break;
+//                   case statusCodes.SIGN_IN_REQUIRED:
+//                     console.log("Sign in required");
+//                     break;
+//                   default:
+//                     console.log(error);
+//                     break;
+//                   // some other error happened
+//                 }
+//               } else {
+//                 console.log("WOAH This is outta my control");
+//                 // an error that's not related to google sign in occurred
+//               }
+//             }
+//           }}
+//         >
+//           <Image
+//             style={styles.OAuthLogo}
+//             source={require("../assets/google.png")}
+//           />
+//           <Text style={[styles.OAuthText]}> Sign in with Google</Text>
+//         </Pressable>
+//       </View>
+//     </SafeAreaView>
+//   );
+// }
 
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: "#fff",
-    padding: "1%",
-  },
+// const styles = StyleSheet.create({
+//   container: {
+//     backgroundColor: "#fff",
+//     padding: "1%",
+//   },
 
-  body: {
-    alignItems: "center",
-    justifyContent: "center",
-  },
+//   body: {
+//     alignItems: "center",
+//     justifyContent: "center",
+//   },
 
-  title: {
-    fontWeight: "bold",
-    fontSize: 45,
-  },
+//   title: {
+//     fontWeight: "bold",
+//     fontSize: 45,
+//   },
 
-  paragraph: {
-    fontSize: 18,
-  },
+//   paragraph: {
+//     fontSize: 18,
+//   },
 
-  OAuth: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    width: 300,
-    height: 50,
-    borderRadius: 15,
-  },
+//   OAuth: {
+//     flexDirection: "row",
+//     alignItems: "center",
+//     justifyContent: "center",
+//     width: 300,
+//     height: 50,
+//     borderRadius: 15,
+//   },
 
-  OAuthLogo: {
-    width: 40,
-    height: 40,
-  },
+//   OAuthLogo: {
+//     width: 40,
+//     height: 40,
+//   },
 
-  OAuthText: {
-    color: "#fff",
-    fontSize: 25,
-  },
+//   OAuthText: {
+//     color: "#fff",
+//     fontSize: 25,
+//   },
 
-  GoogleOAuth: {
-    backgroundColor: "#353535",
-    color: "#fff",
-  },
-});
+//   GoogleOAuth: {
+//     backgroundColor: "#353535",
+//     color: "#fff",
+//   },
+// });
diff --git a/src/screens/VolunteerFormScreen.js b/src/screens/VolunteerFormScreen.js
new file mode 100644
index 0000000..174cd81
--- /dev/null
+++ b/src/screens/VolunteerFormScreen.js
@@ -0,0 +1,285 @@
+import { useState } from "react";
+
+import {
+  Pressable,
+  View,
+  SafeAreaView,
+  ScrollView,
+  StyleSheet,
+  Text,
+  Dimensions,
+  KeyboardAvoidingView,
+  Platform,
+} from "react-native";
+
+import BackButton from "../components/BackButton";
+import TextField from "../components/TextField";
+import NextButton from "../components/NextButton";
+import MultipleChoice from "../components/MultipleChoice";
+
+export default function VolunteerFormScreen() {
+  const [fullName, setFullName] = useState("");
+  const [city, setCity] = useState("");
+  const [phoneNumber, setPhoneNumber] = useState("");
+  const [age, setAge] = useState(0);
+  const [musicPiece, setMusicPiece] = useState("");
+  const [composer, setComposer] = useState("");
+  const [instrument, setInstrument] = useState("");
+
+  const [performanceType, setPerformanceType] = useState("");
+  const [timeLimit, setTimeLimit] = useState(0);
+  const [length, setLength] = useState(0);
+  const [recordingLink, setRecordingLink] = useState("");
+
+  const performanceOptions = [
+    { label: "Individual performance only", value: "individual" },
+    {
+      label: "Individual performance and music instrument presentation",
+      value: "individualPresentation",
+    },
+    { label: "Group performance only", value: "group" },
+    {
+      label: "Group performance and music instrument presentation",
+      value: "groupPresentation",
+    },
+    {
+      label: "Library Band Ensemble (Band, Orchestra, or Choir)",
+      value: "library",
+    },
+  ];
+
+  const onSelectionChange = (type) => {
+    setPerformanceType(type);
+    console.log("change");
+
+    switch (type) {
+      case "individual":
+        setTimeLimit(8);
+        break;
+
+      case "individualPresentation":
+        setTimeLimit(12);
+        break;
+
+      case "group":
+        setTimeLimit(15);
+        break;
+
+      case "groupPresentation":
+        setTimeLimit(20);
+        break;
+
+      case "library":
+        setTimeLimit(60);
+        break;
+
+      default:
+        throw new Error(
+          "Value " +
+            type +
+            " is an invalid performanceType, or is not added to PerformanceDetailsScreen",
+        );
+    }
+
+    console.log(timeLimit);
+  };
+
+  const [borderColors, setBorderColors] = useState([
+    "black",
+    "black",
+    "black",
+    "black",
+    "black",
+    "black",
+    "black",
+    "black",
+    "black",
+  ]);
+
+  const [performanceTypeColor, setPerformanceTypeColor] = useState("black");
+
+  const validate = () => {
+    const variables = [
+      city,
+      phoneNumber,
+      age,
+      musicPiece,
+      composer,
+      instrument,
+    ];
+
+    console.log(fullName.trim());
+    console.log(city.trim());
+    console.log(phoneNumber.trim());
+    console.log(age);
+    console.log(musicPiece.trim());
+    console.log(composer.trim());
+    console.log(instrument.trim());
+    console.log(performanceType.trim());
+    console.log(timeLimit);
+    console.log(length);
+    console.log(recordingLink.trim());
+
+    borderColors[0] = fullName.split(" ").length - 1 == 0 ? "red" : "black";
+    setPerformanceTypeColor(performanceType == "" ? "red" : "black");
+    borderColors[7] = length > timeLimit || length == 0 ? "red" : "black";
+
+    try {
+      let url = new URL(recordingLink);
+      borderColors[8] = "black";
+    } catch (error) {
+      borderColors[8] = "red";
+      console.error(error);
+    }
+
+    let index = 1;
+
+    variables.forEach((variable) => {
+      borderColors[index] = variable == "0" || variable == 0 ? "red" : "black";
+      index++;
+    });
+
+    borderColors.forEach((color) => console.log(color));
+    setBorderColors([...borderColors]);
+  };
+
+  const [topHeight, setTopHeight] = useState(0);
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View
+        onLayout={(event) => {
+          const { x, y, width, height } = event.nativeEvent.layout;
+          setTopHeight(height);
+        }}
+      >
+        <Pressable>
+          <BackButton />
+        </Pressable>
+        <View style={styles.header}>
+          <Text style={styles.heading}>{"Volunteer Form"}</Text>
+          <Text style={styles.instructions}>
+            {"\n"}
+            {
+              "Please fill in the following details about the person who will be"
+            }
+            {"performing at the concert."}
+            {"\n\n"}
+          </Text>
+        </View>
+      </View>
+      <KeyboardAvoidingView
+        style={[
+          styles.body,
+          { height: Dimensions.get("window").height - topHeight - 60 - 10 },
+        ]}
+        behavior="padding"
+      >
+        <ScrollView>
+          <View style={styles.form}>
+            <TextField
+              title="Performer's Full Name "
+              setText={(text) => setFullName(text)}
+              keyboardType="default"
+              borderColor={borderColors[0]}
+            ></TextField>
+            <TextField
+              title="City of Residence "
+              setText={(text) => setCity(text)}
+              keyboardType="default"
+              borderColor={borderColors[1]}
+            ></TextField>
+            <TextField
+              title="Phone Number "
+              setText={(text) => setPhoneNumber(text)}
+              keyboardType="phone-pad"
+              borderColor={borderColors[2]}
+            ></TextField>
+            <TextField
+              title="Performer's Age "
+              setText={(text) => setAge(text)}
+              keyboardType="numeric"
+              borderColor={borderColors[3]}
+            ></TextField>
+            <TextField
+              title="Name of Music Piece "
+              setText={(text) => setMusicPiece(text)}
+              keyboardType="default"
+              borderColor={borderColors[4]}
+            ></TextField>
+            <TextField
+              title="Composer of Music Piece "
+              setText={(text) => setComposer(text)}
+              keyboardType="default"
+              borderColor={borderColors[5]}
+            ></TextField>
+            <TextField
+              title="Instrument Type "
+              setText={(text) => setInstrument(text)}
+              keyboardType="default"
+              borderColor={borderColors[6]}
+            ></TextField>
+            <MultipleChoice
+              title="Performance Type"
+              options={performanceOptions}
+              selectedOption={performanceType}
+              onSelect={(text) => onSelectionChange(text)}
+              color={performanceTypeColor}
+            />
+            <TextField
+              title={"Length of Performance (min)"}
+              subtitle={"Time Limit: " + timeLimit + " minutes"}
+              setText={(text) => setLength(text)}
+              keyboardType={"numeric"}
+              borderColor={borderColors[7]}
+            />
+            <TextField
+              title="Recording Link"
+              subtitle="Share to YouTube / Google Drive"
+              setText={(text) => setRecordingLink(text)}
+              keyboardType="url"
+              borderColor={borderColors[8]}
+            />
+          </View>
+          <Pressable style={styles.nextButton} onPress={() => validate()}>
+            <NextButton />
+          </Pressable>
+        </ScrollView>
+      </KeyboardAvoidingView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: "7%",
+    alignItems: "stretch",
+    flexDirection: "column",
+  },
+  body: {
+    flexDirection: "column",
+    justifyContent: "space-between",
+    alignItems: "stretch",
+    paddingHorizontal: "10%",
+  },
+  form: {
+    alignItems: "stretch",
+  },
+  heading: {
+    fontSize: 45,
+    fontWeight: "bold",
+  },
+  header: {
+    alignItems: "center",
+    textAlign: "center",
+    paddingHorizontal: "5%",
+  },
+  instructions: {
+    fontSize: 20,
+    flexWrap: "wrap",
+  },
+  nextButton: {
+    alignSelf: "flex-end",
+    justifyContent: "flex-end",
+  },
+});