diff --git a/src/components/Layout.js b/src/components/Layout.js
index 3ffa069..7681311 100644
--- a/src/components/Layout.js
+++ b/src/components/Layout.js
@@ -12,6 +12,14 @@ import {
   Flex,
   Link,
   Image,
+  Drawer,
+  DrawerBody,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerCloseButton,
+  useDisclosure,
 } from "@chakra-ui/react";
 import { GiHamburgerMenu } from "@react-icons/all-files/gi/GiHamburgerMenu";
 // import { BiSun } from "@react-icons/all-files/bi/BiSun";
@@ -20,11 +28,22 @@ import { useCore } from "@/providers/CoreProvider";
 import ConnectWalletTag from "./ConnectWalletTag";
 import { sidebarArr } from "@/utils/json";
 import { webColor } from "@/theme/index";
+import { useEffect, useState } from "react";
 
 const Layout = ({ children, currentApp }) => {
   const { isSidebar, setIsSidebar } = useCore();
+  const [deviceIsMobile, setDeviceIsMobile] = useState(null);
+  const { isOpen, onOpen, onClose } = useDisclosure()
   // const { colorMode, toggleColorMode } = useColorMode();
 
+  useEffect(() => {
+    if (window.innerWidth < 768) {
+      setDeviceIsMobile(true);
+    } else {
+      setDeviceIsMobile(false);
+    }
+  }, []);
+
   const sidebarBG = useColorModeValue(
     webColor.sidebarBg[0],
     webColor.sidebarBg[1],
@@ -71,25 +90,25 @@ const Layout = ({ children, currentApp }) => {
             color={defaultColor}
             fontSize="16pt"
             _hover={{ bg: "transparent", color: defaultColor }}
-            onClick={() => setIsSidebar(!isSidebar)}
+            onClick={() => { deviceIsMobile === false ? setIsSidebar(!isSidebar) : onOpen() }}
           >
             <GiHamburgerMenu />
           </IconButton>
         </HStack>
         <HStack spacing="2em">
-          {/* <IconButton 
-                        aria-label='Toggle Color Mode' 
-                        bg='transparent'
-                        color={defaultColor} 
-                        _hover={{ bg: 'transparent', color: defaultColor }}
-                        onClick={toggleColorMode}
-                    >
-                        {colorMode === 'light' ? <BiMoon /> : <BiSun />}
-                    </IconButton> */}
+          {/* <IconButton
+            aria-label='Toggle Color Mode'
+            bg='transparent'
+            color={defaultColor}
+            _hover={{ bg: 'transparent', color: defaultColor }}
+            onClick={toggleColorMode}
+          >
+            {colorMode === 'light' ? <BiMoon /> : <BiSun />}
+          </IconButton> */}
           <ConnectWalletTag isUserProfile isPayments isCopyAddress />
         </HStack>
-      </HStack>
-      {isSidebar && (
+      </HStack >
+      {isSidebar && deviceIsMobile === false && (
         <VStack
           position="fixed"
           top="0"
@@ -106,11 +125,11 @@ const Layout = ({ children, currentApp }) => {
           zIndex="1337 !important"
         >
           {sidebarArr?.map((item, idx) => (
-            <VStack key={idx} spacing="1.5em" alignItems="flex-start" w="full">
-              <Text fontSize="10pt">{item.parent.toUpperCase()}</Text>
-              <VStack spacing=".25em" w="full">
+            <VStack key={idx} alignItems="flex-start" w="full">
+              <Text fontSize="10pt" color={"#D4D4D4"}>{item.parent.toUpperCase()}</Text>
+              <VStack spacing=".25em" w="full" >
                 {item.items.map((nav, idx) => (
-                  <Box key={idx} w="full">
+                  <Box key={idx} w="full" >
                     {!nav.isExternal ? (
                       <NextLink href={`/dashboard${nav.link}`} shallow passHref>
                         <Button
@@ -126,7 +145,7 @@ const Layout = ({ children, currentApp }) => {
                           _focus={{ bg: "transparent" }}
                           color={
                             currentApp ===
-                            nav.name.replace(" ", "").toLowerCase()
+                              nav.name.replace(" ", "").toLowerCase()
                               ? "rgb(52,140,212)"
                               : null
                           }
@@ -154,7 +173,7 @@ const Layout = ({ children, currentApp }) => {
                           _focus={{ bg: "transparent" }}
                           color={
                             currentApp ===
-                            nav.name.replace(" ", "").toLowerCase()
+                              nav.name.replace(" ", "").toLowerCase()
                               ? "rgb(52,140,212)"
                               : null
                           }
@@ -163,14 +182,14 @@ const Layout = ({ children, currentApp }) => {
                         </Button>
                       </Link>
                     )}
-                    <VStack spacing="0" pl="1.5em">
+                    <VStack spacing="0" pl="1.4em"  >
                       {nav.children.map((children, idx) => (
                         <NextLink
                           href={`/dashboard${children.link}`}
                           shallow
                           passHref
                           key={idx}
-                          style={{ width: "100%" }}
+                          style={{ width: '100%', borderLeft: 'solid 2px #2D2F39', position: 'relative' }}
                         >
                           <Button
                             borderRadius="0"
@@ -189,7 +208,12 @@ const Layout = ({ children, currentApp }) => {
                                 : null
                             }
                           >
-                            {children.name}
+                            <div style={{ position: 'absolute', left: '-2px', transform: 'translate(0px, -2px)' }}>
+                              <svg width="13" height="8" viewBox="0 0 13 8" fill="#2D2F39" xmlns="http://www.w3.org/2000/svg">
+                                <path fill-rule="evenodd" clip-rule="evenodd" d="M8 6C4.68629 6 2 3.31371 2 0H0C0 4.41828 3.58172 8 8 8H13V6H8Z" fill="#2D2F39" />
+                              </svg>
+                            </div>
+                            <span style={{ paddingLeft: '2px' }}>{children.name}</span>
                           </Button>
                         </NextLink>
                       ))}
@@ -201,11 +225,129 @@ const Layout = ({ children, currentApp }) => {
           ))}
         </VStack>
       )}
+      {deviceIsMobile &&
+        <>
+          <Drawer
+            isOpen={isOpen}
+            placement='left'
+            onClose={onClose}
+            size="full"
+          >
+            <DrawerOverlay />
+            <DrawerContent
+              bg={sidebarBG}
+            >
+              <DrawerCloseButton />
+              <DrawerBody>
+                {sidebarArr?.map((item, idx) => (
+                  <VStack key={idx} alignItems="flex-start" w="full">
+                    <Text fontSize="10pt" color={"#D4D4D4"}>{item.parent.toUpperCase()}</Text>
+                    <VStack spacing=".25em" w="full" >
+                      {item.items.map((nav, idx) => (
+                        <Box key={idx} w="full" >
+                          {!nav.isExternal ? (
+                            <NextLink href={`/dashboard${nav.link}`} shallow passHref>
+                              <Button
+                                borderRadius="0"
+                                leftIcon={nav.icon}
+                                w="full"
+                                justifyContent="flex-start"
+                                bg="transparent"
+                                _hover={{
+                                  bg: "transparent",
+                                  color: "rgb(52,140,212)",
+                                }}
+                                _focus={{ bg: "transparent" }}
+                                color={
+                                  currentApp ===
+                                    nav.name.replace(" ", "").toLowerCase()
+                                    ? "rgb(52,140,212)"
+                                    : null
+                                }
+                              >
+                                {nav.name}
+                              </Button>
+                            </NextLink>
+                          ) : (
+                            <Link
+                              href={nav.link}
+                              isExternal
+                              style={{ textDecoration: "none" }}
+                              color="inherit"
+                            >
+                              <Button
+                                borderRadius="0"
+                                leftIcon={nav.icon}
+                                w="full"
+                                justifyContent="flex-start"
+                                bg="transparent"
+                                _hover={{
+                                  bg: "transparent",
+                                  color: "rgb(52,140,212)",
+                                }}
+                                _focus={{ bg: "transparent" }}
+                                color={
+                                  currentApp ===
+                                    nav.name.replace(" ", "").toLowerCase()
+                                    ? "rgb(52,140,212)"
+                                    : null
+                                }
+                              >
+                                {nav.name}
+                              </Button>
+                            </Link>
+                          )}
+                          <VStack spacing="0" pl="1.4em"  >
+                            {nav.children.map((children, idx) => (
+                              <NextLink
+                                href={`/dashboard${children.link}`}
+                                shallow
+                                passHref
+                                key={idx}
+                                style={{ width: '100%', borderLeft: 'solid 2px #2D2F39', position: 'relative' }}
+                              >
+                                <Button
+                                  borderRadius="0"
+                                  w="full"
+                                  justifyContent="flex-start"
+                                  bg="transparent"
+                                  fontSize="10pt"
+                                  _hover={{
+                                    bg: "transparent",
+                                    color: "rgb(52,140,212)",
+                                  }}
+                                  _focus={{ bg: "transparent" }}
+                                  color={
+                                    currentApp === children.name.toLowerCase()
+                                      ? "rgb(52,140,212)"
+                                      : null
+                                  }
+                                >
+                                  <div style={{ position: 'absolute', left: '-2px', transform: 'translate(0px, -2px)' }}>
+                                    <svg width="13" height="8" viewBox="0 0 13 8" fill="#2D2F39" xmlns="http://www.w3.org/2000/svg">
+                                      <path fill-rule="evenodd" clip-rule="evenodd" d="M8 6C4.68629 6 2 3.31371 2 0H0C0 4.41828 3.58172 8 8 8H13V6H8Z" fill="#2D2F39" />
+                                    </svg>
+                                  </div>
+                                  <span style={{ paddingLeft: '2px' }}>{children.name}</span>
+                                </Button>
+                              </NextLink>
+                            ))}
+                          </VStack>
+                        </Box>
+                      ))}
+                    </VStack>
+                  </VStack>
+                ))}
+              </DrawerBody>
+            </DrawerContent>
+          </Drawer>
+        </>
+      }
       <Flex
         flexDir="column"
         pt="80px"
         pb="102px"
-        ml={isSidebar ? "245px" : "0"}
+        ml={(isSidebar && deviceIsMobile === false) ? "245px" : "0"}
         px="2rem"
         minH="100vh"
       >