diff --git a/src/App.jsx b/src/App.jsx
index 13b6f5f..b3ba82b 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -50,7 +50,7 @@ const Layout = () => {
       ) : (
         <NavbarDrawer isOpen={isNavbarDrawerOpen} onClose={onNavbarDrawerClose} />
       )}
-      <Box as="main" ml={isLargerThan1200px ? 'var(--size-of-navbar)' : 0}>
+      <Box as="main" ml={isLargerThan1200px ? 'var(--size-of-navbar)' : 10}>
         <Outlet />
       </Box>
     </NavbarContext.Provider>
diff --git a/src/components/Auth/AuthPage.jsx b/src/components/Auth/AuthPage.jsx
index b2204cb..3a46e51 100644
--- a/src/components/Auth/AuthPage.jsx
+++ b/src/components/Auth/AuthPage.jsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 
 const AuthPage = ({ children }) => {
   return (
-    <SimpleGrid columns={2} spacing={0} minH={'100vh'} style={{ fontFamily: 'Poppins' }}>
+    <SimpleGrid columns={2} spacing={0} minH={'100vh'}>
       <Box
         backgroundColor="#2D558A"
         position="relative"
diff --git a/src/components/Checkin/CheckinModal.jsx b/src/components/Checkin/CheckinModal.jsx
index 1c80526..72da30e 100644
--- a/src/components/Checkin/CheckinModal.jsx
+++ b/src/components/Checkin/CheckinModal.jsx
@@ -22,8 +22,8 @@ import { FaUserAlt } from 'react-icons/fa'; // Icon for when there is no picture
 import GroupIcon from '../../Assets/groupIcon.svg';
 
 const CheckinModal = ({ isOpen, onClose, volunteer, onCheckInConfirm }) => {
-  const [numberOfParticipants, setNumberOfParticipants] = useState('');
-  const [submittable, setSubmittable] = useState(false);
+  const [numberOfParticipants, setNumberOfParticipants] = useState(1);
+  const [submittable, setSubmittable] = useState(true);
 
   const handleInput = e => {
     setNumberOfParticipants(e.target.value);
@@ -33,7 +33,7 @@ const CheckinModal = ({ isOpen, onClose, volunteer, onCheckInConfirm }) => {
   };
 
   const handleCheckIn = async () => {
-    if (volunteer && typeof volunteer === 'object' && volunteer.id) {
+    if (volunteer && typeof volunteer === 'object' && volunteer.id && volunteer.event_data_id) {
       await onCheckInConfirm(volunteer, numberOfParticipants); // Pass the entire volunteer object
       onClose();
     } else {
@@ -76,7 +76,9 @@ const CheckinModal = ({ isOpen, onClose, volunteer, onCheckInConfirm }) => {
                 >
                   <FaUserAlt color="#49B164" />
                   <Text fontSize="xs" ml={1} fontWeight="bold">
-                    {volunteer.number_in_party === 1 ? 'Individual' : 'Group'}
+                    {!volunteer.number_in_party || volunteer.number_in_party == 1
+                      ? 'Individual'
+                      : 'Group'}
                   </Text>
                 </Flex>
               </Flex>
@@ -128,6 +130,7 @@ CheckinModal.propTypes = {
     email: PropTypes.string,
     image_url: PropTypes.string,
     number_in_party: PropTypes.number,
+    event_data_id: PropTypes.number,
   }),
 };
 
diff --git a/src/components/DummyVolunteerProfile/ProfilePageModals.jsx b/src/components/DummyVolunteerProfile/ProfilePageModals.jsx
index 3c1750b..4d0e56f 100644
--- a/src/components/DummyVolunteerProfile/ProfilePageModals.jsx
+++ b/src/components/DummyVolunteerProfile/ProfilePageModals.jsx
@@ -92,7 +92,6 @@ const EditFirstNameModal = ({ isOpen, onClose, user }) => {
                 // Push over by the size of the button
                 width={'100%'}
                 fontWeight={'800'}
-                fontFamily={'Avenir'}
                 letterSpacing={'0em'}
               >
                 Edit First Name
@@ -123,7 +122,6 @@ const EditFirstNameModal = ({ isOpen, onClose, user }) => {
                 fontWeight={'500'}
                 fontSize={'16px'}
                 marginLeft={'13px'}
-                fontFamily={'Avenir'}
                 lineHeight={'15px'}
                 letterSpacing={'0em'}
                 justify={'left'}
@@ -132,7 +130,6 @@ const EditFirstNameModal = ({ isOpen, onClose, user }) => {
                 First Name
               </FormLabel>
               <Input
-                fontFamily={'Inter, Arial, Helvetica, sans-serif'}
                 fontSize={'16px'}
                 fontWeight={'500'}
                 letterSpacing={'0em'}
@@ -159,7 +156,6 @@ const EditFirstNameModal = ({ isOpen, onClose, user }) => {
               color={'#0075FF'}
               gap={'6px'}
               padding={'12 11.321188926696777 12 11.321188926696777'}
-              fontFamily={'Avenir'}
               fontSize={'14px'}
               _hover={{
                 bg: 'red',
@@ -179,7 +175,6 @@ const EditFirstNameModal = ({ isOpen, onClose, user }) => {
               color={'#FFFFFF'}
               onClick={handleSubmit}
               isDisabled={isSubmittable}
-              fontFamily={'Avenir'}
               fontSize={'14px'}
               _hover={{
                 bg: 'green',
@@ -267,7 +262,6 @@ const EditLastNameModal = ({ isOpen, onClose, user }) => {
                 // Push over by the size of the button
                 width={'100%'}
                 fontWeight={'800'}
-                fontFamily={'Avenir'}
                 letterSpacing={'0em'}
               >
                 Edit Last Name
@@ -298,7 +292,6 @@ const EditLastNameModal = ({ isOpen, onClose, user }) => {
                 fontWeight={'500'}
                 fontSize={'16px'}
                 marginLeft={'13px'}
-                fontFamily={'Avenir'}
                 lineHeight={'15px'}
                 letterSpacing={'0em'}
                 justify={'left'}
@@ -307,7 +300,6 @@ const EditLastNameModal = ({ isOpen, onClose, user }) => {
                 Last Name
               </FormLabel>
               <Input
-                fontFamily={'Inter, Arial, Helvetica, sans-serif'}
                 fontSize={'16px'}
                 fontWeight={'500'}
                 letterSpacing={'0em'}
@@ -334,7 +326,6 @@ const EditLastNameModal = ({ isOpen, onClose, user }) => {
               color={'#0075FF'}
               gap={'6px'}
               padding={'12 11.321188926696777 12 11.321188926696777'}
-              fontFamily={'Avenir'}
               fontSize={'14px'}
               _hover={{
                 bg: 'red',
@@ -354,7 +345,6 @@ const EditLastNameModal = ({ isOpen, onClose, user }) => {
               color={'#FFFFFF'}
               onClick={handleSubmit}
               isDisabled={isSubmittable}
-              fontFamily={'Avenir'}
               fontSize={'14px'}
               _hover={{
                 bg: 'green',
@@ -442,7 +432,6 @@ const EditEmailModal = ({ isOpen, onClose, user }) => {
                 // Push over by the size of the button
                 width={'100%'}
                 fontWeight={'800'}
-                fontFamily={'Avenir'}
                 letterSpacing={'0em'}
               >
                 Edit Email
@@ -473,7 +462,6 @@ const EditEmailModal = ({ isOpen, onClose, user }) => {
                 fontWeight={'500'}
                 fontSize={'16px'}
                 marginLeft={'13px'}
-                fontFamily={'Avenir'}
                 lineHeight={'15px'}
                 letterSpacing={'0em'}
                 justify={'left'}
@@ -482,7 +470,6 @@ const EditEmailModal = ({ isOpen, onClose, user }) => {
                 Email
               </FormLabel>
               <Input
-                fontFamily={'Inter, Arial, Helvetica, sans-serif'}
                 fontSize={'16px'}
                 fontWeight={'500'}
                 letterSpacing={'0em'}
@@ -509,7 +496,6 @@ const EditEmailModal = ({ isOpen, onClose, user }) => {
               color={'#0075FF'}
               gap={'6px'}
               padding={'12 11.321188926696777 12 11.321188926696777'}
-              fontFamily={'Avenir'}
               fontSize={'14px'}
               _hover={{
                 bg: 'red',
@@ -529,7 +515,6 @@ const EditEmailModal = ({ isOpen, onClose, user }) => {
               color={'#FFFFFF'}
               onClick={handleSubmit}
               isDisabled={isSubmittable}
-              fontFamily={'Avenir'}
               fontSize={'14px'}
               _hover={{
                 bg: 'green',
@@ -617,7 +602,6 @@ const EditOrganizationModal = ({ isOpen, onClose, user }) => {
                 // Push over by the size of the button
                 width={'100%'}
                 fontWeight={'800'}
-                fontFamily={'Avenir'}
                 letterSpacing={'0em'}
               >
                 Edit Organization
@@ -648,7 +632,6 @@ const EditOrganizationModal = ({ isOpen, onClose, user }) => {
                 fontWeight={'500'}
                 fontSize={'16px'}
                 marginLeft={'13px'}
-                fontFamily={'Avenir'}
                 lineHeight={'15px'}
                 letterSpacing={'0em'}
                 justify={'left'}
@@ -657,7 +640,6 @@ const EditOrganizationModal = ({ isOpen, onClose, user }) => {
                 Organization
               </FormLabel>
               <Input
-                fontFamily={'Inter, Arial, Helvetica, sans-serif'}
                 fontSize={'16px'}
                 fontWeight={'500'}
                 letterSpacing={'0em'}
@@ -684,7 +666,6 @@ const EditOrganizationModal = ({ isOpen, onClose, user }) => {
               color={'#0075FF'}
               gap={'6px'}
               padding={'12 11.321188926696777 12 11.321188926696777'}
-              fontFamily={'Avenir'}
               fontSize={'14px'}
               _hover={{
                 bg: 'red',
@@ -704,7 +685,6 @@ const EditOrganizationModal = ({ isOpen, onClose, user }) => {
               color={'#FFFFFF'}
               onClick={handleSubmit}
               isDisabled={isSubmittable}
-              fontFamily={'Avenir'}
               fontSize={'14px'}
               _hover={{
                 bg: 'green',
@@ -792,7 +772,6 @@ const EditPhoneNumberModal = ({ isOpen, onClose, user }) => {
                 // Push over by the size of the button
                 width={'100%'}
                 fontWeight={'800'}
-                fontFamily={'Avenir'}
                 letterSpacing={'0em'}
               >
                 Edit Phone Number
@@ -823,7 +802,6 @@ const EditPhoneNumberModal = ({ isOpen, onClose, user }) => {
                 fontWeight={'500'}
                 fontSize={'16px'}
                 marginLeft={'13px'}
-                fontFamily={'Avenir'}
                 lineHeight={'15px'}
                 letterSpacing={'0em'}
                 justify={'left'}
@@ -832,7 +810,6 @@ const EditPhoneNumberModal = ({ isOpen, onClose, user }) => {
                 Phone Number
               </FormLabel>
               <Input
-                fontFamily={'Inter, Arial, Helvetica, sans-serif'}
                 fontSize={'16px'}
                 fontWeight={'500'}
                 letterSpacing={'0em'}
@@ -859,7 +836,6 @@ const EditPhoneNumberModal = ({ isOpen, onClose, user }) => {
               color={'#0075FF'}
               gap={'6px'}
               padding={'12 11.321188926696777 12 11.321188926696777'}
-              fontFamily={'Avenir'}
               fontSize={'14px'}
               _hover={{
                 bg: 'red',
@@ -879,7 +855,6 @@ const EditPhoneNumberModal = ({ isOpen, onClose, user }) => {
               color={'#FFFFFF'}
               onClick={handleSubmit}
               isDisabled={isSubmittable}
-              fontFamily={'Avenir'}
               fontSize={'14px'}
               _hover={{
                 bg: 'green',
@@ -967,7 +942,6 @@ const EditAboutMeModal = ({ isOpen, onClose, user }) => {
                 // Push over by the size of the button
                 width={'100%'}
                 fontWeight={'800'}
-                fontFamily={'Avenir'}
                 letterSpacing={'0em'}
               >
                 Edit About Me Section
@@ -998,7 +972,6 @@ const EditAboutMeModal = ({ isOpen, onClose, user }) => {
                 fontWeight={'500'}
                 fontSize={'16px'}
                 marginLeft={'13px'}
-                fontFamily={'Avenir'}
                 lineHeight={'15px'}
                 letterSpacing={'0em'}
                 justify={'left'}
@@ -1007,7 +980,6 @@ const EditAboutMeModal = ({ isOpen, onClose, user }) => {
                 About Me
               </FormLabel>
               <Input
-                fontFamily={'Inter, Arial, Helvetica, sans-serif'}
                 fontSize={'16px'}
                 fontWeight={'500'}
                 letterSpacing={'0em'}
@@ -1034,7 +1006,6 @@ const EditAboutMeModal = ({ isOpen, onClose, user }) => {
               color={'#0075FF'}
               gap={'6px'}
               padding={'12 11.321188926696777 12 11.321188926696777'}
-              fontFamily={'Avenir'}
               fontSize={'14px'}
               _hover={{
                 bg: 'red',
@@ -1054,7 +1025,6 @@ const EditAboutMeModal = ({ isOpen, onClose, user }) => {
               color={'#FFFFFF'}
               onClick={handleSubmit}
               isDisabled={isSubmittable}
-              fontFamily={'Avenir'}
               fontSize={'14px'}
               _hover={{
                 bg: 'green',
diff --git a/src/components/EventRegistration/LoadingModal.jsx b/src/components/EventRegistration/LoadingModal.jsx
index 1e48221..b9c4dd1 100644
--- a/src/components/EventRegistration/LoadingModal.jsx
+++ b/src/components/EventRegistration/LoadingModal.jsx
@@ -8,14 +8,13 @@ const LoadingModal = ({ ...props }) => {
         <Spinner color="blue.500" size={'xl'} speed="0.8s" thickness="6px" />
       </Flex>
       <Box>
-        <Text fontFamily={'Avenir'} fontSize={'30px'} align={'center'} fontWeight={800}>
+        <Text fontSize={'30px'} align={'center'} fontWeight={800}>
           {`Registering...`}
         </Text>
         <Text
           color={'#717171'}
           fontSize={'22px'}
           align={'center'}
-          fontFamily={'Avenir'}
           fontWeight={800}
         >
           {`Hang tight, and you'll registered soon!`}
diff --git a/src/components/EventRegistration/RegistrationModal.jsx b/src/components/EventRegistration/RegistrationModal.jsx
index c23626a..8165aae 100644
--- a/src/components/EventRegistration/RegistrationModal.jsx
+++ b/src/components/EventRegistration/RegistrationModal.jsx
@@ -30,13 +30,12 @@ const RegistrationModal = ({
               color={'#717171'}
               fontSize={'20px'}
               align={'center'}
-              fontFamily={'Avenir'}
               fontWeight={800}
               mb={'-6px'}
             >
               Volunteer registration
             </Text>
-            <Text fontFamily={'Avenir'} fontSize={'32px'} align={'center'} fontWeight={800}>
+            <Text fontSize={'32px'} align={'center'} fontWeight={800}>
               {title}
             </Text>
           </ModalHeader>
diff --git a/src/components/EventRegistration/SignWaiverModal.jsx b/src/components/EventRegistration/SignWaiverModal.jsx
index 81d3e52..cb8d6e1 100644
--- a/src/components/EventRegistration/SignWaiverModal.jsx
+++ b/src/components/EventRegistration/SignWaiverModal.jsx
@@ -19,21 +19,14 @@ const SignWaiverModal = ({ registrationFlowState, ...props }) => {
       continueText={'Register'}
       {...props}
     >
-      {/* color: var(--Primary-Text, #3B3B3B);
-font-family: Avenir;
-font-size: 18px;
-font-style: normal;
-font-weight: 500;
-line-height: normal;    */}
       <Box>
-        <Text color={'#717171'} fontFamily={'Avenir'} fontSize={'16px'} fontWeight={'400'} pb="1">
+        <Text color={'#717171'} fontSize={'16px'} fontWeight={'400'} pb="1">
           Read terms and conditions
         </Text>
         {/* Terms box */}
         <Box maxH="250px" overflowY={'scroll'} borderRadius={'12px'} border="3px solid #EFEFEF">
           <Text
             color={'#3B3B3B'}
-            fontFamily={'Avenir'}
             fontSize={'18px'}
             fontWeight={'300'}
             py="3"
@@ -49,7 +42,7 @@ line-height: normal;    */}
         pt="4"
         style={{ '--chakra-colors-blue-500': '#0075FF', '--chakra-radii-sm': '5px' }}
       >
-        <Text color={'#717171'} fontFamily={'Avenir'} fontSize={'16px'} fontWeight={'400'}>
+        <Text color={'#717171'} fontSize={'16px'} fontWeight={'400'}>
           I agree to the terms and conditions
         </Text>
       </Checkbox>
diff --git a/src/components/EventRegistration/SuccessfulRegistrationModal.jsx b/src/components/EventRegistration/SuccessfulRegistrationModal.jsx
index bf633be..0acb330 100644
--- a/src/components/EventRegistration/SuccessfulRegistrationModal.jsx
+++ b/src/components/EventRegistration/SuccessfulRegistrationModal.jsx
@@ -39,14 +39,13 @@ const SuccessfulRegistrationModal = ({ ...props }) => {
         </svg>
       </Flex>
       <Box>
-        <Text fontFamily={'Avenir'} fontSize={'42px'} align={'center'} fontWeight={800}>
+        <Text fontSize={'42px'} align={'center'} fontWeight={800}>
           {`You're all set!`}
         </Text>
         <Text
           color={'#717171'}
           fontSize={'22px'}
           align={'center'}
-          fontFamily={'Avenir'}
           fontWeight={800}
         >
           {`We're excited to see you at the event!`}
diff --git a/src/components/Events/DataCard.jsx b/src/components/Events/DataCard.jsx
index 7fa4e56..7bcbc8c 100644
--- a/src/components/Events/DataCard.jsx
+++ b/src/components/Events/DataCard.jsx
@@ -4,7 +4,7 @@ const DataCard = ({ icon, text, amount }) => {
   return (
     <VStack bg="white" pt={25} pb={2} borderRadius="lg" align="center" w={'100%'}>
       {icon}
-      <Text textAlign={'center'} fontWeight={500} fontSize={18} fontFamily={'Avenir'}>
+      <Text textAlign={'center'} fontWeight={500} fontSize={18}>
         {text}
       </Text>
       <Text
@@ -12,7 +12,6 @@ const DataCard = ({ icon, text, amount }) => {
         fontSize={56}
         fontWeight={800}
         color={'rgba(0, 0, 0, 0.75)'}
-        fontFamily={'Avenir'}
       >
         {amount}
       </Text>
diff --git a/src/components/Events/DeleteEventsModal.jsx b/src/components/Events/DeleteEventsModal.jsx
index 1fac607..a039f78 100644
--- a/src/components/Events/DeleteEventsModal.jsx
+++ b/src/components/Events/DeleteEventsModal.jsx
@@ -27,7 +27,6 @@ const DeleteEventsModal = ({ isOpen, onClose, events, confirmDelete }) => {
           fontWeight="800"
           fontSize="32px"
           lineHeight="33.71px"
-          fontFamily="Avenir, sans-serif"
           style={{ display: 'block' }} // Ensure text alignment applies correctly
         >
           Are you sure you want to delete: {formattedEventNames} {eventLabel}?
diff --git a/src/components/Events/EventCard.jsx b/src/components/Events/EventCard.jsx
index 6c20a04..6ffbb03 100644
--- a/src/components/Events/EventCard.jsx
+++ b/src/components/Events/EventCard.jsx
@@ -125,7 +125,8 @@ const EventCard = ({
 
           <Box
             width={sideBySideCard ? undefined : '100%'}
-            maxW={'88%'}
+            maxW={{ base: '100px', md: '150px', lg: '275px' }}
+            // maxW={sideBySideCard ? '100%' : '86%'}
             alignSelf={'center'}
             justifySelf={'center'}
             gap={'18px'}
@@ -133,32 +134,19 @@ const EventCard = ({
             mb={sideBySideCard ? 0 : 5}
           >
             <HappeningInChip date={dateObj} mb={5} />
-
-            {name.length > 30 ? (
-              <Text
-                fontWeight="800"
-                fontSize="24px"
-                lineHeight="30px"
-                fontFamily="Avenir"
-                mt={2}
-                overflowWrap={'break-word'}
-              >
-                {name.substring(0, 30)}...
-              </Text>
-            ) : (
-              <Text
-                fontWeight="800"
-                fontSize={{ base: '20px', md: '24px' }}
-                lineHeight="30px"
-                fontFamily="Avenir"
-                mt={2}
-                overflowWrap={'break-word'}
-              >
-                {name}
-              </Text>
-            )}
             <Text
-              fontFamily="Avenir"
+              fontWeight="800"
+              fontSize={{ base: '20px', md: '24px' }}
+              lineHeight="30px"
+              mt={2}
+              overflowWrap={'break-word'}
+              overflow="hidden"
+              textOverflow="ellipsis"
+              whiteSpace="nowrap"
+            >
+              {name}
+            </Text>
+            <Text
               fontSize={sideBySideCard ? { base: '12px', md: '15px' } : '16px'}
               fontWeight={{ base: 500, md: 300 }}
               mt={1}
diff --git a/src/components/Events/FeaturedDashboard.jsx b/src/components/Events/FeaturedDashboard.jsx
index f28540d..a91878e 100644
--- a/src/components/Events/FeaturedDashboard.jsx
+++ b/src/components/Events/FeaturedDashboard.jsx
@@ -10,6 +10,7 @@ const FeaturedDashboard = ({
   setIsOpen,
   setShowOpenDrawerButton,
   onOpen,
+  isOpen,
   showOpenDrawerButton,
 }) => {
   const [featuredEvents, setFeaturedEvents] = useState([]);
@@ -55,7 +56,6 @@ const FeaturedDashboard = ({
             lineHeight="normal"
             fontStyle="normal"
             fontSize={{ base: '18px', xl: '32px' }}
-            fontFamily={'Avenir'}
             color={'rgba(0, 0, 0, 0.75)'}
           >
             Featured Events
@@ -72,7 +72,7 @@ const FeaturedDashboard = ({
             w="40px"
             icon={<RxCaretLeft size={22} />}
             onClick={onOpen}
-            display={showOpenDrawerButton ? { base: 'none', xl: 'flex' } : 'none'}
+            display={showOpenDrawerButton && !isOpen ? { base: 'none', xl: 'flex' } : 'none'}
           ></IconButton>
         </Flex>
       </Flex>
@@ -116,6 +116,7 @@ const FeaturedDashboard = ({
 };
 
 FeaturedDashboard.propTypes = {
+  isOpen: PropTypes.bool,
   onOpen: PropTypes.func,
   showOpenDrawerButton: PropTypes.bool,
   setCurrentEventId: PropTypes.func.isRequired,
diff --git a/src/components/Events/ImpactSummary.jsx b/src/components/Events/ImpactSummary.jsx
index 01b2f88..47d9bf9 100644
--- a/src/components/Events/ImpactSummary.jsx
+++ b/src/components/Events/ImpactSummary.jsx
@@ -100,6 +100,7 @@ const ImpactSummary = () => {
       backgroundColor={'#F8F8F8'}
       borderRadius={'lg'}
       py={10}
+      p={3}
     >
       <DataCard
         amount={registered}
@@ -130,7 +131,7 @@ const ImpactSummary = () => {
       />
       <VStack gap={gapBreakpoint}>
         <Box></Box>
-        <Button colorScheme={'messenger'} leftIcon={<AiOutlineExport />} size="md" mr={3}>
+        <Button colorScheme={'messenger'} leftIcon={<AiOutlineExport />} size="md">
           <CSVLink
             data={eventIdData.length ? eventIdData : []}
             filename="./data.csv"
diff --git a/src/components/Events/PastEventsImpactSummary.jsx b/src/components/Events/PastEventsImpactSummary.jsx
index 521e31e..a2a715a 100644
--- a/src/components/Events/PastEventsImpactSummary.jsx
+++ b/src/components/Events/PastEventsImpactSummary.jsx
@@ -87,6 +87,7 @@ const PastEventsImpactSummary = () => {
       backgroundColor={'#F8F8F8'}
       borderRadius={'lg'}
       py={10}
+      p={3}
     >
       <DataCard
         amount={registered}
diff --git a/src/components/Events/VolunteerImpactSummary.jsx b/src/components/Events/VolunteerImpactSummary.jsx
index 60d6c5c..37ff3c8 100644
--- a/src/components/Events/VolunteerImpactSummary.jsx
+++ b/src/components/Events/VolunteerImpactSummary.jsx
@@ -88,7 +88,7 @@ const VolunteerImpactSummary = ({ showLargestItemCollected }) => {
           index={1}
           amount={events}
           text={
-            <Text fontSize={'18px'} fontFamily={'Avenir'} fontWeight={500}>
+            <Text fontSize={'18px'} fontWeight={500}>
               Total Events Participated
             </Text>
           }
@@ -104,7 +104,7 @@ const VolunteerImpactSummary = ({ showLargestItemCollected }) => {
           index={2}
           amount={total + ' lbs'}
           text={
-            <Text fontSize={'18px'} fontFamily={'Avenir'} fontWeight={500}>
+            <Text fontSize={'18px'} fontWeight={500}>
               Total Trash Weight
             </Text>
           }
@@ -127,7 +127,7 @@ const VolunteerImpactSummary = ({ showLargestItemCollected }) => {
           index={3}
           amount={largestItem + ' lbs'}
           text={
-            <Text fontSize={'18px'} fontFamily={'Avenir'} fontWeight={500}>
+            <Text fontSize={'18px'} fontWeight={500}>
               Largest Trash Item Collected
             </Text>
           }
diff --git a/src/components/EventsTable.jsx b/src/components/EventsTable.jsx
index 1a4e0be..46c1fc1 100644
--- a/src/components/EventsTable.jsx
+++ b/src/components/EventsTable.jsx
@@ -24,7 +24,13 @@ const RenderEventRow = ({ event }) => {
           <Flex>
             <Image src={image_url} boxSize="4rem" borderRadius="full" />
             <Flex direction="column" ml={3} mt={4} g={1} overflow="hidden">
-              <Text color={'#2D3748'} whiteSpace="nowrap" overflow="hidden" textOverflow="ellipsis">
+              <Text
+                color={'#2D3748'}
+                whiteSpace="nowrap"
+                overflow="hidden"
+                textOverflow="ellipsis"
+                maxWidth={{ base: '100px', xl: '300px' }}
+              >
                 {name}
               </Text>
             </Flex>
diff --git a/src/components/Leaderboard/Leaderboard.jsx b/src/components/Leaderboard/Leaderboard.jsx
index 0bfbccb..7845b3f 100644
--- a/src/components/Leaderboard/Leaderboard.jsx
+++ b/src/components/Leaderboard/Leaderboard.jsx
@@ -89,7 +89,14 @@ const LeaderboardCard = ({ event_id }) => {
                   2
                 </Text>
               </Flex>
-              <Text fontWeight="medium" fontSize={{ base: '16px', xl: '16px' }} textAlign="center">
+              <Text
+                fontWeight="medium"
+                fontSize={{ base: '16px', xl: '16px' }}
+                textAlign="center"
+                whiteSpace="nowrap"
+                maxWidth={{ base: '100px', xl: '150px' }}
+                overflow="hidden"
+              >
                 {LeaderboardArray[1] && LeaderboardArray[1].volunteer_first_name}{' '}
                 {LeaderboardArray[1] && LeaderboardArray[1].volunteer_last_name}
               </Text>
@@ -118,6 +125,9 @@ const LeaderboardCard = ({ event_id }) => {
                 fontWeight="semibold"
                 fontSize={{ base: '16px', xl: '16px' }}
                 textAlign="center"
+                whiteSpace="nowrap"
+                maxWidth={{ base: '100px', xl: '150px' }}
+                overflow="hidden"
               >
                 {LeaderboardArray[2] && LeaderboardArray[2].volunteer_first_name}{' '}
                 {LeaderboardArray[2] && LeaderboardArray[2].volunteer_last_name}
diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
index 0d48d4b..c7944b1 100644
--- a/src/components/Navbar/Navbar.jsx
+++ b/src/components/Navbar/Navbar.jsx
@@ -309,15 +309,16 @@ const Navbar = () => {
               >
                 {/* User name */}
                 <Text
-                  style={{
-                    fontWeight: '800',
-                    color: '#000000',
-                    fontSize: '14px',
-                    lineHeight: '25px',
-                    textAlign: 'left',
-                    overflowY: 'auto',
-                    marginTop: '-1px',
-                  }}
+                  maxWidth={{ base: '219px', md: '150px', xl: '100px' }}
+                  overflow="hidden"
+                  textOverflow="ellipsis"
+                  fontWeight='800'
+                  color='#000000'
+                  fontSize='14px'
+                  lineHeight='25px'
+                  textAlign='left'
+                  marginTop='-1px'
+                  whiteSpace='nowrap'
                 >
                   {user?.first_name} {user?.last_name}
                 </Text>
@@ -365,4 +366,4 @@ const Navbar = () => {
   );
 };
 
-export default Navbar;
+export default Navbar;
\ No newline at end of file
diff --git a/src/components/Scanner.jsx b/src/components/Scanner.jsx
deleted file mode 100644
index 2e94c7f..0000000
--- a/src/components/Scanner.jsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { QrReader } from 'react-qr-reader';
-import { useState } from 'react';
-import Backend from '../utils/utils';
-
-const Scanner = () => {
-  const [data, setData] = useState();
-
-  const checkinVolunteer = async ({ event_id, volunteer_id }) => {
-    const resp = await Backend.patch(`/data/checkin/${event_id}/${volunteer_id}`);
-    return resp.data;
-  };
-
-  return (
-    <>
-      <QrReader
-        scanDelay={1000}
-        onResult={result => {
-          if (result) {
-            setData(result.getText()); // Displays the link obtained
-            checkinVolunteer(result.event_id, result.volunteer_id);
-
-            // const event_id = 35;
-            // const volunteer_id = 112;
-            // checkinVolunteer({ event_id, volunteer_id });
-          }
-        }}
-        ViewFinder={() => {
-          return <div style={{ width: 500, height: 'fit' }} />;
-        }}
-      />
-      <p>{data}</p>
-    </>
-  );
-};
-
-export default Scanner;
diff --git a/src/components/Scanner.tsx b/src/components/Scanner.tsx
new file mode 100644
index 0000000..a0da0f1
--- /dev/null
+++ b/src/components/Scanner.tsx
@@ -0,0 +1,118 @@
+import { QrReader } from 'react-qr-reader';
+import React, { useState } from 'react';
+import Backend from '../utils/utils';
+import {
+  Button,
+  Text,
+  Modal,
+  ModalCloseButton,
+  ModalContent,
+  ModalOverlay,
+} from '@chakra-ui/react';
+import PropTypes from 'prop-types';
+
+interface QRCodeData {
+  first_name: string;
+  last_name: string;
+  id: number;
+}
+
+interface VolunteerCodeData {
+  first_name: string;
+  last_name: string;
+  id: number;
+}
+
+interface ScannerProps {
+  event_id: string | undefined;
+  isOpen: boolean;
+  onClose: React.Dispatch<React.SetStateAction<boolean>>;
+  handleSuccess: (volunteer: any) => Promise<void>;
+}
+
+const Scanner = ({ event_id, isOpen, onClose, handleSuccess }: ScannerProps) => {
+  const [data, setData] = useState<QRCodeData>();
+  const [error, setError] = useState(false);
+  const [volunteerData, setVolunteerData] = useState<VolunteerCodeData>();
+
+  const checkinVolunteer = async (volunteer_id: number) => {
+    const volunteer = await Backend.get(`/profiles/${volunteer_id}`); // get Volunteer object
+
+    handleSuccess({ ...volunteer.data, number_in_party: 1, event_data_id: Number(event_id) });
+    handleClose();
+  };
+
+  const handleClose = () => {
+    setData(undefined);
+    setError(false);
+
+    onClose(false);
+  };
+
+  return (
+    <>
+      <Modal isOpen={isOpen} onClose={handleClose}>
+        <ModalOverlay backgroundColor={'rgba(0, 0, 0, .5)'} />
+        <ModalContent padding={5}>
+          <ModalCloseButton backgroundColor={'#EFEFEF'} borderRadius={'100px'} />
+
+          <Button onClick={() => checkinVolunteer(227)}>Success</Button>
+
+          <QrReader
+            scanDelay={1000}
+            onResult={async result => {
+              if (result) {
+                let data;
+
+                try {
+                  data = JSON.parse(result.getText());
+                  console.log('Before backend call');
+                  console.log(data);
+                  const volunteerDataResp = await Backend.get(`/profiles/${result}`);
+                  // console.log("Look here");
+                  // console.log(volunteerData);
+                  setVolunteerData(volunteerDataResp.data);
+                } catch (e) {
+                  console.error('Failed parsing QR Code:', e);
+                  setError(true);
+                }
+
+                setData(data);
+              }
+            }}
+            constraints={{ facingMode: 'user' }}
+            ViewFinder={() => {
+              return <div style={{ width: 500, height: 'fit' }} />;
+            }}
+          />
+
+          {error && (
+            <Text display={'flex'} justifyContent={'center'} paddingTop={4}>
+              Error: No valid volunteer found
+            </Text>
+          )}
+
+          {!error && data && (
+            <>
+              <Text display={'flex'} justifyContent={'center'} paddingY={4}>
+                Volunteer: {volunteerData?.first_name} {volunteerData?.last_name}
+              </Text>
+              <Button onClick={() => checkinVolunteer(volunteerData?.id)} disabled={!data?.id}>
+                Sign In
+              </Button>
+            </>
+          )}
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
+
+Scanner.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  handleSuccess: PropTypes.func.isRequired,
+  event_id: PropTypes.string.isRequired,
+};
+
+export default Scanner;
diff --git a/src/components/VolunteerSideView.jsx b/src/components/VolunteerSideView.jsx
index 87b294f..c2436a6 100644
--- a/src/components/VolunteerSideView.jsx
+++ b/src/components/VolunteerSideView.jsx
@@ -146,7 +146,7 @@ const VolunteerSideView = ({ eventId, onClose, setShowOpenDrawerButton }) => {
             gap={'0.3em'}
           >
             <IoPeopleSharp color="purple" />
-            <Text>{eventDataVolunteer[0]?.number_in_party > 1 ? "Group" : "Individual"}</Text>
+            <Text>{eventDataVolunteer[0]?.number_in_party > 1 ? 'Group' : 'Individual'}</Text>
           </Flex>
         </Flex>
         <Flex justify={'space-between'} alignItems={'center'}>
@@ -162,7 +162,7 @@ const VolunteerSideView = ({ eventId, onClose, setShowOpenDrawerButton }) => {
             gap={'0.3em'}
           >
             <CalendarIcon color="purple" />
-            <Text>{eventDataVolunteer[0]?.is_checked_in ? "Checked-in" : "Registered"}</Text>
+            <Text>{eventDataVolunteer[0]?.is_checked_in ? 'Checked-in' : 'Registered'}</Text>
           </Flex>
         </Flex>
         <Flex justify={'space-between'} alignItems={'center'}>
diff --git a/src/components/VolunteerSideViewDrawer.jsx b/src/components/VolunteerSideViewDrawer.jsx
new file mode 100644
index 0000000..e183601
--- /dev/null
+++ b/src/components/VolunteerSideViewDrawer.jsx
@@ -0,0 +1,278 @@
+import { Flex, Button, Image, Text, HStack, Box, VStack, IconButton } from '@chakra-ui/react';
+import {
+  Drawer,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerCloseButton,
+  DrawerBody,
+} from '@chakra-ui/react';
+import PropTypes from 'prop-types';
+import { useState, useEffect } from 'react';
+import { Icon } from '@chakra-ui/react';
+import { getEventById } from '../utils/eventsUtils';
+import { EditIcon, CalendarIcon } from '@chakra-ui/icons';
+import logos_google_calendar from '../assets/logos_google-calendar.svg';
+import logos_google_maps from '../assets/logos_google-maps.svg';
+import { IoPeopleSharp } from 'react-icons/io5';
+import { IoMdLink } from 'react-icons/io';
+import { RxCaretRight } from 'react-icons/rx';
+import HappeningInChip from './HappeningInChip/HappeningInChip';
+
+const VolunteerSideView = ({ eventId, isOpen, onClose, setShowOpenDrawerButton }) => {
+  const [eventData, setEventData] = useState([]);
+  const [isReadMore, setIsReadMore] = useState(false);
+  const [calendarSelected, setCalendarSelected] = useState(false);
+  const [mapSelected, setMapSelected] = useState(false);
+  // const [dateObj, setDateObj] = useState(new Date());
+  const dateObj = new Date(Date.parse(eventData.date));
+  // console.log(eventData);
+
+  useEffect(() => {
+    getEventById(eventId).then(data => setEventData(data));
+    // setDateObj(new Date(Date.parse(eventData.date)))
+  }, [eventId]);
+
+  // console.log('e', eventData);
+  // console.log('d', dateObj)
+
+  function formatDate(dateString) {
+    const months = [
+      'Jan',
+      'Feb',
+      'Mar',
+      'Apr',
+      'May',
+      'Jun',
+      'Jul',
+      'Aug',
+      'Sep',
+      'Oct',
+      'Nov',
+      'Dec',
+    ];
+    console.log('dateString', dateString);
+    const date = new Date(dateString);
+    const month = months[date.getUTCMonth()];
+    const day = date.getUTCDate();
+    const year = date.getUTCFullYear();
+    const time = dateObj.toLocaleString('default', { timeStyle: 'short' });
+    // const time =
+    //   date.getUTCHours().toString().padStart(2, '0') +
+    //   ':' +
+    //   date.getUTCMinutes().toString().padStart(2, '0') +
+    //   (hours >= 12 ? ' PM' : ' AM');
+
+    return `${month} ${day}, ${year} @ ${time}`;
+  }
+  return (
+    <Drawer isOpen={isOpen} placement="right" onClose={onClose} size="full">
+      <DrawerOverlay />
+      <DrawerContent>
+        <DrawerCloseButton />
+        <DrawerBody>
+          <Flex
+            flexDir={'column'}
+            w={'100%'}
+            maxW={'26em'}
+            mt={'1em'}
+            px={{ base: '10px', md: '20px' }}
+          >
+            <HStack justify={'center'} align={'center'}>
+              <IconButton
+                borderRadius="md"
+                borderColor="#EFEFEF"
+                bg="white"
+                variant={'outline'}
+                borderWidth={'2px'}
+                icon={<RxCaretRight size={22} />}
+                onClick={() => {
+                  onClose();
+                  setShowOpenDrawerButton(true);
+                }}
+              />
+              <Flex
+                bg="#EFEFEF"
+                borderRadius="md"
+                py={'0.5em'}
+                w={'100%'}
+                justify={'center'}
+                align={'center'}
+              >
+                <HStack>
+                  <Icon viewBox="0 0 200 200" color="green.500">
+                    <path
+                      fill="currentColor"
+                      d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"
+                    />
+                  </Icon>
+                  <Text w={'100%'} fontWeight={600}>
+                    <HappeningInChip date={dateObj} />
+                  </Text>
+                </HStack>
+              </Flex>
+            </HStack>
+
+            <Box
+              p={'0.8em'}
+              borderWidth={'0.2em'}
+              borderRadius="lg"
+              my={'0.8em'}
+              borderColor={'#EFEFEF'}
+            >
+              <Flex justify={'space-between'} alignItems={'center'}>
+                <Text fontWeight={'bold'}>Your event status</Text>
+                <Box px={'0.4em'} borderRadius={'md'} bg="gray.200">
+                  <EditIcon />
+                </Box>
+              </Flex>
+              <Flex justify={'space-between'} alignItems={'center'}>
+                <Text>Type</Text>
+                <Flex
+                  flexDir={'row'}
+                  px={'0.4em'}
+                  borderRadius={'md'}
+                  bg="gray.200"
+                  justifyContent={'center'}
+                  alignItems={'center'}
+                  gap={'0.3em'}
+                >
+                  <IoPeopleSharp color="purple" />
+                  <Text>Group</Text>
+                </Flex>
+              </Flex>
+              <Flex justify={'space-between'} alignItems={'center'}>
+                <Text>Registration</Text>
+                <Flex
+                  flexDir={'row'}
+                  px={'0.4em'}
+                  borderRadius={'md'}
+                  borderWidth={'0.15em'}
+                  justifyContent={'center'}
+                  alignItems={'center'}
+                  gap={'0.3em'}
+                >
+                  <CalendarIcon color="purple" />
+                  <Text>Registered</Text>
+                </Flex>
+              </Flex>
+              <Flex justify={'space-between'} alignItems={'center'}>
+                <Text>Party size</Text>
+                <Text fontWeight={'bold'}>12 people</Text>
+              </Flex>
+            </Box>
+
+            <VStack spacing={4} mb={'0.5em'}>
+              <Image
+                h={{ base: '200px', md: '400px' }}
+                w="100%"
+                fit={'cover'}
+                borderRadius="md"
+                src={eventData.image_url}
+              />
+              <Text
+                fontWeight={'bold'}
+                fontSize={{ base: '24px', md: '28px' }}
+                textAlign={'start'}
+                w={'100%'}
+              >
+                {eventData.name}
+              </Text>
+              <Text
+                fontWeight={'medium'}
+                color={'gray.500'}
+                fontSize={{ base: '14px', md: '15px' }}
+                textAlign={'start'}
+                w={'100%'}
+              >
+                {formatDate(eventData.date)}
+              </Text>
+              <Text noOfLines={isReadMore ? null : 3} w={'100%'}>
+                {eventData.description}
+              </Text>
+              <Button
+                size="sm"
+                variant="link"
+                colorScheme="blue"
+                onClick={() => setIsReadMore(!isReadMore)}
+              >
+                {isReadMore ? 'Read less...' : 'Read more...'}
+              </Button>
+            </VStack>
+
+            <Flex
+              border={'0.2em solid #EFEFEF'}
+              borderRadius={'0.5em'}
+              p={'1em'}
+              flexDirection={'column'}
+              gap={'1em'}
+              mb={'1.5em'}
+            >
+              <Text as="b" textAlign={'left'} fontSize={'lg'}>
+                Add this event to:
+              </Text>
+              <HStack spacing={3}>
+                <Button
+                  onClick={() => setCalendarSelected(prev => !prev)}
+                  bg={calendarSelected ? 'blue.300' : 'gray.200'}
+                  leftIcon={<Image src={logos_google_calendar} h="1em" w="1em" />}
+                  rightIcon={
+                    <IoMdLink size="18px" color={calendarSelected ? 'white' : 'blue.500'} />
+                  }
+                  size="sm"
+                  px={2}
+                  borderColor={calendarSelected ? '#0075FF' : 'transparent'}
+                  borderWidth="2px"
+                  _active={{
+                    borderColor: '#0075FF',
+                  }}
+                >
+                  Calendar
+                </Button>
+                <Button
+                  onClick={async () => {
+                    setMapSelected(prev => !prev);
+                    const { location } = await getEventById(eventId);
+                    window.open(
+                      `https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(location)}`,
+                    );
+                  }}
+                  bg={mapSelected ? 'blue.300' : 'gray.200'}
+                  leftIcon={<Image src={logos_google_maps} h="1em" w="1em" />}
+                  rightIcon={<IoMdLink size="18px" color={mapSelected ? 'white' : 'blue.500'} />}
+                  size="sm"
+                  px={2}
+                  borderColor={mapSelected ? '#0075FF' : 'transparent'}
+                  borderWidth="2px"
+                  _active={{
+                    borderColor: '#0075FF',
+                  }}
+                >
+                  Google Maps
+                </Button>
+              </HStack>
+            </Flex>
+
+            <Button
+              w="full"
+              backgroundColor={'#0075FF'}
+              color={'white'}
+              _hover={{ bg: 'blue.500' }}
+              size="lg"
+            >
+              Check-In
+            </Button>
+          </Flex>
+        </DrawerBody>
+      </DrawerContent>
+    </Drawer>
+  );
+};
+
+VolunteerSideView.propTypes = {
+  eventId: PropTypes.string.isRequired,
+  isOpen: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+  setShowOpenDrawerButton: PropTypes.func.isRequired,
+};
+
+export default VolunteerSideView;
diff --git a/src/components/VolunteersTable.jsx b/src/components/VolunteersTable.jsx
index c7ac11d..a477ea8 100644
--- a/src/components/VolunteersTable.jsx
+++ b/src/components/VolunteersTable.jsx
@@ -54,9 +54,9 @@ const RenderVolunteerRow = ({ volunteer }) => {
     <>
       <Tr key={id} bg="#FFFFFF" fontWeight={'medium'}>
         <Td>
-          <Flex>
+          <Flex maxWidth={{ base: '200px', md: '300px', lg: '300px', xl: '300px' }}>
             <Image src={image_url} boxSize="4rem" borderRadius="full" objectFit={'cover'} />
-            <Flex direction="column" ml={3} mt={4} g={1} overflow="hidden">
+            <Flex direction="column" ml={3} mt={4} g={1} maxW="75%">
               <Text color={'#2D3748'} whiteSpace="nowrap" overflow="hidden" textOverflow="ellipsis">
                 {first_name} {last_name}
               </Text>
diff --git a/src/pages/AdminPage.jsx b/src/pages/AdminPage.jsx
index 037f331..be2149a 100644
--- a/src/pages/AdminPage.jsx
+++ b/src/pages/AdminPage.jsx
@@ -96,7 +96,7 @@ export default function AdminPage() {
   return (
     <Flex ml="15rem" flexDir={'column'} padding={'2%'} gap={'1em'} backgroundColor={'#C8E6FF'}>
       <Flex justify={'space-between'}>
-        <Text fontFamily={'Poppins'} fontSize={'2.3rem'} fontWeight={500}>
+        <Text fontSize={'2.3rem'} fontWeight={500}>
           Administrators
         </Text>
         <Button borderRadius={20} onClick={openAddModal} backgroundColor={'#EFEFEF'}>
diff --git a/src/pages/CheckinPage.jsx b/src/pages/CheckinPage.jsx
index 84549c3..a894bf7 100644
--- a/src/pages/CheckinPage.jsx
+++ b/src/pages/CheckinPage.jsx
@@ -11,6 +11,7 @@ import CheckinInputPageToggle from '../components/Checkin/CheckinInputPageToggle
 import { ArrowBackIcon, HamburgerIcon } from '@chakra-ui/icons';
 import CheckinModal from '../components/Checkin/CheckinModal';
 import NavbarContext from '../utils/NavbarContext';
+import Scanner from '../components/Scanner';
 
 import { useParams } from 'react-router-dom';
 import { useNavigate } from 'react-router-dom';
@@ -29,6 +30,7 @@ import {
 
 import { GreyCustomSearchIcon } from '../components/Icons/CustomSearchIcon';
 import RegisterGuestModal from '../components/RegisterGuestModal/RegisterGuestModal';
+import { FaCamera } from 'react-icons/fa';
 
 const CheckinPage = () => {
   const [joinedData, setJoinedData] = useState([]);
@@ -45,7 +47,9 @@ const CheckinPage = () => {
 
   const navigate = useNavigate();
   const [isCheckinModalOpen, setIsCheckinModalOpen] = useState(false);
+  const [isScannerModalOpen, setIsScannerModalOpen] = useState(false);
   const [selectedVolunteer, setSelectedVolunteer] = useState(null);
+  const [usingScanner, setUsingScanner] = useState(false);
 
   useEffect(() => {
     // 0 is all, 1 is checked-in, 2 is not checked-in, 3 are guests
@@ -104,6 +108,13 @@ const CheckinPage = () => {
     }
   }, [input, joinedData, eventId]);
 
+  const handleScannerSuccess = async (volunteer) => {
+    setSelectedVolunteer(volunteer);
+    setIsCheckinModalOpen(true);
+    setUsingScanner(true);
+    // await Backend.patch(`/data/checkin/${eventId}/${volunteer.id}`); // update backend with user
+  };
+
   /*
     updates check in status for a volunteer on the backend, dynamically rerenders it on the frontend
   */
@@ -111,11 +122,23 @@ const CheckinPage = () => {
     try {
       const event_data_id = volunteer.event_data_id;
       console.log(event_data_id, numberOfParticipants);
+      console.log(volunteer);
+
+      let response;
+
+      if (!usingScanner) {
+        response = await Backend.put(`/data/checkin/${volunteer.event_data_id}`, {
+          number_in_party: numberOfParticipants,
+        });
+      } else {
+        response = await Backend.patch(`/data/checkin/${volunteer.event_data_id}/${volunteer.id}`, {
+          number_in_party: numberOfParticipants,
+        });
+      }
 
-      // const response = await Backend.put(`/data/checkin/${event_data_id}`, {
-      //   number_in_party: numberOfParticipants,
-      // });
+      console.log('Response from server:', response);
 
+      setUsingScanner(false);
       await setData(); // Refresh data
     } catch (err) {
       console.error('Error in changeIsCheckedIn:', err);
@@ -244,7 +267,31 @@ const CheckinPage = () => {
             </Box>
           </Alert>
         )}
+
+        <Button
+          position={'fixed'}
+          bottom={'3%'}
+          right={'3%'}
+          bg={'#0075FF'}
+          color={'white'}
+          display={'flex'}
+          gap={'.5rem'}
+          fontSize={'xl'}
+          _hover={{ bgColor: '#0075FFCC' }}
+          onClick={() => setIsScannerModalOpen(true)}
+          py={6}
+        >
+          <FaCamera /> Scan
+        </Button>
       </Container>
+
+      <Scanner
+        event_id={eventId}
+        isOpen={isScannerModalOpen}
+        onClose={setIsScannerModalOpen}
+        handleSuccess={handleScannerSuccess}
+      />
+
       <CheckinModal
         isOpen={isCheckinModalOpen}
         onClose={closeCheckinModal}
diff --git a/src/pages/DummyProfilePage.jsx b/src/pages/DummyProfilePage.jsx
index e0f846d..c1544b1 100644
--- a/src/pages/DummyProfilePage.jsx
+++ b/src/pages/DummyProfilePage.jsx
@@ -197,7 +197,16 @@ export const DummyProfilePage = () => {
               padding={'2%'}
             >
               <Stack spacing="1">
-                <Heading size="sm" mt={2} mb={1} maxW={'150px'} margin={3}>
+                <Heading
+                  size="sm"
+                  mt={2}
+                  mb={1}
+                  maxW={{ base: '150px', md: '200px', xl: '225px' }}
+                  textOverflow="ellipsis"
+                  overflow="hidden"
+                  whiteSpace="nowrap"
+                  margin={3}
+                >
                   {`${user.first_name} ${user.last_name}`}
                 </Heading>
                 <Center>
@@ -260,7 +269,15 @@ export const DummyProfilePage = () => {
             </Center>
             <Center bg={'#efefef'} borderBottomRadius={10}>
               <Stack spacing="1">
-                <Heading size="md" mt={2} mb={1}>
+                <Heading
+                  size="md"
+                  mt={2}
+                  mb={1}
+                  maxW={{ base: '150px', md: '200px', xl: '225px' }}
+                  overflow="hidden"
+                  whiteSpace="nowrap"
+                  textOverflow="ellipsis"
+                >
                   {`${user.first_name} ${user.last_name}`}
                 </Heading>
                 <Center>
diff --git a/src/pages/ForgotPasswordV2.jsx b/src/pages/ForgotPasswordV2.jsx
index 04f0de4..0c46bee 100644
--- a/src/pages/ForgotPasswordV2.jsx
+++ b/src/pages/ForgotPasswordV2.jsx
@@ -75,7 +75,7 @@ const ForgotPasswordForm = () => {
   return (
     <Box>
       <Center>
-        <Heading marginTop={10} fontFamily={'Poppins'} fontSize={32}>
+        <Heading marginTop={10} fontSize={32}>
           Forgot Password?
         </Heading>
       </Center>
@@ -93,7 +93,6 @@ const ForgotPasswordForm = () => {
               marginTop={30}
               borderRadius={8}
               placeholder="Email"
-              fontFamily={'Avenir'}
               boxShadow={'0 4px 2px -2px gray'}
               type="email"
               size={'lg'}
diff --git a/src/pages/LoginV2.jsx b/src/pages/LoginV2.jsx
index 69fd46a..83c0661 100644
--- a/src/pages/LoginV2.jsx
+++ b/src/pages/LoginV2.jsx
@@ -152,7 +152,6 @@ const LoginForm = () => {
                 maxW={'20rem'}
                 marginTop={30}
                 borderRadius={8}
-                fontFamily={'Avenir'}
                 placeholder="Email"
                 boxShadow={'0 4px 2px -2px gray'}
                 type="email"
@@ -170,7 +169,6 @@ const LoginForm = () => {
                 maxW={'20rem'}
                 marginTop={30}
                 borderRadius={8}
-                fontFamily={'Avenir'}
                 placeholder="Password"
                 type="password"
                 boxShadow={'0 4px 2px -2px gray'}
@@ -200,7 +198,6 @@ const LoginForm = () => {
                 marginTop={2}
                 fontWeight="bold"
                 style={{
-                  fontFamily: 'Avenir',
                   fontSize: '20px',
                   fontWeight: '500',
                 }}
@@ -236,7 +233,6 @@ const LoginForm = () => {
 
               <Box
                 style={{
-                  fontFamily: 'Avenir',
                   fontSize: '18px',
                   fontWeight: '800',
                   textAlign: 'center',
@@ -246,7 +242,6 @@ const LoginForm = () => {
                   style={{
                     background: 'none',
                     height: '24px',
-                    fontFamily: 'Avenir',
                     fontSize: '18px',
                     fontWeight: '800',
                     textAlign: 'center',
@@ -267,7 +262,6 @@ const LoginForm = () => {
                         background: 'none',
                         height: '24px',
                         color: '#478CB6',
-                        fontFamily: 'Avenir',
                         fontSize: '18px',
                         fontWeight: '800',
                         textAlign: 'center',
diff --git a/src/pages/QRCodePage.jsx b/src/pages/QRCodePage.jsx
index a8546c0..51b3dd3 100644
--- a/src/pages/QRCodePage.jsx
+++ b/src/pages/QRCodePage.jsx
@@ -46,7 +46,13 @@ function QRCodePage() {
           />
         </Box>
 
-        <Box>
+        <Box
+          textAlign="center"
+          maxWidth={{ base: '350px', md: '375px' }}
+          textOverflow="ellipsis"
+          whiteSpace="nowrap"
+          overflow="hidden"
+        >
           <Text fontSize="4xl" as="b" color={'3B3B3B'}>
             {volunteerFirstName} {volunteerLastName}
           </Text>
diff --git a/src/pages/SignupV2.jsx b/src/pages/SignupV2.jsx
index 908fc0e..e06ce28 100644
--- a/src/pages/SignupV2.jsx
+++ b/src/pages/SignupV2.jsx
@@ -131,7 +131,6 @@ const CreateAccount = () => {
                   width={'100%'}
                   marginTop={30}
                   marginRight={'70%'}
-                  fontFamily={'Avenir'}
                   size={'lg'}
                   borderRadius={8}
                   boxShadow={'0 4px 2px -2px gray'}
@@ -148,7 +147,6 @@ const CreateAccount = () => {
                   marginTop={30}
                   size={'lg'}
                   borderRadius={8}
-                  fontFamily={'Avenir'}
                   boxShadow={'0 4px 2px -2px gray'}
                   placeholder="Last name"
                   type="text"
@@ -163,7 +161,6 @@ const CreateAccount = () => {
                   marginTop={30}
                   size={'lg'}
                   borderRadius={8}
-                  fontFamily={'Avenir'}
                   boxShadow={'0 4px 2px -2px gray'}
                   placeholder={'Email'}
                   type="email"
@@ -182,7 +179,6 @@ const CreateAccount = () => {
                   marginTop={30}
                   size={'lg'}
                   borderRadius={8}
-                  fontFamily={'Avenir'}
                   boxShadow={'0 4px 2px -2px gray'}
                   placeholder={'Password'}
                   type="password"
@@ -201,7 +197,6 @@ const CreateAccount = () => {
                   marginTop={30}
                   size={'lg'}
                   borderRadius={8}
-                  fontFamily={'Avenir'}
                   boxShadow={'0 4px 2px -2px gray'}
                   placeholder={'Confirm Password'}
                   type="password"
diff --git a/src/pages/VolunteerEventPage.jsx b/src/pages/VolunteerEventPage.jsx
index c11463c..755320f 100644
--- a/src/pages/VolunteerEventPage.jsx
+++ b/src/pages/VolunteerEventPage.jsx
@@ -6,21 +6,30 @@ import { useContext, useState } from 'react';
 import NavbarContext from '../utils/NavbarContext';
 import VolunteerSideView from '../components/VolunteerSideView.jsx';
 import { RxCaretLeft } from 'react-icons/rx';
+import { useBreakpoint, useDisclosure } from '@chakra-ui/react';
+import VolunteerSideViewDrawer from '../components/VolunteerSideViewDrawer.jsx';
 // import RegistrationFlowController from '../components/EventRegistration/RegistrationFlowController.jsx';
 
 const VolunteerEventPage = () => {
-  const { onNavbarDrawerOpen } = useContext(NavbarContext);
-  // eslint-disable-next-line
-  const [currentEventId, setCurrentEventId] = useState(-1);
+  const { isOpen: isDrawerOpen, onOpen: onDrawerOpen, onClose: onDrawerClose } = useDisclosure();
+  const [isOpen, setIsOpen] = useState(false);
+  const onClose = () => setIsOpen(!isOpen);
 
+  const { onNavbarDrawerOpen } = useContext(NavbarContext);
+  const [currentEventId, setCurrentEventId] = useState(null); // Initial state is null to indicate no event selected
+  const breakpoint = useBreakpoint();
   const [showOpenDrawerButton, setShowOpenDrawerButton] = useState(false);
-  const [isOpen, setIsOpen] = useState(false);
-  const onOpen = () => {
-    setIsOpen(!isOpen);
+
+  const openEventDrawer = eventId => {
+    setCurrentEventId(eventId); // Set the current event ID, which triggers the side view to display
     setShowOpenDrawerButton(false);
+    onDrawerOpen();
   };
-  const onClose = () => setIsOpen(!isOpen);
 
+  // const handleClose = () => {
+  //   onDrawerClose();
+  // };
+  console.log('test' + currentEventId);
   // const {
   //   isOpen: isRegistrationFlowOpen,
   //   onOpen: onRegistrationFlowOpen,
@@ -76,7 +85,7 @@ const VolunteerEventPage = () => {
             flex-shrink="0"
             borderRadius={'xl'}
             flexDir={'column'}
-            display={showOpenDrawerButton ? { base: 'flex', xl: 'none' } : 'none'}
+            display={showOpenDrawerButton && !isDrawerOpen ? { base: 'flex', xl: 'none' } : 'none'}
           >
             <IconButton
               borderRadius="md"
@@ -87,39 +96,47 @@ const VolunteerEventPage = () => {
               h="64px"
               w="64px"
               icon={<RxCaretLeft size={40} />}
-              onClick={onOpen}
+              onClick={() => {
+                onDrawerOpen();
+              }}
             ></IconButton>
           </Flex>
         </Flex>
         <FeaturedDashboard
           width={{ base: '90%' }}
-          onOpen={onOpen}
+          onOpen={onDrawerOpen}
           setCurrentEventId={setCurrentEventId}
           setIsOpen={setIsOpen}
           setShowOpenDrawerButton={setShowOpenDrawerButton}
           showOpenDrawerButton={showOpenDrawerButton}
+          isOpen={isDrawerOpen}
         />
         <EventFilteredGrid
           width={{ base: '90%' }}
-          setCurrentEventId={setCurrentEventId}
+          setCurrentEventId={openEventDrawer} // Adjusted to call `openEventDrawer`
           setIsOpen={setIsOpen}
           setShowOpenDrawerButton={setShowOpenDrawerButton}
           isOpen={isOpen}
         />
       </Box>
-      <Box w={isOpen ? '480px' : 0} flexShrink={0}>
-        <Box pos={'fixed'} right={'0'} top={'0'} h={'100%'} overflowY={'auto'} paddingBottom={10}>
-          {isOpen && (
-            <VolunteerSideView
-              eventId={currentEventId}
-              onClose={onClose}
-              setShowOpenDrawerButton={setShowOpenDrawerButton}
-            />
-          )}
-        </Box>
-      </Box>
+      {/* Drawer Component */}
+      {breakpoint == 'base' ? (
+        <VolunteerSideViewDrawer
+          eventId={currentEventId}
+          isOpen={isDrawerOpen}
+          onClose={onDrawerClose}
+          setShowOpenDrawerButton={setShowOpenDrawerButton}
+        />
+      ) : (
+        isOpen && (
+          <VolunteerSideView
+            eventId={currentEventId}
+            onClose={onClose}
+            setShowOpenDrawerButton={setShowOpenDrawerButton}
+          />
+        )
+      )}
     </Flex>
   );
 };
-
 export default VolunteerEventPage;
diff --git a/src/pages/VolunteerHomePage.jsx b/src/pages/VolunteerHomePage.jsx
index fd2425a..cf6d8a4 100644
--- a/src/pages/VolunteerHomePage.jsx
+++ b/src/pages/VolunteerHomePage.jsx
@@ -208,19 +208,20 @@ const VolunteerHomePage = () => {
               </Box>
             </Flex>
             <Spacer />
-            <Box display="flex" flex-direction="space-between" justifyContent={'start'}>
-              <Box marginTop="3vh">
+            <Flex w={'full'} flex-direction="space-between" justifyContent={'start'}>
+              <Flex w={'full'} marginTop="3vh">
                 <Grid
+                  w={'full'}
                   templateColumns={{
                     base: 'repeat(1, 85vw)',
-                    md: isOpen ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)',
+                    md: isOpen ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)',
                   }}
                   gap={6}
                 >
                   {eventCards}
                 </Grid>
-              </Box>
-            </Box>
+              </Flex>
+            </Flex>
           </Box>
         </Flex>
       </Flex>
diff --git a/src/pages/Volunteers.jsx b/src/pages/Volunteers.jsx
index bd48425..4c15277 100644
--- a/src/pages/Volunteers.jsx
+++ b/src/pages/Volunteers.jsx
@@ -19,6 +19,7 @@ import Fuse from 'fuse.js';
 import { TrophyIcon } from '../components/Icons/TrophyIcon';
 import NavbarContext from '../utils/NavbarContext';
 import { MdPeopleAlt } from 'react-icons/md';
+import { CSVLink } from 'react-csv';
 
 const Volunteers = () => {
   const [registered, setRegistered] = useState('');
@@ -27,8 +28,19 @@ const Volunteers = () => {
   const [volunteers, setVolunteers] = useState([]);
   const [displayedVolunteers, setDisplayedVolunteers] = useState([]);
   const [input, setInput] = useState('');
+  const [volunteerData, setVolunteerData] = useState([]);
   const { onNavbarDrawerOpen } = useContext(NavbarContext);
 
+  const header = [
+    { key: 'name', label: 'NAME' },
+    { key: 'email', label: 'EMAIL' },
+    { key: 'phone_number', label: 'PHONE_NUMBER' },
+    { key: 'organization', label: 'ORGANIZATION' },
+    { key: 'about_me', label: 'ABOUT_ME' },
+    { key: 'total_trash', label: 'TOTAL_TRASH' },
+    { key: 'events_attended', label: 'EVENTS_ATTENDED' },
+  ];
+
   const setData = async () => {
     try {
       const res = await Backend.get('/stats/registered');
@@ -69,6 +81,19 @@ const Volunteers = () => {
     }
   }, [input, volunteers]);
 
+  useEffect(() => {
+    const getVolunteerData = async () => {
+      try {
+        const volunteerData = await Backend.get(`/stats/export/volunteers`);
+        setVolunteerData(volunteerData.data);
+      } catch (err) {
+        console.log(err.message);
+      }
+    };
+
+    getVolunteerData();
+  }, []);
+
   return (
     <>
       {/* Registered + Checked-In */}
@@ -162,44 +187,65 @@ const Volunteers = () => {
                   bg="#D4E4F9"
                   padding="3"
                   fontSize="lg"
-                  display="flex"
-                  justifyContent="space-between"
+                  justify="space-between"
                   alignItems="center"
                   w="100%"
                   borderRadius={'4.541px'}
+                  maxWidth={{ base: '300px', md: '300px', lg: '300px', xl: '300px' }}
                 >
-                  <Flex alignItems="center">
-                    <TrophyIcon marginRight="5" boxSize={'1.25em'} />
-                    <Box
-                      overflow="hidden"
-                      whiteSpace="nowrap"
-                      textOverflow="ellipsis"
-                      maxWidth="10vw" // Adjust the width based on your design
-                    >
+                  <TrophyIcon boxSize={'1.25em'} />
+                  <Flex maxWidth={{ base: '600px', md: '100px', xl: '100px' }}>
+                    <Text overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis">
                       {topThree[0] && topThree[0].volunteer_first_name}{' '}
                       {topThree[0] && topThree[0].volunteer_last_name}{' '}
-                    </Box>
+                    </Text>
                   </Flex>
+
                   {/* <Spacer /> */}
                   <Flex>{topThree[0] && truncate(topThree[0].total_weight, 2)} lbs</Flex>
                 </Flex>
-                <Flex display="flex" pl={'2em'} gap={'1em'} w="100%" align={'center'}>
+                <Flex
+                  display="flex"
+                  pl="2em"
+                  pr="2em"
+                  gap={'1em'}
+                  w="100%"
+                  maxWidth={{ base: '300px', md: '300px', lg: '300px', xl: '300px' }}
+                  justify={'space-between'}
+                >
                   <Text color="#0075FF" fontWeight="bold" fontSize={'1.1em'}>
                     2
                   </Text>
-                  <Flex>
-                    {topThree[1] && topThree[1].volunteer_first_name}{' '}
-                    {topThree[1] && topThree[1].volunteer_last_name}{' '}
+                  <Flex maxWidth={{ base: '600px', md: '100px', xl: '100px' }}>
+                    <Text overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis">
+                      {topThree[1] && topThree[1].volunteer_first_name}{' '}
+                      {topThree[1] && topThree[1].volunteer_last_name}{' '}
+                    </Text>
                   </Flex>
                   <Flex>{topThree[1] && truncate(topThree[1].total_weight, 2)} lbs</Flex>
                 </Flex>
-                <Flex display="flex" pl={'2em'} gap={'1em'} w="100%" align={'center'}>
+                <Flex
+                  display="flex"
+                  pl="2em"
+                  pr="2em"
+                  gap={'1em'}
+                  w="100%"
+                  maxWidth={{ base: '300px', md: '300px', lg: '300px', xl: '300px' }}
+                  justify={'space-between'}
+                >
                   <Text color="#0075FF" fontWeight="bold" fontSize={'1.1em'}>
                     3{' '}
                   </Text>{' '}
-                  <Flex>
-                    {topThree[2] && topThree[2].volunteer_first_name}{' '}
-                    {topThree[2] && topThree[2].volunteer_last_name}{' '}
+                  <Flex
+                    overflow="hidden"
+                    whiteSpace="nowrap"
+                    textOverflow="ellipsis"
+                    maxWidth={{ base: '100px', md: '600px', xl: '100px' }}
+                  >
+                    <Text overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis">
+                      {topThree[2] && topThree[2].volunteer_first_name}{' '}
+                      {topThree[2] && topThree[2].volunteer_last_name}{' '}
+                    </Text>
                   </Flex>
                   <Flex>{topThree[2] && truncate(topThree[2].total_weight, 2)} lbs</Flex>
                 </Flex>
@@ -215,13 +261,19 @@ const Volunteers = () => {
                   style={{
                     whiteSpace: 'normal',
                     wordWrap: 'break-word',
+                    color: 'white',
+                    my: "3"
                   }}
                   height={'fit-content'}
                 >
                   <ExternalLinkIcon marginRight="2" boxSize="6" color={'white'} />{' '}
-                  <Text color={'white'} my="3">
+                  <CSVLink
+                    data={volunteerData.length ? volunteerData : []}
+                    filename="./data.csv"
+                    headers={header}
+                  >
                     Export All Volunteer Data
-                  </Text>
+                  </CSVLink>
                 </Button>
               </Box>
             </Flex>