diff --git a/remix/app/components/Thingtime/SettingsMenu.tsx b/remix/app/components/Thingtime/SettingsMenu.tsx
index 4371203..6823e24 100644
--- a/remix/app/components/Thingtime/SettingsMenu.tsx
+++ b/remix/app/components/Thingtime/SettingsMenu.tsx
@@ -1,10 +1,42 @@
 import React, { useState } from "react"
+import ClickAwayListener from "react-click-away-listener"
 import { Center, Flex, Text } from "@chakra-ui/react"
 
 import { Icon } from "../Icon/Icon"
 
 export const SettingsMenu = (props) => {
   const [show, setShow] = useState(false)
+  const hideRef = React.useRef(null)
+  const [opacity, setOpacity] = React.useState(props?.opacity === 0 ? 0 : 1)
+
+  const opacityRef = React.useRef(null)
+
+  const waitTime = 1555
+
+  React.useEffect(() => {
+    clearInterval(opacityRef?.current)
+    if (props?.opacity) {
+      setOpacity(props?.opacity)
+    } else {
+      opacityRef.current = setInterval(() => {
+        setOpacity(props?.opacity)
+        setShow(false)
+      }, waitTime)
+    }
+  }, [props?.opacity])
+
+  React.useEffect(() => {
+    if (show || props?.opacity) {
+      clearInterval(hideRef?.current)
+    }
+  }, [show, props?.opacity])
+
+  const maybeHide = React.useCallback(() => {
+    clearInterval(hideRef?.current)
+    hideRef.current = setTimeout(() => {
+      setShow(false)
+    }, waitTime)
+  }, [])
 
   const showMenu = React.useCallback(() => {
     setShow(true)
@@ -46,117 +78,124 @@ export const SettingsMenu = (props) => {
   const iconSize = 10
 
   return (
-    <Center
-      position="relative"
-      // width="100%"
-      paddingRight={36}
-      opacity={props?.opacity}
-      cursor="pointer"
-      transition={props?.transition || "all 0.2s ease-in-out"}
-      onMouseEnter={showMenu}
-      onMouseLeave={hideMenu}
-    >
-      <Flex
-        paddingLeft={1}
-        // opacity={showContextIcon ? 1 : 0}
-        transition="all 0.2s ease-in-out"
-        // onClick={deleteValue}
-      >
-        <Icon name="wizard" size={7}></Icon>
-      </Flex>
-      <Flex
-        position="absolute"
-        zIndex={999}
-        top="100%"
-        left={0}
-        flexDirection="column"
-        opacity={show ? 1 : 0}
-        pointerEvents={show ? "all" : "none"}
+    <ClickAwayListener onClickAway={hideMenu}>
+      <Center
+        position="relative"
+        // width="100%"
+        paddingRight={36}
+        opacity={opacity}
+        transition={props?.transition || "all 0.2s ease-in-out"}
+        onMouseEnter={showMenu}
+        onMouseLeave={maybeHide}
       >
         <Flex
-          flexDirection="column"
-          // rowGap={basePadding / 3}
-          background="greys.lightt"
-          borderRadius={4}
-          boxShadow={props?.boxShadow || "0px 2px 7px 0px rgba(0,0,0,0.2)"}
-          paddingY={basePadding}
+          paddingLeft={1}
+          // opacity={showContextIcon ? 1 : 0}
+          cursor="pointer"
+          // onClick={deleteValue}
+          transition="all 0.2s ease-in-out"
+        >
+          <Icon name="wizard" size={7}></Icon>
+        </Flex>
+        <Flex
+          position="absolute"
+          zIndex={999}
+          top="100%"
+          left={0}
+          flexDirection="column"
+          opacity={show ? 1 : 0}
+          pointerEvents={show ? "all" : "none"}
         >
-          {!props?.readonly && (
-            <Flex
-              alignItems="center"
-              flexDirection="row"
-              _hover={{
-                background: "greys.light",
-              }}
-              paddingX={basePadding * 1}
-              paddingY={basePadding / 2}
-            >
-              <Icon marginBottom="-2px" name="cyclone" size={iconSize}></Icon>
-              <Text marginTop="-2px" paddingLeft={2} fontSize="xs">
-                Types
-              </Text>
-            </Flex>
-          )}
           <Flex
             flexDirection="column"
-            // rowGap={basePadding}
+            // rowGap={basePadding / 3}
             background="greys.lightt"
-            cursor="pointer"
+            borderRadius={4}
+            boxShadow={props?.boxShadow || "0px 2px 7px 0px rgba(0,0,0,0.2)"}
+            paddingY={basePadding}
           >
-            {!props?.readonly &&
-              types.map((type, idx) => {
-                const ret = (
-                  <Flex
-                    key={props?.uuid + props?.fullPath + "-type-menu-" + idx}
-                    width="100%"
-                    _hover={{
-                      "&>div": {
-                        background: "greys.light",
-                      },
-                    }}
-                    onClick={() => onChangeType(type?.key || type)}
-                    paddingY={1}
-                  >
-                    <Flex
-                      alignItems="center"
-                      flexDirection="row"
-                      width="100%"
-                      paddingX={basePadding * 2}
-                      paddingY={basePadding / 2}
-                    >
-                      <Icon
-                        marginBottom="-2px"
-                        name={type?.icon || type?.key || type?.label || type}
-                        size={iconSize}
-                      ></Icon>
-                      <Text marginTop="-2px" paddingLeft={2} fontSize="xs">
-                        {type?.label || type?.key || type}
-                      </Text>
-                    </Flex>
-                  </Flex>
-                )
-                return ret
-              })}
-          </Flex>
-          {!props?.readonly && (
+            {!props?.readonly && (
+              <Flex
+                alignItems="center"
+                flexDirection="row"
+                paddingRight={basePadding * 2}
+                paddingLeft={basePadding * 1}
+                // _hover={{
+                //   background: "greys.light",
+                // }}
+                // paddingX={basePadding * 1}
+                paddingY={basePadding / 2}
+              >
+                <Icon marginBottom="-2px" name="cyclone" size={iconSize}></Icon>
+                <Text marginTop="-2px" paddingLeft={2} fontSize="xs">
+                  Types
+                </Text>
+              </Flex>
+            )}
             <Flex
-              alignItems="center"
-              flexDirection="row"
-              _hover={{
-                background: "greys.light",
-              }}
-              onClick={onDelete}
-              paddingX={basePadding * 1}
-              paddingY={basePadding / 2}
+              flexDirection="column"
+              // rowGap={basePadding}
+              background="greys.lightt"
+              cursor="pointer"
             >
-              <Icon marginBottom="-2px" name="bin" size={iconSize}></Icon>
-              <Text marginTop="-2px" paddingLeft={2} fontSize="xs">
-                Recycle
-              </Text>
+              {!props?.readonly &&
+                types.map((type, idx) => {
+                  const ret = (
+                    <Flex
+                      key={props?.uuid + props?.fullPath + "-type-menu-" + idx}
+                      width="100%"
+                      _hover={{
+                        "&>div": {
+                          background: "greys.light",
+                        },
+                      }}
+                      cursor="pointer"
+                      onClick={() => onChangeType(type?.key || type)}
+                      paddingY={1}
+                    >
+                      <Flex
+                        alignItems="center"
+                        flexDirection="row"
+                        width="100%"
+                        paddingRight={basePadding * 4}
+                        paddingLeft={basePadding * 2}
+                        paddingY={basePadding / 2}
+                      >
+                        <Icon
+                          marginBottom="-2px"
+                          name={type?.icon || type?.key || type?.label || type}
+                          size={iconSize}
+                        ></Icon>
+                        <Text marginTop="-2px" paddingLeft={2} fontSize="xs">
+                          {type?.label || type?.key || type}
+                        </Text>
+                      </Flex>
+                    </Flex>
+                  )
+                  return ret
+                })}
             </Flex>
-          )}
+            {!props?.readonly && (
+              <Flex
+                alignItems="center"
+                flexDirection="row"
+                _hover={{
+                  background: "greys.light",
+                }}
+                cursor="pointer"
+                onClick={onDelete}
+                paddingX={basePadding * 1}
+                paddingY={basePadding / 2}
+              >
+                <Icon marginBottom="-2px" name="bin" size={iconSize}></Icon>
+                <Text marginTop="-2px" paddingLeft={2} fontSize="xs">
+                  Recycle
+                </Text>
+              </Flex>
+            )}
+          </Flex>
         </Flex>
-      </Flex>
-    </Center>
+      </Center>
+    </ClickAwayListener>
   )
 }