diff --git a/src/components/Checkin/VolunteerEventsTable.jsx b/src/components/Checkin/VolunteerEventsTable.jsx
index 532f591..e07e01a 100644
--- a/src/components/Checkin/VolunteerEventsTable.jsx
+++ b/src/components/Checkin/VolunteerEventsTable.jsx
@@ -101,7 +101,7 @@ const RenderVolunteerRow = ({ volunteer, changeIsCheckedIn, isCheckinPage, isVie
             justifyContent={'center'}
           >
             <Image src={status === 'Checked-in' ? checked_in : registered} />
-            <Text fontSize="md" textOverflow={'ellipsis'} maxW={48} overflow={'hidden'}>
+            <Text fontSize={status === 'Checked-in' ? "xs" : "md"} mr={status === 'Checked-in' ? 2 : 0}>
               {status}
             </Text>
           </Flex>
diff --git a/src/components/Events/EventFilteredGrid.jsx b/src/components/Events/EventFilteredGrid.jsx
index cb6cdf4..dbdaf00 100644
--- a/src/components/Events/EventFilteredGrid.jsx
+++ b/src/components/Events/EventFilteredGrid.jsx
@@ -10,7 +10,7 @@ import {
   Heading,
   HStack,
 } from '@chakra-ui/react';
-import { useEffect, useState, useContext } from 'react';
+import { useEffect, useState, useContext, useCallback } from 'react';
 import { SearchIcon } from '@chakra-ui/icons';
 import PropTypes from 'prop-types';
 
@@ -32,9 +32,11 @@ const EventFilteredGrid = ({ setCurrentEventId, setIsOpen, setShowOpenDrawerButt
   const [date, setDate] = useState('');
   const [fuse, setFuse] = useState();
 
+
   const { user } = useContext(UserContext);
+  
+  const getEvents = useCallback(async () => {
 
-  const getEvents = async () => {
     try {
       let eventsData;
       if (onlyUnregistered) {
@@ -52,7 +54,7 @@ const EventFilteredGrid = ({ setCurrentEventId, setIsOpen, setShowOpenDrawerButt
     } catch (err) {
       console.log(`Error getting events: `, err.message);
     }
-  };
+  }, []);
 
   const getLocation = data => {
     let location = [];
@@ -85,7 +87,7 @@ const EventFilteredGrid = ({ setCurrentEventId, setIsOpen, setShowOpenDrawerButt
 
   useEffect(() => {
     getEvents();
-  }, []);
+  }, [getEvents]);
 
   const handleLocationChange = event => {
     const selectedLocation = event.target.value;
@@ -130,16 +132,16 @@ const EventFilteredGrid = ({ setCurrentEventId, setIsOpen, setShowOpenDrawerButt
       result = fuseResult.map(item => item.item);
     } else result = events;
     setDisplayEvents(result);
-  }, [name, location, date, fuse]);
+  }, [name, location, date, fuse, events]);
 
   return (
     <>
-    {/* Flag: Navbar responsive (Use 15%) */}
+      {/* Flag: Navbar responsive (Use 15%) */}
       <Flex
         flexDir={'column'}
         alignItems={'center'}
         bg="#E6EAEF"
-        ml={{ base: '2vw', xl: '15rem' }}
+        ml={{ base: '2vw', xl: isOpen ? '22%' : '15%' }}
         mr={{ base: '2vw' }}
         pt={4}
         mb="32px"
diff --git a/src/components/Events/FeaturedDashboard.jsx b/src/components/Events/FeaturedDashboard.jsx
index 9bf0b1e..4182fd6 100644
--- a/src/components/Events/FeaturedDashboard.jsx
+++ b/src/components/Events/FeaturedDashboard.jsx
@@ -12,6 +12,7 @@ const FeaturedDashboard = ({
   setIsOpen,
   setShowOpenDrawerButton,
   onOpen,
+  isSideBarOpen,
   showOpenDrawerButton,
 }) => {
   const [featuredEvents, setFeaturedEvents] = useState([]);
@@ -29,6 +30,15 @@ const FeaturedDashboard = ({
   };
 
   useEffect(() => {
+    const getEvents = async () => {
+      try {
+        const eventsData = await Backend.get('/events');
+        setFeaturedEvents(eventsData.data.slice(0, numEvents));
+      } catch (err) {
+        console.log(`Error getting events: `, err.message);
+      }
+    };
+    
     getEvents();
   }, [numEvents]);
 
@@ -38,7 +48,7 @@ const FeaturedDashboard = ({
       flexDir={'column'}
       alignItems={'center'}
       bg="#E6EAEF"
-      ml={{ base: '3vw', xl: '15rem' }}
+      ml={{ base: '3vw', xl: isSideBarOpen ? '22%' : '15%' }}
       mr={{ base: '3vw' }}
       pt={4}
     >
@@ -132,6 +142,7 @@ FeaturedDashboard.propTypes = {
   setCurrentEventId: PropTypes.func.isRequired,
   setIsOpen: PropTypes.func.isRequired,
   setShowOpenDrawerButton: PropTypes.func.isRequired,
+  isSideBarOpen: PropTypes.bool
 };
 
 export default FeaturedDashboard;
diff --git a/src/components/Events/ImpactSummary.jsx b/src/components/Events/ImpactSummary.jsx
index 47d9bf9..54bb27f 100644
--- a/src/components/Events/ImpactSummary.jsx
+++ b/src/components/Events/ImpactSummary.jsx
@@ -137,7 +137,7 @@ const ImpactSummary = () => {
             filename="./data.csv"
             headers={header}
           >
-            Export Data
+            Export All Data
           </CSVLink>
           {/* {eventIdData.map((eventData) => <CSVLink
             data={eventData ? [eventData] : ''}
diff --git a/src/components/Events/PastEventsImpactSummary.jsx b/src/components/Events/PastEventsImpactSummary.jsx
index a2a715a..f6be914 100644
--- a/src/components/Events/PastEventsImpactSummary.jsx
+++ b/src/components/Events/PastEventsImpactSummary.jsx
@@ -124,7 +124,7 @@ const PastEventsImpactSummary = () => {
             filename="./data.csv"
             headers={header}
           >
-            Export Data
+            Export Past Events Data
           </CSVLink>
         </Button>
       </VStack>
diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
index c043d81..c214363 100644
--- a/src/components/Navbar/Navbar.jsx
+++ b/src/components/Navbar/Navbar.jsx
@@ -76,7 +76,7 @@ const Navbar = () => {
 
   useEffect(() => {
     updateUser();
-  }, []);
+  }, [updateUser]);
 
   // Change the paths for each button since these might change
   const homePath = '/';
@@ -102,7 +102,7 @@ const Navbar = () => {
     <>
       {/* Box for entire navbar */}
       {/* Flag: Navbar responsive (Use 15%) */}
-      <Box position="fixed" top="0" w={{ base: 'full', xl: '15rem' }} float="left">
+      <Box position="fixed" top="0" w={{ base: 'full', xl: '15%' }} float="left">
         {/* Box for entire nabar with coloring */}
         <Box
           h="100vh"
@@ -246,12 +246,13 @@ const Navbar = () => {
                 alignItems: 'center',
                 gap: '10px',
                 padding: '12px',
-                marginLeft: '14px',
-                marginRight: '13px',
-                marginBottom: '18px',
-                borderRadius: '12px',
+                // marginLeft: '14px',
+                // marginRight: '13px',
+                // marginBottom: '18px',
+                // borderRadius: '12px',
                 backgroundColor: '#FFF',
                 border: '1px',
+                width: 'full'
               }}
               onClick={e => {
                 e.preventDefault();
@@ -261,29 +262,30 @@ const Navbar = () => {
               href="#"
             >
               {/* User image */}
-              <Box style={{ borderRadius: '50%' }}>
+              {/* <Box style={{ borderRadius: '50%' }}> */}
                 <Image
                   src={user?.image_url}
-                  width="45px"
-                  height="45px"
+                  width="20%"
+                  aspectRatio={1}
                   borderRadius="full"
                   objectFit="cover"
                 />
-              </Box>
+              {/* </Box> */}
               <Box
                 style={{
                   flexDirection: 'column',
                   alignItems: 'center',
                 }}
+                maxWidth={{ base: '219px', md: '150px', xl: '50%' }}
               >
                 {/* User name */}
                 <Text
-                  maxWidth={{ base: '219px', md: '150px', xl: '100px' }}
+                  // maxWidth={{ base: '219px', md: '150px', xl: '100px' }}
                   overflow="hidden"
                   textOverflow="ellipsis"
                   fontWeight='800'
                   color='#000000'
-                  fontSize='14px'
+                  fontSize='75%'
                   lineHeight='25px'
                   textAlign='left'
                   marginTop='-1px'
@@ -294,7 +296,7 @@ const Navbar = () => {
 
                 <Tag
                   style={{
-                    fontSize: '12px',
+                    fontSize: '56.25%',
                     fontWeight: '500',
                     lineHeight: '16px',
                     color: '#717171',
diff --git a/src/components/VolunteerSideViewDrawer.jsx b/src/components/VolunteerSideViewDrawer.jsx
index 6b5a784..d7ea51a 100644
--- a/src/components/VolunteerSideViewDrawer.jsx
+++ b/src/components/VolunteerSideViewDrawer.jsx
@@ -3,7 +3,6 @@ import {
   Drawer,
   DrawerOverlay,
   DrawerContent,
-  DrawerCloseButton,
   DrawerBody,
   useDisclosure,
 } from '@chakra-ui/react';
@@ -52,7 +51,7 @@ const VolunteerSideViewDrawer = ({ eventId, isOpen, onClose, setShowOpenDrawerBu
     getEventById(eventId).then(data => setEventData(data));
     getEventDataVolunteerId(user?.id, eventId).then(data => setEventDataVolunteer(data));
     // setDateObj(new Date(Date.parse(eventData.date)))
-  }, [eventId]);
+  }, [eventId, user?.id]);
 
   function formatDate(dateString) {
     const months = [
@@ -87,12 +86,11 @@ const VolunteerSideViewDrawer = ({ eventId, isOpen, onClose, setShowOpenDrawerBu
     <Drawer isOpen={isOpen} placement="right" onClose={onClose} size="full">
       <DrawerOverlay />
       <DrawerContent>
-        <DrawerCloseButton />
         <DrawerBody>
           <Flex
             flexDir={'column'}
             w={'100%'}
-            maxW={'26em'}
+            maxW={'100vw'}
             mt={'1em'}
             px={{ base: '10px', md: '20px' }}
           >
diff --git a/src/pages/AdminPage.jsx b/src/pages/AdminPage.jsx
index be2149a..cf33061 100644
--- a/src/pages/AdminPage.jsx
+++ b/src/pages/AdminPage.jsx
@@ -94,7 +94,7 @@ export default function AdminPage() {
   ));
 
   return (
-    <Flex ml="15rem" flexDir={'column'} padding={'2%'} gap={'1em'} backgroundColor={'#C8E6FF'}>
+    <Flex ml="15%" flexDir={'column'} padding={'2%'} gap={'1em'} backgroundColor={'#C8E6FF'}>
       <Flex justify={'space-between'}>
         <Text fontSize={'2.3rem'} fontWeight={500}>
           Administrators
diff --git a/src/pages/ArchivedEvents.jsx b/src/pages/ArchivedEvents.jsx
index ee8f9a7..2249cba 100644
--- a/src/pages/ArchivedEvents.jsx
+++ b/src/pages/ArchivedEvents.jsx
@@ -80,7 +80,7 @@ const ArchivedEvents = () => {
   }, []);
 
   return (
-    <Box ml="15rem" style={{ display: 'grid', gap: '22px' }} backgroundColor={'#c8e6fe'}>
+    <Box ml="15%" style={{ display: 'grid', gap: '22px' }} backgroundColor={'#c8e6fe'}>
       {/* Overall Imapct Card */}
       <Heading marginLeft={10} marginTop={5}>
         Overall Impact
diff --git a/src/pages/CheckinPage.jsx b/src/pages/CheckinPage.jsx
index a894bf7..d0110b2 100644
--- a/src/pages/CheckinPage.jsx
+++ b/src/pages/CheckinPage.jsx
@@ -185,7 +185,7 @@ const CheckinPage = () => {
       alignItems={'center'}
       bg="#E6EAEF"
       minH="100vh"
-      ml={{ base: '0', xl: '15rem' }}
+      ml={{ base: '0', xl: '15%' }}
     >
       <Flex minW="95%" justifyContent={'space-between'} mt={10} mb={5}>
         <Flex alignItems={'center'} gap={3}>
diff --git a/src/pages/DummyVolunteerProfilePage.jsx b/src/pages/DummyVolunteerProfilePage.jsx
index 9847f96..dcdcee5 100644
--- a/src/pages/DummyVolunteerProfilePage.jsx
+++ b/src/pages/DummyVolunteerProfilePage.jsx
@@ -18,7 +18,7 @@ import SettingsField from '../components/DummyVolunteerProfile/SettingsField';
 
 export const DummyVolunteerProfilePage = () => {
   return (
-    <Box bg={'#e6eaee'} minHeight="100vh" paddingLeft={'15rem'}>
+    <Box bg={'#e6eaee'} minHeight="100vh" paddingLeft={'15%'}>
       {/* Profile Card and Account Information */}
       <Grid templateColumns="repeat(3, 1fr)" gap={4}>
         <GridItem colSpan={1}>
diff --git a/src/pages/EventPage.jsx b/src/pages/EventPage.jsx
index a3fa6d6..5b19c9f 100644
--- a/src/pages/EventPage.jsx
+++ b/src/pages/EventPage.jsx
@@ -257,7 +257,7 @@ const Events = () => {
       alignItems={'center'}
       bg="#E6EAEF"
       minH="100vh"
-      ml={{ base: '0', xl: '15rem' }}
+      ml={{ base: '0', xl: '15%' }}
       py={10}
     >
       <Flex
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index fd37104..bff00cf 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -105,7 +105,7 @@ const Home = () => {
       alignItems={'center'}
       bg="#E6EAEF"
       minH="100vh"
-      ml={{ base: '0', xl: '15rem' }}
+      ml={{ base: '0', xl: '15%' }}
       py={10}
     >
       <Flex w={'95%'} flexDir={'column'}>
diff --git a/src/pages/InputDataPage.jsx b/src/pages/InputDataPage.jsx
index 0262b5f..0bfbd66 100644
--- a/src/pages/InputDataPage.jsx
+++ b/src/pages/InputDataPage.jsx
@@ -146,7 +146,7 @@ const InputDataPage = () => {
       alignItems={'center'}
       bg="#E6EAEF"
       minH="100vh"
-      ml={{ base: '0', xl: '15rem' }}
+      ml={{ base: '0', xl: '15%' }}
       px={5}
     >
       <Flex width={'100%'} justifyContent={'space-between'} mt={10} mb={5}>
diff --git a/src/pages/PastEvents.jsx b/src/pages/PastEvents.jsx
index 24f0c19..32ec5e2 100644
--- a/src/pages/PastEvents.jsx
+++ b/src/pages/PastEvents.jsx
@@ -86,7 +86,7 @@ const PastEvents = () => {
       alignItems={'center'}
       bg="#E6EAEF"
       minH="100vh"
-      ml={{ base: '0', xl: '15rem' }}
+      ml={{ base: '0', xl: '15%' }}
       py={10}
     >
       <Flex w={'95%'} flexDir={'column'}>
diff --git a/src/pages/ProfilePage.jsx b/src/pages/ProfilePage.jsx
index 9962157..40e7c9e 100644
--- a/src/pages/ProfilePage.jsx
+++ b/src/pages/ProfilePage.jsx
@@ -135,7 +135,7 @@ export const ProfilePage = () => {
     <Box
       bg={{ base: 'white', md: '#E8EDF3', lg: '#E8EDF3' }}
       minHeight="100vh"
-      ml={{ base: '0', xl: '15rem' }}
+      ml={{ base: '0', xl: '15%' }}
       w={{ base: '100vw', md: 'auto', lg: 'auto' }}
       display={{ base: 'flex', md: 'block', lg: 'block' }}
       flexDirection={{ base: 'column', md: 'row', lg: 'row' }}
diff --git a/src/pages/ViewEvents.jsx b/src/pages/ViewEvents.jsx
index 1f0e8f7..f958140 100644
--- a/src/pages/ViewEvents.jsx
+++ b/src/pages/ViewEvents.jsx
@@ -177,7 +177,7 @@ const ViewEvents = () => {
       alignItems={'center'}
       bg="#E6EAEF"
       minH="100vh"
-      ml={{ base: '0', xl: '15rem' }}
+      ml={{ base: '0', xl: '15%' }}
     >
       <Flex minW="95%" justifyContent={'space-between'} mt={10} mb={5}>
         <Flex alignItems={'center'} gap={3}>
diff --git a/src/pages/VolunteerEventPage.jsx b/src/pages/VolunteerEventPage.jsx
index efb35d5..1482634 100644
--- a/src/pages/VolunteerEventPage.jsx
+++ b/src/pages/VolunteerEventPage.jsx
@@ -35,7 +35,7 @@ const VolunteerEventPage = () => {
           flexDir={'row'}
           alignItems={'center'}
           bg="#E6EAEF"
-          ml={{ base: '0', xl: '15rem' }}
+          ml={{ base: '0', xl: '15%' }}
           pt={6}
           px={6}
           justifyContent={'space-between'}
@@ -90,7 +90,7 @@ const VolunteerEventPage = () => {
         />
       </Box>
       {/* Drawer Component */}
-      {breakpoint == 'base' ? (
+      {breakpoint != 'xl' ? (
         <VolunteerSideViewDrawer
           eventId={currentEventId}
           isOpen={isDrawerOpen}
diff --git a/src/pages/VolunteerHomePage.jsx b/src/pages/VolunteerHomePage.jsx
index 1d5a99f..da7b997 100644
--- a/src/pages/VolunteerHomePage.jsx
+++ b/src/pages/VolunteerHomePage.jsx
@@ -13,7 +13,7 @@ import {
   useBreakpoint,
   useDisclosure,
 } from '@chakra-ui/react';
-import { useEffect, useState, useContext } from 'react';
+import { useEffect, useState, useContext, useCallback } from 'react';
 import { SearchIcon, HamburgerIcon } from '@chakra-ui/icons';
 
 import EventCard from '../components/Events/EventCard';
@@ -42,7 +42,7 @@ const VolunteerHomePage = () => {
 
   const { user } = useContext(UserContext);
 
-  const getEvents = async () => {
+  const getEvents = useCallback(async () => {
     try {
       const eventsData = await Backend.get(`data/registered/${user.id}`);
       setEvents(eventsData.data);
@@ -51,7 +51,7 @@ const VolunteerHomePage = () => {
     } catch (err) {
       console.log(`Error getting events: `, err.message);
     }
-  };
+  }, [user]);
 
   const eventCards = displayEvents.map(element => (
     <GridItem
@@ -70,7 +70,7 @@ const VolunteerHomePage = () => {
     if (user) {
       getEvents();
     }
-  }, [user]);
+  }, [getEvents, user]);
 
   useEffect(() => {
     if (!fuse) {
@@ -111,7 +111,7 @@ const VolunteerHomePage = () => {
         bg="#E6EAEF"
         minH="100vh"
         width={'100%'}
-        ml={{ base: '0', xl: '15rem' }}
+        ml={{ base: '0', xl: '15%' }}
         py={10}
       >
         <Flex w={{ base: '85%', md: '95%' }} flexDir={'column'}>
@@ -229,7 +229,7 @@ const VolunteerHomePage = () => {
           </Box>
         </Flex>
       </Flex>
-      {breakpoint == 'base' ? (
+      {breakpoint != 'xl' ? (
         <VolunteerSideViewDrawer
           eventId={currentEventId}
           isOpen={isOpen}
diff --git a/src/pages/Volunteers.jsx b/src/pages/Volunteers.jsx
index 6a63043..15852b2 100644
--- a/src/pages/Volunteers.jsx
+++ b/src/pages/Volunteers.jsx
@@ -13,7 +13,8 @@ import { IoDocumentText } from 'react-icons/io5';
 import VolunteersTable from '../components/VolunteersTable';
 import { useState, useEffect, useContext } from 'react';
 import Backend from '../utils/utils';
-import { ExternalLinkIcon, HamburgerIcon } from '@chakra-ui/icons';
+import { HamburgerIcon } from '@chakra-ui/icons';
+import { AiOutlineExport } from 'react-icons/ai';
 import { GreyCustomSearchIcon } from '../components/Icons/CustomSearchIcon';
 import Fuse from 'fuse.js';
 import { TrophyIcon } from '../components/Icons/TrophyIcon';
@@ -97,7 +98,7 @@ const Volunteers = () => {
   return (
     <>
       {/* Registered + Checked-In */}
-      <Flex direction="column" ml={{ base: '0', xl: '15rem' }} bg="#E8EDF3" p="10" gap="10">
+      <Flex direction="column" ml={{ base: '0', xl: '15%' }} bg="#E8EDF3" p="10" gap="10">
         <Box bg="#F8F8F8" p="1rem" borderRadius="md">
           <Flex minW="95%" bg={'#F8F8F8'} borderRadius="lg" flexDir={'column'}>
             <HamburgerIcon
@@ -255,24 +256,37 @@ const Volunteers = () => {
                 justifyContent={{ base: 'center', lg: 'start' }}
                 alignItems={'end'}
               >
-                <Button
+                {/* <Button
                   backgroundColor={'#0075FF'}
                   fontSize="lg"
                   style={{
                     whiteSpace: 'normal',
                     wordWrap: 'break-word',
                     color: 'white',
-                    my: "3"
+                    my: '3',
                   }}
                   height={'fit-content'}
                 >
-                  <ExternalLinkIcon marginRight="2" boxSize="6" color={'white'} />{' '}
+                  <ExternalLinkIcon marginRight="2" boxSize="1vw" color={'white'} />{' '}
+                  <CSVLink
+                    data={volunteerData.length ? volunteerData : []}
+                    filename="./data.csv"
+                    headers={header}
+                  >
+                    Export
+                  </CSVLink>
+                </Button> */}
+                <Button
+                  colorScheme={'messenger'}
+                  leftIcon={<AiOutlineExport></AiOutlineExport>}
+                  size="md"
+                >
                   <CSVLink
                     data={volunteerData.length ? volunteerData : []}
                     filename="./data.csv"
                     headers={header}
                   >
-                    Export All
+                    Export Volunteer Data
                   </CSVLink>
                 </Button>
               </Box>