diff --git a/ui/public/favicon.ico b/ui/public/favicon.ico
index a11777cc..d846fff8 100644
Binary files a/ui/public/favicon.ico and b/ui/public/favicon.ico differ
diff --git a/ui/public/logo192.png b/ui/public/logo192.png
index fc44b0a3..e1d1a9e2 100644
Binary files a/ui/public/logo192.png and b/ui/public/logo192.png differ
diff --git a/ui/src/components/Canvas.tsx b/ui/src/components/Canvas.tsx
index e6132f14..36605000 100644
--- a/ui/src/components/Canvas.tsx
+++ b/ui/src/components/Canvas.tsx
@@ -191,17 +191,19 @@ const ScopeNode = memo<Props>(({ data, id, isConnectable }) => {
 
 // FIXME: the resultblock is rendered every time the parent codeNode changes (e.g., dragging), we may set the result number as a state of a pod to memoize the resultblock.
 
-function ResultBlock({ pod, id, showOutput = true }) {
+function ResultBlock({ pod, id }) {
   const store = useContext(RepoContext);
+  const [showOutput, setShowOutput] = useState(true);
   if (!store) throw new Error("Missing BearContext.Provider in the tree");
   const wsRun = useStore(store, (state) => state.wsRun);
   return (
-    <Box>
+    <Box
+      sx={{
+        minHeight: pod.height,
+      }}
+    >
       {pod.result && (
-        <Box
-          sx={{ display: "flex", flexDirection: "column" }}
-          overflow="scroll"
-        >
+        <Box sx={{ display: "flex", flexDirection: "column" }}>
           {pod.result.html ? (
             <div dangerouslySetInnerHTML={{ __html: pod.result.html }}></div>
           ) : (
@@ -234,11 +236,34 @@ function ResultBlock({ pod, id, showOutput = true }) {
       )}
 
       {pod.running && <CircularProgress />}
-      {showOutput && (
-        <Box overflow="scroll" maxHeight="145px" border="1px">
+      {showOutput ? (
+        <Box
+          sx={{ paddingBottom: "2px" }}
+          overflow="scroll"
+          maxHeight="145px"
+          border="1px"
+        >
           {/* <Box bgcolor="lightgray">Error</Box> */}
+          <Button
+            onClick={() => {
+              setShowOutput(!showOutput);
+            }}
+            sx={[
+              styles["hidden-btn"],
+              {
+                position: "absolute",
+                top: 0,
+                right: 0,
+                zIndex: 201,
+              },
+            ]}
+            variant="text"
+            size="small"
+          >
+            Hide output
+          </Button>
           {pod.stdout && (
-            <Box whiteSpace="pre-wrap" sx={{ fontSize: 10 }}>
+            <Box whiteSpace="pre-wrap" sx={{ fontSize: 10, paddingBottom: 1 }}>
               <Ansi>{pod.stdout}</Ansi>
             </Box>
           )}
@@ -249,9 +274,9 @@ function ResultBlock({ pod, id, showOutput = true }) {
                 fontSize: 10,
                 flexDirection: "row",
                 alignItems: "center",
+                borderTop: "1px solid rgb(214, 222, 230)",
               }}
             >
-              <Box>Result[{pod.result.count}]:</Box>
               <Box component="pre" whiteSpace="pre-wrap">
                 {pod.result.text}
               </Box>
@@ -267,6 +292,27 @@ function ResultBlock({ pod, id, showOutput = true }) {
             </Box>
           )}
         </Box>
+      ) : (
+        <Box
+          sx={{
+            paddingBottom: "5px",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          <Box sx={styles["hidden-hint"]}>This output has been hidden. </Box>
+          <Button
+            onClick={() => {
+              setShowOutput(!showOutput);
+            }}
+            sx={styles["hidden-btn"]}
+            size="small"
+            variant="text"
+          >
+            Show it
+          </Button>
+        </Box>
       )}
     </Box>
   );
@@ -282,7 +328,6 @@ const CodeNode = memo<Props>(({ data, id, isConnectable }) => {
   const [frame] = React.useState({
     translate: [0, 0],
   });
-  const [showOutput, setShowOutput] = useState(true);
   // right, bottom
   const [layout, setLayout] = useState("bottom");
   const isRightLayout = layout === "right";
@@ -337,8 +382,6 @@ const CodeNode = memo<Props>(({ data, id, isConnectable }) => {
       case ToolTypes.layout:
         setLayout(layout === "bottom" ? "right" : "bottom");
         break;
-      case ToolTypes.fold:
-        setShowOutput(!showOutput);
     }
   };
 
@@ -352,7 +395,7 @@ const CodeNode = memo<Props>(({ data, id, isConnectable }) => {
       height={pod.height || 100}
       width={pod.width}
       axis="x"
-      minConstraints={[200, 200]}
+      minConstraints={[250, 250]}
     >
       <Box
         sx={{
@@ -361,6 +404,7 @@ const CodeNode = memo<Props>(({ data, id, isConnectable }) => {
           width: "100%",
           height: "100%",
           backgroundColor: "rgb(244, 246, 248)",
+          borderWidth: "2px",
           borderColor: isEditorBlur ? "#d6dee6" : "#3182ce",
         }}
         ref={ref}
@@ -392,10 +436,7 @@ const CodeNode = memo<Props>(({ data, id, isConnectable }) => {
         {/* The header of code pods. */}
         <Box className="custom-drag-handle">
           <Box sx={styles["pod-index"]}>[{pod.index}]</Box>
-          <ToolBox
-            data={{ id, showOutput }}
-            onRunTask={runToolBoxTask}
-          ></ToolBox>
+          <ToolBox data={{ id }} onRunTask={runToolBoxTask}></ToolBox>
         </Box>
         <Box
           sx={{
@@ -440,14 +481,15 @@ const CodeNode = memo<Props>(({ data, id, isConnectable }) => {
                 top: isRightLayout ? 0 : "100%",
                 left: isRightLayout ? "100%" : 0,
                 maxHeight: "158px",
-                minWidth: isRightLayout ? "200px" : "100%",
+                maxWidth: isRightLayout ? "300px" : "100%",
+                minWidth: isRightLayout ? "150px" : "100%",
                 boxSizing: "border-box",
                 backgroundColor: "white",
                 zIndex: 100,
                 padding: "0 10px",
               }}
             >
-              <ResultBlock pod={pod} id={id} showOutput={showOutput} />
+              <ResultBlock pod={pod} id={id} />
             </Box>
           )}
         </Box>
@@ -677,14 +719,13 @@ export function Canvas() {
   const onNodeDragStart = useCallback(
     (_, node) => {
       const currentNode = nodesMap.get(node.id);
-
       if (currentNode) {
         nodesMap.set(node.id, {
           ...currentNode,
           // selected: false,
           style: {
             ...currentNode.style,
-            boxShadow: `${userColor} 0px 15px 25px`,
+            // boxShadow: `${userColor} 0px 15px 25px`,
           },
         });
       }
diff --git a/ui/src/components/Toolbox.tsx b/ui/src/components/Toolbox.tsx
index 3ad1e17c..246cd911 100644
--- a/ui/src/components/Toolbox.tsx
+++ b/ui/src/components/Toolbox.tsx
@@ -2,8 +2,6 @@ import { Tooltip, Box, IconButton } from "@mui/material";
 import PlayCircleOutlineIcon from "@mui/icons-material/PlayCircleOutline";
 import DeleteIcon from "@mui/icons-material/Delete";
 import ViewComfyIcon from "@mui/icons-material/ViewComfy";
-import UnfoldLessIcon from "@mui/icons-material/UnfoldLess";
-import UnfoldMoreIcon from "@mui/icons-material/UnfoldMore";
 
 export enum ToolTypes {
   delete,
@@ -65,20 +63,6 @@ export default function ToolBox({
           <ViewComfyIcon fontSize="inherit" />
         </IconButton>
       </Tooltip>
-      <Tooltip title={data.showOutput ? "Fold output" : "Unfold output"}>
-        <IconButton
-          size="small"
-          onClick={() => {
-            onRunTask && onRunTask(ToolTypes.fold, data);
-          }}
-        >
-          {data.showOutput ? (
-            <UnfoldLessIcon fontSize="inherit" />
-          ) : (
-            <UnfoldMoreIcon fontSize="inherit" />
-          )}
-        </IconButton>
-      </Tooltip>
     </Box>
   );
 }
diff --git a/ui/src/components/canvas.style.js b/ui/src/components/canvas.style.js
index 2377c25e..70425aae 100644
--- a/ui/src/components/canvas.style.js
+++ b/ui/src/components/canvas.style.js
@@ -22,4 +22,16 @@ export default {
     paddingLeft: "5px",
     fontSize: "12px",
   },
-};
+  'hidden-btn': {
+    fontSize: 10,
+    paddingTop: '2px',
+    paddingBottom: '2px',
+    lineHeight: '10px',
+    zIndex: 201
+  },
+  'hidden-hint': {
+    fontSize: 10,
+    color: 'rgb(151, 151, 151)',
+    whiteSpace: 'pre'
+  }
+};
\ No newline at end of file