diff --git a/App.js b/App.js
index 19e81fd..0b996c0 100644
--- a/App.js
+++ b/App.js
@@ -1,20 +1,21 @@
 import "@expo/metro-runtime";
-import { useState, useEffect } from "react";
-import { ActivityIndicator } from "react-native";
-import { StatusBar } from "expo-status-bar";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 import { NavigationContainer } from "@react-navigation/native";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
-import AsyncStorage from "@react-native-async-storage/async-storage";
+import { StatusBar } from "expo-status-bar";
+import { useEffect, useState } from "react";
+import { ActivityIndicator } from "react-native";
 
-import colors from "./src/constants/colors";
-import HomeScreen from "./src/screens/HomeScreen";
 import AccountScreen from "./src/screens/AccountScreen";
+import EmbeddedFormScreen from "./src/screens/EmbeddedFormScreen";
+import EndScreen from "./src/screens/EndScreen";
+import HomeScreen from "./src/screens/HomeScreen";
 import SignInScreen from "./src/screens/SignInScreen";
 import VolunteerFormScreen from "./src/screens/VolunteerFormScreen";
-import EmbeddedFormScreen from "./src/screens/EmbeddedFormScreen";
 import VolunteerOpportunityScreen from "./src/screens/VolunteerOpportunityScreen";
-import EndScreen from "./src/screens/EndScreen";
+
 import HomeHeader from "./src/components/HomeHeader";
+import colors from "./src/constants/colors";
 import { alertError } from "./src/utils";
 
 const Stack = createNativeStackNavigator();
diff --git a/package-lock.json b/package-lock.json
index f4284c5..8bc75f3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,7 @@
         "react": "18.2.0",
         "react-native": "0.74.5",
         "react-native-animated-dots-carousel": "^1.0.2",
+        "react-native-date-picker": "^5.0.4",
         "react-native-document-picker": "^9.3.0",
         "react-native-fs": "^2.20.0",
         "react-native-gesture-handler": "~2.16.1",
@@ -12772,6 +12773,16 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-date-picker": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/react-native-date-picker/-/react-native-date-picker-5.0.4.tgz",
+      "integrity": "sha512-UycNfXGd4ipgdU2a+oZGj7h1nvp8Gz49f/Ko+YdWh6nrBKB49MEp0n9eF1QngbxMKqdK0AdY4udb4IdVVWji4g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">= 17.0.1",
+        "react-native": ">= 0.64.3"
+      }
+    },
     "node_modules/react-native-document-picker": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/react-native-document-picker/-/react-native-document-picker-9.3.0.tgz",
diff --git a/package.json b/package.json
index 74b6406..2038359 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "react": "18.2.0",
     "react-native": "0.74.5",
     "react-native-animated-dots-carousel": "^1.0.2",
+    "react-native-date-picker": "^5.0.4",
     "react-native-document-picker": "^9.3.0",
     "react-native-fs": "^2.20.0",
     "react-native-gesture-handler": "~2.16.1",
diff --git a/src/components/CarouselPage.js b/src/components/CarouselPage.js
index 0fcdcc0..205c9b6 100644
--- a/src/components/CarouselPage.js
+++ b/src/components/CarouselPage.js
@@ -1,10 +1,11 @@
 import { useState } from "react";
-import { Alert, Pressable, StyleSheet, View, Dimensions } from "react-native";
+import { Alert, Dimensions, Pressable, StyleSheet, View } from "react-native";
 import AnimatedDotsCarousel from "react-native-animated-dots-carousel";
-import VolunteerOpportunity from "./VolunteerOpportunity";
 import Carousel from "react-native-reanimated-carousel";
+
 import Heading from "./Heading";
 import RefreshButton from "./RefreshButton";
+import VolunteerOpportunity from "./VolunteerOpportunity";
 
 export default function CarouselPage({ navigation, data, onRefresh }) {
   const [dotIndex, setDotIndex] = useState(0);
diff --git a/src/components/CheckBoxQuery.js b/src/components/CheckBoxQuery.js
index 663ec94..62c325c 100644
--- a/src/components/CheckBoxQuery.js
+++ b/src/components/CheckBoxQuery.js
@@ -1,5 +1,6 @@
-import { StyleSheet, Text, View } from "react-native";
 import { Checkbox } from "expo-checkbox";
+import { StyleSheet, Text, View } from "react-native";
+
 import colors from "../constants/colors";
 
 export default function CheckBoxQuery({ question, state, setState }) {
@@ -13,18 +14,23 @@ export default function CheckBoxQuery({ question, state, setState }) {
         }));
       }}
     >
-      <Text style={styles.header}>
+      <Text
+        style={[
+          styles.header,
+          { color: state.valid ? "black" : colors.danger },
+        ]}
+      >
         {question}
         <Text style={{ color: "red" }}>{" *"}</Text>
       </Text>
       <View style={styles.checkBoxContainer}>
         <Checkbox
           color={"#0d79ff"}
-          value={state.value == true}
+          value={state.value == "Yes"}
           onValueChange={() => {
             setState((prevState) => ({
               ...prevState,
-              value: true,
+              value: "Yes",
             }));
           }}
           style={{ borderRadius: 20, transform: [{ scale: 1.3 }] }}
@@ -40,11 +46,11 @@ export default function CheckBoxQuery({ question, state, setState }) {
         <Text> </Text>
         <Checkbox
           color={"#0d79ff"}
-          value={state.value == false}
+          value={state.value == "No"}
           onValueChange={() => {
             setState((prevState) => ({
               ...prevState,
-              value: false,
+              value: "No",
             }));
           }}
           style={{ borderRadius: 20, transform: [{ scale: 1.3 }] }}
@@ -66,13 +72,10 @@ const styles = StyleSheet.create({
   container: {
     flexGrow: 1,
     marginBottom: 25,
-    justifyContent: "center",
-    alignItems: "center",
-    alignSelf: "center",
+    alignSelf: "flex-start",
   },
   checkBoxContainer: {
     flexDirection: "row",
-    alignItems: "center",
     paddingTop: 15,
   },
   text: {
diff --git a/src/components/FullWidthButton.js b/src/components/FullWidthButton.js
index 4cdd0e9..65113ce 100644
--- a/src/components/FullWidthButton.js
+++ b/src/components/FullWidthButton.js
@@ -1,4 +1,4 @@
-import { StyleSheet, Text, Pressable } from "react-native";
+import { Pressable, StyleSheet, Text } from "react-native";
 
 export default function FullWidthButton({
   buttonStyle,
diff --git a/src/components/Heading.js b/src/components/Heading.js
index e8b3e28..723dc98 100644
--- a/src/components/Heading.js
+++ b/src/components/Heading.js
@@ -1,11 +1,11 @@
 import { StyleSheet, Text } from "react-native";
 
 export default function Heading({ children }) {
-  return <Text style={styles.heading}>{children}</Text>;
+  return <Text style={styles.container}>{children}</Text>;
 }
 
 const styles = StyleSheet.create({
-  heading: {
+  container: {
     fontSize: 18,
     fontWeight: "bold",
     marginBottom: 5,
diff --git a/src/components/HomeHeader.js b/src/components/HomeHeader.js
index 8469802..a59779e 100644
--- a/src/components/HomeHeader.js
+++ b/src/components/HomeHeader.js
@@ -1,13 +1,13 @@
-import { useState, useEffect } from "react";
+import { LinearGradient } from "expo-linear-gradient";
+import { useEffect, useState } from "react";
 import {
+  ActivityIndicator,
   Image,
-  Text,
-  StyleSheet,
   Pressable,
   SafeAreaView,
-  ActivityIndicator,
+  StyleSheet,
+  Text,
 } from "react-native";
-import { LinearGradient } from "expo-linear-gradient";
 
 import colors from "../constants/colors";
 import { getUser } from "../utils";
diff --git a/src/components/MultiSelect.js b/src/components/MultiSelect.js
new file mode 100644
index 0000000..6a9945b
--- /dev/null
+++ b/src/components/MultiSelect.js
@@ -0,0 +1,77 @@
+import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
+import { useState } from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+
+export default function MultiSelect({ state, setState, title, options }) {
+  const [selected, setSelected] = useState(
+    new Array(options.length).fill(false),
+  );
+
+  return (
+    <View
+      onLayout={(event) => {
+        setState((prevState) => ({
+          ...prevState,
+          y: event.nativeEvent.layout.y,
+        }));
+      }}
+      style={styles.container}
+    >
+      <Text style={[styles.title, { color: state.valid ? "black" : "red" }]}>
+        {title}
+      </Text>
+      {options.map((option, index) => (
+        <Pressable
+          key={index * 4}
+          onPress={() => {
+            setState((previous) => {
+              const newValue = selected[index]
+                ? previous.value.filter((item) => item !== option)
+                : [...previous.value, option];
+              return { ...previous, value: newValue };
+            });
+
+            setSelected((previous) => {
+              const next = [...previous]; // Create a new copy of the array
+              next[index] = !previous[index];
+              return next;
+            });
+          }}
+        >
+          <View key={index * 4 + 1} style={{ flexDirection: "row" }}>
+            <MaterialCommunityIcons
+              key={index * 4 + 2}
+              name={
+                selected[index] ? "checkbox-marked" : "checkbox-blank-outline"
+              }
+              size={24}
+              color={selected[index] ? "blue" : "black"}
+            />
+            <Text key={index * 4 + 3} style={styles.optionText}>
+              {option}
+            </Text>
+          </View>
+        </Pressable>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 20,
+  },
+
+  title: {
+    fontSize: 18,
+    fontWeight: "600",
+    marginBottom: 10,
+    flexWrap: "wrap",
+  },
+
+  optionText: {
+    fontSize: 16,
+    marginLeft: 10,
+    flexWrap: "wrap",
+  },
+});
diff --git a/src/components/MultipleChoice.js b/src/components/MultipleChoice.js
index 01c61c5..687bfbc 100644
--- a/src/components/MultipleChoice.js
+++ b/src/components/MultipleChoice.js
@@ -1,4 +1,4 @@
-import { View, Text, Pressable, StyleSheet } from "react-native";
+import { Pressable, StyleSheet, Text, View } from "react-native";
 import colors from "../constants/colors";
 
 export default function MultipleChoice({
@@ -18,28 +18,28 @@ export default function MultipleChoice({
         }));
       }}
     >
-      <Text style={styles.label}>
+      <Text style={styles.title}>
         <Text style={{ color: state.valid ? "black" : colors.danger }}>
           {title}
         </Text>
         <Text style={{ color: "red" }}> *</Text>
       </Text>
-      {mapObject(options, (key) => (
+      {options.map((value) => (
         <Pressable
-          key={key}
+          key={value}
           style={styles.option}
-          onPress={() => onSelect(key)}
+          onPress={() => onSelect(value)}
         >
           <View style={styles.radioCircle}>
-            {state.value === key && <View style={styles.selectedRb} />}
+            {state.value === value && <View style={styles.selectedRb} />}
           </View>
           <Text
             style={[
               styles.optionText,
-              state.value === key && styles.selectedText,
+              state.value === value && styles.selectedText,
             ]}
           >
-            {key}
+            {value}
           </Text>
         </Pressable>
       ))}
@@ -48,7 +48,7 @@ export default function MultipleChoice({
 }
 
 const styles = StyleSheet.create({
-  label: {
+  title: {
     fontSize: 18,
     fontWeight: "600",
     marginBottom: 10,
@@ -83,11 +83,3 @@ const styles = StyleSheet.create({
     fontWeight: "condensedBold",
   },
 });
-
-function mapObject(obj, callback) {
-  const items = [];
-  for (const key in obj) {
-    items.push(callback(key));
-  }
-  return items;
-}
diff --git a/src/components/NextButton.js b/src/components/NextButton.js
index 23ffcbb..ee02333 100644
--- a/src/components/NextButton.js
+++ b/src/components/NextButton.js
@@ -1,9 +1,9 @@
-import { StyleSheet, Text, View, Image } from "react-native";
 import Feather from "@expo/vector-icons/Feather";
+import { StyleSheet, Text, View } from "react-native";
 
 export default function NextButton() {
   return (
-    <View style={styles.back}>
+    <View style={styles.container}>
       <Text style={styles.nextText}>{"Next"}</Text>
       <Feather name="chevron-right" size={32} color="white" />
     </View>
@@ -11,7 +11,7 @@ export default function NextButton() {
 }
 
 const styles = StyleSheet.create({
-  back: {
+  container: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
diff --git a/src/components/OtherOpportunities.js b/src/components/OtherOpportunities.js
index 89b9ad5..4da7565 100644
--- a/src/components/OtherOpportunities.js
+++ b/src/components/OtherOpportunities.js
@@ -1,17 +1,21 @@
-import { View, Text, StyleSheet, Image, Pressable, Alert } from "react-native";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+
 import Entypo from "@expo/vector-icons/Entypo";
-import Ionicons from "@expo/vector-icons/Ionicons";
 import FontAwesome from "@expo/vector-icons/FontAwesome";
+import Ionicons from "@expo/vector-icons/Ionicons";
+import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
 
-export default function OtherOpportunities() {
+export default function OtherOpportunities({ navigation }) {
   return (
-    <View style={styles.cardContainer}>
+    <View style={styles.container}>
       <Pressable
         style={[styles.card, styles.first]}
         onPress={() =>
-          Alert.alert(
-            "Request a Concert is not available yet. Please check back soon for more updates!",
-          )
+          navigation.navigate("Volunteer Form", {
+            title: "Request a Concert",
+            location: null,
+            date: null,
+          })
         }
       >
         <Entypo
@@ -28,6 +32,30 @@ export default function OtherOpportunities() {
           style={styles.arrow}
         />
       </Pressable>
+      <Pressable
+        style={styles.card}
+        onPress={() =>
+          navigation.navigate("Volunteer Form", {
+            title: "Audacity Dance Club",
+            location: null,
+            date: null,
+          })
+        }
+      >
+        <MaterialCommunityIcons
+          name="human-female-dance"
+          size={18}
+          color="black"
+          style={styles.icon}
+        />
+        <Text style={styles.text}>Sign Up for Audacity Dance Club</Text>
+        <FontAwesome
+          name="chevron-right"
+          size={20}
+          color="black"
+          style={styles.arrow}
+        />
+      </Pressable>
       <View style={styles.divider} />
       <View style={[styles.card, styles.last]}>
         <Ionicons name="gift" size={18} color="black" style={styles.icon} />
@@ -38,7 +66,7 @@ export default function OtherOpportunities() {
 }
 
 const styles = StyleSheet.create({
-  cardContainer: {
+  container: {
     backgroundColor: "#f5f5f5",
     borderRadius: 10,
     marginBottom: 10,
diff --git a/src/components/Profile.js b/src/components/Profile.js
index 5a1216d..f5bc00c 100644
--- a/src/components/Profile.js
+++ b/src/components/Profile.js
@@ -1,5 +1,5 @@
-import { useState, useEffect } from "react";
-import { StyleSheet, Text, View, Image, ActivityIndicator } from "react-native";
+import { useEffect, useState } from "react";
+import { ActivityIndicator, Image, StyleSheet, Text, View } from "react-native";
 
 import { getUser } from "../utils";
 
@@ -11,7 +11,7 @@ export default function Profile() {
   }, []);
 
   return (
-    <View style={styles.background}>
+    <View style={styles.container}>
       {user?.photo ? (
         <Image
           style={styles.image}
@@ -29,7 +29,7 @@ export default function Profile() {
 }
 
 const styles = StyleSheet.create({
-  background: {
+  container: {
     flexDirection: "row",
     alignItems: "center",
     backgroundColor: "#f5f5f5", // Light grey background color
diff --git a/src/components/RefreshButton.js b/src/components/RefreshButton.js
index 92b063d..ed19c14 100644
--- a/src/components/RefreshButton.js
+++ b/src/components/RefreshButton.js
@@ -1,6 +1,5 @@
-import { StyleSheet, Text, View, Image } from "react-native";
-import colors from "../constants/colors";
 import Feather from "@expo/vector-icons/Feather";
+import { View } from "react-native";
 
 export default function SignUpButton() {
   return (
@@ -9,5 +8,3 @@ export default function SignUpButton() {
     </View>
   );
 }
-
-const styles = StyleSheet.create({});
diff --git a/src/components/SignUpButton.js b/src/components/SignUpButton.js
index 4148042..90f91f5 100644
--- a/src/components/SignUpButton.js
+++ b/src/components/SignUpButton.js
@@ -1,10 +1,10 @@
-import { StyleSheet, Text, View, Image } from "react-native";
-import colors from "../constants/colors";
 import FontAwesome from "@expo/vector-icons/FontAwesome";
+import { StyleSheet, Text, View } from "react-native";
+import colors from "../constants/colors";
 
 export default function SignUpButton() {
   return (
-    <View style={styles.signUp}>
+    <View style={styles.container}>
       <Text>{"\n\n\n"}</Text>
       <Text style={styles.signUpText}>Sign Up</Text>
       <FontAwesome name="chevron-right" size={20} color="white" />
@@ -13,7 +13,7 @@ export default function SignUpButton() {
 }
 
 const styles = StyleSheet.create({
-  signUp: {
+  container: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
diff --git a/src/components/Tag.js b/src/components/Tag.js
index 770eca4..bee59d5 100644
--- a/src/components/Tag.js
+++ b/src/components/Tag.js
@@ -1,15 +1,15 @@
-import { StyleSheet, Text, View, Image } from "react-native";
+import { StyleSheet, Text, View } from "react-native";
 
 export default function Tag(props) {
   return (
-    <View style={styles.back}>
+    <View style={styles.container}>
       <Text style={styles.tagText}>{props.text}</Text>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
-  back: {
+  container: {
     alignItems: "center",
     justifyContent: "center",
     borderRadius: 15,
diff --git a/src/components/TextField.js b/src/components/TextField.js
index 6ea1210..13c74cb 100644
--- a/src/components/TextField.js
+++ b/src/components/TextField.js
@@ -8,6 +8,8 @@ export default function TextField({
   maxLength = 32000, // Limit of chars on Google Forms
   state,
   setState,
+  extraMargin = true,
+  valid = null,
 }) {
   return (
     <View
@@ -19,8 +21,14 @@ export default function TextField({
       }}
     >
       <Text style={styles.heading}>
-        <Text>{title}</Text>
-        {title.slice(-10) == "(optional)" ? null : (
+        <Text
+          style={{
+            color: !state.valid || valid == false ? colors.danger : "black",
+          }}
+        >
+          {title}
+        </Text>
+        {title == "" || title.slice(-10) == "(optional)" ? null : (
           <Text style={{ color: "red" }}> *</Text>
         )}
       </Text>
@@ -28,7 +36,10 @@ export default function TextField({
       <TextInput
         style={[
           styles.inputField,
-          { borderColor: state.valid ? "black" : colors.danger },
+          {
+            borderColor: state.valid ? "black" : colors.danger,
+            marginBottom: extraMargin ? 20 : 0,
+          },
         ]}
         onChangeText={(text) => {
           setState((prevState) => ({
@@ -61,6 +72,5 @@ const styles = StyleSheet.create({
     borderWidth: 1.5,
     borderColor: colors.secondary,
     textAlign: "center",
-    marginBottom: 20,
   },
 });
diff --git a/src/components/TimeSlotList.js b/src/components/TimeSlotList.js
new file mode 100644
index 0000000..ae56710
--- /dev/null
+++ b/src/components/TimeSlotList.js
@@ -0,0 +1,406 @@
+import { useState } from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import DatePicker from "react-native-date-picker";
+
+import EvilIcons from "@expo/vector-icons/EvilIcons";
+import Ionicons from "@expo/vector-icons/Ionicons";
+
+import colors from "../constants/colors";
+
+function timeFormatter(date) {
+  const hour = date.getHours() % 12 == 0 ? 12 : date.getHours() % 12;
+  const minute = (date.getMinutes() < 10 ? "0" : "") + date.getMinutes();
+  const period = date.getHours() >= 12 ? "PM" : "AM";
+  return `${hour}:${minute} ${period}`;
+}
+
+function dateFormatter(date) {
+  const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+  return `${days[date.getDay()]} ${date.getMonth() + 1}/${date.getDate() < 10 ? "0" + date.getDate() : date.getDate()}/${date.getFullYear() - 2000} ${timeFormatter(date)}`;
+}
+
+function timeCompare(hour1, minute1, hour2, minute2) {
+  if (hour1 < hour2) {
+    return -1;
+  } else if (hour1 > hour2) {
+    return 1;
+  } else {
+    if (minute1 < minute2) {
+      return -1;
+    } else if (minute1 > minute2) {
+      return 1;
+    } else {
+      return 0;
+    }
+  }
+}
+
+export class TimeSlot {
+  constructor(start = new Date(), end = new Date()) {
+    this.start = start;
+    this.end = end;
+    this.valid = true;
+  }
+
+  validate() {
+    const start_hour = this.start.getHours();
+    const start_minute = this.start.getMinutes();
+    const end_hour = this.end.getHours();
+    const end_minute = this.end.getMinutes();
+
+    if (this.start >= this.end) {
+      this.valid = false;
+    } else if (
+      timeCompare(start_hour, start_minute, 10, 30) < 0 ||
+      timeCompare(start_hour, start_minute, 17, 0) > 0
+    ) {
+      this.valid = false;
+    } else if (timeCompare(end_hour, end_minute, 18, 0) > 0) {
+      this.valid = false;
+    } else {
+      this.valid = true;
+    }
+
+    return this.valid;
+  }
+
+  toString() {
+    return `${dateFormatter(this.start)} - ${timeFormatter(this.end)}`;
+  }
+
+  compareTo(other) {
+    if (this.start < other.start) {
+      return -1;
+    } else if (this.start > other.start) {
+      return 1;
+    } else {
+      if (this.end < other.end) {
+        return -1;
+      } else if (this.end > other.end) {
+        return 1;
+      } else {
+        return 0;
+      }
+    }
+  }
+
+  render(state, setState, index, setIndex, setIsOpen, setIsAdded, setIsStart) {
+    return (
+      <View
+        key={index * 10}
+        style={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+          marginBottom: 10,
+          alignItems: "center",
+        }}
+      >
+        <View key={index * 10 + 1} style={{ flexDirection: "row" }}>
+          <Pressable
+            key={index * 10 + 2}
+            onPress={() => {
+              setIsOpen(true);
+              setIsAdded(false);
+              setIsStart(true);
+              setIndex(index);
+            }}
+          >
+            <Text
+              key={index * 10 + 3}
+              style={{
+                fontSize: 16,
+                textDecorationLine: "underline",
+                color: this.valid ? "black" : colors.danger,
+              }}
+            >
+              {dateFormatter(this.start)}
+            </Text>
+          </Pressable>
+          <Text key={index * 10 + 4} style={{ fontSize: 16 }}>
+            {" "}
+            -{" "}
+          </Text>
+          <Pressable
+            key={index * 10 + 5}
+            onPress={() => {
+              setIsOpen(true);
+              setIsAdded(false);
+              setIsStart(false);
+              setIndex(index);
+            }}
+          >
+            <Text
+              key={index * 10 + 6}
+              style={{
+                fontSize: 16,
+                textDecorationLine: "underline",
+                color: this.valid ? "black" : colors.danger,
+              }}
+            >
+              {timeFormatter(this.end)}
+            </Text>
+          </Pressable>
+        </View>
+        <RemoveButton
+          key={10 * index + 7}
+          state={state}
+          setState={setState}
+          index={index}
+        />
+      </View>
+    );
+  }
+}
+
+function RemoveButton({ state, setState, index }) {
+  return (
+    <Pressable
+      key={index * 10 + 7}
+      style={styles.button}
+      onPress={() => {
+        setState((previous) => {
+          return {
+            ...previous,
+            value: previous.value
+              .slice(0, index)
+              .concat(previous.value.slice(index + 1, state.value.length)),
+          };
+        });
+      }}
+    >
+      <EvilIcons name="trash" size={30} color="#FF3B30" />
+    </Pressable>
+  );
+}
+
+function AddButton({
+  state,
+  setState,
+  setIndex,
+  setIsAdded,
+  setIsOpen,
+  setIsStart,
+}) {
+  return (
+    <Pressable
+      style={styles.button}
+      onPress={() => {
+        setIsAdded(true);
+        setIsStart(true);
+        let length = state.value.length;
+        setIndex(length);
+        setState((previous) => {
+          return {
+            ...previous,
+            value: previous.value.concat([new TimeSlot()]),
+          };
+        });
+        setIsOpen(true);
+      }}
+    >
+      <Ionicons name="add-circle-sharp" size={21} color="#006AFF" />
+      <Text style={{ color: "#006AFF", fontSize: 19 }}> Add Time Slot</Text>
+    </Pressable>
+  );
+}
+
+export function Select({
+  state,
+  setState,
+  index,
+  isAdded,
+  isStart,
+  setIsStart,
+  isOpen,
+  setIsOpen,
+}) {
+  const now = new Date();
+
+  let start = state.value[index].start;
+  let end = state.value[index].end;
+
+  return (
+    <DatePicker
+      modal
+      open={isOpen}
+      date={
+        isStart && isAdded
+          ? new Date()
+          : isStart || isAdded
+            ? new Date(
+                now.getFullYear(),
+                now.getMonth(),
+                now.getDate(),
+                start.getHours(),
+                start.getMinutes(),
+              )
+            : new Date(
+                now.getFullYear(),
+                now.getMonth(),
+                now.getDate(),
+                end.getHours(),
+                end.getMinutes(),
+              )
+      }
+      mode={isStart ? "datetime" : "time"}
+      title={isStart ? "Select Start Time" : "Select End Time"}
+      minimumDate={
+        isStart
+          ? new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 0, 0)
+          : new Date(
+              start.getFullYear(),
+              start.getMonth(),
+              start.getDate(),
+              start.getHours(),
+              start.getMinutes(),
+            )
+      }
+      maximumDate={
+        isStart
+          ? new Date(
+              now.getFullYear(),
+              now.getMonth() + 3,
+              now.getDate(),
+              23,
+              59,
+              59,
+            )
+          : new Date(
+              start.getFullYear(),
+              start.getMonth(),
+              start.getDate(),
+              23,
+              59,
+              59,
+            )
+      }
+      onConfirm={(date) => {
+        if (isStart) {
+          setState((previous) => {
+            let next = previous.value;
+            next[index].start = date;
+            return { ...previous, value: next };
+          });
+          setIsStart(false);
+
+          setIsOpen(false);
+
+          if (isAdded) {
+            setIsOpen(true);
+          }
+        } else {
+          setState((previous) => {
+            let next = previous.value;
+            next[index].end = date;
+            return { ...previous, value: next };
+          });
+          setIsOpen(false);
+        }
+      }}
+      onCancel={() => {
+        if (isAdded && isStart) {
+          setState((previous) => {
+            return { ...previous, value: previous.value.slice(0, index - 1) };
+          });
+        }
+
+        setIsOpen(false);
+      }}
+    />
+  );
+}
+
+export default function TimeSlotList({ title, state, setState }) {
+  const [open, setIsOpen] = useState(false);
+  const [start, setIsStart] = useState(true);
+  const [added, setIsAdded] = useState(false);
+  const [index, setIndex] = useState(0);
+
+  return (
+    <View
+      style={styles.container}
+      onLayout={(event) => {
+        setState((prevState) => ({
+          ...prevState,
+          y: event.nativeEvent.layout.y,
+        }));
+      }}
+    >
+      <Text style={styles.title}>
+        {title}
+        <Text style={{ color: "red" }}> *</Text>
+      </Text>
+      <Text
+        style={[
+          styles.requirements,
+          { color: state.valid ? "black" : colors.danger },
+        ]}
+      >
+        {
+          "Each time slot must start between 10:30 am and 5 pm and end before 6 pm."
+        }
+      </Text>
+      {state.value.map((slot, index) =>
+        slot == null || (index == state.value.length - 1 && open && added)
+          ? null
+          : slot.render(
+              state,
+              setState,
+              index,
+              setIndex,
+              setIsOpen,
+              setIsAdded,
+              setIsStart,
+            ),
+      )}
+      <AddButton
+        state={state}
+        setState={setState}
+        setIndex={setIndex}
+        setIsAdded={setIsAdded}
+        setIsOpen={setIsOpen}
+        setIsStart={setIsStart}
+      />
+      {open ? (
+        <Select
+          state={state}
+          setState={setState}
+          index={index}
+          isAdded={added}
+          isStart={start}
+          setIsStart={setIsStart}
+          isOpen={open}
+          setIsOpen={setIsOpen}
+        />
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 18,
+    fontWeight: "600",
+    marginBottom: 10,
+    flexWrap: "wrap",
+    color: "black",
+  },
+
+  requirements: {
+    fontSize: 17,
+    color: colors.secondary,
+    flexWrap: "wrap",
+    marginBottom: 10,
+  },
+
+  container: {
+    flex: 1,
+    marginBottom: 10,
+  },
+
+  button: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 10,
+  },
+});
diff --git a/src/components/UploadButton.js b/src/components/UploadButton.js
index 1b975fe..5a1d9e7 100644
--- a/src/components/UploadButton.js
+++ b/src/components/UploadButton.js
@@ -1,15 +1,16 @@
-import { useState } from "react";
-import { StyleSheet, Text, View, Image, Pressable, Alert } from "react-native";
-import DocumentPicker from "react-native-document-picker";
-import * as fs from "react-native-fs";
+import Feather from "@expo/vector-icons/Feather";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 import {
   GDrive,
   MimeTypes,
 } from "@robinbobin/react-native-google-drive-api-wrapper";
-import AsyncStorage from "@react-native-async-storage/async-storage";
+import { useState } from "react";
+import { Alert, Pressable, StyleSheet, Text, View } from "react-native";
+import DocumentPicker from "react-native-document-picker";
+import * as fs from "react-native-fs";
+
 import colors from "../constants/colors";
 import { alertError } from "../utils";
-import Feather from "@expo/vector-icons/Feather";
 
 const selectFile = async () => {
   try {
@@ -54,7 +55,7 @@ export default function UploadButton({
         }));
       }}
     >
-      <Text style={styles.label}>
+      <Text style={styles.title}>
         {title}
         {required ? <Text style={{ color: "red" }}> *</Text> : null}
       </Text>
@@ -154,7 +155,7 @@ export default function UploadButton({
 }
 
 const styles = StyleSheet.create({
-  label: {
+  title: {
     fontSize: 18,
     fontWeight: "700",
     paddingBottom: 10,
diff --git a/src/components/VolunteerOpportunity.js b/src/components/VolunteerOpportunity.js
index ea88690..1dfd53f 100644
--- a/src/components/VolunteerOpportunity.js
+++ b/src/components/VolunteerOpportunity.js
@@ -1,14 +1,14 @@
+import FontAwesome from "@expo/vector-icons/FontAwesome";
+import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
+import SimpleLineIcons from "@expo/vector-icons/SimpleLineIcons";
 import {
-  View,
-  Text,
-  StyleSheet,
   Image,
-  Pressable,
   Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
 } from "react-native";
-import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
-import SimpleLineIcons from "@expo/vector-icons/SimpleLineIcons";
-import FontAwesome from "@expo/vector-icons/FontAwesome";
 
 export default function VolunteerOpportunity({
   navigation,
diff --git a/src/components/Websites.js b/src/components/Websites.js
index 01836df..c1e56d9 100644
--- a/src/components/Websites.js
+++ b/src/components/Websites.js
@@ -1,12 +1,11 @@
-import React from "react";
 import Feather from "@expo/vector-icons/Feather";
 import {
-  View,
-  Text,
-  StyleSheet,
   Image,
-  Pressable,
   Linking,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
 } from "react-native";
 
 export default function Websites() {
@@ -16,7 +15,7 @@ export default function Websites() {
 
   return (
     <View>
-      <View style={styles.cardContainer}>
+      <View style={styles.container}>
         <Pressable
           style={[styles.card, styles.first]}
           onPress={() => openLink("https://eternityband.org/")}
@@ -90,7 +89,7 @@ export default function Websites() {
 }
 
 const styles = StyleSheet.create({
-  cardContainer: {
+  container: {
     backgroundColor: "#f5f5f5",
     borderRadius: 10,
   },
diff --git a/src/constants/forms.js b/src/constants/formIDs.js
similarity index 100%
rename from src/constants/forms.js
rename to src/constants/formIDs.js
diff --git a/src/screens/AccountScreen.js b/src/screens/AccountScreen.js
index f6645bf..35fc10e 100644
--- a/src/screens/AccountScreen.js
+++ b/src/screens/AccountScreen.js
@@ -1,7 +1,7 @@
-import { Alert, StyleSheet, View } from "react-native";
-import { GoogleSignin } from "@react-native-google-signin/google-signin";
 import AsyncStorage from "@react-native-async-storage/async-storage";
+import { GoogleSignin } from "@react-native-google-signin/google-signin";
 import Constants from "expo-constants";
+import { Alert, StyleSheet, View } from "react-native";
 
 import FullWidthButton from "../components/FullWidthButton.js";
 import Profile from "../components/Profile.js";
diff --git a/src/screens/EndScreen.js b/src/screens/EndScreen.js
index 909ced8..d3d7fad 100644
--- a/src/screens/EndScreen.js
+++ b/src/screens/EndScreen.js
@@ -1,5 +1,5 @@
-import { View, Text, StyleSheet, Pressable } from "react-native";
 import Ionicons from "@expo/vector-icons/Ionicons";
+import { Pressable, StyleSheet, Text, View } from "react-native";
 
 export default function EndScreen({ route, navigation }) {
   const { isSuccess } = route.params;
diff --git a/src/screens/HomeScreen.js b/src/screens/HomeScreen.js
index 0235fc3..322a6e6 100644
--- a/src/screens/HomeScreen.js
+++ b/src/screens/HomeScreen.js
@@ -1,14 +1,14 @@
-import { useState, useEffect } from "react";
-import { StyleSheet, ScrollView } from "react-native";
 import AsyncStorage from "@react-native-async-storage/async-storage";
+import { useEffect, useState } from "react";
+import { ScrollView, StyleSheet } from "react-native";
 
-import OtherOpportunities from "../components/OtherOpportunities";
+import CarouselPage from "../components/CarouselPage";
 import Heading from "../components/Heading";
+import OtherOpportunities from "../components/OtherOpportunities";
 import Websites from "../components/Websites";
-import CarouselPage from "../components/CarouselPage";
 
-import { PublicGoogleSheetsParser } from "../utils/PublicGoogleSheetsParser";
 import { alertError, hashForm } from "../utils";
+import PublicGoogleSheetsParser from "../utils/PublicGoogleSheetsParser";
 
 export default function HomeScreen({ navigation, route }) {
   function formatData(data) {
@@ -146,7 +146,7 @@ export default function HomeScreen({ navigation, route }) {
         onRefresh={onRefresh}
       />
       <Heading>Other Opportunities</Heading>
-      <OtherOpportunities />
+      <OtherOpportunities navigation={navigation} />
       <Heading>Websites</Heading>
       <Websites />
     </ScrollView>
diff --git a/src/screens/SignInScreen.js b/src/screens/SignInScreen.js
index 53bbf7d..30070db 100644
--- a/src/screens/SignInScreen.js
+++ b/src/screens/SignInScreen.js
@@ -1,16 +1,16 @@
 import {
+  Image,
+  Pressable,
+  SafeAreaView,
   StyleSheet,
   Text,
   View,
-  SafeAreaView,
-  Pressable,
-  Image,
 } from "react-native";
 
 import {
   GoogleSignin,
-  statusCodes,
   isErrorWithCode,
+  statusCodes,
 } from "@react-native-google-signin/google-signin";
 
 import AsyncStorage from "@react-native-async-storage/async-storage";
diff --git a/src/screens/VolunteerFormScreen.js b/src/screens/VolunteerFormScreen.js
index 5bdb77a..8f15c8c 100644
--- a/src/screens/VolunteerFormScreen.js
+++ b/src/screens/VolunteerFormScreen.js
@@ -1,428 +1,46 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
 
 import {
-  Alert,
+  Dimensions,
+  KeyboardAvoidingView,
   Pressable,
-  View,
   SafeAreaView,
   ScrollView,
   StyleSheet,
   Text,
-  Dimensions,
-  KeyboardAvoidingView,
+  View,
 } from "react-native";
 
-import forms from "../constants/forms";
-import {
-  getUser,
-  FormString,
-  submitForm,
-  hashForm,
-  alertError,
-} from "../utils";
-
-import TextField from "../components/TextField";
-import CheckBoxQuery from "../components/CheckBoxQuery";
-import UploadButton from "../components/UploadButton";
 import NextButton from "../components/NextButton";
-import MultipleChoice from "../components/MultipleChoice";
 
-import AsyncStorage from "@react-native-async-storage/async-storage";
+import { alertError } from "../utils";
+import DanceClub from "../utils/forms/DanceClub";
+import LibraryMusicHour from "../utils/forms/LibraryMusicHour";
+import MusicByTheTracks from "../utils/forms/MusicByTheTracks";
+import RequestConcert from "../utils/forms/RequestConcert";
 
-class Question {
-  constructor({ component, validate = (_) => true, isVisible = () => true }) {
-    this.component = component;
-    this.validate = () => !isVisible() || validate(component.props.state.value);
-    this.isVisible = isVisible;
-    this.state = component.props.state;
-    this.setState = component.props.setState;
-    this.y = component.props.state.y;
+function getForm(title, date, location, navigation, scrollObject) {
+  if (title == "Library Music Hour") {
+    return new LibraryMusicHour(date, location, navigation, scrollObject);
+  }
+  if (title == "Music by the Tracks") {
+    return new MusicByTheTracks(date, location, navigation, scrollObject);
+  }
+  if (title == "Request a Concert") {
+    return new RequestConcert(date, location, navigation, scrollObject);
   }
+  if (title == "Audacity Dance Club") {
+    return new DanceClub(date, location, navigation, scrollObject);
+  }
+
+  alertError(`Unknown form title ${title} in getForm`);
 }
 
 export default function VolunteerFormScreen({ navigation, route }) {
   const { title, location, date } = route.params;
-
-  function emptyQuestionState(initial = null) {
-    return useState({ value: initial, y: null, valid: true });
-  }
-
-  const [fullName, setFullName] = emptyQuestionState();
-
-  useEffect(() => {
-    (async () => {
-      try {
-        const user = await getUser();
-        setFullName((prevState) => ({ ...prevState, value: user?.name }));
-      } catch (error) {
-        alertError(`While getting user in volunteer form screen: ${error}`);
-      }
-    })();
-  }, []);
-
-  const [city, setCity] = emptyQuestionState();
-  const [phoneNumber, setPhoneNumber] = emptyQuestionState();
-  const [age, setAge] = emptyQuestionState();
-  const [musicPiece, setMusicPiece] = emptyQuestionState();
-  const [composer, setComposer] = emptyQuestionState();
-  const [instrument, setInstrument] = emptyQuestionState();
-  const [performanceType, setPerformanceType] = emptyQuestionState();
-  const [length, setLength] = emptyQuestionState();
-  const [recordingLink, setRecordingLink] = emptyQuestionState();
-  const [publicPermission, setPublicPermission] = emptyQuestionState();
-  const [parentalConsent, setParentalConsent] = emptyQuestionState();
-  const [pianoAccompaniment, setPianoAccompaniment] = emptyQuestionState();
-  const [ensembleProfile, setEnsembleProfile] = emptyQuestionState();
-  const [otherInfo, setOtherInfo] = emptyQuestionState();
-
   const [scrollObject, setScrollObject] = useState(null);
-  const [timeLimit, setTimeLimit] = useState(
-    title == "Library Music Hour" ? 0 : 10,
-  );
-
-  const performanceOptions = {
-    "Individual performance only": 8,
-    "Individual performance and music instrument presentation": 12,
-    "Group performance only": 15,
-    "Group performance and music instrument presentation": 20,
-    "Library Band Ensemble (Band, Orchestra, or Choir)": 60,
-  };
-
-  const isAtLeast = (value, len) => value?.trim().length >= len;
-  const isNotEmpty = (value) => isAtLeast(value, 1);
-
-  let questions = [
-    new Question({
-      component: (
-        <TextField
-          title="Performer's Full Name"
-          key="fullName"
-          state={fullName}
-          setState={setFullName}
-        />
-      ),
-      validate: (value) => value.trim().split(" ").length >= 2,
-    }),
-
-    new Question({
-      component: (
-        <TextField
-          title="City of Residence"
-          key="city"
-          state={city}
-          setState={setCity}
-        />
-      ),
-      validate: isNotEmpty,
-    }),
-
-    new Question({
-      component: (
-        <TextField
-          title="Phone Number"
-          keyboardType="phone-pad"
-          maxLength={11}
-          key="phoneNumber"
-          state={phoneNumber}
-          setState={setPhoneNumber}
-        />
-      ),
-      validate: (value) => isAtLeast(value, 10),
-    }),
-
-    new Question({
-      component: (
-        <TextField
-          title="Performer's Age"
-          keyboardType="numeric"
-          key="age"
-          state={age}
-          setState={setAge}
-        />
-      ),
-      validate(value) {
-        const age = Number(value);
-        if (isNaN(age)) {
-          return false;
-        }
-        return age >= 5 && age <= 125;
-      },
-    }),
 
-    new Question({
-      component: (
-        <TextField
-          title="Name of Music Piece"
-          key="musicPiece"
-          state={musicPiece}
-          setState={setMusicPiece}
-        />
-      ),
-      validate: isNotEmpty,
-    }),
-
-    new Question({
-      component: (
-        <TextField
-          title="Name of Composer"
-          key="composer"
-          state={composer}
-          setState={setComposer}
-        />
-      ),
-      validate: isNotEmpty,
-    }),
-
-    new Question({
-      component: (
-        <TextField
-          title="Instrument Type"
-          key="instrument"
-          state={instrument}
-          setState={setInstrument}
-        />
-      ),
-      validate: isNotEmpty,
-    }),
-
-    title == "Library Music Hour"
-      ? new Question({
-          component: (
-            <MultipleChoice
-              title="Performance Type"
-              options={performanceOptions}
-              onSelect={(option) => {
-                setPerformanceType((prevState) => ({
-                  ...prevState,
-                  value: option,
-                }));
-                setTimeLimit(performanceOptions[option]);
-              }}
-              key="performanceType"
-              state={performanceType}
-              setState={setPerformanceType}
-            />
-          ),
-          validate: isNotEmpty,
-        })
-      : null,
-
-    new Question({
-      component: (
-        <TextField
-          title="Length of Performance (mins)"
-          subtitle={`Time Limit: ${timeLimit} minutes`}
-          keyboardType="numeric"
-          key="length"
-          state={length}
-          setState={setLength}
-        />
-      ),
-      validate(value) {
-        const time = Number(value);
-        if (isNaN(time)) {
-          return false;
-        }
-        return time > 0 && time <= timeLimit;
-      },
-    }),
-
-    new Question({
-      component: (
-        <TextField
-          title="Recording Link"
-          keyboardType="url"
-          key="recordingLink"
-          state={recordingLink}
-          setState={setRecordingLink}
-        />
-      ),
-      validate(value) {
-        try {
-          new URL(value);
-        } catch {
-          return false;
-        }
-        return true;
-      },
-    }),
-
-    new Question({
-      component: (
-        <CheckBoxQuery
-          question="Do you give permission for Audacity Music Club to post recordings of your performance on public websites?"
-          key="publicPermission"
-          state={publicPermission}
-          setState={setPublicPermission}
-        />
-      ),
-      validate: (value) => value != null,
-    }),
-
-    new Question({
-      component: (
-        <CheckBoxQuery
-          question="My parent has given their consent for my participation."
-          key="parentalConsent"
-          state={parentalConsent}
-          setState={setParentalConsent}
-        />
-      ),
-      validate: (value) => value,
-      isVisible: () => age.value < 18,
-    }),
-
-    new Question({
-      component: (
-        <UploadButton
-          title="Our volunteer piano accompanist can provide sight reading accompaniment for entry level players. To request this service, upload the main score AND accompaniment score in one PDF file."
-          key="pianoAccompaniment"
-          state={pianoAccompaniment}
-          setState={setPianoAccompaniment}
-          navigation={navigation}
-        />
-      ),
-      // Only PDF files can be uploaded
-      // Optional
-      validate: () =>
-        pianoAccompaniment.value == null ||
-        pianoAccompaniment.value[1] <= 104857600, // There are 104,857,600 bytes in 100 MB
-    }),
-
-    title == "Library Music Hour"
-      ? new Question({
-          component: (
-            <UploadButton
-              title="Upload your Library Band Ensemble profile as one PDF file."
-              key="ensembleProfile"
-              state={ensembleProfile}
-              setState={setEnsembleProfile}
-              navigation={navigation}
-              required={true}
-            />
-          ),
-
-          isVisible: () => performanceType.value?.includes("Ensemble"),
-
-          // Only PDF files can be uploaded
-          // Required only if visible (selected ensemble option)
-          validate: () =>
-            ensembleProfile.value != null &&
-            ensembleProfile.value[1] <= 104857600, // There are 104,857,600 bytes in 100 MB
-        })
-      : null,
-
-    new Question({
-      component: (
-        <TextField
-          title="Other Information (optional)"
-          key="otherInfo"
-          state={otherInfo}
-          setState={setOtherInfo}
-        />
-      ),
-    }),
-  ];
-
-  questions = questions.filter((q) => q != null);
-
-  async function submit() {
-    let allValid = true;
-    let minInvalidY = Infinity;
-
-    for (const question of questions) {
-      const isValid = question.validate();
-      question.setState((prevState) => ({
-        ...prevState,
-        valid: isValid,
-      }));
-
-      if (!isValid) {
-        allValid = false;
-        if (question.y < minInvalidY) {
-          minInvalidY = question.y;
-        }
-      }
-    }
-
-    if (!allValid) {
-      scrollObject.scrollTo({
-        x: 0,
-        y: minInvalidY,
-        animated: true,
-      });
-      return;
-    }
-
-    if (!forms.hasOwnProperty(title)) {
-      Alert.alert(`Form "${title}" is not implemented`);
-      return;
-    }
-
-    const form = forms[title];
-    const formData = new FormString();
-
-    if (title == "Library Music Hour" || title == "Music by the Tracks") {
-      formData.append(form.location, location);
-      formData.append(form.date, date);
-      formData.append(form.fullName, fullName.value);
-      formData.append(form.city, city.value);
-      formData.append(form.phoneNumber, phoneNumber.value);
-      formData.append(form.age, age.value);
-      formData.append(form.musicPiece, musicPiece.value);
-      formData.append(form.composer, composer.value);
-      formData.append(form.instrument, instrument.value);
-      formData.append(form.length, length.value);
-      formData.append(form.recordingLink, recordingLink.value);
-      if (title == "Library Music Hour") {
-        formData.append(form.performanceType, performanceType.value);
-      }
-      formData.append(
-        form.publicPermission,
-        publicPermission.value ? "Yes" : "No",
-      );
-      formData.append(
-        form.parentalConsent,
-        parentalConsent.value == null
-          ? ""
-          : parentalConsent.value
-            ? "Yes"
-            : "No",
-      );
-      formData.append(
-        form.pianoAccompaniment,
-        pianoAccompaniment.value ? pianoAccompaniment.value[0] : "",
-      );
-      if (title == "Library Music Hour") {
-        formData.append(
-          form.ensembleProfile,
-          ensembleProfile.value ? ensembleProfile.value[0] : "",
-        );
-      }
-      formData.append(form.otherInfo, otherInfo.value ?? "");
-    }
-
-    if (!submitForm(form.id, formData)) {
-      navigation.navigate("End", { isSuccess: false });
-      return;
-    }
-
-    try {
-      const submittedForms = await AsyncStorage.getItem("submittedForms");
-      const hash = hashForm(title, location, date);
-      if (submittedForms == null) {
-        await AsyncStorage.setItem("submittedForms", JSON.stringify([hash]));
-      } else {
-        const newForms = JSON.parse(submittedForms);
-        newForms.push(hash);
-        await AsyncStorage.setItem("submittedForms", JSON.stringify(newForms));
-      }
-    } catch (error) {
-      alertError(`Unable to get/save submittedForms: ${error}`);
-    }
-
-    navigation.navigate("End", { isSuccess: true });
-  }
+  const form = getForm(title, date, location, navigation, scrollObject);
 
   return (
     <SafeAreaView style={styles.container}>
@@ -443,17 +61,15 @@ export default function VolunteerFormScreen({ navigation, route }) {
         >
           <View style={styles.questions}>
             <View style={styles.header}>
-              <Text style={styles.instructions}>
-                Please fill in the following details about the person who will
-                be performing at the concert.
-              </Text>
+              <Text style={styles.instructions}>{form.title}</Text>
             </View>
             <View style={styles.form}>
-              {questions
+              {form
+                .questions()
                 .filter((question) => question?.isVisible())
                 .map((question) => question.component)}
             </View>
-            <Pressable style={styles.nextButton} onPress={() => submit()}>
+            <Pressable style={styles.nextButton} onPress={() => form.submit()}>
               <NextButton />
             </Pressable>
           </View>
diff --git a/src/screens/VolunteerOpportunityScreen.js b/src/screens/VolunteerOpportunityScreen.js
index c71ce57..a989dcd 100644
--- a/src/screens/VolunteerOpportunityScreen.js
+++ b/src/screens/VolunteerOpportunityScreen.js
@@ -1,18 +1,18 @@
+import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
+import SimpleLineIcons from "@expo/vector-icons/SimpleLineIcons";
+import { LinearGradient } from "expo-linear-gradient";
 import {
+  ImageBackground,
   Pressable,
-  View,
   SafeAreaView,
   StyleSheet,
   Text,
-  Image,
-  ImageBackground,
+  View,
 } from "react-native";
-import { LinearGradient } from "expo-linear-gradient";
+
+import Heading from "../components/Heading";
 import SignUpButton from "../components/SignUpButton";
 import Tag from "../components/Tag";
-import Heading from "../components/Heading";
-import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
-import SimpleLineIcons from "@expo/vector-icons/SimpleLineIcons";
 import colors from "../constants/colors";
 
 export default function VolunteerOpportunityScreen({ route, navigation }) {
diff --git a/src/utils/PublicGoogleSheetsParser.js b/src/utils/PublicGoogleSheetsParser.js
index 9b6c3d8..e4bfbd2 100644
--- a/src/utils/PublicGoogleSheetsParser.js
+++ b/src/utils/PublicGoogleSheetsParser.js
@@ -1,9 +1,10 @@
 // From https://github.com/fureweb-com/public-google-sheets-parser
 // Copyright (c) 2020 Jihwan Oh
+// MIT License
 
 import { alertError } from ".";
 
-export class PublicGoogleSheetsParser {
+export default class PublicGoogleSheetsParser {
   constructor(spreadsheetId, option) {
     this.id = spreadsheetId;
     this.setOption(option);
diff --git a/src/utils/forms/DanceClub.js b/src/utils/forms/DanceClub.js
new file mode 100644
index 0000000..eefdb13
--- /dev/null
+++ b/src/utils/forms/DanceClub.js
@@ -0,0 +1,200 @@
+import { useEffect } from "react";
+import { View } from "react-native";
+
+import {
+  Question,
+  alertError,
+  emptyQuestionState,
+  getUser,
+  isAtLeast,
+  isExactly,
+  isNotEmpty,
+} from "..";
+import Form from "./Form";
+
+import CheckBoxQuery from "../../components/CheckBoxQuery";
+import MultipleChoice from "../../components/MultipleChoice";
+import MultiSelect from "../../components/MultiSelect";
+import TextField from "../../components/TextField";
+
+export default class DanceClub extends Form {
+  constructor(date, location, navigation, scrollObject) {
+    super("Audacity Dance Club", date, location, navigation, scrollObject);
+
+    this.fullName = emptyQuestionState();
+
+    useEffect(() => {
+      (async () => {
+        try {
+          const user = await getUser();
+          this.fullName[1]((prevState) => ({
+            ...prevState,
+            value: user?.name,
+          }));
+        } catch (error) {
+          alertError("Unable to get user information in DanceClub: " + error);
+        }
+      })();
+    }, []);
+
+    this.phoneNumber = emptyQuestionState();
+    this.favoritePieces = [
+      emptyQuestionState(),
+      emptyQuestionState(),
+      emptyQuestionState(),
+      emptyQuestionState(),
+    ];
+    this.age = emptyQuestionState();
+    this.favoriteDanceStyles = emptyQuestionState([]);
+    this.consent = emptyQuestionState();
+    this.recording = emptyQuestionState();
+  }
+
+  questions() {
+    return [
+      new Question({
+        name: "fullName",
+        component: (
+          <TextField
+            title="Performer's Full Name"
+            key="fullName"
+            state={this.fullName[0]}
+            setState={this.fullName[1]}
+          />
+        ),
+        validate: (value) => value.trim().split(" ").length >= 2,
+      }),
+
+      new Question({
+        name: "phoneNumber",
+        component: (
+          <TextField
+            title="Phone Number"
+            keyboardType="phone-pad"
+            maxLength={20}
+            key="phoneNumber"
+            state={this.phoneNumber[0]}
+            setState={this.phoneNumber[1]}
+          />
+        ),
+        validate: (value) => isAtLeast(value, 10),
+      }),
+
+      new Question({
+        name: "favoritePieces",
+        component: (
+          <View key="favoritePiecesView">
+            {this.favoritePieces.map((piece, index) => (
+              <TextField
+                title={index == 0 ? "Your 4 Favorite Pieces of Music" : ""}
+                key={`favoritePieces${index}`}
+                state={piece[0]}
+                setState={piece[1]}
+                extraMargin={index == 3}
+                valid={this.favoritePieces.every((piece) => piece[0].valid)}
+              />
+            ))}
+          </View>
+        ),
+        state: { value: this.favoritePieces, y: -1, valid: true },
+        setState: (value) => {
+          this.favoritePieces = value;
+        },
+        y: -1,
+        validate: (value) => {
+          let good = true;
+
+          for (const [index, piece] of value.entries()) {
+            const result = isNotEmpty(piece[0].value);
+            const original = this.favoritePieces[index][0];
+            this.favoritePieces[index][1]({ ...original, valid: result });
+            good = good && result;
+          }
+
+          return good;
+        },
+      }),
+
+      new Question({
+        name: "age",
+        component: (
+          <MultipleChoice
+            title="Your Age"
+            options={[
+              "Under 10",
+              "10-15",
+              "16-20",
+              "21-40",
+              "41-60",
+              "61-80",
+              "81-100",
+            ]}
+            onSelect={(value) => {
+              this.age[1]((prevState) => ({ ...prevState, value: value }));
+            }}
+            key="age"
+            state={this.age[0]}
+            setState={this.age[1]}
+          />
+        ),
+        validate: isNotEmpty,
+      }),
+
+      new Question({
+        name: "favoriteDanceStyles",
+        component: (
+          <MultiSelect
+            title="Your 4 Favorite Dance Styles"
+            options={[
+              "Ballet",
+              "Bollywood",
+              "Contemporary",
+              "Fitness",
+              "Kpop",
+              "Latin",
+              "Lyrical",
+            ]}
+            key="favoriteDanceStyles"
+            state={this.favoriteDanceStyles[0]}
+            setState={this.favoriteDanceStyles[1]}
+          />
+        ),
+        validate: (value) => isExactly(value, 4),
+      }),
+
+      new Question({
+        name: "consent",
+        component: (
+          <CheckBoxQuery
+            question="I am committed to holding the volunteer instructor and organizer harmless"
+            key="consent"
+            state={this.consent[0]}
+            setState={this.consent[1]}
+          />
+        ),
+        validate: (value) => value == "Yes",
+      }),
+
+      new Question({
+        name: "consent",
+        component: (
+          <CheckBoxQuery
+            question={
+              "We will record our event and place them on our website. " +
+              "Maximum efforts will be made to avoid showing faces of the participants, " +
+              "but we can't guarantee it can be avoided completely. " +
+              "I consent to my and/or my child's image being recorded/filmed and " +
+              "allow the product to be used for promotional purposes in any way ADC sees fit, " +
+              "including on social media. I also understand that ADC retains full ownership " +
+              "of these images and/or videos."
+            }
+            key="recording"
+            state={this.recording[0]}
+            setState={this.recording[1]}
+          />
+        ),
+        validate: (value) => value == "Yes",
+      }),
+    ];
+  }
+}
diff --git a/src/utils/forms/Form.js b/src/utils/forms/Form.js
new file mode 100644
index 0000000..9b7d451
--- /dev/null
+++ b/src/utils/forms/Form.js
@@ -0,0 +1,145 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+import { alertError, hashForm } from "..";
+import formIDs from "../../constants/formIDs";
+
+class FormString {
+  constructor() {
+    this.string = "";
+    this.repr = "";
+  }
+
+  append(key, value) {
+    if (this.string.length > 0) {
+      this.string += "&";
+      this.repr += "\n";
+    }
+
+    this.string += `entry.${key}=${encodeURIComponent(value)}`;
+    this.repr += `entry.${key}=${value}`;
+  }
+
+  toString() {
+    return this.string;
+  }
+
+  log() {
+    return this.repr;
+  }
+}
+
+async function submitForm(formId, formData) {
+  const formUrl = `https://docs.google.com/forms/d/e/${formId}/formResponse`;
+  console.log("Form Data:\n" + formData.log());
+
+  try {
+    const response = await fetch(formUrl, {
+      method: "POST",
+      body: formData.toString(),
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+    });
+
+    if (response.ok) {
+      return true;
+    }
+    alertError(`submitForm failed with response: ${response}`);
+    return false;
+  } catch (error) {
+    alertError(`submitForm errored with: ${error}`);
+    return false;
+  }
+}
+
+export default class Form {
+  constructor(title, date, location, navigation, scrollObject) {
+    this.title = title;
+    this.date = date;
+    this.location = location;
+    this.navigation = navigation;
+    this.scrollObject = scrollObject;
+  }
+
+  questions() {
+    alertError("questions() cannot be called on the Form base class");
+    return [];
+  }
+
+  validate() {
+    let allValid = true;
+    let minInvalidY = Infinity;
+
+    for (const question of this.questions()) {
+      const isValid = question.validate();
+      question.setState((prevState) => ({
+        ...prevState,
+        valid: isValid,
+      }));
+
+      if (!isValid) {
+        allValid = false;
+        if (question.y < minInvalidY) {
+          minInvalidY = question.y;
+        }
+      }
+    }
+
+    if (!allValid) {
+      this.scrollObject.scrollTo({
+        x: 0,
+        y: minInvalidY,
+        animated: true,
+      });
+      return false;
+    }
+
+    return true;
+  }
+
+  async submit() {
+    if (!this.validate()) {
+      return;
+    }
+
+    if (!(this.title in formIDs)) {
+      alertError(`Form ${this.title} is not implemented`);
+      return;
+    }
+
+    const form = formIDs[this.title];
+    const formData = new FormString();
+
+    formData.append(form.location, this.location);
+    formData.append(form.date, this.date);
+
+    for (const question of this.questions()) {
+      const value = this[question.name][0].value;
+      formData.append(
+        form[question.name],
+        value == null ? "" : value.constructor === Array ? value[0] : value,
+      );
+    }
+
+    if (!submitForm(form.id, formData)) {
+      this.navigation.navigate("End", { isSuccess: false });
+      return;
+    }
+
+    try {
+      const submittedForms = await AsyncStorage.getItem("submittedForms");
+      const hash = hashForm(this.title, this.location, this.date);
+      if (submittedForms == null) {
+        await AsyncStorage.setItem("submittedForms", JSON.stringify([hash]));
+      } else {
+        const newForms = JSON.parse(submittedForms);
+        newForms.push(hash);
+        await AsyncStorage.setItem("submittedForms", JSON.stringify(newForms));
+      }
+    } catch (error) {
+      alertError(`Unable to get/save submittedForms: ${error}`);
+    }
+
+    this.navigation.navigate("End", { isSuccess: true });
+  }
+}
diff --git a/src/utils/forms/LibraryMusicHour.js b/src/utils/forms/LibraryMusicHour.js
new file mode 100644
index 0000000..204935c
--- /dev/null
+++ b/src/utils/forms/LibraryMusicHour.js
@@ -0,0 +1,315 @@
+import { useEffect, useState } from "react";
+
+import {
+  Question,
+  alertError,
+  emptyQuestionState,
+  getUser,
+  isAtLeast,
+  isNotEmpty,
+} from "..";
+import Form from "./Form";
+
+import CheckBoxQuery from "../../components/CheckBoxQuery";
+import MultipleChoice from "../../components/MultipleChoice";
+import TextField from "../../components/TextField";
+import UploadButton from "../../components/UploadButton";
+
+export default class LibraryMusicHour extends Form {
+  constructor(date, location, navigation, scrollObject) {
+    super("Library Music Hour", date, location, navigation, scrollObject);
+
+    this.fullName = emptyQuestionState();
+
+    useEffect(() => {
+      (async () => {
+        try {
+          const user = await getUser();
+          this.fullName[1]((prevState) => ({
+            ...prevState,
+            value: user?.name,
+          }));
+        } catch (error) {
+          alertError("Unable to get user information in MusicHour: " + error);
+        }
+      })();
+    }, []);
+
+    this.city = emptyQuestionState();
+    this.phoneNumber = emptyQuestionState();
+    this.age = emptyQuestionState();
+    this.musicPiece = emptyQuestionState();
+    this.composer = emptyQuestionState();
+    this.instrument = emptyQuestionState();
+    this.performanceType = emptyQuestionState();
+    this.length = emptyQuestionState();
+    this.recordingLink = emptyQuestionState();
+    this.publicPermission = emptyQuestionState();
+    this.parentalConsent = emptyQuestionState();
+    this.pianoAccompaniment = emptyQuestionState();
+    this.ensembleProfile = emptyQuestionState();
+    this.otherInfo = emptyQuestionState();
+
+    this.timeLimit = useState(0);
+
+    this.performanceOptions = {
+      "Individual performance only": 8,
+      "Individual performance and music instrument presentation": 12,
+      "Group performance only": 15,
+      "Group performance and music instrument presentation": 20,
+      "Library Band Ensemble (Band, Orchestra, or Choir)": 60,
+    };
+  }
+
+  questions() {
+    let questions = [
+      new Question({
+        name: "fullName",
+        component: (
+          <TextField
+            title="Performer's Full Name"
+            key="fullName"
+            state={this.fullName[0]}
+            setState={this.fullName[1]}
+          />
+        ),
+        validate: (value) => value.trim().split(" ").length >= 2,
+      }),
+
+      new Question({
+        name: "city",
+        component: (
+          <TextField
+            title="City of Residence"
+            key="city"
+            state={this.city[0]}
+            setState={this.city[1]}
+          />
+        ),
+        validate: isNotEmpty,
+      }),
+
+      new Question({
+        name: "phoneNumber",
+        component: (
+          <TextField
+            title="Phone Number"
+            keyboardType="phone-pad"
+            maxLength={20}
+            key="phoneNumber"
+            state={this.phoneNumber[0]}
+            setState={this.phoneNumber[1]}
+          />
+        ),
+        validate: (value) => isAtLeast(value, 10),
+      }),
+
+      new Question({
+        name: "age",
+        component: (
+          <TextField
+            title="Performer's Age"
+            keyboardType="numeric"
+            key="age"
+            state={this.age[0]}
+            setState={this.age[1]}
+          />
+        ),
+        validate(value) {
+          const age = Number(value);
+          if (isNaN(age)) {
+            return false;
+          }
+          return age >= 5 && age <= 125;
+        },
+      }),
+
+      new Question({
+        name: "musicPiece",
+        component: (
+          <TextField
+            title="Name of Music Piece"
+            key="musicPiece"
+            state={this.musicPiece[0]}
+            setState={this.musicPiece[1]}
+          />
+        ),
+        validate: isNotEmpty,
+      }),
+
+      new Question({
+        name: "composer",
+        component: (
+          <TextField
+            title="Name of Composer"
+            key="composer"
+            state={this.composer[0]}
+            setState={this.composer[1]}
+          />
+        ),
+        validate: isNotEmpty,
+      }),
+
+      new Question({
+        name: "instrument",
+        component: (
+          <TextField
+            title="Instrument Type"
+            key="instrument"
+            state={this.instrument[0]}
+            setState={this.instrument[1]}
+          />
+        ),
+        validate: isNotEmpty,
+      }),
+
+      this.title == "Library Music Hour"
+        ? new Question({
+            name: "performanceType",
+            component: (
+              <MultipleChoice
+                title="Performance Type"
+                options={Object.keys(this.performanceOptions)}
+                onSelect={(option) => {
+                  this.performanceType[1]((prevState) => ({
+                    ...prevState,
+                    value: option,
+                  }));
+                  this.timeLimit[1](this.performanceOptions[option]);
+                }}
+                key="performanceType"
+                state={this.performanceType[0]}
+                setState={this.performanceType[1]}
+              />
+            ),
+            validate: isNotEmpty,
+          })
+        : null,
+
+      new Question({
+        name: "length",
+        component: (
+          <TextField
+            title="Length of Performance (mins)"
+            subtitle={`Time Limit: ${this.timeLimit[0]} minutes`}
+            keyboardType="numeric"
+            key="length"
+            state={this.length[0]}
+            setState={this.length[1]}
+          />
+        ),
+        validate: function (value) {
+          const time = Number(value);
+          if (isNaN(time)) {
+            return false;
+          }
+          return time > 0 && time <= this.timeLimit[0];
+        }.bind(this),
+      }),
+
+      new Question({
+        name: "recordingLink",
+        component: (
+          <TextField
+            title="Recording Link"
+            keyboardType="url"
+            key="recordingLink"
+            state={this.recordingLink[0]}
+            setState={this.recordingLink[1]}
+          />
+        ),
+        validate(value) {
+          try {
+            new URL(value);
+          } catch {
+            return false;
+          }
+          return true;
+        },
+      }),
+
+      new Question({
+        name: "publicPermission",
+        component: (
+          <CheckBoxQuery
+            question="Do you give permission for Audacity Music Club to post recordings of your performance on public websites?"
+            key="publicPermission"
+            state={this.publicPermission[0]}
+            setState={this.publicPermission[1]}
+          />
+        ),
+        validate: (value) => value != null,
+      }),
+
+      new Question({
+        name: "parentalConsent",
+        component: (
+          <CheckBoxQuery
+            question="My parent has given their consent for my participation."
+            key="parentalConsent"
+            state={this.parentalConsent[0]}
+            setState={this.parentalConsent[1]}
+          />
+        ),
+        validate: (value) => value == "Yes",
+        isVisible: () => this.age[0].value < 18,
+      }),
+
+      new Question({
+        name: "pianoAccompaniment",
+        component: (
+          <UploadButton
+            title="Our volunteer piano accompanist can provide sight reading accompaniment for entry level players. To request this service, upload the main score AND accompaniment score in one PDF file."
+            key="pianoAccompaniment"
+            state={this.pianoAccompaniment[0]}
+            setState={this.pianoAccompaniment[1]}
+            navigation={this.navigation}
+          />
+        ),
+        // Only PDF files can be uploaded
+        // Optional
+        validate: () =>
+          this.pianoAccompaniment[0].value == null ||
+          this.pianoAccompaniment[0].value[1] <= 104857600, // There are 104,857,600 bytes in 100 MB
+      }),
+
+      this.title == "Library Music Hour"
+        ? new Question({
+            name: "ensembleProfile",
+            component: (
+              <UploadButton
+                title="Upload your Library Band Ensemble profile as one PDF file."
+                key="ensembleProfile"
+                state={this.ensembleProfile[0]}
+                setState={this.ensembleProfile[1]}
+                navigation={this.navigation}
+                required={true}
+              />
+            ),
+
+            isVisible: () =>
+              this.performanceType[0].value?.includes("Ensemble"),
+
+            // Only PDF files can be uploaded
+            // Required only if visible (selected ensemble option)
+            validate: () =>
+              this.ensembleProfile[0].value != null &&
+              this.ensembleProfile[0].value[1] <= 104857600, // There are 104,857,600 bytes in 100 MB
+          })
+        : null,
+
+      new Question({
+        name: "otherInfo",
+        component: (
+          <TextField
+            title="Other Information (optional)"
+            key="otherInfo"
+            state={this.otherInfo[0]}
+            setState={this.otherInfo[1]}
+          />
+        ),
+      }),
+    ];
+    return questions.filter((question) => question != null);
+  }
+}
diff --git a/src/utils/forms/MusicByTheTracks.js b/src/utils/forms/MusicByTheTracks.js
new file mode 100644
index 0000000..0b9593d
--- /dev/null
+++ b/src/utils/forms/MusicByTheTracks.js
@@ -0,0 +1,11 @@
+import { useState } from "react";
+import LibraryMusicHour from "./LibraryMusicHour";
+
+export default class MusicByTheTracks extends LibraryMusicHour {
+  constructor(date, location, navigation, scrollObject) {
+    super(date, location, navigation, scrollObject);
+
+    this.title = "Music by the Tracks";
+    this.timeLimit = useState(10);
+  }
+}
diff --git a/src/utils/forms/RequestConcert.js b/src/utils/forms/RequestConcert.js
new file mode 100644
index 0000000..c6c6d8f
--- /dev/null
+++ b/src/utils/forms/RequestConcert.js
@@ -0,0 +1,247 @@
+import { Question, emptyQuestionState, isAtLeast, isNotEmpty } from "..";
+import Form from "./Form";
+
+import CheckBoxQuery from "../../components/CheckBoxQuery";
+import MultipleChoice from "../../components/MultipleChoice";
+import MultiSelect from "../../components/MultiSelect";
+import TextField from "../../components/TextField";
+import TimeSlotList from "../../components/TimeSlotList";
+
+export default class RequestConcert extends Form {
+  constructor(date, location, navigation, scrollObject) {
+    super("Request a Concert", date, location, navigation, scrollObject);
+
+    this.phoneNumber = emptyQuestionState();
+    this.organization = emptyQuestionState();
+    this.eventInfo = emptyQuestionState();
+    this.venue = emptyQuestionState();
+    this.publicity = emptyQuestionState();
+    this.stipend = emptyQuestionState();
+    this.donatable = emptyQuestionState();
+    this.slots = emptyQuestionState([]);
+    this.audience = emptyQuestionState();
+    this.distance = emptyQuestionState();
+    this.provided = emptyQuestionState([]);
+    this.donationBox = emptyQuestionState();
+    this.extraAudience = emptyQuestionState();
+    this.otherInfo = emptyQuestionState();
+  }
+
+  questions() {
+    return [
+      new Question({
+        name: "phoneNumber",
+        component: (
+          <TextField
+            title="Phone Number"
+            keyboardType="phone-pad"
+            maxLength={15}
+            key="phoneNumber"
+            state={this.phoneNumber[0]}
+            setState={this.phoneNumber[1]}
+          />
+        ),
+        validate: (value) => isAtLeast(value, 10),
+      }),
+
+      new Question({
+        name: "organization",
+        component: (
+          <TextField
+            title="Organization Name & Description"
+            key="organizationName"
+            state={this.organization[0]}
+            setState={this.organization[1]}
+          />
+        ),
+        validate: isNotEmpty,
+      }),
+
+      new Question({
+        name: "eventInfo",
+        component: (
+          <TextField
+            title="Event Information"
+            key="eventInfo"
+            state={this.eventInfo[0]}
+            setState={this.eventInfo[1]}
+          />
+        ),
+        validate: isNotEmpty,
+      }),
+
+      new Question({
+        name: "venue",
+        component: (
+          <TextField
+            title="Venue Address & Information"
+            key="venue"
+            state={this.venue[0]}
+            setState={this.venue[1]}
+          />
+        ),
+        validate: isNotEmpty,
+      }),
+
+      new Question({
+        name: "publicity",
+        component: (
+          <MultipleChoice
+            title="Is the event public or private?"
+            options={["Public", "Private"]}
+            onSelect={(option) => {
+              this.publicity[1]((prevState) => ({
+                ...prevState,
+                value: option,
+              }));
+            }}
+            key="publicity"
+            state={this.publicity[0]}
+            setState={this.publicity[1]}
+          />
+        ),
+        validate: isNotEmpty,
+      }),
+
+      new Question({
+        name: "stipend",
+        component: (
+          <CheckBoxQuery
+            question="Does your event come with a stipend?"
+            key="stipend"
+            state={this.stipend[0]}
+            setState={this.stipend[1]}
+          />
+        ),
+
+        validate: (value) => value != null,
+      }),
+
+      new Question({
+        name: "donatable",
+        component: (
+          <CheckBoxQuery
+            question="Are you able to donate to our charitable cause?"
+            key="donatable"
+            state={this.donatable[0]}
+            setState={this.donatable[1]}
+          />
+        ),
+        validate: (value) => value != null,
+      }),
+
+      new Question({
+        name: "slots",
+        component: (
+          <TimeSlotList
+            title="Possible Concert Times"
+            key="slots"
+            state={this.slots[0]}
+            setState={this.slots[1]}
+          />
+        ),
+
+        validate(value) {
+          if (value.length == 0) {
+            return false;
+          }
+
+          for (const slot of value) {
+            if (!slot.validate()) {
+              return false;
+            }
+          }
+
+          return true;
+        },
+      }),
+
+      new Question({
+        name: "audience",
+        component: (
+          <TextField
+            title="Describe the audience"
+            key="audience"
+            state={this.audience[0]}
+            setState={this.audience[1]}
+          />
+        ),
+        validate: isNotEmpty,
+      }),
+
+      new Question({
+        name: "distance",
+        component: (
+          <TextField
+            title="Distance from the parking lot to the stage (ft)"
+            key="distance"
+            keyboardType="numeric"
+            state={this.distance[0]}
+            setState={this.distance[1]}
+          />
+        ),
+        validate: isNotEmpty,
+      }),
+
+      new Question({
+        name: "provided",
+        component: (
+          <MultiSelect
+            title="You will provide a:"
+            options={[
+              "Cart for Moving Equipment",
+              "PA System",
+              "Large Screen",
+              "Chairs",
+              "Labor",
+              "Canopy",
+              "Covered Stage",
+            ]}
+            key="provided"
+            state={this.provided[0]}
+            setState={this.provided[1]}
+          />
+        ),
+        validate: () => true,
+      }),
+
+      new Question({
+        name: "donationBox",
+        component: (
+          <CheckBoxQuery
+            question="Permission for Donation Box for Charitable Causes (See Ongoing Charitable Donation Drives at www.goaudacity.com/projects)"
+            key="donationBox"
+            state={this.donationBox[0]}
+            setState={this.donationBox[1]}
+          />
+        ),
+        validate: (value) => value != null,
+      }),
+
+      new Question({
+        name: "extraAudience",
+        component: (
+          <CheckBoxQuery
+            question="Permission to Draw in Our Own Audience"
+            key="extraAudience"
+            state={this.extraAudience[0]}
+            setState={this.extraAudience[1]}
+          />
+        ),
+        validate: (value) => value != null,
+      }),
+
+      new Question({
+        name: "otherInfo",
+        component: (
+          <TextField
+            title="Other Information (optional)"
+            key="otherInfo"
+            state={this.otherInfo[0]}
+            setState={this.otherInfo[1]}
+          />
+        ),
+      }),
+    ];
+  }
+}
diff --git a/src/utils/index.js b/src/utils/index.js
index 877aa34..a406e74 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -1,7 +1,7 @@
-import { Alert, Platform } from "react-native";
 import AsyncStorage from "@react-native-async-storage/async-storage";
-
 import Constants from "expo-constants";
+import { useState } from "react";
+import { Alert, Platform } from "react-native";
 
 export function alertError(error) {
   console.error(error);
@@ -9,61 +9,54 @@ export function alertError(error) {
     "Error",
     `Your request was not processed successfully due to an unexpected error. We apologize for the inconvenience. To help us identify and fix this error, please take a screenshot of this alert and send a bug report to ${Constants.expoConfig.extra.email}. Thank you!\n\nPlatform: ${Platform.OS} with v${Platform.Version}\n\n${error}`,
   );
+  return null;
 }
 
 export async function getUser() {
   try {
     const userString = await AsyncStorage.getItem("user");
     if (userString === null) {
-      alertError("Undefined user in getUser");
+      throw "EMPTY User";
     }
     return JSON.parse(userString);
   } catch (error) {
-    alertError(`In getUser: ${error}`);
+    alertError("Unexpected error in getUser: " + error);
   }
 }
 
-export function hashForm(title, location, date) {
-  return title + location + date;
-}
-
-export class FormString {
-  constructor() {
-    this.string = "";
-  }
-
-  append(key, value) {
-    if (this.string.length > 0) {
-      this.string += "&";
-    }
-
-    this.string += `entry.${key}=${encodeURIComponent(value)}`;
+export class Question {
+  constructor({
+    name,
+    component,
+    validate = (_) => true,
+    isVisible = () => true,
+    state = null,
+    setState = null,
+    y = null,
+  }) {
+    this.name = name;
+    this.component = component;
+    this.state = state ? state : component.props.state;
+    this.setState = setState ? setState : component.props.setState;
+    this.y = y ? y : component.props.state.y;
+    this.isVisible = isVisible;
+    this.validate = () =>
+      !isVisible() || validate((state ? state : component.props.state).value);
   }
+}
 
-  toString() {
-    return this.string;
-  }
+export function emptyQuestionState(initial = null) {
+  return useState({ value: initial, y: null, valid: true });
 }
 
-export async function submitForm(formId, formData) {
-  const formUrl = `https://docs.google.com/forms/d/e/${formId}/formResponse`;
-  console.log("Form Data: " + formData);
-  try {
-    const response = await fetch(formUrl, {
-      method: "POST",
-      body: formData.toString(),
-      headers: {
-        "Content-Type": "application/x-www-form-urlencoded",
-      },
-    });
+export const isAtLeast = (value, len) =>
+  value
+    ? (value.hasOwnProperty("trim") ? value.trim() : value).length >= len
+    : false;
+export const isNotEmpty = (value) => isAtLeast(value, 1);
+export const isExactly = (value, len) =>
+  !isAtLeast(value, len + 1) && isAtLeast(value, len);
 
-    if (response.ok) {
-      return true;
-    }
-    alertError(`Failure response in submitForm: ${response}`);
-    return false;
-  } catch (error) {
-    alertError(`In submitForm: ${error}`);
-    return false;
-  }
+export function hashForm(title, location, date) {
+  return title + "&&&" + location + "&&&" + date;
 }