diff --git a/remix/app/Providers/Chakra/theme.tsx b/remix/app/Providers/Chakra/theme.tsx
index b28ad56..662d429 100644
--- a/remix/app/Providers/Chakra/theme.tsx
+++ b/remix/app/Providers/Chakra/theme.tsx
@@ -18,7 +18,7 @@ export const theme = extendTheme({
     global: {
       // make all elements padding and margin animate
       "*": {
-        transition: "padding 0.2s ease, margin 0.2s ease",
+        transition: "padding 0.2s ease, margin 0.2s ease-out",
       },
       // make all elements have a transparent focus border
       "input:focus": {
diff --git a/remix/app/components/Commander/Commander.tsx b/remix/app/components/Commander/Commander.tsx
index 1eb99c5..921c574 100644
--- a/remix/app/components/Commander/Commander.tsx
+++ b/remix/app/components/Commander/Commander.tsx
@@ -535,7 +535,7 @@ export const Commander = (props) => {
               opacity={commanderActive ? 0.25 : 0}
               repeats={rainbowRepeats}
               thickness={10}
-              opacityTransition="all 1000ms ease"
+              opacityTransition="all 1000ms ease-out"
               overflow="visible"
             >
               <Center
@@ -553,7 +553,7 @@ export const Commander = (props) => {
                   opacity={commanderActive ? 0.6 : 0}
                   position="absolute"
                   repeats={rainbowRepeats}
-                  opacityTransition="all 2500ms ease"
+                  opacityTransition="all 2500ms ease-out"
                   thickness={1}
                 >
                   {/* <InputPartWrapper>{InputPart}</InputPartWrapper> */}
diff --git a/remix/app/components/Commander/CommanderV1.tsx b/remix/app/components/Commander/CommanderV1.tsx
index e15fc85..f2a81c6 100644
--- a/remix/app/components/Commander/CommanderV1.tsx
+++ b/remix/app/components/Commander/CommanderV1.tsx
@@ -518,7 +518,7 @@ export const CommanderV1 = (props) => {
             opacity={commanderActive ? 0.25 : 0}
             repeats={rainbowRepeats}
             thickness={8}
-            opacityTransition="all 1000ms ease"
+            opacityTransition="all 1000ms ease-out"
             overflow="visible"
           >
             <Center
@@ -536,7 +536,7 @@ export const CommanderV1 = (props) => {
                 opacity={commanderActive ? 0.6 : 0}
                 position="absolute"
                 repeats={rainbowRepeats}
-                opacityTransition="all 2500ms ease"
+                opacityTransition="all 2500ms ease-out"
                 thickness={10}
               ></Rainbow>
               <Input
diff --git a/remix/app/components/Rainbow/Rainbow.tsx b/remix/app/components/Rainbow/Rainbow.tsx
index b37160e..fa8bf30 100644
--- a/remix/app/components/Rainbow/Rainbow.tsx
+++ b/remix/app/components/Rainbow/Rainbow.tsx
@@ -25,7 +25,7 @@ export const Rainbow = (allProps: any): JSX.Element => {
   const [pathWidth, setPathWidth] = React.useState(props?.thickness || 1)
   const [overflow, setOverflow] = React.useState(props?.overflow || "hidden")
   const [opacityTransition, setOpacityTransition] = React.useState(
-    props?.opacityTransition || "all 10000ms ease"
+    props?.opacityTransition || "all 10000ms ease-out"
   )
 
   const parentRef = React.useRef(null)
diff --git a/remix/app/components/Thingtime/Thingtime.tsx b/remix/app/components/Thingtime/Thingtime.tsx
index 4c6196f..9a7eb81 100644
--- a/remix/app/components/Thingtime/Thingtime.tsx
+++ b/remix/app/components/Thingtime/Thingtime.tsx
@@ -612,24 +612,6 @@ export const Thingtime = (props) => {
     setThingtime(newChildFullPath, newChild)
   }, [fullPath, setThingtime, thing])
 
-  const addChildUi = React.useMemo(() => {
-    if (type === "object" && props?.edit) {
-      return (
-        <Flex
-          width="100%"
-          paddingLeft={multiplyPl(2)}
-          cursor="pointer"
-          onClick={addNewChild}
-          paddingY={2}
-        >
-          <Icon size={10} name="seedling"></Icon>
-          {/* <Icon size={7} name="plus"></Icon>
-          <Icon size={7} name="plus"></Icon> */}
-        </Flex>
-      )
-    }
-  }, [props?.edit, type, multiplyPl, addNewChild])
-
   const [showContextIcon, setShowContextIcon] = React.useState(false)
 
   return (
@@ -714,7 +696,21 @@ export const Thingtime = (props) => {
         {!loading && thingtimeChildren && (
           <Box className="thingtimeChildren">
             {thingtimeChildren}
-            {addChildUi}
+            {type === "object" && (
+              <Flex
+                width="100%"
+                paddingLeft={multiplyPl(2)}
+                opacity={props?.edit ? 1 : 0}
+                cursor="pointer"
+                transition="all 0.2s ease-out"
+                onClick={addNewChild}
+                paddingY={2}
+              >
+                <Icon size={10} name="seedling"></Icon>
+                {/* <Icon size={7} name="plus"></Icon>
+          <Icon size={7} name="plus"></Icon> */}
+              </Flex>
+            )}
           </Box>
         )}
       </Flex>