diff --git a/src/Pages/ManageHumanResource/Employees.jsx b/src/Pages/ManageHumanResource/Employees.jsx
index 0f66511..8a0349f 100644
--- a/src/Pages/ManageHumanResource/Employees.jsx
+++ b/src/Pages/ManageHumanResource/Employees.jsx
@@ -49,7 +49,7 @@ import {
   AccordionButton,
   AccordionPanel,
 } from "@chakra-ui/react";
-import {  ChevronRightIcon } from "@chakra-ui/icons";
+import { ChevronRightIcon } from "@chakra-ui/icons";
 
 const Employees = () => {
   const { employees } = useContext(GlobalStateContext);
@@ -335,7 +335,7 @@ const Employees = () => {
                 >
                   Filter
                 </MenuButton>
-                <MenuList>
+                <MenuList w="350px" h="300px" overflowY="scroll">
                   <VStack p={2} alignItems="flex-start">
                     <HStack alignItems="center">
                       <IoFilterSharp fontSize="small" />{" "}
@@ -344,63 +344,61 @@ const Employees = () => {
                       </Text>
                     </HStack>
                     <Box w="100%" borderBottom="1px solid #D8D8D8" />
-                    <Accordion allowMultiple>
-                      {/* Department Section */}
-                      <AccordionItem>
-                        {({ isExpanded }) => (
-                          <>
-                            <h2>
+                    <Box w="100%">
+                      <Accordion allowMultiple border="0px solid white">
+                        {/* Department Section */}
+                        <AccordionItem>
+                          {({ isExpanded }) => (
+                            <>
                               <AccordionButton>
-                                <Box flex="1" textAlign="left">
+                                {isExpanded ? (
+                                  <ChevronDownIcon fontSize="24px" />
+                                ) : (
+                                  <ChevronRightIcon fontSize="24px" />
+                                )}
+                                <Box flex="1" textAlign="left" ml={2}>
                                   Department
                                 </Box>
+                              </AccordionButton>
+                              <AccordionPanel pb={2}>
+                                <VStack align="start">
+                                  <Checkbox defaultChecked>Design</Checkbox>
+                                  <Checkbox>Finance</Checkbox>
+                                  <Checkbox defaultChecked>IT</Checkbox>
+                                  <Checkbox>Development</Checkbox>
+                                  <Checkbox>Sales</Checkbox>
+                                  <Checkbox>QA</Checkbox>
+                                </VStack>
+                              </AccordionPanel>
+                            </>
+                          )}
+                        </AccordionItem>
+
+                        {/* Status Section */}
+                        <AccordionItem>
+                          {({ isExpanded }) => (
+                            <>
+                              <AccordionButton>
                                 {isExpanded ? (
                                   <ChevronDownIcon fontSize="24px" />
                                 ) : (
                                   <ChevronRightIcon fontSize="24px" />
                                 )}
-                              </AccordionButton>
-                            </h2>
-                            <AccordionPanel pb={4}>
-                              <VStack align="start">
-                                <Checkbox defaultChecked>Design</Checkbox>
-                                <Checkbox>Finance</Checkbox>
-                                <Checkbox defaultChecked>IT</Checkbox>
-                                <Checkbox>Development</Checkbox>
-                                <Checkbox>Sales</Checkbox>
-                                <Checkbox>QA</Checkbox>
-                              </VStack>
-                            </AccordionPanel>
-                          </>
-                        )}
-                      </AccordionItem>
-
-                      {/* Status Section */}
-                      <AccordionItem>
-                        {({ isExpanded }) => (
-                          <>
-                            <h2>
-                              <AccordionButton>
-                                <Box flex="1" textAlign="left">
+                                <Box flex="1" textAlign="left" ml={4}>
                                   Status
                                 </Box>
-                                {isExpanded ? (
-                                  <ChevronDownIcon fontSize="24px" />
-                                ) : (
-                                  <ChevronRightIcon fontSize="24px" />
-                                )}
                               </AccordionButton>
-                            </h2>
-                            <AccordionPanel pb={4}>
-                              <VStack align="start">
-                                <Checkbox>Active</Checkbox>
-                                <Checkbox>Inactive</Checkbox>
-                              </VStack>
-                            </AccordionPanel>
-                          </>
-                        )}
-                      </AccordionItem>
-                    </Accordion>
+                              <AccordionPanel pb={4}>
+                                <VStack align="start">
+                                  <Checkbox>Active</Checkbox>
+                                  <Checkbox>Inactive</Checkbox>
+                                </VStack>
+                              </AccordionPanel>
+                            </>
+                          )}
+                        </AccordionItem>
+                      </Accordion>
+                    </Box>
                   </VStack>
                 </MenuList>
               </Menu>