diff --git a/packages/ui/src/views/canvas/CanvasHeader.jsx b/packages/ui/src/views/canvas/CanvasHeader.jsx
index 85dccf45134..089e732b85e 100644
--- a/packages/ui/src/views/canvas/CanvasHeader.jsx
+++ b/packages/ui/src/views/canvas/CanvasHeader.jsx
@@ -156,6 +156,14 @@ const CanvasHeader = ({ chatflow, isAgentCanvas, isAgentflowV2, handleSaveFlow,
         }
     }
 
+    const handleBackClick = () => {
+        if (window.history.state && window.history.state.idx > 0) {
+            navigate(-1)
+        } else {
+            navigate('/', { replace: true })
+        }
+    }
+
     const onUploadFile = (file) => {
         setSettingsOpen(false)
         handleLoadFlow(file)
@@ -253,7 +261,7 @@ const CanvasHeader = ({ chatflow, isAgentCanvas, isAgentflowV2, handleSaveFlow,
             <Stack flexDirection='row' justifyContent='space-between' sx={{ width: '100%' }}>
                 <Stack flexDirection='row' sx={{ width: '100%', maxWidth: '50%' }}>
                     <Box>
-                        <ButtonBase title='Back' sx={{ borderRadius: '50%' }}>
+                        <ButtonBase title='Back' sx={{ borderRadius: '50%' }} onClick={handleBackClick}>
                             <Avatar
                                 variant='rounded'
                                 sx={{
@@ -268,13 +276,6 @@ const CanvasHeader = ({ chatflow, isAgentCanvas, isAgentflowV2, handleSaveFlow,
                                     }
                                 }}
                                 color='inherit'
-                                onClick={() => {
-                                    if (window.history.state && window.history.state.idx > 0) {
-                                        navigate(-1)
-                                    } else {
-                                        navigate('/', { replace: true })
-                                    }
-                                }}
                             >
                                 <IconChevronLeft stroke={1.5} size='1.3rem' />
                             </Avatar>
@@ -297,7 +298,7 @@ const CanvasHeader = ({ chatflow, isAgentCanvas, isAgentflowV2, handleSaveFlow,
                                 </Typography>
                                 {chatflow?.id && (
                                     <Available permission={savePermission}>
-                                        <ButtonBase title='Edit Name' sx={{ borderRadius: '50%' }}>
+                                        <ButtonBase title='Edit Name' sx={{ borderRadius: '50%' }} onClick={() => setEditingFlowName(true)}>
                                             <Avatar
                                                 variant='rounded'
                                                 sx={{
@@ -313,7 +314,6 @@ const CanvasHeader = ({ chatflow, isAgentCanvas, isAgentflowV2, handleSaveFlow,
                                                     }
                                                 }}
                                                 color='inherit'
-                                                onClick={() => setEditingFlowName(true)}
                                             >
                                                 <IconPencil stroke={1.5} size='1.3rem' />
                                             </Avatar>
@@ -341,7 +341,7 @@ const CanvasHeader = ({ chatflow, isAgentCanvas, isAgentflowV2, handleSaveFlow,
                                         }
                                     }}
                                 />
-                                <ButtonBase title='Save Name' sx={{ borderRadius: '50%' }}>
+                                <ButtonBase title='Save Name' sx={{ borderRadius: '50%' }} onClick={submitFlowName}>
                                     <Avatar
                                         variant='rounded'
                                         sx={{
@@ -357,12 +357,11 @@ const CanvasHeader = ({ chatflow, isAgentCanvas, isAgentflowV2, handleSaveFlow,
                                             }
                                         }}
                                         color='inherit'
-                                        onClick={submitFlowName}
                                     >
                                         <IconCheck stroke={1.5} size='1.3rem' />
                                     </Avatar>
                                 </ButtonBase>
-                                <ButtonBase title='Cancel' sx={{ borderRadius: '50%' }}>
+                                <ButtonBase title='Cancel' sx={{ borderRadius: '50%' }} onClick={() => setEditingFlowName(false)}>
                                     <Avatar
                                         variant='rounded'
                                         sx={{
@@ -378,7 +377,6 @@ const CanvasHeader = ({ chatflow, isAgentCanvas, isAgentflowV2, handleSaveFlow,
                                             }
                                         }}
                                         color='inherit'
-                                        onClick={() => setEditingFlowName(false)}
                                     >
                                         <IconX stroke={1.5} size='1.3rem' />
                                     </Avatar>
@@ -389,7 +387,7 @@ const CanvasHeader = ({ chatflow, isAgentCanvas, isAgentflowV2, handleSaveFlow,
                 </Stack>
                 <Box>
                     {chatflow?.id && (
-                        <ButtonBase title='API Endpoint' sx={{ borderRadius: '50%', mr: 2 }}>
+                        <ButtonBase title='API Endpoint' sx={{ borderRadius: '50%', mr: 2 }} onClick={onAPIDialogClick}>
                             <Avatar
                                 variant='rounded'
                                 sx={{
@@ -404,14 +402,13 @@ const CanvasHeader = ({ chatflow, isAgentCanvas, isAgentflowV2, handleSaveFlow,
                                     }
                                 }}
                                 color='inherit'
-                                onClick={onAPIDialogClick}
                             >
                                 <IconCode stroke={1.5} size='1.3rem' />
                             </Avatar>
                         </ButtonBase>
                     )}
                     <Available permission={savePermission}>
-                        <ButtonBase title={`Save ${title}`} sx={{ borderRadius: '50%', mr: 2 }}>
+                        <ButtonBase title={`Save ${title}`} sx={{ borderRadius: '50%', mr: 2 }} onClick={onSaveChatflowClick}>
                             <Avatar
                                 variant='rounded'
                                 sx={{
@@ -426,13 +423,12 @@ const CanvasHeader = ({ chatflow, isAgentCanvas, isAgentflowV2, handleSaveFlow,
                                     }
                                 }}
                                 color='inherit'
-                                onClick={onSaveChatflowClick}
                             >
                                 <IconDeviceFloppy stroke={1.5} size='1.3rem' />
                             </Avatar>
                         </ButtonBase>
                     </Available>
-                    <ButtonBase ref={settingsRef} title='Settings' sx={{ borderRadius: '50%' }}>
+                    <ButtonBase ref={settingsRef} title='Settings' sx={{ borderRadius: '50%' }} onClick={() => setSettingsOpen(!isSettingsOpen)}>
                         <Avatar
                             variant='rounded'
                             sx={{
@@ -446,7 +442,7 @@ const CanvasHeader = ({ chatflow, isAgentCanvas, isAgentflowV2, handleSaveFlow,
                                     color: theme.palette.canvasHeader.settingsLight
                                 }
                             }}
-                            onClick={() => setSettingsOpen(!isSettingsOpen)}
+                            color='inherit'
                         >
                             <IconSettings stroke={1.5} size='1.3rem' />
                         </Avatar>