diff --git a/package.json b/package.json
index 8138c12..0bd1d78 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "react-apexcharts": "^1.3.9",
     "react-big-calendar": "0.33.2",
     "react-bootstrap-sweetalert": "5.2.0",
+    "react-custom-scrollbars": "^4.2.1",
     "react-datetime": "3.0.4",
     "react-dom": "17.0.2",
     "react-github-btn": "^1.2.1",
diff --git a/src/components/Scrollbar/Scrollbar.js b/src/components/Scrollbar/Scrollbar.js
new file mode 100644
index 0000000..d957fca
--- /dev/null
+++ b/src/components/Scrollbar/Scrollbar.js
@@ -0,0 +1,91 @@
+import React from "react";
+
+export const renderTrack = ({ style, ...props }) => {
+  const trackStyle = {
+    position: "absolute",
+    maxWidth: "100%",
+    width: 6,
+    transition: "opacity 200ms ease 0s",
+    opacity: 0,
+    bottom: 2,
+    top: 2,
+    borderRadius: 3,
+    right: 0,
+  };
+  return <div style={{ ...style, ...trackStyle }} {...props} />;
+};
+export const renderTrackRTL = ({ style, ...props }) => {
+  const trackStyle = {
+    position: "absolute",
+    width: 6,
+    transition: "opacity 200ms ease 0s",
+    opacity: 0,
+    bottom: 2,
+    top: 2,
+    borderRadius: 3,
+    right: "unset",
+    left: 0,
+  };
+  return <div style={{ ...style, ...trackStyle }} {...props} />;
+};
+export const renderThumbDark = ({ style, ...props }) => {
+  const thumbStyle = {
+    borderRadius: 15,
+    background: "rgba(222, 222, 222, .1)",
+  };
+  return <div style={{ ...style, ...thumbStyle }} {...props} />;
+};
+export const renderThumbLight = ({ style, ...props }) => {
+  const thumbStyle = {
+    borderRadius: 15,
+    background: "rgba(48, 48, 48, .1)",
+  };
+  return <div style={{ ...style, ...thumbStyle }} {...props} />;
+};
+export const renderView = ({ style, ...props }) => {
+  const viewStyle = {
+    marginRight: -22,
+  };
+  return <div style={{ ...style, ...viewStyle }} {...props} />;
+};
+export const renderViewRTL = ({ style, ...props }) => {
+  const viewStyle = {
+    marginRight: "unset",
+    marginLeft: -15,
+  };
+  return <div style={{ ...style, ...viewStyle }} {...props} />;
+};
+
+export const kanbanRenderTrack = ({ style, ...props }) => {
+  const trackStyle = {
+    width: 6,
+    transition: "opacity 200ms ease 0s",
+    opacity: 0,
+    bottom: 2,
+    top: 2,
+    borderRadius: 3,
+    right: 0,
+  };
+  return <div style={{ ...style, ...trackStyle }} {...props} />;
+};
+export const kanbanRenderThumbDark = ({ style, ...props }) => {
+  const thumbStyle = {
+    borderRadius: 15,
+    background: "rgba(222, 222, 222, .1)",
+  };
+  return <div style={{ ...style, ...thumbStyle }} {...props} />;
+};
+export const kanbanRenderThumbLight = ({ style, ...props }) => {
+  const thumbStyle = {
+    borderRadius: 15,
+    background: "rgba(48, 48, 48, .1)",
+  };
+  return <div style={{ ...style, ...thumbStyle }} {...props} />;
+};
+export const kanbanRenderView = ({ style, ...props }) => {
+  const viewStyle = {
+    position: "relative",
+    marginRight: -15,
+  };
+  return <div style={{ ...style, ...viewStyle }} {...props} />;
+};
\ No newline at end of file
diff --git a/src/components/Sidebar/Sidebar.js b/src/components/Sidebar/Sidebar.js
index 305f1af..922ad7e 100644
--- a/src/components/Sidebar/Sidebar.js
+++ b/src/components/Sidebar/Sidebar.js
@@ -23,6 +23,17 @@ import PropTypes from "prop-types";
 import React from "react";
 import { NavLink, useLocation } from "react-router-dom";
 
+import { Scrollbars } from "react-custom-scrollbars";
+
+import {
+  renderThumbDark,
+  renderThumbLight,
+  renderTrack,
+  renderTrackRTL,
+  renderView,
+  renderViewRTL,
+} from "components/Scrollbar/Scrollbar";
+
 // FUNCTIONS
 
 function Sidebar(props) {
@@ -58,16 +69,17 @@ function Sidebar(props) {
           <>
             <Text
               color={activeColor}
-              fontWeight='bold'
+              fontWeight="bold"
               mb={{
                 xl: "6px",
               }}
-              mx='auto'
+              mx="auto"
               ps={{
                 sm: "10px",
                 xl: "16px",
               }}
-              py='12px'>
+              py="12px"
+            >
               {document.documentElement.dir === "rtl"
                 ? prop.rtlName
                 : prop.name}
@@ -80,9 +92,9 @@ function Sidebar(props) {
         <NavLink to={prop.layout + prop.path}>
           {activeRoute(prop.layout + prop.path) === "active" ? (
             <Button
-              boxSize='initial'
-              justifyContent='flex-start'
-              alignItems='center'
+              boxSize="initial"
+              justifyContent="flex-start"
+              alignItems="center"
               boxShadow={sidebarActiveShadow}
               bg={activeBg}
               transition={variantChange}
@@ -96,10 +108,10 @@ function Sidebar(props) {
                 sm: "10px",
                 xl: "16px",
               }}
-              py='12px'
-              borderRadius='15px'
-              _hover='none'
-              w='100%'
+              py="12px"
+              borderRadius="15px"
+              _hover="none"
+              w="100%"
               _active={{
                 bg: "inherit",
                 transform: "none",
@@ -107,22 +119,24 @@ function Sidebar(props) {
               }}
               _focus={{
                 boxShadow: "0px 7px 11px rgba(0, 0, 0, 0.04)",
-              }}>
+              }}
+            >
               <Flex>
                 {typeof prop.icon === "string" ? (
                   <Icon>{prop.icon}</Icon>
                 ) : (
                   <IconBox
-                    bg='blue.500'
-                    color='white'
-                    h='30px'
-                    w='30px'
-                    me='12px'
-                    transition={variantChange}>
+                    bg="blue.500"
+                    color="white"
+                    h="30px"
+                    w="30px"
+                    me="12px"
+                    transition={variantChange}
+                  >
                     {prop.icon}
                   </IconBox>
                 )}
-                <Text color={activeColor} my='auto' fontSize='sm'>
+                <Text color={activeColor} my="auto" fontSize="sm">
                   {document.documentElement.dir === "rtl"
                     ? prop.rtlName
                     : prop.name}
@@ -131,24 +145,24 @@ function Sidebar(props) {
             </Button>
           ) : (
             <Button
-              boxSize='initial'
-              justifyContent='flex-start'
-              alignItems='center'
-              bg='transparent'
+              boxSize="initial"
+              justifyContent="flex-start"
+              alignItems="center"
+              bg="transparent"
               mb={{
                 xl: "6px",
               }}
               mx={{
                 xl: "auto",
               }}
-              py='12px'
+              py="12px"
               ps={{
                 sm: "10px",
                 xl: "16px",
               }}
-              borderRadius='15px'
-              _hover='none'
-              w='100%'
+              borderRadius="15px"
+              _hover="none"
+              w="100%"
               _active={{
                 bg: "inherit",
                 transform: "none",
@@ -156,22 +170,24 @@ function Sidebar(props) {
               }}
               _focus={{
                 boxShadow: "none",
-              }}>
+              }}
+            >
               <Flex>
                 {typeof prop.icon === "string" ? (
                   <Icon>{prop.icon}</Icon>
                 ) : (
                   <IconBox
                     bg={inactiveBg}
-                    color='blue.500'
-                    h='30px'
-                    w='30px'
-                    me='12px'
-                    transition={variantChange}>
+                    color="blue.500"
+                    h="30px"
+                    w="30px"
+                    me="12px"
+                    transition={variantChange}
+                  >
                     {prop.icon}
                   </IconBox>
                 )}
-                <Text color={inactiveColor} my='auto' fontSize='sm'>
+                <Text color={inactiveColor} my="auto" fontSize="sm">
                   {document.documentElement.dir === "rtl"
                     ? prop.rtlName
                     : prop.name}
@@ -192,38 +208,57 @@ function Sidebar(props) {
   let sidebarRadius = "20px";
   let sidebarMargins = "0px";
   var brand = (
-    <Box pt={"25px"} mb='12px'>
+    <Box pt={"25px"} mb="12px">
       {logo}
-      <HSeparator my='26px' />
+      <HSeparator my="26px" />
     </Box>
   );
 
   // SIDEBAR
   return (
     <Box ref={mainPanel}>
-      <Box display={{ sm: "none", xl: "block" }} position='fixed'>
+      <Box display={{ sm: "none", xl: "block" }} position="fixed">
         <Box
           bg={sidebarBg}
           transition={variantChange}
-          w='260px'
-          maxW='260px'
+          w="260px"
+          maxW="260px"
           ms={{
             sm: "16px",
           }}
           my={{
             sm: "16px",
           }}
-          h='calc(100vh - 32px)'
-          ps='20px'
-          pe='20px'
+          h="calc(100vh - 32px)"
+          ps="20px"
+          pe="20px"
           m={sidebarMargins}
-          filter='drop-shadow(0px 5px 14px rgba(0, 0, 0, 0.05))'
-          borderRadius={sidebarRadius}>
-          <Box>{brand}</Box>
-          <Stack direction='column' mb='40px'>
-            <Box>{links}</Box>
-          </Stack>
-          <SidebarHelp sidebarVariant={sidebarVariant} />
+          filter="drop-shadow(0px 5px 14px rgba(0, 0, 0, 0.05))"
+          borderRadius={sidebarRadius}
+        >
+          <Scrollbars
+            autoHide
+            renderTrackVertical={
+              document.documentElement.dir === "rtl"
+                ? renderTrackRTL
+                : renderTrack
+            }
+            renderThumbVertical={useColorModeValue(
+              renderThumbLight,
+              renderThumbDark
+            )}
+            renderView={
+              document.documentElement.dir === "rtl"
+                ? renderViewRTL
+                : renderView
+            }
+          >
+            <Box>{brand}</Box>
+            <Stack direction="column" mb="40px">
+              <Box>{links}</Box>
+            </Stack>
+            <SidebarHelp sidebarVariant={sidebarVariant} />
+          </Scrollbars>
         </Box>
       </Box>
     </Box>
@@ -253,7 +288,7 @@ export function SidebarResponsive(props) {
     "0px 7px 11px rgba(0, 0, 0, 0.04)",
     "none"
   );
-  let sidebarBackgroundColor = useColorModeValue("white", "navy.900");
+  let sidebarBackgroundColor = useColorModeValue("white", "navy.800");
 
   // this function creates the links and collapses that appear in the sidebar (left menu)
   const createLinks = (routes) => {
@@ -268,16 +303,17 @@ export function SidebarResponsive(props) {
           <>
             <Text
               color={activeColor}
-              fontWeight='bold'
+              fontWeight="bold"
               mb={{
                 xl: "6px",
               }}
-              mx='auto'
+              mx="auto"
               ps={{
                 sm: "10px",
                 xl: "16px",
               }}
-              py='12px'>
+              py="12px"
+            >
               {document.documentElement.dir === "rtl"
                 ? prop.rtlName
                 : prop.name}
@@ -290,9 +326,9 @@ export function SidebarResponsive(props) {
         <NavLink to={prop.layout + prop.path}>
           {activeRoute(prop.layout + prop.path) === "active" ? (
             <Button
-              boxSize='initial'
-              justifyContent='flex-start'
-              alignItems='center'
+              boxSize="initial"
+              justifyContent="flex-start"
+              alignItems="center"
               bg={activeBg}
               boxShadow={sidebarActiveShadow}
               mb={{
@@ -305,10 +341,10 @@ export function SidebarResponsive(props) {
                 sm: "10px",
                 xl: "16px",
               }}
-              py='12px'
-              borderRadius='15px'
-              _hover='none'
-              w='100%'
+              py="12px"
+              borderRadius="15px"
+              _hover="none"
+              w="100%"
               _active={{
                 bg: "inherit",
                 transform: "none",
@@ -316,21 +352,23 @@ export function SidebarResponsive(props) {
               }}
               _focus={{
                 boxShadow: "none",
-              }}>
+              }}
+            >
               <Flex>
                 {typeof prop.icon === "string" ? (
                   <Icon>{prop.icon}</Icon>
                 ) : (
                   <IconBox
-                    bg='blue.500'
-                    color='white'
-                    h='30px'
-                    w='30px'
-                    me='12px'>
+                    bg="blue.500"
+                    color="white"
+                    h="30px"
+                    w="30px"
+                    me="12px"
+                  >
                     {prop.icon}
                   </IconBox>
                 )}
-                <Text color={activeColor} my='auto' fontSize='sm'>
+                <Text color={activeColor} my="auto" fontSize="sm">
                   {document.documentElement.dir === "rtl"
                     ? prop.rtlName
                     : prop.name}
@@ -339,24 +377,24 @@ export function SidebarResponsive(props) {
             </Button>
           ) : (
             <Button
-              boxSize='initial'
-              justifyContent='flex-start'
-              alignItems='center'
-              bg='transparent'
+              boxSize="initial"
+              justifyContent="flex-start"
+              alignItems="center"
+              bg="transparent"
               mb={{
                 xl: "6px",
               }}
               mx={{
                 xl: "auto",
               }}
-              py='12px'
+              py="12px"
               ps={{
                 sm: "10px",
                 xl: "16px",
               }}
-              borderRadius='15px'
-              _hover='none'
-              w='100%'
+              borderRadius="15px"
+              _hover="none"
+              w="100%"
               _active={{
                 bg: "inherit",
                 transform: "none",
@@ -364,21 +402,23 @@ export function SidebarResponsive(props) {
               }}
               _focus={{
                 boxShadow: "none",
-              }}>
+              }}
+            >
               <Flex>
                 {typeof prop.icon === "string" ? (
                   <Icon>{prop.icon}</Icon>
                 ) : (
                   <IconBox
                     bg={inactiveBg}
-                    color='blue.500'
-                    h='30px'
-                    w='30px'
-                    me='12px'>
+                    color="blue.500"
+                    h="30px"
+                    w="30px"
+                    me="12px"
+                  >
                     {prop.icon}
                   </IconBox>
                 )}
-                <Text color={inactiveColor} my='auto' fontSize='sm'>
+                <Text color={inactiveColor} my="auto" fontSize="sm">
                   {document.documentElement.dir === "rtl"
                     ? prop.rtlName
                     : prop.name}
@@ -396,9 +436,9 @@ export function SidebarResponsive(props) {
   //  BRAND
 
   var brand = (
-    <Box pt={"35px"} mb='8px'>
+    <Box pt={"35px"} mb="8px">
       {logo}
-      <HSeparator my='26px' />
+      <HSeparator my="26px" />
     </Box>
   );
 
@@ -410,11 +450,12 @@ export function SidebarResponsive(props) {
     <Flex
       display={{ sm: "flex", xl: "none" }}
       ref={mainPanel}
-      alignItems='center'>
+      alignItems="center"
+    >
       <HamburgerIcon
         color={hamburgerColor}
-        w='18px'
-        h='18px'
+        w="18px"
+        h="18px"
         ref={btnRef}
         onClick={onOpen}
       />
@@ -422,27 +463,29 @@ export function SidebarResponsive(props) {
         isOpen={isOpen}
         onClose={onClose}
         placement={document.documentElement.dir === "rtl" ? "right" : "left"}
-        finalFocusRef={btnRef}>
+        finalFocusRef={btnRef}
+      >
         <DrawerOverlay />
         <DrawerContent
-          w='250px'
-          maxW='250px'
+          w="250px"
+          maxW="250px"
           ms={{
             sm: "16px",
           }}
           my={{
             sm: "16px",
           }}
-          borderRadius='16px'
-          bg={sidebarBackgroundColor}>
+          borderRadius="16px"
+          bg={sidebarBackgroundColor}
+        >
           <DrawerCloseButton
             _focus={{ boxShadow: "none" }}
             _hover={{ boxShadow: "none" }}
           />
-          <DrawerBody maxW='250px' px='1rem'>
-            <Box maxW='100%' h='100vh'>
+          <DrawerBody maxW="250px" px="1rem">
+            <Box maxW="100%" h="100vh">
               <Box>{brand}</Box>
-              <Stack direction='column' mb='40px'>
+              <Stack direction="column" mb="40px">
                 <Box>{links}</Box>
               </Stack>
               <SidebarHelp />
@@ -465,4 +508,4 @@ SidebarResponsive.propTypes = {
   routes: PropTypes.arrayOf(PropTypes.object),
 };
 
-export default Sidebar;
\ No newline at end of file
+export default Sidebar;
diff --git a/src/components/Sidebar/SidebarHelp.js b/src/components/Sidebar/SidebarHelp.js
index 9504c22..0c9723e 100644
--- a/src/components/Sidebar/SidebarHelp.js
+++ b/src/components/Sidebar/SidebarHelp.js
@@ -22,8 +22,10 @@ export function SidebarHelp(props) {
       direction='column'
       align='center'
       spacing='20px'
+      mb="22px"
+      mt="auto"
       mx='20px'>
-      <Image src={SidebarHelpImage} w='165px' />
+      <Image src={SidebarHelpImage} w='110px' h="auto" />
       <Flex direction='column' textAlign='center'>
         <Text fontSize='14px' color={textColor} fontWeight='bold'>
           Need help?