diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx
index 271bfac55..f43d4b9bc 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx
@@ -16,6 +16,10 @@ export default function NodeDescription({
   inputClassName,
   mdClassName,
   style,
+  editNameDescription,
+  setEditNameDescription,
+  stickyNote,
+  setHasChangedNodeDescription,
 }: {
   description?: string;
   selected?: boolean;
@@ -26,8 +30,11 @@ export default function NodeDescription({
   inputClassName?: string;
   mdClassName?: string;
   style?: React.CSSProperties;
+  editNameDescription: boolean;
+  setEditNameDescription?: (value: boolean) => void;
+  stickyNote?: boolean;
+  setHasChangedNodeDescription?: (value: boolean) => void;
 }) {
-  const [inputDescription, setInputDescription] = useState(false);
   const [nodeDescription, setNodeDescription] = useState<string>(
     description ?? "",
   );
@@ -36,6 +43,12 @@ export default function NodeDescription({
   const overflowRef = useRef<HTMLDivElement>(null);
   const [hasScroll, sethasScroll] = useState(false);
 
+  useEffect(() => {
+    if (selected && editNameDescription) {
+      takeSnapshot();
+    }
+  }, [editNameDescription]);
+
   useEffect(() => {
     //timeout to wait for the dom to update
     setTimeout(() => {
@@ -49,13 +62,7 @@ export default function NodeDescription({
         }
       }
     }, 200);
-  }, [inputDescription]);
-
-  useEffect(() => {
-    if (!selected) {
-      setInputDescription(false);
-    }
-  }, [selected]);
+  }, [editNameDescription]);
 
   useEffect(() => {
     setNodeDescription(description ?? "");
@@ -80,55 +87,81 @@ export default function NodeDescription({
     [description, emptyPlaceholder, mdClassName],
   );
 
+  const handleBlurFn = () => {
+    setNodeDescription(nodeDescription);
+    setNode(nodeId, (old) => ({
+      ...old,
+      data: {
+        ...old.data,
+        node: {
+          ...old.data.node,
+          description: nodeDescription,
+        },
+      },
+    }));
+    if (stickyNote) {
+      setEditNameDescription?.(false);
+    }
+  };
+
+  const handleKeyDownFn = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    handleKeyDown(e, nodeDescription, "");
+
+    if (e.key === "Escape") {
+      setEditNameDescription?.(false);
+      setNodeDescription(description ?? "");
+
+      if (stickyNote) {
+        setNodeDescription(nodeDescription);
+        setNode(nodeId, (old) => ({
+          ...old,
+          data: {
+            ...old.data,
+            node: {
+              ...old.data.node,
+              description: nodeDescription,
+            },
+          },
+        }));
+      }
+    }
+  };
+
+  const handleDoubleClickFn = () => {
+    if (stickyNote) {
+      setEditNameDescription?.(true);
+      takeSnapshot();
+    }
+  };
+
+  const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setHasChangedNodeDescription?.(true);
+    setNodeDescription(e.target.value);
+  };
+
   return (
     <div
       className={cn(
-        !inputDescription ? "overflow-auto" : "",
+        !editNameDescription ? "overflow-auto" : "",
         hasScroll ? "nowheel" : "",
         charLimit ? "px-2 pb-4" : "",
         "w-full",
       )}
     >
-      {inputDescription ? (
+      {editNameDescription ? (
         <>
           <Textarea
             maxLength={charLimit}
-            className={cn("nowheel h-full", inputClassName)}
+            className={cn(
+              "nowheel h-full w-full focus:border-primary focus:ring-0",
+              inputClassName,
+            )}
             autoFocus
             style={style}
-            onBlur={() => {
-              setInputDescription(false);
-              setNodeDescription(nodeDescription);
-              setNode(nodeId, (old) => ({
-                ...old,
-                data: {
-                  ...old.data,
-                  node: {
-                    ...old.data.node,
-                    description: nodeDescription,
-                  },
-                },
-              }));
-            }}
+            onBlur={handleBlurFn}
             value={nodeDescription}
-            onChange={(e) => setNodeDescription(e.target.value)}
-            onKeyDown={(e) => {
-              handleKeyDown(e, nodeDescription, "");
-              if (e.key === "Escape") {
-                setInputDescription(false);
-                setNodeDescription(nodeDescription);
-                setNode(nodeId, (old) => ({
-                  ...old,
-                  data: {
-                    ...old.data,
-                    node: {
-                      ...old.data.node,
-                      description: nodeDescription,
-                    },
-                  },
-                }));
-              }
-            }}
+            onChange={onChange}
+            onKeyDown={handleKeyDownFn}
           />
           {charLimit && (nodeDescription?.length ?? 0) >= charLimit - 100 && (
             <div
@@ -150,14 +183,11 @@ export default function NodeDescription({
           data-testid="generic-node-desc"
           ref={overflowRef}
           className={cn(
-            "nodoubleclick generic-node-desc-text h-full cursor-text text-[13px] text-muted-foreground word-break-break-word",
+            "nodoubleclick generic-node-desc-text h-full cursor-grab text-[13px] text-muted-foreground word-break-break-word",
             description === "" || !description ? "font-light italic" : "",
             placeholderClassName,
           )}
-          onDoubleClick={(e) => {
-            setInputDescription(true);
-            takeSnapshot();
-          }}
+          onDoubleClick={handleDoubleClickFn}
         >
           {renderedDescription}
         </div>
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeName/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeName/index.tsx
index e00d01122..6d7e0d254 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/NodeName/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeName/index.tsx
@@ -13,6 +13,9 @@ export default function NodeName({
   validationStatus,
   isOutdated,
   beta,
+  editNameDescription,
+  toggleEditNameDescription,
+  setHasChangedNodeDescription,
 }: {
   display_name?: string;
   selected?: boolean;
@@ -21,70 +24,83 @@ export default function NodeName({
   validationStatus: VertexBuildTypeAPI | null;
   isOutdated: boolean;
   beta: boolean;
+  editNameDescription: boolean;
+  toggleEditNameDescription: () => void;
+  setHasChangedNodeDescription: (hasChanged: boolean) => void;
 }) {
-  const [inputName, setInputName] = useState(false);
   const [nodeName, setNodeName] = useState<string>(display_name ?? "");
   const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot);
   const setNode = useFlowStore((state) => state.setNode);
+
   useEffect(() => {
-    if (!selected) {
-      setInputName(false);
+    if (selected && editNameDescription) {
+      takeSnapshot();
     }
-  }, [selected]);
+  }, [editNameDescription]);
 
   useEffect(() => {
     setNodeName(display_name ?? "");
   }, [display_name]);
 
-  return inputName ? (
+  const handleBlur = () => {
+    if (nodeName?.trim() !== "") {
+      setNodeName(nodeName);
+      setNode(nodeId, (old) => ({
+        ...old,
+        data: {
+          ...old.data,
+          node: {
+            ...old.data.node,
+            display_name: nodeName,
+          },
+        },
+      }));
+    } else {
+      setNodeName(display_name ?? "");
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      handleBlur();
+      toggleEditNameDescription();
+    }
+    if (e.key === "Escape") {
+      setNodeName(display_name ?? "");
+      toggleEditNameDescription();
+    }
+  };
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setNodeName(e.target.value);
+    setHasChangedNodeDescription(true);
+  };
+
+  return editNameDescription ? (
     <div className="m-[1px] w-full">
       <Input
-        onBlur={() => {
-          setInputName(false);
-          if (nodeName?.trim() !== "") {
-            setNodeName(nodeName);
-            setNode(nodeId, (old) => ({
-              ...old,
-              data: {
-                ...old.data,
-                node: {
-                  ...old.data.node,
-                  display_name: nodeName,
-                },
-              },
-            }));
-          } else {
-            setNodeName(display_name ?? "");
-          }
-        }}
+        onBlur={handleBlur}
         value={nodeName}
         autoFocus
-        onChange={(e) => setNodeName(e.target.value)}
+        onChange={onChange}
         data-testid={`input-title-${display_name}`}
+        onKeyDown={handleKeyDown}
+        className="py-1"
       />
     </div>
   ) : (
     <div className="group flex w-full items-center gap-1">
       <div
-        onDoubleClick={(event) => {
-          if (!showNode) {
-            return;
-          }
-          setInputName(true);
-          takeSnapshot();
-          event.stopPropagation();
-          event.preventDefault();
-        }}
         data-testid={"title-" + display_name}
         className={cn(
           "nodoubleclick w-full truncate font-medium text-primary",
           showNode ? "cursor-text" : "cursor-default",
         )}
       >
-        <div className="flex items-center gap-2">
+        <div className="flex cursor-grab items-center gap-2">
           <span
             className={cn(
-              "max-w-44 truncate text-[14px]",
+              "max-w-44 cursor-grab truncate text-[14px]",
               validationStatus?.data?.duration && "max-w-36",
               beta && "max-w-36",
               validationStatus?.data?.duration && beta && "max-w-20",
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx
index f4e5ba35b..ae4d86c88 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx
@@ -70,6 +70,7 @@ const HideShowButton = memo(
       unstyled
       onClick={onClick}
       data-testid={`input-inspection-${title.toLowerCase()}`}
+      className="cursor-pointer"
     >
       <ShadTooltip
         content={disabled ? null : hidden ? "Show output" : "Hide output"}
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx
index 4b47856ae..8b16cccc0 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx
@@ -244,7 +244,7 @@ export default function NodeStatus({
             onClick={handleClickRun}
           >
             {showNode && (
-              <Button unstyled className="group">
+              <Button unstyled className="nodrag group">
                 <div data-testid={`button_run_` + display_name.toLowerCase()}>
                   <IconComponent
                     name={iconName}
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 1d4be5b2e..bb86f9b25 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -2,10 +2,11 @@ import ForwardedIconComponent from "@/components/common/genericIconComponent";
 import ShadTooltip from "@/components/common/shadTooltipComponent";
 import { usePostValidateComponentCode } from "@/controllers/API/queries/nodes/use-post-validate-component-code";
 import { useUpdateNodeInternals } from "@xyflow/react";
-import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { Button } from "../../components/ui/button";
 import {
+  ICON_STROKE_WIDTH,
   TOOLTIP_HIDDEN_OUTPUTS,
   TOOLTIP_OPEN_HIDDEN_OUTPUTS,
 } from "../../constants/constants";
@@ -20,7 +21,9 @@ import { NodeDataType } from "../../types/flow";
 import { checkHasToolMode } from "../../utils/reactflowUtils";
 import { classNames, cn } from "../../utils/utils";
 
+import { useAlternate } from "@/shared/hooks/use-alternate";
 import { useUtilityStore } from "@/stores/utilityStore";
+import { useChangeOnUnfocus } from "../../shared/hooks/use-change-on-unfocus";
 import { processNodeAdvancedFields } from "../helpers/process-node-advanced-fields";
 import useCheckCodeValidity from "../hooks/use-check-code-validity";
 import useUpdateNodeCode from "../hooks/use-update-node-code";
@@ -54,8 +57,8 @@ const HiddenOutputsButton = memo(
     >
       <ForwardedIconComponent
         name={showHiddenOutputs ? "ChevronsDownUp" : "ChevronsUpDown"}
-        strokeWidth={1.5}
-        className="h-4 w-4 text-placeholder-foreground group-hover:text-foreground"
+        strokeWidth={ICON_STROKE_WIDTH}
+        className="icon-size text-placeholder-foreground group-hover:text-foreground"
       />
     </Button>
   ),
@@ -99,6 +102,9 @@ function GenericNode({
 
   const { mutate: validateComponentCode } = usePostValidateComponentCode();
 
+  const [editNameDescription, toggleEditNameDescription, set] =
+    useAlternate(false);
+
   const updateNodeCode = useUpdateNodeCode(
     data?.id,
     data.node!,
@@ -199,6 +205,18 @@ function GenericNode({
     [data.node?.outputs],
   );
 
+  const nodeRef = useRef<HTMLDivElement>(null);
+
+  useChangeOnUnfocus({
+    selected,
+    value: editNameDescription,
+    onChange: set,
+    defaultValue: false,
+    shouldChangeValue: (value) => value === true,
+    nodeRef,
+    callback: toggleEditNameDescription,
+  });
+
   const renderOutputs = useCallback(
     (outputs, key?: string) => {
       return outputs?.map((output, idx) => (
@@ -231,29 +249,78 @@ function GenericNode({
     [data.node?.outputs],
   );
 
+  const [hasChangedNodeDescription, setHasChangedNodeDescription] =
+    useState(false);
+
   const memoizedNodeToolbarComponent = useMemo(() => {
     return selected ? (
-      <div className={cn("absolute -top-12 left-1/2 z-50 -translate-x-1/2")}>
-        <NodeToolbarComponent
-          data={data}
-          deleteNode={(id) => {
-            takeSnapshot();
-            deleteNode(id);
-          }}
-          setShowNode={(show) => {
-            setNode(data.id, (old) => ({
-              ...old,
-              data: { ...old.data, showNode: show },
-            }));
-          }}
-          numberOfOutputHandles={shownOutputs.length ?? 0}
-          showNode={showNode}
-          openAdvancedModal={false}
-          onCloseAdvancedModal={() => {}}
-          updateNode={handleUpdateCode}
-          isOutdated={isOutdated && isUserEdited}
-        />
-      </div>
+      <>
+        <div
+          className={cn(
+            "absolute -top-12 left-1/2 z-50 -translate-x-1/2",
+            "transform transition-all duration-300 ease-out",
+          )}
+        >
+          <NodeToolbarComponent
+            data={data}
+            deleteNode={(id) => {
+              takeSnapshot();
+              deleteNode(id);
+            }}
+            setShowNode={(show) => {
+              setNode(data.id, (old) => ({
+                ...old,
+                data: { ...old.data, showNode: show },
+              }));
+            }}
+            numberOfOutputHandles={shownOutputs.length ?? 0}
+            showNode={showNode}
+            openAdvancedModal={false}
+            onCloseAdvancedModal={() => {}}
+            updateNode={handleUpdateCode}
+            isOutdated={isOutdated && isUserEdited}
+          />
+        </div>
+        <div className="-z-10">
+          <Button
+            unstyled
+            onClick={() => {
+              toggleEditNameDescription();
+              setHasChangedNodeDescription(false);
+            }}
+            className={cn(
+              "nodrag absolute left-1/2 z-50 flex h-6 w-6 cursor-pointer items-center justify-center rounded-md",
+              "transform transition-all duration-300 ease-out",
+              showNode
+                ? "top-2 translate-x-[10.4rem]"
+                : "top-0 translate-x-[6.4rem]",
+              editNameDescription && hasChangedNodeDescription
+                ? "bg-accent-emerald"
+                : "bg-zinc-foreground",
+            )}
+            data-testid={
+              editNameDescription && hasChangedNodeDescription
+                ? "save-name-description-button"
+                : "edit-name-description-button"
+            }
+          >
+            <ForwardedIconComponent
+              name={
+                editNameDescription && hasChangedNodeDescription
+                  ? "Check"
+                  : "PencilLine"
+              }
+              strokeWidth={ICON_STROKE_WIDTH}
+              className={cn(
+                editNameDescription && hasChangedNodeDescription
+                  ? "text-accent-emerald-foreground"
+                  : "text-muted-foreground",
+                "icon-size",
+              )}
+            />
+          </Button>
+        </div>
+      </>
     ) : (
       <></>
     );
@@ -268,6 +335,9 @@ function GenericNode({
     isUserEdited,
     selected,
     shortcuts,
+    editNameDescription,
+    hasChangedNodeDescription,
+    toggleEditNameDescription,
   ]);
 
   useEffect(() => {
@@ -298,6 +368,9 @@ function GenericNode({
         validationStatus={validationStatus}
         isOutdated={isOutdated}
         beta={data.node?.beta || false}
+        editNameDescription={editNameDescription}
+        toggleEditNameDescription={toggleEditNameDescription}
+        setHasChangedNodeDescription={setHasChangedNodeDescription}
       />
     );
   }, [
@@ -308,6 +381,9 @@ function GenericNode({
     validationStatus,
     isOutdated,
     data.node?.beta,
+    editNameDescription,
+    toggleEditNameDescription,
+    setHasChangedNodeDescription,
   ]);
 
   const renderNodeStatus = useCallback(() => {
@@ -346,9 +422,19 @@ function GenericNode({
         mdClassName={"dark:prose-invert"}
         nodeId={data.id}
         selected={selected}
+        editNameDescription={editNameDescription}
+        setEditNameDescription={set}
+        setHasChangedNodeDescription={setHasChangedNodeDescription}
       />
     );
-  }, [data.node?.description, data.id, selected]);
+  }, [
+    data.node?.description,
+    data.id,
+    selected,
+    editNameDescription,
+    toggleEditNameDescription,
+    setHasChangedNodeDescription,
+  ]);
 
   const renderInputParameters = useCallback(() => {
     return (
@@ -382,8 +468,8 @@ function GenericNode({
           <div className="flex h-10 w-full items-center gap-4 rounded-t-[0.69rem] bg-warning p-2 px-4 text-warning-foreground">
             <ForwardedIconComponent
               name="AlertTriangle"
-              strokeWidth={1.5}
-              className="h-[18px] w-[18px] shrink-0"
+              strokeWidth={ICON_STROKE_WIDTH}
+              className="icon-size shrink-0"
             />
             <span className="flex-1 truncate text-sm font-medium">
               {showNode && "Update Ready"}
@@ -438,7 +524,7 @@ function GenericNode({
           {showNode && <div>{renderDescription()}</div>}
         </div>
         {showNode && (
-          <div className="relative">
+          <div className="nopan nodelete nodrag noflow relative cursor-auto">
             <>
               {renderInputParameters()}
               <div
diff --git a/src/frontend/src/CustomNodes/NoteNode/index.tsx b/src/frontend/src/CustomNodes/NoteNode/index.tsx
index e3ecdee14..7f91e1ca1 100644
--- a/src/frontend/src/CustomNodes/NoteNode/index.tsx
+++ b/src/frontend/src/CustomNodes/NoteNode/index.tsx
@@ -3,6 +3,7 @@ import {
   NOTE_NODE_MIN_HEIGHT,
   NOTE_NODE_MIN_WIDTH,
 } from "@/constants/constants";
+import { useAlternate } from "@/shared/hooks/use-alternate";
 import { NoteDataType } from "@/types/flow";
 import { cn } from "@/utils/utils";
 import { NodeResizer } from "@xyflow/react";
@@ -32,6 +33,8 @@ function NoteNode({
     }
   }, []);
 
+  const [editNameDescription, set] = useAlternate(false);
+
   const MemoNoteToolbarComponent = useMemo(
     () =>
       selected ? (
@@ -98,6 +101,9 @@ function NoteNode({
             placeholderClassName={
               COLOR_OPTIONS[bgColor] === null ? "" : "dark:!text-background"
             }
+            editNameDescription={editNameDescription}
+            setEditNameDescription={set}
+            stickyNote
           />
         </div>
       </div>
diff --git a/src/frontend/src/CustomNodes/helpers/get-class-toolbar-transform.ts b/src/frontend/src/CustomNodes/helpers/get-class-toolbar-transform.ts
new file mode 100644
index 000000000..debe69ddd
--- /dev/null
+++ b/src/frontend/src/CustomNodes/helpers/get-class-toolbar-transform.ts
@@ -0,0 +1,6 @@
+export const getTransformClasses = (showToolbar, showNode) => {
+  if (showToolbar && showNode) return "translate-x-[10.4rem] opacity-100";
+  if (!showToolbar && showNode) return "translate-x-[8rem] opacity-0";
+  if (showToolbar && !showNode) return "translate-x-[6.4rem] opacity-100";
+  return "translate-x-[5rem] opacity-0";
+};
diff --git a/src/frontend/src/shared/hooks/use-alternate.tsx b/src/frontend/src/shared/hooks/use-alternate.tsx
new file mode 100644
index 000000000..7e1b7207f
--- /dev/null
+++ b/src/frontend/src/shared/hooks/use-alternate.tsx
@@ -0,0 +1,14 @@
+import { useCallback, useState } from "react";
+
+export const useAlternate = (
+  initialState: boolean = false,
+): [boolean, () => void, (value: boolean) => void] => {
+  const [switched, setSwitched] = useState(initialState);
+  const set = useCallback((value) => setSwitched(value), []);
+
+  const alternate = useCallback(
+    () => setSwitched((prevState) => !prevState),
+    [],
+  );
+  return [switched, alternate, set];
+};
diff --git a/src/frontend/src/shared/hooks/use-change-on-unfocus.tsx b/src/frontend/src/shared/hooks/use-change-on-unfocus.tsx
new file mode 100644
index 000000000..c0359d0f6
--- /dev/null
+++ b/src/frontend/src/shared/hooks/use-change-on-unfocus.tsx
@@ -0,0 +1,49 @@
+import { RefObject, useEffect } from "react";
+
+interface UseChangeOnUnfocusProps<T> {
+  selected?: boolean;
+  value: T;
+  onChange?: (value: T) => void;
+  defaultValue: T;
+  shouldChangeValue?: (value: T) => boolean;
+  nodeRef: RefObject<HTMLDivElement>;
+  callback?: () => void;
+  callbackEscape?: () => void;
+}
+
+export function useChangeOnUnfocus<T>({
+  selected,
+  value,
+  onChange,
+  defaultValue,
+  shouldChangeValue,
+  nodeRef,
+  callback,
+}: UseChangeOnUnfocusProps<T>) {
+  useEffect(() => {
+    if (!selected) {
+      onChange?.(defaultValue);
+    }
+
+    const handleVisibilityChange = () => {
+      if (document.hidden && shouldChangeValue?.(value)) {
+        onChange?.(defaultValue);
+        callback?.();
+      }
+    };
+
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, [
+    selected,
+    value,
+    onChange,
+    defaultValue,
+    shouldChangeValue,
+    nodeRef,
+    callback,
+  ]);
+}
diff --git a/src/frontend/src/style/index.css b/src/frontend/src/style/index.css
index 914d1f287..346db6251 100644
--- a/src/frontend/src/style/index.css
+++ b/src/frontend/src/style/index.css
@@ -167,6 +167,8 @@
     --tool-mode-gradient-2: #ff3276;
 
     --slider-input-border: #d4d4d8;
+
+    --zinc-foreground: 240 5.9% 90%;
   }
 
   .dark {
@@ -323,5 +325,7 @@
     --node-ring: 240 6% 90%;
 
     --slider-input-border: #d4d4d8;
+
+    --zinc-foreground: 240 5.2% 33.9%;
   }
 }
diff --git a/src/frontend/tailwind.config.mjs b/src/frontend/tailwind.config.mjs
index b3b867103..dfcd8cb64 100644
--- a/src/frontend/tailwind.config.mjs
+++ b/src/frontend/tailwind.config.mjs
@@ -257,6 +257,7 @@ const config = {
         "terminal-green": "hsl(var(--terminal-green))",
         "cosmic-void": "hsl(var(--cosmic-void))",
         "slider-input-border": "var(--slider-input-border)",
+        "zinc-foreground": "hsl(var(--zinc-foreground))",
       },
       borderRadius: {
         lg: `var(--radius)`,
diff --git a/src/frontend/tests/core/features/group.spec.ts b/src/frontend/tests/core/features/group.spec.ts
index a2d168bea..4aa098fc4 100644
--- a/src/frontend/tests/core/features/group.spec.ts
+++ b/src/frontend/tests/core/features/group.spec.ts
@@ -22,9 +22,10 @@ test.describe("group node test", () => {
       await page.getByTestId("title-OpenAI").click({ modifiers: ["Control"] });
 
       await page.getByRole("button", { name: "Group" }).click();
-      await page.getByTestId("title-Group").dblclick();
+      await page.getByTestId("title-Group").click();
+      await page.getByTestId("edit-name-description-button").click();
       await page.getByTestId("input-title-Group").first().fill("test");
-      await page.getByTestId("icon-Ungroup").first().click();
+      await page.getByTestId("save-name-description-button").first().click();
       await page.keyboard.press("Control+g");
       await page.getByTestId("title-OpenAI").isVisible();
       await page.getByTestId("title-Prompt").isVisible();
diff --git a/src/frontend/tests/extended/features/edit-name-description-node.spec.ts b/src/frontend/tests/extended/features/edit-name-description-node.spec.ts
new file mode 100644
index 000000000..7c042f976
--- /dev/null
+++ b/src/frontend/tests/extended/features/edit-name-description-node.spec.ts
@@ -0,0 +1,113 @@
+import { expect, test } from "@playwright/test";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
+
+test(
+  "user should be able to edit name and description of a node",
+  { tag: ["@release", "@workspace"] },
+
+  async ({ page }) => {
+    const randomName = Math.random().toString(36).substring(2, 15);
+    const randomDescription = Math.random().toString(36).substring(2, 15);
+
+    const randomName_2 = Math.random().toString(36).substring(2, 15);
+    const randomDescription_2 = Math.random().toString(36).substring(2, 15);
+
+    const randomName_3 = Math.random().toString(36).substring(2, 15);
+    const randomDescription_3 = Math.random().toString(36).substring(2, 15);
+
+    const randomName_4 = Math.random().toString(36).substring(2, 15);
+    const randomDescription_4 = Math.random().toString(36).substring(2, 15);
+
+    await awaitBootstrapTest(page);
+
+    await page.waitForSelector('[data-testid="blank-flow"]', {
+      timeout: 30000,
+    });
+    await page.getByTestId("blank-flow").click();
+
+    await page.waitForSelector(
+      '[data-testid="sidebar-custom-component-button"]',
+      {
+        timeout: 30000,
+      },
+    );
+
+    await page.waitForTimeout(500);
+
+    await page.getByTestId("sidebar-custom-component-button").click();
+
+    await page.getByTestId("div-generic-node").click();
+
+    await page.getByTestId("edit-name-description-button").click();
+
+    await page.getByTestId("input-title-Custom Component").fill(randomName);
+
+    await page.getByTestId("textarea").fill(randomDescription);
+
+    await page.getByTestId("api_button_modal").click();
+
+    await page.getByText("Close").last().click();
+
+    expect(await page.getByText(randomName).count()).toBe(1);
+    expect(await page.getByText(randomDescription).count()).toBe(1);
+
+    await page.getByTestId("div-generic-node").click();
+
+    await page.getByTestId("edit-name-description-button").click();
+
+    await page.getByTestId(`input-title-${randomName}`).fill(randomName_2);
+
+    await page.getByTestId("textarea").fill(randomDescription_2);
+
+    await page.getByTestId("save-name-description-button").click();
+
+    expect(await page.getByText(randomName_2).count()).toBe(1);
+    expect(await page.getByText(randomDescription_2).count()).toBe(1);
+
+    await page.getByTestId("div-generic-node").click();
+
+    await page.getByTestId("edit-name-description-button").click();
+
+    await page.getByTestId(`input-title-${randomName_2}`).fill(randomName_3);
+
+    await page.keyboard.press("Enter");
+
+    expect(await page.getByText(randomName_3).count()).toBe(1);
+
+    await page.getByTestId("div-generic-node").click();
+
+    await page.getByTestId("edit-name-description-button").click();
+
+    await page.getByTestId(`input-title-${randomName_3}`).fill(randomName_4);
+
+    await page.getByTestId("textarea").fill(randomDescription_4);
+
+    await page.keyboard.press("Escape");
+
+    expect(await page.getByText(randomName_4).count()).toBe(1);
+
+    expect(await page.getByText(randomDescription_2).count()).toBe(1);
+
+    expect(await page.getByText(randomDescription_4).count()).toBe(0);
+
+    expect(await page.getByText(randomName_3).count()).toBe(0);
+
+    await page.getByTestId("div-generic-node").click();
+
+    await page.getByTestId("edit-name-description-button").click();
+
+    await page.getByTestId("textarea").fill(randomDescription_3);
+
+    await page.getByTestId(`input-title-${randomName_4}`).fill(randomName_3);
+
+    await page.keyboard.press("Escape");
+
+    expect(await page.getByText(randomDescription_3).count()).toBe(1);
+
+    expect(await page.getByText(randomName_4).count()).toBe(1);
+
+    expect(await page.getByText(randomName_3).count()).toBe(0);
+
+    expect(await page.getByText(randomDescription_4).count()).toBe(0);
+  },
+);
diff --git a/src/frontend/tests/extended/regression/general-bugs-save-changes-on-node.spec.ts b/src/frontend/tests/extended/regression/general-bugs-save-changes-on-node.spec.ts
index adf7b1751..085359967 100644
--- a/src/frontend/tests/extended/regression/general-bugs-save-changes-on-node.spec.ts
+++ b/src/frontend/tests/extended/regression/general-bugs-save-changes-on-node.spec.ts
@@ -2,17 +2,25 @@ import { expect, Page, test } from "@playwright/test";
 import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
 
 async function verifyTextareaValue(page: Page, value: string) {
+  await page
+    .getByTestId("textarea_str_input_value")
+    .waitFor({ state: "visible" });
   await page.getByTestId("textarea_str_input_value").fill(value);
+
+  await expect(page.getByTestId("textarea_str_input_value")).toHaveValue(value);
+
   await page.getByTestId("icon-ChevronLeft").first().click();
 
   await page.waitForSelector('[data-testid="list-card"]', {
-    timeout: 3000,
+    timeout: 5000,
+    state: "visible",
   });
 
   await page.getByTestId("list-card").first().click();
 
   await page.waitForSelector('[data-testid="textarea_str_input_value"]', {
-    timeout: 3000,
+    timeout: 5000,
+    state: "visible",
   });
 
   const inputValue = await page
@@ -26,32 +34,35 @@ test(
   { tag: ["@release", "@components"] },
   async ({ page }) => {
     const randomValues = Array.from({ length: 4 }, () =>
-      Math.random().toString(36).substring(2, 15),
+      Math.random().toString(36).substring(2, 8),
     );
 
     await awaitBootstrapTest(page);
     await page.getByTestId("blank-flow").click();
 
     await page.waitForSelector('[data-testid="fit_view"]', {
-      timeout: 100000,
+      timeout: 10000,
+      state: "visible",
     });
+
     await page.getByTestId("sidebar-search-input").click();
     await page.getByTestId("sidebar-search-input").fill("text output");
 
-    await page
-      .getByTestId("outputsText Output")
-      .hover()
-      .then(async () => {
-        await page.getByTestId("add-component-button-text-output").click();
-      });
+    await page.getByTestId("outputsText Output").waitFor({ state: "visible" });
+    await page.getByTestId("add-component-button-text-output").click();
 
     await page.waitForSelector('[data-testid="title-Text Output"]', {
-      timeout: 3000,
+      timeout: 5000,
+      state: "visible",
     });
 
-    // Verify each random value
     for (const value of randomValues) {
-      await verifyTextareaValue(page, value);
+      try {
+        await verifyTextareaValue(page, value);
+      } catch (error) {
+        console.error(`Failed to verify value: ${value}`, error);
+        throw error;
+      }
     }
   },
 );