diff --git a/src/frontend/src/components/AccordionComponent/index.tsx b/src/frontend/src/components/AccordionComponent/index.tsx
index 06ecc36b0..e00932c76 100644
--- a/src/frontend/src/components/AccordionComponent/index.tsx
+++ b/src/frontend/src/components/AccordionComponent/index.tsx
@@ -32,13 +32,6 @@ export default function AccordionComponent({
     value === "" ? setValue(keyValue!) : setValue("");
   }
 
-  const handleKeyDown = (event) => {
-    /* if (event.key === "Backspace") {
-      event.preventDefault();
-      event.stopPropagation();
-    } */
-  };
-
   return (
     <>
       <Accordion
@@ -46,7 +39,6 @@ export default function AccordionComponent({
         className="w-full"
         value={value}
         onValueChange={setValue}
-        onKeyDown={handleKeyDown}
       >
         <AccordionItem value={keyValue!} className="border-b">
           <AccordionTrigger
diff --git a/src/frontend/src/components/codeTabsComponent/index.tsx b/src/frontend/src/components/codeTabsComponent/index.tsx
index cdb2ec0ed..2c61fed56 100644
--- a/src/frontend/src/components/codeTabsComponent/index.tsx
+++ b/src/frontend/src/components/codeTabsComponent/index.tsx
@@ -34,6 +34,7 @@ import { classNames } from "../../utils/utils";
 import IconComponent from "../genericIconComponent";
 import { unselectAllNodes } from "../../utils/reactflowUtils";
 import { typesContext } from "../../contexts/typesContext";
+import { alertContext } from "../../contexts/alertContext";
 
 export default function CodeTabsComponent({
   flow,
@@ -48,6 +49,7 @@ export default function CodeTabsComponent({
   const [openAccordion, setOpenAccordion] = useState<string[]>([]);
   const { dark } = useContext(darkContext);
   const { reactFlowInstance } = useContext(typesContext);
+  const { isTweakPage, setIsTweakPage } = useContext(alertContext);
 
   useEffect(() => {
     if (flow && flow["data"]!["nodes"]) {
@@ -62,6 +64,10 @@ export default function CodeTabsComponent({
         reactFlowInstance?.setNodes(nodes);
       }
     });
+
+    return () => {
+      if (isTweakPage) setIsTweakPage(false);
+    };
   }, [])
 
   const copyToClipboard = () => {
diff --git a/src/frontend/src/contexts/alertContext.tsx b/src/frontend/src/contexts/alertContext.tsx
index 1741b88b6..46a0d8a3b 100644
--- a/src/frontend/src/contexts/alertContext.tsx
+++ b/src/frontend/src/contexts/alertContext.tsx
@@ -26,6 +26,8 @@ const initialValue: alertContextType = {
   pushNotificationList: () => {},
   clearNotificationList: () => {},
   removeFromNotificationList: () => {},
+  isTweakPage: false,
+  setIsTweakPage: () => {}, 
 };
 
 export const alertContext = createContext<alertContextType>(initialValue);
@@ -48,6 +50,7 @@ export function AlertProvider({ children }: { children: ReactNode }) {
   const [successOpen, setSuccessOpen] = useState(false);
   const [notificationCenter, setNotificationCenter] = useState(false);
   const [notificationList, setNotificationList] = useState<AlertItemType[]>([]);
+  const [isTweakPage, setIsTweakPage] = useState<boolean>(false);
   const pushNotificationList = (notification: AlertItemType) => {
     setNotificationList((old) => {
       let newNotificationList = _.cloneDeep(old);
@@ -120,6 +123,8 @@ export function AlertProvider({ children }: { children: ReactNode }) {
   return (
     <alertContext.Provider
       value={{
+        isTweakPage,
+        setIsTweakPage,
         removeFromNotificationList,
         clearNotificationList,
         notificationList,
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index 238641279..e4ef45f34 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -28,7 +28,7 @@ export default function CodeAreaModal({
   const { dark } = useContext(darkContext);
   const { reactFlowInstance } = useContext(typesContext);
   const [height, setHeight] = useState<string | null>(null);
-  const { setErrorData, setSuccessData } = useContext(alertContext);
+  const { setErrorData, setSuccessData, isTweakPage } = useContext(alertContext);
   const [error, setError] = useState<{
     detail: { error: string | undefined; traceback: string | undefined };
   } | null>(null);
@@ -39,7 +39,7 @@ export default function CodeAreaModal({
     if (dynamic && Object.keys(nodeClass!.template).length > 2) {
       return;
     }
-    processCode();
+    if (!isTweakPage) processCode();
   }, []);
 
   function processNonDynamicField() {
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index f8ac36230..f1a84bce9 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -21,7 +21,7 @@ export default function ExtraSidebar(): JSX.Element {
   const { data, templates } = useContext(typesContext);
   const { flows, tabId, uploadFlow, tabsState, saveFlow, isBuilt } =
     useContext(TabsContext);
-  const { setSuccessData, setErrorData } = useContext(alertContext);
+  const { setSuccessData, setErrorData, setIsTweakPage } = useContext(alertContext);
   const [dataFilter, setFilterData] = useState(data);
   const [search, setSearch] = useState("");
   const isPending = tabsState[tabId]?.isPending;
@@ -100,7 +100,10 @@ export default function ExtraSidebar(): JSX.Element {
           <div className="side-bar-button">
             {flow && flow.data && (
               <ApiModal flow={flow} disable={!isBuilt}>
-                <div className={classNames("extra-side-bar-buttons")}>
+                <div
+                  className={classNames("extra-side-bar-buttons")}
+                  onClick={() => setIsTweakPage(true)}
+                >
                   <IconComponent
                     name="Code2"
                     className={
diff --git a/src/frontend/src/types/typesContext/index.ts b/src/frontend/src/types/typesContext/index.ts
index 9e57822b9..e05fd1039 100644
--- a/src/frontend/src/types/typesContext/index.ts
+++ b/src/frontend/src/types/typesContext/index.ts
@@ -39,6 +39,8 @@ export type alertContextType = {
   removeFromNotificationList: (index: string) => void;
   loading: boolean;
   setLoading: (newState: boolean) => void;
+  isTweakPage: boolean;
+  setIsTweakPage: (newState: boolean) => void;
 };
 
 export type darkContextType = {
diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts
index 999f45ecb..6a12f3edd 100644
--- a/src/frontend/src/utils/reactflowUtils.ts
+++ b/src/frontend/src/utils/reactflowUtils.ts
@@ -5,15 +5,12 @@ import {
   Node,
   ReactFlowInstance,
   ReactFlowJsonObject,
-  useNodesState,
 } from "reactflow";
 import { specialCharsRegex } from "../constants/constants";
 import { APITemplateType } from "../types/api";
 import { FlowType, NodeType } from "../types/flow";
 import { cleanEdgesType, unselectAllNodesType } from "../types/utils/reactflowUtils";
 import { toNormalCase } from "./utils";
-import { useContext } from "react";
-import { typesContext } from "../contexts/typesContext";
 
 export function cleanEdges({
   flow: { edges, nodes },