diff --git a/src/Components/HeaderMain.jsx b/src/Components/HeaderMain.jsx
index ecf352e..e6c73cd 100644
--- a/src/Components/HeaderMain.jsx
+++ b/src/Components/HeaderMain.jsx
@@ -10,10 +10,14 @@ import {
   Box,
   Button,
   HStack,
+  Icon,
   Image,
   Input,
   InputGroup,
   InputLeftElement,
+  Menu,
+  MenuButton,
+  MenuList,
   Popover,
   PopoverArrow,
   PopoverBody,
@@ -33,6 +37,9 @@ import mainLogo from "../assets/optifii_logo.svg";
 import { MdNotificationsNone } from "react-icons/md";
 import womenpfp from "../assets/womenpfp1.png";
 import { MdLogout } from "react-icons/md";
+import { IoFilterSharp } from "react-icons/io5";
+import { MdDeleteOutline, MdOutlineDelete } from "react-icons/md";
+import { IoIosCheckmark } from "react-icons/io";
 
 const users = [
   { id: 1, user: "Jenny Wilson", role: "Admin" },
@@ -49,6 +56,34 @@ const HeaderMain = ({
   const navigate = useNavigate();
   const { colorMode, toggleColorMode } = useContext(GlobalStateContext);
   const [searchTerm, setSearchTerm] = useState("");
+  const [notifications, setNotifications] = useState([
+    {
+      id: 1,
+      avatar: "https://bit.ly/dan-abramov",
+      sender: "Admin",
+      time: "1 Min ago",
+      message: "Lorem ipsum dolor sit amet, consectetur",
+    },
+    {
+      id: 2,
+      avatar: "https://bit.ly/code-beast",
+      sender: "Support",
+      time: "5 Min ago",
+      message: "Your ticket has been updated.",
+    },
+  ]);
+
+  // Handler to delete a notification
+  const handleDelete = (id) => {
+    setNotifications(
+      notifications.filter((notification) => notification.id !== id)
+    );
+  };
+
+  // Handler to delete all notifications
+  const handleDeleteAll = () => {
+    setNotifications([]);
+  };
 
   const openDrawerOnClick = () => {};
 
@@ -126,14 +161,192 @@ const HeaderMain = ({
         justifyContent={"space-between"}
       >
         <Box display={"flex"} gap={2}>
-          <Box display={"flex"} gap={2} alignItems={"center"} me={2}>
+          {/* <Box display={"flex"} gap={2} alignItems={"center"} me={2}>
             <Button 
             onClick={()=>navigate("/notification")}
             size={"sm"} bg={"none"} p={0}
             >
               <MdNotificationsNone fontSize={"20px"} />
             </Button>
-          </Box>
+          </Box> */}
+          <Menu>
+            <MenuButton
+              as={Button}
+              border={"0px"}
+              _hover={{ bgColor: "#FFF" }}
+              // _active={{bgColor:"#FFF"}}
+              fontSize={"xs"}
+              color={"gray.700"}
+              variant="outline"
+              size={"sm"}
+              me={2}
+            >
+              <MdNotificationsNone fontSize={"20px"} />
+            </MenuButton>
+            <MenuList w="342px" h="442px" overflowY="scroll">
+              <HStack
+                borderBottom="1px dashed #CFCFCF"
+                justifyContent="space-between"
+                w="100%"
+                p={2}
+                position="fixed"
+                top={1}
+                bgColor="#FFF"
+              >
+                <Text
+                  as="span"
+                  fontWeight={600}
+                  fontSize="small"
+                  color="#000000"
+                >
+                  Notification
+                </Text>
+                <Text
+                  textDecoration="underline"
+                  fontSize="small"
+                  color="#696498"
+                  onClick={handleDeleteAll}
+                >
+                  Clear all
+                </Text>
+              </HStack>
+              <VStack mt={12} mb={12}>
+                <Box bg="#fff" p={1} rounded="md" boxShadow="md">
+                  <Text fontSize="small" fontWeight={400} color="#A0A0A0">
+                    Today
+                  </Text>
+                  <VStack spacing={4} align="stretch">
+                    {notifications.map((notification) => (
+                      <HStack
+                        key={notification.id}
+                        justifyContent="space-between"
+                        bg="#F3F7F9"
+                        p={2}
+                        rounded="sm"
+                        boxShadow="md"
+                      >
+                        <HStack spacing={2}>
+                          <Box bg="#d7d3fb" p={1} rounded="full">
+                            <Image
+                              borderRadius="full"
+                              boxSize="30px"
+                              src={notification.avatar}
+                              alt={notification.sender}
+                            />
+                          </Box>
+                          <Box>
+                            <Box mb={0}>
+                              <Text
+                                as="span"
+                                fontSize="sm"
+                                fontWeight={600}
+                                mb={0}
+                              >
+                                {notification.sender}
+                              </Text>
+                              <Text
+                                as="span"
+                                color="#A0A0A0"
+                                fontSize="xs"
+                                ms={2}
+                                fontWeight={500}
+                                mb={0}
+                              >
+                                {notification.time}
+                              </Text>
+                            </Box>
+                            <Text color="#A0A0A0" fontSize="xs" mb={0}>
+                              {notification.message}
+                            </Text>
+                          </Box>
+                        </HStack>
+                        <Box
+                          onClick={() => handleDelete(notification.id)}
+                          cursor="pointer"
+                        >
+                          <MdOutlineDelete color="#686868" size={16} />
+                        </Box>
+                      </HStack>
+                    ))}
+                  </VStack>
+                </Box>
+
+                <Box bg="#fff" p={1} rounded="md" boxShadow="md">
+                  <Text fontSize="small" fontWeight={400} color="#A0A0A0">
+                    Yesterday
+                  </Text>
+                  <VStack spacing={4} align="stretch">
+                    {notifications.map((notification) => (
+                      <HStack
+                        key={notification.id}
+                        justifyContent="space-between"
+                        bg="#F3F7F9"
+                        p={2}
+                        rounded="sm"
+                        boxShadow="md"
+                      >
+                        <HStack spacing={2}>
+                          <Box bg="#d7d3fb" p={1} rounded="full">
+                            <Image
+                              borderRadius="full"
+                              boxSize="30px"
+                              src={notification.avatar}
+                              alt={notification.sender}
+                            />
+                          </Box>
+                          <Box>
+                            <Box mb={0}>
+                              <Text
+                                as="span"
+                                fontSize="sm"
+                                fontWeight={600}
+                                mb={0}
+                              >
+                                {notification.sender}
+                              </Text>
+                              <Text
+                                as="span"
+                                color="#A0A0A0"
+                                fontSize="xs"
+                                ms={2}
+                                fontWeight={500}
+                                mb={0}
+                              >
+                                {notification.time}
+                              </Text>
+                            </Box>
+                            <Text color="#A0A0A0" fontSize="xs" mb={0}>
+                              {notification.message}
+                            </Text>
+                          </Box>
+                        </HStack>
+                        <Box
+                          onClick={() => handleDelete(notification.id)}
+                          cursor="pointer"
+                        >
+                          <MdOutlineDelete color="#686868" size={16} />
+                        </Box>
+                      </HStack>
+                    ))}
+                  </VStack>
+                </Box>
+              </VStack>
+
+              <HStack
+                position="fixed"
+                bottom={0}
+                borderTop="0.5px solid #CFCFCF"
+                p={1}
+                justifyContent="center"
+                bgColor="#fff"
+                w="100%"
+              >
+                <Text onClick={()=>navigate("/notification")} cursor="pointer" fontSize="small" color="#6311CB" fontWeight={600}>
+                  View All
+                </Text>
+              </HStack>
+            </MenuList>
+          </Menu>
           <Box me={4} gap={2} className="d-flex justify-content-center ">
             <Popover placement="bottom">
               <Portal>
@@ -155,8 +368,13 @@ const HeaderMain = ({
                     </PopoverBody>
                   </Link> */}
                   <PopoverBody className="web-text-medium pointer ">
-                    <VStack  alignItems="flex-start">
-                      <Text color="#A0ABBB" textAlign="left"  fontSize={"x-small"} fontWeight={600}>
+                    <VStack alignItems="flex-start">
+                      <Text
+                        color="#A0ABBB"
+                        textAlign="left"
+                        fontSize={"x-small"}
+                        fontWeight={600}
+                      >
                         Switch Accounts
                       </Text>
                       {users.map((val) => {
@@ -168,34 +386,34 @@ const HeaderMain = ({
                           //   key={val.id}
                           //   w="100%"
                           // >
-                            <HStack
-                              alignItems="flex-start"
-                              gap={4}
-                              w="100%"
-                              className="pointer link"
+                          <HStack
+                            alignItems="flex-start"
+                            gap={4}
+                            w="100%"
+                            className="pointer link"
+                          >
+                            <Image
+                              src={womenpfp}
+                              h="31.79px"
+                              alt="Profile Picture"
+                            />
+                            <Text
+                              as={"span"}
+                              fontSize="x-small"
+                              fontWeight={600}
+                              color="#191D23"
                             >
-                              <Image
-                                src={womenpfp}
-                                h="31.79px"
-                                alt="Profile Picture"
-                              />
+                              {val.user}
                               <Text
-                                as={"span"}
+                                // as={"span"}
                                 fontSize="x-small"
                                 fontWeight={600}
-                                color="#191D23"
+                                color="#A0ABBB"
                               >
-                                {val.user}
-                                <Text
-                                  // as={"span"}
-                                  fontSize="x-small"
-                                  fontWeight={600}
-                                  color="#A0ABBB"
-                                >
-                                  {val.role}
-                                </Text>
+                                {val.role}
                               </Text>
-                            </HStack>
+                            </Text>
+                          </HStack>
                           // </VStack>
                         );
                       })}