diff --git a/packages/ui/src/views/canvas/CanvasNode.js b/packages/ui/src/views/canvas/CanvasNode.js
index a039f6d1..043baaea 100644
--- a/packages/ui/src/views/canvas/CanvasNode.js
+++ b/packages/ui/src/views/canvas/CanvasNode.js
@@ -3,12 +3,13 @@ import { useContext, useState, useEffect } from 'react'
 import { useSelector } from 'react-redux'
 
 // material-ui
-import { styled, useTheme } from '@mui/material/styles'
+import { useTheme } from '@mui/material/styles'
 import { IconButton, Box, Typography, Divider, Button } from '@mui/material'
-import Tooltip, { tooltipClasses } from '@mui/material/Tooltip'
+import Tooltip from '@mui/material/Tooltip'
 
 // project imports
-import MainCard from 'ui-component/cards/MainCard'
+import CardWrapper from './CardWrapper'
+import LightTooltip from './LightTooltip'
 import NodeInputHandler from './NodeInputHandler'
 import NodeOutputHandler from './NodeOutputHandler'
 import AdditionalParamsDialog from 'ui-component/dialog/AdditionalParamsDialog'
@@ -19,28 +20,6 @@ import { baseURL } from 'store/constant'
 import { IconTrash, IconCopy, IconInfoCircle, IconAlertTriangle } from '@tabler/icons'
 import { flowContext } from 'store/context/ReactFlowContext'
 
-const CardWrapper = styled(MainCard)(({ theme }) => ({
-    background: theme.palette.card.main,
-    color: theme.darkTextPrimary,
-    border: 'solid 1px',
-    borderColor: theme.palette.primary[200] + 75,
-    width: '300px',
-    height: 'auto',
-    padding: '10px',
-    boxShadow: '0 2px 14px 0 rgb(32 40 45 / 8%)',
-    '&:hover': {
-        borderColor: theme.palette.primary.main
-    }
-}))
-
-const LightTooltip = styled(({ className, ...props }) => <Tooltip {...props} classes={{ popper: className }} />)(({ theme }) => ({
-    [`& .${tooltipClasses.tooltip}`]: {
-        backgroundColor: theme.palette.nodeToolTip.background,
-        color: theme.palette.nodeToolTip.color,
-        boxShadow: theme.shadows[1]
-    }
-}))
-
 // ===========================|| CANVAS NODE ||=========================== //
 
 const CanvasNode = ({ data }) => {
@@ -54,7 +33,6 @@ const CanvasNode = ({ data }) => {
     const [infoDialogProps, setInfoDialogProps] = useState({})
     const [warningMessage, setWarningMessage] = useState('')
     const [open, setOpen] = useState(false)
-    const isNote = data.type === 'StickyNote'
 
     const handleClose = () => {
         setOpen(false)
@@ -151,49 +129,47 @@ const CanvasNode = ({ data }) => {
                     placement='right-start'
                 >
                     <Box>
-                        {!isNote && (
-                            <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
-                                <Box style={{ width: 50, marginRight: 10, padding: 5 }}>
-                                    <div
-                                        style={{
-                                            ...theme.typography.commonAvatar,
-                                            ...theme.typography.largeAvatar,
-                                            borderRadius: '50%',
-                                            backgroundColor: 'white',
-                                            cursor: 'grab'
-                                        }}
-                                    >
-                                        <img
-                                            style={{ width: '100%', height: '100%', padding: 5, objectFit: 'contain' }}
-                                            src={`${baseURL}/api/v1/node-icon/${data.name}`}
-                                            alt='Notification'
-                                        />
-                                    </div>
-                                </Box>
-                                <Box>
-                                    <Typography
-                                        sx={{
-                                            fontSize: '1rem',
-                                            fontWeight: 500,
-                                            mr: 2
-                                        }}
-                                    >
-                                        {data.label}
-                                    </Typography>
-                                </Box>
-                                {warningMessage && (
-                                    <>
-                                        <div style={{ flexGrow: 1 }}></div>
-                                        <Tooltip title={<span style={{ whiteSpace: 'pre-line' }}>{warningMessage}</span>} placement='top'>
-                                            <IconButton sx={{ height: 35, width: 35 }}>
-                                                <IconAlertTriangle size={35} color='orange' />
-                                            </IconButton>
-                                        </Tooltip>
-                                    </>
-                                )}
-                            </div>
-                        )}
-                        {(data.inputAnchors.length > 0 || data.inputParams.length > 0) && !isNote && (
+                        <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+                            <Box style={{ width: 50, marginRight: 10, padding: 5 }}>
+                                <div
+                                    style={{
+                                        ...theme.typography.commonAvatar,
+                                        ...theme.typography.largeAvatar,
+                                        borderRadius: '50%',
+                                        backgroundColor: 'white',
+                                        cursor: 'grab'
+                                    }}
+                                >
+                                    <img
+                                        style={{ width: '100%', height: '100%', padding: 5, objectFit: 'contain' }}
+                                        src={`${baseURL}/api/v1/node-icon/${data.name}`}
+                                        alt='Notification'
+                                    />
+                                </div>
+                            </Box>
+                            <Box>
+                                <Typography
+                                    sx={{
+                                        fontSize: '1rem',
+                                        fontWeight: 500,
+                                        mr: 2
+                                    }}
+                                >
+                                    {data.label}
+                                </Typography>
+                            </Box>
+                            {warningMessage && (
+                                <>
+                                    <div style={{ flexGrow: 1 }}></div>
+                                    <Tooltip title={<span style={{ whiteSpace: 'pre-line' }}>{warningMessage}</span>} placement='top'>
+                                        <IconButton sx={{ height: 35, width: 35 }}>
+                                            <IconAlertTriangle size={35} color='orange' />
+                                        </IconButton>
+                                    </Tooltip>
+                                </>
+                            )}
+                        </div>
+                        {(data.inputAnchors.length > 0 || data.inputParams.length > 0) && (
                             <>
                                 <Divider />
                                 <Box sx={{ background: theme.palette.asyncSelect.main, p: 1 }}>
@@ -233,25 +209,21 @@ const CanvasNode = ({ data }) => {
                                 </Button>
                             </div>
                         )}
-                        {!isNote && (
-                            <>
-                                <Divider />
-                                <Box sx={{ background: theme.palette.asyncSelect.main, p: 1 }}>
-                                    <Typography
-                                        sx={{
-                                            fontWeight: 500,
-                                            textAlign: 'center'
-                                        }}
-                                    >
-                                        Output
-                                    </Typography>
-                                </Box>
-                                <Divider />
-                                {data.outputAnchors.map((outputAnchor, index) => (
-                                    <NodeOutputHandler key={index} outputAnchor={outputAnchor} data={data} />
-                                ))}
-                            </>
-                        )}
+                        <Divider />
+                        <Box sx={{ background: theme.palette.asyncSelect.main, p: 1 }}>
+                            <Typography
+                                sx={{
+                                    fontWeight: 500,
+                                    textAlign: 'center'
+                                }}
+                            >
+                                Output
+                            </Typography>
+                        </Box>
+                        <Divider />
+                        {data.outputAnchors.map((outputAnchor, index) => (
+                            <NodeOutputHandler key={index} outputAnchor={outputAnchor} data={data} />
+                        ))}
                     </Box>
                 </LightTooltip>
             </CardWrapper>
diff --git a/packages/ui/src/views/canvas/index.js b/packages/ui/src/views/canvas/index.js
index 9aa53cc6..29f83ea4 100644
--- a/packages/ui/src/views/canvas/index.js
+++ b/packages/ui/src/views/canvas/index.js
@@ -21,6 +21,7 @@ import { useTheme } from '@mui/material/styles'
 // project imports
 import CanvasNode from './CanvasNode'
 import ButtonEdge from './ButtonEdge'
+import StickyNote from './StickyNote'
 import CanvasHeader from './CanvasHeader'
 import AddNodes from './AddNodes'
 import ConfirmDialog from 'ui-component/dialog/ConfirmDialog'
@@ -46,7 +47,7 @@ import useNotifier from 'utils/useNotifier'
 // const
 import { FLOWISE_CREDENTIAL_ID } from 'store/constant'
 
-const nodeTypes = { customNode: CanvasNode }
+const nodeTypes = { customNode: CanvasNode, stickyNote: StickyNote }
 const edgeTypes = { buttonedge: ButtonEdge }
 
 // ==============================|| CANVAS ||============================== //
@@ -276,7 +277,7 @@ const Canvas = () => {
             const newNode = {
                 id: newNodeId,
                 position,
-                type: 'customNode',
+                type: nodeData.type !== 'StickyNote' ? 'customNode' : 'stickyNote',
                 data: initNode(nodeData, newNodeId)
             }