diff --git a/src/components/Events/ArchiveEventsModal.jsx b/src/components/Events/ArchiveEventsModal.jsx
deleted file mode 100644
index c1e91a3..0000000
--- a/src/components/Events/ArchiveEventsModal.jsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import {
-  Button,
-  ListItem,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  UnorderedList,
-} from '@chakra-ui/react';
-import PropTypes from 'prop-types';
-
-const ArchiveEventsModal = ({ isOpen, onClose, events, confirmArchive }) => {
-  return (
-    <>
-      <Modal isOpen={isOpen} onClose={onClose}>
-        <ModalOverlay />
-        <ModalContent>
-          <ModalHeader>Confirm event archive</ModalHeader>
-          <ModalCloseButton />
-          <ModalBody pb={6}>
-            Are you sure you want to archive these events? This action cannot be undone.
-            <UnorderedList mt="2">
-              {events.map(event => {
-                return <ListItem key={event.id}>{event.name}</ListItem>;
-              })}
-            </UnorderedList>
-          </ModalBody>
-          <ModalFooter>
-            <Button onClick={onClose}>Cancel</Button>
-            <Button colorScheme="red" ml={3} onClick={confirmArchive}>
-              Archive
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-    </>
-  );
-};
-
-ArchiveEventsModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  onClose: PropTypes.func.isRequired,
-  confirmArchive: PropTypes.func.isRequired,
-  events: PropTypes.array.isRequired,
-};
-
-export default ArchiveEventsModal;
diff --git a/src/components/Events/DeleteEventsModal.jsx b/src/components/Events/DeleteEventsModal.jsx
new file mode 100644
index 0000000..9337e9a
--- /dev/null
+++ b/src/components/Events/DeleteEventsModal.jsx
@@ -0,0 +1,54 @@
+import {
+  Button,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalOverlay,
+} from '@chakra-ui/react';
+import PropTypes from 'prop-types';
+
+const DeleteEventsModal = ({ isOpen, onClose, events, confirmDelete }) => {
+  // Function to format event names separated by commas, except the last one
+  const formattedEventNames = events.map(event => event.name).join(', ');
+
+  // Determine the correct event label based on the number of events
+  const eventLabel = events.length > 1 ? 'Events' : 'Event';
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} isCentered>
+      <ModalOverlay />
+      <ModalContent style={{padding:"30px", borderRadius:"20px"}}>
+        <ModalCloseButton />
+        <ModalBody
+          padding={6}
+          textAlign="center"
+          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}?
+        </ModalBody>
+        <ModalFooter justifyContent="center">
+          <Button onClick={onClose} mr={3} style={{ backgroundColor: 'white', fondSize:'20px',borderRadius: '5px', color:'#0075FF', border:'1px solid #0075FF', width:'130px'}}>Cancel</Button>
+          
+          <Button colorScheme="red" style={{width:'130px', fondSize:'20px'}} onClick={confirmDelete}>
+            Delete {eventLabel}
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+DeleteEventsModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  confirmDelete: PropTypes.func.isRequired,
+  events: PropTypes.array.isRequired,
+};
+
+export default DeleteEventsModal;
diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
index c5ae416..125e88c 100644
--- a/src/components/Navbar/Navbar.jsx
+++ b/src/components/Navbar/Navbar.jsx
@@ -39,6 +39,7 @@ const NavbarButton = ({ buttonText, path, navigate, UnfocusedIcon, FocusedIcon }
       marginBottom="6px"
       backgroundColor={location.pathname === path ? '#D4E4F9' : 'transparent'}
       borderRadius="4px"
+      cursor="pointer"
       onClick={e => {
         e.preventDefault();
         navigate(path);
@@ -110,7 +111,7 @@ const Navbar = () => {
           alignItems="start"
         >
           {/* Box containing everything above "support" */}
-          <Box display="flex" flexDir="column" width={'full'} as="a" href="/">
+          <Box display="flex" flexDir="column" width={'full'}>
             {/* Box containing the logo and role title at the top */}
             <Flex align={'center'} justifyContent={'space-between'} pr={7}>
               <Box
diff --git a/src/pages/EventPage.jsx b/src/pages/EventPage.jsx
index b8009e3..7c9c74c 100644
--- a/src/pages/EventPage.jsx
+++ b/src/pages/EventPage.jsx
@@ -7,12 +7,21 @@ import {
   InputLeftElement,
   Heading,
   Select,
+  useDisclosure,
+HStack,
   Flex,
+  useToast, 
+  Button,
+  Spacer,
+  
 } from '@chakra-ui/react';
 import { useEffect, useState, useContext } from 'react';
-import { SearchIcon, CalendarIcon, HamburgerIcon } from '@chakra-ui/icons';
+import { SearchIcon, CalendarIcon, HamburgerIcon, DeleteIcon } from '@chakra-ui/icons';
+
 
 import NavbarContext from '../utils/NavbarContext';
+import PropTypes from 'prop-types';
+import DeleteEventsModal from '../components/Events/DeleteEventsModal';
 
 import EventCard from '../components/Events/EventCard';
 import AddEventsModal from '../components/AddEventsModal/AddEventsModal';
@@ -20,10 +29,14 @@ import Backend from '../utils/utils';
 import Fuse from 'fuse.js';
 
 const Events = () => {
+  const toast = useToast();
+
   const { onNavbarDrawerOpen } = useContext(NavbarContext);
   const [events, setEvents] = useState([]);
   const [displayEvents, setDisplayEvents] = useState([]);
-
+  const [showSelect, setShowSelect] = useState(false);
+  const [isSelectButton, setIsSelectButton] = useState(true);
+  const [isCreateButton, setIsCreateButton] = useState(true); // toggle between create event button and deselect button
   const [selectedEvents, setSelectedEvents] = useState([]);
   const [name, setName] = useState('');
   const [dates, setDates] = useState([]);
@@ -34,7 +47,7 @@ const Events = () => {
 
   const getEvents = async () => {
     try {
-      const eventsData = await Backend.get('/events');
+      const eventsData = await Backend.get('/events/currentEvents');
       setEvents(eventsData.data);
       console.log(eventsData.data);
       // setDates();
@@ -47,24 +60,32 @@ const Events = () => {
     }
   };
 
-  const getLocation = data => {
-    let location = [];
-    for (let i in data) {
-      location.push(data[i].location);
-    }
-    console.log(location.length);
-    return location;
-  };
+  const {
+    isOpen: isDeleteEventModalOpen,
+    onOpen: onDeleteEventModalOpen,
+    onClose: onDeleteEventModalClose,
+  } = useDisclosure();
 
-  const getDate = data => {
-    let date = [];
-    for (let i in data) {
-      date.push(data[i].date.substring(0, 10));
+  const confirmDelete = async () => {
+    for (const id of selectedEvents) {
+      try {
+        await Backend.delete(`/events/${id}`);
+        getEvents();
+      } catch (error) {
+        console.log(`Error archiving event: ${id}`, error.message);
+      }
     }
-    console.log(date.length);
-    return date;
+    onDeleteEventModalClose();
+    handleGoBackButton();
+    toast({
+      title: `Successfully deleted ${selectedEvents.length} event(s)`,
+      status: 'success',
+      duration: 3000,
+      isClosable: true,
+    });
   };
 
+
   const handleCheckboxChange = id => {
     const newCheckedItems = [...selectedEvents];
     const index = newCheckedItems.indexOf(id);
@@ -79,12 +100,30 @@ const Events = () => {
     console.log(selectedEvents);
   };
 
+  const getLocation = data => {
+    let location = [];
+    for (let i in data) {
+      location.push(data[i].location);
+    }
+    console.log(location.length);
+    return location;
+  };
+
+  const getDate = data => {
+    let date = [];
+    for (let i in data) {
+      date.push(data[i].date.substring(0, 10));
+    }
+    console.log(date.length);
+    return date;
+  };
+
   const eventCards = displayEvents.map(element => (
     <GridItem key={element.id}>
       <EventCard
         {...element}
         isSelected={selectedEvents.includes(element.id)}
-        // showSelect={showSelect}
+        showSelect={showSelect}
         handleCheckboxChange={handleCheckboxChange}
         getEvents={getEvents}
       />
@@ -125,6 +164,74 @@ const Events = () => {
     ));
   };
 
+  const deleteEvents = () => {
+    if (selectedEvents.length > 0) {
+      onDeleteEventModalOpen();
+    }
+  };
+
+  const handleSelectButton = () => {
+    setShowSelect(true);
+    setIsSelectButton(false);
+    setIsCreateButton(false);
+  };
+
+  const handleGoBackButton = () => {
+    setShowSelect(false);
+    setIsCreateButton(true);
+    setIsSelectButton(true);
+    setSelectedEvents([]);
+  };
+
+  const SelectButton = () => {
+    return (
+      <>
+        <Button
+          style={{ backgroundColor: 'white', borderRadius: '5px', color:'#0075FF', border:'1px solid #0075FF'}}
+          onClick={() => handleSelectButton()}
+          fontSize="20px"
+          height={'50px'}
+        >
+          Select Events
+        </Button>
+      </>
+    );
+  };
+
+  const DeleteButton = ({ id }) => {
+    return (
+      <>
+        <Button
+          style={{ backgroundColor: '#FFABAB', borderRadius: '30px' }}
+          onClick={() => deleteEvents(id)}
+        >
+          <Box padding={3} fontSize={'lg'} display="inline-flex" gap={10}>
+            Delete Event(s)
+          </Box>
+        </Button>
+      </>
+    );
+  };
+
+  DeleteButton.propTypes = {
+    id: PropTypes.number,
+  };
+
+  const CancelButton = () => {
+    return (
+      <>
+        <Button
+          style={{ backgroundColor: 'white', borderRadius: '5px', color:'#0075FF', border:'1px solid #0075FF'}}
+          fontSize="20px"
+          height={'50px'}
+          onClick={() => handleGoBackButton()}
+        >
+          Cancel
+        </Button>
+      </>
+    );
+  };
+
   useEffect(() => {
     if (!fuse) {
       return;
@@ -161,12 +268,10 @@ const Events = () => {
         width="95%"
         height="237px"
         padding="32px"
-        flex-direction="column"
-        align-items="center"
+        flexDirection="column"
+        alignItems="center"
         gap="24px"
-        flex-shrink="0"
         borderRadius={'xl'}
-        flexDir={'column'}
       >
         <Flex align={'center'} gap={3}>
           <HamburgerIcon
@@ -179,8 +284,8 @@ const Events = () => {
         </Flex>
         <Box display="flex">
           <Flex w={'100%'}>
-            <Flex flexDir={'column'} gap={3} w={'100%'}>
-              <InputGroup align-items="left">
+            <Flex flexDirection={'column'} gap={3} w={'100%'}>
+              <InputGroup>
                 <InputLeftElement pointerEvents="none">
                   <SearchIcon color={'#7B7C7D'} />
                 </InputLeftElement>
@@ -193,7 +298,7 @@ const Events = () => {
                   placeholder='Search Event Name (e.g. "Festival of Whales")'
                 />
               </InputGroup>
-              <Flex flex-direction="row" justifyContent={'left'} gap={7}>
+              <Flex flexDirection="row" justifyContent={'left'} gap={7}>
                 <Select bg={'white'} placeholder="Location" onChange={handleLocationChange} w="10%">
                   {getLocationOptions()}
                 </Select>
@@ -202,7 +307,6 @@ const Events = () => {
                   icon={<CalendarIcon />}
                   onChange={handleDateChange}
                   placeholder="Select Date"
-                  gap={'5px'}
                   w="20%"
                 >
                   {getDateOptions()}
@@ -212,19 +316,91 @@ const Events = () => {
           </Flex>
         </Box>
       </Flex>
-
-      <Box display="flex" justifyContent={'center'} px={10} mt={5}>
-        <Box display="flex" flex-direction="space-between" justifyContent={'center'}>
-          <Box marginTop="3vh">
-            <Grid templateColumns="repeat(4, 1fr)" gap={6}>
-              <AddEventsModal getEvents={getEvents} />
-              {eventCards}
-            </Grid>
+  
+      <Flex justifyContent={'center'} flexDirection={'column'} w={'95%'} mt={5}>
+        <Flex flexDirection={'column'} bgColor={'#F8F8F8'} p={8} borderRadius={'lg'} gap={8}>
+          <Heading w={'full'}>Upcoming Events</Heading>
+          <Box display="flex" flexDirection="row" justifyContent="space-between">
+            {isCreateButton }
+            <HStack>
+              <InputGroup w="50%">
+                <InputLeftElement pointerEvents="none">
+                  <SearchIcon />
+                </InputLeftElement>
+                <Input
+                  bg={'white'}
+                  value={name}
+                  onChange={event => {
+                    setName(event.target.value);
+                  }}
+                  placeholder='Search Event Name (e.g. "Festival of Whales")'
+                />
+              </InputGroup>
+              <InputGroup w="25%">
+                <InputLeftElement pointerEvents="none">
+                  <SearchIcon />
+                </InputLeftElement>
+                <Input
+                  bg={'white'}
+                  value={location}
+                  onChange={event => {
+                    setLocation(event.target.value);
+                  }}
+                  placeholder="Search Location"
+                />
+              </InputGroup>
+              <InputGroup w="25%">
+                <InputLeftElement pointerEvents="none">
+                  <SearchIcon />
+                </InputLeftElement>
+                <Input
+                  bg={'white'}
+                  value={date}
+                  placeholder="Search Date"
+                  onChange={event => {
+                    setDate(event.target.value);
+                  }}
+                />
+              </InputGroup>
+            </HStack>
+            
           </Box>
-        </Box>
-      </Box>
+        </Flex>
+        <Spacer>
+        <Flex justifyContent="flex-end" width="100%" paddingY="10px">
+        {isSelectButton ? <SelectButton /> : <CancelButton />}
+      </Flex>
+        </Spacer>
+{!isSelectButton && (
+  <Box position="fixed" bottom="20px" right="20px">
+    <Button colorScheme="red"onClick={deleteEvents}  disabled={selectedEvents.length === 0} leftIcon={<DeleteIcon />}>
+      Delete
+    </Button>
+  </Box>
+
+)}
+<DeleteEventsModal
+  isOpen={isDeleteEventModalOpen}
+  onClose={onDeleteEventModalClose}
+  confirmDelete={confirmDelete}
+  events={events.filter(event => selectedEvents.includes(event.id))}
+/>
+
+<Box display="flex" justifyContent={'center'} px={10}>
+  <Box display="flex" flexDirection="space-between" justifyContent={'center'}>
+  <Box marginTop="3vh">
+    <Grid templateColumns="repeat(4, 1fr)" gap={6}>
+      <AddEventsModal getEvents={getEvents} />
+      {eventCards}
+    </Grid>
+  </Box>
+  </Box>
+</Box>
+
+      </Flex>
     </Flex>
   );
+  
 };
 
 export default Events;
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index 07572d5..6ca9b5f 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -1,12 +1,9 @@
 import {
   Box,
-  Button,
   Grid,
   GridItem,
   Spacer,
   HStack,
-  useDisclosure,
-  useToast,
   Input,
   InputGroup,
   InputLeftElement,
@@ -16,8 +13,6 @@ import {
 import { useEffect, useState, useContext } from 'react';
 import { SearchIcon, HamburgerIcon } from '@chakra-ui/icons';
 
-import PropTypes from 'prop-types';
-import ArchiveEventsModal from '../components/Events/ArchiveEventsModal';
 import EventCard from '../components/Events/EventCard';
 import ImpactSummary from '../components/Events/ImpactSummary';
 import Backend from '../utils/utils';
@@ -25,12 +20,9 @@ import Fuse from 'fuse.js';
 import NavbarContext from '../utils/NavbarContext';
 
 const Home = () => {
-  const toast = useToast();
   const [events, setEvents] = useState([]);
   const [displayEvents, setDisplayEvents] = useState([]);
-  const [showSelect, setShowSelect] = useState(false);
-  const [isSelectButton, setIsSelectButton] = useState(true);
-  const [isCreateButton, setIsCreateButton] = useState(true); // toggle between create event button and deselect button
+  const [showSelect] = useState(false);
   const [selectedEvents, setSelectedEvents] = useState([]);
   const [name, setName] = useState('');
   const [date, setDate] = useState('');
@@ -50,36 +42,6 @@ const Home = () => {
     }
   };
 
-  const {
-    isOpen: isArchiveEventModalOpen,
-    onOpen: onArchiveEventModalOpen,
-    onClose: onArchiveEventModalClose,
-  } = useDisclosure();
-
-  const confirmArchive = async () => {
-    for (const id of selectedEvents) {
-      try {
-        await Backend.put(`/events/archive/${id}`);
-        getEvents();
-      } catch (error) {
-        console.log(`Error archiving event: ${id}`, error.message);
-      }
-    }
-    onArchiveEventModalClose();
-    handleGoBackButton();
-    toast({
-      title: `Successfully archived ${selectedEvents.length} event(s)`,
-      status: 'success',
-      duration: 3000,
-      isClosable: true,
-    });
-  };
-
-  const archiveEvents = () => {
-    if (selectedEvents.length === 0) handleGoBackButton();
-    else onArchiveEventModalOpen();
-  };
-
   const handleCheckboxChange = id => {
     const newCheckedItems = [...selectedEvents];
     const index = newCheckedItems.indexOf(id);
@@ -112,67 +74,9 @@ const Home = () => {
     // getEventId(eventId);
   }, []);
 
-  const handleSelectButton = () => {
-    setShowSelect(true);
-    setIsSelectButton(false);
-    setIsCreateButton(false);
-  };
 
-  const handleGoBackButton = () => {
-    setShowSelect(false);
-    setIsCreateButton(true);
-    setIsSelectButton(true);
-    setSelectedEvents([]);
-  };
 
-  const SelectButton = () => {
-    return (
-      <>
-        <Button
-          style={{ backgroundColor: 'white' }}
-          onClick={() => handleSelectButton()}
-          fontSize="20px"
-          height={'50px'}
-        >
-          Select
-        </Button>
-      </>
-    );
-  };
-
-  const ArchiveButton = ({ id }) => {
-    return (
-      <>
-        <Button
-          style={{ backgroundColor: '#FFABAB', borderRadius: '30px' }}
-          onClick={() => archiveEvents(id)}
-        >
-          <Box padding={3} fontSize={'lg'} display="inline-flex" gap={10}>
-            Archive Event(s)
-          </Box>
-        </Button>
-      </>
-    );
-  };
 
-  ArchiveButton.propTypes = {
-    id: PropTypes.number,
-  };
-
-  const DeselectButton = () => {
-    return (
-      <>
-        <Button
-          style={{ backgroundColor: 'white', borderRadius: '0px' }}
-          fontSize="20px"
-          height={'50px'}
-          onClick={() => handleGoBackButton()}
-        >
-          Deselect All
-        </Button>
-      </>
-    );
-  };
 
   useEffect(() => {
     if (!fuse) {
@@ -225,7 +129,7 @@ const Home = () => {
           <Flex flexDir={'column'} backgroundColor={'#F8F8F8'} p={8} borderRadius={'lg'} gap={8}>
             <Heading w={'full'}>Upcoming Events</Heading>
             <Box display="flex" flex-direction="row" justifyContent="space-between">
-              {isCreateButton ? <></> : <DeselectButton />}
+          
               <HStack>
                 <InputGroup w="50%">
                   <InputLeftElement pointerEvents="none">
@@ -268,13 +172,7 @@ const Home = () => {
                 </InputGroup>
               </HStack>
 
-              {isSelectButton ? <SelectButton /> : <ArchiveButton id={32} />}
-              <ArchiveEventsModal
-                isOpen={isArchiveEventModalOpen}
-                onClose={onArchiveEventModalClose}
-                confirmArchive={confirmArchive}
-                events={events.filter(event => selectedEvents.includes(event.id))}
-              />
+              
             </Box>
           </Flex>
           <Spacer />