diff --git a/src/components/Events/EventCard.jsx b/src/components/Events/EventCard.jsx
index ca85444..1f31448 100644
--- a/src/components/Events/EventCard.jsx
+++ b/src/components/Events/EventCard.jsx
@@ -125,7 +125,7 @@ const EventCard = ({
 
           <Box
             width={sideBySideCard ? undefined : '100%'}
-            maxW={'88%'}
+            maxW={{ base: '100px', md: '150px', lg: '275px' }}
             alignSelf={'center'}
             justifySelf={'center'}
             gap={'18px'}
@@ -133,28 +133,19 @@ const EventCard = ({
             mb={sideBySideCard ? 0 : 5}
           >
             <HappeningInChip date={dateObj} mb={5} />
-
-            {name.length > 30 ? (
-              <Text
-                fontWeight="800"
-                fontSize="24px"
-                lineHeight="30px"
-                mt={2}
-                overflowWrap={'break-word'}
-              >
-                {name.substring(0, 30)}...
-              </Text>
-            ) : (
-              <Text
-                fontWeight="800"
-                fontSize={{ base: '20px', md: '24px' }}
-                lineHeight="30px"
-                mt={2}
-                overflowWrap={'break-word'}
-              >
-                {name}
-              </Text>
-            )}
+            <Text
+              fontWeight="800"
+              fontSize={{ base: '20px', md: '24px' }}
+              lineHeight="30px"
+              fontFamily="Avenir"
+              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 }}
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..20e4373 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>
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/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/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/Volunteers.jsx b/src/pages/Volunteers.jsx
index 5b2475e..4c15277 100644
--- a/src/pages/Volunteers.jsx
+++ b/src/pages/Volunteers.jsx
@@ -187,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>