diff --git a/app/dashboard/src/components/Sidebar/index.tsx b/app/dashboard/src/components/Sidebar/index.tsx
index 8148a0c..4f2ddff 100644
--- a/app/dashboard/src/components/Sidebar/index.tsx
+++ b/app/dashboard/src/components/Sidebar/index.tsx
@@ -24,32 +24,48 @@ export const SidebarMenuIcon = chakra(HamburgerIcon, {
 });
 
 export const SidebarItem: FC<SideBarItemProps & { index: number }> = ({ itemIcon: ItemIcon, name, path, index, }) => {
-  const hoverStyle = {
-    borderRadius: 4,
-    border: '4px',
-    m: '-2px',
-    borderColor: 'primary.100',
-  };
-  const activeStyle = {
-    bg: 'primary.500',
-    ...hoverStyle,
-  };
   const { t } = useTranslation();
   const { activePage, activatePage } = useDashboard();
   const [active, activate] = useState(index === activePage)
 
   useEffect(() => { activate(index === activePage) }, [active, activePage]);
 
+  const darkStyle = { bg: active ? 'primary.900' : 'transparent' };
+  const hoverStyle = {
+    borderRadius: 10,
+    bg: active ? undefined : 'gray.200',
+    _dark: {
+      bg: 'gray.700'
+    },
+    transition: 'background-color 0.9s',
+  };
+
   return (
-    <ChakraLink as={ReactRouterLink} sx={active ? activeStyle : {}} to={path} w="13rem" _hover={hoverStyle} onClick={() => { activatePage(index) }}>
-      <Flex flexDir="row" alignItems="center">
-        <Icon color="primary.500">
-          <ItemIcon color={active ? 'white' : 'primary.500'} />
+    <ChakraLink
+      as={ReactRouterLink}
+      borderRadius={10}
+      bg={active ? 'primary.500' : 'transparent'}
+      border="4px"
+      ps="4px"
+      borderColor="transparent"
+      _dark={darkStyle}
+      to={path}
+      w="13rem"
+      _hover={hoverStyle}
+      onClick={() => {
+        activatePage(index);
+      }}
+    >
+      <Flex flexDir="row" alignItems="center" >
+        <Icon color="">
+          <ItemIcon color={active ? 'gray.100' : undefined} _dark={{ color: active ? 'gray.100' : undefined }} />
         </Icon>
-        <Text color={active ? 'white' : 'black'} fontSize="xl">{t(name)}</Text>
+        <Text color={active ? 'gray.100' : 'gray.700'} _dark={{ color: 'gray.100' }} fontSize="xl" >
+          {t(name)}
+        </Text>
       </Flex>
     </ChakraLink>
-  )
+  );
 }
 
 export const Sidebar = () => {
@@ -59,13 +75,14 @@ export const Sidebar = () => {
         pos="sticky"
         left="5"
         borderRightWidth="4px"
-        borderRightColor="primary.100"
+        borderRightColor='gray.200'
         borderRightStyle="solid"
         flexDir="column"
         h="100vh"
         bg="gray.50"
+        _dark={{ bg: 'gray.800', borderRightColor: 'gray.700' }}
       >
-        <VStack pt="30px" gap="6">
+        <VStack pt="30px" gap="2">
           <Image src="favicon/logo.svg" alt="marzneshin" boxSize="50px" />
           {pages.map((item: SideBarItemProps, index: number) =>
             <SidebarItem path={item.path} name={item.name} itemIcon={item.itemIcon} index={index} />)}