Feat: Implement Customizable Shortcuts

This pull request improve user experience by enabling customization of keyboard shortcuts.
2024-06-10 01:08:26 -03:00 · 2024-06-10 01:08:26 -03:00 · 20e7b82ba4
commit 20e7b82ba4
parent 30ad86cb75 75fa7c147b
42 changed files with 1587 additions and 684 deletions
--- a/docs/docs/components/agents.mdx
+++ b/docs/docs/components/agents.mdx
@ -1,10 +1,12 @@
-import Admonition from '@theme/Admonition';
+import Admonition from "@theme/Admonition";

 # Agents

 <Admonition type="caution" icon="🚧" title="ZONE UNDER CONSTRUCTION">
  <p>
-        We appreciate your understanding as we polish our documentation – it may contain some rough edges. Share your feedback or report issues to help us improve! 🛠️📝
+    We appreciate your understanding as we polish our documentation – it may
+    contain some rough edges. Share your feedback or report issues to help us
+    improve! 🛠️📝
  </p>
 </Admonition>

--- a/docs/docs/components/chains.mdx
+++ b/docs/docs/components/chains.mdx
@ -7,9 +7,9 @@ import Admonition from "@theme/Admonition";

 <Admonition type="caution" icon="🚧" title="ZONE UNDER CONSTRUCTION">
  <p>
-  Thank you for your patience while we enhance our documentation. It may
-  have some imperfections. Share your feedback or report issues to help us
-  improve! 🛠️📝
+    Thank you for your patience while we enhance our documentation. It may have
+    some imperfections. Share your feedback or report issues to help us improve!
+    🛠️📝
  </p>
 </Admonition>

--- a/docs/docs/components/data.mdx
+++ b/docs/docs/components/data.mdx
@ -1,4 +1,4 @@
-import Admonition from '@theme/Admonition';
+import Admonition from "@theme/Admonition";

 # Data

--- a/docs/docs/components/embeddings.mdx
+++ b/docs/docs/components/embeddings.mdx
@ -5,7 +5,7 @@
 Used to load embedding models from [Amazon Bedrock](https://aws.amazon.com/bedrock/).

 | **Parameter**              | **Type** | **Description**                                                                                                                                     | **Default** |
-|-----------------------------|-------------------|------------------------------------------------------------------------------------------------------------------------------------|-------------|
+| -------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
 | `credentials_profile_name` | `str`    | Name of the AWS credentials profile in ~/.aws/credentials or ~/.aws/config, which has access keys or role information.                              |             |
 | `model_id`                 | `str`    | ID of the model to call, e.g., `amazon.titan-embed-text-v1`. This is equivalent to the `modelId` property in the `list-foundation-models` API.      |             |
 | `endpoint_url`             | `str`    | URL to set a specific service endpoint other than the default AWS endpoint.                                                                         |             |
@ -16,7 +16,7 @@ Used to load embedding models from [Amazon Bedrock](https://aws.amazon.com/bedro
 Used to load embedding models from [Cohere](https://cohere.com/).

 | **Parameter**    | **Type** | **Description**                                                           | **Default**          |
-|---------------------|-------------------|-------------------------------------------------------------------------------------------------------------------------------|-----------------------|
+| ---------------- | -------- | ------------------------------------------------------------------------- | -------------------- |
 | `cohere_api_key` | `str`    | API key required to authenticate with the Cohere service.                 |                      |
 | `model`          | `str`    | Language model used for embedding text documents and performing queries.  | `embed-english-v2.0` |
 | `truncate`       | `bool`   | Whether to truncate the input text to fit within the model's constraints. | `False`              |
@ -26,7 +26,7 @@ Used to load embedding models from [Cohere](https://cohere.com/).
 Generate embeddings using Azure OpenAI models.

 | **Parameter**     | **Type** | **Description**                                                                                    | **Default** |
-|---------------------|-------------------|-------------------------------------------------------------------------------------------------------------------------------|-----------------------|
+| ----------------- | -------- | -------------------------------------------------------------------------------------------------- | ----------- |
 | `Azure Endpoint`  | `str`    | Your Azure endpoint, including the resource. Example: `https://example-resource.azure.openai.com/` |             |
 | `Deployment Name` | `str`    | The name of the deployment.                                                                        |             |
 | `API Version`     | `str`    | The API version to use, options include various dates.                                             |             |
@ -37,7 +37,7 @@ Generate embeddings using Azure OpenAI models.
 Generate embeddings using Hugging Face Inference API models.

 | **Parameter**   | **Type** | **Description**                                       | **Default**              |
-|---------------------|-------------------|-------------------------------------------------------------------------------------------------------------------------------|-----------------------|
+| --------------- | -------- | ----------------------------------------------------- | ------------------------ |
 | `API Key`       | `str`    | API key for accessing the Hugging Face Inference API. |                          |
 | `API URL`       | `str`    | URL of the Hugging Face Inference API.                | `http://localhost:8080`  |
 | `Model Name`    | `str`    | Name of the model to use for embeddings.              | `BAAI/bge-large-en-v1.5` |
@ -51,7 +51,7 @@ Generate embeddings using Hugging Face Inference API models.
 Used to load embedding models from [HuggingFace](https://huggingface.co).

 | **Parameter**   | **Type** | **Description**                                | **Default**                               |
-|---------------------|-------------------|-------------------------------------------------------------------------------------------------------------------------------|-----------------------|
+| --------------- | -------- | ---------------------------------------------- | ----------------------------------------- |
 | `Cache Folder`  | `str`    | Folder path to cache HuggingFace models.       |                                           |
 | `Encode Kwargs` | `dict`   | Additional arguments for the encoding process. |                                           |
 | `Model Kwargs`  | `dict`   | Additional arguments for the model.            |                                           |
@ -63,7 +63,7 @@ Used to load embedding models from [HuggingFace](https://huggingface.co).
 Used to load embedding models from [OpenAI](https://openai.com/).

 | **Parameter**              | **Type**         | **Description**                                  | **Default**              |
-|-----------------------------|-------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------|
+| -------------------------- | ---------------- | ------------------------------------------------ | ------------------------ |
 | `OpenAI API Key`           | `str`            | The API key to use for accessing the OpenAI API. |                          |
 | `Default Headers`          | `Dict[str, str]` | Default headers for the HTTP requests.           |                          |
 | `Default Query`            | `NestedDict`     | Default query parameters for the HTTP requests.  |                          |
@ -92,7 +92,7 @@ Used to load embedding models from [OpenAI](https://openai.com/).
 Generate embeddings using Ollama models.

 | **Parameter**       | **Type** | **Description**                                                                          | **Default**              |
-|---------------------|-------------------|--------------------------------------------------------------------------------------------------------------------|---------------------------|
+| ------------------- | -------- | ---------------------------------------------------------------------------------------- | ------------------------ |
 | `Ollama Model`      | `str`    | Name of the Ollama model to use.                                                         | `llama2`                 |
 | `Ollama Base URL`   | `str`    | Base URL of the Ollama API.                                                              | `http://localhost:11434` |
 | `Model Temperature` | `float`  | Temperature parameter for the model. Adjusts the randomness in the generated embeddings. |                          |
@ -102,7 +102,7 @@ Generate embeddings using Ollama models.
 Wrapper around [Google Vertex AI](https://cloud.google.com/vertex-ai) [Embeddings API](https://cloud.google.com/vertex-ai/docs/generative-ai/embeddings/get-text-embeddings).

 | **Parameter**         | **Type**      | **Description**                                                                                                                      | **Default**   |
-|-----------------------------|-------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------|
+| --------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------- |
 | `credentials`         | `Credentials` | The default custom credentials to use.                                                                                               |               |
 | `location`            | `str`         | The default location to use when making API calls.                                                                                   | `us-central1` |
 | `max_output_tokens`   | `int`         | Token limit determines the maximum amount of text output from one prompt.                                                            | `128`         |
--- a/docs/docs/components/experimental.mdx
+++ b/docs/docs/components/experimental.mdx
@ -1,4 +1,4 @@
-import Admonition from '@theme/Admonition';
+import Admonition from "@theme/Admonition";

 # Experimental

@ -29,10 +29,12 @@ This component extracts specified keys from a record.
 **Parameters**

 - **Record:**
+
  - **Display Name:** Record
  - **Info:** The record from which to extract keys.

 - **Keys:**
+
  - **Display Name:** Keys
  - **Info:** The keys to be extracted.

@ -54,6 +56,7 @@ This component turns a function running a flow into a Tool.
 **Parameters**

 - **Flow Name:**
+
  - **Display Name:** Flow Name
  - **Info:** Select the flow to run.
  - **Options:** List of available flows.
@ -61,10 +64,12 @@ This component turns a function running a flow into a Tool.
  - **Refresh Button:** True

 - **Name:**
+
  - **Display Name:** Name
  - **Description:** The tool's name.

 - **Description:**
+
  - **Display Name:** Description
  - **Description:** Describes the tool.

@ -127,10 +132,12 @@ This component generates a notification.
 **Parameters**

 - **Name:**
+
  - **Display Name:** Name
  - **Info:** The notification's name.

 - **Record:**
+
  - **Display Name:** Record
  - **Info:** Optionally, a record to store in the notification.

@ -151,10 +158,12 @@ This component runs a specified flow.
 **Parameters**

 - **Input Value:**
+
  - **Display Name:** Input Value
  - **Multiline:** True

 - **Flow Name:**
+
  - **Display Name:** Flow Name
  - **Info:** Select the flow to run.
  - **Options:** List of available flows.
@ -177,14 +186,17 @@ This component executes a specified runnable.
 **Parameters**

 - **Input Key:**
+
  - **Display Name:** Input Key
  - **Info:** The input key.

 - **Inputs:**
+
  - **Display Name:** Inputs
  - **Info:** Inputs for the runnable.

 - **Runnable:**
+
  - **Display Name:** Runnable
  - **Info:** The runnable to execute.

@ -205,14 +217,17 @@ This component executes an SQL query.
 **Parameters**

 - **Database URL:**
+
  - **Display Name:** Database URL
  - **Info:** The database's URL.

 - **Include Columns:**
+
  - **Display Name:** Include Columns
  - **Info:** Whether to include columns in the result.

 - **Passthrough:**
+
  - **Display Name:** Passthrough
  - **Info:** Returns the query instead of raising an exception if an error occurs.

@ -233,10 +248,12 @@ This component dynamically generates a tool from a flow.
 **Parameters**

 - **Input Value:**
+
  - **Display Name:** Input Value
  - **Multiline:** True

 - **Flow Name:**
+
  - **Display Name:** Flow Name
  - **Info:** Select the flow to run.
  - **Options:** List of available flows.
--- a/docs/docs/components/helpers.mdx
+++ b/docs/docs/components/helpers.mdx
@ -1,4 +1,4 @@
-import Admonition from '@theme/Admonition';
+import Admonition from "@theme/Admonition";

 # Helpers

@ -50,7 +50,8 @@ Use this component as a template to create your custom component.

 <Admonition type="info" title="Info">
  <p>
-        Customize the <code>build_config</code> and <code>build</code> methods according to your requirements.
+    Customize the <code>build_config</code> and <code>build</code> methods
+    according to your requirements.
  </p>
 </Admonition>

--- a/docs/docs/components/memories.mdx
+++ b/docs/docs/components/memories.mdx
@ -1,10 +1,12 @@
-import Admonition from '@theme/Admonition';
+import Admonition from "@theme/Admonition";

 # Memories

 <Admonition type="caution" icon="🚧" title="ZONE UNDER CONSTRUCTION">
  <p>
-        Thanks for your patience as we improve our documentation—it might have some rough edges. Share your feedback or report issues to help us enhance it! 🛠️📝
+    Thanks for your patience as we improve our documentation—it might have some
+    rough edges. Share your feedback or report issues to help us enhance it!
+    🛠️📝
  </p>
 </Admonition>

@ -25,7 +27,11 @@ This component retrieves stored messages using various filters such as sender ty

 <Admonition type="note" title="Note">
  <p>
-        The component retrieves messages based on the provided criteria, including the specific file path for stored messages. If no specific criteria are provided, it returns the most recent messages up to the specified limit. This component can be used to review past interactions and analyze conversation flows.
+    The component retrieves messages based on the provided criteria, including
+    the specific file path for stored messages. If no specific criteria are
+    provided, it returns the most recent messages up to the specified limit.
+    This component can be used to review past interactions and analyze
+    conversation flows.
  </p>
 </Admonition>

@ -85,6 +91,7 @@ The `ConversationKGMemory` utilizes a knowledge graph to enhance memory capabili
 - **output_key**: Identifies the key under which the generated response

 is stored, enabling retrieval using this key.
+
 - **return_messages**: Controls whether the history is returned as a string or as a list of messages. Defaults to `False`.

 ---
--- a/docs/docs/components/model_specs.mdx
+++ b/docs/docs/components/model_specs.mdx
@ -1,10 +1,12 @@
-import Admonition from '@theme/Admonition';
+import Admonition from "@theme/Admonition";

 # Large Language Models (LLMs)

 <Admonition type="caution" icon="🚧" title="ZONE UNDER CONSTRUCTION">
  <p>
-        Thank you for your patience as we refine our documentation. You might encounter some inconsistencies. Please help us improve by sharing your feedback or reporting any issues! 🛠️📝
+    Thank you for your patience as we refine our documentation. You might
+    encounter some inconsistencies. Please help us improve by sharing your
+    feedback or reporting any issues! 🛠️📝
  </p>
 </Admonition>

@ -37,7 +39,9 @@ This is a wrapper for Anthropic's large language model designed for chat-based i
 `CTransformers` provides access to Transformer models implemented in C/C++ using the [GGML](https://github.com/ggerganov/ggml) library.

 <Admonition type="info">
-Ensure the `ctransformers` Python package is installed. Discover more about installation, supported models, and usage [here](https://github.com/marella/ctransformers).
+  Ensure the `ctransformers` Python package is installed. Discover more about
+  installation, supported models, and usage
+  [here](https://github.com/marella/ctransformers).
 </Admonition>

 - **config:** This configuration is for the Transformer models. Check the default settings and possible configurations at [config](https://github.com/marella/ctransformers#config).
@ -129,6 +133,7 @@ This component integrates with [Google Vertex AI](https://cloud.google.com/verte
 - **credentials**: Custom

 credentials used for API interactions.
+
 - **location**: The default location for API calls, defaulting to `us-central1`.
 - **max_output_tokens**: Limits the output tokens per prompt, defaulting to `128`.
 - **model_name**: The name of the Vertex AI model in use, defaulting to `text-bison`.
--- a/docs/docs/components/retrievers.mdx
+++ b/docs/docs/components/retrievers.mdx
@ -1,10 +1,12 @@
-import Admonition from '@theme/Admonition';
+import Admonition from "@theme/Admonition";

 # Retrievers

 <Admonition type="caution" icon="🚧" title="ZONE UNDER CONSTRUCTION">
  <p>
-        We appreciate your patience as we enhance our documentation. It may have some imperfections. Please share your feedback or report issues to help us improve. 🛠️📝
+    We appreciate your patience as we enhance our documentation. It may have
+    some imperfections. Please share your feedback or report issues to help us
+    improve. 🛠️📝
  </p>
 </Admonition>

--- a/docs/docs/components/tools.mdx
+++ b/docs/docs/components/tools.mdx
@ -1,10 +1,12 @@
-import Admonition from '@theme/Admonition';
+import Admonition from "@theme/Admonition";

 # Tools

 <Admonition type="caution" icon="🚧" title="ZONE UNDER CONSTRUCTION">
  <p>
-        Thanks for your patience as we refine our documentation. It might have some rough edges currently. Please share your feedback or report issues to help us enhance it! 🛠️📝
+    Thanks for your patience as we refine our documentation. It might have some
+    rough edges currently. Please share your feedback or report issues to help
+    us enhance it! 🛠️📝
  </p>
 </Admonition>

--- a/docs/docs/components/utilities.mdx
+++ b/docs/docs/components/utilities.mdx
@ -3,9 +3,9 @@ import Admonition from "@theme/Admonition";
 # Utilities

 <Admonition type="caution" icon="🚧" title="Zone Under Construction">
-  We appreciate your understanding as we polish our documentation—it may
-  contain some rough edges. Share your feedback or report issues to help us
-  improve! 🛠️📝
+  We appreciate your understanding as we polish our documentation—it may contain
+  some rough edges. Share your feedback or report issues to help us improve!
+  🛠️📝
 </Admonition>

 Utilities are a set of actions that can be used to perform common tasks in a flow. They are available in the **Utilities** section in the sidebar.
@ -86,7 +86,11 @@ Generates a unique identifier (UUID) for each instance it is invoked, providing
 - Returns a unique identifier (UUID) as a string. This UUID is generated using Python's `uuid` module, ensuring that each identifier is unique and can be used as a reliable reference in your application.

 <Admonition type="note" title="Note">
-    The Unique ID Generator is crucial for scenarios requiring distinct identifiers, such as session management, transaction tracking, or any context where different instances or entities must be uniquely identified. The generated UUID is provided as a hexadecimal string, offering a high level of uniqueness and security for identification purposes.
+  The Unique ID Generator is crucial for scenarios requiring distinct
+  identifiers, such as session management, transaction tracking, or any context
+  where different instances or entities must be uniquely identified. The
+  generated UUID is provided as a hexadecimal string, offering a high level of
+  uniqueness and security for identification purposes.
 </Admonition>

 For additional information and examples, please consult the [Langflow Components Custom Documentation](http://docs.langflow.org/components/custom).
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@ -60,6 +60,7 @@
        "react-dom": "^18.2.21",
        "react-error-boundary": "^4.0.11",
        "react-hook-form": "^7.51.4",
+        "react-hotkeys-hook": "^4.5.0",
        "react-icons": "^5.0.1",
        "react-laag": "^2.0.5",
        "react-markdown": "^8.0.7",
@ -11022,6 +11023,15 @@
        "react": "^16.8.0 || ^17 || ^18"
      }
    },
+    "node_modules/react-hotkeys-hook": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-4.5.0.tgz",
+      "integrity": "sha512-Samb85GSgAWFQNvVt3PS90LPPGSf9mkH/r4au81ZP1yOIFayLC3QAvqTgGtJ8YEDMXtPmaVBs6NgipHO6h4Mug==",
+      "peerDependencies": {
+        "react": ">=16.8.1",
+        "react-dom": ">=16.8.1"
+      }
+    },
    "node_modules/react-icons": {
      "version": "5.2.1",
      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@ -6,6 +6,7 @@
    "@headlessui/react": "^1.7.17",
    "@hookform/resolvers": "^3.3.4",
    "@million/lint": "^0.0.73",
+    "react-hotkeys-hook": "^4.5.0",
    "@radix-ui/react-accordion": "^1.1.2",
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-dialog": "^1.0.4",
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@ -36,7 +36,7 @@ import getFieldTitle from "../utils/get-field-title";
 import sortFields from "../utils/sort-fields";
 import ParameterComponent from "./components/parameterComponent";
 import { postCustomComponent } from "../../controllers/API";
-import { cloneDeep } from "lodash";
+import { useShortcutsStore } from "../../stores/shortcuts";

 export default function GenericNode({
  data,
@ -137,6 +137,8 @@ export default function GenericNode({
    return names;
  };

+  //  const [openWDoubleCLick, setOpenWDoubleCLick] = useState(false);
+
  const getBaseBorderClass = (selected) => {
    let className = selected ? "border border-ring" : "border";
    let frozenClass = selected ? "border-ring-frozen" : "border-frozen";
@ -231,10 +233,14 @@ export default function GenericNode({
    }
  };

+  const shortcuts = useShortcutsStore((state) => state.shortcuts);
+
  const memoizedNodeToolbarComponent = useMemo(() => {
    return (
      <NodeToolbar>
        <NodeToolbarComponent
+          //          openWDoubleClick={openWDoubleCLick}
+          //          setOpenWDoubleClick={setOpenWDoubleCLick}
          data={data}
          deleteNode={(id) => {
            takeSnapshot();
@ -266,11 +272,18 @@ export default function GenericNode({
    updateNodeCode,
    isOutdated,
    selected,
+    shortcuts,
+    //    openWDoubleCLick,
+    //    setOpenWDoubleCLick,
  ]);
  return (
    <>
      {memoizedNodeToolbarComponent}
      <div
+        //        onDoubleClick={(event) => {
+        //          if (!isWrappedWithClass(event, "nodoubleclick"))
+        //            setOpenWDoubleCLick(true);
+        //        }}
        className={getNodeBorderClassName(
          selected,
          showNode,
@ -344,7 +357,7 @@ export default function GenericNode({
                            event.preventDefault();
                          }}
                          data-testid={"title-" + data.node?.display_name}
-                          className="generic-node-tooltip-div cursor-text text-primary"
+                          className="nodoubleclick generic-node-tooltip-div cursor-text text-primary"
                        >
                          {data.node?.display_name}
                        </div>
@ -592,7 +605,7 @@ export default function GenericNode({
              ) : (
                <div
                  className={cn(
-                    "generic-node-desc-text cursor-text truncate-multiline word-break-break-word",
+                    "nodoubleclick generic-node-desc-text cursor-text truncate-multiline word-break-break-word",
                    (data.node?.description === "" ||
                      !data.node?.description) &&
                      nameEditable
--- a/src/frontend/src/components/chatComponent/index.tsx
+++ b/src/frontend/src/components/chatComponent/index.tsx
@ -1,40 +1,53 @@
 import { Transition } from "@headlessui/react";
+import { useHotkeys } from "react-hotkeys-hook";
 import { useEffect, useMemo, useRef, useState } from "react";
 import IOModal from "../../modals/IOModal";
 import ApiModal from "../../modals/apiModal/views";
 import ShareModal from "../../modals/shareModal";
 import useFlowStore from "../../stores/flowStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
+import { useShortcutsStore } from "../../stores/shortcuts";
 import { useStoreStore } from "../../stores/storeStore";
-import { classNames } from "../../utils/utils";
+import { classNames, isThereModal } from "../../utils/utils";
 import ForwardedIconComponent from "../genericIconComponent";
 import { Separator } from "../ui/separator";

 export default function FlowToolbar(): JSX.Element {
-  const [open, setOpen] = useState(false);
+  const preventDefault = true;
+  const [open, setOpen] = useState<boolean>(false);
+  const [openCodeModal, setOpenCodeModal] = useState<boolean>(false);
+  const [openShareModal, setOpenShareModal] = useState<boolean>(false);
+  function handleAPIWShortcut(e: KeyboardEvent) {
+    if (isThereModal() && !openCodeModal) return;
+    setOpenCodeModal((oldOpen) => !oldOpen);
+  }
+
+  function handleChatWShortcut(e: KeyboardEvent) {
+    if (isThereModal() && !open) return;
+    if (useFlowStore.getState().hasIO) {
+      setOpen((oldState) => !oldState);
+    }
+  }
+
+  function handleShareWShortcut(e: KeyboardEvent) {
+    if (isThereModal() && !openShareModal) return;
+    setOpenShareModal((oldState) => !oldState);
+  }
+
+  const openPlayground = useShortcutsStore((state) => state.open);
+  const api = useShortcutsStore((state) => state.api);
+  const flow = useShortcutsStore((state) => state.flow);
+
+  useHotkeys(openPlayground, handleChatWShortcut, { preventDefault });
+  useHotkeys(api, handleAPIWShortcut, { preventDefault });
+  useHotkeys(flow, handleShareWShortcut, { preventDefault });
+
  const hasIO = useFlowStore((state) => state.hasIO);
  const hasStore = useStoreStore((state) => state.hasStore);
  const validApiKey = useStoreStore((state) => state.validApiKey);
  const hasApiKey = useStoreStore((state) => state.hasApiKey);
  const currentFlow = useFlowsManagerStore((state) => state.currentFlow);

-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (
-        (event.key === "K" || event.key === "k") &&
-        (event.metaKey || event.ctrlKey) &&
-        useFlowStore.getState().hasIO
-      ) {
-        event.preventDefault();
-        setOpen((oldState) => !oldState);
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, []);
-
  const prevNodesRef = useRef<any[] | undefined>();

  const ModalMemo = useMemo(
@ -43,6 +56,8 @@ export default function FlowToolbar(): JSX.Element {
        is_component={false}
        component={currentFlow!}
        disabled={!hasApiKey || !validApiKey || !hasStore}
+        open={openShareModal}
+        setOpen={setOpenShareModal}
      >
        <button
          disabled={!hasApiKey || !validApiKey || !hasStore}
@ -66,7 +81,14 @@ export default function FlowToolbar(): JSX.Element {
        </button>
      </ShareModal>
    ),
-    [hasApiKey, validApiKey, currentFlow, hasStore],
+    [
+      hasApiKey,
+      validApiKey,
+      currentFlow,
+      hasStore,
+      openShareModal,
+      setOpenShareModal,
+    ],
  );

  return (
@ -115,7 +137,11 @@ export default function FlowToolbar(): JSX.Element {
            </div>
            <div className="flex cursor-pointer items-center gap-2">
              {currentFlow && currentFlow.data && (
-                <ApiModal flow={currentFlow}>
+                <ApiModal
+                  flow={currentFlow}
+                  open={openCodeModal}
+                  setOpen={setOpenCodeModal}
+                >
                  <div
                    className={classNames(
                      "relative inline-flex w-full items-center justify-center gap-1 px-5 py-3 text-sm font-semibold text-foreground transition-all duration-150 ease-in-out hover:bg-hover",
--- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
+++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
@ -9,7 +9,7 @@ import {

 import { useNavigate } from "react-router-dom";
 import { UPLOAD_ERROR_ALERT } from "../../../../constants/alerts_constants";
-import { SAVED_HOVER } from "../../../../constants/constants";
+import { IS_MAC, SAVED_HOVER } from "../../../../constants/constants";
 import ExportModal from "../../../../modals/exportModal";
 import FlowLogsModal from "../../../../modals/flowLogsModal";
 import FlowSettingsModal from "../../../../modals/flowSettingsModal";
@ -20,8 +20,10 @@ import { cn } from "../../../../utils/utils";
 import IconComponent from "../../../genericIconComponent";
 import ShadTooltip from "../../../shadTooltipComponent";
 import { Button } from "../../../ui/button";
+import { useShortcutsStore } from "../../../../stores/shortcuts";

 export const MenuBar = ({}: {}): JSX.Element => {
+  const shortcuts = useShortcutsStore((state) => state.shortcuts);
  const addFlow = useFlowsManagerStore((state) => state.addFlow);
  const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
  const setErrorData = useAlertStore((state) => state.setErrorData);
@ -113,7 +115,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
                      title: UPLOAD_ERROR_ALERT,
                      list: [error],
                    });
-                  },
+                  }
                );
              }}
            >
@ -137,17 +139,19 @@ export const MenuBar = ({}: {}): JSX.Element => {
            >
              <IconComponent name="Undo" className="header-menu-options " />
              Undo
-              {navigator.userAgent.toUpperCase().includes("MAC") ? (
+              {IS_MAC ? (
                <IconComponent
                  name="Command"
                  className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
                />
              ) : (
                <span className="absolute right-[1.15rem] top-[0.40em] stroke-2">
-                  Ctrl +{" "}
+                  {
+                    shortcuts.find((s) => s.name.toLowerCase() === "undo")
+                      ?.shortcut
+                  }
                </span>
              )}
-              <span className="absolute right-2 top-[0.4em]">Z</span>
            </DropdownMenuItem>
            <DropdownMenuItem
              onClick={() => {
@ -157,17 +161,19 @@ export const MenuBar = ({}: {}): JSX.Element => {
            >
              <IconComponent name="Redo" className="header-menu-options " />
              Redo
-              {navigator.userAgent.toUpperCase().includes("MAC") ? (
+              {IS_MAC ? (
                <IconComponent
                  name="Command"
                  className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
                />
              ) : (
                <span className="absolute right-[1.15rem] top-[0.40em] stroke-2">
-                  Ctrl +{" "}
+                  {
+                    shortcuts.find((s) => s.name.toLowerCase() === "redo")
+                      ?.shortcut
+                  }
                </span>
              )}
-              <span className="absolute right-2 top-[0.4em]">Y</span>
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
@ -195,7 +201,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
              name={isBuilding || saveLoading ? "Loader2" : "CheckCircle2"}
              className={cn(
                "h-4 w-4",
-                isBuilding || saveLoading ? "animate-spin" : "animate-wiggle",
+                isBuilding || saveLoading ? "animate-spin" : "animate-wiggle"
              )}
            />
            {printByBuildStatus()}
--- a/src/frontend/src/components/renderIconComponent/index.tsx
+++ b/src/frontend/src/components/renderIconComponent/index.tsx
@ -0,0 +1,46 @@
+import ForwardedIconComponent from "../genericIconComponent";
+
+export default function RenderIcons({
+  isMac,
+  hasShift,
+  filteredShortcut,
+  shortcutWPlus,
+}: {
+  isMac: boolean;
+  hasShift: boolean;
+  filteredShortcut: string[];
+  shortcutWPlus: string[];
+}): JSX.Element {
+  return hasShift ? (
+    <>
+      {isMac ? (
+        <ForwardedIconComponent name="Command" className="h-4 w-4" />
+      ) : (
+        filteredShortcut[0]
+      )}
+      <ForwardedIconComponent name="ArrowBigUp" className="ml-1 h-5 w-5" />
+      {filteredShortcut.map((key, idx) => {
+        if (idx > 0) {
+          return <span className="ml-1"> {key.toUpperCase()} </span>;
+        }
+      })}
+    </>
+  ) : (
+    <>
+      {shortcutWPlus[0].toLowerCase() === "space" ? (
+        "Space"
+      ) : shortcutWPlus[0].length <= 1 ? (
+        shortcutWPlus[0]
+      ) : isMac ? (
+        <ForwardedIconComponent name="Command" className="h-4 w-4" />
+      ) : (
+        shortcutWPlus[0]
+      )}
+      {shortcutWPlus.map((key, idx) => {
+        if (idx > 0) {
+          return <span className="ml-0.5"> {key.toUpperCase()} </span>;
+        }
+      })}
+    </>
+  );
+}
--- a/src/frontend/src/components/ui/select-custom.tsx
+++ b/src/frontend/src/components/ui/select-custom.tsx
@ -33,10 +33,10 @@ const SelectContent = React.forwardRef<
    <SelectPrimitive.Content
      ref={ref}
      className={cn(
-        "relative z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "relative z-50 min-w-[14rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        position === "popper" &&
          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className
+        className,
      )}
      position={position}
      {...props}
@ -45,7 +45,7 @@ const SelectContent = React.forwardRef<
        className={cn(
          "p-1",
          position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
        )}
      >
        {children}
@ -75,7 +75,7 @@ const SelectItem = React.forwardRef<
    ref={ref}
    className={cn(
      "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-3 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
    )}
    {...props}
  >
--- a/src/frontend/src/constants/constants.ts
+++ b/src/frontend/src/constants/constants.ts
@ -734,6 +734,91 @@ export const AUTHORIZED_DUPLICATE_REQUESTS = [

 export const SAVE_DEBOUNCE_TIME = 300;

+export const IS_MAC = navigator.userAgent.toUpperCase().includes("MAC");
+
+export const defaultShortcuts = [
+  {
+    name: "Advanced Settings",
+    shortcut: `${IS_MAC ? "Cmd" : "Ctrl"} + Shift + A`,
+  },
+  {
+    name: "Minimize",
+    shortcut: `${IS_MAC ? "Cmd" : "Ctrl"} + Q`,
+  },
+  {
+    name: "Code",
+    shortcut: `Space`,
+  },
+  {
+    name: "Copy",
+    shortcut: `${IS_MAC ? "Cmd" : "Ctrl"} + C`,
+  },
+  {
+    name: "Duplicate",
+    shortcut: `${IS_MAC ? "Cmd" : "Ctrl"} + D`,
+  },
+  {
+    name: "Share",
+    shortcut: `${IS_MAC ? "Cmd" : "Ctrl"} + Shift + S`,
+  },
+  {
+    name: "Docs",
+    shortcut: `${IS_MAC ? "Cmd" : "Ctrl"} + Shift + D`,
+  },
+  {
+    name: "Save",
+    shortcut: `${IS_MAC ? "Cmd" : "Ctrl"} + S`,
+  },
+  {
+    name: "Delete",
+    shortcut: "Backspace",
+  },
+  {
+    name: "Open playground",
+    shortcut: `${IS_MAC ? "Cmd" : "Ctrl"} + K`,
+  },
+  {
+    name: "Undo",
+    shortcut: `${IS_MAC ? "Cmd" : "Ctrl"} + Z`,
+  },
+  {
+    name: "Redo",
+    shortcut: `${IS_MAC ? "Cmd" : "Ctrl"} + Y`,
+  },
+  {
+    name: "Group",
+    shortcut: `${IS_MAC ? "Cmd" : "Ctrl"} + G`,
+  },
+  {
+    name: "Cut",
+    shortcut: `${IS_MAC ? "Cmd" : "Ctrl"} + X`,
+  },
+  {
+    name: "Paste",
+    shortcut: `${IS_MAC ? "Cmd" : "Ctrl"} + V`,
+  },
+  {
+    name: "API",
+    shortcut: `${IS_MAC ? "Cmd" : "Ctrl"} + R`,
+  },
+  {
+    name: "Download",
+    shortcut: `${IS_MAC ? "Cmd" : "Ctrl"} + J`,
+  },
+  {
+    name: "Update",
+    shortcut: `${IS_MAC ? "Cmd" : "Ctrl"} + U`,
+  },
+  {
+    name: "Freeze",
+    shortcut: `${IS_MAC ? "Cmd" : "Ctrl"} + F`,
+  },
+  {
+    name: "Flow Share",
+    shortcut: `${IS_MAC ? "Cmd" : "Ctrl"} + B`,
+  },
+];
+
 export const DEFAULT_TABLE_ALERT_MSG = `Oops! It seems there's no data to display right now. Please check back later.`;

 export const DEFAULT_TABLE_ALERT_TITLE = "No Data Available";
@ -741,3 +826,6 @@ export const DEFAULT_TABLE_ALERT_TITLE = "No Data Available";
 export const LOCATIONS_TO_RETURN = ["/flow/", "/settings/"];

 export const MAX_BATCH_SIZE = 50;
+
+export const MODAL_CLASSES =
+  "nopan nodelete nodrag noundo nocopy fixed inset-0 bottom-0 left-0 right-0 top-0 z-50 overflow-auto bg-blur-shared backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0";
--- a/src/frontend/src/icons/Groq/index.tsx
+++ b/src/frontend/src/icons/Groq/index.tsx
@ -4,5 +4,5 @@ import SvgGroqLogo from "./GroqLogo";
 export const GroqIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
  (props, ref) => {
    return <SvgGroqLogo ref={ref} {...props} />;
-  }
+  },
 );
--- a/src/frontend/src/modals/apiModal/index.tsx
+++ b/src/frontend/src/modals/apiModal/index.tsx
@ -0,0 +1,252 @@
+import "ace-builds/src-noconflict/ext-language_tools";
+import "ace-builds/src-noconflict/mode-python";
+import "ace-builds/src-noconflict/theme-github";
+import "ace-builds/src-noconflict/theme-twilight";
+import {
+  ReactNode,
+  forwardRef,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+// import "ace-builds/webpack-resolver";
+import CodeTabsComponent from "../../components/codeTabsComponent";
+import IconComponent from "../../components/genericIconComponent";
+import {
+  EXPORT_CODE_DIALOG,
+  LANGFLOW_SUPPORTED_TYPES,
+} from "../../constants/constants";
+import { AuthContext } from "../../contexts/authContext";
+import useFlowStore from "../../stores/flowStore";
+import { TemplateVariableType } from "../../types/api";
+import { tweakType, uniqueTweakType } from "../../types/components";
+import { FlowType, NodeType } from "../../types/flow/index";
+import { buildTweaks, convertArrayToObj } from "../../utils/reactflowUtils";
+import {
+  getCurlCode,
+  getPythonApiCode,
+  getPythonCode,
+  getWidgetCode,
+  tabsArray,
+} from "../../utils/utils";
+import BaseModal from "../baseModal";
+
+const ApiModal = forwardRef(
+  (
+    {
+      flow,
+      children,
+      open: myOpen,
+      setOpen: mySetOpen,
+    }: {
+      flow: FlowType;
+      children: ReactNode;
+      open: any;
+      setOpen: any;
+    },
+    ref
+  ) => {
+    const { autoLogin } = useContext(AuthContext);
+    const [open, setOpen] =
+      mySetOpen !== undefined && myOpen !== undefined
+        ? [myOpen, mySetOpen]
+        : useState(false);
+    const [activeTab, setActiveTab] = useState("0");
+    const tweak = useRef<tweakType>([]);
+    const tweaksList = useRef<string[]>([]);
+    const [getTweak, setTweak] = useState<tweakType>([]);
+    const flowState = useFlowStore((state) => state.flowState);
+    const pythonApiCode = getPythonApiCode(flow, autoLogin, tweak.current);
+    const curl_code = getCurlCode(flow, autoLogin, tweak.current);
+    const pythonCode = getPythonCode(flow, tweak.current);
+    const widgetCode = getWidgetCode(flow, autoLogin, flowState);
+    const tweaksCode = buildTweaks(flow);
+    const codesArray = [
+      curl_code,
+      pythonApiCode,
+      pythonCode,
+      widgetCode,
+      pythonCode,
+    ];
+    const [tabs, setTabs] = useState(tabsArray(codesArray, 0));
+
+    function startState() {
+      tweak.current = [];
+      setTweak([]);
+      tweaksList.current = [];
+    }
+
+    useEffect(() => {
+      if (flow["data"]!["nodes"].length == 0) {
+        startState();
+      } else {
+        tweak.current = [];
+        const t = buildTweaks(flow);
+        tweak.current.push(t);
+      }
+
+      filterNodes();
+
+      if (Object.keys(tweaksCode).length > 0) {
+        setActiveTab("0");
+        setTabs(tabsArray(codesArray, 1));
+      } else {
+        setTabs(tabsArray(codesArray, 1));
+      }
+    }, [flow["data"]!["nodes"], open]);
+
+    function filterNodes() {
+      let arrNodesWithValues: string[] = [];
+
+      flow["data"]!["nodes"].forEach((node) => {
+        if (!node["data"]["node"]["template"]) {
+          return;
+        }
+        Object.keys(node["data"]["node"]["template"])
+          .filter(
+            (templateField) =>
+              templateField.charAt(0) !== "_" &&
+              node.data.node.template[templateField].show &&
+              LANGFLOW_SUPPORTED_TYPES.has(
+                node.data.node.template[templateField].type
+              )
+          )
+          .map((n, i) => {
+            arrNodesWithValues.push(node["id"]);
+          });
+      });
+
+      tweaksList.current = arrNodesWithValues.filter((value, index, self) => {
+        return self.indexOf(value) === index;
+      });
+    }
+    function buildTweakObject(
+      tw: string,
+      changes: string | string[] | boolean | number | Object[] | Object,
+      template: TemplateVariableType
+    ) {
+      if (typeof changes === "string" && template.type === "float") {
+        changes = parseFloat(changes);
+      }
+      if (typeof changes === "string" && template.type === "int") {
+        changes = parseInt(changes);
+      }
+      if (template.list === true && Array.isArray(changes)) {
+        changes = changes?.filter((x) => x !== "");
+      }
+
+      if (template.type === "dict" && Array.isArray(changes)) {
+        changes = convertArrayToObj(changes);
+      }
+
+      if (template.type === "NestedDict") {
+        changes = JSON.stringify(changes);
+      }
+
+      const existingTweak = tweak.current.find((element) =>
+        element.hasOwnProperty(tw)
+      );
+
+      if (existingTweak) {
+        existingTweak[tw][template["name"]!] = changes as string;
+
+        if (existingTweak[tw][template["name"]!] == template.value) {
+          tweak.current.forEach((element) => {
+            if (element[tw] && Object.keys(element[tw])?.length === 0) {
+              tweak.current = tweak.current.filter((obj) => {
+                const prop = obj[Object.keys(obj)[0]].prop;
+                return prop !== undefined && prop !== null && prop !== "";
+              });
+            }
+          });
+        }
+      } else {
+        const newTweak = {
+          [tw]: {
+            [template["name"]!]: changes,
+          },
+        } as uniqueTweakType;
+        tweak.current.push(newTweak);
+      }
+
+      const pythonApiCode = getPythonApiCode(flow, autoLogin, tweak.current);
+      const curl_code = getCurlCode(flow, autoLogin, tweak.current);
+      const pythonCode = getPythonCode(flow, tweak.current);
+      const widgetCode = getWidgetCode(flow, autoLogin, flowState);
+
+      tabs![0].code = curl_code;
+      tabs![1].code = pythonApiCode;
+      tabs![2].code = pythonCode;
+      tabs![3].code = widgetCode;
+
+      setTweak(tweak.current);
+    }
+
+    function buildContent(value: string) {
+      const htmlContent = (
+        <div className="w-[200px]">
+          <span>{value != null && value != "" ? value : "None"}</span>
+        </div>
+      );
+      return htmlContent;
+    }
+
+    function getValue(
+      value: string,
+      node: NodeType,
+      template: TemplateVariableType
+    ) {
+      let returnValue = value ?? "";
+
+      if (getTweak.length > 0) {
+        for (const obj of getTweak) {
+          Object.keys(obj).forEach((key) => {
+            const value = obj[key];
+            if (key == node["id"]) {
+              Object.keys(value).forEach((key) => {
+                if (key == template["name"]) {
+                  returnValue = value[key];
+                }
+              });
+            }
+          });
+        }
+      } else {
+        return value ?? "";
+      }
+      return returnValue;
+    }
+
+    return (
+      <BaseModal open={open} setOpen={setOpen}>
+        <BaseModal.Trigger asChild>{children}</BaseModal.Trigger>
+        <BaseModal.Header description={EXPORT_CODE_DIALOG}>
+          <span className="pr-2">API</span>
+          <IconComponent
+            name="Code2"
+            className="h-6 w-6 pl-1 text-gray-800 dark:text-white"
+            aria-hidden="true"
+          />
+        </BaseModal.Header>
+        <BaseModal.Content>
+          <CodeTabsComponent
+            flow={flow}
+            tabs={tabs!}
+            activeTab={activeTab}
+            setActiveTab={setActiveTab}
+            tweaks={{
+              tweak,
+              tweaksList,
+              buildContent,
+              buildTweakObject,
+              getValue,
+            }}
+          />
+        </BaseModal.Content>
+      </BaseModal>
+    );
+  }
+);
+
+export default ApiModal;
--- a/src/frontend/src/modals/apiModal/utils/get-python-code.tsx
+++ b/src/frontend/src/modals/apiModal/utils/get-python-code.tsx
@ -6,7 +6,7 @@
 */
 export default function getPythonCode(
  flowName: string,
-  tweaksBuildedObject
+  tweaksBuildedObject,
 ): string {
  const tweaksObject = tweaksBuildedObject[0];

--- a/src/frontend/src/modals/apiModal/views/index.tsx
+++ b/src/frontend/src/modals/apiModal/views/index.tsx
@ -31,9 +31,13 @@ const ApiModal = forwardRef(
    {
      flow,
      children,
+      open: myOpen,
+      setOpen: mySetOpen,
    }: {
      flow: FlowType;
      children: ReactNode;
+      open?: boolean;
+      setOpen?: (a: boolean | ((o?: boolean) => boolean)) => void;
    },
    ref,
  ) => {
@ -44,7 +48,10 @@ const ApiModal = forwardRef(

    const [activeTweaks, setActiveTweaks] = useState(false);
    const { autoLogin } = useContext(AuthContext);
-    const [open, setOpen] = useState(false);
+    const [open, setOpen] =
+      mySetOpen !== undefined && myOpen !== undefined
+        ? [myOpen, mySetOpen]
+        : useState(false);
    const [activeTab, setActiveTab] = useState("0");
    const pythonApiCode = getPythonApiCode(
      flow?.id,
--- a/src/frontend/src/modals/editNodeModal/index.tsx
+++ b/src/frontend/src/modals/editNodeModal/index.tsx
@ -15,11 +15,13 @@ const EditNodeModal = forwardRef(
      nodeLength,
      open,
      setOpen,
+      //      setOpenWDoubleClick,
      data,
    }: {
      nodeLength: number;
      open: boolean;
      setOpen: (open: boolean) => void;
+      //      setOpenWDoubleClick: (open: boolean) => void;
      data: NodeDataType;
    },
    ref,
@ -55,6 +57,12 @@ const EditNodeModal = forwardRef(
      }
    }, [gridApi, open]);

+    //    useEffect(() => {
+    //      return () => {
+    //        setOpenWDoubleClick(false);
+    //      };
+    //    }, []);
+
    return (
      <BaseModal
        key={data.id}
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@ -209,7 +209,7 @@ export default function GenericModal({
          <div
            className={classNames(
              !isEdit ? "rounded-lg border" : "",
-              "flex h-full w-full",
+              "flex h-full max-h-[85%] w-full",
            )}
          >
            {type === TypeModal.PROMPT && isEdit && !readonly ? (
@ -244,7 +244,7 @@ export default function GenericModal({
            ) : type !== TypeModal.PROMPT ? (
              <Textarea
                ref={textRef}
-                className="form-input h-full w-full rounded-lg focus-visible:ring-1"
+                className="form-input h-full w-full overflow-auto rounded-lg focus-visible:ring-1"
                value={inputValue}
                onChange={(event) => {
                  setInputValue(event.target.value);
--- a/src/frontend/src/modals/shareModal/index.tsx
+++ b/src/frontend/src/modals/shareModal/index.tsx
@ -47,7 +47,10 @@ export default function ShareModal({

  const setSuccessData = useAlertStore((state) => state.setSuccessData);
  const setErrorData = useAlertStore((state) => state.setErrorData);
-  const [internalOpen, internalSetOpen] = useState(children ? false : true);
+  const [internalOpen, internalSetOpen] =
+    setOpen !== undefined && open !== undefined
+      ? [open, setOpen]
+      : useState(children ? false : true);
  const [openConfirmationModal, setOpenConfirmationModal] = useState(false);
  const nameComponent = is_component ? "component" : "workflow";

@ -66,13 +69,13 @@ export default function ShareModal({
  const description = component?.description ?? "";

  useEffect(() => {
-    if (open || internalOpen) {
+    if (internalOpen) {
      if (hasApiKey && hasStore) {
        handleGetTags();
        handleGetNames();
      }
    }
-  }, [open, internalOpen, hasApiKey, hasStore]);
+  }, [internalOpen, hasApiKey, hasStore]);

  function handleGetTags() {
    setLoadingTags(true);
@ -146,8 +149,7 @@ export default function ShareModal({

  const handleUpdateComponent = () => {
    handleShareComponent(true);
-    if (setOpen) setOpen(false);
-    else internalSetOpen(false);
+    internalSetOpen(false);
  };

  const handleExportComponent = () => {
@ -199,8 +201,8 @@ export default function ShareModal({
    <>
      <BaseModal
        size="smaller-h-full"
-        open={(!disabled && open) ?? internalOpen}
-        setOpen={setOpen ?? internalSetOpen}
+        open={!disabled && internalOpen}
+        setOpen={internalSetOpen}
        onSubmit={() => {
          const isNameAvailable = !unavaliableNames.some(
            (element) => element.name === name,
@ -208,7 +210,7 @@ export default function ShareModal({

          if (isNameAvailable) {
            handleShareComponent();
-            (setOpen || internalSetOpen)(false);
+            internalSetOpen(false);
          } else {
            setOpenConfirmationModal(true);
          }
@ -289,7 +291,7 @@ export default function ShareModal({
                variant="outline"
                className="gap-2"
                onClick={() => {
-                  (setOpen || internalSetOpen)(false);
+                  internalSetOpen(false);
                  handleExportComponent();
                }}
              >
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@ -1,5 +1,13 @@
 import _, { cloneDeep } from "lodash";
-import { MouseEvent, useCallback, useEffect, useRef, useState } from "react";
+import {
+  KeyboardEvent,
+  MouseEvent,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { useHotkeys } from "react-hotkeys-hook";
 import ReactFlow, {
  Background,
  Connection,
@ -21,6 +29,7 @@ import {
 import useAlertStore from "../../../../stores/alertStore";
 import useFlowStore from "../../../../stores/flowStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
+import { useShortcutsStore } from "../../../../stores/shortcuts";
 import { useTypesStore } from "../../../../stores/typesStore";
 import { APIClassType } from "../../../../types/api";
 import { FlowType, NodeType } from "../../../../types/flow";
@ -50,6 +59,7 @@ export default function Page({
  flow: FlowType;
  view?: boolean;
 }): JSX.Element {
+  const preventDefault = true;
  const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
  const autoSaveCurrentFlow = useFlowsManagerStore(
    (state) => state.autoSaveCurrentFlow,
@ -141,119 +151,13 @@ export default function Page({

  const setNode = useFlowStore((state) => state.setNode);
  useEffect(() => {
-    const onKeyDown = (event: KeyboardEvent) => {
-      const selectedNode = lastSelection?.nodes ?? [];
-      const selectedEdges = lastSelection?.edges ?? [];
-      if (
-        selectionMenuVisible &&
-        (event.ctrlKey || event.metaKey) &&
-        event.key === "g"
-      ) {
-        event.preventDefault();
-        handleGroupNode();
-      }
-      if (
-        (event.ctrlKey || event.metaKey) &&
-        event.key === "p" &&
-        selectedNode.length > 0
-      ) {
-        event.preventDefault();
-        setNode(selectedNode[0].id, (old) => ({
-          ...old,
-          data: {
-            ...old.data,
-            node: {
-              ...old.data.node,
-              frozen: old.data?.node?.frozen ? false : true,
-            },
-          },
-        }));
-      }
-      if (
-        (event.ctrlKey || event.metaKey) &&
-        event.key === "d" &&
-        selectedNode.length > 0
-      ) {
-        event.preventDefault();
-        paste(
-          { nodes: selectedNode, edges: selectedEdges },
-          {
-            x: position.current.x,
-            y: position.current.y,
-          },
-        );
-      }
-      if (!isWrappedWithClass(event, "noundo")) {
-        if (
-          (event.key === "y" || (event.key === "z" && event.shiftKey)) &&
-          (event.ctrlKey || event.metaKey)
-        ) {
-          event.preventDefault(); // prevent the default action
-          redo();
-        } else if (event.key === "z" && (event.ctrlKey || event.metaKey)) {
-          event.preventDefault();
-          undo();
-        }
-      }
-      if (
-        !isWrappedWithClass(event, "nocopy") &&
-        window.getSelection()?.toString().length === 0
-      ) {
-        if (
-          (event.ctrlKey || event.metaKey) &&
-          event.key === "c" &&
-          lastSelection
-        ) {
-          event.preventDefault();
-          setLastCopiedSelection(_.cloneDeep(lastSelection));
-        } else if (
-          (event.ctrlKey || event.metaKey) &&
-          event.key === "x" &&
-          lastSelection
-        ) {
-          event.preventDefault();
-          setLastCopiedSelection(_.cloneDeep(lastSelection), true);
-        } else if (
-          (event.ctrlKey || event.metaKey) &&
-          event.key === "v" &&
-          lastCopiedSelection
-        ) {
-          event.preventDefault();
-          takeSnapshot();
-          paste(lastCopiedSelection, {
-            x: position.current.x,
-            y: position.current.y,
-          });
-        } else if (
-          (event.ctrlKey || event.metaKey) &&
-          event.key === "g" &&
-          lastSelection
-        ) {
-          event.preventDefault();
-        }
-      }
-      if (!isWrappedWithClass(event, "nodelete")) {
-        if (
-          (event.key === "Delete" || event.key === "Backspace") &&
-          lastSelection
-        ) {
-          event.preventDefault();
-          takeSnapshot();
-          deleteNode(lastSelection.nodes.map((node) => node.id));
-          deleteEdge(lastSelection.edges.map((edge) => edge.id));
-        }
-      }
-    };
-
    const handleMouseMove = (event) => {
      position.current = { x: event.clientX, y: event.clientY };
    };

-    document.addEventListener("keydown", onKeyDown);
    document.addEventListener("mousemove", handleMouseMove);

    return () => {
-      document.removeEventListener("keydown", onKeyDown);
      document.removeEventListener("mousemove", handleMouseMove);
    };
  }, [lastCopiedSelection, lastSelection, takeSnapshot, selectionMenuVisible]);
@ -274,6 +178,115 @@ export default function Page({
    };
  }, []);

+  function handleUndo(e: KeyboardEvent) {
+    e.preventDefault();
+    if (!isWrappedWithClass(e, "noundo")) {
+      undo();
+    }
+  }
+
+  function handleRedo(e: KeyboardEvent) {
+    e.preventDefault();
+    if (!isWrappedWithClass(e, "noundo")) {
+      redo();
+    }
+  }
+
+  function handleGroup(e: KeyboardEvent) {
+    e.preventDefault();
+    if (selectionMenuVisible) {
+      handleGroupNode();
+    }
+  }
+
+  function handleDuplicate(e: KeyboardEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+    const selectedNode = nodes.filter((obj) => obj.selected);
+    if (selectedNode.length > 0) {
+      paste(
+        { nodes: selectedNode, edges: [] },
+        {
+          x: position.current.x,
+          y: position.current.y,
+        },
+      );
+    }
+  }
+
+  function handleCopy(e: KeyboardEvent) {
+    e.preventDefault();
+    if (
+      !isWrappedWithClass(e, "nocopy") &&
+      window.getSelection()?.toString().length === 0 &&
+      lastSelection
+    ) {
+      setLastCopiedSelection(_.cloneDeep(lastSelection));
+    }
+  }
+
+  function handleCut(e: KeyboardEvent) {
+    e.preventDefault();
+    if (
+      !isWrappedWithClass(e, "nocopy") &&
+      window.getSelection()?.toString().length === 0 &&
+      lastSelection
+    ) {
+      setLastCopiedSelection(_.cloneDeep(lastSelection), true);
+    }
+  }
+
+  function handlePaste(e: KeyboardEvent) {
+    e.preventDefault();
+    if (
+      !isWrappedWithClass(e, "nocopy") &&
+      window.getSelection()?.toString().length === 0 &&
+      lastCopiedSelection
+    ) {
+      takeSnapshot();
+      paste(lastCopiedSelection, {
+        x: position.current.x,
+        y: position.current.y,
+      });
+    }
+  }
+
+  function handleDelete(e: KeyboardEvent) {
+    e.preventDefault();
+    if (!isWrappedWithClass(e, "nodelete") && lastSelection) {
+      takeSnapshot();
+      deleteNode(lastSelection.nodes.map((node) => node.id));
+      deleteEdge(lastSelection.edges.map((edge) => edge.id));
+    }
+  }
+
+  const undoAction = useShortcutsStore((state) => state.undo);
+  const redoAction = useShortcutsStore((state) => state.redo);
+  const copyAction = useShortcutsStore((state) => state.copy);
+  const duplicate = useShortcutsStore((state) => state.duplicate);
+  const deleteAction = useShortcutsStore((state) => state.delete);
+  const groupAction = useShortcutsStore((state) => state.group);
+  const cutAction = useShortcutsStore((state) => state.cut);
+  const pasteAction = useShortcutsStore((state) => state.paste);
+  //@ts-ignore
+  useHotkeys(undoAction, handleUndo, { preventDefault });
+  //@ts-ignore
+  useHotkeys(redoAction, handleRedo, { preventDefault });
+  //@ts-ignore
+  useHotkeys(groupAction, handleGroup, { preventDefault });
+  //@ts-ignore
+  useHotkeys(duplicate, handleDuplicate, { preventDefault });
+  //@ts-ignore
+  useHotkeys(copyAction, handleCopy, { preventDefault });
+  //@ts-ignore
+  useHotkeys(cutAction, handleCut, { preventDefault });
+  //@ts-ignore
+  useHotkeys(pasteAction, handlePaste, { preventDefault });
+  //@ts-ignore
+  useHotkeys(deleteAction, handleDelete, { preventDefault });
+  //@ts-ignore
+  useHotkeys("delete", handleDelete, { preventDefault });
+
  useEffect(() => {
    setSHowCanvas(
      Object.keys(templates).length > 0 && Object.keys(types).length > 0,
@ -473,6 +486,7 @@ export default function Page({
            zoomOnScroll={!view}
            zoomOnPinch={!view}
            panOnDrag={!view}
+            panActivationKeyCode={""}
            proOptions={{ hideAttribution: true }}
            onPaneClick={onPaneClick}
          >
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@ -1,8 +1,11 @@
 import _, { cloneDeep } from "lodash";
 import { useEffect, useState } from "react";
+import { useHotkeys } from "react-hotkeys-hook";
 import { useUpdateNodeInternals } from "reactflow";
 import CodeAreaComponent from "../../../../components/codeAreaComponent";
-import IconComponent from "../../../../components/genericIconComponent";
+import IconComponent, {
+  ForwardedIconComponent,
+} from "../../../../components/genericIconComponent";
 import ShadTooltip from "../../../../components/shadTooltipComponent";
 import {
  Select,
@ -10,7 +13,6 @@ import {
  SelectItem,
  SelectTrigger,
 } from "../../../../components/ui/select-custom";
-import { postCustomComponent } from "../../../../controllers/API";
 import ConfirmationModal from "../../../../modals/confirmationModal";
 import EditNodeModal from "../../../../modals/editNodeModal";
 import ShareModal from "../../../../modals/shareModal";
@ -18,6 +20,7 @@ import useAlertStore from "../../../../stores/alertStore";
 import { useDarkStore } from "../../../../stores/darkStore";
 import useFlowStore from "../../../../stores/flowStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
+import { useShortcutsStore } from "../../../../stores/shortcuts";
 import { useStoreStore } from "../../../../stores/storeStore";
 import { useTypesStore } from "../../../../stores/typesStore";
 import { APIClassType } from "../../../../types/api";
@ -29,8 +32,9 @@ import {
  expandGroupNode,
  updateFlowPosition,
 } from "../../../../utils/reactflowUtils";
-import { classNames, cn } from "../../../../utils/utils";
+import { classNames, cn, isThereModal } from "../../../../utils/utils";
 import ToolbarSelectItem from "./toolbarSelectItem";
+import RenderIcons from "../../../../components/renderIconComponent";

 export default function NodeToolbarComponent({
  data,
@ -43,6 +47,15 @@ export default function NodeToolbarComponent({
  setShowState,
  onCloseAdvancedModal,
 }: nodeToolbarPropsType): JSX.Element {
+  const version = useDarkStore((state) => state.version);
+  const [showModalAdvanced, setShowModalAdvanced] = useState(false);
+  const [showconfirmShare, setShowconfirmShare] = useState(false);
+  const [showOverrideModal, setShowOverrideModal] = useState(false);
+  const [flowComponent, setFlowComponent] = useState<FlowType>(
+    createFlowComponent(cloneDeep(data), version),
+  );
+  const preventDefault = true;
+  const isMac = navigator.platform.toUpperCase().includes("MAC");
  const nodeLength = Object.keys(data.node!.template).filter(
    (templateField) =>
      templateField.charAt(0) !== "_" &&
@ -58,10 +71,127 @@ export default function NodeToolbarComponent({
        data.node.template[templateField].type === "dict" ||
        data.node.template[templateField].type === "NestedDict"),
  ).length;
-  const templates = useTypesStore((state) => state.templates);
+
  const hasStore = useStoreStore((state) => state.hasStore);
  const hasApiKey = useStoreStore((state) => state.hasApiKey);
  const validApiKey = useStoreStore((state) => state.validApiKey);
+  const shortcuts = useShortcutsStore((state) => state.shortcuts);
+  const unselectAll = useFlowStore((state) => state.unselectAll);
+  function handleMinimizeWShortcut(e: KeyboardEvent) {
+    e.preventDefault();
+    if (isMinimal) {
+      setShowState((show) => !show);
+      setShowNode(data.showNode ?? true ? false : true);
+      return;
+    }
+    setNoticeData({
+      title:
+        "Minimization are only available for nodes with one handle or fewer.",
+    });
+    return;
+  }
+
+  function handleUpdateWShortcut(e: KeyboardEvent) {
+    e.preventDefault();
+    if (hasApiKey || hasStore) {
+      handleSelectChange("update");
+    }
+  }
+
+  function handleGroupWShortcut(e: KeyboardEvent) {
+    e.preventDefault();
+    if (isGroup) {
+      handleSelectChange("ungroup");
+    }
+  }
+
+  function handleShareWShortcut(e: KeyboardEvent) {
+    e.preventDefault();
+    if (isThereModal() && !showOverrideModal) return;
+    if (hasApiKey || hasStore) {
+      setShowconfirmShare((state) => !state);
+    }
+  }
+
+  function handleCodeWShortcut(e: KeyboardEvent) {
+    e.preventDefault();
+    if (isThereModal() && !openModal) return;
+    if (hasCode) return setOpenModal((state) => !state);
+    setNoticeData({ title: `You can not access ${data.id} code` });
+  }
+
+  function handleAdvancedWShortcut(e: KeyboardEvent) {
+    e.preventDefault();
+    if (isThereModal() && !showModalAdvanced) return;
+    if (!isGroup) {
+      setShowModalAdvanced((state) => !state);
+    }
+  }
+
+  function handleSaveWShortcut(e: KeyboardEvent) {
+    e.preventDefault();
+    if (isThereModal() && !showOverrideModal) return;
+    if (isSaved) {
+      setShowOverrideModal((state) => !state);
+      return;
+    }
+    if (hasCode && !isSaved) {
+      saveComponent(cloneDeep(data), false);
+      setSuccessData({ title: `${data.id} saved successfully` });
+      return;
+    }
+  }
+
+  function handleDocsWShortcut(e: KeyboardEvent) {
+    e.preventDefault();
+    if (data.node?.documentation) {
+      return openInNewTab(data.node?.documentation);
+    }
+    setNoticeData({
+      title: `${data.id} docs is not available at the moment.`,
+    });
+  }
+
+  function handleDownloadWShortcut(e: KeyboardEvent) {
+    e.preventDefault();
+    downloadNode(flowComponent!);
+  }
+
+  function handleFreeze(e: KeyboardEvent) {
+    e.preventDefault();
+    setNode(data.id, (old) => ({
+      ...old,
+      data: {
+        ...old.data,
+        node: {
+          ...old.data.node,
+          frozen: old.data?.node?.frozen ? false : true,
+        },
+      },
+    }));
+  }
+
+  const advanced = useShortcutsStore((state) => state.advanced);
+  const minimize = useShortcutsStore((state) => state.minimize);
+  const share = useShortcutsStore((state) => state.share);
+  const save = useShortcutsStore((state) => state.save);
+  const docs = useShortcutsStore((state) => state.docs);
+  const code = useShortcutsStore((state) => state.code);
+  const group = useShortcutsStore((state) => state.group);
+  const update = useShortcutsStore((state) => state.update);
+  const download = useShortcutsStore((state) => state.download);
+  const freeze = useShortcutsStore((state) => state.freeze);
+
+  useHotkeys(minimize, handleMinimizeWShortcut, { preventDefault });
+  useHotkeys(update, handleUpdateWShortcut, { preventDefault });
+  useHotkeys(group, handleGroupWShortcut, { preventDefault });
+  useHotkeys(share, handleShareWShortcut, { preventDefault });
+  useHotkeys(code, handleCodeWShortcut, { preventDefault });
+  useHotkeys(advanced, handleAdvancedWShortcut, { preventDefault });
+  useHotkeys(save, handleSaveWShortcut, { preventDefault });
+  useHotkeys(docs, handleDocsWShortcut, { preventDefault });
+  useHotkeys(download, handleDownloadWShortcut, { preventDefault });
+  useHotkeys(freeze, handleFreeze, { preventDefault });

  const isMinimal = numberOfHandles <= 1;
  const isGroup = data.node?.flow ? true : false;
@ -73,18 +203,14 @@ export default function NodeToolbarComponent({
  const setNodes = useFlowStore((state) => state.setNodes);

  const setEdges = useFlowStore((state) => state.setEdges);
-  const unselectAll = useFlowStore((state) => state.unselectAll);
  const saveComponent = useFlowsManagerStore((state) => state.saveComponent);
  const getNodePosition = useFlowStore((state) => state.getNodePosition);
  const flows = useFlowsManagerStore((state) => state.flows);
-  const version = useDarkStore((state) => state.version);
  const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot);
-  const [showModalAdvanced, setShowModalAdvanced] = useState(false);
-  const [showconfirmShare, setShowconfirmShare] = useState(false);
-  const [showOverrideModal, setShowOverrideModal] = useState(false);
-  const [flowComponent, setFlowComponent] = useState<FlowType>(
-    createFlowComponent(cloneDeep(data), version),
-  );
+
+  //  useEffect(() => {
+  //    if (openWDoubleClick) setShowModalAdvanced(true);
+  //  }, [openWDoubleClick, setOpenWDoubleClick]);

  const openInNewTab = (url) => {
    window.open(url, "_blank", "noreferrer");
@ -118,6 +244,27 @@ export default function NodeToolbarComponent({

  const handleSelectChange = (event) => {
    switch (event) {
+      case "save":
+        if (isSaved) {
+          return setShowOverrideModal(true);
+        }
+        saveComponent(cloneDeep(data), false);
+        break;
+      case "freeze":
+        setNode(data.id, (old) => ({
+          ...old,
+          data: {
+            ...old.data,
+            node: {
+              ...old.data.node,
+              frozen: old.data?.node?.frozen ? false : true,
+            },
+          },
+        }));
+        break;
+      case "code":
+        setOpenModal(!openModal);
+        break;
      case "advanced":
        setShowModalAdvanced(true);
        break;
@ -185,6 +332,42 @@ export default function NodeToolbarComponent({
    Object.values(flow).includes(data.node?.display_name!),
  );

+  function displayShortcut({
+    name,
+    shortcut,
+  }: {
+    name: string;
+    shortcut: string;
+  }): JSX.Element {
+    let hasShift: boolean = false;
+    const fixedShortcut = shortcut?.split("+");
+    fixedShortcut.forEach((key) => {
+      if (key.toLowerCase().includes("shift")) {
+        hasShift = true;
+      }
+    });
+    const filteredShortcut = fixedShortcut.filter(
+      (key) => !key.toLowerCase().includes("shift"),
+    );
+    let shortcutWPlus: string[] = [];
+    if (!hasShift) shortcutWPlus = filteredShortcut.join("+").split(" ");
+    return (
+      <div className="flex justify-center">
+        <span> {name} </span>
+        <span
+          className={`ml-3 flex items-center rounded-sm bg-muted px-1 py-[0.2] text-muted-foreground`}
+        >
+          <RenderIcons
+            isMac={isMac}
+            hasShift={hasShift}
+            filteredShortcut={filteredShortcut}
+            shortcutWPlus={shortcutWPlus}
+          />
+        </span>
+      </div>
+    );
+  }
+
  const setNode = useFlowStore((state) => state.setNode);

  const handleOnNewValue = (
@ -235,129 +418,19 @@ export default function NodeToolbarComponent({
  const [openModal, setOpenModal] = useState(false);
  const hasCode = Object.keys(data.node!.template).includes("code");

-  useEffect(() => {
-    function onKeyDown(event: KeyboardEvent) {
-      if (
-        selected &&
-        (hasApiKey || hasStore) &&
-        (event.ctrlKey || event.metaKey) &&
-        event.key.toUpperCase() === "U"
-      ) {
-        event.preventDefault();
-        handleSelectChange("update");
-      }
-      if (selected && event.key.toUpperCase() === "ESCAPE") {
-        event.preventDefault();
-        handleSelectChange("unselect");
-      }
-      if (
-        selected &&
-        isGroup &&
-        (event.ctrlKey || event.metaKey) &&
-        event.key.toUpperCase() === "G"
-      ) {
-        event.preventDefault();
-        handleSelectChange("ungroup");
-      }
-      if (
-        selected &&
-        (hasApiKey || hasStore) &&
-        (event.ctrlKey || event.metaKey) &&
-        event.shiftKey &&
-        event.key.toUpperCase() === "S"
-      ) {
-        event.preventDefault();
-        setShowconfirmShare((state) => !state);
-      }
-
-      if (
-        selected &&
-        (event.ctrlKey || event.metaKey) &&
-        event.shiftKey &&
-        event.key.toUpperCase() === "Q"
-      ) {
-        event.preventDefault();
-        if (isMinimal) {
-          setShowState((show) => !show);
-          setShowNode(data.showNode ?? true ? false : true);
-          return;
-        }
-        setNoticeData({
-          title:
-            "Minimization are only available for nodes with one handle or fewer.",
-        });
-      }
-      if (
-        selected &&
-        (event.ctrlKey || event.metaKey) &&
-        event.shiftKey &&
-        event.key.toUpperCase() === "U"
-      ) {
-        event.preventDefault();
-        if (hasCode) return setOpenModal((state) => !state);
-        setNoticeData({ title: `You can not access ${data.id} code` });
-      }
-      if (
-        selected &&
-        (event.ctrlKey || event.metaKey) &&
-        event.shiftKey &&
-        event.key.toUpperCase() === "A"
-      ) {
-        event.preventDefault();
-        setShowModalAdvanced((state) => !state);
-      }
-      if (
-        selected &&
-        (event.ctrlKey || event.metaKey) &&
-        event.key.toUpperCase() === "S"
-      ) {
-        if (isSaved) {
-          event.preventDefault();
-          return setShowOverrideModal((state) => !state);
-        }
-        if (hasCode) {
-          event.preventDefault();
-          saveComponent(cloneDeep(data), false);
-          setSuccessData({ title: `${data.id} saved successfully` });
-        }
-      }
-      if (
-        selected &&
-        (event.ctrlKey || event.metaKey) &&
-        event.shiftKey &&
-        event.key.toUpperCase() === "D"
-      ) {
-        event.preventDefault();
-        if (data.node?.documentation) {
-          return openInNewTab(data.node?.documentation);
-        }
-        setNoticeData({
-          title: `${data.id} docs is not available at the moment.`,
-        });
-      }
-      if (
-        selected &&
-        (event.ctrlKey || event.metaKey) &&
-        event.key.toUpperCase() === "J"
-      ) {
-        event.preventDefault();
-        downloadNode(flowComponent!);
-      }
-    }
-
-    document.addEventListener("keydown", onKeyDown);
-
-    return () => {
-      document.removeEventListener("keydown", onKeyDown);
-    };
-  }, [isSaved, showNode, data.showNode, isMinimal]);
-
  return (
    <>
      <div className="w-26 nocopy nowheel nopan nodelete nodrag noundo h-10">
        <span className="isolate inline-flex rounded-md shadow-sm">
          {hasCode && (
-            <ShadTooltip content="Code" side="top">
+            <ShadTooltip
+              content={displayShortcut(
+                shortcuts.find(
+                  ({ name }) => name.split(" ")[0].toLowerCase() === "code",
+                )!,
+              )}
+              side="top"
+            >
              <button
                className="relative inline-flex items-center rounded-l-md bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10"
                onClick={() => {
@ -369,8 +442,28 @@ export default function NodeToolbarComponent({
              </button>
            </ShadTooltip>
          )}
+          {nodeLength > 0 && (
+            <ShadTooltip
+              content={displayShortcut(
+                shortcuts.find(
+                  ({ name }) => name.split(" ")[0].toLowerCase() === "advanced",
+                )!,
+              )}
+              side="top"
+            >
+              <button
+                className={`${isGroup ? "rounded-l-md" : ""} relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring  transition-all duration-500 ease-in-out hover:bg-muted focus:z-10`}
+                onClick={() => {
+                  setShowModalAdvanced(true);
+                }}
+                data-testid="code-button-modal"
+              >
+                <IconComponent name="Settings2" className="h-4 w-4" />
+              </button>
+            </ShadTooltip>
+          )}

-          <ShadTooltip content={"Save"} side="top">
+          {/*<ShadTooltip content={"Save"} side="top">
            <button
              data-testid="save-button-modal"
              className={classNames(
@ -387,24 +480,15 @@ export default function NodeToolbarComponent({
            >
              <IconComponent name="SaveAll" className="h-4 w-4" />
            </button>
-          </ShadTooltip>
-
-          <ShadTooltip content={"Duplicate"} side="top">
-            <button
-              data-testid="duplicate-button-modal"
-              className={classNames(
-                "relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring  transition-all duration-500 ease-in-out hover:bg-muted focus:z-10",
+          </ShadTooltip>*/}
+          <ShadTooltip
+            content={displayShortcut(
+              shortcuts.find(
+                ({ name }) => name.split(" ")[0].toLowerCase() === "freeze",
+              )!,
            )}
-              onClick={(event) => {
-                event.preventDefault();
-                handleSelectChange("duplicate");
-              }}
+            side="top"
          >
-              <IconComponent name="Copy" className="h-4 w-4" />
-            </button>
-          </ShadTooltip>
-
-          <ShadTooltip content="Freeze" side="top">
            <button
              className={classNames(
                "relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring  transition-all duration-500 ease-in-out hover:bg-muted focus:z-10",
@ -434,8 +518,23 @@ export default function NodeToolbarComponent({
            </button>
          </ShadTooltip>

+          {/*<ShadTooltip content={"Duplicate"} side="top">
+            <button
+              data-testid="duplicate-button-modal"
+              className={classNames(
+                "relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring  transition-all duration-500 ease-in-out hover:bg-muted focus:z-10",
+              )}
+              onClick={(event) => {
+                event.preventDefault();
+                handleSelectChange("duplicate");
+              }}
+            >
+              <IconComponent name="Copy" className="h-4 w-4" />
+            </button>
+          </ShadTooltip>*/}
+
          <Select onValueChange={handleSelectChange} value="">
-            <ShadTooltip content="More" side="top">
+            <ShadTooltip content="All" side="top">
              <SelectTrigger>
                <div>
                  <div
@ -453,23 +552,56 @@ export default function NodeToolbarComponent({
              </SelectTrigger>
            </ShadTooltip>
            <SelectContent>
+              {hasCode && (
+                <SelectItem value={"code"}>
+                  <ToolbarSelectItem
+                    shortcut={
+                      shortcuts.find((obj) => obj.name === "Code")?.shortcut!
+                    }
+                    value={"Code"}
+                    icon={"Code"}
+                    dataTestId="code-button-modal"
+                  />
+                </SelectItem>
+              )}
              {nodeLength > 0 && (
                <SelectItem value={nodeLength === 0 ? "disabled" : "advanced"}>
                  <ToolbarSelectItem
-                    keyboardKey="A"
-                    isMac={navigator.userAgent.toUpperCase().includes("MAC")}
-                    shift={true}
+                    shortcut={
+                      shortcuts.find((obj) => obj.name === "Advanced Settings")
+                        ?.shortcut!
+                    }
                    value={"Advanced"}
                    icon={"Settings2"}
                    dataTestId="edit-button-modal"
                  />
                </SelectItem>
              )}
+              <SelectItem value={"save"}>
+                <ToolbarSelectItem
+                  shortcut={
+                    shortcuts.find((obj) => obj.name === "Save")?.shortcut!
+                  }
+                  value={"Save"}
+                  icon={"SaveAll"}
+                  dataTestId="save-button-modal"
+                />
+              </SelectItem>
+              <SelectItem value={"duplicate"}>
+                <ToolbarSelectItem
+                  shortcut={
+                    shortcuts.find((obj) => obj.name === "Duplicate")?.shortcut!
+                  }
+                  value={"Duplicate"}
+                  icon={"Copy"}
+                  dataTestId="copy-button-modal"
+                />
+              </SelectItem>
              <SelectItem value={"copy"}>
                <ToolbarSelectItem
-                  keyboardKey="C"
-                  isMac={navigator.userAgent.toUpperCase().includes("MAC")}
-                  shift={false}
+                  shortcut={
+                    shortcuts.find((obj) => obj.name === "Copy")?.shortcut!
+                  }
                  value={"Copy"}
                  icon={"Clipboard"}
                  dataTestId="copy-button-modal"
@ -481,14 +613,11 @@ export default function NodeToolbarComponent({
                  disabled={!hasApiKey || !validApiKey}
                >
                  <ToolbarSelectItem
-                    keyboardKey="S"
-                    isMac={navigator.userAgent.toUpperCase().includes("MAC")}
-                    shift={true}
+                    shortcut={
+                      shortcuts.find((obj) => obj.name === "Share")?.shortcut!
+                    }
                    value={"Share"}
                    icon={"Share3"}
-                    styleObj={{
-                      iconClasses: "relative top-0.5 -m-1 mr-[0.25rem] h-6 w-6",
-                    }}
                    dataTestId="share-button-modal"
                  />
                </SelectItem>
@ -496,13 +625,13 @@ export default function NodeToolbarComponent({
              {(!hasStore || !hasApiKey || !validApiKey) && (
                <SelectItem value={"Download"}>
                  <ToolbarSelectItem
-                    value="Download"
-                    shift={false}
-                    isMac={navigator.userAgent.toUpperCase().includes("MAC")}
-                    icon="Download"
-                    styleObj={{ iconClasses: "relative top-0.5 mr-2 h-4 w-4" }}
-                    keyboardKey={"J"}
-                    dataTestId={"Dowload-button-nodeToolbar"}
+                    shortcut={
+                      shortcuts.find((obj) => obj.name === "Download")
+                        ?.shortcut!
+                    }
+                    value={"Download"}
+                    icon={"Download"}
+                    dataTestId="Download-button-modal"
                  />
                </SelectItem>
              )}
@ -511,9 +640,9 @@ export default function NodeToolbarComponent({
                disabled={data.node?.documentation === ""}
              >
                <ToolbarSelectItem
-                  keyboardKey="D"
-                  isMac={navigator.userAgent.toUpperCase().includes("MAC")}
-                  shift={true}
+                  shortcut={
+                    shortcuts.find((obj) => obj.name === "Docs")?.shortcut!
+                  }
                  value={"Docs"}
                  icon={"FileText"}
                  dataTestId="docs-button-modal"
@ -522,38 +651,49 @@ export default function NodeToolbarComponent({
              {isMinimal && (
                <SelectItem value={"show"}>
                  <ToolbarSelectItem
-                    icon={showNode ? "Minimize2" : "Maximize2"}
+                    shortcut={
+                      shortcuts.find((obj) => obj.name === "Minimize")
+                        ?.shortcut!
+                    }
                    value={showNode ? "Minimize" : "Expand"}
-                    isMac={navigator.userAgent.toUpperCase().includes("MAC")}
-                    shift={true}
-                    keyboardKey={"Q"}
-                    dataTestId={"minimize-button-nodeToolbar"}
+                    icon={showNode ? "Minimize2" : "Maximize2"}
+                    dataTestId="minimize-button-modal"
                  />
                </SelectItem>
              )}
              {isGroup && (
                <SelectItem value="ungroup">
-                  <div className="flex">
-                    <IconComponent
-                      name="Ungroup"
-                      className="relative top-0.5 mr-2 h-4 w-4 "
-                    />{" "}
-                    <span className="">Ungroup</span>{" "}
-                    {navigator.userAgent.toUpperCase().includes("MAC") ? (
-                      <IconComponent
-                        name="Command"
-                        className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
-                      ></IconComponent>
-                    ) : (
-                      <span className="absolute right-[1.30rem] top-[0.40em] stroke-2">
-                        Ctrl +{" "}
-                      </span>
-                    )}
-                    <span className="absolute right-2 top-[0.43em]">G</span>
-                  </div>
+                  <ToolbarSelectItem
+                    shortcut={
+                      shortcuts.find((obj) => obj.name === "Group")?.shortcut!
+                    }
+                    value={"Ungroup"}
+                    icon={"Ungroup"}
+                    dataTestId="group-button-modal"
+                  />
                </SelectItem>
              )}
-
+              <SelectItem value="freeze">
+                <ToolbarSelectItem
+                  shortcut={
+                    shortcuts.find((obj) => obj.name === "Freeze")?.shortcut!
+                  }
+                  value={"Freeze"}
+                  icon={"Snowflake"}
+                  dataTestId="group-button-modal"
+                  style={`${frozen ? " text-ice" : ""} transition-all`}
+                />
+              </SelectItem>
+              <SelectItem value="Download">
+                <ToolbarSelectItem
+                  shortcut={
+                    shortcuts.find((obj) => obj.name === "Download")?.shortcut!
+                  }
+                  value={"Download"}
+                  icon={"Download"}
+                  dataTestId="download-button-modal"
+                />
+              </SelectItem>
              <SelectItem value={"delete"} className="focus:bg-red-400/[.20]">
                <div className="font-red flex text-status-red">
                  <IconComponent
@ -561,10 +701,10 @@ export default function NodeToolbarComponent({
                    className="relative top-0.5 mr-2 h-4 w-4 "
                  />{" "}
                  <span className="">Delete</span>{" "}
-                  <span>
+                  <span className="justify absolute right-2 top-2 flex items-center rounded-sm bg-muted px-1 py-[0.2]">
                    <IconComponent
                      name="Delete"
-                      className="absolute right-2 top-2 h-4 w-4 stroke-2 text-red-400"
+                      className="h-4 w-4 stroke-2 text-red-400"
                    ></IconComponent>
                  </span>
                </div>
@ -597,12 +737,15 @@ export default function NodeToolbarComponent({
              </span>
            </ConfirmationModal.Content>
          </ConfirmationModal>
+          {showModalAdvanced && (
            <EditNodeModal
+              //              setOpenWDoubleClick={setOpenWDoubleClick}
              data={data}
              nodeLength={nodeLength}
              open={showModalAdvanced}
              setOpen={setShowModalAdvanced}
            />
+          )}
          {showconfirmShare && (
            <ShareModal
              open={showconfirmShare}
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx
@ -1,50 +1,49 @@
 import ForwardedIconComponent from "../../../../../components/genericIconComponent";
+import RenderIcons from "../../../../../components/renderIconComponent";
 import { toolbarSelectItemProps } from "../../../../../types/components";

 export default function ToolbarSelectItem({
-  shift,
-  isMac,
-  keyboardKey,
  value,
  icon,
-  styleObj,
+  style,
  dataTestId,
  ping,
+  shortcut,
 }: toolbarSelectItemProps) {
+  const isMac = navigator.platform.toUpperCase().includes("MAC");
+  let hasShift = false;
+  const fixedShortcut = shortcut?.split("+");
+  fixedShortcut.forEach((key) => {
+    if (key.toLowerCase().includes("shift")) {
+      hasShift = true;
+    }
+  });
+  const filteredShortcut = fixedShortcut.filter(
+    (key) => !key.toLowerCase().includes("shift"),
+  );
+  let shortcutWPlus: string[] = [];
+  if (!hasShift) shortcutWPlus = filteredShortcut.join("+").split(" ");
+
  return (
-    <div className="flex" data-testid={dataTestId}>
+    <div className={`flex ${style}`} data-testid={dataTestId}>
      <ForwardedIconComponent
        name={icon}
-        className={`relative top-0.5 mr-2 h-4 w-4 ${styleObj?.iconClasses} ${
+        className={`   mr-2  ${icon === "Share3" ? "absolute left-2  top-[0.25em] h-6 w-6" : "mt-[0.15em] h-4 w-4"}   ${
          ping && "animate-pulse text-green-500"
        }`}
      />
-      <span className={styleObj?.valueClasses}>{value}</span>
-
-      {isMac ? (
-        <ForwardedIconComponent
-          name="Command"
-          className={`absolute
-          ${shift ? " right-[2rem] " : "right-[1.15rem]"}
-          top-[0.65em] h-3.5 w-3.5 stroke-2 ${styleObj?.commandClasses}`}
-        ></ForwardedIconComponent>
-      ) : (
-        <span
-          className={`absolute ${
-            shift ? " right-[2.15rem] " : "right-[1.15rem]"
-          } top-[0.43em] stroke-2 `}
-        >
-          {shift ? "Ctrl" : "Ctrl +"}
+      <span className={`${icon === "Share3" ? "ml-[1.8em]" : " "}`}>
+        {value}
      </span>
-      )}
-      {shift && (
-        <ForwardedIconComponent
-          name="ArrowBigUp"
-          className={`absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2 ${styleObj?.shiftClasses}`}
+      <span
+        className={`absolute right-2 top-[0.43em] flex items-center rounded-sm bg-muted px-1 py-[0.2] text-muted-foreground `}
+      >
+        <RenderIcons
+          isMac={isMac}
+          hasShift={hasShift}
+          filteredShortcut={filteredShortcut}
+          shortcutWPlus={shortcutWPlus}
        />
-      )}
-      <span className={`absolute right-2 top-[0.43em] ${styleObj?.keyClasses}`}>
-        {keyboardKey}
      </span>
    </div>
  );
--- a/src/frontend/src/pages/MainPage/services/index.ts
+++ b/src/frontend/src/pages/MainPage/services/index.ts
@ -30,12 +30,12 @@ export async function addFolder(data: AddFolderType): Promise<FolderType> {

 export async function updateFolder(
  body: FolderType,
-  folderId: string
+  folderId: string,
 ): Promise<FolderType> {
  try {
    const response = await api.patch(
      `${BASE_URL_API}folders/${folderId}`,
-      body
+      body,
    );
    return response?.data;
  } catch (error) {
@ -68,7 +68,7 @@ export async function downloadFlowsFromFolders(folderId: string): Promise<{
 }> {
  try {
    const response = await api.get(
-      `${BASE_URL_API}folders/download/${folderId}`
+      `${BASE_URL_API}folders/download/${folderId}`,
    );
    if (response?.status !== 200) {
      throw new Error(`HTTP error! status: ${response?.status}`);
@ -82,7 +82,7 @@ export async function downloadFlowsFromFolders(folderId: string): Promise<{
 }

 export async function uploadFlowsFromFolders(
-  flows: FormData
+  flows: FormData,
 ): Promise<FlowType[]> {
  try {
    const response = await api.post(`${BASE_URL_API}folders/upload/`, flows);
@ -99,11 +99,11 @@ export async function uploadFlowsFromFolders(

 export async function moveFlowToFolder(
  flowId: string,
-  folderId: string
+  folderId: string,
 ): Promise<FlowType> {
  try {
    const response = await api.patch(
-      `${BASE_URL_API}folders/move_to_folder/${flowId}/${folderId}`
+      `${BASE_URL_API}folders/move_to_folder/${flowId}/${folderId}`,
    );
    return response?.data;
  } catch (error) {
--- a/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/EditShortcutButton/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/EditShortcutButton/index.tsx
@ -0,0 +1,183 @@
+import { useEffect, useState } from "react";
+import useAlertStore from "../../../../../stores/alertStore";
+
+import ForwardedIconComponent from "../../../../../components/genericIconComponent";
+import { Button } from "../../../../../components/ui/button";
+import BaseModal from "../../../../../modals/baseModal";
+import { useShortcutsStore } from "../../../../../stores/shortcuts";
+import { toTitleCase } from "../../../../../utils/utils";
+
+export default function EditShortcutButton({
+  children,
+  shortcut,
+  defaultShortcuts,
+  defaultCombination,
+  open,
+  setOpen,
+  disable,
+  setSelected,
+}: {
+  children: JSX.Element;
+  shortcut: string[];
+  defaultShortcuts: Array<{ name: string; shortcut: string }>;
+  defaultCombination: string;
+  open: boolean;
+  setOpen: (bool: boolean) => void;
+  disable?: boolean;
+  setSelected: (selected: string[]) => void;
+}): JSX.Element {
+  let shortcutInitialValue =
+    defaultShortcuts.length > 0
+      ? defaultShortcuts.find(
+          (s) =>
+            s.name.split(" ")[0].toLowerCase().toLowerCase() ===
+            shortcut[0]?.split(" ")[0].toLowerCase(),
+        )?.shortcut
+      : "";
+  const [key, setKey] = useState<string | null>(null);
+  const setSuccessData = useAlertStore((state) => state.setSuccessData);
+  const setShortcuts = useShortcutsStore((state) => state.setShortcuts);
+  const setErrorData = useAlertStore((state) => state.setErrorData);
+
+  function canEditCombination(newCombination: string): boolean {
+    let canSave = true;
+    defaultShortcuts.forEach(({ shortcut }) => {
+      if (shortcut.toLowerCase() === newCombination.toLowerCase()) {
+        canSave = false;
+      }
+    });
+    return canSave;
+  }
+
+  const setUniqueShortcut = useShortcutsStore(
+    (state) => state.updateUniqueShortcut,
+  );
+
+  function editCombination(): void {
+    if (key) {
+      if (canEditCombination(key)) {
+        const newCombination = defaultShortcuts.map((s) => {
+          if (s.name === shortcut[0]) {
+            return { name: s.name, shortcut: key };
+          }
+          return { name: s.name, shortcut: s.shortcut };
+        });
+        const fixCombination = key.split(" ");
+        if (
+          fixCombination[0].toLowerCase().includes("ctrl") ||
+          fixCombination[0].toLowerCase().includes("cmd")
+        ) {
+          fixCombination[0] = "mod";
+        }
+        const shortcutName = shortcut[0].split(" ")[0].toLowerCase();
+        setUniqueShortcut(shortcutName, fixCombination.join("").toLowerCase());
+        setShortcuts(newCombination);
+        localStorage.setItem(
+          "langflow-shortcuts",
+          JSON.stringify(newCombination),
+        );
+        setKey(null);
+        setOpen(false);
+        setSuccessData({
+          title: `${shortcut[0]} shortcut successfully changed`,
+        });
+        return;
+      }
+    }
+    setErrorData({
+      title: "Error saving key combination",
+      list: ["This combination already exists!"],
+    });
+  }
+
+  useEffect(() => {
+    if (!open) {
+      setKey(null);
+      setSelected([]);
+    }
+  }, [open, setOpen, key]);
+
+  function getFixedCombination({
+    oldKey,
+    key,
+  }: {
+    oldKey: string;
+    key: string;
+  }): string {
+    if (oldKey === null) {
+      return `${key.length > 0 ? toTitleCase(key) : toTitleCase(key)}`;
+    }
+    return `${oldKey.length > 0 ? toTitleCase(oldKey) : oldKey.toUpperCase()} + ${key.length > 0 ? toTitleCase(key) : key.toUpperCase()}`;
+  }
+
+  function checkForKeys(keys: string, keyToCompare: string): boolean {
+    const keysArr = keys.split(" ");
+    let hasNewKey = false;
+    return keysArr.some(
+      (k) => k.toLowerCase().trim() === keyToCompare.toLowerCase().trim(),
+    );
+  }
+
+  useEffect(() => {
+    function onKeyDown(e: KeyboardEvent) {
+      e.preventDefault();
+      let fixedKey = e.key;
+      if (e.key?.toLowerCase() === "control") {
+        fixedKey = "Ctrl";
+      }
+      if (e.key?.toLowerCase() === "meta") {
+        fixedKey = "Cmd";
+      }
+      if (e.key?.toLowerCase() === " ") {
+        fixedKey = "Space";
+      }
+      if (key) {
+        if (checkForKeys(key, fixedKey)) return;
+      }
+      setKey((oldKey) =>
+        getFixedCombination({ oldKey: oldKey!, key: fixedKey }),
+      );
+    }
+
+    document.addEventListener("keydown", onKeyDown);
+
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [key, setKey]);
+
+  return (
+    <BaseModal open={open} setOpen={setOpen} size="x-small" disable={disable}>
+      <BaseModal.Header description={"Recording your keyboard"}>
+        <span className="pr-2"> Key Combination </span>
+        <ForwardedIconComponent
+          name="Keyboard"
+          className="h-6 w-6 pl-1 text-primary "
+          aria-hidden="true"
+        />
+      </BaseModal.Header>
+      <BaseModal.Trigger>{children}</BaseModal.Trigger>
+      <BaseModal.Content>
+        <div className="align-center flex h-full w-full justify-center gap-4 rounded-md border border-border py-2">
+          <div className="flex items-center justify-center text-center text-lg font-bold">
+            {key === null
+              ? shortcutInitialValue?.toUpperCase()
+              : key.toUpperCase()}
+          </div>
+        </div>
+      </BaseModal.Content>
+      <BaseModal.Footer>
+        <Button variant={"default"} onClick={editCombination}>
+          Apply
+        </Button>
+        <Button
+          className="mr-5"
+          variant={"destructive"}
+          onClick={() => setKey(null)}
+        >
+          Reset
+        </Button>
+      </BaseModal.Footer>
+    </BaseModal>
+  );
+}
--- a/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
@ -1,20 +1,16 @@
+import { ColDef, ColGroupDef, SelectionChangedEvent } from "ag-grid-community";
+import { useEffect, useState } from "react";
 import ForwardedIconComponent from "../../../../components/genericIconComponent";
 import TableComponent from "../../../../components/tableComponent";
+import { Button } from "../../../../components/ui/button";
+import { defaultShortcuts } from "../../../../constants/constants";
+import { useShortcutsStore } from "../../../../stores/shortcuts";
+import EditShortcutButton from "./EditShortcutButton";

 export default function ShortcutsPage() {
-  const isMac = navigator.userAgent.toUpperCase().includes("MAC");
-  const advancedShortcut = `${isMac ? "Cmd" : "Ctrl"} + Shift + A`;
-  const minizmizeShortcut = `${isMac ? "Cmd" : "Ctrl"} + Shift + Q`;
-  const codeShortcut = `${isMac ? "Cmd" : "Ctrl"} + Shift + C`;
-  const copyShortcut = `${isMac ? "Cmd" : "Ctrl"} + C`;
-  const duplicateShortcut = `${isMac ? "Cmd" : "Ctrl"} + D`;
-  const shareShortcut = `${isMac ? "Cmd" : "Ctrl"} + Shift + S`;
-  const docsShortcut = `${isMac ? "Cmd" : "Ctrl"} + Shift + D`;
-  const saveShortcut = `${isMac ? "Cmd" : "Ctrl"} + S`;
-  const deleteShortcut = `Backspace`;
-  const interactionShortcut = `${isMac ? "Cmd" : "Ctrl"} + K`;
-  const undoShortcut = `${isMac ? "Cmd" : "Ctrl"} + Z`;
-  const redoShortcut = `${isMac ? "Cmd" : "Ctrl"} + Y`;
+  const [selectedRows, setSelectedRows] = useState<string[]>([]);
+  const shortcuts = useShortcutsStore((state) => state.shortcuts);
+  const setShortcuts = useShortcutsStore((state) => state.setShortcuts);

  // Column Definitions: Defines the columns to be displayed.
  const colDefs = [
@ -23,8 +19,10 @@ export default function ShortcutsPage() {
      field: "name",
      flex: 1,
      editable: false,
+      resizable: false,
    }, //This column will be twice as wide as the others
    {
+      headerName: "Keyboard Shortcut",
      field: "shortcut",
      flex: 2,
      editable: false,
@ -32,68 +30,28 @@ export default function ShortcutsPage() {
    },
  ];

-  const nodesRowData = [
-    {
-      name: "Advanced Settings Component",
-      shortcut: advancedShortcut,
-      resizable: false,
-    },
-    {
-      name: "Minimize Component",
-      shortcut: minizmizeShortcut,
-      resizable: false,
-    },
-    {
-      name: "Code Component",
-      shortcut: codeShortcut,
-      resizable: false,
-    },
-    {
-      name: "Copy Component",
-      shortcut: copyShortcut,
-      resizable: false,
-    },
-    {
-      name: "Duplicate Component",
-      shortcut: duplicateShortcut,
-      resizable: false,
-    },
-    {
-      name: "Share Component",
-      shortcut: shareShortcut,
-      resizable: false,
-    },
-    {
-      name: "Docs Component",
-      shortcut: docsShortcut,
-      resizable: false,
-    },
-    {
-      name: "Save Component",
-      shortcut: saveShortcut,
-      resizable: false,
-    },
-    {
-      name: "Delete Component",
-      shortcut: deleteShortcut,
-      resizable: false,
-    },
-    {
-      name: "Open Playground",
-      shortcut: interactionShortcut,
-      resizable: false,
-    },
-    {
-      name: "Undo",
-      shortcut: undoShortcut,
-      resizable: false,
-    },
-    {
-      name: "Redo",
-      shortcut: redoShortcut,
-      resizable: false,
-    },
-  ];
+  const [nodesRowData, setNodesRowData] = useState<
+    Array<{ name: string; shortcut: string }>
+  >([]);
+
+  useEffect(() => {
+    setNodesRowData(shortcuts);
+  }, [shortcuts]);
+
+  const combinationToEdit = shortcuts.filter((s) => s.name === selectedRows[0]);
+  const [open, setOpen] = useState(false);
+  const updateUniqueShortcut = useShortcutsStore(
+    (state) => state.updateUniqueShortcut,
+  );
+
+  function handleRestore() {
+    setShortcuts(defaultShortcuts);
+    defaultShortcuts.forEach(({ name, shortcut }) => {
+      const fixedName = name.split(" ")[0].toLowerCase();
+      updateUniqueShortcut(fixedName, shortcut);
+    });
+    localStorage.removeItem("langflow-shortcuts");
+  }

  return (
    <div className="flex h-full w-full flex-col gap-6 ">
@ -110,15 +68,49 @@ export default function ShortcutsPage() {
            Manage Shortcuts for quick access to frequently used actions.
          </p>
        </div>
+        <div>
+          <div className="align-end mb-4 flex w-full justify-end">
+            <div className="justify center flex items-center">
+              {open && (
+                <EditShortcutButton
+                  disable={selectedRows.length === 0}
+                  defaultCombination={combinationToEdit[0]?.shortcut}
+                  shortcut={selectedRows}
+                  defaultShortcuts={shortcuts}
+                  open={open}
+                  setOpen={setOpen}
+                  setSelected={setSelectedRows}
+                >
+                  <div style={{ display: "none" }} />
+                </EditShortcutButton>
+              )}
+              <Button
+                variant="primary"
+                className="ml-3"
+                onClick={handleRestore}
+              >
+                <ForwardedIconComponent name="RotateCcw" className="mr-2 w-4" />
+                Restore
+              </Button>
            </div>
-      <div className="flex h-full w-full flex-col justify-between">
+          </div>
+        </div>
+      </div>
+      <div className="grid gap-6 pb-8">
+        <div>
          <TableComponent
-          key={"shortcuts"}
+            suppressRowClickSelection={true}
+            domLayout="autoHeight"
            pagination={false}
            columnDefs={colDefs}
            rowData={nodesRowData}
+            onCellDoubleClicked={(e) => {
+              setSelectedRows([e.data.name]);
+              setOpen(true);
+            }}
          />
        </div>
      </div>
+    </div>
  );
 }
--- a/src/frontend/src/stores/shortcuts.ts
+++ b/src/frontend/src/stores/shortcuts.ts
@ -1,15 +1,50 @@
 import { create } from "zustand";
+import { defaultShortcuts } from "../constants/constants";
 import { shortcutsStoreType } from "../types/store";

 export const useShortcutsStore = create<shortcutsStoreType>((set, get) => ({
-  openCodeModalWShortcut: false,
-  handleModalWShortcut: (modal) => {
-    switch (modal) {
-      case "code":
+  shortcuts: defaultShortcuts,
+  setShortcuts: (newShortcuts) => {
+    set({ shortcuts: newShortcuts });
+  },
+  flow: "mod+b",
+  undo: "mod+z",
+  redo: "mod+y",
+  open: "mod+k",
+  advanced: "mod+shift+a",
+  minimize: "mod+shift+q",
+  code: "space",
+  copy: "mod+c",
+  duplicate: "mod+d",
+  share: "mod+shift+s",
+  docs: "mod+shift+d",
+  save: "mod+s",
+  delete: "backspace",
+  group: "mod+g",
+  cut: "mod+x",
+  paste: "mod+v",
+  api: "mod+r",
+  update: "mod+u",
+  download: "mod+j",
+  freeze: "mod+f",
+  updateUniqueShortcut: (name, combination) => {
    set({
-          openCodeModalWShortcut: !get().openCodeModalWShortcut,
+      [name]: combination,
    });
-        break;
+  },
+  getShortcutsFromStorage: () => {
+    if (localStorage.getItem("langflow-shortcuts")) {
+      const savedShortcuts = localStorage.getItem("langflow-shortcuts");
+      const savedArr = JSON.parse(savedShortcuts!);
+      savedArr.forEach(({ name, shortcut }) => {
+        let shortcutName = name.split(" ")[0].toLowerCase();
+        set({
+          [shortcutName]: shortcut,
+        });
+      });
+      get().setShortcuts(JSON.parse(savedShortcuts!));
    }
  },
 }));
+
+useShortcutsStore.getState().getShortcutsFromStorage();
--- a/src/frontend/src/style/applies.css
+++ b/src/frontend/src/style/applies.css
@ -9,7 +9,9 @@

  body {
    @apply bg-background text-foreground;
-    font-feature-settings: "rlig" 1, "calt" 1;
+    font-feature-settings:
+      "rlig" 1,
+      "calt" 1;
  }
 }

--- a/src/frontend/src/style/classes.css
+++ b/src/frontend/src/style/classes.css
@ -19,6 +19,10 @@ pre {
  display: none;
 }

+.ag-row {
+  cursor: pointer;
+}
+
 .react-flow__pane {
  cursor: default;
 }
--- a/src/frontend/src/style/index.css
+++ b/src/frontend/src/style/index.css
@ -22,7 +22,7 @@
    --secondary-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
    --accent: 210 30% 96.1%; /* hsl(210 30% 96%) */
    --accent-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-    --destructive: 0 100% 50%; /* hsl(0 100% 50%) */
+    --destructive: 0 60% 40%; /* hsl(0 60% 40%) */
    --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
    --radius: 0.5rem;
    --ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
@ -97,7 +97,7 @@
    --accent: 216 24% 20%; /* hsl(216 34% 17%) */
    --accent-foreground: 210 30% 98%; /* hsl(210 40% 98%) */

-    --destructive: 0 63% 31%; /* hsl(0 63% 31%) */
+    --destructive: 0 60% 25%; /* hsl(0 60% 25%) */
    --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */

    --ring: 216 24% 30%; /* hsl(216 24% 30%) */
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@ -491,7 +491,7 @@ export type ChatInputType = {
  isDragging: boolean;
  files: FilePreviewType[];
  setFiles: (
-    files: FilePreviewType[] | ((prev: FilePreviewType[]) => FilePreviewType[]),
+    files: FilePreviewType[] | ((prev: FilePreviewType[]) => FilePreviewType[])
  ) => void;
  chatValue: string;
  inputRef: {
@ -535,6 +535,8 @@ export type fileCardPropsType = {
 };

 export type nodeToolbarPropsType = {
+  //  openWDoubleClick: boolean;
+  //  setOpenWDoubleClick: (open: boolean) => void;
  data: NodeDataType;
  deleteNode: (idx: string) => void;
  setShowNode: (boolean: any) => void;
@ -591,7 +593,7 @@ export type chatMessagePropsType = {
  updateChat: (
    chat: ChatMessageType,
    message: string,
-    stream_url?: string,
+    stream_url?: string
  ) => void;
 };

@ -683,12 +685,12 @@ export type codeTabsPropsType = {
      value: string,
      node: NodeType,
      template: TemplateVariableType,
-      tweak: tweakType,
+      tweak: tweakType
    ) => string;
    buildTweakObject?: (
      tw: string,
      changes: string | string[] | boolean | number | Object[] | Object,
-      template: TemplateVariableType,
+      template: TemplateVariableType
    ) => Promise<string | void>;
  };
  activeTweaks?: boolean;
@ -770,21 +772,12 @@ export type IOFileInputProps = {
 };

 export type toolbarSelectItemProps = {
-  isMac: boolean;
-  shift: boolean;
-  keyboardKey: string;
  value: string;
  icon: string;
-  styleObj?: {
-    iconClasses?: string;
-    commandClasses?: string;
-    shiftClasses?: string;
-    ctrlClasses?: string;
-    keyClasses?: string;
-    valueClasses?: string;
-  };
+  style?: string;
  dataTestId: string;
  ping?: boolean;
+  shortcut: string;
 };

 export type clearChatPropsType = {
--- a/src/frontend/src/types/store/index.ts
+++ b/src/frontend/src/types/store/index.ts
@ -20,6 +20,33 @@ export type StoreComponentResponse = {
 };

 export type shortcutsStoreType = {
-  openCodeModalWShortcut: boolean;
-  handleModalWShortcut: (str: string) => void;
+  updateUniqueShortcut: (name: string, combination: string) => void;
+  flow: string;
+  group: string;
+  cut: string;
+  paste: string;
+  api: string;
+  open: string;
+  undo: string;
+  redo: string;
+  advanced: string;
+  minimize: string;
+  code: string;
+  copy: string;
+  duplicate: string;
+  share: string;
+  docs: string;
+  save: string;
+  delete: string;
+  update: string;
+  download: string;
+  freeze: string;
+  shortcuts: Array<{
+    name: string;
+    shortcut: string;
+  }>;
+  setShortcuts: (
+    newShortcuts: Array<{ name: string; shortcut: string }>,
+  ) => void;
+  getShortcutsFromStorage: () => void;
 };
--- a/src/frontend/src/utils/reactflowUtils.ts
+++ b/src/frontend/src/utils/reactflowUtils.ts
@ -11,6 +11,7 @@ import ShortUniqueId from "short-unique-id";
 import getFieldTitle from "../CustomNodes/utils/get-field-title";
 import {
  INPUT_TYPES,
+  IS_MAC,
  LANGFLOW_SUPPORTED_TYPES,
  OUTPUT_TYPES,
  SUCCESS_BUILD,
@ -99,18 +100,18 @@ export function unselectAllNodes({ updateNodes, data }: unselectAllNodesType) {
 export function isValidConnection(
  { source, target, sourceHandle, targetHandle }: Connection,
  nodes: Node[],
-  edges: Edge[],
+  edges: Edge[]
 ) {
  const targetHandleObject: targetHandleType = scapeJSONParse(targetHandle!);
  const sourceHandleObject: sourceHandleType = scapeJSONParse(sourceHandle!);
  if (
    targetHandleObject.inputTypes?.some(
-      (n) => n === sourceHandleObject.dataType,
+      (n) => n === sourceHandleObject.dataType
    ) ||
    sourceHandleObject.baseClasses.some(
      (t) =>
        targetHandleObject.inputTypes?.some((n) => n === t) ||
-        t === targetHandleObject.type,
+        t === targetHandleObject.type
    )
  ) {
    let targetNode = nodes.find((node) => node.id === target!)?.data?.node;
@ -143,7 +144,7 @@ export function removeApiKeys(flow: FlowType): FlowType {

 export function updateTemplate(
  reference: APITemplateType,
-  objectToUpdate: APITemplateType,
+  objectToUpdate: APITemplateType
 ): APITemplateType {
  let clonedObject: APITemplateType = cloneDeep(reference);

@ -203,7 +204,7 @@ export const processDataFromFlow = (flow: FlowType, refreshIds = true) => {

 export function updateIds(
  { edges, nodes }: { edges: Edge[]; nodes: Node[] },
-  selection?: { edges: Edge[]; nodes: Node[] },
+  selection?: { edges: Edge[]; nodes: Node[] }
 ) {
  let idsMap = {};
  const selectionIds = selection?.nodes.map((n) => n.id);
@ -231,7 +232,7 @@ export function updateIds(
      edge.source = idsMap[edge.source];
      edge.target = idsMap[edge.target];
      const sourceHandleObject: sourceHandleType = scapeJSONParse(
-        edge.sourceHandle!,
+        edge.sourceHandle!
      );
      edge.sourceHandle = scapedJSONStringfy({
        ...sourceHandleObject,
@ -241,7 +242,7 @@ export function updateIds(
        edge.data.sourceHandle.id = edge.source;
      }
      const targetHandleObject: targetHandleType = scapeJSONParse(
-        edge.targetHandle!,
+        edge.targetHandle!
      );
      edge.targetHandle = scapedJSONStringfy({
        ...targetHandleObject,
@ -287,11 +288,11 @@ export function validateNode(node: NodeType, edges: Edge[]): Array<string> {
          (scapeJSONParse(edge.targetHandle!) as targetHandleType).fieldName ===
            t &&
          (scapeJSONParse(edge.targetHandle!) as targetHandleType).id ===
-            node.id,
+            node.id
      )
    ) {
      errors.push(
-        `${displayName || type} is missing ${getFieldTitle(template, t)}.`,
+        `${displayName || type} is missing ${getFieldTitle(template, t)}.`
      );
    } else if (
      template[t].type === "dict" &&
@ -305,15 +306,15 @@ export function validateNode(node: NodeType, edges: Edge[]): Array<string> {
        errors.push(
          `${displayName || type} (${getFieldTitle(
            template,
-            t,
-          )}) contains duplicate keys with the same values.`,
+            t
+          )}) contains duplicate keys with the same values.`
        );
      if (hasEmptyKey(template[t].value))
        errors.push(
          `${displayName || type} (${getFieldTitle(
            template,
-            t,
-          )}) field must not be empty.`,
+            t
+          )}) field must not be empty.`
        );
    }
    return errors;
@ -322,7 +323,7 @@ export function validateNode(node: NodeType, edges: Edge[]): Array<string> {

 export function validateNodes(
  nodes: Node[],
-  edges: Edge[],
+  edges: Edge[]
 ): // this returns an array of tuples with the node id and the errors
 Array<{ id: string; errors: Array<string> }> {
  if (nodes.length === 0) {
@ -343,7 +344,7 @@ export function updateEdges(edges: Edge[]) {
  if (edges)
    edges.forEach((edge) => {
      const targetHandleObject: targetHandleType = scapeJSONParse(
-        edge.targetHandle!,
+        edge.targetHandle!
      );
      edge.className = "";
    });
@ -410,7 +411,7 @@ export function handleKeyDown(
    | React.KeyboardEvent<HTMLInputElement>
    | React.KeyboardEvent<HTMLTextAreaElement>,
  inputValue: string | string[] | null,
-  block: string,
+  block: string
 ) {
  //condition to fix bug control+backspace on Windows/Linux
  if (
@ -420,9 +421,7 @@ export function handleKeyDown(
      (inputValue === block ||
        inputValue?.charAt(inputValue?.length - 1) === " " ||
        specialCharsRegex.test(inputValue?.charAt(inputValue?.length - 1)))) ||
-    (navigator.userAgent.toUpperCase().includes("MAC") &&
-      e.ctrlKey === true &&
-      e.key === "Backspace")
+    (IS_MAC && e.ctrlKey === true && e.key === "Backspace")
  ) {
    e.preventDefault();
    e.stopPropagation();
@ -435,7 +434,7 @@ export function handleKeyDown(
 }

 export function handleOnlyIntegerInput(
-  event: React.KeyboardEvent<HTMLInputElement>,
+  event: React.KeyboardEvent<HTMLInputElement>
 ) {
  if (
    event.key === "." ||
@ -451,7 +450,7 @@ export function handleOnlyIntegerInput(

 export function getConnectedNodes(
  edge: Edge,
-  nodes: Array<NodeType>,
+  nodes: Array<NodeType>
 ): Array<NodeType> {
  const sourceId = edge.source;
  const targetId = edge.target;
@ -552,7 +551,7 @@ export function checkOldEdgesHandles(edges: Edge[]): boolean {
      !edge.sourceHandle ||
      !edge.targetHandle ||
      !edge.sourceHandle.includes("{") ||
-      !edge.targetHandle.includes("{"),
+      !edge.targetHandle.includes("{")
  );
 }

@ -575,7 +574,7 @@ export function customStringify(obj: any): string {

  const keys = Object.keys(obj).sort();
  const keyValuePairs = keys.map(
-    (key) => `"${key}":${customStringify(obj[key])}`,
+    (key) => `"${key}":${customStringify(obj[key])}`
  );
  return `{${keyValuePairs.join(",")}}`;
 }
@ -604,7 +603,7 @@ export function getHandleId(
  source: string,
  sourceHandle: string,
  target: string,
-  targetHandle: string,
+  targetHandle: string
 ) {
  return (
    "reactflow__edge-" + source + sourceHandle + "-" + target + targetHandle
@ -615,7 +614,7 @@ export function generateFlow(
  selection: OnSelectionChangeParams,
  nodes: Node[],
  edges: Edge[],
-  name: string,
+  name: string
 ): generateFlowType {
  const newFlowData = { nodes, edges, viewport: { zoom: 1, x: 0, y: 0 } };
  const uid = new ShortUniqueId({ length: 5 });
@ -624,7 +623,7 @@ export function generateFlow(
  newFlowData.edges = selection.edges.filter(
    (edge) =>
      selection.nodes.some((node) => node.id === edge.target) &&
-      selection.nodes.some((node) => node.id === edge.source),
+      selection.nodes.some((node) => node.id === edge.source)
  );
  newFlowData.nodes = selection.nodes;

@ -645,7 +644,7 @@ export function generateFlow(
      (edge) =>
        (selection.nodes.some((node) => node.id === edge.target) ||
          selection.nodes.some((node) => node.id === edge.source)) &&
-        newFlowData.edges.every((e) => e.id !== edge.id),
+        newFlowData.edges.every((e) => e.id !== edge.id)
    ),
  };
 }
@ -656,13 +655,13 @@ export function reconnectEdges(groupNode: NodeType, excludedEdges: Edge[]) {
  const { nodes, edges } = groupNode.data.node!.flow!.data!;
  const lastNode = findLastNode(groupNode.data.node!.flow!.data!);
  newEdges = newEdges.filter(
-    (e) => !(nodes.some((n) => n.id === e.source) && e.source !== lastNode?.id),
+    (e) => !(nodes.some((n) => n.id === e.source) && e.source !== lastNode?.id)
  );
  newEdges.forEach((edge) => {
    if (lastNode && edge.source === lastNode.id) {
      edge.source = groupNode.id;
      let newSourceHandle: sourceHandleType = scapeJSONParse(
-        edge.sourceHandle!,
+        edge.sourceHandle!
      );
      newSourceHandle.id = groupNode.id;
      edge.sourceHandle = scapedJSONStringfy(newSourceHandle);
@ -689,7 +688,7 @@ export function reconnectEdges(groupNode: NodeType, excludedEdges: Edge[]) {
 export function filterFlow(
  selection: OnSelectionChangeParams,
  setNodes: (update: Node[] | ((oldState: Node[]) => Node[])) => void,
-  setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void,
+  setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void
 ) {
  setNodes((nodes) => nodes.filter((node) => !selection.nodes.includes(node)));
  setEdges((edges) => edges.filter((edge) => !selection.edges.includes(edge)));
@ -727,7 +726,7 @@ export function updateFlowPosition(NewPosition: XYPosition, flow: FlowType) {
 export function concatFlows(
  flow: FlowType,
  setNodes: (update: Node[] | ((oldState: Node[]) => Node[])) => void,
-  setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void,
+  setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void
 ) {
  const { nodes, edges } = flow.data!;
  setNodes((old) => [...old, ...nodes]);
@ -736,7 +735,7 @@ export function concatFlows(

 export function validateSelection(
  selection: OnSelectionChangeParams,
-  edges: Edge[],
+  edges: Edge[]
 ): Array<string> {
  const clonedSelection = cloneDeep(selection);
  const clonedEdges = cloneDeep(edges);
@ -750,7 +749,7 @@ export function validateSelection(
  let nodesSet = new Set(clonedSelection.nodes.map((n) => n.id));
  // then filter the edges that are connected to the nodes in the set
  let connectedEdges = clonedSelection.edges.filter(
-    (e) => nodesSet.has(e.source) && nodesSet.has(e.target),
+    (e) => nodesSet.has(e.source) && nodesSet.has(e.target)
  );
  // add the edges to the selection
  clonedSelection.edges = connectedEdges;
@ -764,17 +763,17 @@ export function validateSelection(
    clonedSelection.nodes.some(
      (node) =>
        isInputNode(node.data as NodeDataType) ||
-        isOutputNode(node.data as NodeDataType),
+        isOutputNode(node.data as NodeDataType)
    )
  ) {
    errorsArray.push(
-      "Please select only nodes that are not input or output nodes",
+      "Please select only nodes that are not input or output nodes"
    );
  }
  //check if there are two or more nodes with free outputs
  if (
    clonedSelection.nodes.filter(
-      (n) => !clonedSelection.edges.some((e) => e.source === n.id),
+      (n) => !clonedSelection.edges.some((e) => e.source === n.id)
    ).length > 1
  ) {
    errorsArray.push("Please select only one node with free outputs");
@ -785,7 +784,7 @@ export function validateSelection(
    clonedSelection.nodes.some(
      (node) =>
        !clonedSelection.edges.some((edge) => edge.target === node.id) &&
-        !clonedSelection.edges.some((edge) => edge.source === node.id),
+        !clonedSelection.edges.some((edge) => edge.source === node.id)
    )
  ) {
    errorsArray.push("Please select only nodes that are connected");
@ -854,7 +853,7 @@ function isHandleConnected(
  edges: Edge[],
  key: string,
  field: TemplateVariableType,
-  nodeId: string,
+  nodeId: string
 ) {
  /*
 		this function receives a flow and a handleId and check if there is a connection with this handle
@ -870,7 +869,7 @@ function isHandleConnected(
            id: nodeId,
            proxy: { id: field.proxy!.id, field: field.proxy!.field },
            inputTypes: field.input_types,
-          } as targetHandleType),
+          } as targetHandleType)
      )
    ) {
      return true;
@ -885,7 +884,7 @@ function isHandleConnected(
            fieldName: key,
            id: nodeId,
            inputTypes: field.input_types,
-          } as targetHandleType),
+          } as targetHandleType)
      )
    ) {
      return true;
@ -908,7 +907,7 @@ export function generateNodeTemplate(Flow: FlowType) {

 export function generateNodeFromFlow(
  flow: FlowType,
-  getNodeId: (type: string) => string,
+  getNodeId: (type: string) => string
 ): NodeType {
  const { nodes } = flow.data!;
  const outputNode = cloneDeep(findLastNode(flow.data!));
@ -939,7 +938,7 @@ export function generateNodeFromFlow(
 export function connectedInputNodesOnHandle(
  nodeId: string,
  handleId: string,
-  { nodes, edges }: { nodes: NodeType[]; edges: Edge[] },
+  { nodes, edges }: { nodes: NodeType[]; edges: Edge[] }
 ) {
  const connectedNodes: Array<{ name: string; id: string; isGroup: boolean }> =
    [];
@ -976,7 +975,7 @@ export function connectedInputNodesOnHandle(

 export function updateProxyIdsOnTemplate(
  template: APITemplateType,
-  idsMap: { [key: string]: string },
+  idsMap: { [key: string]: string }
 ) {
  Object.keys(template).forEach((key) => {
    if (template[key].proxy && idsMap[template[key].proxy!.id]) {
@ -987,7 +986,7 @@ export function updateProxyIdsOnTemplate(

 export function updateEdgesIds(
  edges: Edge[],
-  idsMap: { [key: string]: string },
+  idsMap: { [key: string]: string }
 ) {
  edges.forEach((edge) => {
    let targetHandle: targetHandleType = edge.data.targetHandle;
@ -1014,7 +1013,7 @@ export function expandGroupNode(
  nodes: Node[],
  edges: Edge[],
  setNodes: (update: Node[] | ((oldState: Node[]) => Node[])) => void,
-  setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void,
+  setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void
 ) {
  const idsMap = updateIds(flow!.data!);
  updateProxyIdsOnTemplate(template, idsMap);
@ -1057,7 +1056,7 @@ export function expandGroupNode(
      const lastNode = cloneDeep(findLastNode(flow!.data!));
      newEdge.source = lastNode!.id;
      let newSourceHandle: sourceHandleType = scapeJSONParse(
-        newEdge.sourceHandle!,
+        newEdge.sourceHandle!
      );
      newSourceHandle.id = lastNode!.id;
      newEdge.data.sourceHandle = newSourceHandle;
@ -1114,7 +1113,7 @@ export function expandGroupNode(

 export function getGroupStatus(
  flow: FlowType,
-  ssData: { [key: string]: { valid: boolean; params: string } },
+  ssData: { [key: string]: { valid: boolean; params: string } }
 ) {
  let status = { valid: true, params: SUCCESS_BUILD };
  const { nodes } = flow.data!;
@ -1133,7 +1132,7 @@ export function getGroupStatus(

 export function createFlowComponent(
  nodeData: NodeDataType,
-  version: string,
+  version: string
 ): FlowType {
  const flowNode: FlowType = {
    data: {
@ -1169,7 +1168,7 @@ export function downloadNode(NodeFLow: FlowType) {

 export function updateComponentNameAndType(
  data: any,
-  component: NodeDataType,
+  component: NodeDataType
 ) {}

 export function removeFileNameFromComponents(flow: FlowType) {
@ -1243,7 +1242,7 @@ export function extractFieldsFromComponenents(data: APIObjectType) {
 export function downloadFlow(
  flow: FlowType,
  flowName: string,
-  flowDescription?: string,
+  flowDescription?: string
 ) {
  let clonedFlow = cloneDeep(flow);
  removeFileNameFromComponents(clonedFlow);
@ -1253,7 +1252,7 @@ export function downloadFlow(
      ...clonedFlow,
      name: flowName,
      description: flowDescription,
-    }),
+    })
  )}`;

  // create a link element and set its properties
@ -1268,7 +1267,7 @@ export function downloadFlow(
 export function downloadFlows() {
  downloadFlowsFromDatabase().then((flows) => {
    const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
-      JSON.stringify(flows),
+      JSON.stringify(flows)
    )}`;

    // create a link element and set its properties
@ -1292,7 +1291,7 @@ export function getRandomDescription(): string {
 export const createNewFlow = (
  flowData: ReactFlowJsonObject,
  flow: FlowType,
-  folderId: string,
+  folderId: string
 ) => {
  return {
    description: flow?.description ?? getRandomDescription(),
--- a/src/frontend/src/utils/styleUtils.ts
+++ b/src/frontend/src/utils/styleUtils.ts
@ -149,6 +149,8 @@ import {
  X,
  XCircle,
  Zap,
+  PlaySquare,
+  Wrench,
 } from "lucide-react";
 import { FaApple, FaDiscord, FaGithub } from "react-icons/fa";
 import { AWSIcon } from "../icons/AWS";
@ -533,11 +535,12 @@ export const nodeIconsLucide: iconsType = {
  Command,
  ArrowBigUp,
  Dot,
+  RotateCcw,
+  Wrench,
  FolderPlusIcon,
  FolderIcon,
  Discord: FaDiscord,
  PaperclipIcon,
-  RotateCcw,
  Settings,
  Streamlit,
 };
--- a/src/frontend/src/utils/utils.ts
+++ b/src/frontend/src/utils/utils.ts
@ -10,6 +10,7 @@ import {
 import { NodeType } from "../types/flow";
 import { FlowState } from "../types/tabs";
 import TableAutoCellRender from "../components/tableComponent/components/tableAutoCellRender";
+import { MODAL_CLASSES } from "../constants/constants";

 export function classNames(...classes: Array<string>): string {
  return classes.filter(Boolean).join(" ");
@ -406,3 +407,8 @@ export function extractColumnsFromRows(

  return Object.values(columnsKeys);
 }
+
+export function isThereModal(): boolean {
+  const modal = document.body.getElementsByClassName(MODAL_CLASSES);
+  return modal.length > 0;
+}
--- a/test-results/.last-run.json
+++ b/test-results/.last-run.json
@ -0,0 +1,4 @@
+{
+    "status": "failed",
+    "failedTests": []
+}