diff --git a/web/src/pages/flow/canvas/index.tsx b/web/src/pages/flow/canvas/index.tsx
index d372f119862..206db188b91 100644
--- a/web/src/pages/flow/canvas/index.tsx
+++ b/web/src/pages/flow/canvas/index.tsx
@@ -1,8 +1,16 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import { useSetModalState } from '@/hooks/common-hooks';
+import { FolderOutput, Import } from 'lucide-react';
 import { useCallback, useEffect } from 'react';
 import ReactFlow, {
   Background,
   ConnectionMode,
+  ControlButton,
   Controls,
   NodeMouseHandler,
 } from 'reactflow';
@@ -192,7 +200,32 @@ function FlowCanvas({ drawerVisible, hideDrawer }: IProps) {
         deleteKeyCode={['Delete', 'Backspace']}
       >
         <Background />
-        <Controls />
+        <Controls>
+          <ControlButton
+            onClick={() => alert('Something magical just happened. ✨')}
+          >
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger>
+                  <Import />
+                </TooltipTrigger>
+                <TooltipContent>Import</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </ControlButton>
+          <ControlButton
+            onClick={() => alert('Something magical just happened. ✨')}
+          >
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger>
+                  <FolderOutput />
+                </TooltipTrigger>
+                <TooltipContent>Export</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </ControlButton>
+        </Controls>
       </ReactFlow>
       {formDrawerVisible && (
         <FormDrawer