diff --git a/src/App.jsx b/src/App.jsx
index f516d08..4815f28 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -8,7 +8,6 @@ import DummySuccessfulLogin from './pages/DummySuccessfulLogin';
 import DummyVolunteerData from './pages/DummyVolunteerData';
 import DummyVolunteerEvent from './pages/DummyVolunteerEvent';
 import DummyStatsPage from './pages/DummyStatsPage';
-import DummyVolunteerRegistrationForm from './pages/DummyVolunteerRegistrationForm';
 import DummyCheckin from './pages/DummyCheckin';
 import DummyEventCreation from './pages/DummyEventCreation';
 import Login from './pages/Login';
@@ -16,6 +15,7 @@ import Playground from './components/Playground/Playground';
 import EventCardTest from './pages/EventCardTest';
 import DataEntryModalTestPage from './pages/DataEntryModalTestPage';
 import Register from './pages/Register';
+import SelectEvent from './pages/SelectEvent';
 import DummyVolunteerQR from './pages/DummyVolunteerQR';
 import DummyAdminQR from './pages/DummyAdminQR';
 
@@ -32,7 +32,7 @@ const App = () => {
           <Route path="/search-volunteer-events" element={<DummySearchVolunteerEvents />} />
           <Route path="/profiles" element={<DummyProfiles />} />
           <Route path="/event-creation" element={<DummyEventCreation />} />
-          <Route path="/volunteer-registration-form" element={<DummyVolunteerRegistrationForm />} />
+          <Route path="/select-event" element={<SelectEvent />} />
 
           {/* SPRINT 4 */}
 
diff --git a/src/components/DataEntryModal/DataEntryModal.jsx b/src/components/DataEntryModal/DataEntryModal.jsx
index 1c61d36..2a31975 100644
--- a/src/components/DataEntryModal/DataEntryModal.jsx
+++ b/src/components/DataEntryModal/DataEntryModal.jsx
@@ -1,37 +1,37 @@
 import PropTypes from 'prop-types';
 import {
-    Modal,
-    ModalOverlay,
-    ModalContent,
-    ModalHeader,
-    ModalFooter,
-    ModalBody,
-    ModalCloseButton,
-    Button,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+  Button,
 } from '@chakra-ui/react';
 
 const DataEntryModal = ({ isOpen, onClose }) => {
-    return (
-        <Modal isOpen={isOpen} onClose={onClose}>
-            <ModalOverlay />
-            <ModalContent>
-                <ModalHeader>Modal Title</ModalHeader>
-                <ModalCloseButton />
-                <ModalBody></ModalBody>
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Modal Title</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody></ModalBody>
 
-                <ModalFooter>
-                    <Button colorScheme="green" mr={3} onClick={onClose}>
-                        Save
-                    </Button>
-                </ModalFooter>
-            </ModalContent>
-        </Modal>
-    );
+        <ModalFooter>
+          <Button colorScheme="green" mr={3} onClick={onClose}>
+            Save
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
 };
 
 DataEntryModal.propTypes = {
-    isOpen: PropTypes.bool.isRequired,
-    onClose: PropTypes.func.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
 };
 
 export default DataEntryModal;
diff --git a/src/pages/EventCardTest.jsx b/src/pages/EventCardTest.jsx
index ad913d7..c7aa9bb 100644
--- a/src/pages/EventCardTest.jsx
+++ b/src/pages/EventCardTest.jsx
@@ -4,27 +4,29 @@ import { getEvents } from '../utils/eventsUtils';
 import { SimpleGrid } from '@chakra-ui/react';
 
 const EventCardTest = () => {
-    const [events, setEvents] = useState([]);
-    // Array of all events from DB
-    const [isAdmin, setAdminStatus] = useState([]);
-    // Bool, if user is admin or not
+  const [events, setEvents] = useState([]);
+  // Array of all events from DB
+  const [isAdmin, setAdminStatus] = useState([]);
+  // Bool, if user is admin or not
 
-    const loadData = async () => {
-        await getEvents().then(data => setEvents(data));
-        setAdminStatus(true);
-    };
+  const loadData = async () => {
+    await getEvents().then(data => setEvents(data));
+    setAdminStatus(true);
+  };
 
-    useEffect(() => {
-        loadData();
-    }, []);
+  useEffect(() => {
+    loadData();
+  }, []);
 
-    return (
-        <>
-            <SimpleGrid spacing={4} templateColumns="repeat(auto-fill, minmax(300px, 1fr))">
-                {events.map(event => <EventCard event={event} isAdmin={isAdmin} key={event.id}/>)}    
-            </SimpleGrid>
-        </>
-    );
+  return (
+    <>
+      <SimpleGrid spacing={4} templateColumns="repeat(auto-fill, minmax(300px, 1fr))">
+        {events.map(event => (
+          <EventCard event={event} isAdmin={isAdmin} key={event.id} />
+        ))}
+      </SimpleGrid>
+    </>
+  );
 };
 
 export default EventCardTest;
diff --git a/src/pages/Register.jsx b/src/pages/Register.jsx
index 0b33dd5..5401b5b 100644
--- a/src/pages/Register.jsx
+++ b/src/pages/Register.jsx
@@ -1,7 +1,142 @@
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import Backend from '../utils/utils';
+import {
+  FormControl,
+  FormLabel,
+  Input,
+  Button,
+  FormErrorMessage,
+  Checkbox,
+  Heading
+} from '@chakra-ui/react';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from 'yup';
+import { useParams } from 'react-router-dom';
+
+const schema = yup.object({
+  volunteer_id: yup.string().required('ID required'),
+  firstName: yup.string().required('First Name Required'),
+  lastName: yup.string().required('Last Name Required'),
+  number_in_party: yup.number().typeError('Input must be numeric').min(1).required('Number of Party Required'),
+  checked: yup.bool().oneOf([true], 'Must agree to terms and conditions'),
+});
+
 const Register = () => {
-    return (
-        <p>Placeholder for the waiver signing page</p>
-    );
-}
+  const { eventId } = useParams();
+  const [waiverText, setWaiverText] = useState('');
+
+  const defaultValues = {
+    volunteer_id: '',
+    firstName: '',
+    lastName: '',
+    number_in_party: '',
+    checked: undefined,
+  };
+
+  const getWaiver = async () => {
+    try {
+      const response = await Backend.get(`/events/${eventId}`);
+      setWaiverText(response.data.waiver);
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({ resolver: yupResolver(schema), defaultValues });
+
+  const postVolunteerData = async formData => {
+    console.log(formData);
+
+    const submitData = {
+      volunteer_id: formData.volunteer_id,
+      number_in_party: formData.number_in_party,
+      event_id: eventId,
+      is_checked_in: false,
+      pounds: 0,
+      ounces: 0,
+    };
+
+    try {
+      await Backend.post('/data', submitData);
+    } catch (e) {
+      console.log('Error posting', e);
+    }
+  };
+
+  useEffect(() => {
+    getWaiver();
+  }, []);
+
+  return (
+    <form onSubmit={handleSubmit(data => postVolunteerData(data))}>
+      {/* VOLUNTEER ID */}
+      <FormControl
+        isInvalid={!!errors?.volunteer_id}
+        errortext={errors?.volunteer_id?.message}
+        width="47%"
+      >
+        <FormLabel marginLeft={10} marginTop={10}>
+          Volunteer Id
+        </FormLabel>
+        <Input
+          marginLeft={10}
+          width={'auto'}
+          {...register('volunteer_id')} //id showing
+        />
+        <FormErrorMessage>{errors?.volunteer_id?.message}</FormErrorMessage>
+      </FormControl>
+
+      {/* FIRST NAME */}
+      <FormControl
+        isInvalid={!!errors?.firstName}
+        errortext={errors?.firstName?.message}
+        width="47%"
+      >
+        <FormLabel marginLeft={10} marginTop={10}>
+          First Name
+        </FormLabel>
+        <Input marginLeft={10} width={'auto'} {...register('firstName')} />
+        <FormErrorMessage>{errors?.firstName?.message}</FormErrorMessage>
+      </FormControl>
+
+      {/* LAST NAME */}
+      <FormControl isInvalid={!!errors?.lastName} errortext={errors?.lastName?.message} width="47%">
+        <FormLabel marginLeft={10} marginTop={10}>
+          Last Name
+        </FormLabel>
+        <Input marginLeft={10} width={'auto'} {...register('lastName')} />
+        <FormErrorMessage>{errors?.lastName?.message}</FormErrorMessage>
+      </FormControl>
+
+      <FormControl
+        isInvalid={!!errors?.number_in_party}
+        errortext={errors?.number_in_party?.message}
+        width="47%"
+      >
+        <FormLabel marginLeft={10} marginTop={10}>
+          Number of party members
+        </FormLabel>
+        <Input marginLeft={10} width={'auto'} {...register('number_in_party')} />
+        <FormErrorMessage>{errors?.number_in_party?.message}</FormErrorMessage>
+      </FormControl>
+
+      <Heading mt={5}>Waiver</Heading>
+      <p>{waiverText}</p>
+      <FormControl isInvalid={!!errors?.checked} errortext={errors?.checked?.message} width="47%">
+        <Checkbox {...register('checked')}>I agree to the terms & conditions</Checkbox>
+        <FormErrorMessage>{errors?.checked?.message}</FormErrorMessage>
+      </FormControl>
+
+      <Button marginTop={10} marginLeft={10} colorScheme="blue" type="submit">
+        Submit
+      </Button>
+    </form>
+  );
+};
 
-export default Register;
\ No newline at end of file
+export default Register;
diff --git a/src/pages/DummyVolunteerRegistrationForm.jsx b/src/pages/SelectEvent.jsx
similarity index 52%
rename from src/pages/DummyVolunteerRegistrationForm.jsx
rename to src/pages/SelectEvent.jsx
index 3a300d2..cc1eed8 100644
--- a/src/pages/DummyVolunteerRegistrationForm.jsx
+++ b/src/pages/SelectEvent.jsx
@@ -1,16 +1,10 @@
 import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import Backend from '../utils/utils';
-import {
-  FormControl,
-  FormLabel,
-  Input,
-  Button,
-  Select,
-  FormErrorMessage,
-} from '@chakra-ui/react';
+import { FormControl, FormLabel, Button, Select, FormErrorMessage } from '@chakra-ui/react';
 import { yupResolver } from '@hookform/resolvers/yup';
 import * as yup from 'yup';
+import { useNavigate } from 'react-router-dom';
 
 const schema = yup.object({
   volunteer_id: yup.string().required('ID required').max(10, 'ID exceeds 10 character limit'),
@@ -18,22 +12,20 @@ const schema = yup.object({
   event_id: yup.string().required('Event required'),
 });
 
-const DummyVolunteerRegistrationForm = () => {
+const SelectEvent = () => {
   const [eventsData, setEventsData] = useState([]);
 
+  const [currEvent, setCurrEvent] = useState('');
+  const navigate = useNavigate();
+
   const defaultValues = {
-    volunteer_id: '',
-    number_in_party: '',
-    pounds: 0, 
-    ounces: 0, 
-    unusual_items: '',
-    event_id: '',
-    is_checked_in: false,
+    firstName: '',
+    lastName: '',
+    email: '',
   };
 
   const {
     register,
-    handleSubmit,
     formState: { errors },
   } = useForm({ resolver: yupResolver(schema), defaultValues });
 
@@ -47,14 +39,8 @@ const DummyVolunteerRegistrationForm = () => {
     }
   };
 
-  const postVolunteerData = async formData => {
-    try {
-      await Backend.post('/data', formData);
-      console.log('Submitted ');
-      console.log(formData);
-    } catch (e) {
-      console.log('Error posting', e);
-    }
+  const handleNewRoute = () => {
+    navigate(`/register/${currEvent}`);
   };
 
   useEffect(() => {
@@ -62,21 +48,7 @@ const DummyVolunteerRegistrationForm = () => {
   }, []);
 
   return (
-    <form onSubmit={handleSubmit(data => postVolunteerData(data))}>
-      {/* VOLUNTEER ID */}
-      <FormControl isInvalid={errors && errors.id} width="47%">
-        <FormLabel marginLeft={10} marginTop={10}>
-          Volunteer Id
-        </FormLabel>
-        <Input
-          marginLeft={10}
-          width={'auto'}
-          {...register('volunteer_id')} //id showing
-        />
-        <FormErrorMessage>{errors.id && errors.id.message}</FormErrorMessage>
-      </FormControl>
-
-      {/* EVENT NAME */}
+    <div>
       <FormControl isInvalid={errors && errors.id} width="47%">
         <FormLabel marginLeft={10} marginTop={10}>
           Event
@@ -85,6 +57,10 @@ const DummyVolunteerRegistrationForm = () => {
           marginLeft={10}
           placeholder="Select event"
           {...register('event_id')}
+          onChange={event => {
+            console.log(event.target.value);
+            setCurrEvent(event.target.value);
+          }}
         >
           {eventsData.map(element => (
             <option key={element.id} value={element.id}>
@@ -95,19 +71,11 @@ const DummyVolunteerRegistrationForm = () => {
         <FormErrorMessage>{errors.id && errors.id.message}</FormErrorMessage>
       </FormControl>
 
-      {/* PARTY NUMBER */}
-      <FormControl isInvalid={errors && errors.id} width="47%">
-        <FormLabel marginLeft={10} marginTop={10}>
-          Number of Party
-        </FormLabel>
-        <Input marginLeft={10} width={'auto'} {...register('number_in_party')} type="number" />
-      </FormControl>
-
-      <Button marginTop={10} marginLeft={10} colorScheme="blue" type="submit">
-        Submit
+      <Button marginTop={10} marginLeft={10} colorScheme="blue" onClick={handleNewRoute}>
+        Continue
       </Button>
-    </form>
+    </div>
   );
 };
 
-export default DummyVolunteerRegistrationForm;
+export default SelectEvent;
diff --git a/src/utils/eventsUtils.js b/src/utils/eventsUtils.js
index e9e7872..e53eef8 100644
--- a/src/utils/eventsUtils.js
+++ b/src/utils/eventsUtils.js
@@ -1,8 +1,8 @@
 import Backend from './utils';
 
 const getEvents = async () => {
-    const response = await Backend.get('/events');
-    return response.data;
+  const response = await Backend.get('/events');
+  return response.data;
 };
 
 export { getEvents };
diff --git a/vite.config.js b/vite.config.js
index 02ecd2f..68d35d4 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,6 +1,6 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
-import topLevelAwait from "vite-plugin-top-level-await";
+import topLevelAwait from 'vite-plugin-top-level-await';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -8,12 +8,12 @@ export default defineConfig({
     react(),
     topLevelAwait({
       // The export name of top-level await promise for each chunk module
-      promiseExportName: "__tla",
+      promiseExportName: '__tla',
       // The function to generate import names of top-level await promise in each chunk module
-      promiseImportName: i => `__tla_${i}`
-    })
+      promiseImportName: i => `__tla_${i}`,
+    }),
   ],
   build: {
-    target: "ES2022"
+    target: 'ES2022',
   },
 });