From 15edb5ad146f6318514ca579fc22ca85451a3253 Mon Sep 17 00:00:00 2001
From: Deon Sanchez <69873175+deon-sanchez@users.noreply.github.com>
Date: Mon, 25 Aug 2025 16:03:52 -0600
Subject: [PATCH] feat: Canvas toolbar update and enhancement (#9239)

* feat: Add EditorConfig and Prettier configuration files for consistent code formatting

- Introduced .editorconfig to enforce coding styles across various file types.
- Added .prettierrc for Prettier configuration to standardize code formatting.
- Updated settings.json to define tab sizes and formatting options for different languages.
- Enhanced canvasControlsComponent with a new dropdown for control buttons, improving UI interaction.
- Refactored logCanvasControlsComponent and MemoizedComponents for better structure and consistency.

* [autofix.ci] apply automated fixes

* feat: Enhance canvas controls with keyboard shortcuts and dropdown functionality

- Introduced keyboard shortcuts for zooming in, zooming out, fitting view, and resetting zoom.
- Refactored DropdownControlButton to improve accessibility and usability.
- Updated CanvasControls to handle keyboard events for enhanced user interaction.
- Added helper function to format zoom percentage for better display.
- Improved structure and readability of the canvas controls component.

* [autofix.ci] apply automated fixes

* feat: Introduce CanvasControlsDropdown and HelpDropdown components

- Added new dropdown components for canvas controls and help functionalities.
- Refactored CanvasControls to utilize the new dropdowns, enhancing UI interaction.
- Improved keyboard shortcut handling for zoom and view adjustments.
- Streamlined component structure for better maintainability and readability.

* refactor: Update dropdown components and styles in canvasControls

- Removed unused ShadTooltip import from dropdowns.tsx.
- Adjusted padding and margin styles for DropdownControlButton and CanvasControlsDropdown for improved layout.
- Enhanced button styles in MemoizedComponents for consistency.
- Cleaned up class names in CanvasControls for better readability.

* feat: Enhance HelpDropdown with navigation and external links

- Added functionality to open documentation and desktop download links in new tabs.
- Integrated navigation for shortcuts settings within the HelpDropdown.
- Cleaned up commented-out code for better readability and maintainability.

* [autofix.ci] apply automated fixes

* feat: Add tests for CanvasControls and Dropdown components

- Introduced unit tests for CanvasControls, verifying rendering and keyboard shortcut handling.
- Added tests for CanvasControlsDropdown and HelpDropdown, ensuring proper functionality and interaction.
- Implemented mocks for external dependencies to isolate component behavior during testing.
- Enhanced test coverage for dropdown interactions and navigation features.

* refactor: Simplify Jest setup by removing unused polyfills and mocks

- Removed unnecessary polyfills for ResizeObserver and IntersectionObserver from the Jest setup file.
- Cleaned up the window.open mock to streamline the testing environment.

* feat: Enhance FlowMenu and EditFlowSettings components

- Reintroduced memoization and hotkey handling in FlowMenu for improved performance.
- Updated EditFlowSettings to include locking functionality with a switch component, enhancing user control over flow settings.
- Adjusted layout and styling for better user experience in the EditFlowSettings component.

* [autofix.ci] apply automated fixes

* feat: Implement locking functionality in FlowSettingsComponent

- Added state management for the locked property in FlowSettingsComponent.
- Updated EditFlowSettings to disable input fields based on the locked state.
- Enhanced the flow submission logic to include the locked status when saving changes.

* [autofix.ci] apply automated fixes

* chore: Remove EditorConfig and Prettier configuration files

- Deleted .editorconfig and .prettierrc files to streamline project configuration.
- Updated .cursor/settings.json to enable biome without specific editor settings for various file types.

* chore: Update biome settings in .cursor/settings.json

- Removed the biome.enabled property to simplify configuration.
- Retained the biome.configurationPath for continued functionality.

* feat: Enhance dropdown functionality with toggle options and bug report link

- Added a toggle feature to the DropdownControlButton for enabling smart guides.
- Introduced a new BUG_REPORT_URL constant for reporting issues.
- Updated HelpDropdown to utilize the new toggle functionality and link for bug reporting.
- Cleaned up imports and adjusted component props for better usability.

* fix: Correct onClick handling in DropdownControlButton component

- Updated the onClick prop to directly use the provided onClick function instead of a conditional.
- Adjusted the handleOnNewValue prop in ToggleShadComponent to ensure proper toggle functionality.

* [autofix.ci] apply automated fixes

* feat: Introduce CanvasControls and dropdown components for enhanced canvas interaction

- Added CanvasControls component to manage canvas interactions and state based on flow lock status.
- Implemented CanvasControlsDropdown and HelpDropdown for zoom and help functionalities, respectively.
- Created DropdownControlButton for reusable dropdown actions with keyboard shortcuts.
- Removed deprecated dropdowns and refactored related tests to align with new component structure.
- Introduced utility functions for zoom percentage formatting and modifier key detection.

* refactor: Clean up imports and enhance HelpDropdown functionality

- Removed redundant imports in FlowMenu and HelpDropdown components.
- Refactored HelpDropdown to utilize Zustand for managing helper line state.
- Improved readability by adjusting component structure and formatting.

* Revert "Merge branch 'lfoss-1889' of https://github.com/langflow-ai/langflow into lfoss-1889"

This reverts commit 896436ac53986702dd162151e7fdb770689751c7, reversing
changes made to 475c2fa027211021557ff37bd056627be896b59c.

* [autofix.ci] apply automated fixes

* Reapply "Merge branch 'lfoss-1889' of https://github.com/langflow-ai/langflow into lfoss-1889"

This reverts commit 4e971f81e4d2e01a75bfc855467d60536d668eb4.

* fix proxy

* test: Enhance testing for canvas controls and dropdown components

- Updated CanvasControls test to verify state management and rendering.
- Added comprehensive tests for CanvasControlsDropdown, including zoom functionality and keyboard shortcuts.
- Introduced tests for utility functions in canvasUtils, ensuring correct zoom formatting and modifier key detection.
- Created tests for DropdownControlButton, validating rendering, click handling, and toggle functionality.
- Refactored Dropdowns test to remove CanvasControlsDropdown references and streamline imports.

* [autofix.ci] apply automated fixes

* refactor: reorganize imports and optimize state selection in FlowMenu component

- Moved import statements for memo, useMemo, useRef, and useState to the correct position.
- Updated currentFlow state selection to use useShallow for improved performance.

* [autofix.ci] apply automated fixes

* refactor: reorganize imports and enhance DropdownControlButton functionality

- Moved import statements for React and other components to appropriate locations.
- Added externalLink prop to DropdownControlButton for improved link handling.
- Updated HelpDropdown to utilize externalLink prop for relevant buttons.
- Refined HeaderMenuItemLink styles for better visual consistency.

* [autofix.ci] apply automated fixes

* test: enhance accessibility features in DropdownControlButton tests

- Added role, tabIndex, aria-checked, and aria-label attributes for improved accessibility.
- Implemented keyboard interaction handling for Enter and Space keys to trigger value changes.

* [autofix.ci] apply automated fixes

* refactor: reorganize imports and enhance FlowMenu state management

- Moved import statements for React hooks to the correct position.
- Updated state selection to include isFlowLocked for improved clarity and performance.
- Refined usage of currentFlow state properties in the MenuBar component.

* [autofix.ci] apply automated fixes

* test: add Flow Lock feature tests for locking and unlocking flows

- Implemented tests to verify the locking and unlocking functionality of flows, including UI changes and state persistence.
- Ensured that inputs are enabled/disabled correctly based on the lock state and that the appropriate lock/unlock icons are displayed in the settings.

* [autofix.ci] apply automated fixes

* test: Update selectors in various specs to use canvas_controls_dropdown

Replaced instances of 'fit_view' selector with 'canvas_controls_dropdown' in multiple test files to ensure proper interaction with the canvas controls. This change enhances the reliability of the tests by targeting the correct UI elements.

* [autofix.ci] apply automated fixes

* test: Refactor auto-login-off.spec.ts and rename-flow.ts for improved readability and functionality

Updated the auto-login-off.spec.ts file to enhance code clarity by adjusting formatting and ensuring proper selector usage. Additionally, modified the rename-flow.ts utility to include hover actions for better user interaction simulation during tests. These changes aim to improve test reliability and maintainability.

* test: Enhance interaction with canvas controls in multiple specs

Added interactions with the 'canvas_controls_dropdown' in various test files to improve test reliability and ensure proper UI element targeting. This update includes adjustments in auto-login-off.spec.ts, customComponentAdd.spec.ts, tableInputComponent.spec.ts, stop-button-playground.spec.ts, and generalBugs-shard-7.spec.ts, enhancing the overall functionality of the tests.

* fixed tests

* test: Enhance interaction with canvas controls across multiple specs

Added interactions with the 'canvas_controls_dropdown' in various test files to improve test reliability and ensure proper UI element targeting. This update includes adjustments in tweaksTest.spec.ts, user-flow-state-cleanup.spec.ts, and several integration tests, enhancing the overall functionality of the tests.

* [autofix.ci] apply automated fixes

* test: Further enhance interactions with canvas controls in multiple specs

Added additional clicks on the 'canvas_controls_dropdown' in stop-building.spec.ts, promptModalComponent.spec.ts, minimize.spec.ts, and generalBugs-shard-11.spec.ts to improve test reliability and ensure proper UI element targeting. This update continues to enhance the overall functionality of the tests.

* [autofix.ci] apply automated fixes

* test: Improve interactions with canvas controls in various specs

Added multiple clicks on the 'canvas_controls_dropdown' across several test files, including playground.spec.ts, decisionFlow.spec.ts, and generalBugs-shard-5.spec.ts, to enhance test reliability and ensure accurate UI element targeting. This update continues to refine the overall functionality of the tests.

* [autofix.ci] apply automated fixes

* test: Enhance canvas control interactions across multiple specs

Added additional clicks on the 'canvas_controls_dropdown' in various test files, including generalBugs-shard-5.spec.ts, linkComponent.spec.ts, tabComponent.spec.ts, flowPage.spec.ts, stop-button-playground.spec.ts, and general-bugs-truncate-results.spec.ts. This update aims to improve test reliability and ensure accurate interactions with the UI elements.

* [autofix.ci] apply automated fixes

* test: Refine canvas control interactions in various specs

Added additional clicks on the 'canvas_controls_dropdown' across multiple test files, including similarity.spec.ts, fileUploadComponent.spec.ts, sliderComponent.spec.ts, tableInputComponent.spec.ts, and minimize.spec.ts. This update aims to enhance test reliability and ensure accurate interactions with UI elements, continuing the effort to improve overall test functionality.

* [autofix.ci] apply automated fixes

* test: Refine canvas control interactions in loop-component.spec.ts

Added additional clicks on the 'canvas_controls_dropdown' to enhance test reliability and ensure accurate interactions with UI elements. This update continues the effort to improve overall test functionality.

* [autofix.ci] apply automated fixes

* test: Update lock-flow interactions for improved reliability

Refactored interactions in lock-flow.spec.ts to replace 'lock_unlock' clicks with more specific actions on 'flow_name' and 'lock-flow-switch'. Added necessary clicks on 'canvas_controls_dropdown' and ensured UI updates are properly awaited. This enhances the reliability of the test by ensuring accurate interactions with UI elements.

* [autofix.ci] apply automated fixes

* test: Enhance flow-lock.spec.ts for improved test reliability

Added a wait timeout to ensure UI elements are fully rendered before interactions. Updated the test structure for better clarity and consistency in verifying the flow lock feature, ensuring accurate expectations for lock icon visibility.

* [autofix.ci] apply automated fixes

* test: Add unit tests for various components and improve Jest setup

- Introduced unit tests for FlowMenu, HeaderMenu, CanvasControlsDropdown, EditFlowSettings, LogCanvasControls, and MemoizedComponents to enhance test coverage.
- Updated jest.setup.js with global module stubs to prevent ESM/context issues in unit tests, ensuring smoother test execution.
- Improved test reliability by mocking necessary components and avoiding direct imports that could lead to context issues during testing.

* [autofix.ci] apply automated fixes

* test: Refactor flow-lock and starter-projects tests for improved reliability

- Updated flow-lock.spec.ts to replace click interactions with keyboard actions for toggling the lock switch, enhancing test stability.
- Improved assertions for input states using toBeEnabled and toBeDisabled for clearer intent.
- Increased timeout for waiting on UI elements in starter-projects.spec.ts to ensure proper rendering before interactions, reducing flakiness in tests.

* [autofix.ci] apply automated fixes

* test: Refactor file upload component tests for consistency and readability

- Simplified arrow function syntax in evaluateHandle calls for better clarity.
- Standardized formatting of test expectations to enhance readability.
- Ensured consistent use of timeout options across various assertions to improve test reliability.

* test: Update CanvasControlsDropdown test to improve accessibility

- Replaced div with button in the DropdownMenu mock to enhance accessibility.
- Added aria attributes to the button for better screen reader support and user experience.

* [autofix.ci] apply automated fixes

* feat: Refactor FlowSettingsComponent for improved functionality and testing

- Introduced helper functions to manage flow updates and validation logic.
- Enhanced state management for save button enable/disable conditions.
- Added comprehensive unit tests for FlowSettingsComponent to ensure expected behavior and edge cases.
- Improved code readability and maintainability through restructuring and modularization.

* [autofix.ci] apply automated fixes

* feat: Refactor HelpDropdown component for improved structure and maintainability

- Extracted HelpDropdownView as a separate component to enhance readability and separation of concerns.
- Updated HelpDropdown to utilize the new HelpDropdownView, simplifying its logic.
- Added unit tests for HelpDropdownView to ensure functionality and interaction correctness.
- Improved code organization and modularity for better maintainability.

* [autofix.ci] apply automated fixes

* refactor: streamline code style and improve readability in starter-projects.spec.ts

- Simplified arrow function syntax by removing parentheses where not needed.
- Enhanced conditional logic for handling visibility of elements in the test flow.
- Improved overall code organization for better maintainability.

* [autofix.ci] apply automated fixes

* test: enhance flow lock feature tests for reliability and clarity

- Updated test selectors for consistency and improved readability.
- Replaced keyboard interaction with direct click for enabling the lock switch to reduce flakiness.
- Added conditional check for the save button to ensure it is enabled before clicking.
- Improved wait times for UI elements to enhance test stability.
- Cleaned up code structure for better maintainability.

* [autofix.ci] apply automated fixes

* test: improve flow lock feature test reliability

- Added a conditional check to ensure the lock switch is in the correct state after clicking.
- Enhanced test stability by incorporating an additional click if the state is not as expected.

* test: refine starter-projects.spec.ts for improved clarity and efficiency

- Removed unnecessary wait for the fit_view selector to streamline the test flow.
- Simplified the logic for clicking the fit_view button, enhancing readability and reducing redundancy.

* [autofix.ci] apply automated fixes

* test: further refine starter-projects.spec.ts for consistency and readability

- Simplified arrow function syntax by removing unnecessary parentheses.
- Enhanced code clarity by standardizing the structure of test assertions and interactions.
- Improved overall test flow by ensuring consistent formatting and reducing redundancy.

* [autofix.ci] apply automated fixes

* revert

* revert

* test: enhance readability and consistency in starter-projects.spec.ts and Text Sentiment Analysis.spec.ts

- Simplified arrow function syntax by removing unnecessary parentheses.
- Standardized test assertions and interactions for improved clarity.
- Adjusted text analysis assertion to ensure it checks for a minimum length of 50 characters.
- Added a wait for selector in the starter-projects.spec.ts to ensure proper element visibility before interaction.

* [autofix.ci] apply automated fixes

* refactored starter projects test

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
Co-authored-by: Lucas Oliveira <lucas.edu.oli@hotmail.com>
---
 .cursor/settings.json                         |   2 +-
 src/frontend/jest.setup.js                    |  56 ++++
 .../FlowMenu/__tests__/FlowMenu.spec.tsx      | 104 +++++++
 .../components/FlowMenu/index.tsx             |   6 +-
 .../HeaderMenu/__tests__/HeaderMenu.spec.tsx  |  92 +++++++
 .../components/HeaderMenu/index.tsx           |   2 +-
 .../CanvasControls.tsx                        |  44 +++
 .../CanvasControlsDropdown.tsx                | 146 ++++++++++
 .../DropdownControlButton.tsx                 |  86 ++++++
 .../canvasControlsComponent/HelpDropdown.tsx  |  40 +++
 .../HelpDropdownView.tsx                      |  96 +++++++
 .../__tests__/CanvasControls.test.tsx         |  72 +++++
 .../__tests__/CanvasControlsDropdown.spec.tsx | 124 +++++++++
 .../__tests__/CanvasControlsDropdown.test.tsx | 226 +++++++++++++++
 .../__tests__/DropdownControlButton.test.tsx  | 181 ++++++++++++
 .../__tests__/Dropdowns.test.tsx              | 118 ++++++++
 .../__tests__/HelpDropdown.spec.tsx           | 104 +++++++
 .../__tests__/canvasUtils.test.ts             | 257 ++++++++++++++++++
 .../core/canvasControlsComponent/index.tsx    | 176 ------------
 .../utils/canvasUtils.ts                      |  17 ++
 .../__tests__/EditFlowSettings.spec.tsx       |  99 +++++++
 .../core/editFlowSettingsComponent/index.tsx  |  33 ++-
 .../__tests__/FlowSettingsComponent.spec.tsx  | 174 ++++++++++++
 .../core/flowSettingsComponent/index.tsx      |  82 ++++--
 .../__tests__/LogCanvasControls.spec.tsx      |  25 ++
 .../core/logCanvasControlsComponent/index.tsx |   4 +-
 src/frontend/src/constants/constants.ts       |   2 +
 .../PageComponent/MemoizedComponents.tsx      |  30 +-
 .../__tests__/MemoizedComponents.spec.tsx     |  69 +++++
 .../components/PageComponent/index.tsx        |   4 +-
 .../features/actionsMainPage-shard-1.spec.ts  |   4 +-
 .../core/features/auto-login-off.spec.ts      |  12 +-
 .../chatInputOutputUser-shard-0.spec.ts       |   2 +-
 .../core/features/customComponentAdd.spec.ts  |   3 +
 .../tests/core/features/flow-lock.spec.ts     | 156 +++++++++++
 .../tests/core/features/freeze-path.spec.ts   |   3 +
 .../core/features/globalVariables.spec.ts     |   4 +-
 .../tests/core/features/playground.spec.ts    |   2 +
 .../core/features/saveComponents.spec.ts      |   4 +-
 .../tests/core/features/stop-building.spec.ts |  11 +
 .../tests/core/features/tweaksTest.spec.ts    |   2 +
 .../features/user-flow-state-cleanup.spec.ts  |   2 +
 .../Custom Component Generator.spec.ts        |   3 +-
 .../Financial Report Parser.spec.ts           |   4 +-
 .../core/integrations/Gmail Agent.spec.ts     |   5 +-
 .../Image Sentiment Analysis.spec.ts          |   3 +
 .../integrations/Instagram Copywriter.spec.ts |   2 +
 .../core/integrations/Market Research.spec.ts |   2 +
 .../core/integrations/News Aggregator.spec.ts |   2 +
 .../Portfolio Website Code Generator.spec.ts  |   2 +
 .../integrations/Price Deal Finder.spec.ts    |   2 +
 .../core/integrations/Prompt Chaining.spec.ts |   2 +
 .../Research Translation Loop.spec.ts         |   2 +
 .../SEO Keyword Generator.spec.ts             |   2 +
 .../core/integrations/SaaS Pricing.spec.ts    |   2 +
 .../Text Sentiment Analysis.spec.ts           |   2 +-
 .../Travel Planning Agent.spec.ts             |   2 +
 .../Twitter Thread Generator.spec.ts          |   2 +
 .../core/integrations/Vector Store.spec.ts    |   6 +
 .../integrations/Youtube Analysis.spec.ts     |   2 +
 .../core/integrations/decisionFlow.spec.ts    |  12 +-
 .../core/integrations/similarity.spec.ts      |  10 +
 .../integrations/starter-projects.spec.ts     |   9 +-
 .../core/integrations/textInputOutput.spec.ts |   4 +
 .../regression/generalBugs-prompt.spec.ts     |   3 +
 .../regression/generalBugs-shard-4.spec.ts    |   3 +
 .../regression/generalBugs-shard-5.spec.ts    |   6 +
 .../regression/generalBugs-shard-9.spec.ts    |   6 +
 .../tests/core/unit/chatInputOutput.spec.ts   |   3 +
 .../core/unit/codeAreaModalComponent.spec.ts  |   4 +
 .../core/unit/fileUploadComponent.spec.ts     |  15 +-
 .../tests/core/unit/floatComponent.spec.ts    |   3 +
 .../tests/core/unit/intComponent.spec.ts      |   5 +
 .../tests/core/unit/linkComponent.spec.ts     |   5 +
 .../core/unit/promptModalComponent.spec.ts    |   3 +
 .../core/unit/queryInputComponent.spec.ts     |   5 +
 .../tests/core/unit/sliderComponent.spec.ts   |   7 +
 .../tests/core/unit/tabComponent.spec.ts      |   5 +
 .../core/unit/tableInputComponent.spec.ts     |   7 +
 .../tests/core/unit/toggleComponent.spec.ts   |   3 +
 .../extended/features/auto-save-off.spec.ts   |   6 +
 .../extended/features/dragAndDrop.spec.ts     |   4 +
 .../tests/extended/features/flowPage.spec.ts  |   2 +
 .../features/langflowShortcuts.spec.ts        |   2 +
 .../tests/extended/features/lock-flow.spec.ts |  41 ++-
 .../extended/features/loop-component.spec.ts  |   7 +
 .../extended/features/mcp-server-tab.spec.ts  |   2 +
 .../extended/features/mcp-server.spec.ts      |   8 +
 .../tests/extended/features/minimize.spec.ts  |   3 +-
 .../features/refresh-dropdown-list.spec.ts    |   2 +
 .../extended/features/sticky-notes.spec.ts    |   6 +
 .../features/stop-button-playground.spec.ts   |  10 +-
 .../tests/extended/features/tool-mode.spec.ts |   4 +
 .../tests/extended/features/twoEdges.spec.ts  |   2 +
 .../extended/features/userSettings.spec.ts    |   4 +
 .../validate-raise-errors-components.spec.ts  |   3 +-
 .../chatInputOutputUser-shard-1.spec.ts       |   6 +
 .../extended/integrations/duckduckgo.spec.ts  |   2 +
 .../integrations/youtube-transcripts.spec.ts  |   4 +
 ...al-bugs-component-as-tool-shortcut.spec.ts |   3 +
 ...-bugs-delete-handle-advanced-input.spec.ts |   5 +
 ...l-bugs-dropdown-select-not-in-list.spec.ts |   8 +
 .../general-bugs-icons-fallback.spec.ts       |   3 +-
 .../general-bugs-minimize-state-error.spec.ts |   3 +
 .../general-bugs-save-changes-on-node.spec.ts |   2 +
 .../general-bugs-truncate-results.spec.ts     |   2 +
 .../regression/generalBugs-shard-10.spec.ts   |   7 +-
 .../regression/generalBugs-shard-11.spec.ts   |  10 +
 .../regression/generalBugs-shard-3.spec.ts    |   9 +
 .../regression/generalBugs-shard-7.spec.ts    |   6 +
 .../tests/utils/adjust-screen-view.ts         |   3 +-
 src/frontend/tests/utils/rename-flow.ts       |   2 +
 src/frontend/tests/utils/select-gpt-model.ts  |   5 +-
 src/frontend/tests/utils/upload-file.ts       |   7 +
 uv.lock                                       |   2 +-
 115 files changed, 2758 insertions(+), 278 deletions(-)
 create mode 100644 src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/__tests__/FlowMenu.spec.tsx
 create mode 100644 src/frontend/src/components/core/appHeaderComponent/components/HeaderMenu/__tests__/HeaderMenu.spec.tsx
 create mode 100644 src/frontend/src/components/core/canvasControlsComponent/CanvasControls.tsx
 create mode 100644 src/frontend/src/components/core/canvasControlsComponent/CanvasControlsDropdown.tsx
 create mode 100644 src/frontend/src/components/core/canvasControlsComponent/DropdownControlButton.tsx
 create mode 100644 src/frontend/src/components/core/canvasControlsComponent/HelpDropdown.tsx
 create mode 100644 src/frontend/src/components/core/canvasControlsComponent/HelpDropdownView.tsx
 create mode 100644 src/frontend/src/components/core/canvasControlsComponent/__tests__/CanvasControls.test.tsx
 create mode 100644 src/frontend/src/components/core/canvasControlsComponent/__tests__/CanvasControlsDropdown.spec.tsx
 create mode 100644 src/frontend/src/components/core/canvasControlsComponent/__tests__/CanvasControlsDropdown.test.tsx
 create mode 100644 src/frontend/src/components/core/canvasControlsComponent/__tests__/DropdownControlButton.test.tsx
 create mode 100644 src/frontend/src/components/core/canvasControlsComponent/__tests__/Dropdowns.test.tsx
 create mode 100644 src/frontend/src/components/core/canvasControlsComponent/__tests__/HelpDropdown.spec.tsx
 create mode 100644 src/frontend/src/components/core/canvasControlsComponent/__tests__/canvasUtils.test.ts
 delete mode 100644 src/frontend/src/components/core/canvasControlsComponent/index.tsx
 create mode 100644 src/frontend/src/components/core/canvasControlsComponent/utils/canvasUtils.ts
 create mode 100644 src/frontend/src/components/core/editFlowSettingsComponent/__tests__/EditFlowSettings.spec.tsx
 create mode 100644 src/frontend/src/components/core/flowSettingsComponent/__tests__/FlowSettingsComponent.spec.tsx
 create mode 100644 src/frontend/src/components/core/logCanvasControlsComponent/__tests__/LogCanvasControls.spec.tsx
 create mode 100644 src/frontend/src/pages/FlowPage/components/PageComponent/__tests__/MemoizedComponents.spec.tsx
 create mode 100644 src/frontend/tests/core/features/flow-lock.spec.ts

diff --git a/.cursor/settings.json b/.cursor/settings.json
index ab4c98c2a..c2a49269e 100644
--- a/.cursor/settings.json
+++ b/.cursor/settings.json
@@ -1,3 +1,3 @@
 {
-    "biome.configurationPath": "src/frontend/biome.json"
+  "biome.configurationPath": "src/frontend/biome.json"
 }
\ No newline at end of file
diff --git a/src/frontend/jest.setup.js b/src/frontend/jest.setup.js
index 6b1b1f4b3..91547ea73 100644
--- a/src/frontend/jest.setup.js
+++ b/src/frontend/jest.setup.js
@@ -48,3 +48,59 @@ if (!Array.prototype.toSorted) {
     configurable: true,
   });
 }
+
+// Global module stubs to avoid ESM/context issues in unit tests
+jest.mock("@radix-ui/react-form", () => ({
+  __esModule: true,
+  Field: (props) => props.children,
+  Label: (props) => props.children,
+  Control: (props) => props.children,
+  Message: (props) => props.children,
+  Submit: (props) => props.children,
+  Root: (props) => props.children,
+}));
+
+jest.mock("react-markdown", () => ({ __esModule: true, default: () => null }));
+
+jest.mock("lucide-react/dynamicIconImports", () => ({}), { virtual: true });
+
+// Avoid darkStore import in tests via genericIconComponent
+jest.mock("@/components/common/genericIconComponent", () => ({
+  __esModule: true,
+  default: () => null,
+}));
+
+// Stub custom icon that uses JSX file to avoid transform issues in Jest
+jest.mock("@/icons/BotMessageSquare", () => ({
+  __esModule: true,
+  BotMessageSquareIcon: () => null,
+}));
+
+// Provide a minimal import.meta.env shim used in some stores when running under Jest
+if (typeof global.import === "undefined") {
+  global.import = { meta: { env: { CI: process.env.CI || false } } };
+} else if (!global.import.meta) {
+  global.import.meta = { env: { CI: process.env.CI || false } };
+} else if (!global.import.meta.env) {
+  global.import.meta.env = { CI: process.env.CI || false };
+}
+
+// Mock darkStore to avoid import.meta usage in modules during tests
+jest.mock("@/stores/darkStore", () => ({
+  __esModule: true,
+  useDarkStore: (selector) =>
+    selector
+      ? selector({
+          dark: false,
+          stars: 0,
+          version: "",
+          latestVersion: "",
+          discordCount: 0,
+          refreshLatestVersion: () => {},
+          setDark: () => {},
+          refreshVersion: () => {},
+          refreshStars: () => {},
+          refreshDiscordCount: () => {},
+        })
+      : {},
+}));
diff --git a/src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/__tests__/FlowMenu.spec.tsx b/src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/__tests__/FlowMenu.spec.tsx
new file mode 100644
index 000000000..66f57e843
--- /dev/null
+++ b/src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/__tests__/FlowMenu.spec.tsx
@@ -0,0 +1,104 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import MenuBar from "../index";
+
+jest.mock("@/components/ui/button", () => ({
+  Button: ({ children, ...rest }) => <button {...rest}>{children}</button>,
+}));
+jest.mock("@/components/common/genericIconComponent", () => ({
+  __esModule: true,
+  default: ({ name }) => <span data-testid="icon">{name}</span>,
+}));
+jest.mock("@/components/common/shadTooltipComponent", () => ({
+  __esModule: true,
+  default: ({ children }) => <div>{children}</div>,
+}));
+jest.mock("@/components/core/flowSettingsComponent", () => ({
+  __esModule: true,
+  default: () => <div data-testid="flow-settings" />,
+}));
+jest.mock(
+  "@/controllers/API/queries/flows/use-get-refresh-flows-query",
+  () => ({ __esModule: true, useGetRefreshFlowsQuery: () => ({}) }),
+);
+jest.mock("@/controllers/API/queries/folders/use-get-folders", () => ({
+  __esModule: true,
+  useGetFoldersQuery: () => ({
+    data: [{ id: "f1", name: "Folder" }],
+    isFetched: true,
+  }),
+}));
+const mockSave = jest.fn(() => Promise.resolve());
+jest.mock("@/hooks/flows/use-save-flow", () => ({
+  __esModule: true,
+  default: () => mockSave,
+}));
+jest.mock("@/hooks/use-unsaved-changes", () => ({
+  __esModule: true,
+  useUnsavedChanges: () => true,
+}));
+jest.mock("@/customization/hooks/use-custom-navigate", () => ({
+  __esModule: true,
+  useCustomNavigate: () => jest.fn(),
+}));
+jest.mock("@/stores/flowsManagerStore", () => ({
+  __esModule: true,
+  default: (sel) =>
+    sel({
+      autoSaving: false,
+      saveLoading: false,
+      currentFlow: { updated_at: new Date().toISOString() },
+    }),
+}));
+jest.mock("@/stores/alertStore", () => ({
+  __esModule: true,
+  default: (sel) => sel({ setSuccessData: jest.fn() }),
+}));
+jest.mock("@/stores/flowStore", () => ({
+  __esModule: true,
+  default: (sel) =>
+    sel({
+      onFlowPage: true,
+      isBuilding: false,
+      currentFlow: {
+        id: "1",
+        name: "Flow",
+        folder_id: "f1",
+        icon: "Workflow",
+        gradient: "0",
+        locked: false,
+      },
+    }),
+}));
+jest.mock("@/stores/shortcuts", () => ({
+  __esModule: true,
+  useShortcutsStore: (sel) => sel({ changesSave: "mod+s" }),
+}));
+
+// Avoid pulling utils that depend on darkStore
+jest.mock("@/utils/utils", () => ({
+  __esModule: true,
+  cn: (...args) => args.filter(Boolean).join(" "),
+  getNumberFromString: () => 0,
+}));
+
+// styleUtils imports lucide dynamic icons; stub to avoid resolution
+jest.mock("lucide-react/dynamicIconImports", () => ({}), { virtual: true });
+
+describe("FlowMenu MenuBar", () => {
+  it("renders current folder and flow name, enables save", async () => {
+    render(<MenuBar />);
+    expect(screen.getByTestId("menu_bar_wrapper")).toBeInTheDocument();
+    expect(screen.getByText("Folder")).toBeInTheDocument();
+    expect(screen.getByTestId("flow_name").textContent).toBe("Flow");
+
+    const saveBtn = screen.getByTestId("save-flow-button");
+    expect(saveBtn).not.toBeDisabled();
+  });
+
+  it("clicking save calls save flow", () => {
+    mockSave.mockClear();
+    render(<MenuBar />);
+    fireEvent.click(screen.getByTestId("save-flow-button"));
+    expect(mockSave).toHaveBeenCalled();
+  });
+});
diff --git a/src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx b/src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx
index 15ab90fad..96daffc21 100644
--- a/src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx
+++ b/src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx
@@ -33,6 +33,7 @@ export const MenuBar = memo((): JSX.Element => {
   const saveFlow = useSaveFlow();
   const autoSaving = useFlowsManagerStore((state) => state.autoSaving);
   const {
+    isFlowLocked,
     currentFlowName,
     currentFlowId,
     currentFlowFolderId,
@@ -40,6 +41,7 @@ export const MenuBar = memo((): JSX.Element => {
     currentFlowGradient,
   } = useFlowStore(
     useShallow((state) => ({
+      isFlowLocked: state.currentFlow?.locked,
       currentFlowName: state.currentFlow?.name,
       currentFlowId: state.currentFlow?.id,
       currentFlowFolderId: state.currentFlow?.folder_id,
@@ -140,6 +142,9 @@ export const MenuBar = memo((): JSX.Element => {
               >
                 {currentFlowName || "Untitled Flow"}
               </span>
+              {isFlowLocked && (
+                <IconComponent name="Lock" className="h-5 w-3.5" />
+              )}
 
               <IconComponent
                 name="pencil"
@@ -195,7 +200,6 @@ export const MenuBar = memo((): JSX.Element => {
         align="center"
         sideOffset={15}
       >
-        <span className="text-sm font-semibold">Flow Details</span>
         <FlowSettingsComponent
           close={() => setOpenSettings(false)}
           open={openSettings}
diff --git a/src/frontend/src/components/core/appHeaderComponent/components/HeaderMenu/__tests__/HeaderMenu.spec.tsx b/src/frontend/src/components/core/appHeaderComponent/components/HeaderMenu/__tests__/HeaderMenu.spec.tsx
new file mode 100644
index 000000000..b5cf2cbec
--- /dev/null
+++ b/src/frontend/src/components/core/appHeaderComponent/components/HeaderMenu/__tests__/HeaderMenu.spec.tsx
@@ -0,0 +1,92 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import {
+  HeaderMenu,
+  HeaderMenuItemButton,
+  HeaderMenuItemLink,
+  HeaderMenuItems,
+  HeaderMenuItemsSection,
+  HeaderMenuItemsTitle,
+  HeaderMenuToggle,
+} from "../index";
+
+jest.mock("@/components/ui/dropdown-menu", () => ({
+  DropdownMenu: ({ children }) => <div data-testid="dm">{children}</div>,
+  DropdownMenuTrigger: ({ children, ...rest }) => (
+    <button data-testid="trigger" {...rest}>
+      {children}
+    </button>
+  ),
+  DropdownMenuContent: ({ children, ...rest }) => (
+    <div data-testid="content" {...rest}>
+      {children}
+    </div>
+  ),
+  DropdownMenuItem: ({ children, ...rest }) => (
+    <div role="menuitem" {...rest}>
+      {children}
+    </div>
+  ),
+  DropdownMenuSeparator: (props) => <hr data-testid="sep" {...props} />,
+}));
+jest.mock("@/components/common/genericIconComponent", () => ({
+  __esModule: true,
+  default: ({ name }) => <span data-testid="icon">{name}</span>,
+}));
+
+// Avoid pulling darkStore via utils
+jest.mock("@/utils/utils", () => ({
+  __esModule: true,
+  cn: (...args) => args.filter(Boolean).join(" "),
+}));
+
+describe("HeaderMenu primitives", () => {
+  it("renders toggle and items with title and section", () => {
+    render(
+      <HeaderMenu>
+        <HeaderMenuToggle>avatar</HeaderMenuToggle>
+        <HeaderMenuItems position="right">
+          <HeaderMenuItemsTitle subTitle="sub">Title</HeaderMenuItemsTitle>
+          <HeaderMenuItemsSection>
+            <HeaderMenuItemLink href="#" newPage>
+              Docs
+            </HeaderMenuItemLink>
+            <HeaderMenuItemButton icon="logout" onClick={() => {}}>
+              Logout
+            </HeaderMenuItemButton>
+          </HeaderMenuItemsSection>
+        </HeaderMenuItems>
+      </HeaderMenu>,
+    );
+    expect(screen.getByTestId("user_menu_button")).toBeInTheDocument();
+    expect(screen.getByTestId("content")).toBeInTheDocument();
+    expect(screen.getAllByRole("menuitem").length).toBeGreaterThan(0);
+  });
+
+  it("HeaderMenuItemLink renders anchor with icon when newPage", () => {
+    render(
+      <HeaderMenu>
+        <HeaderMenuItems>
+          <HeaderMenuItemLink href="/x" newPage icon="external-link">
+            Link
+          </HeaderMenuItemLink>
+        </HeaderMenuItems>
+      </HeaderMenu>,
+    );
+    const link = screen.getByText("Link").closest("a")!;
+    expect(link).toHaveAttribute("target", "_blank");
+    expect(screen.getByTestId("icon")).toBeInTheDocument();
+  });
+
+  it("HeaderMenuItemButton invokes onClick", () => {
+    const onClick = jest.fn();
+    render(
+      <HeaderMenu>
+        <HeaderMenuItems>
+          <HeaderMenuItemButton onClick={onClick}>Click</HeaderMenuItemButton>
+        </HeaderMenuItems>
+      </HeaderMenu>,
+    );
+    fireEvent.click(screen.getByText("Click"));
+    expect(onClick).toHaveBeenCalled();
+  });
+});
diff --git a/src/frontend/src/components/core/appHeaderComponent/components/HeaderMenu/index.tsx b/src/frontend/src/components/core/appHeaderComponent/components/HeaderMenu/index.tsx
index ca990ece5..d10373ef5 100644
--- a/src/frontend/src/components/core/appHeaderComponent/components/HeaderMenu/index.tsx
+++ b/src/frontend/src/components/core/appHeaderComponent/components/HeaderMenu/index.tsx
@@ -45,7 +45,7 @@ export const HeaderMenuItemLink = ({
       {icon && (
         <ForwardedIconComponent
           name={icon}
-          className="side-bar-button-size mr-3 h-[18px] w-[18px] opacity-0 transition-all duration-300 group-hover:translate-x-3 group-hover:opacity-100 group-focus-visible:translate-x-3 group-focus-visible:opacity-100"
+          className="side-bar-button-size h-[18px] w-[18px] opacity-0 group-hover:opacity-100  group-focus-visible:opacity-100"
         />
       )}
     </a>
diff --git a/src/frontend/src/components/core/canvasControlsComponent/CanvasControls.tsx b/src/frontend/src/components/core/canvasControlsComponent/CanvasControls.tsx
new file mode 100644
index 000000000..2b7c32a86
--- /dev/null
+++ b/src/frontend/src/components/core/canvasControlsComponent/CanvasControls.tsx
@@ -0,0 +1,44 @@
+import { Panel, useStoreApi } from "@xyflow/react";
+import { type ReactNode, useEffect } from "react";
+import { useShallow } from "zustand/react/shallow";
+import { Separator } from "@/components/ui/separator";
+import useFlowStore from "@/stores/flowStore";
+import CanvasControlsDropdown from "./CanvasControlsDropdown";
+import HelpDropdown from "./HelpDropdown";
+
+const CanvasControls = ({ children }: { children?: ReactNode }) => {
+  const reactFlowStoreApi = useStoreApi();
+  const isFlowLocked = useFlowStore(
+    useShallow((state) => state.currentFlow?.locked),
+  );
+
+  useEffect(() => {
+    reactFlowStoreApi.setState({
+      nodesDraggable: !isFlowLocked,
+      nodesConnectable: !isFlowLocked,
+      elementsSelectable: !isFlowLocked,
+    });
+  }, [isFlowLocked, reactFlowStoreApi]);
+
+  return (
+    <Panel
+      data-testid="main_canvas_controls"
+      className="react-flow__controls !left-auto !m-2 flex !flex-row rounded-md border border-border bg-background fill-foreground stroke-foreground text-primary [&>button]:border-0"
+      position="bottom-right"
+    >
+      {children}
+      {children && (
+        <span>
+          <Separator orientation="vertical" />
+        </span>
+      )}
+      <CanvasControlsDropdown />
+      <span>
+        <Separator orientation="vertical" />
+      </span>
+      <HelpDropdown />
+    </Panel>
+  );
+};
+
+export default CanvasControls;
diff --git a/src/frontend/src/components/core/canvasControlsComponent/CanvasControlsDropdown.tsx b/src/frontend/src/components/core/canvasControlsComponent/CanvasControlsDropdown.tsx
new file mode 100644
index 000000000..3a7855a6a
--- /dev/null
+++ b/src/frontend/src/components/core/canvasControlsComponent/CanvasControlsDropdown.tsx
@@ -0,0 +1,146 @@
+import { useReactFlow, useStore } from "@xyflow/react";
+import { useCallback, useEffect, useState } from "react";
+import { shallow } from "zustand/shallow";
+import IconComponent from "@/components/common/genericIconComponent";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Separator } from "@/components/ui/separator";
+import DropdownControlButton from "./DropdownControlButton";
+import { formatZoomPercentage, reactFlowSelector } from "./utils/canvasUtils";
+
+export const KEYBOARD_SHORTCUTS = {
+  ZOOM_IN: { key: "+", code: "Equal" },
+  ZOOM_OUT: { key: "-", code: "Minus" },
+  FIT_VIEW: { key: "1", code: "Digit1" },
+  RESET_ZOOM: { key: "0", code: "Digit0" },
+} as const;
+
+const CanvasControlsDropdown = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const { fitView, zoomIn, zoomOut, zoomTo } = useReactFlow();
+
+  const { minZoomReached, maxZoomReached, zoom } = useStore(
+    reactFlowSelector,
+    shallow,
+  );
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const isModifierPressed = event.metaKey || event.ctrlKey;
+
+      if (!isModifierPressed) return;
+
+      switch (event.code) {
+        case KEYBOARD_SHORTCUTS.ZOOM_IN.code:
+          event.preventDefault();
+          if (!maxZoomReached) {
+            zoomIn();
+          }
+          break;
+        case KEYBOARD_SHORTCUTS.ZOOM_OUT.code:
+          event.preventDefault();
+          if (minZoomReached || zoom <= 0.6) {
+            zoomTo(1);
+          } else {
+            zoomOut();
+          }
+          break;
+        case KEYBOARD_SHORTCUTS.FIT_VIEW.code:
+          event.preventDefault();
+          fitView();
+          break;
+        case KEYBOARD_SHORTCUTS.RESET_ZOOM.code:
+          event.preventDefault();
+          zoomTo(1);
+          break;
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [zoomIn, zoomOut, fitView, zoomTo, maxZoomReached, minZoomReached, zoom]);
+
+  const handleZoomIn = useCallback(() => {
+    zoomIn();
+  }, [zoomIn]);
+
+  const handleZoomOut = useCallback(() => {
+    zoomOut();
+  }, [zoomOut]);
+
+  const handleFitView = useCallback(() => {
+    fitView();
+  }, [fitView]);
+
+  const handleResetZoom = useCallback(() => {
+    zoomTo(1);
+  }, [zoomTo]);
+
+  return (
+    <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          data-testid="canvas_controls_dropdown"
+          className="group rounded-none px-2 py-2 hover:bg-muted"
+          unstyled
+          title="Canvas Controls"
+        >
+          <div className="flex items-center justify-center ">
+            <div className="text-sm text-primary pr-1">
+              {formatZoomPercentage(zoom)}
+            </div>
+            <IconComponent
+              name={isOpen ? "ChevronDown" : "ChevronUp"}
+              aria-hidden="true"
+              className="text-primary group-hover:text-primary !h-5 !w-5"
+            />
+          </div>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        side="top"
+        align="end"
+        className="flex flex-col w-full"
+      >
+        <DropdownControlButton
+          tooltipText="Zoom In"
+          onClick={handleZoomIn}
+          disabled={maxZoomReached}
+          testId="zoom_in"
+          label="Zoom In"
+          shortcut={KEYBOARD_SHORTCUTS.ZOOM_IN.key}
+        />
+        <DropdownControlButton
+          tooltipText="Zoom Out"
+          onClick={handleZoomOut}
+          disabled={minZoomReached}
+          testId="zoom_out"
+          label="Zoom Out"
+          shortcut={KEYBOARD_SHORTCUTS.ZOOM_OUT.key}
+        />
+        <Separator />
+        <DropdownControlButton
+          tooltipText="Reset zoom to 100%"
+          onClick={handleResetZoom}
+          testId="reset_zoom"
+          label="Zoom To 100%"
+          shortcut={KEYBOARD_SHORTCUTS.RESET_ZOOM.key}
+        />
+        <DropdownControlButton
+          tooltipText="Fit view to show all nodes"
+          onClick={handleFitView}
+          testId="fit_view"
+          label="Zoom To Fit"
+          shortcut={KEYBOARD_SHORTCUTS.FIT_VIEW.key}
+        />
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+export default CanvasControlsDropdown;
diff --git a/src/frontend/src/components/core/canvasControlsComponent/DropdownControlButton.tsx b/src/frontend/src/components/core/canvasControlsComponent/DropdownControlButton.tsx
new file mode 100644
index 000000000..4fcf13782
--- /dev/null
+++ b/src/frontend/src/components/core/canvasControlsComponent/DropdownControlButton.tsx
@@ -0,0 +1,86 @@
+import React from "react";
+import { ForwardedIconComponent } from "@/components/common/genericIconComponent";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/utils/utils";
+import ToggleShadComponent from "../parameterRenderComponent/components/toggleShadComponent";
+import { getModifierKey } from "./utils/canvasUtils";
+
+export type DropdownControlButtonProps = {
+  tooltipText?: string;
+  onClick?: () => void;
+  disabled?: boolean;
+  testId?: string;
+  label?: string;
+  shortcut?: string;
+  iconName?: string;
+  hasToogle?: boolean;
+  toggleValue?: boolean;
+  externalLink?: boolean;
+};
+
+const DropdownControlButton: React.FC<DropdownControlButtonProps> = ({
+  tooltipText,
+  onClick = () => {},
+  disabled,
+  testId,
+  label = "",
+  shortcut = "",
+  iconName,
+  hasToogle = false,
+  toggleValue = false,
+  externalLink = false,
+}) => (
+  <Button
+    data-testid={testId}
+    className={cn(
+      "group flex items-center justify-center !py-1.5 !px-2 hover:bg-accent h-full rounded-none",
+      disabled && "cursor-not-allowed opacity-50",
+    )}
+    onClick={onClick}
+    variant="ghost"
+    disabled={disabled}
+    title={tooltipText || ""}
+  >
+    {iconName && (
+      <ForwardedIconComponent
+        name={iconName}
+        className="text-muted-foreground group-hover:text-primary"
+      />
+    )}
+    <div className="flex flex-row items-center justify-between w-full h-full">
+      <span className="text-muted-foreground text-sm mr-2 group-hover:text-primary">
+        {label}
+      </span>
+      <div
+        className={cn(
+          "flex flex-row items-center text-sm",
+          shortcut && "w-[25px]",
+        )}
+      >
+        {shortcut && (
+          <div className="flex items-center justify-between w-full text-muted-foreground group-hover:text-primary">
+            <span>{getModifierKey()}</span>
+            <span className="">{shortcut}</span>
+          </div>
+        )}
+        {externalLink && (
+          <ForwardedIconComponent
+            name="external-link"
+            className="text-muted-foreground group-hover:text-primary opacity-0 group-hover:opacity-100"
+          />
+        )}
+      </div>
+    </div>
+    {hasToogle && (
+      <ToggleShadComponent
+        value={toggleValue}
+        handleOnNewValue={onClick}
+        editNode={true}
+        id="helper_lines"
+        disabled={false}
+      />
+    )}
+  </Button>
+);
+
+export default DropdownControlButton;
diff --git a/src/frontend/src/components/core/canvasControlsComponent/HelpDropdown.tsx b/src/frontend/src/components/core/canvasControlsComponent/HelpDropdown.tsx
new file mode 100644
index 000000000..3a125b1b1
--- /dev/null
+++ b/src/frontend/src/components/core/canvasControlsComponent/HelpDropdown.tsx
@@ -0,0 +1,40 @@
+import { useCallback, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { HelpDropdownView } from "@/components/core/canvasControlsComponent/HelpDropdownView";
+import {
+  BUG_REPORT_URL,
+  DATASTAX_DOCS_URL,
+  DESKTOP_URL,
+  DOCS_URL,
+} from "@/constants/constants";
+import { ENABLE_DATASTAX_LANGFLOW } from "@/customization/feature-flags";
+import useFlowStore from "@/stores/flowStore";
+
+const HelpDropdown = () => {
+  const navigate = useNavigate();
+  const [isHelpMenuOpen, setIsHelpMenuOpen] = useState(false);
+  const helperLineEnabled = useFlowStore((state) => state.helperLineEnabled);
+  const setHelperLineEnabled = useFlowStore(
+    (state) => state.setHelperLineEnabled,
+  );
+
+  const onToggleHelperLines = useCallback(() => {
+    setHelperLineEnabled(!helperLineEnabled);
+  }, [helperLineEnabled]);
+
+  const docsUrl = ENABLE_DATASTAX_LANGFLOW ? DATASTAX_DOCS_URL : DOCS_URL;
+
+  return (
+    <HelpDropdownView
+      isOpen={isHelpMenuOpen}
+      onOpenChange={setIsHelpMenuOpen}
+      helperLineEnabled={helperLineEnabled}
+      onToggleHelperLines={onToggleHelperLines}
+      navigateTo={(path) => navigate(path)}
+      openLink={(url) => window.open(url, "_blank")}
+      urls={{ docs: docsUrl, bugReport: BUG_REPORT_URL, desktop: DESKTOP_URL }}
+    />
+  );
+};
+
+export default HelpDropdown;
diff --git a/src/frontend/src/components/core/canvasControlsComponent/HelpDropdownView.tsx b/src/frontend/src/components/core/canvasControlsComponent/HelpDropdownView.tsx
new file mode 100644
index 000000000..7b351752c
--- /dev/null
+++ b/src/frontend/src/components/core/canvasControlsComponent/HelpDropdownView.tsx
@@ -0,0 +1,96 @@
+import IconComponent from "@/components/common/genericIconComponent";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Separator } from "@/components/ui/separator";
+import DropdownControlButton from "./DropdownControlButton";
+
+export type HelpDropdownViewProps = {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  helperLineEnabled: boolean;
+  onToggleHelperLines: () => void;
+  navigateTo: (path: string) => void;
+  openLink: (url: string) => void;
+  urls: {
+    docs: string;
+    bugReport: string;
+    desktop: string;
+  };
+};
+
+export const HelpDropdownView = ({
+  isOpen,
+  onOpenChange,
+  helperLineEnabled,
+  onToggleHelperLines,
+  navigateTo,
+  openLink,
+  urls,
+}: HelpDropdownViewProps) => {
+  return (
+    <DropdownMenu open={isOpen} onOpenChange={onOpenChange}>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="group flex items-center justify-center px-2 rounded-none"
+          title="Help"
+        >
+          <IconComponent
+            name="Circle-Help"
+            aria-hidden="true"
+            className="text-muted-foreground group-hover:text-primary !h-5 !w-5"
+          />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        side="top"
+        align="end"
+        className="flex flex-col w-full"
+      >
+        <DropdownControlButton
+          iconName="book-open"
+          testId="canvas_controls_dropdown_docs"
+          label="Docs"
+          externalLink
+          onClick={() => openLink(urls.docs)}
+        />
+        <DropdownControlButton
+          iconName="keyboard"
+          testId="canvas_controls_dropdown_shortcuts"
+          label="Shortcuts"
+          onClick={() => navigateTo("/settings/shortcuts")}
+        />
+        <DropdownControlButton
+          iconName="bug"
+          testId="canvas_controls_dropdown_report_a_bug"
+          externalLink
+          label="Report a bug"
+          onClick={() => openLink(urls.bugReport)}
+        />
+        <Separator />
+        <DropdownControlButton
+          iconName="download"
+          testId="canvas_controls_dropdown_get_langflow_desktop"
+          label="Get Langflow Desktop"
+          externalLink
+          onClick={() => openLink(urls.desktop)}
+        />
+        <DropdownControlButton
+          iconName={!helperLineEnabled ? "UnfoldHorizontal" : "FoldHorizontal"}
+          testId="canvas_controls_dropdown_enable_smart_guides"
+          onClick={onToggleHelperLines}
+          toggleValue={helperLineEnabled}
+          label="Enable smart guides"
+          hasToogle={true}
+        />
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+export default HelpDropdownView;
diff --git a/src/frontend/src/components/core/canvasControlsComponent/__tests__/CanvasControls.test.tsx b/src/frontend/src/components/core/canvasControlsComponent/__tests__/CanvasControls.test.tsx
new file mode 100644
index 000000000..57c3af6f3
--- /dev/null
+++ b/src/frontend/src/components/core/canvasControlsComponent/__tests__/CanvasControls.test.tsx
@@ -0,0 +1,72 @@
+import { render, screen } from "@testing-library/react";
+import CanvasControls from "../CanvasControls";
+
+// Capture flow functions for assertions
+const reactFlowFns = {
+  fitView: jest.fn(),
+  zoomIn: jest.fn(),
+  zoomOut: jest.fn(),
+  zoomTo: jest.fn(),
+};
+
+// Mocks for external dependencies used internally
+jest.mock("@xyflow/react", () => ({
+  Panel: ({ children, ...props }: any) => (
+    <div data-testid="panel" {...props}>
+      {children}
+    </div>
+  ),
+  useReactFlow: () => reactFlowFns,
+  useStore: (_selector: any) => ({
+    isInteractive: true,
+    minZoomReached: false,
+    maxZoomReached: false,
+    zoom: 1,
+  }),
+  useStoreApi: () => ({ setState: jest.fn() }),
+}));
+
+jest.mock("@/stores/flowStore", () => ({
+  __esModule: true,
+  default: jest.fn(() => false),
+}));
+
+jest.mock("@/components/ui/separator", () => ({
+  Separator: ({ orientation }: { orientation: "vertical" | "horizontal" }) => (
+    <div data-testid={`separator-${orientation}`} />
+  ),
+}));
+
+// Mock dropdowns to a simple render that exposes props for assertions
+jest.mock("../CanvasControlsDropdown", () => ({
+  __esModule: true,
+  default: (props: any) => <div data-testid="controls-dropdown" {...props} />,
+}));
+
+jest.mock("../HelpDropdown", () => ({
+  __esModule: true,
+  default: (props: any) => <div data-testid="help-dropdown" {...props} />,
+}));
+
+describe("CanvasControls", () => {
+  it("renders panel and separators when children present", () => {
+    render(
+      <CanvasControls>
+        <div>child</div>
+      </CanvasControls>,
+    );
+    expect(screen.getByTestId("main_canvas_controls")).toBeInTheDocument();
+    const seps = screen.getAllByTestId("separator-vertical");
+    expect(seps.length).toBeGreaterThanOrEqual(1);
+    expect(screen.getByTestId("controls-dropdown")).toBeInTheDocument();
+    expect(screen.getByTestId("help-dropdown")).toBeInTheDocument();
+  });
+
+  it("updates reactFlow state based on flow lock status", () => {
+    render(<CanvasControls />);
+
+    // The component should set up state through useStoreApi
+    // This test verifies the component renders and doesn't throw
+    expect(screen.getByTestId("main_canvas_controls")).toBeInTheDocument();
+  });
+});
diff --git a/src/frontend/src/components/core/canvasControlsComponent/__tests__/CanvasControlsDropdown.spec.tsx b/src/frontend/src/components/core/canvasControlsComponent/__tests__/CanvasControlsDropdown.spec.tsx
new file mode 100644
index 000000000..018e02425
--- /dev/null
+++ b/src/frontend/src/components/core/canvasControlsComponent/__tests__/CanvasControlsDropdown.spec.tsx
@@ -0,0 +1,124 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import CanvasControlsDropdown, {
+  KEYBOARD_SHORTCUTS,
+} from "../CanvasControlsDropdown";
+
+jest.mock("@/components/ui/button", () => ({
+  Button: ({ children, ...rest }) => <button {...rest}>{children}</button>,
+}));
+jest.mock("@/components/ui/dropdown-menu", () => ({
+  DropdownMenu: ({ children, open, onOpenChange }) => (
+    <div data-testid="dropdown-menu" data-open={open}>
+      <button
+        onClick={() => onOpenChange?.(!open)}
+        aria-expanded={open}
+        aria-haspopup="true"
+        type="button"
+      >
+        {children}
+      </button>
+    </div>
+  ),
+  DropdownMenuContent: ({ children }) => (
+    <div data-testid="dropdown-content">{children}</div>
+  ),
+  DropdownMenuTrigger: ({ children }) => (
+    <div data-testid="dropdown-trigger">{children}</div>
+  ),
+}));
+jest.mock("@/components/ui/separator", () => ({
+  Separator: () => <div data-testid="separator" />,
+}));
+jest.mock("../DropdownControlButton", () => ({
+  __esModule: true,
+  default: ({ label, onClick, disabled, testId, shortcut }) => (
+    <button
+      aria-label={label}
+      onClick={onClick}
+      disabled={disabled}
+      data-testid={testId}
+    >
+      {label} ({shortcut})
+    </button>
+  ),
+}));
+jest.mock("@/components/common/genericIconComponent", () => ({
+  __esModule: true,
+  default: ({ name }) => <span data-testid="icon">{name}</span>,
+}));
+
+// Minimize utils import surface (prevents pulling stores/darkStore via utils.ts)
+jest.mock("@/utils/utils", () => ({
+  __esModule: true,
+  getOS: () => "macos",
+  cn: (...args) => args.filter(Boolean).join(" "),
+}));
+
+const fitView = jest.fn();
+const zoomIn = jest.fn();
+const zoomOut = jest.fn();
+const zoomTo = jest.fn();
+
+jest.mock("@xyflow/react", () => ({
+  useReactFlow: () => ({ fitView, zoomIn, zoomOut, zoomTo }),
+  useStore: (selector) =>
+    selector({
+      nodesDraggable: true,
+      nodesConnectable: true,
+      elementsSelectable: true,
+      transform: [0, 0, 1],
+      minZoom: 0.2,
+      maxZoom: 2,
+    }),
+}));
+
+describe("CanvasControlsDropdown", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders current zoom percentage and toggles menu", () => {
+    render(<CanvasControlsDropdown />);
+    expect(screen.getByText("100%"));
+    fireEvent.click(screen.getByTestId("canvas_controls_dropdown"));
+    expect(screen.getByTestId("dropdown-content")).toBeInTheDocument();
+  });
+
+  it("handles zoom in/out, fit and reset via click", () => {
+    render(<CanvasControlsDropdown />);
+    fireEvent.click(screen.getByTestId("canvas_controls_dropdown"));
+
+    fireEvent.click(screen.getByTestId("zoom_in"));
+    expect(zoomIn).toHaveBeenCalled();
+
+    fireEvent.click(screen.getByTestId("zoom_out"));
+    expect(zoomOut).toHaveBeenCalled();
+
+    fireEvent.click(screen.getByTestId("fit_view"));
+    expect(fitView).toHaveBeenCalled();
+
+    fireEvent.click(screen.getByTestId("reset_zoom"));
+    expect(zoomTo).toHaveBeenCalledWith(1);
+  });
+
+  it("handles keyboard shortcuts with modifier", () => {
+    render(<CanvasControlsDropdown />);
+
+    const keydown = (code: string) =>
+      document.dispatchEvent(
+        new KeyboardEvent("keydown", { code, metaKey: true }),
+      );
+
+    keydown(KEYBOARD_SHORTCUTS.ZOOM_IN.code);
+    expect(zoomIn).toHaveBeenCalled();
+
+    keydown(KEYBOARD_SHORTCUTS.ZOOM_OUT.code);
+    expect(zoomOut).toHaveBeenCalled();
+
+    keydown(KEYBOARD_SHORTCUTS.FIT_VIEW.code);
+    expect(fitView).toHaveBeenCalled();
+
+    keydown(KEYBOARD_SHORTCUTS.RESET_ZOOM.code);
+    expect(zoomTo).toHaveBeenCalledWith(1);
+  });
+});
diff --git a/src/frontend/src/components/core/canvasControlsComponent/__tests__/CanvasControlsDropdown.test.tsx b/src/frontend/src/components/core/canvasControlsComponent/__tests__/CanvasControlsDropdown.test.tsx
new file mode 100644
index 000000000..749b9bbc5
--- /dev/null
+++ b/src/frontend/src/components/core/canvasControlsComponent/__tests__/CanvasControlsDropdown.test.tsx
@@ -0,0 +1,226 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import CanvasControlsDropdown, {
+  KEYBOARD_SHORTCUTS,
+} from "../CanvasControlsDropdown";
+
+// Mock React Flow hooks
+const mockReactFlowFns = {
+  fitView: jest.fn(),
+  zoomIn: jest.fn(),
+  zoomOut: jest.fn(),
+  zoomTo: jest.fn(),
+};
+
+let mockStoreValues = {
+  isInteractive: true,
+  minZoomReached: false,
+  maxZoomReached: false,
+  zoom: 1,
+};
+
+jest.mock("@xyflow/react", () => ({
+  useReactFlow: () => mockReactFlowFns,
+  useStore: (selector: any) => selector(mockStoreValues),
+}));
+
+// Mock dependencies
+jest.mock("zustand/shallow", () => ({
+  shallow: jest.fn((fn) => fn),
+}));
+
+jest.mock("@/components/common/genericIconComponent", () => ({
+  __esModule: true,
+  default: ({ name }: { name: string }) => (
+    <span data-testid={`icon-${name}`}>{name}</span>
+  ),
+}));
+
+jest.mock("@/components/ui/button", () => ({
+  Button: ({ children, ...props }: any) => (
+    <button {...props}>{children}</button>
+  ),
+}));
+
+jest.mock("@/components/ui/dropdown-menu", () => ({
+  DropdownMenu: ({ children, ...props }: any) => (
+    <div data-testid="dropdown-menu" {...props}>
+      {children}
+    </div>
+  ),
+  DropdownMenuTrigger: ({ children, asChild, ...props }: any) => (
+    <div data-testid="dropdown-trigger" {...props}>
+      {children}
+    </div>
+  ),
+  DropdownMenuContent: ({ children, ...props }: any) => (
+    <div data-testid="dropdown-content" {...props}>
+      {children}
+    </div>
+  ),
+}));
+
+jest.mock("@/components/ui/separator", () => ({
+  Separator: () => <div data-testid="separator" />,
+}));
+
+jest.mock("../DropdownControlButton", () => ({
+  __esModule: true,
+  default: ({ testId, onClick, disabled, label, shortcut }: any) => (
+    <button
+      data-testid={testId + "_dropdown"}
+      onClick={onClick}
+      disabled={disabled}
+      data-label={label}
+      data-shortcut={shortcut}
+    >
+      {label}
+    </button>
+  ),
+}));
+
+jest.mock("../utils/canvasUtils", () => ({
+  formatZoomPercentage: jest.fn((zoom: number) => `${Math.round(zoom * 100)}%`),
+  reactFlowSelector: jest.fn((state: any) => state),
+}));
+
+describe("CanvasControlsDropdown", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    // Reset mock store values
+    mockStoreValues = {
+      isInteractive: true,
+      minZoomReached: false,
+      maxZoomReached: false,
+      zoom: 1,
+    };
+
+    // Mock addEventListener and removeEventListener
+    jest.spyOn(document, "addEventListener");
+    jest.spyOn(document, "removeEventListener");
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("renders dropdown trigger with zoom percentage", () => {
+    render(<CanvasControlsDropdown />);
+
+    expect(screen.getByTestId("canvas_controls_dropdown")).toBeInTheDocument();
+    expect(screen.getByText("100%")).toBeInTheDocument();
+  });
+
+  it("renders chevron icon", () => {
+    render(<CanvasControlsDropdown />);
+
+    // Should have one of the chevron icons (the actual logic depends on internal state)
+    const chevronUp = screen.queryByTestId("icon-ChevronUp");
+    const chevronDown = screen.queryByTestId("icon-ChevronDown");
+
+    expect(chevronUp || chevronDown).toBeInTheDocument();
+  });
+
+  it("renders all control buttons with correct props", () => {
+    render(<CanvasControlsDropdown />);
+
+    expect(screen.getByTestId("zoom_in_dropdown")).toBeInTheDocument();
+    expect(screen.getByTestId("zoom_out_dropdown")).toBeInTheDocument();
+    expect(screen.getByTestId("reset_zoom_dropdown")).toBeInTheDocument();
+    expect(screen.getByTestId("fit_view_dropdown")).toBeInTheDocument();
+
+    // Check shortcuts are passed correctly
+    expect(screen.getByTestId("zoom_in_dropdown")).toHaveAttribute(
+      "data-shortcut",
+      KEYBOARD_SHORTCUTS.ZOOM_IN.key,
+    );
+    expect(screen.getByTestId("zoom_out_dropdown")).toHaveAttribute(
+      "data-shortcut",
+      KEYBOARD_SHORTCUTS.ZOOM_OUT.key,
+    );
+  });
+
+  it("handles zoom in button click", () => {
+    render(<CanvasControlsDropdown />);
+
+    fireEvent.click(screen.getByTestId("zoom_in_dropdown"));
+    expect(mockReactFlowFns.zoomIn).toHaveBeenCalledTimes(1);
+  });
+
+  it("handles zoom out button click", () => {
+    render(<CanvasControlsDropdown />);
+
+    fireEvent.click(screen.getByTestId("zoom_out_dropdown"));
+    expect(mockReactFlowFns.zoomOut).toHaveBeenCalledTimes(1);
+  });
+
+  it("handles fit view button click", () => {
+    render(<CanvasControlsDropdown />);
+
+    fireEvent.click(screen.getByTestId("fit_view_dropdown"));
+    expect(mockReactFlowFns.fitView).toHaveBeenCalledTimes(1);
+  });
+
+  it("handles reset zoom button click", () => {
+    render(<CanvasControlsDropdown />);
+
+    fireEvent.click(screen.getByTestId("reset_zoom_dropdown"));
+    expect(mockReactFlowFns.zoomTo).toHaveBeenCalledWith(1);
+  });
+
+  it("disables zoom in when maxZoomReached is true", () => {
+    mockStoreValues.maxZoomReached = true;
+
+    render(<CanvasControlsDropdown />);
+
+    expect(screen.getByTestId("zoom_in_dropdown")).toBeDisabled();
+  });
+
+  it("disables zoom out when minZoomReached is true", () => {
+    mockStoreValues.minZoomReached = true;
+
+    render(<CanvasControlsDropdown />);
+
+    expect(screen.getByTestId("zoom_out_dropdown")).toBeDisabled();
+  });
+
+  describe("Keyboard shortcuts", () => {
+    it("sets up keyboard event listeners on mount", () => {
+      render(<CanvasControlsDropdown />);
+
+      expect(document.addEventListener).toHaveBeenCalledWith(
+        "keydown",
+        expect.any(Function),
+      );
+    });
+  });
+
+  describe("Event listener management", () => {
+    it("removes keydown event listener on unmount", () => {
+      const { unmount } = render(<CanvasControlsDropdown />);
+
+      unmount();
+
+      expect(document.removeEventListener).toHaveBeenCalledWith(
+        "keydown",
+        expect.any(Function),
+      );
+    });
+  });
+
+  describe("Dynamic zoom display", () => {
+    it("displays zoom percentage correctly", () => {
+      render(<CanvasControlsDropdown />);
+
+      expect(screen.getByText("100%")).toBeInTheDocument();
+    });
+
+    it("handles fractional zoom values correctly", () => {
+      mockStoreValues.zoom = 0.75;
+
+      render(<CanvasControlsDropdown />);
+
+      expect(screen.getByText("75%")).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/frontend/src/components/core/canvasControlsComponent/__tests__/DropdownControlButton.test.tsx b/src/frontend/src/components/core/canvasControlsComponent/__tests__/DropdownControlButton.test.tsx
new file mode 100644
index 000000000..345667279
--- /dev/null
+++ b/src/frontend/src/components/core/canvasControlsComponent/__tests__/DropdownControlButton.test.tsx
@@ -0,0 +1,181 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import DropdownControlButton from "../DropdownControlButton";
+
+// Mock dependencies
+jest.mock("@/components/common/genericIconComponent", () => ({
+  ForwardedIconComponent: ({
+    name,
+    className,
+  }: {
+    name: string;
+    className: string;
+  }) => <span data-testid={`icon-${name}`} className={className} />,
+}));
+
+jest.mock("@/components/ui/button", () => ({
+  Button: ({ children, ...props }: any) => (
+    <button {...props}>{children}</button>
+  ),
+}));
+
+jest.mock("@/utils/utils", () => ({
+  cn: (...args: any[]) => args.filter(Boolean).join(" "),
+}));
+
+jest.mock(
+  "../../parameterRenderComponent/components/toggleShadComponent",
+  () => ({
+    __esModule: true,
+    default: ({ value, handleOnNewValue, id }: any) => (
+      <div
+        data-testid={`toggle-${id}`}
+        data-value={value}
+        onClick={handleOnNewValue}
+        role="switch"
+        tabIndex={0}
+        aria-checked={value}
+        aria-label={`Toggle ${id}`}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleOnNewValue();
+          }
+        }}
+      />
+    ),
+  }),
+);
+
+jest.mock("../utils/canvasUtils", () => ({
+  getModifierKey: jest.fn(() => "⌘"),
+}));
+
+describe("DropdownControlButton", () => {
+  const defaultProps = {
+    testId: "test-button",
+    label: "Test Button",
+    onClick: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders basic button with label", () => {
+    render(<DropdownControlButton {...defaultProps} />);
+
+    expect(screen.getByTestId("test-button")).toBeInTheDocument();
+    expect(screen.getByText("Test Button")).toBeInTheDocument();
+  });
+
+  it("calls onClick handler when clicked", () => {
+    const mockOnClick = jest.fn();
+    render(<DropdownControlButton {...defaultProps} onClick={mockOnClick} />);
+
+    fireEvent.click(screen.getByTestId("test-button"));
+    expect(mockOnClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders with icon when iconName is provided", () => {
+    render(<DropdownControlButton {...defaultProps} iconName="test-icon" />);
+
+    expect(screen.getByTestId("icon-test-icon")).toBeInTheDocument();
+  });
+
+  it("displays shortcut with modifier key", () => {
+    render(<DropdownControlButton {...defaultProps} shortcut="+" />);
+
+    expect(screen.getByText("⌘")).toBeInTheDocument();
+    expect(screen.getByText("+")).toBeInTheDocument();
+  });
+
+  it("applies disabled state correctly", () => {
+    render(<DropdownControlButton {...defaultProps} disabled />);
+
+    const button = screen.getByTestId("test-button");
+    expect(button).toBeDisabled();
+  });
+
+  it("sets tooltip text as title attribute", () => {
+    const tooltipText = "This is a tooltip";
+    render(
+      <DropdownControlButton {...defaultProps} tooltipText={tooltipText} />,
+    );
+
+    const button = screen.getByTestId("test-button");
+    expect(button).toHaveAttribute("title", tooltipText);
+  });
+
+  it("renders toggle component when hasToogle is true", () => {
+    render(
+      <DropdownControlButton
+        {...defaultProps}
+        hasToogle={true}
+        toggleValue={true}
+      />,
+    );
+
+    expect(screen.getByTestId("toggle-helper_lines")).toBeInTheDocument();
+    expect(screen.getByTestId("toggle-helper_lines")).toHaveAttribute(
+      "data-value",
+      "true",
+    );
+  });
+
+  it("passes toggle value correctly to toggle component", () => {
+    render(
+      <DropdownControlButton
+        {...defaultProps}
+        hasToogle={true}
+        toggleValue={false}
+      />,
+    );
+
+    expect(screen.getByTestId("toggle-helper_lines")).toHaveAttribute(
+      "data-value",
+      "false",
+    );
+  });
+
+  it("handles toggle click through onClick prop", () => {
+    const mockOnClick = jest.fn();
+    render(
+      <DropdownControlButton
+        {...defaultProps}
+        onClick={mockOnClick}
+        hasToogle={true}
+        toggleValue={false}
+      />,
+    );
+
+    fireEvent.click(screen.getByTestId("toggle-helper_lines"));
+    expect(mockOnClick).toHaveBeenCalled();
+  });
+
+  it("renders without shortcut when not provided", () => {
+    render(<DropdownControlButton {...defaultProps} />);
+
+    expect(screen.queryByText("⌘")).not.toBeInTheDocument();
+  });
+
+  it("uses default onClick when not provided", () => {
+    render(<DropdownControlButton testId="test-button" label="Test" />);
+
+    // Should not throw error when clicked
+    fireEvent.click(screen.getByTestId("test-button"));
+  });
+
+  it("applies correct CSS classes for disabled state", () => {
+    render(<DropdownControlButton {...defaultProps} disabled />);
+
+    const button = screen.getByTestId("test-button");
+    expect(button.className).toContain("cursor-not-allowed opacity-50");
+  });
+
+  it("renders empty label by default", () => {
+    render(<DropdownControlButton testId="test-button" />);
+
+    const button = screen.getByTestId("test-button");
+    expect(button).toBeInTheDocument();
+  });
+});
diff --git a/src/frontend/src/components/core/canvasControlsComponent/__tests__/Dropdowns.test.tsx b/src/frontend/src/components/core/canvasControlsComponent/__tests__/Dropdowns.test.tsx
new file mode 100644
index 000000000..a3023dd64
--- /dev/null
+++ b/src/frontend/src/components/core/canvasControlsComponent/__tests__/Dropdowns.test.tsx
@@ -0,0 +1,118 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { MemoryRouter, useNavigate } from "react-router-dom";
+import HelpDropdown from "../HelpDropdown";
+
+jest.mock("@/components/ui/button", () => ({
+  Button: ({ children, ...props }: any) => (
+    <button {...props}>{children}</button>
+  ),
+}));
+
+jest.mock("@/components/ui/dropdown-menu", () => ({
+  DropdownMenu: ({ children, ...props }: any) => (
+    <div data-testid="dropdown-menu" {...props}>
+      {children}
+    </div>
+  ),
+  DropdownMenuTrigger: ({ children, ...props }: any) => (
+    <div data-testid="dropdown-trigger" {...props}>
+      {children}
+    </div>
+  ),
+  DropdownMenuContent: ({ children, ...props }: any) => (
+    <div data-testid="dropdown-content" {...props}>
+      {children}
+    </div>
+  ),
+}));
+
+jest.mock("@/components/ui/separator", () => ({
+  Separator: () => <div data-testid="separator" />,
+}));
+
+jest.mock("@/components/common/genericIconComponent", () => ({
+  __esModule: true,
+  default: () => <span data-testid="icon" />,
+  ForwardedIconComponent: ({ name }: { name: string }) => (
+    <span data-testid={`icon-${name}`} />
+  ),
+}));
+
+jest.mock("@/constants/constants", () => ({
+  __esModule: true,
+  DATASTAX_DOCS_URL: "https://docs.datastax.com",
+  DOCS_URL: "https://docs.langflow.org",
+  DESKTOP_URL: "https://desktop.langflow.org",
+}));
+
+jest.mock("@/customization/feature-flags", () => ({
+  ENABLE_DATASTAX_LANGFLOW: false,
+}));
+
+jest.mock("@/utils/utils", () => ({
+  cn: (...args: any[]) => args.filter(Boolean).join(" "),
+  getOS: () => "macos",
+}));
+
+jest.mock("react-router-dom", () => {
+  const actual = jest.requireActual("react-router-dom");
+  return {
+    ...actual,
+    useNavigate: jest.fn(),
+  };
+});
+
+jest.mock("@/stores/darkStore", () => ({
+  useDarkStore: () => ({
+    dark: false,
+    setDark: jest.fn(),
+  }),
+}));
+
+jest.mock("@/stores/flowStore", () => ({
+  __esModule: true,
+  default: () => ({
+    helperLineEnabled: false,
+    setHelperLineEnabled: jest.fn(),
+  }),
+}));
+
+// Mock window.open
+Object.defineProperty(window, "open", {
+  writable: true,
+  value: jest.fn(),
+});
+
+describe("HelpDropdown", () => {
+  beforeEach(() => {
+    (window.open as jest.Mock).mockClear();
+  });
+
+  it("opens docs in new tab and navigates to shortcuts", () => {
+    const mockNavigate = jest.fn();
+    (useNavigate as unknown as jest.Mock).mockReturnValue(mockNavigate);
+
+    render(
+      <MemoryRouter>
+        <HelpDropdown isOpen={true} onOpenChange={() => {}} />
+      </MemoryRouter>,
+    );
+
+    fireEvent.click(screen.getByTestId("canvas_controls_dropdown_docs"));
+    expect(window.open).toHaveBeenCalledWith(
+      "https://docs.langflow.org",
+      "_blank",
+    );
+
+    fireEvent.click(screen.getByTestId("canvas_controls_dropdown_shortcuts"));
+    expect(mockNavigate).toHaveBeenCalledWith("/settings/shortcuts");
+
+    fireEvent.click(
+      screen.getByTestId("canvas_controls_dropdown_get_langflow_desktop"),
+    );
+    expect(window.open).toHaveBeenCalledWith(
+      "https://desktop.langflow.org",
+      "_blank",
+    );
+  });
+});
diff --git a/src/frontend/src/components/core/canvasControlsComponent/__tests__/HelpDropdown.spec.tsx b/src/frontend/src/components/core/canvasControlsComponent/__tests__/HelpDropdown.spec.tsx
new file mode 100644
index 000000000..557e624f1
--- /dev/null
+++ b/src/frontend/src/components/core/canvasControlsComponent/__tests__/HelpDropdown.spec.tsx
@@ -0,0 +1,104 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { HelpDropdownView } from "../HelpDropdownView";
+
+jest.mock("@/components/ui/button", () => ({
+  Button: ({ children, ...rest }) => <button {...rest}>{children}</button>,
+}));
+
+jest.mock("@/components/ui/dropdown-menu", () => ({
+  DropdownMenu: ({ children, open, onOpenChange }) => (
+    <div data-testid="dropdown-menu" data-open={open}>
+      <button
+        onClick={() => onOpenChange?.(!open)}
+        aria-expanded={open}
+        aria-haspopup="true"
+        type="button"
+      >
+        {children}
+      </button>
+    </div>
+  ),
+  DropdownMenuContent: ({ children }) => (
+    <div data-testid="dropdown-content">{children}</div>
+  ),
+  DropdownMenuTrigger: ({ children }) => (
+    <div data-testid="dropdown-trigger">{children}</div>
+  ),
+}));
+
+jest.mock("@/components/ui/separator", () => ({
+  Separator: () => <div data-testid="separator" />,
+}));
+
+jest.mock("../DropdownControlButton", () => ({
+  __esModule: true,
+  default: ({ label, onClick, disabled, testId }) => (
+    <button
+      aria-label={label}
+      onClick={onClick}
+      disabled={disabled}
+      data-testid={testId}
+    >
+      {label}
+    </button>
+  ),
+}));
+
+jest.mock("@/components/common/genericIconComponent", () => ({
+  __esModule: true,
+  default: ({ name }) => <span data-testid="icon">{name}</span>,
+}));
+
+// Minimize utils import surface (prevents pulling heavy modules)
+jest.mock("@/utils/utils", () => ({
+  __esModule: true,
+  getOS: () => "macos",
+  cn: (...args: Array<string>) => args.filter(Boolean).join(" "),
+}));
+
+describe("HelpDropdownView", () => {
+  it("calls provided handlers for each menu item", () => {
+    const onOpenChange = jest.fn();
+    const onToggleHelperLines = jest.fn();
+    const navigateTo = jest.fn();
+    const openLink = jest.fn();
+    const urls = {
+      docs: "https://docs",
+      bugReport: "https://bugs",
+      desktop: "https://desktop",
+    };
+
+    render(
+      <HelpDropdownView
+        isOpen={true}
+        onOpenChange={onOpenChange}
+        helperLineEnabled={false}
+        onToggleHelperLines={onToggleHelperLines}
+        navigateTo={navigateTo}
+        openLink={openLink}
+        urls={urls}
+      />,
+    );
+
+    fireEvent.click(screen.getByTestId("canvas_controls_dropdown_docs"));
+    expect(openLink).toHaveBeenCalledWith("https://docs");
+
+    fireEvent.click(screen.getByTestId("canvas_controls_dropdown_shortcuts"));
+    expect(navigateTo).toHaveBeenCalledWith("/settings/shortcuts");
+
+    fireEvent.click(
+      screen.getByTestId("canvas_controls_dropdown_report_a_bug"),
+    );
+    expect(openLink).toHaveBeenCalledWith("https://bugs");
+
+    fireEvent.click(
+      screen.getByTestId("canvas_controls_dropdown_get_langflow_desktop"),
+    );
+    expect(openLink).toHaveBeenCalledWith("https://desktop");
+
+    fireEvent.click(
+      screen.getByTestId("canvas_controls_dropdown_enable_smart_guides"),
+    );
+    expect(onToggleHelperLines).toHaveBeenCalled();
+  });
+});
diff --git a/src/frontend/src/components/core/canvasControlsComponent/__tests__/canvasUtils.test.ts b/src/frontend/src/components/core/canvasControlsComponent/__tests__/canvasUtils.test.ts
new file mode 100644
index 000000000..eb5335771
--- /dev/null
+++ b/src/frontend/src/components/core/canvasControlsComponent/__tests__/canvasUtils.test.ts
@@ -0,0 +1,257 @@
+import { ReactFlowState } from "@xyflow/react";
+import {
+  formatZoomPercentage,
+  getModifierKey,
+  reactFlowSelector,
+} from "../utils/canvasUtils";
+
+// Mock the getOS utility
+jest.mock("@/utils/utils", () => ({
+  getOS: jest.fn(),
+}));
+
+import { getOS } from "@/utils/utils";
+
+const mockGetOS = getOS as jest.MockedFunction<typeof getOS>;
+
+describe("canvasUtils", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe("getModifierKey", () => {
+    it("returns ⌘ for macOS", () => {
+      mockGetOS.mockReturnValue("macos");
+      expect(getModifierKey()).toBe("⌘");
+    });
+
+    it("returns Ctrl for Windows", () => {
+      mockGetOS.mockReturnValue("windows");
+      expect(getModifierKey()).toBe("Ctrl");
+    });
+
+    it("returns Ctrl for Linux", () => {
+      mockGetOS.mockReturnValue("linux");
+      expect(getModifierKey()).toBe("Ctrl");
+    });
+
+    it("returns Ctrl for unknown OS", () => {
+      mockGetOS.mockReturnValue("unknown");
+      expect(getModifierKey()).toBe("Ctrl");
+    });
+  });
+
+  describe("formatZoomPercentage", () => {
+    it("formats zoom level 1 as 100%", () => {
+      expect(formatZoomPercentage(1)).toBe("100%");
+    });
+
+    it("formats zoom level 0.5 as 50%", () => {
+      expect(formatZoomPercentage(0.5)).toBe("50%");
+    });
+
+    it("formats zoom level 1.5 as 150%", () => {
+      expect(formatZoomPercentage(1.5)).toBe("150%");
+    });
+
+    it("formats zoom level 0.25 as 25%", () => {
+      expect(formatZoomPercentage(0.25)).toBe("25%");
+    });
+
+    it("formats zoom level 2.789 as 279%", () => {
+      expect(formatZoomPercentage(2.789)).toBe("279%");
+    });
+
+    it("rounds decimal values correctly", () => {
+      expect(formatZoomPercentage(0.333)).toBe("33%");
+      expect(formatZoomPercentage(0.666)).toBe("67%");
+      expect(formatZoomPercentage(1.234)).toBe("123%");
+    });
+
+    it("handles zero zoom level", () => {
+      expect(formatZoomPercentage(0)).toBe("0%");
+    });
+
+    it("handles very small zoom levels", () => {
+      expect(formatZoomPercentage(0.001)).toBe("0%");
+      expect(formatZoomPercentage(0.005)).toBe("1%");
+    });
+
+    it("handles very large zoom levels", () => {
+      expect(formatZoomPercentage(10)).toBe("1000%");
+      expect(formatZoomPercentage(50.5)).toBe("5050%");
+    });
+  });
+
+  describe("reactFlowSelector", () => {
+    const createMockReactFlowState = (
+      overrides: Partial<ReactFlowState> = {},
+    ): ReactFlowState =>
+      ({
+        nodesDraggable: true,
+        nodesConnectable: true,
+        elementsSelectable: true,
+        transform: [0, 0, 1], // x, y, zoom
+        minZoom: 0.1,
+        maxZoom: 5,
+        ...overrides,
+      }) as ReactFlowState;
+
+    it("returns correct isInteractive when all interaction modes are enabled", () => {
+      const state = createMockReactFlowState({
+        nodesDraggable: true,
+        nodesConnectable: true,
+        elementsSelectable: true,
+      });
+
+      const result = reactFlowSelector(state);
+      expect(result.isInteractive).toBe(true);
+    });
+
+    it("returns correct isInteractive when only nodesDraggable is enabled", () => {
+      const state = createMockReactFlowState({
+        nodesDraggable: true,
+        nodesConnectable: false,
+        elementsSelectable: false,
+      });
+
+      const result = reactFlowSelector(state);
+      expect(result.isInteractive).toBe(true);
+    });
+
+    it("returns correct isInteractive when only nodesConnectable is enabled", () => {
+      const state = createMockReactFlowState({
+        nodesDraggable: false,
+        nodesConnectable: true,
+        elementsSelectable: false,
+      });
+
+      const result = reactFlowSelector(state);
+      expect(result.isInteractive).toBe(true);
+    });
+
+    it("returns correct isInteractive when only elementsSelectable is enabled", () => {
+      const state = createMockReactFlowState({
+        nodesDraggable: false,
+        nodesConnectable: false,
+        elementsSelectable: true,
+      });
+
+      const result = reactFlowSelector(state);
+      expect(result.isInteractive).toBe(true);
+    });
+
+    it("returns false for isInteractive when all interaction modes are disabled", () => {
+      const state = createMockReactFlowState({
+        nodesDraggable: false,
+        nodesConnectable: false,
+        elementsSelectable: false,
+      });
+
+      const result = reactFlowSelector(state);
+      expect(result.isInteractive).toBe(false);
+    });
+
+    it("returns correct minZoomReached when zoom is at minimum", () => {
+      const state = createMockReactFlowState({
+        transform: [0, 0, 0.1], // zoom at minZoom
+        minZoom: 0.1,
+      });
+
+      const result = reactFlowSelector(state);
+      expect(result.minZoomReached).toBe(true);
+    });
+
+    it("returns correct minZoomReached when zoom is below minimum", () => {
+      const state = createMockReactFlowState({
+        transform: [0, 0, 0.05], // zoom below minZoom
+        minZoom: 0.1,
+      });
+
+      const result = reactFlowSelector(state);
+      expect(result.minZoomReached).toBe(true);
+    });
+
+    it("returns correct minZoomReached when zoom is above minimum", () => {
+      const state = createMockReactFlowState({
+        transform: [0, 0, 0.5], // zoom above minZoom
+        minZoom: 0.1,
+      });
+
+      const result = reactFlowSelector(state);
+      expect(result.minZoomReached).toBe(false);
+    });
+
+    it("returns correct maxZoomReached when zoom is at maximum", () => {
+      const state = createMockReactFlowState({
+        transform: [0, 0, 5], // zoom at maxZoom
+        maxZoom: 5,
+      });
+
+      const result = reactFlowSelector(state);
+      expect(result.maxZoomReached).toBe(true);
+    });
+
+    it("returns correct maxZoomReached when zoom is above maximum", () => {
+      const state = createMockReactFlowState({
+        transform: [0, 0, 10], // zoom above maxZoom
+        maxZoom: 5,
+      });
+
+      const result = reactFlowSelector(state);
+      expect(result.maxZoomReached).toBe(true);
+    });
+
+    it("returns correct maxZoomReached when zoom is below maximum", () => {
+      const state = createMockReactFlowState({
+        transform: [0, 0, 2], // zoom below maxZoom
+        maxZoom: 5,
+      });
+
+      const result = reactFlowSelector(state);
+      expect(result.maxZoomReached).toBe(false);
+    });
+
+    it("returns correct zoom level from transform", () => {
+      const state = createMockReactFlowState({
+        transform: [100, 200, 1.5], // x, y, zoom
+      });
+
+      const result = reactFlowSelector(state);
+      expect(result.zoom).toBe(1.5);
+    });
+
+    it("handles edge case where zoom equals both min and max", () => {
+      const state = createMockReactFlowState({
+        transform: [0, 0, 1],
+        minZoom: 1,
+        maxZoom: 1,
+      });
+
+      const result = reactFlowSelector(state);
+      expect(result.minZoomReached).toBe(true);
+      expect(result.maxZoomReached).toBe(true);
+      expect(result.zoom).toBe(1);
+    });
+
+    it("returns complete selector object with all properties", () => {
+      const state = createMockReactFlowState({
+        nodesDraggable: true,
+        nodesConnectable: false,
+        elementsSelectable: true,
+        transform: [0, 0, 2],
+        minZoom: 0.5,
+        maxZoom: 4,
+      });
+
+      const result = reactFlowSelector(state);
+
+      expect(result).toEqual({
+        isInteractive: true,
+        minZoomReached: false,
+        maxZoomReached: false,
+        zoom: 2,
+      });
+    });
+  });
+});
diff --git a/src/frontend/src/components/core/canvasControlsComponent/index.tsx b/src/frontend/src/components/core/canvasControlsComponent/index.tsx
deleted file mode 100644
index e4129a994..000000000
--- a/src/frontend/src/components/core/canvasControlsComponent/index.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-import {
-  ControlButton,
-  Panel,
-  type ReactFlowState,
-  useReactFlow,
-  useStore,
-  useStoreApi,
-} from "@xyflow/react";
-import { cloneDeep } from "lodash";
-import { useCallback, useEffect } from "react";
-import { useShallow } from "zustand/react/shallow";
-import { shallow } from "zustand/shallow";
-import IconComponent from "@/components/common/genericIconComponent";
-import ShadTooltip from "@/components/common/shadTooltipComponent";
-import useSaveFlow from "@/hooks/flows/use-save-flow";
-import useFlowStore from "@/stores/flowStore";
-import useFlowsManagerStore from "@/stores/flowsManagerStore";
-import { cn } from "@/utils/utils";
-
-type CustomControlButtonProps = {
-  iconName: string;
-  tooltipText: string;
-  onClick: () => void;
-  disabled?: boolean;
-  backgroundClasses?: string;
-  iconClasses?: string;
-  testId?: string;
-};
-
-export const CustomControlButton = ({
-  iconName,
-  tooltipText,
-  onClick,
-  disabled,
-  backgroundClasses,
-  iconClasses,
-  testId,
-}: CustomControlButtonProps): JSX.Element => {
-  return (
-    <ControlButton
-      data-testid={testId}
-      className="group !h-8 !w-8 rounded !p-0"
-      onClick={onClick}
-      disabled={disabled}
-      title={testId?.replace(/_/g, " ")}
-    >
-      <ShadTooltip content={tooltipText} side="right">
-        <div className={cn("rounded p-2.5", backgroundClasses)}>
-          <IconComponent
-            name={iconName}
-            aria-hidden="true"
-            className={cn(
-              "scale-150 text-muted-foreground group-hover:text-primary",
-              iconClasses,
-            )}
-          />
-        </div>
-      </ShadTooltip>
-    </ControlButton>
-  );
-};
-
-const selector = (s: ReactFlowState) => ({
-  isInteractive: s.nodesDraggable || s.nodesConnectable || s.elementsSelectable,
-  minZoomReached: s.transform[2] <= s.minZoom,
-  maxZoomReached: s.transform[2] >= s.maxZoom,
-});
-
-const CanvasControls = ({ children }) => {
-  const store = useStoreApi();
-  const { fitView, zoomIn, zoomOut } = useReactFlow();
-  const { isInteractive, minZoomReached, maxZoomReached } = useStore(
-    selector,
-    shallow,
-  );
-  const saveFlow = useSaveFlow();
-  const isLocked = useFlowStore(
-    useShallow((state) => state.currentFlow?.locked),
-  );
-  const setCurrentFlow = useFlowStore((state) => state.setCurrentFlow);
-  const autoSaving = useFlowsManagerStore((state) => state.autoSaving);
-  const setHelperLineEnabled = useFlowStore(
-    (state) => state.setHelperLineEnabled,
-  );
-  const helperLineEnabled = useFlowStore((state) => state.helperLineEnabled);
-
-  useEffect(() => {
-    store.setState({
-      nodesDraggable: !isLocked,
-      nodesConnectable: !isLocked,
-      elementsSelectable: !isLocked,
-    });
-  }, [isLocked]);
-
-  const handleSaveFlow = useCallback(() => {
-    const currentFlow = useFlowStore.getState().currentFlow;
-    if (!currentFlow) return;
-    const newFlow = cloneDeep(currentFlow);
-    newFlow.locked = isInteractive;
-    if (autoSaving) {
-      saveFlow(newFlow);
-    } else {
-      setCurrentFlow(newFlow);
-    }
-  }, [isInteractive, autoSaving, saveFlow, setCurrentFlow]);
-
-  const onToggleInteractivity = useCallback(() => {
-    store.setState({
-      nodesDraggable: !isInteractive,
-      nodesConnectable: !isInteractive,
-      elementsSelectable: !isInteractive,
-    });
-    handleSaveFlow();
-  }, [isInteractive, store, handleSaveFlow]);
-
-  const onToggleHelperLines = useCallback(() => {
-    setHelperLineEnabled(!helperLineEnabled);
-  }, [setHelperLineEnabled, helperLineEnabled]);
-
-  return (
-    <Panel
-      data-testid="canvas_controls"
-      className="react-flow__controls !left-auto !m-2 flex !flex-col gap-1.5 rounded-md border border-border bg-background fill-foreground stroke-foreground p-0.5 text-primary [&>button]:border-0 [&>button]:bg-background hover:[&>button]:bg-accent"
-      position="bottom-left"
-    >
-      {/* Zoom In */}
-      <CustomControlButton
-        iconName="ZoomIn"
-        tooltipText="Zoom In"
-        onClick={zoomIn}
-        disabled={maxZoomReached}
-        testId="zoom_in"
-      />
-      {/* Zoom Out */}
-      <CustomControlButton
-        iconName="ZoomOut"
-        tooltipText="Zoom Out"
-        onClick={zoomOut}
-        disabled={minZoomReached}
-        testId="zoom_out"
-      />
-      {/* Zoom To Fit */}
-      <CustomControlButton
-        iconName="maximize"
-        tooltipText="Fit To Zoom"
-        onClick={fitView}
-        testId="fit_view"
-      />
-      {children}
-      {/* Lock/Unlock */}
-      <CustomControlButton
-        iconName={isInteractive ? "LockOpen" : "Lock"}
-        tooltipText={isInteractive ? "Lock" : "Unlock"}
-        onClick={onToggleInteractivity}
-        backgroundClasses={isInteractive ? "" : "bg-destructive"}
-        iconClasses={
-          isInteractive ? "" : "text-primary-foreground dark:text-primary"
-        }
-        testId="lock_unlock"
-      />
-      {/* Display Helper Lines */}
-      <CustomControlButton
-        iconName={helperLineEnabled ? "FoldHorizontal" : "UnfoldHorizontal"}
-        tooltipText={
-          helperLineEnabled ? "Hide Helper Lines" : "Show Helper Lines"
-        }
-        onClick={onToggleHelperLines}
-        backgroundClasses={cn(helperLineEnabled && "bg-muted")}
-        iconClasses={cn(helperLineEnabled && "text-muted-foreground")}
-        testId="helper_lines"
-      />
-    </Panel>
-  );
-};
-
-export default CanvasControls;
diff --git a/src/frontend/src/components/core/canvasControlsComponent/utils/canvasUtils.ts b/src/frontend/src/components/core/canvasControlsComponent/utils/canvasUtils.ts
new file mode 100644
index 000000000..7fc464915
--- /dev/null
+++ b/src/frontend/src/components/core/canvasControlsComponent/utils/canvasUtils.ts
@@ -0,0 +1,17 @@
+import { ReactFlowState } from "@xyflow/react";
+import { getOS } from "@/utils/utils";
+
+export const getModifierKey = (): string => {
+  const os = getOS();
+  return os === "macos" ? "⌘" : "Ctrl";
+};
+
+export const formatZoomPercentage = (zoom: number): string =>
+  `${Math.round(zoom * 100)}%`;
+
+export const reactFlowSelector = (s: ReactFlowState) => ({
+  isInteractive: s.nodesDraggable || s.nodesConnectable || s.elementsSelectable,
+  minZoomReached: s.transform[2] <= s.minZoom,
+  maxZoomReached: s.transform[2] >= s.maxZoom,
+  zoom: s.transform[2],
+});
diff --git a/src/frontend/src/components/core/editFlowSettingsComponent/__tests__/EditFlowSettings.spec.tsx b/src/frontend/src/components/core/editFlowSettingsComponent/__tests__/EditFlowSettings.spec.tsx
new file mode 100644
index 000000000..56010b8ac
--- /dev/null
+++ b/src/frontend/src/components/core/editFlowSettingsComponent/__tests__/EditFlowSettings.spec.tsx
@@ -0,0 +1,99 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import EditFlowSettings from "../index";
+
+jest.mock("@/components/ui/input", () => ({
+  Input: ({ ...props }) => <input {...props} />,
+}));
+jest.mock("@/components/ui/textarea", () => ({
+  Textarea: ({ ...props }) => <textarea {...props} />,
+}));
+jest.mock("@/components/ui/switch", () => ({
+  Switch: ({ checked, onCheckedChange, ...rest }) => (
+    <input
+      role="switch"
+      aria-checked={!!checked}
+      type="checkbox"
+      checked={!!checked}
+      onChange={(e) => onCheckedChange?.(e.target.checked)}
+      {...rest}
+    />
+  ),
+}));
+jest.mock("@/components/common/genericIconComponent", () => ({
+  __esModule: true,
+  default: () => <span />,
+}));
+// Mock Radix Form to avoid context requirement
+jest.mock("@radix-ui/react-form", () => ({
+  __esModule: true,
+  Field: ({ children }) => <div>{children}</div>,
+  Label: ({ children }) => <label>{children}</label>,
+  Control: ({ children }) => <>{children}</>,
+  Message: ({ children }) => <div>{children}</div>,
+  Root: ({ children }) => <form>{children}</form>,
+}));
+
+// Prevent importing utils that pull darkStore via side-effects
+jest.mock("@/utils/utils", () => ({
+  __esModule: true,
+  cn: (...args) => args.filter(Boolean).join(" "),
+}));
+
+describe("EditFlowSettings", () => {
+  it("validates name and shows messages", () => {
+    const setName = jest.fn();
+    render(
+      <EditFlowSettings
+        name=""
+        description=""
+        invalidNameList={["Taken"]}
+        setName={setName}
+        setDescription={jest.fn()}
+      />,
+    );
+
+    const nameInput = screen.getByTestId("input-flow-name");
+    fireEvent.change(nameInput, { target: { value: "T" } });
+    expect(setName).toHaveBeenCalledWith("T");
+
+    fireEvent.change(nameInput, { target: { value: "" } });
+    expect(screen.getByText(/Please enter a name/)).toBeInTheDocument();
+
+    fireEvent.change(nameInput, { target: { value: "Taken" } });
+    expect(screen.getAllByText(/already exists/).length).toBeGreaterThan(0);
+  });
+
+  it("submits with Enter in description without Shift", () => {
+    const submitForm = jest.fn();
+    render(
+      <EditFlowSettings
+        name="Flow"
+        description="Desc"
+        submitForm={submitForm}
+        setName={jest.fn()}
+        setDescription={jest.fn()}
+      />,
+    );
+
+    const desc = screen.getByTestId("input-flow-description");
+    fireEvent.keyDown(desc, { key: "Enter", shiftKey: false });
+    expect(submitForm).toHaveBeenCalled();
+  });
+
+  it("toggles lock switch", () => {
+    const setLocked = jest.fn();
+    render(
+      <EditFlowSettings
+        name="Flow"
+        description="Desc"
+        locked={false}
+        setLocked={setLocked}
+        setName={jest.fn()}
+        setDescription={jest.fn()}
+      />,
+    );
+    const sw = screen.getByTestId("lock-flow-switch");
+    fireEvent.click(sw);
+    expect(setLocked).toHaveBeenCalledWith(true);
+  });
+});
diff --git a/src/frontend/src/components/core/editFlowSettingsComponent/index.tsx b/src/frontend/src/components/core/editFlowSettingsComponent/index.tsx
index 13a386038..a495405b0 100644
--- a/src/frontend/src/components/core/editFlowSettingsComponent/index.tsx
+++ b/src/frontend/src/components/core/editFlowSettingsComponent/index.tsx
@@ -1,13 +1,19 @@
 import * as Form from "@radix-ui/react-form";
 import type React from "react";
 import { useState } from "react";
+import ForwardedIconComponent from "@/components/common/genericIconComponent";
+import { Switch } from "@/components/ui/switch";
 import type { InputProps } from "../../../types/components";
 import { cn } from "../../../utils/utils";
 import { Input } from "../../ui/input";
 import { Textarea } from "../../ui/textarea";
 
 export const EditFlowSettings: React.FC<
-  InputProps & { submitForm?: () => void }
+  InputProps & {
+    submitForm?: () => void;
+    locked?: boolean;
+    setLocked?: (v: boolean) => void;
+  }
 > = ({
   name,
   invalidNameList = [],
@@ -18,7 +24,13 @@ export const EditFlowSettings: React.FC<
   setName,
   setDescription,
   submitForm,
-}: InputProps & { submitForm?: () => void }): JSX.Element => {
+  locked = false,
+  setLocked,
+}: InputProps & {
+  submitForm?: () => void;
+  locked?: boolean;
+  setLocked?: (v: boolean) => void;
+}): JSX.Element => {
   const [isMaxLength, setIsMaxLength] = useState(false);
   const [isMaxDescriptionLength, setIsMaxDescriptionLength] = useState(false);
   const [isMinLength, setIsMinLength] = useState(false);
@@ -110,6 +122,7 @@ export const EditFlowSettings: React.FC<
               onDoubleClickCapture={handleFocus}
               data-testid="input-flow-name"
               autoFocus
+              disabled={locked}
             />
           </Form.Control>
         ) : (
@@ -128,7 +141,7 @@ export const EditFlowSettings: React.FC<
         </Form.Message>
       </Form.Field>
       <Form.Field name="description">
-        <div className="edit-flow-arrangement mt-3">
+        <div className="edit-flow-arrangement mt-2">
           <Form.Label className="text-mmd font-medium">
             Description{setDescription ? "" : ":"}
           </Form.Label>
@@ -150,6 +163,7 @@ export const EditFlowSettings: React.FC<
               maxLength={descriptionMaxLength}
               onDoubleClickCapture={handleFocus}
               onKeyDown={handleDescriptionKeyDown}
+              disabled={locked}
             />
           </Form.Control>
         ) : (
@@ -165,6 +179,19 @@ export const EditFlowSettings: React.FC<
         <Form.Message match="valueMissing" className="field-invalid">
           Please enter a description
         </Form.Message>
+        <div className="flex items-center gap-2 mt-3">
+          <ForwardedIconComponent
+            name={locked ? "Lock" : "Unlock"}
+            className="text-muted-foreground !w-5 !h-5"
+          />
+          <Form.Label className="text-mmd font-medium">Lock Flow</Form.Label>
+          <Switch
+            checked={!!locked}
+            onCheckedChange={(v) => setLocked?.(v)}
+            className="data-[state=checked]:bg-primary ml-auto"
+            data-testid="lock-flow-switch"
+          />
+        </div>
       </Form.Field>
     </>
   );
diff --git a/src/frontend/src/components/core/flowSettingsComponent/__tests__/FlowSettingsComponent.spec.tsx b/src/frontend/src/components/core/flowSettingsComponent/__tests__/FlowSettingsComponent.spec.tsx
new file mode 100644
index 000000000..86726e206
--- /dev/null
+++ b/src/frontend/src/components/core/flowSettingsComponent/__tests__/FlowSettingsComponent.spec.tsx
@@ -0,0 +1,174 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import React from "react";
+import FlowSettingsComponent from "../index";
+
+jest.mock("@/components/ui/button", () => ({
+  Button: ({ children, loading, ...rest }) => (
+    <button {...rest}>{children}</button>
+  ),
+}));
+
+// Simplify Radix Form to a native form that respects onSubmit
+jest.mock("@radix-ui/react-form", () => ({
+  __esModule: true,
+  Root: React.forwardRef<HTMLFormElement, any>(
+    ({ children, onSubmit }, ref) => (
+      <form onSubmit={onSubmit} ref={ref}>
+        {children}
+      </form>
+    ),
+  ),
+  Submit: ({ asChild, children }) => {
+    if (asChild && React.isValidElement(children)) {
+      return React.cloneElement(children as any, { type: "submit" });
+    }
+    return <button type="submit">Submit</button>;
+  },
+}));
+
+const mockSave = jest.fn();
+jest.mock("@/hooks/flows/use-save-flow", () => ({
+  __esModule: true,
+  default: () => mockSave,
+}));
+
+let mockSetSuccessData = jest.fn();
+jest.mock("@/stores/alertStore", () => ({
+  __esModule: true,
+  default: (sel) => sel({ setSuccessData: mockSetSuccessData }),
+}));
+
+let mockSetCurrentFlow = jest.fn();
+jest.mock("@/stores/flowStore", () => ({
+  __esModule: true,
+  default: (sel) =>
+    sel({
+      currentFlow: {
+        id: "1",
+        name: "Flow",
+        description: "Desc",
+        locked: false,
+      },
+      setCurrentFlow: mockSetCurrentFlow,
+    }),
+}));
+
+let mockAutoSaving = false;
+let mockFlows: Array<{ name: string }> = [];
+jest.mock("@/stores/flowsManagerStore", () => ({
+  __esModule: true,
+  default: (sel) => sel({ autoSaving: mockAutoSaving, flows: mockFlows }),
+}));
+
+// Mock EditFlowSettings to expose simple controls that call the provided setters
+jest.mock("@/components/core/editFlowSettingsComponent", () => ({
+  __esModule: true,
+  default: ({
+    setName,
+    setDescription,
+    setLocked,
+  }: {
+    setName?: (v: string) => void;
+    setDescription?: (v: string) => void;
+    setLocked?: (v: boolean) => void;
+  }) => (
+    <div>
+      <button data-testid="set-name-new" onClick={() => setName?.("New Name")}>
+        set name
+      </button>
+      <button data-testid="set-name-taken" onClick={() => setName?.("Taken")}>
+        set taken
+      </button>
+      <button
+        data-testid="set-desc-new"
+        onClick={() => setDescription?.("New Desc")}
+      >
+        set desc
+      </button>
+      <button data-testid="toggle-lock" onClick={() => setLocked?.(true)}>
+        toggle lock
+      </button>
+    </div>
+  ),
+}));
+
+describe("FlowSettingsComponent", () => {
+  const baseFlow = {
+    id: "1",
+    name: "Flow",
+    description: "Desc",
+    locked: false,
+  } as any;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockAutoSaving = false;
+    mockFlows = [{ name: "Flow" }, { name: "Other" }];
+    mockSetSuccessData = jest.fn();
+    mockSetCurrentFlow = jest.fn();
+  });
+
+  it("renders and disables save when no changes", () => {
+    render(<FlowSettingsComponent flowData={baseFlow} open close={() => {}} />);
+    const saveBtn = screen.getByTestId("save-flow-settings");
+    expect(saveBtn).toBeDisabled();
+  });
+
+  it("enables save when name changes and autoSaving true triggers saveFlow and success", async () => {
+    mockAutoSaving = true;
+    mockSave.mockResolvedValueOnce(undefined);
+    const onClose = jest.fn();
+
+    render(<FlowSettingsComponent flowData={baseFlow} open close={onClose} />);
+
+    fireEvent.click(screen.getByTestId("set-name-new"));
+    const saveBtn = screen.getByTestId("save-flow-settings");
+    expect(saveBtn).not.toBeDisabled();
+
+    fireEvent.click(saveBtn);
+
+    // Wait microtask queue to resolve promise chain
+    await Promise.resolve();
+
+    expect(mockSave).toHaveBeenCalledWith(
+      expect.objectContaining({ name: "New Name" }),
+    );
+    expect(mockSetSuccessData).toHaveBeenCalledWith({
+      title: "Changes saved successfully",
+    });
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it("non-autoSaving path sets current flow and closes", () => {
+    mockAutoSaving = false;
+    const onClose = jest.fn();
+
+    render(<FlowSettingsComponent flowData={baseFlow} open close={onClose} />);
+
+    fireEvent.click(screen.getByTestId("set-desc-new"));
+    const saveBtn = screen.getByTestId("save-flow-settings");
+    expect(saveBtn).not.toBeDisabled();
+    fireEvent.click(saveBtn);
+
+    expect(mockSetCurrentFlow).toHaveBeenCalledWith(
+      expect.objectContaining({ description: "New Desc" }),
+    );
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it("prevents saving when name is taken", () => {
+    mockFlows = [{ name: "Taken" }, { name: "Flow" }];
+
+    render(<FlowSettingsComponent flowData={baseFlow} open close={() => {}} />);
+
+    fireEvent.click(screen.getByTestId("set-name-taken"));
+    expect(screen.getByTestId("save-flow-settings")).toBeDisabled();
+  });
+
+  it("clicking cancel calls close", () => {
+    const onClose = jest.fn();
+    render(<FlowSettingsComponent flowData={baseFlow} open close={onClose} />);
+    fireEvent.click(screen.getByTestId("cancel-flow-settings"));
+    expect(onClose).toHaveBeenCalled();
+  });
+});
diff --git a/src/frontend/src/components/core/flowSettingsComponent/index.tsx b/src/frontend/src/components/core/flowSettingsComponent/index.tsx
index 8c3975ed8..24526bc5f 100644
--- a/src/frontend/src/components/core/flowSettingsComponent/index.tsx
+++ b/src/frontend/src/components/core/flowSettingsComponent/index.tsx
@@ -9,15 +9,54 @@ import useFlowsManagerStore from "@/stores/flowsManagerStore";
 import type { FlowType } from "@/types/flow";
 import EditFlowSettings from "../editFlowSettingsComponent";
 
-export default function FlowSettingsComponent({
-  flowData,
-  close,
-  open,
-}: {
+type FlowSettingsComponentProps = {
   flowData?: FlowType;
   close: () => void;
   open: boolean;
-}): JSX.Element {
+};
+
+const updateFlowWithFormValues = (
+  baseFlow: FlowType,
+  newName: string,
+  newDescription: string,
+  newLocked: boolean,
+): FlowType => {
+  const newFlow = cloneDeep(baseFlow);
+  newFlow.name = newName;
+  newFlow.description = newDescription;
+  newFlow.locked = newLocked;
+  return newFlow;
+};
+
+const buildInvalidNameList = (
+  allFlows: FlowType[] | undefined,
+  currentFlowName: string | undefined,
+): string[] => {
+  if (!allFlows) return [];
+  const names = allFlows.map((f) => f?.name ?? "");
+  return names.filter((n) => n !== (currentFlowName ?? ""));
+};
+
+const isSaveDisabled = (
+  flow: FlowType | undefined,
+  invalidNameList: string[],
+  name: string,
+  description: string,
+  locked: boolean,
+): boolean => {
+  if (!flow) return true;
+  const isNameChangedAndValid =
+    !invalidNameList.includes(name) && flow.name !== name;
+  const isDescriptionChanged = flow.description !== description;
+  const isLockedChanged = flow.locked !== locked;
+  return !(isNameChangedAndValid || isDescriptionChanged || isLockedChanged);
+};
+
+const FlowSettingsComponent = ({
+  flowData,
+  close,
+  open,
+}: FlowSettingsComponentProps): JSX.Element => {
   const saveFlow = useSaveFlow();
   const currentFlow = useFlowStore((state) =>
     flowData ? undefined : state.currentFlow,
@@ -28,6 +67,7 @@ export default function FlowSettingsComponent({
   const flow = flowData ?? currentFlow;
   const [name, setName] = useState(flow?.name ?? "");
   const [description, setDescription] = useState(flow?.description ?? "");
+  const [locked, setLocked] = useState<boolean>(flow?.locked ?? false);
   const [isSaving, setIsSaving] = useState(false);
   const [disableSave, setDisableSave] = useState(true);
   const autoSaving = useFlowsManagerStore((state) => state.autoSaving);
@@ -36,15 +76,14 @@ export default function FlowSettingsComponent({
   useEffect(() => {
     setName(flow?.name ?? "");
     setDescription(flow?.description ?? "");
+    setLocked(flow?.locked ?? false);
   }, [flow?.name, flow?.description, flow?.endpoint_name, open]);
 
   function handleSubmit(event?: React.FormEvent<HTMLFormElement>): void {
     if (event) event.preventDefault();
     setIsSaving(true);
     if (!flow) return;
-    const newFlow = cloneDeep(flow);
-    newFlow.name = name;
-    newFlow.description = description;
+    const newFlow = updateFlowWithFormValues(flow, name, description, locked);
 
     if (autoSaving) {
       saveFlow(newFlow)
@@ -70,25 +109,12 @@ export default function FlowSettingsComponent({
   const [nameLists, setNameList] = useState<string[]>([]);
 
   useEffect(() => {
-    if (flows) {
-      const tempNameList: string[] = [];
-      flows.forEach((flow: FlowType) => {
-        tempNameList.push(flow?.name ?? "");
-      });
-      setNameList(tempNameList.filter((name) => name !== (flow?.name ?? "")));
-    }
+    setNameList(buildInvalidNameList(flows, flow?.name));
   }, [flows]);
 
   useEffect(() => {
-    if (
-      (!nameLists.includes(name) && flow?.name !== name) ||
-      flow?.description !== description
-    ) {
-      setDisableSave(false);
-    } else {
-      setDisableSave(true);
-    }
-  }, [nameLists, flow, description, name]);
+    setDisableSave(isSaveDisabled(flow, nameLists, name, description, locked));
+  }, [nameLists, flow, description, name, locked]);
   return (
     <Form.Root onSubmit={handleSubmit} ref={formRef}>
       <div className="flex flex-col gap-4">
@@ -100,6 +126,8 @@ export default function FlowSettingsComponent({
             setName={setName}
             setDescription={setDescription}
             submitForm={submitForm}
+            locked={locked}
+            setLocked={setLocked}
           />
         </div>
         <div className="flex justify-end gap-2">
@@ -127,4 +155,6 @@ export default function FlowSettingsComponent({
       </div>
     </Form.Root>
   );
-}
+};
+
+export default FlowSettingsComponent;
diff --git a/src/frontend/src/components/core/logCanvasControlsComponent/__tests__/LogCanvasControls.spec.tsx b/src/frontend/src/components/core/logCanvasControlsComponent/__tests__/LogCanvasControls.spec.tsx
new file mode 100644
index 000000000..a1616d180
--- /dev/null
+++ b/src/frontend/src/components/core/logCanvasControlsComponent/__tests__/LogCanvasControls.spec.tsx
@@ -0,0 +1,25 @@
+import { render, screen } from "@testing-library/react";
+import LogCanvasControls from "../index";
+
+jest.mock("@/modals/flowLogsModal", () => ({
+  __esModule: true,
+  default: ({ children }) => <div data-testid="logs-modal">{children}</div>,
+}));
+jest.mock("@/components/common/genericIconComponent", () => ({
+  __esModule: true,
+  default: () => <span data-testid="icon" />,
+}));
+jest.mock("@xyflow/react", () => ({
+  Panel: ({ children, ...rest }) => <div {...rest}>{children}</div>,
+}));
+jest.mock("@/components/ui/button", () => ({
+  Button: ({ children, ...rest }) => <button {...rest}>{children}</button>,
+}));
+
+describe("LogCanvasControls", () => {
+  it("renders panel and button", () => {
+    render(<LogCanvasControls />);
+    expect(screen.getByTestId("canvas_controls")).toBeInTheDocument();
+    expect(screen.getByText("Logs")).toBeInTheDocument();
+  });
+});
diff --git a/src/frontend/src/components/core/logCanvasControlsComponent/index.tsx b/src/frontend/src/components/core/logCanvasControlsComponent/index.tsx
index 2aca124ed..2bd7fe569 100644
--- a/src/frontend/src/components/core/logCanvasControlsComponent/index.tsx
+++ b/src/frontend/src/components/core/logCanvasControlsComponent/index.tsx
@@ -7,8 +7,8 @@ const LogCanvasControls = () => {
   return (
     <Panel
       data-testid="canvas_controls"
-      className="react-flow__controls !m-2 rounded-md"
-      position="bottom-right"
+      className="react-flow__controls !m-2 rounded-md !left-auto "
+      position="bottom-left"
     >
       <FlowLogsModal>
         <Button
diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts
index a297e194d..3900df45f 100644
--- a/src/frontend/src/constants/constants.ts
+++ b/src/frontend/src/constants/constants.ts
@@ -1104,5 +1104,7 @@ export const TWITTER_URL = "https://x.com/langflow_ai";
 export const DOCS_URL = "https://docs.langflow.org";
 export const DATASTAX_DOCS_URL =
   "https://docs.datastax.com/en/langflow/index.html";
+export const DESKTOP_URL = "https://www.langflow.org/desktop";
+export const BUG_REPORT_URL = "https://github.com/langflow-ai/langflow/issues";
 
 export const UUID_PARSING_ERROR = "uuid_parsing";
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/MemoizedComponents.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/MemoizedComponents.tsx
index 44dd58354..8157d7ce9 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/MemoizedComponents.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/MemoizedComponents.tsx
@@ -1,10 +1,12 @@
 import { Background, Panel } from "@xyflow/react";
 import { memo } from "react";
-import ForwardedIconComponent from "@/components/common/genericIconComponent";
-import CanvasControls, {
-  CustomControlButton,
-} from "@/components/core/canvasControlsComponent";
+import {
+  default as ForwardedIconComponent,
+  default as IconComponent,
+} from "@/components/common/genericIconComponent";
+import CanvasControls from "@/components/core/canvasControlsComponent/CanvasControls";
 import LogCanvasControls from "@/components/core/logCanvasControlsComponent";
+import { Button } from "@/components/ui/button";
 import { SidebarTrigger } from "@/components/ui/sidebar";
 import { cn } from "@/utils/utils";
 
@@ -29,10 +31,14 @@ export const MemoizedCanvasControls = memo(
     shadowBoxHeight,
   }: MemoizedCanvasControlsProps) => (
     <CanvasControls>
-      <CustomControlButton
-        iconName="sticky-note"
-        tooltipText="Add Note"
-        onClick={() => {
+      <Button
+        variant="ghost"
+        size="icon"
+        data-testid="add_note"
+        className="group flex items-center justify-center px-2 rounded-none"
+        title="Add sticky note"
+        onClick={(e) => {
+          e.stopPropagation();
           setIsAddingNote(true);
           const shadowBox = document.getElementById("shadow-box");
           if (shadowBox) {
@@ -41,8 +47,12 @@ export const MemoizedCanvasControls = memo(
             shadowBox.style.top = `${position.y - shadowBoxHeight / 2}px`;
           }
         }}
-        testId="add_note"
-      />
+      >
+        <IconComponent
+          name="sticky-note"
+          className="!h-5 !w-5 text-muted-foreground group-hover:text-primary"
+        />
+      </Button>
     </CanvasControls>
   ),
 );
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/__tests__/MemoizedComponents.spec.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/__tests__/MemoizedComponents.spec.tsx
new file mode 100644
index 000000000..84c7a035e
--- /dev/null
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/__tests__/MemoizedComponents.spec.tsx
@@ -0,0 +1,69 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import {
+  MemoizedCanvasControls,
+  MemoizedLogCanvasControls,
+  MemoizedSidebarTrigger,
+} from "../MemoizedComponents";
+
+jest.mock("@/components/core/canvasControlsComponent/CanvasControls", () => ({
+  __esModule: true,
+  default: ({ children }) => (
+    <div data-testid="canvas-controls">{children}</div>
+  ),
+}));
+jest.mock("@/components/common/genericIconComponent", () => ({
+  __esModule: true,
+  default: ({ name }) => <span data-testid="icon">{name}</span>,
+}));
+jest.mock("@/components/ui/button", () => ({
+  Button: ({ children, ...rest }) => <button {...rest}>{children}</button>,
+}));
+jest.mock("@xyflow/react", () => ({
+  Panel: ({ children, ...rest }) => (
+    <div data-testid="panel" {...rest}>
+      {children}
+    </div>
+  ),
+}));
+jest.mock("@/components/core/logCanvasControlsComponent", () => ({
+  __esModule: true,
+  default: () => <div data-testid="log-controls" />,
+}));
+jest.mock("@/components/ui/sidebar", () => ({
+  SidebarTrigger: ({ children, ...rest }) => (
+    <button {...rest}>{children}</button>
+  ),
+}));
+// Avoid utils importing darkStore
+jest.mock("@/utils/utils", () => ({
+  __esModule: true,
+  cn: (...args) => args.filter(Boolean).join(" "),
+}));
+
+describe("MemoizedComponents", () => {
+  it("clicking add note sets state and positions shadow box", () => {
+    const setIsAddingNote = jest.fn();
+    document.body.innerHTML = '<div id="shadow-box"></div>';
+    render(
+      <MemoizedCanvasControls
+        setIsAddingNote={setIsAddingNote}
+        position={{ x: 100, y: 200 }}
+        shadowBoxWidth={40}
+        shadowBoxHeight={20}
+      />,
+    );
+    fireEvent.click(screen.getByTestId("add_note"));
+    expect(setIsAddingNote).toHaveBeenCalledWith(true);
+    const box = document.getElementById("shadow-box")! as HTMLDivElement;
+    expect(box.style.display).toBe("block");
+    expect(box.style.left).toBe("80px");
+    expect(box.style.top).toBe("190px");
+  });
+
+  it("renders sidebar trigger and log controls", () => {
+    render(<MemoizedSidebarTrigger />);
+    expect(screen.getByText("Components")).toBeInTheDocument();
+    render(<MemoizedLogCanvasControls />);
+    expect(screen.getByTestId("log-controls")).toBeInTheDocument();
+  });
+});
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index a98cea16c..9003f9c3e 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -1,13 +1,13 @@
 import {
   type Connection,
   type Edge,
+  type NodeChange,
   type OnNodeDrag,
   type OnSelectionChangeParams,
   ReactFlow,
   reconnectEdge,
   type SelectionDragHandler,
 } from "@xyflow/react";
-import { AnimatePresence } from "framer-motion";
 import _, { cloneDeep } from "lodash";
 import {
   type KeyboardEvent,
@@ -34,7 +34,7 @@ import useAutoSaveFlow from "@/hooks/flows/use-autosave-flow";
 import useUploadFlow from "@/hooks/flows/use-upload-flow";
 import { useAddComponent } from "@/hooks/use-add-component";
 import { nodeColorsName } from "@/utils/styleUtils";
-import { cn, isSupportedNodeTypes } from "@/utils/utils";
+import { isSupportedNodeTypes } from "@/utils/utils";
 import GenericNode from "../../../../CustomNodes/GenericNode";
 import {
   INVALID_SELECTION_ERROR_ALERT,
diff --git a/src/frontend/tests/core/features/actionsMainPage-shard-1.spec.ts b/src/frontend/tests/core/features/actionsMainPage-shard-1.spec.ts
index 3ff6275f4..34c42b865 100644
--- a/src/frontend/tests/core/features/actionsMainPage-shard-1.spec.ts
+++ b/src/frontend/tests/core/features/actionsMainPage-shard-1.spec.ts
@@ -84,13 +84,15 @@ test(
       await page.getByTestId("side_nav_options_all-templates").click();
       await page.getByRole("heading", { name: "Basic Prompting" }).click();
 
-      await page.waitForSelector('[data-testid="fit_view"]', {
+      await page.waitForSelector('[data-testid="canvas_controls_dropdown"]', {
         timeout: 100000,
       });
 
+      await page.getByTestId("canvas_controls_dropdown").click();
       await page.getByTestId("fit_view").click();
       await page.getByTestId("zoom_out").click();
       await page.getByTestId("zoom_out").click();
+      await page.getByTestId("canvas_controls_dropdown").click();
 
       await page.getByText("Chat Input").first().click();
       await page.waitForSelector('[data-testid="more-options-modal"]', {
diff --git a/src/frontend/tests/core/features/auto-login-off.spec.ts b/src/frontend/tests/core/features/auto-login-off.spec.ts
index e6d61c615..ced24fb76 100644
--- a/src/frontend/tests/core/features/auto-login-off.spec.ts
+++ b/src/frontend/tests/core/features/auto-login-off.spec.ts
@@ -140,13 +140,17 @@ test(
     await page.getByTestId("side_nav_options_all-templates").click();
     await page.getByRole("heading", { name: "Basic Prompting" }).click();
 
-    await page.waitForSelector('[data-testid="fit_view"]', {
+    await page.waitForSelector('[data-testid="canvas_controls_dropdown"]', {
       timeout: 100000,
     });
 
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.getByTestId("fit_view").click();
     await page.getByTestId("zoom_out").click();
 
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await renameFlow(page, { flowName: randomFlowName });
 
     await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
@@ -215,13 +219,17 @@ test(
     await page.getByTestId("side_nav_options_all-templates").click();
     await page.getByRole("heading", { name: "Basic Prompting" }).click();
 
-    await page.waitForSelector('[data-testid="fit_view"]', {
+    await page.waitForSelector('[data-testid="canvas_controls_dropdown"]', {
       timeout: 100000,
     });
 
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.getByTestId("fit_view").click();
     await page.getByTestId("zoom_out").click();
 
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await renameFlow(page, { flowName: secondRandomFlowName });
 
     await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
diff --git a/src/frontend/tests/core/features/chatInputOutputUser-shard-0.spec.ts b/src/frontend/tests/core/features/chatInputOutputUser-shard-0.spec.ts
index 45efaf5a7..d431846b8 100644
--- a/src/frontend/tests/core/features/chatInputOutputUser-shard-0.spec.ts
+++ b/src/frontend/tests/core/features/chatInputOutputUser-shard-0.spec.ts
@@ -22,7 +22,7 @@ test(
 
     await page.getByTestId("side_nav_options_all-templates").click();
     await page.getByRole("heading", { name: "Basic Prompting" }).click();
-    await page.waitForSelector('[data-testid="fit_view"]', {
+    await page.waitForSelector('[data-testid="canvas_controls_dropdown"]', {
       timeout: 100000,
     });
 
diff --git a/src/frontend/tests/core/features/customComponentAdd.spec.ts b/src/frontend/tests/core/features/customComponentAdd.spec.ts
index a25fbd011..bb076547b 100644
--- a/src/frontend/tests/core/features/customComponentAdd.spec.ts
+++ b/src/frontend/tests/core/features/customComponentAdd.spec.ts
@@ -14,9 +14,12 @@ test(
 
     await page.getByTestId("blank-flow").click();
 
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.waitForSelector('[data-testid="zoom_out"]', {
       timeout: 3000,
     });
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("sidebar-custom-component-button").click();
 
diff --git a/src/frontend/tests/core/features/flow-lock.spec.ts b/src/frontend/tests/core/features/flow-lock.spec.ts
new file mode 100644
index 000000000..4f0c90227
--- /dev/null
+++ b/src/frontend/tests/core/features/flow-lock.spec.ts
@@ -0,0 +1,156 @@
+import { expect, test } from "@playwright/test";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
+
+test.describe("Flow Lock Feature", () => {
+  test(
+    "should lock and unlock a flow and verify UI changes",
+    { tag: ["@release", "@api"] },
+    async ({ page }) => {
+      await awaitBootstrapTest(page);
+
+      // Navigate to templates and select a flow to work with
+      await page.getByTestId("side_nav_options_all-templates").click();
+      await page.getByRole("heading", { name: "Basic Prompting" }).click();
+
+      // Wait for the flow to load
+      await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
+        timeout: 100000,
+      });
+
+      // Verify initially the flow is not locked (no lock icon should be visible)
+      const initialLockIcon = page.locator(
+        '[data-testid="menu_bar_display"] [data-testid="icon-Lock"]',
+      );
+      await expect(initialLockIcon).toHaveCount(0);
+
+      // Open flow settings by clicking on the flow name
+      await page.getByTestId("menu_bar_display").click();
+
+      // Wait for the settings modal to open
+      await page.waitForSelector('[data-testid="lock-flow-switch"]', {
+        timeout: 30000,
+      });
+
+      // Verify the lock switch is initially unchecked
+      const lockSwitch = page.getByTestId("lock-flow-switch");
+      await expect(lockSwitch).toBeVisible();
+      await expect(lockSwitch).toHaveAttribute("data-state", "unchecked");
+
+      // Verify that name and description inputs are enabled when not locked
+      const nameInput = page.getByTestId("input-flow-name");
+      const descriptionInput = page.getByTestId("input-flow-description");
+
+      await expect(nameInput).toBeEnabled();
+      await expect(descriptionInput).toBeEnabled();
+
+      await lockSwitch.click();
+      await page.waitForTimeout(1000);
+
+      const stateAfterClick = await lockSwitch.getAttribute("data-state");
+      if (stateAfterClick !== "checked") {
+        await lockSwitch.click();
+        await page.waitForTimeout(500);
+      }
+      await expect(lockSwitch).toHaveAttribute("data-state", "checked");
+
+      // Verify that inputs become disabled when locked
+      await expect(nameInput).toBeDisabled();
+      await expect(descriptionInput).toBeDisabled();
+
+      // Save the settings by clicking the save button
+      const saveButton = page.getByTestId("save-flow-settings");
+
+      if (await saveButton.isEnabled({ timeout: 3000 })) {
+        await saveButton.click();
+      }
+      await page.waitForTimeout(1000);
+
+      // Wait for the modal to close by waiting for the popover to be detached
+      await page.waitForSelector('[role="dialog"]', {
+        state: "detached",
+        timeout: 10000,
+      });
+
+      // Verify lock icon now appears in the flow header
+      const lockIconInHeader = page
+        .locator('[data-testid="menu_bar_display"]')
+        .locator('[data-testid="icon-Lock"]');
+      await expect(lockIconInHeader).toBeVisible();
+
+      // Try to open settings again to unlock
+      await page.getByTestId("menu_bar_display").click();
+
+      // Wait for the settings modal to open again
+      await page.waitForSelector('[data-testid="lock-flow-switch"]', {
+        timeout: 30000,
+      });
+
+      // Verify the switch is checked (locked state persisted)
+      await expect(lockSwitch).toHaveAttribute("data-state", "checked");
+
+      // Verify inputs are still disabled
+      await expect(nameInput).toBeDisabled();
+      await expect(descriptionInput).toBeDisabled();
+
+      // Unlock the flow
+      await lockSwitch.focus();
+      await lockSwitch.press("Space");
+
+      // Verify the switch is now unchecked
+      await expect(lockSwitch).toHaveAttribute("data-state", "unchecked");
+
+      // Verify that inputs become enabled again when unlocked
+      await expect(nameInput).toBeEnabled();
+      await expect(descriptionInput).toBeEnabled();
+
+      // Save the unlocked state by clicking the save button
+      await page.getByTestId("save-flow-settings").isEnabled({ timeout: 3000 });
+      await page.getByTestId("save-flow-settings").click();
+
+      // Wait for the modal to close by waiting for the popover to be detached
+      await page.waitForSelector('[role="dialog"]', {
+        state: "detached",
+        timeout: 10000,
+      });
+
+      // Verify lock icon is no longer visible in the flow header
+      await expect(lockIconInHeader).toHaveCount(0);
+    },
+  );
+
+  test(
+    "should show correct lock/unlock icon in settings based on state",
+    { tag: ["@release", "@api"] },
+    async ({ page }) => {
+      await awaitBootstrapTest(page);
+
+      // Navigate to templates and select a flow
+      await page.getByTestId("side_nav_options_all-templates").click();
+      await page.getByRole("heading", { name: "Basic Prompting" }).click();
+
+      // Wait for the flow to load
+      await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
+        timeout: 100000,
+      });
+
+      // Open flow settings
+      await page.getByTestId("menu_bar_display").click();
+      await page.waitForSelector('[data-testid="lock-flow-switch"]', {
+        timeout: 30000,
+      });
+
+      // Initially should show unlock icon (flow is unlocked)
+      const unlockIcon = page.locator('[data-testid="icon-Unlock"]');
+      await expect(unlockIcon).toBeVisible();
+
+      // Lock the flow
+      const lockSwitch = page.getByTestId("lock-flow-switch");
+      await lockSwitch.click();
+
+      // Should now show lock icon
+      const lockIcon = page.locator('[data-testid="icon-Lock"]');
+      await expect(lockIcon).toBeVisible();
+      await expect(unlockIcon).toHaveCount(0);
+    },
+  );
+});
diff --git a/src/frontend/tests/core/features/freeze-path.spec.ts b/src/frontend/tests/core/features/freeze-path.spec.ts
index fdcee3f40..f27a5a54a 100644
--- a/src/frontend/tests/core/features/freeze-path.spec.ts
+++ b/src/frontend/tests/core/features/freeze-path.spec.ts
@@ -44,7 +44,10 @@ test(
     await page.getByTestId("dropdown_str_model_name").click();
     await page.getByTestId("gpt-4o-1-option").click();
 
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.getByTestId("fit_view").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.waitForSelector('[data-testid="button_run_chat output"]', {
       timeout: 3000,
diff --git a/src/frontend/tests/core/features/globalVariables.spec.ts b/src/frontend/tests/core/features/globalVariables.spec.ts
index 66f685378..31b2728ef 100644
--- a/src/frontend/tests/core/features/globalVariables.spec.ts
+++ b/src/frontend/tests/core/features/globalVariables.spec.ts
@@ -1,5 +1,4 @@
 import { expect, test } from "@playwright/test";
-import { adjustScreenView } from "../../utils/adjust-screen-view";
 import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
 import { initialGPTsetup } from "../../utils/initialGPTsetup";
 
@@ -27,7 +26,10 @@ test(
         await page.getByTestId("add-component-button-openai").last().click();
       });
 
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.getByTestId("fit_view").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await initialGPTsetup(page, {
       skipAdjustScreenView: true,
diff --git a/src/frontend/tests/core/features/playground.spec.ts b/src/frontend/tests/core/features/playground.spec.ts
index 850da3ce2..bcfe26482 100644
--- a/src/frontend/tests/core/features/playground.spec.ts
+++ b/src/frontend/tests/core/features/playground.spec.ts
@@ -33,8 +33,10 @@ test(
         await page.getByTestId("add-component-button-chat-output").click();
       });
 
+    await page.getByTestId("canvas_controls_dropdown").click();
     await page.getByTestId("zoom_out").click();
     await page.getByTestId("zoom_out").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("sidebar-search-input").click();
     await page.getByTestId("sidebar-search-input").fill("chat input");
diff --git a/src/frontend/tests/core/features/saveComponents.spec.ts b/src/frontend/tests/core/features/saveComponents.spec.ts
index 5cd294e10..1065932b0 100644
--- a/src/frontend/tests/core/features/saveComponents.spec.ts
+++ b/src/frontend/tests/core/features/saveComponents.spec.ts
@@ -48,12 +48,14 @@ test.describe("save component tests", () => {
       if (elementCount > 0) {
         expect(true).toBeTruthy();
       }
-
+      await page.getByTestId("canvas_controls_dropdown").click();
       // Log button element
       await page.getByTestId("fit_view").click();
 
       await zoomOut(page, 2);
 
+      await page.getByTestId("canvas_controls_dropdown").click();
+
       await page.getByTestId("title-Agent Initializer").click({
         modifiers: ["Control"],
       });
diff --git a/src/frontend/tests/core/features/stop-building.spec.ts b/src/frontend/tests/core/features/stop-building.spec.ts
index f65b3fb34..ea6c1a497 100644
--- a/src/frontend/tests/core/features/stop-building.spec.ts
+++ b/src/frontend/tests/core/features/stop-building.spec.ts
@@ -26,8 +26,10 @@ test(
         targetPosition: { x: 0, y: 0 },
       });
 
+    await page.getByTestId("canvas_controls_dropdown").click();
     await zoomOut(page, 3);
 
+    await page.getByTestId("canvas_controls_dropdown").click();
     //second component
 
     await page.getByTestId("sidebar-search-input").click();
@@ -75,9 +77,12 @@ test(
     await updateOldComponents(page);
     await removeOldApiKeys(page);
 
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.getByTestId("fit_view").click();
 
     await zoomOut(page, 2);
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     //connection 1
     await page
@@ -101,7 +106,10 @@ test(
       .getByTestId("handle-chatoutput-noshownode-inputs-target")
       .click();
 
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.getByTestId("fit_view").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("textarea_str_input_value").first().fill(",");
 
@@ -142,8 +150,11 @@ class CustomComponent(Component):
   `;
 
     await page.getByTestId("sidebar-custom-component-button").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.getByTestId("fit_view").click();
     await page.getByTestId("zoom_out").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("title-Custom Component").first().click();
 
diff --git a/src/frontend/tests/core/features/tweaksTest.spec.ts b/src/frontend/tests/core/features/tweaksTest.spec.ts
index 795491f4f..300f86823 100644
--- a/src/frontend/tests/core/features/tweaksTest.spec.ts
+++ b/src/frontend/tests/core/features/tweaksTest.spec.ts
@@ -76,6 +76,7 @@ test("check if tweaks are updating when someothing on the flow changes", async (
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
+  await page.getByTestId("canvas_controls_dropdown").click();
 
   await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 100000,
@@ -85,6 +86,7 @@ test("check if tweaks are updating when someothing on the flow changes", async (
   await page.getByTestId("zoom_out").click();
   await page.getByTestId("zoom_out").click();
   await page.getByTestId("zoom_out").click();
+  await page.getByTestId("canvas_controls_dropdown").click();
   await page.getByTestId("popover-anchor-input-collection_name").click();
   await page
     .getByTestId("popover-anchor-input-collection_name")
diff --git a/src/frontend/tests/core/features/user-flow-state-cleanup.spec.ts b/src/frontend/tests/core/features/user-flow-state-cleanup.spec.ts
index 6195175f7..85aa50a6f 100644
--- a/src/frontend/tests/core/features/user-flow-state-cleanup.spec.ts
+++ b/src/frontend/tests/core/features/user-flow-state-cleanup.spec.ts
@@ -109,7 +109,9 @@ test(
       timeout: 3000,
     });
     await page.getByRole("heading", { name: "Basic Prompting" }).click();
+    await page.getByTestId("canvas_controls_dropdown").click();
     await page.waitForSelector('[data-testid="fit_view"]', { timeout: 30000 });
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await renameFlow(page, { flowName: userAFlowName });
 
diff --git a/src/frontend/tests/core/integrations/Custom Component Generator.spec.ts b/src/frontend/tests/core/integrations/Custom Component Generator.spec.ts
index e1e0629df..ada94939a 100644
--- a/src/frontend/tests/core/integrations/Custom Component Generator.spec.ts	
+++ b/src/frontend/tests/core/integrations/Custom Component Generator.spec.ts	
@@ -24,10 +24,11 @@ withEventDeliveryModes(
 
     await page.getByTestId("side_nav_options_all-templates").click();
     await page.getByTestId("template-custom-component-generator").click();
-
+    await page.getByTestId("canvas_controls_dropdown").click();
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 100000,
     });
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.waitForSelector('[data-testid="dropdown_str_model_name"]', {
       timeout: 5000,
diff --git a/src/frontend/tests/core/integrations/Financial Report Parser.spec.ts b/src/frontend/tests/core/integrations/Financial Report Parser.spec.ts
index 24151725f..8071a206c 100644
--- a/src/frontend/tests/core/integrations/Financial Report Parser.spec.ts	
+++ b/src/frontend/tests/core/integrations/Financial Report Parser.spec.ts	
@@ -2,9 +2,7 @@ import { expect, test } from "@playwright/test";
 import * as dotenv from "dotenv";
 import path from "path";
 import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
-import { getAllResponseMessage } from "../../utils/get-all-response-message";
 import { initialGPTsetup } from "../../utils/initialGPTsetup";
-import { waitForOpenModalWithChatInput } from "../../utils/wait-for-open-modal";
 import { withEventDeliveryModes } from "../../utils/withEventDeliveryModes";
 
 withEventDeliveryModes(
@@ -27,10 +25,12 @@ withEventDeliveryModes(
     await page
       .getByRole("heading", { name: "Financial Report Parser" })
       .click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 100000,
     });
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await initialGPTsetup(page);
 
diff --git a/src/frontend/tests/core/integrations/Gmail Agent.spec.ts b/src/frontend/tests/core/integrations/Gmail Agent.spec.ts
index 1078f9c87..030fadc34 100644
--- a/src/frontend/tests/core/integrations/Gmail Agent.spec.ts	
+++ b/src/frontend/tests/core/integrations/Gmail Agent.spec.ts	
@@ -1,11 +1,8 @@
 import { expect, test } from "@playwright/test";
 import * as dotenv from "dotenv";
-import { readFileSync } from "fs";
 import path from "path";
 import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
-import { getAllResponseMessage } from "../../utils/get-all-response-message";
 import { initialGPTsetup } from "../../utils/initialGPTsetup";
-import { waitForOpenModalWithChatInput } from "../../utils/wait-for-open-modal";
 import { withEventDeliveryModes } from "../../utils/withEventDeliveryModes";
 
 withEventDeliveryModes(
@@ -31,10 +28,12 @@ withEventDeliveryModes(
 
     await page.getByTestId("side_nav_options_all-templates").click();
     await page.getByRole("heading", { name: "Gmail Agent" }).click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 100000,
     });
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await initialGPTsetup(page);
 
diff --git a/src/frontend/tests/core/integrations/Image Sentiment Analysis.spec.ts b/src/frontend/tests/core/integrations/Image Sentiment Analysis.spec.ts
index 60cc17b31..0a5a097e6 100644
--- a/src/frontend/tests/core/integrations/Image Sentiment Analysis.spec.ts	
+++ b/src/frontend/tests/core/integrations/Image Sentiment Analysis.spec.ts	
@@ -31,11 +31,14 @@ withEventDeliveryModes(
       .last()
       .click();
 
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 100000,
     });
 
     await page.getByTestId("fit_view").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await initialGPTsetup(page);
 
diff --git a/src/frontend/tests/core/integrations/Instagram Copywriter.spec.ts b/src/frontend/tests/core/integrations/Instagram Copywriter.spec.ts
index 25009d02a..34860f87e 100644
--- a/src/frontend/tests/core/integrations/Instagram Copywriter.spec.ts	
+++ b/src/frontend/tests/core/integrations/Instagram Copywriter.spec.ts	
@@ -29,10 +29,12 @@ test(
 
     await page.getByTestId("side_nav_options_all-templates").click();
     await page.getByRole("heading", { name: "Instagram Copywriter" }).click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 100000,
     });
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await initialGPTsetup(page);
 
diff --git a/src/frontend/tests/core/integrations/Market Research.spec.ts b/src/frontend/tests/core/integrations/Market Research.spec.ts
index 0747d30e7..4b7027b8b 100644
--- a/src/frontend/tests/core/integrations/Market Research.spec.ts	
+++ b/src/frontend/tests/core/integrations/Market Research.spec.ts	
@@ -29,10 +29,12 @@ withEventDeliveryModes(
 
     await page.getByTestId("side_nav_options_all-templates").click();
     await page.getByRole("heading", { name: "Market Research" }).click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 100000,
     });
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await initialGPTsetup(page);
     await page
diff --git a/src/frontend/tests/core/integrations/News Aggregator.spec.ts b/src/frontend/tests/core/integrations/News Aggregator.spec.ts
index c17d74ccc..8ddaafe3d 100644
--- a/src/frontend/tests/core/integrations/News Aggregator.spec.ts	
+++ b/src/frontend/tests/core/integrations/News Aggregator.spec.ts	
@@ -28,10 +28,12 @@ withEventDeliveryModes(
 
     await page.getByTestId("side_nav_options_all-templates").click();
     await page.getByRole("heading", { name: "News Aggregator" }).click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 100000,
     });
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await initialGPTsetup(page, {
       skipAdjustScreenView: true,
diff --git a/src/frontend/tests/core/integrations/Portfolio Website Code Generator.spec.ts b/src/frontend/tests/core/integrations/Portfolio Website Code Generator.spec.ts
index 4438227fb..d627ad92c 100644
--- a/src/frontend/tests/core/integrations/Portfolio Website Code Generator.spec.ts	
+++ b/src/frontend/tests/core/integrations/Portfolio Website Code Generator.spec.ts	
@@ -28,10 +28,12 @@ withEventDeliveryModes(
     await page
       .getByRole("heading", { name: "Portfolio Website Code Generator" })
       .click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 100000,
     });
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await initialGPTsetup(page, {
       skipAdjustScreenView: true,
diff --git a/src/frontend/tests/core/integrations/Price Deal Finder.spec.ts b/src/frontend/tests/core/integrations/Price Deal Finder.spec.ts
index 68f471629..441e21cb1 100644
--- a/src/frontend/tests/core/integrations/Price Deal Finder.spec.ts	
+++ b/src/frontend/tests/core/integrations/Price Deal Finder.spec.ts	
@@ -32,10 +32,12 @@ withEventDeliveryModes(
 
     await page.getByTestId("side_nav_options_all-templates").click();
     await page.getByRole("heading", { name: "Price Deal Finder" }).click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 100000,
     });
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await initialGPTsetup(page, {
       skipAdjustScreenView: true,
diff --git a/src/frontend/tests/core/integrations/Prompt Chaining.spec.ts b/src/frontend/tests/core/integrations/Prompt Chaining.spec.ts
index 31866a426..7ff8d1a6c 100644
--- a/src/frontend/tests/core/integrations/Prompt Chaining.spec.ts	
+++ b/src/frontend/tests/core/integrations/Prompt Chaining.spec.ts	
@@ -25,10 +25,12 @@ withEventDeliveryModes(
 
     await page.getByTestId("side_nav_options_all-templates").click();
     await page.getByRole("heading", { name: "Prompt Chaining" }).click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 100000,
     });
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await initialGPTsetup(page);
 
diff --git a/src/frontend/tests/core/integrations/Research Translation Loop.spec.ts b/src/frontend/tests/core/integrations/Research Translation Loop.spec.ts
index 4a88e3a39..c9c460efb 100644
--- a/src/frontend/tests/core/integrations/Research Translation Loop.spec.ts	
+++ b/src/frontend/tests/core/integrations/Research Translation Loop.spec.ts	
@@ -24,10 +24,12 @@ withEventDeliveryModes(
     await page
       .getByRole("heading", { name: "Research Translation Loop" })
       .click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 100000,
     });
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await initialGPTsetup(page, {
       skipAdjustScreenView: true,
diff --git a/src/frontend/tests/core/integrations/SEO Keyword Generator.spec.ts b/src/frontend/tests/core/integrations/SEO Keyword Generator.spec.ts
index 63ce2fc8a..5e2deba4e 100644
--- a/src/frontend/tests/core/integrations/SEO Keyword Generator.spec.ts	
+++ b/src/frontend/tests/core/integrations/SEO Keyword Generator.spec.ts	
@@ -25,10 +25,12 @@ withEventDeliveryModes(
 
     await page.getByTestId("side_nav_options_all-templates").click();
     await page.getByRole("heading", { name: "SEO Keyword Generator" }).click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 100000,
     });
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await initialGPTsetup(page);
 
diff --git a/src/frontend/tests/core/integrations/SaaS Pricing.spec.ts b/src/frontend/tests/core/integrations/SaaS Pricing.spec.ts
index fc47d6042..b7e3f3792 100644
--- a/src/frontend/tests/core/integrations/SaaS Pricing.spec.ts	
+++ b/src/frontend/tests/core/integrations/SaaS Pricing.spec.ts	
@@ -25,10 +25,12 @@ withEventDeliveryModes(
 
     await page.getByTestId("side_nav_options_all-templates").click();
     await page.getByRole("heading", { name: "SaaS Pricing" }).click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 100000,
     });
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await initialGPTsetup(page);
 
diff --git a/src/frontend/tests/core/integrations/Text Sentiment Analysis.spec.ts b/src/frontend/tests/core/integrations/Text Sentiment Analysis.spec.ts
index 65b22e800..6ff04c44b 100644
--- a/src/frontend/tests/core/integrations/Text Sentiment Analysis.spec.ts	
+++ b/src/frontend/tests/core/integrations/Text Sentiment Analysis.spec.ts	
@@ -59,6 +59,6 @@ withEventDeliveryModes(
       .isVisible();
 
     const textAnalysis = await page.locator(".markdown").last().textContent();
-    expect(textAnalysis?.length).toBeGreaterThan(100);
+    expect(textAnalysis?.length).toBeGreaterThan(50);
   },
 );
diff --git a/src/frontend/tests/core/integrations/Travel Planning Agent.spec.ts b/src/frontend/tests/core/integrations/Travel Planning Agent.spec.ts
index 07c458f01..5eb0624d7 100644
--- a/src/frontend/tests/core/integrations/Travel Planning Agent.spec.ts	
+++ b/src/frontend/tests/core/integrations/Travel Planning Agent.spec.ts	
@@ -31,10 +31,12 @@ withEventDeliveryModes(
       .getByRole("heading", { name: "Travel Planning Agents" })
       .last()
       .click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 100000,
     });
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await initialGPTsetup(page);
 
diff --git a/src/frontend/tests/core/integrations/Twitter Thread Generator.spec.ts b/src/frontend/tests/core/integrations/Twitter Thread Generator.spec.ts
index cc290e56a..66b33d991 100644
--- a/src/frontend/tests/core/integrations/Twitter Thread Generator.spec.ts	
+++ b/src/frontend/tests/core/integrations/Twitter Thread Generator.spec.ts	
@@ -27,10 +27,12 @@ withEventDeliveryModes(
     await page
       .getByRole("heading", { name: "Twitter Thread Generator" })
       .click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 100000,
     });
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await initialGPTsetup(page);
 
diff --git a/src/frontend/tests/core/integrations/Vector Store.spec.ts b/src/frontend/tests/core/integrations/Vector Store.spec.ts
index 6f41fbf40..d2c2065a0 100644
--- a/src/frontend/tests/core/integrations/Vector Store.spec.ts	
+++ b/src/frontend/tests/core/integrations/Vector Store.spec.ts	
@@ -28,11 +28,14 @@ withEventDeliveryModes(
       .getByRole("heading", { name: "Vector Store RAG" })
       .first()
       .click();
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.waitForSelector('[title="fit view"]', {
       timeout: 20000,
     });
 
     await page.getByTestId("fit_view").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await initialGPTsetup(page);
 
@@ -41,8 +44,11 @@ withEventDeliveryModes(
     });
 
     await page.waitForTimeout(500);
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.getByTestId("fit_view").click();
 
+    await page.getByTestId("canvas_controls_dropdown").click();
     // Astra DB tokens
     await page
       .getByTestId("popover-anchor-input-token")
diff --git a/src/frontend/tests/core/integrations/Youtube Analysis.spec.ts b/src/frontend/tests/core/integrations/Youtube Analysis.spec.ts
index 9d828d97b..7162b6146 100644
--- a/src/frontend/tests/core/integrations/Youtube Analysis.spec.ts	
+++ b/src/frontend/tests/core/integrations/Youtube Analysis.spec.ts	
@@ -28,10 +28,12 @@ withEventDeliveryModes(
 
     await page.getByTestId("side_nav_options_all-templates").click();
     await page.getByRole("heading", { name: "YouTube Analysis" }).click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 100000,
     });
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await initialGPTsetup(page);
 
diff --git a/src/frontend/tests/core/integrations/decisionFlow.spec.ts b/src/frontend/tests/core/integrations/decisionFlow.spec.ts
index 2b9f30c3f..2ebb4496e 100644
--- a/src/frontend/tests/core/integrations/decisionFlow.spec.ts
+++ b/src/frontend/tests/core/integrations/decisionFlow.spec.ts
@@ -32,9 +32,9 @@ test(
     await page.waitForSelector('[data-testid="input_outputChat Input"]', {
       timeout: 2000,
     });
-
+    await page.getByTestId("canvas_controls_dropdown").click();
     await zoomOut(page, 6);
-
+    await page.getByTestId("canvas_controls_dropdown").click();
     await page
       .getByTestId("input_outputChat Input")
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {
@@ -213,7 +213,11 @@ test(
       timeout: 2000,
     });
     //----------------------------------
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.getByTestId("fit_view").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     //---------------------------------- EDIT PROMPT
     await page.getByTestId("promptarea_prompt_template").first().click();
     await page
@@ -353,7 +357,11 @@ test(
     }
     await page.getByTestId("dropdown_str_model_name").click();
     await page.getByTestId("gpt-4o-1-option").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.getByTestId("fit_view").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.getByRole("button", { name: "Playground", exact: true }).click();
     await page.waitForSelector('[data-testid="input-chat-playground"]', {
       timeout: 100000,
diff --git a/src/frontend/tests/core/integrations/similarity.spec.ts b/src/frontend/tests/core/integrations/similarity.spec.ts
index c77a35df0..08a96f3d6 100644
--- a/src/frontend/tests/core/integrations/similarity.spec.ts
+++ b/src/frontend/tests/core/integrations/similarity.spec.ts
@@ -32,8 +32,10 @@ test(
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {
         targetPosition: { x: 0, y: 0 },
       });
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await zoomOut(page, 5);
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("sidebar-search-input").click();
     await page.getByTestId("sidebar-search-input").fill("text embedder");
@@ -111,7 +113,10 @@ test(
 
     await updateOldComponents(page);
 
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.getByTestId("fit_view").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page
       .getByTestId("textarea_str_template")
@@ -150,12 +155,17 @@ test(
       .nth(0)
       .fill("similarity_score");
 
+    await page.getByTestId("canvas_controls_dropdown").click();
     await page.getByTestId("fit_view").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.mouse.wheel(0, 500);
 
     await page.locator(".react-flow__pane").click();
 
+    await page.getByTestId("canvas_controls_dropdown").click();
     await page.getByTestId("fit_view").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     //connection 1
     const openAiEmbeddingOutput_0 = await page
diff --git a/src/frontend/tests/core/integrations/starter-projects.spec.ts b/src/frontend/tests/core/integrations/starter-projects.spec.ts
index 6ddb429b1..eea3ef605 100644
--- a/src/frontend/tests/core/integrations/starter-projects.spec.ts
+++ b/src/frontend/tests/core/integrations/starter-projects.spec.ts
@@ -85,11 +85,10 @@ test(
       .getByRole("heading", { name: "Vector Store RAG" })
       .first()
       .click();
-    await page.waitForSelector('[data-testid="fit_view"]', {
-      timeout: 100000,
-    });
 
+    await page.getByTestId("canvas_controls_dropdown").click();
     await page.getByTestId("fit_view").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     const edges = await page.locator(".react-flow__edge-interaction").count();
     const nodes = await page.getByTestId("div-generic-node").count();
@@ -126,9 +125,7 @@ test(
 
       await page.getByTestId("text_card_container").nth(i).click();
 
-      await page.waitForTimeout(500);
-
-      await page.waitForSelector('[data-testid="fit_view"]', {
+      await page.waitForSelector('[data-testid="div-generic-node"]', {
         timeout: 5000,
       });
 
diff --git a/src/frontend/tests/core/integrations/textInputOutput.spec.ts b/src/frontend/tests/core/integrations/textInputOutput.spec.ts
index 0cadf6924..ef1f1ba7a 100644
--- a/src/frontend/tests/core/integrations/textInputOutput.spec.ts
+++ b/src/frontend/tests/core/integrations/textInputOutput.spec.ts
@@ -76,6 +76,8 @@ test.skip(
       .dragTo(page.locator('//*[@id="react-flow-id"]'));
     await page.mouse.up();
     await page.mouse.down();
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 100000,
     });
@@ -85,6 +87,8 @@ test.skip(
     await page.getByTestId("zoom_out").click();
     await page.getByTestId("zoom_out").click();
     await page.getByTestId("zoom_out").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     const elementsOpenAiOutput = await page
       .getByTestId("handle-openaimodel-shownode-text-right")
       .all();
diff --git a/src/frontend/tests/core/regression/generalBugs-prompt.spec.ts b/src/frontend/tests/core/regression/generalBugs-prompt.spec.ts
index df24f1dcc..d5acf74f9 100644
--- a/src/frontend/tests/core/regression/generalBugs-prompt.spec.ts
+++ b/src/frontend/tests/core/regression/generalBugs-prompt.spec.ts
@@ -20,11 +20,14 @@ test(
     await page.getByTestId("side_nav_options_all-templates").click();
     await page.getByRole("heading", { name: "Basic Prompting" }).click();
 
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 100000,
     });
 
     await page.getByTestId("fit_view").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     let outdatedComponents = await page.getByTestId("update-button").count();
 
diff --git a/src/frontend/tests/core/regression/generalBugs-shard-4.spec.ts b/src/frontend/tests/core/regression/generalBugs-shard-4.spec.ts
index eb9b0423f..c3d7f135a 100644
--- a/src/frontend/tests/core/regression/generalBugs-shard-4.spec.ts
+++ b/src/frontend/tests/core/regression/generalBugs-shard-4.spec.ts
@@ -20,11 +20,14 @@ test(
       .getByRole("heading", { name: "Vector Store RAG" })
       .first()
       .click();
+
+    await page.getByTestId("canvas_controls_dropdown").click();
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 100000,
     });
 
     await page.getByTestId("fit_view").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await renameFlow(page, { flowName: randomName });
 
diff --git a/src/frontend/tests/core/regression/generalBugs-shard-5.spec.ts b/src/frontend/tests/core/regression/generalBugs-shard-5.spec.ts
index fd852dc54..8d2261873 100644
--- a/src/frontend/tests/core/regression/generalBugs-shard-5.spec.ts
+++ b/src/frontend/tests/core/regression/generalBugs-shard-5.spec.ts
@@ -26,8 +26,10 @@ test(
     await page
       .getByTestId("input_outputText Input")
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {});
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await zoomOut(page, 4);
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.waitForTimeout(500);
 
@@ -166,10 +168,14 @@ test(
       .nth(1);
     await elementCombineTextInput1.click();
 
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.getByTitle("fit view").click();
 
     await zoomOut(page, 2);
 
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page
       .getByTestId("title-Combine Text")
       .first()
diff --git a/src/frontend/tests/core/regression/generalBugs-shard-9.spec.ts b/src/frontend/tests/core/regression/generalBugs-shard-9.spec.ts
index 6a10bbcd9..ad308ffab 100644
--- a/src/frontend/tests/core/regression/generalBugs-shard-9.spec.ts
+++ b/src/frontend/tests/core/regression/generalBugs-shard-9.spec.ts
@@ -21,11 +21,14 @@ test(
 
     await page.getByTestId("side_nav_options_all-templates").click();
     await page.getByRole("heading", { name: "Basic Prompting" }).click();
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 2000,
     });
 
     await page.getByTestId("fit_view").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("sidebar-search-input").click();
     await page.getByTestId("sidebar-search-input").fill("message history");
@@ -88,7 +91,10 @@ AI:
     await page.getByText("Edit Prompt", { exact: true }).click();
     await page.getByText("Check & Save").last().click();
 
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.getByTestId("fit_view").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     //connection 1
     await page
diff --git a/src/frontend/tests/core/unit/chatInputOutput.spec.ts b/src/frontend/tests/core/unit/chatInputOutput.spec.ts
index 7ad18d5b4..8cf7e4d04 100644
--- a/src/frontend/tests/core/unit/chatInputOutput.spec.ts
+++ b/src/frontend/tests/core/unit/chatInputOutput.spec.ts
@@ -37,11 +37,14 @@ test("chat_io_teste", { tag: ["@release", "@workspace"] }, async ({ page }) => {
       targetPosition: { x: 100, y: 100 },
     });
 
+  await page.getByTestId("canvas_controls_dropdown").click();
+
   await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 100000,
   });
 
   await page.getByTestId("fit_view").click();
+  await page.getByTestId("canvas_controls_dropdown").click();
 
   await page
     .getByTestId("handle-chatinput-noshownode-chat message-source")
diff --git a/src/frontend/tests/core/unit/codeAreaModalComponent.spec.ts b/src/frontend/tests/core/unit/codeAreaModalComponent.spec.ts
index 815dbbee0..acdf42e94 100644
--- a/src/frontend/tests/core/unit/codeAreaModalComponent.spec.ts
+++ b/src/frontend/tests/core/unit/codeAreaModalComponent.spec.ts
@@ -30,8 +30,12 @@ test(
       .getByTestId("prototypesPython Function")
       .getByTestId("icon-Plus")
       .click();
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.getByTestId("fit_view").click();
     await page.getByTestId("zoom_out").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.getByTestId("div-generic-node").click();
 
     await page.getByTestId("code-button-modal").click();
diff --git a/src/frontend/tests/core/unit/fileUploadComponent.spec.ts b/src/frontend/tests/core/unit/fileUploadComponent.spec.ts
index e9939e9ad..77b1a2666 100644
--- a/src/frontend/tests/core/unit/fileUploadComponent.spec.ts
+++ b/src/frontend/tests/core/unit/fileUploadComponent.spec.ts
@@ -698,7 +698,7 @@ test(
     await page.getByTestId("button_open_file_management").click();
     console.warn(psdFileName);
 
-    // Check if the PSD file has the disabled class (greyed out)
+    // Check if the PNG file has the disabled class (greyed out)
     await expect(page.getByTestId(`file-item-${psdFileName}`)).toHaveClass(
       /pointer-events-none cursor-not-allowed opacity-50/,
     );
@@ -714,19 +714,6 @@ test(
       .locator("..")
       .hover();
 
-    await expect(
-      page.getByText("Type not supported by component"),
-    ).toBeVisible();
-
-    // Try to select the PSD file (should not change its state)
-    await expect(page.getByTestId(`checkbox-${psdFileName}`)).toBeDisabled();
-
-    // Verify the PSD file checkbox remains unchecked
-    await expect(page.getByTestId(`checkbox-${psdFileName}`)).toHaveAttribute(
-      "data-state",
-      "unchecked",
-    );
-
     // Select the TXT file (should work normally)
     await page.getByTestId(`checkbox-${txtFileName}`).click();
 
diff --git a/src/frontend/tests/core/unit/floatComponent.spec.ts b/src/frontend/tests/core/unit/floatComponent.spec.ts
index 641a6d8ef..1d4835aca 100644
--- a/src/frontend/tests/core/unit/floatComponent.spec.ts
+++ b/src/frontend/tests/core/unit/floatComponent.spec.ts
@@ -42,7 +42,10 @@ test(
 
     await page.getByText("Close").last().click();
 
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.getByTestId("fit_view").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.locator('//*[@id="int_int_seed"]').click();
     await page.locator('//*[@id="int_int_seed"]').fill("");
diff --git a/src/frontend/tests/core/unit/intComponent.spec.ts b/src/frontend/tests/core/unit/intComponent.spec.ts
index 7e0104cfd..2778374b8 100644
--- a/src/frontend/tests/core/unit/intComponent.spec.ts
+++ b/src/frontend/tests/core/unit/intComponent.spec.ts
@@ -20,9 +20,11 @@ test("IntComponent", { tag: ["@release", "@workspace"] }, async ({ page }) => {
     .getByTestId("openaiOpenAI")
     .first()
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.getByTestId("canvas_controls_dropdown").click();
 
   await page.getByTestId("fit_view").click();
   await zoomOut(page, 2);
+  await page.getByTestId("canvas_controls_dropdown").click();
 
   await page.getByTestId("div-generic-node").click();
 
@@ -50,6 +52,8 @@ test("IntComponent", { tag: ["@release", "@workspace"] }, async ({ page }) => {
 
   await page.getByTestId("title-OpenAI").click();
 
+  await page.getByTestId("canvas_controls_dropdown").click();
+
   await page.waitForSelector('[data-testid="fit_view"]', {
     timeout: 100000,
   });
@@ -58,6 +62,7 @@ test("IntComponent", { tag: ["@release", "@workspace"] }, async ({ page }) => {
   await page.getByTestId("zoom_out").click();
   await page.getByTestId("zoom_out").click();
   await page.getByTestId("zoom_out").click();
+  await page.getByTestId("canvas_controls_dropdown").click();
 
   await page.getByTestId("edit-button-modal").last().click();
 
diff --git a/src/frontend/tests/core/unit/linkComponent.spec.ts b/src/frontend/tests/core/unit/linkComponent.spec.ts
index 6048dbdfa..55a146fa8 100644
--- a/src/frontend/tests/core/unit/linkComponent.spec.ts
+++ b/src/frontend/tests/core/unit/linkComponent.spec.ts
@@ -21,8 +21,11 @@ test(
     );
 
     await page.getByTestId("sidebar-custom-component-button").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.getByTitle("fit view").click();
     await page.getByTitle("zoom out").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("title-Custom Component").first().click();
 
@@ -64,6 +67,7 @@ test(
     await page.keyboard.press("Backspace");
     await page.locator("textarea").last().fill(cleanCode);
     await page.locator('//*[@id="checkAndSaveBtn"]').click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 3000,
@@ -71,6 +75,7 @@ test(
 
     await page.getByTestId("fit_view").click();
     await page.getByTestId("zoom_out").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     expect(await page.getByText("BUTTON").isVisible()).toBeTruthy();
     expect(await page.getByText("Click me").isVisible()).toBeTruthy();
diff --git a/src/frontend/tests/core/unit/promptModalComponent.spec.ts b/src/frontend/tests/core/unit/promptModalComponent.spec.ts
index 3aa110095..dea24d741 100644
--- a/src/frontend/tests/core/unit/promptModalComponent.spec.ts
+++ b/src/frontend/tests/core/unit/promptModalComponent.spec.ts
@@ -315,8 +315,11 @@ test(
     ).toBeTruthy();
 
     await page.getByText("Close").last().click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await zoomOut(page, 2);
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.getByTestId("edit-button-modal").last().click();
 
     await page.locator('//*[@id="showprompt1"]').click();
diff --git a/src/frontend/tests/core/unit/queryInputComponent.spec.ts b/src/frontend/tests/core/unit/queryInputComponent.spec.ts
index 8708d85e7..5003b7362 100644
--- a/src/frontend/tests/core/unit/queryInputComponent.spec.ts
+++ b/src/frontend/tests/core/unit/queryInputComponent.spec.ts
@@ -26,7 +26,10 @@ test(
       .dragTo(page.locator('//*[@id="react-flow-id"]'));
     await page.mouse.up();
     await page.mouse.down();
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.getByTestId("fit_view").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("title-OpenAI").click();
     await page.getByTestId("code-button-modal").click();
@@ -63,8 +66,10 @@ test(
     await page.keyboard.press("Backspace");
     await page.locator("textarea").last().fill(newCode);
     await page.locator('//*[@id="checkAndSaveBtn"]').click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("fit_view").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page
       .getByTestId("query_query_openai_api_base")
diff --git a/src/frontend/tests/core/unit/sliderComponent.spec.ts b/src/frontend/tests/core/unit/sliderComponent.spec.ts
index 2f257117b..34b9b840f 100644
--- a/src/frontend/tests/core/unit/sliderComponent.spec.ts
+++ b/src/frontend/tests/core/unit/sliderComponent.spec.ts
@@ -26,9 +26,12 @@ test(
       .dragTo(page.locator('//*[@id="react-flow-id"]'));
     await page.mouse.up();
     await page.mouse.down();
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.getByTestId("fit_view").click();
     await page.getByTestId("zoom_out").click();
     await page.getByTestId("zoom_out").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("title-Ollama").click();
     await page.getByTestId("code-button-modal").click();
@@ -61,8 +64,10 @@ test(
     await page.keyboard.press("Backspace");
     await page.locator("textarea").last().fill(newCode);
     await page.locator('//*[@id="checkAndSaveBtn"]').click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("fit_view").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await mutualValidation(page);
 
@@ -71,8 +76,10 @@ test(
     // wait for the slider to update
 
     await page.waitForTimeout(500);
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("zoom_out").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("more-options-modal").click();
     await page.getByText("Controls", { exact: true }).last().click();
diff --git a/src/frontend/tests/core/unit/tabComponent.spec.ts b/src/frontend/tests/core/unit/tabComponent.spec.ts
index 4014648c4..9644e72b0 100644
--- a/src/frontend/tests/core/unit/tabComponent.spec.ts
+++ b/src/frontend/tests/core/unit/tabComponent.spec.ts
@@ -20,8 +20,11 @@ test(
     );
 
     await page.getByTestId("sidebar-custom-component-button").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.getByTitle("fit view").click();
     await page.getByTitle("zoom out").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("title-Custom Component").first().click();
 
@@ -63,6 +66,7 @@ test(
     await page.keyboard.press("Backspace");
     await page.locator("textarea").last().fill(cleanCode);
     await page.locator('//*[@id="checkAndSaveBtn"]').click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 3000,
@@ -70,6 +74,7 @@ test(
 
     await page.getByTestId("fit_view").click();
     await page.getByTestId("zoom_out").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     // Verify that all tabs are visible
     expect(await page.getByText("Tab 1").isVisible()).toBeTruthy();
diff --git a/src/frontend/tests/core/unit/tableInputComponent.spec.ts b/src/frontend/tests/core/unit/tableInputComponent.spec.ts
index d914dff47..83aece329 100644
--- a/src/frontend/tests/core/unit/tableInputComponent.spec.ts
+++ b/src/frontend/tests/core/unit/tableInputComponent.spec.ts
@@ -25,14 +25,21 @@ test(
       },
     );
 
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.waitForSelector('[data-testid="zoom_out"]', {
       timeout: 3000,
     });
 
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.getByTestId("sidebar-custom-component-button").click();
 
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.getByTestId("zoom_out").click();
     await page.getByTestId("zoom_out").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("div-generic-node").click();
     await page.getByTestId("code-button-modal").click();
diff --git a/src/frontend/tests/core/unit/toggleComponent.spec.ts b/src/frontend/tests/core/unit/toggleComponent.spec.ts
index c532e8da6..b91fca83b 100644
--- a/src/frontend/tests/core/unit/toggleComponent.spec.ts
+++ b/src/frontend/tests/core/unit/toggleComponent.spec.ts
@@ -38,11 +38,14 @@ test(
 
     await page.getByText("Close").last().click();
 
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 100000,
     });
 
     await page.getByTestId("fit_view").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("toggle_bool_load_hidden").click();
     expect(
diff --git a/src/frontend/tests/extended/features/auto-save-off.spec.ts b/src/frontend/tests/extended/features/auto-save-off.spec.ts
index 71b79921c..1e6e188f8 100644
--- a/src/frontend/tests/extended/features/auto-save-off.spec.ts
+++ b/src/frontend/tests/extended/features/auto-save-off.spec.ts
@@ -40,12 +40,14 @@ test(
       .dragTo(page.locator('//*[@id="react-flow-id"]'));
     await page.mouse.up();
     await page.mouse.down();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 5000,
     });
 
     await page.getByTestId("fit_view").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     expect(await page.getByTestId("save-flow-button").isEnabled()).toBeTruthy();
 
@@ -106,6 +108,7 @@ test(
       console.error("Failed to hover or find add component button:", error);
       throw error;
     }
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     // Wait for fit view button
     await page.waitForSelector('[data-testid="fit_view"]', {
@@ -113,6 +116,7 @@ test(
     });
 
     await page.getByTestId("fit_view").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("icon-ChevronLeft").last().click();
 
@@ -145,12 +149,14 @@ test(
       .dragTo(page.locator('//*[@id="react-flow-id"]'));
     await page.mouse.up();
     await page.mouse.down();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 5000,
     });
 
     await page.getByTestId("fit_view").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("save-flow-button").click();
     await page.getByTestId("icon-ChevronLeft").last().click();
diff --git a/src/frontend/tests/extended/features/dragAndDrop.spec.ts b/src/frontend/tests/extended/features/dragAndDrop.spec.ts
index 99a2bf3c9..29d719369 100644
--- a/src/frontend/tests/extended/features/dragAndDrop.spec.ts
+++ b/src/frontend/tests/extended/features/dragAndDrop.spec.ts
@@ -12,10 +12,12 @@ test(
     //add a new flow just to have the workspace available
     await page.getByTestId("side_nav_options_all-templates").click();
     await page.getByRole("heading", { name: "Basic Prompting" }).click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 100000,
     });
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
       timeout: 100000,
@@ -66,10 +68,12 @@ test(
     //add a new flow just to have the workspace available
     await page.getByTestId("side_nav_options_all-templates").click();
     await page.getByRole("heading", { name: "Basic Prompting" }).click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 100000,
     });
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
       timeout: 100000,
diff --git a/src/frontend/tests/extended/features/flowPage.spec.ts b/src/frontend/tests/extended/features/flowPage.spec.ts
index e4594307d..67fe0ca42 100644
--- a/src/frontend/tests/extended/features/flowPage.spec.ts
+++ b/src/frontend/tests/extended/features/flowPage.spec.ts
@@ -15,10 +15,12 @@ test.describe("Flow Page tests", () => {
     );
 
     await page.getByTestId("sidebar-custom-component-button").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTitle("fit view").click();
     await page.getByTitle("zoom out").click();
     await page.getByTitle("zoom out").click();
     await page.getByTitle("zoom out").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
   });
 });
diff --git a/src/frontend/tests/extended/features/langflowShortcuts.spec.ts b/src/frontend/tests/extended/features/langflowShortcuts.spec.ts
index c2e601eed..c4a281098 100644
--- a/src/frontend/tests/extended/features/langflowShortcuts.spec.ts
+++ b/src/frontend/tests/extended/features/langflowShortcuts.spec.ts
@@ -25,8 +25,10 @@ test(
       .dragTo(page.locator('//*[@id="react-flow-id"]'));
     await page.mouse.up();
     await page.mouse.down();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("fit_view").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await adjustScreenView(page);
     await page.getByTestId("generic-node-title-arrangement").click();
diff --git a/src/frontend/tests/extended/features/lock-flow.spec.ts b/src/frontend/tests/extended/features/lock-flow.spec.ts
index eba33be8a..ecb1ff9f4 100644
--- a/src/frontend/tests/extended/features/lock-flow.spec.ts
+++ b/src/frontend/tests/extended/features/lock-flow.spec.ts
@@ -20,13 +20,17 @@ test(
 
     await page.getByTestId("side_nav_options_all-templates").click();
     await page.getByRole("heading", { name: "Basic Prompting" }).click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 100000,
       state: "visible",
     });
+    await page.getByTestId("canvas_controls_dropdown").click();
 
-    await page.getByTestId("lock_unlock").click();
+    await page.getByTestId("flow_name").click();
+    await page.getByTestId("lock-flow-switch").click();
+    await page.getByTestId("save-flow-settings").click();
 
     //ensure the UI is updated
     await page.waitForTimeout(500);
@@ -41,10 +45,12 @@ test(
     });
 
     await page.getByTestId("list-card").first().click();
+    await page.getByTestId("canvas_controls_dropdown").click();
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 100000,
       state: "visible",
     });
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     //ensure the UI is updated
     await page.waitForTimeout(1000);
@@ -53,10 +59,12 @@ test(
       timeout: 3000,
     });
 
-    await page.getByTestId("lock_unlock").click();
-    await page.waitForSelector('[data-testid="icon-LockOpen"]', {
+    await page.getByTestId("flow_name").click();
+    await page.getByTestId("lock-flow-switch").click();
+    await page.waitForSelector('[data-testid="icon-Lock"]', {
       timeout: 3000,
     });
+    await page.getByTestId("save-flow-settings").click();
 
     await page.getByTestId("icon-ChevronLeft").click();
     await page.waitForSelector('[data-testid="mainpage_title"]', {
@@ -64,16 +72,13 @@ test(
     });
 
     await page.getByTestId("list-card").first().click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 100000,
       state: "visible",
     });
-
-    await page.waitForSelector('[data-testid="icon-LockOpen"]', {
-      timeout: 3000,
-      state: "visible",
-    });
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await tryDeleteEdge(page);
     await page.locator(".react-flow__edge-path").nth(0).click();
@@ -118,7 +123,10 @@ test(
 );
 
 async function tryConnectNodes(page: Page) {
-  await page.getByTestId("lock_unlock").click();
+  await page.getByTestId("flow_name").click();
+  await page.getByTestId("lock-flow-switch").click();
+  await page.getByTestId("icon-Unlock").isVisible();
+  await page.getByTestId("save-flow-settings").click();
 
   const numberOfTries = 5;
   let numberOfEdges = await page.locator(".react-flow__edge-path").count();
@@ -146,12 +154,18 @@ async function tryConnectNodes(page: Page) {
       expect(numberOfEdges).toBe(0);
     }
   }
+  await page.getByTestId("flow_name").click();
+  await page.getByTestId("lock-flow-switch").click();
 
-  await page.getByTestId("lock_unlock").click();
+  await page.getByTestId("lock_Unlock").isVisible();
+  await page.getByTestId("save-flow-settings").click();
 }
 
 async function tryDeleteEdge(page: Page) {
-  await page.getByTestId("lock_unlock").click();
+  await page.getByTestId("flow_name").click();
+  await page.getByTestId("lock-flow-switch").click();
+  await page.getByTestId("icon-Lock").isVisible();
+  await page.getByTestId("save-flow-settings").click();
 
   let numberOfEdges = await page.locator(".react-flow__edge-path").count();
   expect(numberOfEdges).toBe(3);
@@ -168,5 +182,8 @@ async function tryDeleteEdge(page: Page) {
     expect(numberOfEdges).toBe(3);
   }
   //unlock the flow
-  await page.getByTestId("lock_unlock").click();
+  await page.getByTestId("flow_name").click();
+  await page.getByTestId("lock-flow-switch").click();
+  await page.getByTestId("lock_Unlock").isVisible();
+  await page.getByTestId("save-flow-settings").click();
 }
diff --git a/src/frontend/tests/extended/features/loop-component.spec.ts b/src/frontend/tests/extended/features/loop-component.spec.ts
index a513f03c8..6d34b2c5c 100644
--- a/src/frontend/tests/extended/features/loop-component.spec.ts
+++ b/src/frontend/tests/extended/features/loop-component.spec.ts
@@ -27,7 +27,9 @@ test(
       timeout: 1000,
     });
 
+    await page.getByTestId("canvas_controls_dropdown").click();
     await zoomOut(page, 3);
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page
       .getByTestId("dataURL")
@@ -110,10 +112,12 @@ test(
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {
         targetPosition: { x: 940, y: 100 },
       });
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("fit_view").click();
 
     await zoomOut(page, 2);
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     // Loop Item -> Update Data
 
@@ -157,7 +161,10 @@ test(
       .first()
       .click();
 
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await zoomOut(page, 3);
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("div-generic-node").nth(5).click();
 
diff --git a/src/frontend/tests/extended/features/mcp-server-tab.spec.ts b/src/frontend/tests/extended/features/mcp-server-tab.spec.ts
index 348f45101..0dc0edf9c 100644
--- a/src/frontend/tests/extended/features/mcp-server-tab.spec.ts
+++ b/src/frontend/tests/extended/features/mcp-server-tab.spec.ts
@@ -243,10 +243,12 @@ test(
           .dragTo(page.locator('//*[@id="react-flow-id"]'), {
             targetPosition: { x: 0, y: 0 },
           });
+        await page.getByTestId("canvas_controls_dropdown").click();
 
         await page.getByTestId("fit_view").click();
 
         await zoomOut(page, 3);
+        await page.getByTestId("canvas_controls_dropdown").click();
 
         await expect(page.getByTestId("dropdown_str_tool")).toBeHidden();
 
diff --git a/src/frontend/tests/extended/features/mcp-server.spec.ts b/src/frontend/tests/extended/features/mcp-server.spec.ts
index fbd60c79a..966ea29ff 100644
--- a/src/frontend/tests/extended/features/mcp-server.spec.ts
+++ b/src/frontend/tests/extended/features/mcp-server.spec.ts
@@ -24,10 +24,12 @@ test(
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {
         targetPosition: { x: 0, y: 0 },
       });
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("fit_view").click();
 
     await zoomOut(page, 3);
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await expect(page.getByTestId("dropdown_str_tool")).toBeHidden();
 
@@ -83,8 +85,10 @@ test(
     await page.getByTestId("fetch-0-option").click();
 
     await page.waitForTimeout(2000);
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("fit_view").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.waitForSelector('[data-testid="int_int_max_length"]', {
       state: "visible",
@@ -233,10 +237,12 @@ test(
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {
         targetPosition: { x: 0, y: 0 },
       });
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("fit_view").click();
 
     await zoomOut(page, 3);
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     try {
       await page.getByText("Add MCP Server", { exact: true }).click({
@@ -406,10 +412,12 @@ test(
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {
         targetPosition: { x: 0, y: 0 },
       });
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("fit_view").click();
 
     await zoomOut(page, 3);
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     try {
       await page.getByText("Add MCP Server", { exact: true }).click({
diff --git a/src/frontend/tests/extended/features/minimize.spec.ts b/src/frontend/tests/extended/features/minimize.spec.ts
index 64fe5641a..c1de5f1eb 100644
--- a/src/frontend/tests/extended/features/minimize.spec.ts
+++ b/src/frontend/tests/extended/features/minimize.spec.ts
@@ -21,7 +21,6 @@ test(
       .getByTestId("input_outputText Input")
       .dragTo(page.locator('//*[@id="react-flow-id"]'));
 
-    await page.getByTestId("zoom_out").click();
     await page
       .locator('//*[@id="react-flow-id"]')
       .hover()
@@ -33,8 +32,10 @@ test(
     await page.mouse.up();
 
     await adjustScreenView(page);
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await zoomOut(page, 4);
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("more-options-modal").click();
 
diff --git a/src/frontend/tests/extended/features/refresh-dropdown-list.spec.ts b/src/frontend/tests/extended/features/refresh-dropdown-list.spec.ts
index febc35ed0..926cca818 100644
--- a/src/frontend/tests/extended/features/refresh-dropdown-list.spec.ts
+++ b/src/frontend/tests/extended/features/refresh-dropdown-list.spec.ts
@@ -24,10 +24,12 @@ test(
     await page
       .getByRole("heading", { name: "Portfolio Website Code Generator" })
       .click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 100000,
     });
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await initialGPTsetup(page, {
       skipAdjustScreenView: true,
diff --git a/src/frontend/tests/extended/features/sticky-notes.spec.ts b/src/frontend/tests/extended/features/sticky-notes.spec.ts
index b60327376..34a52b714 100644
--- a/src/frontend/tests/extended/features/sticky-notes.spec.ts
+++ b/src/frontend/tests/extended/features/sticky-notes.spec.ts
@@ -40,6 +40,7 @@ The future of AI is both exciting and uncertain. As the technology continues to
       timeout: 30000,
     });
     await page.getByTestId("blank-flow").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
     await page.getByTestId("add_note").click();
 
     const targetElement = page.locator('//*[@id="react-flow-id"]');
@@ -47,6 +48,7 @@ The future of AI is both exciting and uncertain. As the technology continues to
 
     await page.mouse.up();
     await page.mouse.down();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 100000,
@@ -54,6 +56,8 @@ The future of AI is both exciting and uncertain. As the technology continues to
 
     await page.getByTestId("fit_view").click();
     await zoomOut(page, 6);
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.getByTestId("note_node").click();
 
     await page.locator(".generic-node-desc-text").last().dblclick();
@@ -119,8 +123,10 @@ The future of AI is both exciting and uncertain. As the technology continues to
     await page.getByTestId("more-options-modal").click();
 
     await page.getByText("Copy").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("fit_view").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     //double click
     await targetElement.click();
diff --git a/src/frontend/tests/extended/features/stop-button-playground.spec.ts b/src/frontend/tests/extended/features/stop-button-playground.spec.ts
index 3fe3b05e7..c30c77797 100644
--- a/src/frontend/tests/extended/features/stop-button-playground.spec.ts
+++ b/src/frontend/tests/extended/features/stop-button-playground.spec.ts
@@ -17,12 +17,19 @@ test(
       },
     );
 
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.waitForSelector('[data-testid="zoom_out"]', {
       timeout: 3000,
     });
 
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.getByTestId("sidebar-custom-component-button").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.getByTitle("fit view").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("sidebar-search-input").click();
     await page.waitForTimeout(500);
@@ -85,10 +92,11 @@ class CustomComponent(Component):
     await page.locator("textarea").fill(waitTimeoutCode);
 
     await page.getByText("Check & Save").last().click();
-
+    await page.getByTestId("canvas_controls_dropdown").click();
     await page.getByTestId("fit_view").click();
     await page.getByTestId("zoom_out").click();
     await page.getByTestId("zoom_out").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     //connection 1
     const elementCustomComponentOutput = await page
diff --git a/src/frontend/tests/extended/features/tool-mode.spec.ts b/src/frontend/tests/extended/features/tool-mode.spec.ts
index e8c05bb82..8ae9ee735 100644
--- a/src/frontend/tests/extended/features/tool-mode.spec.ts
+++ b/src/frontend/tests/extended/features/tool-mode.spec.ts
@@ -113,10 +113,12 @@ test(
     await page.getByTestId("disclosure-data").click();
 
     await page.getByTestId("disclosure-agents").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("fit_view").click();
 
     await zoomOut(page, 4);
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.waitForSelector('[data-testid="agentsAgent"]', {
       timeout: 3000,
@@ -127,8 +129,10 @@ test(
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {
         targetPosition: { x: 0, y: 500 },
       });
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("fit_view").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     // Move the Agent node a bit
 
diff --git a/src/frontend/tests/extended/features/twoEdges.spec.ts b/src/frontend/tests/extended/features/twoEdges.spec.ts
index 40979f354..07cab6524 100644
--- a/src/frontend/tests/extended/features/twoEdges.spec.ts
+++ b/src/frontend/tests/extended/features/twoEdges.spec.ts
@@ -10,6 +10,7 @@ test(
     await page.getByText("Vector Store RAG", { exact: true }).last().click();
     await page.getByText("Retriever", { exact: true }).first().isVisible();
     await page.getByText("Search Results", { exact: true }).first().isVisible();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     const focusElementsOnBoard = async ({ page }) => {
       await page.waitForSelector('[data-testid="fit_view"]', {
@@ -20,6 +21,7 @@ test(
     };
 
     await focusElementsOnBoard({ page });
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByText("Retriever", { exact: true }).first().isHidden();
     await page.getByTestId("icon-ChevronDown").last().isVisible();
diff --git a/src/frontend/tests/extended/features/userSettings.spec.ts b/src/frontend/tests/extended/features/userSettings.spec.ts
index a4df73cb3..cd4705c2d 100644
--- a/src/frontend/tests/extended/features/userSettings.spec.ts
+++ b/src/frontend/tests/extended/features/userSettings.spec.ts
@@ -210,9 +210,13 @@ test(
 
     await page.getByTestId("side_nav_options_all-templates").click();
     await page.getByRole("heading", { name: "Basic Prompting" }).click();
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 100000,
     });
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     // Now navigate to user settings
     await page.getByTestId("user-profile-settings").click();
     await page.getByTestId("menu_settings_button").click();
diff --git a/src/frontend/tests/extended/features/validate-raise-errors-components.spec.ts b/src/frontend/tests/extended/features/validate-raise-errors-components.spec.ts
index 608d07918..4227e97d3 100644
--- a/src/frontend/tests/extended/features/validate-raise-errors-components.spec.ts
+++ b/src/frontend/tests/extended/features/validate-raise-errors-components.spec.ts
@@ -1,7 +1,6 @@
 import { expect, test } from "@playwright/test";
 import { addCustomComponent } from "../../utils/add-custom-component";
 import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
-import { zoomOut } from "../../utils/zoom-out";
 
 test(
   "user should be able to see errors on popups when raise an error",
@@ -54,9 +53,11 @@ class CustomComponent(Component):
     );
 
     await addCustomComponent(page);
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("fit_view").click();
     await page.getByTestId("zoom_out").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.waitForTimeout(1000);
 
diff --git a/src/frontend/tests/extended/integrations/chatInputOutputUser-shard-1.spec.ts b/src/frontend/tests/extended/integrations/chatInputOutputUser-shard-1.spec.ts
index 1db37b5fc..49eb1a677 100644
--- a/src/frontend/tests/extended/integrations/chatInputOutputUser-shard-1.spec.ts
+++ b/src/frontend/tests/extended/integrations/chatInputOutputUser-shard-1.spec.ts
@@ -21,9 +21,13 @@ test(
 
     await page.getByTestId("side_nav_options_all-templates").click();
     await page.getByRole("heading", { name: "Basic Prompting" }).click();
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 100000,
     });
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await initialGPTsetup(page);
 
     await page.getByTestId("button_run_chat output").last().click();
@@ -95,8 +99,10 @@ test(
       .dragTo(page.locator('//*[@id="react-flow-id"]'), {
         targetPosition: { x: 700, y: 400 },
       });
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("fit_view").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     // Fill URL input
     await page
diff --git a/src/frontend/tests/extended/integrations/duckduckgo.spec.ts b/src/frontend/tests/extended/integrations/duckduckgo.spec.ts
index 0ae23d1bb..2ad1ab9ff 100644
--- a/src/frontend/tests/extended/integrations/duckduckgo.spec.ts
+++ b/src/frontend/tests/extended/integrations/duckduckgo.spec.ts
@@ -26,8 +26,10 @@ test(
           .getByTestId("add-component-button-duckduckgo-search")
           .click();
       });
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("fit_view").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page
       .getByTestId("popover-anchor-input-input_value")
diff --git a/src/frontend/tests/extended/integrations/youtube-transcripts.spec.ts b/src/frontend/tests/extended/integrations/youtube-transcripts.spec.ts
index 653ed5b15..794d631b7 100644
--- a/src/frontend/tests/extended/integrations/youtube-transcripts.spec.ts
+++ b/src/frontend/tests/extended/integrations/youtube-transcripts.spec.ts
@@ -13,8 +13,10 @@ test.skip(
 
     await page.getByTestId("youtubeYouTube Transcripts").hover();
     await page.getByTestId("add-component-button-youtube-transcripts").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("fit_view").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     let outdatedComponents = await page.getByTestId("update-button").count();
 
@@ -26,8 +28,10 @@ test.skip(
     await page
       .getByTestId("textarea_str_url")
       .fill("https://www.youtube.com/watch?v=VqhCQZaH4Vs");
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("fit_view").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("button_run_youtube transcripts").click();
 
diff --git a/src/frontend/tests/extended/regression/general-bugs-component-as-tool-shortcut.spec.ts b/src/frontend/tests/extended/regression/general-bugs-component-as-tool-shortcut.spec.ts
index 67c57768d..8be6a2d77 100644
--- a/src/frontend/tests/extended/regression/general-bugs-component-as-tool-shortcut.spec.ts
+++ b/src/frontend/tests/extended/regression/general-bugs-component-as-tool-shortcut.spec.ts
@@ -9,10 +9,13 @@ test(
     await awaitBootstrapTest(page);
 
     await page.getByTestId("blank-flow").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 100000,
     });
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.getByTestId("sidebar-search-input").click();
     await page.getByTestId("sidebar-search-input").fill("prompt");
 
diff --git a/src/frontend/tests/extended/regression/general-bugs-delete-handle-advanced-input.spec.ts b/src/frontend/tests/extended/regression/general-bugs-delete-handle-advanced-input.spec.ts
index 48bdbbe4c..45a931042 100644
--- a/src/frontend/tests/extended/regression/general-bugs-delete-handle-advanced-input.spec.ts
+++ b/src/frontend/tests/extended/regression/general-bugs-delete-handle-advanced-input.spec.ts
@@ -9,10 +9,13 @@ test(
     await awaitBootstrapTest(page);
 
     await page.getByTestId("blank-flow").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 100000,
     });
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.getByTestId("sidebar-search-input").click();
     await page.getByTestId("sidebar-search-input").fill("if else");
 
@@ -22,9 +25,11 @@ test(
       .then(async () => {
         await page.getByTestId("add-component-button-if-else").click();
       });
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("fit_view").click();
     await zoomOut(page, 3);
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("edit-button-modal").click();
 
diff --git a/src/frontend/tests/extended/regression/general-bugs-dropdown-select-not-in-list.spec.ts b/src/frontend/tests/extended/regression/general-bugs-dropdown-select-not-in-list.spec.ts
index 17e130bea..5ca19b62b 100644
--- a/src/frontend/tests/extended/regression/general-bugs-dropdown-select-not-in-list.spec.ts
+++ b/src/frontend/tests/extended/regression/general-bugs-dropdown-select-not-in-list.spec.ts
@@ -24,8 +24,10 @@ test(
       .then(async () => {
         await page.getByTestId("add-component-button-openai").last().click();
       });
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("fit_view").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("dropdown_str_model_name").click();
     await page.getByTestId("dropdown_search_input").click();
@@ -48,8 +50,10 @@ test(
 
     await page.getByTestId("agentsAgent").hover();
     await page.getByTestId("add-component-button-agent").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("fit_view").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("dropdown_str_model_name").click();
     await page.getByTestId("dropdown_search_input").click();
@@ -81,8 +85,10 @@ test(
     await page.getByText("Anthropic").click();
 
     await page.waitForTimeout(500);
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("fit_view").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("dropdown_str_model_name").click();
     await page.getByTestId("dropdown_search_input").click();
@@ -103,8 +109,10 @@ test(
     await page.getByText("Groq").click();
 
     await page.waitForTimeout(500);
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("fit_view").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("dropdown_str_model_name").click();
     await page.getByTestId("dropdown_search_input").click();
diff --git a/src/frontend/tests/extended/regression/general-bugs-icons-fallback.spec.ts b/src/frontend/tests/extended/regression/general-bugs-icons-fallback.spec.ts
index 3e74fec3d..8e1403b01 100644
--- a/src/frontend/tests/extended/regression/general-bugs-icons-fallback.spec.ts
+++ b/src/frontend/tests/extended/regression/general-bugs-icons-fallback.spec.ts
@@ -1,6 +1,5 @@
 import { expect, test } from "@playwright/test";
 import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
-import { extractAndCleanCode } from "../../utils/extract-and-clean-code";
 
 test(
   "user must be able to see icons fallback if the icon is not found",
@@ -9,10 +8,12 @@ test(
     await awaitBootstrapTest(page);
 
     await page.getByTestId("blank-flow").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 100000,
     });
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("disclosure-data").click();
     await page.waitForTimeout(500);
diff --git a/src/frontend/tests/extended/regression/general-bugs-minimize-state-error.spec.ts b/src/frontend/tests/extended/regression/general-bugs-minimize-state-error.spec.ts
index fdcb5fcbc..6d8c15097 100644
--- a/src/frontend/tests/extended/regression/general-bugs-minimize-state-error.spec.ts
+++ b/src/frontend/tests/extended/regression/general-bugs-minimize-state-error.spec.ts
@@ -16,10 +16,13 @@ test(
   async ({ page }) => {
     await awaitBootstrapTest(page);
     await page.getByTestId("blank-flow").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 100000,
     });
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.getByTestId("sidebar-search-input").click();
     await page.getByTestId("sidebar-search-input").fill("text output");
 
diff --git a/src/frontend/tests/extended/regression/general-bugs-save-changes-on-node.spec.ts b/src/frontend/tests/extended/regression/general-bugs-save-changes-on-node.spec.ts
index ca0fa55b4..c40ef2ee7 100644
--- a/src/frontend/tests/extended/regression/general-bugs-save-changes-on-node.spec.ts
+++ b/src/frontend/tests/extended/regression/general-bugs-save-changes-on-node.spec.ts
@@ -50,11 +50,13 @@ test(
 
     await awaitBootstrapTest(page);
     await page.getByTestId("blank-flow").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 10000,
       state: "visible",
     });
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await renameFlow(page, { flowName: randomFlowName });
 
diff --git a/src/frontend/tests/extended/regression/general-bugs-truncate-results.spec.ts b/src/frontend/tests/extended/regression/general-bugs-truncate-results.spec.ts
index 3df7acead..2888bd497 100644
--- a/src/frontend/tests/extended/regression/general-bugs-truncate-results.spec.ts
+++ b/src/frontend/tests/extended/regression/general-bugs-truncate-results.spec.ts
@@ -31,8 +31,10 @@ test.skip(
     await page
       .getByTestId("inputlist_str_urls_1")
       .fill("https://www.langflow.org/");
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTitle("fit view").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("default_slider_display_value").click();
     await page.getByTestId("slider_input").fill("5");
diff --git a/src/frontend/tests/extended/regression/generalBugs-shard-10.spec.ts b/src/frontend/tests/extended/regression/generalBugs-shard-10.spec.ts
index e868ad4a7..dfca6e593 100644
--- a/src/frontend/tests/extended/regression/generalBugs-shard-10.spec.ts
+++ b/src/frontend/tests/extended/regression/generalBugs-shard-10.spec.ts
@@ -23,11 +23,14 @@ test(
 
     await page.getByTestId("side_nav_options_all-templates").click();
     await page.getByRole("heading", { name: "Basic Prompting" }).click();
-    await page.waitForSelector('[data-testid="fit_view"]', {
-      timeout: 3000,
+    await page.waitForSelector('[data-testid="canvas_controls_dropdown"]', {
+      timeout: 100000,
     });
 
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.getByTestId("fit_view").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByText("openai").last().click();
     await page.keyboard.press("Delete");
diff --git a/src/frontend/tests/extended/regression/generalBugs-shard-11.spec.ts b/src/frontend/tests/extended/regression/generalBugs-shard-11.spec.ts
index 62933cd1c..479a3ea10 100644
--- a/src/frontend/tests/extended/regression/generalBugs-shard-11.spec.ts
+++ b/src/frontend/tests/extended/regression/generalBugs-shard-11.spec.ts
@@ -25,10 +25,12 @@ test(
 
     await page.mouse.up();
     await page.mouse.down();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("fit_view").click();
     await page.getByTestId("zoom_out").click();
     await page.getByTestId("zoom_out").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await expect(page.getByText("api_key")).toBeVisible({
       timeout: 3000,
@@ -52,8 +54,10 @@ test(
     await page.waitForSelector('[data-testid="searchapiSearchApi"]', {
       timeout: 1000,
     });
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await zoomOut(page, 3);
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page
       .getByTestId("searchapiSearchApi")
@@ -76,7 +80,13 @@ test(
         targetPosition: { x: 300, y: 300 },
       });
 
+    await page.waitForSelector('[data-testid="canvas_controls_dropdown"]', {
+      timeout: 100000,
+    });
+
+    await page.getByTestId("canvas_controls_dropdown").click();
     await page.getByTestId("fit_view").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("title-SearchApi").first().click();
     await page.getByTestId("tool-mode-button").click();
diff --git a/src/frontend/tests/extended/regression/generalBugs-shard-3.spec.ts b/src/frontend/tests/extended/regression/generalBugs-shard-3.spec.ts
index 58d1822c7..0f3eb9883 100644
--- a/src/frontend/tests/extended/regression/generalBugs-shard-3.spec.ts
+++ b/src/frontend/tests/extended/regression/generalBugs-shard-3.spec.ts
@@ -60,6 +60,7 @@ test(
       });
 
     await initialGPTsetup(page);
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 5000,
@@ -67,6 +68,7 @@ test(
     });
 
     await page.getByTestId("fit_view").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page
       .getByTestId("handle-chatinput-noshownode-chat message-source")
@@ -80,8 +82,11 @@ test(
       .getByTestId("handle-chatoutput-noshownode-inputs-target")
       .last()
       .click();
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("fit_view").click();
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.getByRole("button", { name: "Playground", exact: true }).click();
     await page.waitForSelector('[data-testid="input-chat-playground"]', {
       timeout: 100000,
@@ -146,9 +151,13 @@ test(
       .dragTo(page.locator('//*[@id="react-flow-id"]'));
     await page.mouse.up();
     await page.mouse.down();
+
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 100000,
     });
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("playground-btn-flow-io").click({ force: true });
 
diff --git a/src/frontend/tests/extended/regression/generalBugs-shard-7.spec.ts b/src/frontend/tests/extended/regression/generalBugs-shard-7.spec.ts
index eb59c72e6..fd086a524 100644
--- a/src/frontend/tests/extended/regression/generalBugs-shard-7.spec.ts
+++ b/src/frontend/tests/extended/regression/generalBugs-shard-7.spec.ts
@@ -15,6 +15,8 @@ test(
 
     await page.getByTestId("blank-flow").click();
 
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 5000,
       state: "visible",
@@ -25,6 +27,8 @@ test(
       state: "visible",
     });
 
+    await page.getByTestId("canvas_controls_dropdown").click();
+
     await page.getByTestId("sidebar-search-input").click();
     await page.getByTestId("sidebar-search-input").fill("ollama");
     await page.waitForSelector('[data-testid="ollamaOllama Embeddings"]', {
@@ -39,9 +43,11 @@ test(
           .getByTestId("add-component-button-ollama-embeddings")
           .click();
       });
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("fit_view").click();
     await zoomOut(page, 3);
+    await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.waitForSelector('[data-testid="div-generic-node"]', {
       timeout: 5000,
diff --git a/src/frontend/tests/utils/adjust-screen-view.ts b/src/frontend/tests/utils/adjust-screen-view.ts
index f0841a3a3..a1867b9ba 100644
--- a/src/frontend/tests/utils/adjust-screen-view.ts
+++ b/src/frontend/tests/utils/adjust-screen-view.ts
@@ -8,8 +8,8 @@ export async function adjustScreenView(
     numberOfZoomOut?: number;
   } = {},
 ) {
+  await page.getByTestId("canvas_controls_dropdown").click();
   await page.getByTestId("fit_view").click();
-
   for (let i = 0; i < numberOfZoomOut; i++) {
     const zoomOutButton = page.getByTestId("zoom_out");
 
@@ -19,4 +19,5 @@ export async function adjustScreenView(
       await zoomOutButton.click();
     }
   }
+  await page.getByTestId("canvas_controls_dropdown").click();
 }
diff --git a/src/frontend/tests/utils/rename-flow.ts b/src/frontend/tests/utils/rename-flow.ts
index 592b8e200..144c8fd97 100644
--- a/src/frontend/tests/utils/rename-flow.ts
+++ b/src/frontend/tests/utils/rename-flow.ts
@@ -8,7 +8,9 @@ export const renameFlow = async (
   }: { flowName?: string; flowDescription?: string } = {},
 ) => {
   await page.getByTestId("flow_name").isVisible({ timeout: 3000 });
+  await page.getByTestId("flow_name").hover({ timeout: 3000 });
   await page.getByTestId("flow_name").click({ timeout: 3000 });
+
   await page.waitForTimeout(500);
   await page.getByTestId("input-flow-name").click({ timeout: 3000 });
 
diff --git a/src/frontend/tests/utils/select-gpt-model.ts b/src/frontend/tests/utils/select-gpt-model.ts
index 9f2fcdc77..2b0fb97ef 100644
--- a/src/frontend/tests/utils/select-gpt-model.ts
+++ b/src/frontend/tests/utils/select-gpt-model.ts
@@ -7,6 +7,9 @@ export const selectGptModel = async (page: Page) => {
 
   for (let i = 0; i < gptModelDropdownCount; i++) {
     await page.getByTestId("dropdown_str_model_name").nth(i).click();
-    await page.getByRole("option").first().click();
+
+    await page.waitForSelector('[role="listbox"]', { timeout: 10000 });
+    const listbox = page.getByRole("listbox").first();
+    await listbox.getByRole("option").first().click();
   }
 };
diff --git a/src/frontend/tests/utils/upload-file.ts b/src/frontend/tests/utils/upload-file.ts
index 64fe31a74..a9032ee82 100644
--- a/src/frontend/tests/utils/upload-file.ts
+++ b/src/frontend/tests/utils/upload-file.ts
@@ -31,7 +31,14 @@ function getMimeType(extension: string): string {
 }
 
 export async function uploadFile(page: Page, fileName: string) {
+  await page.waitForSelector('[data-testid="canvas_controls_dropdown"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("canvas_controls_dropdown").click();
   await page.getByTestId("fit_view").click();
+  await page.getByTestId("canvas_controls_dropdown").click();
+
   const fileManagement = await page
     .getByTestId("button_open_file_management")
     ?.isVisible();
diff --git a/uv.lock b/uv.lock
index 74ace48c6..ac418f6d9 100644
--- a/uv.lock
+++ b/uv.lock
@@ -12722,4 +12722,4 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/02/90/2633473864f67a15526324b007a9f96c96f56d5f32ef2a56cc12f9548723/zstandard-0.23.0-cp313-cp313-musllinux_1_2_x86_64.whl", hash = "sha256:fa6ce8b52c5987b3e34d5674b0ab529a4602b632ebab0a93b07bfb4dfc8f8a33", size = 5191299, upload-time = "2024-07-15T00:16:49.053Z" },
     { url = "https://files.pythonhosted.org/packages/b0/4c/315ca5c32da7e2dc3455f3b2caee5c8c2246074a61aac6ec3378a97b7136/zstandard-0.23.0-cp313-cp313-win32.whl", hash = "sha256:a9b07268d0c3ca5c170a385a0ab9fb7fdd9f5fd866be004c4ea39e44edce47dd", size = 430862, upload-time = "2024-07-15T00:16:51.003Z" },
     { url = "https://files.pythonhosted.org/packages/a2/bf/c6aaba098e2d04781e8f4f7c0ba3c7aa73d00e4c436bcc0cf059a66691d1/zstandard-0.23.0-cp313-cp313-win_amd64.whl", hash = "sha256:f3513916e8c645d0610815c257cbfd3242adfd5c4cfa78be514e5a3ebb42a41b", size = 495578, upload-time = "2024-07-15T00:16:53.135Z" },
-]
+]
\ No newline at end of file