diff --git a/DSL/Ruuter/services/POST/services/edit.yml b/DSL/Ruuter/services/POST/services/edit.yml
index a44f670ee..0b2815bda 100644
--- a/DSL/Ruuter/services/POST/services/edit.yml
+++ b/DSL/Ruuter/services/POST/services/edit.yml
@@ -36,6 +36,10 @@ declaration:
       - field: id
         type: string
         description: "Parameter 'id'"
+    headers:
+      - field: cookie
+        type: string
+        description: "Cookie field"    
 
 extract_request_data:
   assign:
@@ -169,6 +173,7 @@ assign_values:
     old_name: ${old_service_result.response.body[0].name}
     old_structure: ${old_service_result.response.body[0].structure}
     old_state: ${old_service_result.response.body[0].state}
+    service_type: ${old_service_result.response.body[0].type}
 
 check_new_structure:
   switch:
@@ -209,6 +214,25 @@ service_edit:
       state: ${state ?? 'draft'}
   result: editedService
 
+check for_state:
+  switch:
+    - condition: ${state === 'draft'}
+      next: change_state_to_draft
+  next: return_ok
+
+change_state_to_draft:
+  call: http.post
+  args:
+    url: "[#SERVICE_RUUTER]/services/status"
+    headers:
+      cookie: ${incoming.headers.cookie}
+    body:
+      id: ${id}
+      state: "draft"
+      type: ${service_type ?? 'POST'}
+  result: changeStateResult
+  next: return_ok
+
 return_ok:
   reloadDsl: true
   status: 200
diff --git a/GUI/package.json b/GUI/package.json
index 701c64edd..b04db787f 100644
--- a/GUI/package.json
+++ b/GUI/package.json
@@ -33,6 +33,7 @@
     "howler": "^2.2.4",
     "i18next": "^22.4.9",
     "i18next-browser-languagedetector": "^7.0.1",
+    "jsoneditor": "^10.3.0",
     "moment": "^2.29.4",
     "msw": "^0.49.2",
     "node-html-markdown": "^1.3.0",
@@ -83,6 +84,7 @@
     "@types/d3-hierarchy": "^3.1.7",
     "@types/d3-timer": "^3.0.2",
     "@types/howler": "^2.2.11",
+    "@types/jsoneditor": "^9.9.6",
     "@types/react": "^18.2.0",
     "@types/react-datepicker": "^4.8.0",
     "@types/react-dom": "^18.2.0",
diff --git a/GUI/src/components/ApiEndpointCard/Endpoints/Custom/index.tsx b/GUI/src/components/ApiEndpointCard/Endpoints/Custom/index.tsx
index f45087c76..8cfd5a507 100644
--- a/GUI/src/components/ApiEndpointCard/Endpoints/Custom/index.tsx
+++ b/GUI/src/components/ApiEndpointCard/Endpoints/Custom/index.tsx
@@ -72,7 +72,7 @@ const EndpointCustom: React.FC<EndpointCustomProps> = ({
               <FormSelect
                 name={"request-type"}
                 label={""}
-                style={{ borderRadius: "4px 0 0 4px", borderRight: 0 }}
+                style={{ borderRadius: "4px 0 0 4px", borderRight: 0, fontSize: "15px" }}
                 options={[
                   { label: "GET", value: "GET" },
                   { label: "POST", value: "POST" },
diff --git a/GUI/src/components/ApiEndpointCard/index.tsx b/GUI/src/components/ApiEndpointCard/index.tsx
index a1a2c1a22..5d031e7c9 100644
--- a/GUI/src/components/ApiEndpointCard/index.tsx
+++ b/GUI/src/components/ApiEndpointCard/index.tsx
@@ -74,6 +74,7 @@ const ApiEndpointCard: FC<EndpointCardProps> = ({
                   placeholder={t("newService.endpoint.type").toString()}
                   options={options}
                   disabled={selectedTab === EndpointEnv.Test}
+                  style={{ fontSize: "15px" }}
                   onSelectionChange={(selection) => {
                     setOption(selection);
                     endpoint.type = selection?.value as EndpointType;
diff --git a/GUI/src/components/FlowElementsPopup/AssignBuilder/AssignElement.module.scss b/GUI/src/components/FlowElementsPopup/AssignBuilder/AssignElement.module.scss
new file mode 100644
index 000000000..0ebd88a29
--- /dev/null
+++ b/GUI/src/components/FlowElementsPopup/AssignBuilder/AssignElement.module.scss
@@ -0,0 +1,5 @@
+@import "src/styles/tools/color";
+
+.assignElement {
+  padding: 8px 16px 8px 16px;
+}
diff --git a/GUI/src/components/FlowElementsPopup/AssignBuilder/ObjectEditor.module.scss b/GUI/src/components/FlowElementsPopup/AssignBuilder/ObjectEditor.module.scss
new file mode 100644
index 000000000..edac81955
--- /dev/null
+++ b/GUI/src/components/FlowElementsPopup/AssignBuilder/ObjectEditor.module.scss
@@ -0,0 +1,14 @@
+@import "src/styles/tools/color";
+
+.dragHoverHighlight {
+  background-color: get-color(sea-green-1) !important;
+  border: 1px solid get-color(sea-green-10) !important;
+  border-radius: 4px !important;
+  box-shadow: 0 0 8px get-color(sea-green-3) !important;
+  transition: all 0.2s ease-in-out !important;
+}
+
+.editor {
+  height: 200px;
+  padding-top: 8px;
+}
diff --git a/GUI/src/components/FlowElementsPopup/AssignBuilder/ObjectEditor.tsx b/GUI/src/components/FlowElementsPopup/AssignBuilder/ObjectEditor.tsx
new file mode 100644
index 000000000..1a9c62bc7
--- /dev/null
+++ b/GUI/src/components/FlowElementsPopup/AssignBuilder/ObjectEditor.tsx
@@ -0,0 +1,221 @@
+import React, { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import JSONEditor from "jsoneditor";
+import "jsoneditor/dist/jsoneditor.css";
+import { getDragData } from "utils/component-util";
+import { isObject, updateValueAtPath } from "utils/object-util";
+import styles from "./ObjectEditor.module.scss";
+import { stringToTemplate } from "utils/string-util";
+
+// Helper function to find the path to a node in the JSON structure
+const findNodePath = (node: Element, data: Record<string, unknown>): string | null => {
+  // Try to find by text content (for values)
+  const textContent = node.textContent?.trim();
+  if (textContent) {
+    const path = searchInCollection(data, textContent);
+    return path;
+  }
+
+  return null;
+};
+
+// Helper function to check if values match (handling different types)
+const isValueMatch = (objValue: unknown, value: string): boolean => {
+  // Handle boolean conversion
+  let booleanValue: boolean | null = null;
+  if (value.toLowerCase() === "true") {
+    booleanValue = true;
+  } else if (value.toLowerCase() === "false") {
+    booleanValue = false;
+  }
+
+  return (
+    objValue === value ||
+    (typeof objValue === "number" && !isNaN(Number(value)) && objValue === Number(value)) ||
+    (typeof objValue === "boolean" && objValue === booleanValue) ||
+    (objValue === null && value.toLowerCase() === "null")
+  );
+};
+
+// Helper function to search for value in an array
+const searchInArray = (array: unknown[], value: string, currentPath = ""): string | null => {
+  for (let index = 0; index < array.length; index++) {
+    const objValue = array[index];
+    const newPath = currentPath ? `${currentPath}[${index}]` : `[${index}]`;
+
+    if (isValueMatch(objValue, value)) return newPath;
+
+    if (isObject(objValue)) {
+      const result = searchInCollection(objValue, value, newPath);
+      if (result) return result;
+    }
+  }
+
+  return null;
+};
+
+// Helper function to search for value in an object
+const searchInObject = (obj: Record<string, unknown>, value: string, currentPath = ""): string | null => {
+  for (const [key, objValue] of Object.entries(obj)) {
+    const newPath = currentPath ? `${currentPath}.${key}` : String(key);
+
+    if (isValueMatch(objValue, value)) return newPath;
+
+    if (isObject(objValue)) {
+      const result = searchInCollection(objValue, value, newPath);
+      if (result) return result;
+    }
+  }
+
+  return null;
+};
+
+// Helper function to search for value in a collection
+const searchInCollection = (collection: object, value: string, currentPath = ""): string | null => {
+  if (Array.isArray(collection)) {
+    return searchInArray(collection, value, currentPath);
+  }
+
+  return searchInObject(collection as Record<string, unknown>, value, currentPath);
+};
+
+interface ObjectEditorProps {
+  onChange: (value: string) => void;
+  data: Record<string, unknown> | unknown[];
+}
+
+const ObjectEditor: React.FC<ObjectEditorProps> = ({ onChange, data }) => {
+  const { t, i18n } = useTranslation();
+  const jsonEditor = t("objectEditor", { returnObjects: true });
+  const editorRef = useRef<HTMLDivElement>(null);
+  const jsonEditorRef = useRef<JSONEditor | null>(null);
+  const [hoveredElement, setHoveredElement] = useState<Element | null>(null);
+
+  useEffect(() => {
+    if (editorRef.current && !jsonEditorRef.current) {
+      const editor = new JSONEditor(editorRef.current, {
+        language: i18n.language,
+        languages: {
+          [i18n.language]: jsonEditor,
+        },
+        onChange: () => {
+          onChange(stringToTemplate(JSON.stringify(jsonEditorRef.current?.get())));
+        },
+      });
+
+      editor.set(data);
+      jsonEditorRef.current = editor;
+    }
+
+    return () => {
+      if (jsonEditorRef.current) {
+        jsonEditorRef.current.destroy();
+        jsonEditorRef.current = null;
+      }
+    };
+  }, []);
+
+  // Cleanup effect to remove highlight when component unmounts
+  useEffect(() => {
+    return () => {
+      if (hoveredElement) {
+        hoveredElement.classList.remove(styles.dragHoverHighlight);
+      }
+    };
+  }, [hoveredElement]);
+
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+
+    // Get the element under the cursor
+    const element = document.elementFromPoint(e.clientX, e.clientY);
+    if (element) {
+      const jsonNode = element.closest(".jsoneditor-value");
+
+      // Remove highlight from previously hovered element
+      if (hoveredElement && hoveredElement !== jsonNode) {
+        hoveredElement.classList.remove(styles.dragHoverHighlight);
+      }
+
+      // Add highlight to currently hovered element
+      if (jsonNode && jsonNode !== hoveredElement) {
+        jsonNode.classList.add(styles.dragHoverHighlight);
+        setHoveredElement(jsonNode);
+      }
+    }
+  };
+
+  const handleDragLeave = () => {
+    // Remove highlight when leaving the drop zone
+    if (hoveredElement) {
+      hoveredElement.classList.remove(styles.dragHoverHighlight);
+      setHoveredElement(null);
+    }
+  };
+
+  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+
+    // Clean up highlight
+    if (hoveredElement) {
+      hoveredElement.classList.remove(styles.dragHoverHighlight);
+      setHoveredElement(null);
+    }
+
+    try {
+      const dragData = getDragData(e);
+      if (dragData && jsonEditorRef.current) {
+        // Extract just the value from the drag data
+        const valueToReplace = dragData.value;
+
+        // Get the element under the cursor
+        const element = document.elementFromPoint(e.clientX, e.clientY);
+        if (element) {
+          const jsonNode = element.closest(".jsoneditor-value");
+
+          if (jsonNode) {
+            // Get the current JSON data
+            const currentData = jsonEditorRef.current.get();
+
+            // Try to find the path to the dropped node
+            const path = findNodePath(jsonNode, currentData);
+
+            if (path) {
+              // Update the value at the specific path
+              const newData = updateValueAtPath(currentData, path, valueToReplace);
+
+              jsonEditorRef.current.update(newData);
+
+              onChange(stringToTemplate(JSON.stringify(newData)));
+            }
+          }
+        }
+      }
+    } catch (error) {
+      console.error("Error processing drop:", error);
+    }
+  };
+
+  return (
+    <div
+      ref={editorRef}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+      className={styles.editor}
+      role="application"
+      aria-label={t("objectEditor.editor")!}
+      tabIndex={0}
+      onKeyDown={(e) => {
+        // Handle keyboard interactions for accessibility
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          // Focus the editor for keyboard navigation
+          editorRef.current?.focus();
+        }
+      }}
+    />
+  );
+};
+
+export default ObjectEditor;
diff --git a/GUI/src/components/FlowElementsPopup/AssignBuilder/assignElement.tsx b/GUI/src/components/FlowElementsPopup/AssignBuilder/assignElement.tsx
index 6d174bdb6..6b7d397e4 100644
--- a/GUI/src/components/FlowElementsPopup/AssignBuilder/assignElement.tsx
+++ b/GUI/src/components/FlowElementsPopup/AssignBuilder/assignElement.tsx
@@ -1,12 +1,22 @@
 import React, { useState } from "react";
 import { DragInput, FormInput, Icon, Tooltip, Track } from "components";
-import { MdDeleteOutline, MdEdit, MdMoveDown } from "react-icons/md";
+import { MdDataObject, MdDeleteOutline, MdEdit, MdMoveDown } from "react-icons/md";
 import { Assign } from "../../../types/assign";
 import "../styles.scss";
-import { stringToTemplate, templateToString } from "utils/string-util";
+import { isTemplate, stringToTemplate, templateToString } from "utils/string-util";
 import { isArray, isObject } from "utils/object-util";
 import { t } from "i18next";
 import { getDragData } from "utils/component-util";
+import ObjectEditor from "./ObjectEditor";
+import styles from "./AssignElement.module.scss";
+import useToastStore from "store/toasts.store";
+
+const showInvalidObjectError = () => {
+  useToastStore.getState().error({
+    title: t("serviceFlow.apiElements.cannotOpenEditor"),
+    message: t("serviceFlow.apiElements.invalidObjectError"),
+  });
+};
 
 interface AssignElementProps {
   element: Assign;
@@ -18,10 +28,19 @@ interface AssignElementProps {
   valueStyle?: React.CSSProperties;
 }
 
-const AssignElement: React.FC<AssignElementProps> = ({ element, onRemove, onChange, manualEdit = false, isKeyEditable, keyStyle, valueStyle }) => {
+const AssignElement: React.FC<AssignElementProps> = ({
+  element,
+  onRemove,
+  onChange,
+  manualEdit = false,
+  isKeyEditable,
+  keyStyle,
+  valueStyle,
+}) => {
   const slots = element.slots ?? [];
   const [isSecondSlotOpen, setIsSecondSlotOpen] = useState(!!slots[1]);
-  const [isEditingManually, setIsEditingManually] = useState(manualEdit || element.value && !slots.length);
+  const [isEditingManually, setIsEditingManually] = useState(manualEdit || (element.value && !slots.length));
+  const [isObjectEditorOpen, setIsObjectEditorOpen] = useState(false);
 
   const changeKey = (e: React.ChangeEvent<HTMLInputElement>) => {
     onChange({ ...element, key: e.target.value });
@@ -61,68 +80,118 @@ const AssignElement: React.FC<AssignElementProps> = ({ element, onRemove, onChan
     onChange({ ...element, slots: undefined });
   };
 
+  const toggleObjectEditor = () => {
+    if (isObjectEditorOpen) {
+      setIsObjectEditorOpen(!isObjectEditorOpen);
+      setIsEditingManually(true);
+    } else {
+      // New empty element
+      if (element.value === "") {
+        setIsObjectEditorOpen(!isObjectEditorOpen);
+        return;
+      }
+
+      if (!isTemplate(element.value)) {
+        showInvalidObjectError();
+        return;
+      }
+
+      try {
+        JSON.parse(templateToString(element.value));
+        setIsObjectEditorOpen(!isObjectEditorOpen);
+      } catch (error) {
+        console.log("Error parsing input", error);
+        showInvalidObjectError();
+      }
+    }
+  };
+
   return (
-    <Track gap={16} isFlex>
-      <FormInput
-        value={element.key}
-        name="key"
-        disabled={isKeyEditable === false}
-        onChange={changeKey}
-        onDrop={(e) => e.preventDefault()}
-        style={keyStyle}
-        label=""
-        hideLabel
-      />
-      :
-      <Track style={{ flex: "1 0 75%", justifyContent: "flex-end" }} gap={5}>
-        {isEditingManually ? (
-          <FormInput
-            value={element.value}
-            name="value"
-            onChange={changeValue}
-            label=""
-            style={valueStyle}
-            hideLabel
-            onDrop={changeManualInputValue}
-          />
-        ) : (
-          <Track gap={3} isFlex>
-            <DragInput id={element.id} element={slots[0]} onChange={changeFirstSlot} />
-
-            {slots.length && isObject(slots[0].data) && !isArray(slots[0].data) ? (
-              <Tooltip
-                content={t(
-                  isSecondSlotOpen ? "serviceFlow.popup.removeValueAssignment" : "serviceFlow.popup.assignAsValue"
-                )}
-                onButtonClick={() => {
-                  setIsSecondSlotOpen(!isSecondSlotOpen);
-                  if (!isSecondSlotOpen) resetSecondSlot();
-                }}
-              >
-                <div className={`small-assign-button ${isSecondSlotOpen ? "assign-red" : "assign-blue"}`}>
-                  <Icon icon={<MdMoveDown />} />
-                </div>
-              </Tooltip>
-            ) : null}
-
-            {isSecondSlotOpen ? <DragInput id={element.id} element={slots[1]} onChange={changeSecondSlot} /> : null}
-          </Track>
-        )}
-
-        {!isEditingManually ? (
-          <Tooltip content={t("serviceFlow.popup.assignManualEdit")} onButtonClick={enableManualEdit}>
-            <div className="small-assign-button assign-blue">
-              <Icon icon={<MdEdit />} />
-            </div>
-          </Tooltip>
-        ) : null}
-        {onRemove && (
-          <button onClick={() => onRemove(element.id)} className="small-assign-button assign-red">
-            <Icon icon={<MdDeleteOutline />} />
-          </button>
-        )}
+    <>
+      <Track gap={16} isFlex className={styles.assignElement}>
+        <FormInput
+          value={element.key}
+          name="key"
+          disabled={isKeyEditable === false}
+          onChange={changeKey}
+          onDrop={(e) => e.preventDefault()}
+          style={keyStyle}
+          label=""
+          hideLabel
+        />
+        :
+        <Track style={{ flex: "1 0 75%", justifyContent: "flex-end" }} gap={5}>
+          {!isObjectEditorOpen && (
+            <>
+              {isEditingManually ? (
+                <FormInput
+                  value={element.value}
+                  name="value"
+                  onChange={changeValue}
+                  label=""
+                  style={valueStyle}
+                  hideLabel
+                  onDrop={changeManualInputValue}
+                />
+              ) : (
+                <Track gap={3} isFlex>
+                  <DragInput id={element.id} element={slots[0]} onChange={changeFirstSlot} />
+
+                  {slots.length && isObject(slots[0].data) && !isArray(slots[0].data) ? (
+                    <Tooltip
+                      content={t(
+                        isSecondSlotOpen ? "serviceFlow.popup.removeValueAssignment" : "serviceFlow.popup.assignAsValue"
+                      )}
+                      onButtonClick={() => {
+                        setIsSecondSlotOpen(!isSecondSlotOpen);
+                        if (!isSecondSlotOpen) resetSecondSlot();
+                      }}
+                    >
+                      <div className={`small-assign-button ${isSecondSlotOpen ? "assign-red" : "assign-blue"}`}>
+                        <Icon icon={<MdMoveDown />} />
+                      </div>
+                    </Tooltip>
+                  ) : null}
+
+                  {isSecondSlotOpen ? (
+                    <DragInput id={element.id} element={slots[1]} onChange={changeSecondSlot} />
+                  ) : null}
+                </Track>
+              )}
+
+              {!isEditingManually ? (
+                <Tooltip content={t("serviceFlow.popup.assignManualEdit")} onButtonClick={enableManualEdit}>
+                  <div className="small-assign-button assign-blue">
+                    <Icon icon={<MdEdit />} />
+                  </div>
+                </Tooltip>
+              ) : null}
+            </>
+          )}
+
+          {!isEditingManually && (
+            <Tooltip content={t("serviceFlow.popup.openObjectEditor")} onButtonClick={toggleObjectEditor}>
+              <div className="small-assign-button assign-blue">
+                <Icon icon={<MdDataObject />} />
+              </div>
+            </Tooltip>
+          )}
+
+          {onRemove && (
+            <button onClick={() => onRemove(element.id)} className="small-assign-button assign-red">
+              <Icon icon={<MdDeleteOutline />} />
+            </button>
+          )}
+        </Track>
       </Track>
-    </Track>
+
+      {isObjectEditorOpen && (
+        <ObjectEditor
+          data={element.value ? JSON.parse(templateToString(element.value)) : {}}
+          onChange={(value) => onChange({ ...element, value })}
+        />
+      )}
+    </>
   );
 };
 
diff --git a/GUI/src/components/FlowElementsPopup/AssignBuilder/index.tsx b/GUI/src/components/FlowElementsPopup/AssignBuilder/index.tsx
index 347384138..418871e62 100644
--- a/GUI/src/components/FlowElementsPopup/AssignBuilder/index.tsx
+++ b/GUI/src/components/FlowElementsPopup/AssignBuilder/index.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Track } from "components";
-import AssignElement from "./assignElement";
+import AssignElement from "./AssignElement";
 import { useAssignBuilder } from "./useAssignBuilder";
 import "../styles.scss";
 import { Assign } from "../../../types/assign";
@@ -19,8 +19,8 @@ const AssignBuilder: React.FC<AssignBuilderProps> = ({ onChange, seedGroup }) =>
   });
 
   return (
-    <Track gap={16} direction="vertical" align="stretch" className="assign-action-container">
-      <Track justify="end">
+    <Track direction="vertical" align="stretch" className="assign-action-container">
+      <Track justify="end" style={{ padding: "10px" }}>
         <Track gap={8}>
           <button className="small-assign-button assign-blue" onClick={addElement}>
             {t("serviceFlow.popup.addElement")}
diff --git a/GUI/src/components/FlowElementsPopup/DynamicChoicesContent.tsx b/GUI/src/components/FlowElementsPopup/DynamicChoicesContent.tsx
index 2a0f5e389..945ac8270 100644
--- a/GUI/src/components/FlowElementsPopup/DynamicChoicesContent.tsx
+++ b/GUI/src/components/FlowElementsPopup/DynamicChoicesContent.tsx
@@ -2,7 +2,7 @@ import { FC } from "react";
 import Track from "../Track";
 import PreviousVariables from "./PreviousVariables";
 import { DynamicChoices } from "types/dynamic-choices";
-import AssignElement from "./AssignBuilder/assignElement";
+import AssignElement from "./AssignBuilder/AssignElement";
 import { MdOutlineInfo } from "react-icons/md";
 import Tooltip from "components/Tooltip";
 import { t } from "i18next";
diff --git a/GUI/src/components/FlowElementsPopup/PreviousVariables.tsx b/GUI/src/components/FlowElementsPopup/PreviousVariables.tsx
index d84494be0..b0d553ae2 100644
--- a/GUI/src/components/FlowElementsPopup/PreviousVariables.tsx
+++ b/GUI/src/components/FlowElementsPopup/PreviousVariables.tsx
@@ -22,7 +22,7 @@ type PreviousVariablesProps = {
 
 // Unique key for predefined elements, used below to identify it
 // All other assign element keys are UUIDs
-const predefinedInputKeys = ['-1', '-2'];
+const predefinedInputKeys = ["-1", "-2"];
 
 const PreviousVariables: FC<PreviousVariablesProps> = ({ nodeId }) => {
   const { t } = useTranslation();
@@ -41,7 +41,7 @@ const PreviousVariables: FC<PreviousVariablesProps> = ({ nodeId }) => {
   const helperVariablesWithTooltips = helperVariables.map((variable, index) => {
     return {
       ...variable,
-      tooltip: getHelperTooltips()[index]
+      tooltip: getHelperTooltips()[index],
     };
   });
 
@@ -50,7 +50,7 @@ const PreviousVariables: FC<PreviousVariablesProps> = ({ nodeId }) => {
     const currentNode = nodes[currentNodeIndex];
 
     let startIndex = nodes.findLastIndex(
-      (node, i) => i < currentNodeIndex && node.data.stepType === StepType.MultiChoiceQuestion
+      (node, i) => i < currentNodeIndex && node.data.stepType === StepType.MultiChoiceQuestion,
     );
 
     let previousNodes = nodes.slice(startIndex === -1 ? 0 : startIndex, currentNodeIndex);
@@ -66,7 +66,8 @@ const PreviousVariables: FC<PreviousVariablesProps> = ({ nodeId }) => {
     setEndpoints(endpointsVariables);
 
     // Get Assign variables
-    const assignNodes: Node<NodeDataProps>[] = previousNodes.filter((node) => node.data.stepType === StepType.Assign) as Node<NodeDataProps>[] ?? [];
+    const assignNodes: Node<NodeDataProps>[] =
+      (previousNodes.filter((node) => node.data.stepType === StepType.Assign) as Node<NodeDataProps>[]) ?? [];
     const assignElements = assignNodes.map((node) => node.data.assignElements).flat();
     const predefinedInputElements: Assign[] = [
       {
@@ -201,7 +202,7 @@ const PreviousVariables: FC<PreviousVariablesProps> = ({ nodeId }) => {
                           : {
                               data: chip.data,
                               path: chip.value,
-                            }
+                            },
                       );
                     }}
                   >
@@ -236,6 +237,7 @@ const VariableSection = ({
   border,
 }: any) => {
   const { t } = useTranslation();
+
   return (
     <Track
       direction="vertical"
@@ -252,6 +254,13 @@ const VariableSection = ({
         {variables.map((variable: any) => {
           const typeColor = getTypeColor(variable?.value);
 
+          const rawName =
+            title === t("serviceFlow.previousVariables.environmentVariables.title") ||
+            title === t("serviceFlow.previousVariables.assignElements")
+              ? variable.key
+              : t(variable.key);
+          const name = rawName.length > 0 ? rawName : t("serviceFlow.previousVariables.noName");
+
           return isObject(variable.data) && !predefinedInputKeys.includes(variable.id) ? (
             <Tooltip
               content={
@@ -271,7 +280,7 @@ const VariableSection = ({
                       : {
                           data: variable.data,
                           path: variable.value,
-                        }
+                        },
                   );
                 }}
               >
@@ -290,7 +299,7 @@ const VariableSection = ({
                 style={{ cursor: variable.key ? "grab" : "default" }}
                 borderColor={typeColor.color}
               >
-                {variable.key.length > 0 ? t(variable.key) : t("serviceFlow.previousVariables.noName")}
+                {name}
               </OutputElementBox>
             </Tooltip>
           );
diff --git a/GUI/src/components/FlowElementsPopup/styles.scss b/GUI/src/components/FlowElementsPopup/styles.scss
index 485f4ac1b..7a890c4a9 100644
--- a/GUI/src/components/FlowElementsPopup/styles.scss
+++ b/GUI/src/components/FlowElementsPopup/styles.scss
@@ -139,7 +139,6 @@ div > .small-rule-group-button:last-child {
 }
 
 .assign-action-container {
-  padding: 10px;
   background: rgba(25, 0, 255, 0.067);
   border: 1px solid rgba(25, 0, 255, 0.067);
 }
diff --git a/GUI/src/components/FormElements/FormSelect/index.tsx b/GUI/src/components/FormElements/FormSelect/index.tsx
index 15b3ccb62..e809402de 100644
--- a/GUI/src/components/FormElements/FormSelect/index.tsx
+++ b/GUI/src/components/FormElements/FormSelect/index.tsx
@@ -5,7 +5,6 @@ import { MdArrowDropDown } from 'react-icons/md';
 
 import { Icon } from '../../../components';
 import './FormSelect.scss';
-import { t } from 'i18next';
 
 type FormSelectProps = SelectHTMLAttributes<HTMLSelectElement> & {
   label: string;
@@ -77,7 +76,7 @@ const FormSelect: FC<FormSelectProps> = ({
       <div className='select__wrapper'>
         <div className={`select__trigger ${disabled && 'select__trigger--disabled'}`} {...getToggleButtonProps()} style={{ color: selectedItem?.label ? '#1A1B1F' : '#5D6071' }} {...rest} >
           {selectedItem?.label ?? placeholder}
-          <Icon label='Dropdown icon' size='medium' icon={<MdArrowDropDown color='#5D6071' />} />
+          <Icon label='Dropdown icon' size='medium' icon={<MdArrowDropDown color='#5D6071' size={16} />} />
         </div>
         <ul className={`select__menu select__menu--${menuPosition}`} {...getMenuProps()}>
           {isOpen && (
diff --git a/GUI/src/components/NewServiceHeader/index.tsx b/GUI/src/components/NewServiceHeader/index.tsx
index 6dff33f79..0ee42372b 100644
--- a/GUI/src/components/NewServiceHeader/index.tsx
+++ b/GUI/src/components/NewServiceHeader/index.tsx
@@ -4,12 +4,13 @@ import { Button, HeaderStepCounter, Modal, Track } from "..";
 import useServiceStore from "store/new-services.store";
 import "@buerokratt-ria/header/src/Header.scss";
 import { ROUTES } from "resources/routes-constants";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import useServiceListStore from "../../store/services.store";
 import { ServiceState } from "types";
 import { deleteService } from "resources/api-constants";
 import api from "../../services/api-dev";
 import { removeTrailingUnderscores } from "utils/string-util";
+import useToastStore from "store/toasts.store";
 
 type NewServiceHeaderProps = {
   activeStep: number;
@@ -25,7 +26,9 @@ const NewServiceHeader: FC<NewServiceHeaderProps> = ({ activeStep, backOnClick,
   const navigate = useNavigate();
   const [isSaving, setIsSaving] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
+  const [isContinuing, setIsContinuing] = useState(false);
   const [isDeleteServiceModalVisible, setIsDeleteServiceModalVisible] = useState(false);
+  const { id } = useParams();
 
   return (
     <>
@@ -38,7 +41,7 @@ const NewServiceHeader: FC<NewServiceHeaderProps> = ({ activeStep, backOnClick,
           <Button
             appearance={isDeleting ? "loading" : "error"}
             disabled={
-              selectedService ? serviceState !== ServiceState.Draft && serviceState !== ServiceState.Ready : true
+              serviceState && id ? serviceState !== ServiceState.Draft && serviceState !== ServiceState.Ready : true
             }
             onClick={() => {
               setIsDeleteServiceModalVisible(true);
@@ -50,14 +53,35 @@ const NewServiceHeader: FC<NewServiceHeaderProps> = ({ activeStep, backOnClick,
             appearance={isSaving ? "loading" : "primary"}
             onClick={async () => {
               setIsSaving(true);
-              await useServiceStore.getState().onServiceSave(ServiceState.Draft);
+              await useServiceStore.getState().onServiceSave(ServiceState.Draft, false);
               setIsSaving(false);
               saveOnClick();
             }}
           >
             {t("global.save")}
           </Button>
-          <Button onClick={continueOnClick} disabled={!name}>
+          <Button
+            appearance={isContinuing ? "loading" : "primary"}
+            onClick={() => {
+              if (isSaving) {
+                useToastStore.getState().info({ title: t("overview.service.toast.cannotContinueUntilServiceIsSaved") });
+                return;
+              }
+              setIsContinuing(true);
+              useServiceStore
+                .getState()
+                .onContinueClick()
+                .then(() => {
+                  setIsContinuing(false);
+                  continueOnClick();
+                })
+                .catch((error) => {
+                  setIsContinuing(false);
+                  console.error(error);
+                });
+            }}
+            disabled={!name}
+          >
             {t("global.confirm")}
           </Button>
         </Track>
diff --git a/GUI/src/components/ServicesTable/index.tsx b/GUI/src/components/ServicesTable/index.tsx
index 7078f9b5c..b47406842 100644
--- a/GUI/src/components/ServicesTable/index.tsx
+++ b/GUI/src/components/ServicesTable/index.tsx
@@ -6,7 +6,6 @@ import DataTable from "../DataTable";
 
 import useServiceListStore from "store/services.store";
 import ConnectServiceToIntentModel from "pages/Integration/ConnectServiceToIntentModel";
-import { Intent } from "types/Intent";
 import { Trigger } from "types/Trigger";
 import { getColumns } from "./columns";
 import "../../styles/main.scss";
@@ -34,6 +33,7 @@ const ServicesTable: FC<ServicesTableProps> = ({ isCommon = false }) => {
     pageSize: 10,
   });
   const [sorting, setSorting] = useState<SortingState>([{ id: "name", desc: false }]);
+  const [isActivating, setIsActivating] = useState(false);
 
   const loadServices = (paginationState: PaginationState, sortingState: SortingState) => {
     useServiceListStore.getState().loadServicesList(paginationState, sortingState);
@@ -43,6 +43,8 @@ const ServicesTable: FC<ServicesTableProps> = ({ isCommon = false }) => {
     useServiceListStore.getState().loadCommonServicesList(paginationState, sortingState);
   };
 
+  const [isDeletingService, setIsDeletingService] = useState(false);
+
   useEffect(() => {
     if (isCommon) {
       loadCommonServices(pagination, sorting);
@@ -95,43 +97,49 @@ const ServicesTable: FC<ServicesTableProps> = ({ isCommon = false }) => {
   );
 
   const changeServiceState = (activate: boolean = false, draft: boolean = false) => {
-    useServiceListStore.getState().changeServiceState(
-      () => {
-        setIsReadyPopupVisible(false);
-        setIsStatePopupVisible(false);
-      },
-      t("overview.service.toast.updated"),
-      t("overview.service.toast.failed.state"),
-      activate,
-      draft,
-      pagination,
-      sorting
-    );
-  };
-
-  const deleteSelectedService = () => {
     useServiceListStore
       .getState()
-      .deleteSelectedService(
-        () => setIsDeletePopupVisible(false),
-        t("overview.service.toast.deleted"),
-        t("overview.service.toast.failed.delete"),
+      .changeServiceState(
+        () => {
+          setIsReadyPopupVisible(false);
+          setIsStatePopupVisible(false);
+        },
+        t("overview.service.toast.updated"),
+        t("overview.service.toast.failed.state"),
+        activate,
+        draft,
         pagination,
         sorting
-      );
+      )
+      .then(() => {
+        setIsActivating(false);
+      })
+      .catch(() => {
+        setIsActivating(false);
+      });
   };
 
-  const requestServiceIntentConnection = (intent: string) => {
+  const deleteSelectedService = () => {
+    setIsDeletingService(true);
     useServiceListStore
       .getState()
-      .requestServiceIntentConnection(
-        () => setIsIntentConnectionPopupVisible(false),
-        t("overview.service.toast.connectedToIntentSuccessfully"),
-        t("overview.service.toast.failed.failedToConnectToIntent"),
-        intent,
+      .deleteSelectedService(
+        async () => {
+          setIsDeletePopupVisible(false);
+          await useServiceListStore.getState().loadServicesList(pagination, sorting);
+          await useServiceListStore.getState().loadCommonServicesList(pagination, sorting);
+        },
+        t("overview.service.toast.deleted"),
+        t("overview.service.toast.failed.delete"),
         pagination,
         sorting
-      );
+      )
+      .then(() => {
+        setIsDeletingService(false);
+      })
+      .catch(() => {
+        setIsDeletingService(false);
+      });
   };
 
   const cancelConnectionRequest = () => {
@@ -155,7 +163,17 @@ const ServicesTable: FC<ServicesTableProps> = ({ isCommon = false }) => {
 
   const getActiveAndConnectionButton = () => {
     if (readyPopupText === t("overview.popup.setActive")) {
-      return <Button onClick={() => changeServiceState(true)}>{t("overview.popup.activateService")}</Button>;
+      return (
+        <Button
+          appearance={!isActivating ? "primary" : "loading"}
+          onClick={() => {
+            setIsActivating(true);
+            changeServiceState(true);
+          }}
+        >
+          {t("overview.popup.activateService")}
+        </Button>
+      );
     }
     if (readyPopupText === t("overview.popup.connectionPending")) {
       return <Button onClick={cancelConnectionRequest}>{t("overview.popup.cancelRequest")}</Button>;
@@ -180,7 +198,7 @@ const ServicesTable: FC<ServicesTableProps> = ({ isCommon = false }) => {
             <Button appearance="secondary" onClick={() => setIsDeletePopupVisible(false)}>
               {t("overview.cancel")}
             </Button>
-            <Button appearance="error" onClick={deleteSelectedService}>
+            <Button appearance={!isDeletingService ? "error" : "loading"} onClick={deleteSelectedService}>
               {t("overview.delete")}
             </Button>
           </Track>
@@ -212,7 +230,8 @@ const ServicesTable: FC<ServicesTableProps> = ({ isCommon = false }) => {
                 {t("overview.cancel")}
               </Button>
               {readyPopupText != t("overview.popup.connectionPending").toString() &&
-                readyPopupText != t("overview.popup.setActive").toString() && (
+                readyPopupText != t("overview.popup.setActive").toString() &&
+                readyPopupText != t("overview.popup.intentNotConnected").toString() && (
                   <Button onClick={() => changeServiceState()}>{t("overview.popup.setToDraft")}</Button>
                 )}
               {getActiveAndConnectionButton()}
@@ -223,7 +242,7 @@ const ServicesTable: FC<ServicesTableProps> = ({ isCommon = false }) => {
       {isIntentConnectionPopupVisible && (
         <ConnectServiceToIntentModel
           onModalClose={() => setIsIntentConnectionPopupVisible(false)}
-          onConnect={(intent: Intent) => requestServiceIntentConnection(intent.intent)}
+          onConnect={() => setIsIntentConnectionPopupVisible(false)}
         />
       )}
       <DataTable
diff --git a/GUI/src/i18n/en/common.json b/GUI/src/i18n/en/common.json
index 652226fd1..5ad915d1f 100644
--- a/GUI/src/i18n/en/common.json
+++ b/GUI/src/i18n/en/common.json
@@ -163,7 +163,8 @@
         },
         "requestedConnection": "Connection Requested",
         "cancelledConnection": "Connection Request Cancelled",
-        "connectedToIntentSuccessfully": "Connected to intent successfully"
+        "connectedToIntentSuccessfully": "Connected to intent successfully",
+        "cannotContinueUntilServiceIsSaved": "Cannot proceed until the service is saved"
       }
     },
     "popup": {
@@ -337,7 +338,8 @@
       "assignToSelfNotAllowed": "Assign to self not allowed",
       "assignAsValue": "Assign another element to use as value",
       "removeValueAssignment": "Remove element assigned as value",
-      "assignManualEdit": "Manually edit variable assignment"
+      "assignManualEdit": "Manually edit variable assignment",
+      "openObjectEditor": "Open object editor"
     },
     "previousVariables": {
       "assignElements": "Assign Elements",
@@ -403,6 +405,9 @@
       "deleteError": "Failed to delete API element",
       "editSuccess": "API element edited successfully",
       "editError": "Failed to edit API element",
+      "parseError": "Failed to parse JSON value",
+      "cannotOpenEditor": "Cannot open object editor",
+      "invalidObjectError": "Parsing input failed, the value is not a valid object",
       "public": "Public"
     },
     "multiChoiceQuestion": {
@@ -470,5 +475,99 @@
     "waiting-for-user-input": "Waiting for user input",
     "title": "Chat Integration",
     "input-placeholder": "Enter your message..."
+  },
+  "objectEditor": {
+    "array": "Array",
+    "auto": "Auto",
+    "appendText": "Append",
+    "appendTitle": "Add new field with type 'auto' after this field (Ctrl+Shift+Ins)",
+    "appendSubmenuTitle": "Select type of field to add",
+    "appendTitleAuto": "Add new field with type 'auto' (Ctrl+Shift+Ins)",
+    "ascending": "Ascending",
+    "ascendingTitle": "Sort this ${type} subfield in ascending order",
+    "actionsMenu": "Click to open actions menu (Ctrl+M)",
+    "cannotParseFieldError": "Cannot parse field to JSON",
+    "cannotParseValueError": "Cannot parse value to JSON",
+    "collapseAll": "Collapse all fields",
+    "compactTitle": "Compact JSON data, remove all spaces (Ctrl+Shift+I)",
+    "descending": "Descending",
+    "descendingTitle": "Sort this ${type} subfield in descending order",
+    "drag": "Drag to move field (Alt+Shift+Arrow)",
+    "duplicateKey": "duplicate key",
+    "duplicateText": "Duplicate",
+    "duplicateTitle": "Duplicate selected fields (Ctrl+D)",
+    "duplicateField": "Duplicate this field (Ctrl+D)",
+    "duplicateFieldError": "Duplicate field name",
+    "empty": "empty",
+    "expandAll": "Expand all fields",
+    "expandTitle": "Click to expand/collapse field (Ctrl+E).\nCtrl+Click to expand/collapse with all subfields.",
+    "formatTitle": "Format JSON data with proper indentation and line breaks (Ctrl+I)",
+    "insert": "Insert",
+    "insertTitle": "Add new field with type 'auto' before this field (Ctrl+Ins)",
+    "insertSub": "Select type of field to add",
+    "object": "Object",
+    "ok": "Ok",
+    "redo": "Redo (Ctrl+Shift+Z)",
+    "removeText": "Remove",
+    "removeTitle": "Remove selected fields (Ctrl+Del)",
+    "removeField": "Remove this field (Ctrl+Del)",
+    "repairTitle": "Repair JSON: fix quotes and brackets, remove comments and JSONP markup, convert JavaScript objects to JSON.",
+    "searchTitle": "Search fields and values",
+    "searchNextResultTitle": "Next result (Enter)",
+    "searchPreviousResultTitle": "Previous result (Shift + Enter)",
+    "selectNode": "Select node...",
+    "showAll": "show all",
+    "showMore": "show more",
+    "showMoreStatus": "showing ${visibleChilds} of ${totalChilds} items.",
+    "sort": "Sort",
+    "sortTitle": "Sort this ${type} subfield",
+    "sortTitleShort": "Sort content",
+    "sortFieldLabel": "Field:",
+    "sortDirectionLabel": "Direction:",
+    "sortFieldTitle": "Select nested field to sort array or object by",
+    "sortAscending": "Ascending",
+    "sortAscendingTitle": "Sort selected field in ascending order",
+    "sortDescending": "Descending",
+    "sortDescendingTitle": "Sort selected field in descending order",
+    "string": "String",
+    "transform": "Transform",
+    "transformTitle": "Filter, sort or transform this ${type} subfield",
+    "transformTitleShort": "Filter, sort or transform content",
+    "extract": "Extract",
+    "extractTitle": "Extract this ${type}",
+    "transformQueryTitle": "Enter JMESPath query",
+    "transformWizardLabel": "Wizard",
+    "transformWizardFilter": "Filter",
+    "transformWizardSortBy": "Sort by",
+    "transformWizardSelectFields": "Select fields",
+    "transformQueryLabel": "Query",
+    "transformPreviewLabel": "Preview",
+    "type": "Type",
+    "typeTitle": "Change type of this field",
+    "openUrl": "Ctrl+Click or Ctrl+Enter to open URL in new window",
+    "undo": "Undo last action (Ctrl+Z)",
+    "validationCannotMove": "Cannot move field to its own subfield",
+    "autoType": "Field type \"auto\". Field type is automatically determined based on the value and can be string, number, boolean or null.",
+    "objectType": "Field type \"object\". Object contains an unordered collection of key/value pairs.",
+    "arrayType": "Field type \"array\". Array contains an ordered collection of values.",
+    "stringType": "Field type \"string\". Field type is not determined based on the value, but always returned as string.",
+    "modeEditorTitle": "Switch editor mode",
+    "modeCodeText": "Code",
+    "modeCodeTitle": "Switch to code highlighting",
+    "modeFormText": "Form",
+    "modeFormTitle": "Switch to form editor",
+    "modeTextText": "Text",
+    "modeTextTitle": "Switch to plain text editor",
+    "modeTreeText": "Tree",
+    "modeTreeTitle": "Switch to tree editor",
+    "modeViewText": "View",
+    "modeViewTitle": "Switch to tree view",
+    "modePreviewText": "Preview",
+    "modePreviewTitle": "Switch to preview mode",
+    "examples": "Examples",
+    "default": "Default",
+    "containsInvalidProperties": "Contains invalid properties",
+    "containsInvalidItems": "Contains invalid items",
+    "editor": "Object Editor"
   }
 }
diff --git a/GUI/src/i18n/et/common.json b/GUI/src/i18n/et/common.json
index 0c93c9278..29b721361 100644
--- a/GUI/src/i18n/et/common.json
+++ b/GUI/src/i18n/et/common.json
@@ -163,7 +163,8 @@
         },
         "requestedConnection": "Ühendamist taotletakse",
         "cancelledConnection": "Ühendamistaotlus tühistati",
-        "connectedToIntentSuccessfully": "Kavatsusega ühendamine õnnestus"
+        "connectedToIntentSuccessfully": "Kavatsusega ühendamine õnnestus",
+        "cannotContinueUntilServiceIsSaved": "Ei saa jätkata enne, kui teenus on salvestatud"
       }
     },
     "popup": {
@@ -337,7 +338,8 @@
       "assignToSelfNotAllowed": "Määramine iseendale ei ole lubatud",
       "assignAsValue": "Määra teine element väärtuseks",
       "removeValueAssignment": "Eemalda element, mis on määratud väärtuseks",
-      "assignManualEdit": "Muutke muutuja määramist käsitsi"
+      "assignManualEdit": "Muutke muutuja määramist käsitsi",
+      "openObjectEditor": "Ava objekti redaktor"
     },
     "previousVariables": {
       "assignElements": "Määra elemendid",
@@ -403,6 +405,9 @@
       "deleteError": "API elementi kustutamine ebaõnnestus",
       "editSuccess": "API element edukalt muudetud",
       "editError": "API elemendi muutmine ebaõnnestus",
+      "parseError": "JSON väärtuse parsimine ebaõnnestus",
+      "cannotOpenEditor": "Objektiredaktorit ei saa avada",
+      "invalidObjectError": "Sisendi parsimine ebaõnnestus, väärtus pole kehtiv objekt",
       "public": "Avalik"
     },
     "multiChoiceQuestion": {
@@ -471,5 +476,99 @@
     "waiting-for-user-input": "Ootan kasutaja sisendit",
     "title": "Chat Integration",
     "input-placeholder": "Kirjutage oma sõnum..."
+  },
+  "objectEditor": {
+    "array": "Massiiv",
+    "auto": "Automaatne",
+    "appendText": "Lisa lõppu",
+    "appendTitle": "Lisa uus väli tüübiga 'auto' selle välja järele (Ctrl+Shift+Ins)",
+    "appendSubmenuTitle": "Vali lisatava välja tüüp",
+    "appendTitleAuto": "Lisa uus väli tüübiga 'auto' (Ctrl+Shift+Ins)",
+    "ascending": "Kasvav",
+    "ascendingTitle": "Sorteeri selle ${type} alamvälju kasvavas järjekorras",
+    "actionsMenu": "Klõpsa tegevuste menüü avamiseks (Ctrl+M)",
+    "cannotParseFieldError": "Ei saa välja JSON-iks teisendada",
+    "cannotParseValueError": "Ei saa väärtust JSON-iks teisendada",
+    "collapseAll": "Ahenda kõik väljad",
+    "compactTitle": "Tihenda JSON andmed, eemalda kõik tühikud (Ctrl+Shift+I)",
+    "descending": "Kahanev",
+    "descendingTitle": "Sorteeri selle ${type} alamvälju kahanevas järjekorras",
+    "drag": "Lohista välja liigutamiseks (Alt+Shift+Nooled)",
+    "duplicateKey": "dubleeritud võti",
+    "duplicateText": "Dubleeri",
+    "duplicateTitle": "Dubleeri valitud väljad (Ctrl+D)",
+    "duplicateField": "Dubleeri see väli (Ctrl+D)",
+    "duplicateFieldError": "Dubleeritud välja nimi",
+    "empty": "tühi",
+    "expandAll": "Laienda kõik väljad",
+    "expandTitle": "Klõpsa välja laiendamiseks/ahendamiseks (Ctrl+E).\nCtrl+Klõps laiendab/ahendab koos kõigi alamväljadega.",
+    "formatTitle": "Vorminda JSON andmed, korraliku taanduse ja reavahetustega (Ctrl+I)",
+    "insert": "Lisa",
+    "insertTitle": "Lisa uus väli tüübiga 'auto' enne seda välja (Ctrl+Ins)",
+    "insertSub": "Vali lisatava välja tüüp",
+    "object": "Objekt",
+    "ok": "Ok",
+    "redo": "Tee uuesti (Ctrl+Shift+Z)",
+    "removeText": "Eemalda",
+    "removeTitle": "Eemalda valitud väljad (Ctrl+Del)",
+    "removeField": "Eemalda see väli (Ctrl+Del)",
+    "repairTitle": "Paranda JSON: paranda jutumärgid ja paomärgid, eemalda kommentaarid ja JSONP märgendid, teisenda JavaScript objektid JSON-iks.",
+    "searchTitle": "Otsi välju ja väärtusi",
+    "searchNextResultTitle": "Järgmine tulemus (Enter)",
+    "searchPreviousResultTitle": "Eelmine tulemus (Shift + Enter)",
+    "selectNode": "Vali sõlm...",
+    "showAll": "näita kõik",
+    "showMore": "näita rohkem",
+    "showMoreStatus": "kuvatakse ${visibleChilds} ${totalChilds}-st elemendist.",
+    "sort": "Sorteeri",
+    "sortTitle": "Sorteeri selle ${type} alamvälju",
+    "sortTitleShort": "Sorteeri sisu",
+    "sortFieldLabel": "Väli:",
+    "sortDirectionLabel": "Suund:",
+    "sortFieldTitle": "Vali pesastatud väli, mille järgi massiivi või objekti sorteerida",
+    "sortAscending": "Kasvav",
+    "sortAscendingTitle": "Sorteeri valitud väli kasvavas järjekorras",
+    "sortDescending": "Kahanev",
+    "sortDescendingTitle": "Sorteeri valitud väli kahanevas järjekorras",
+    "string": "Sõne",
+    "transform": "Teisenda",
+    "transformTitle": "Filtreeri, sorteeri või teisenda selle ${type} alamvälju",
+    "transformTitleShort": "Filtreeri, sorteeri või teisenda sisu",
+    "extract": "Eralda",
+    "extractTitle": "Eralda see ${type}",
+    "transformQueryTitle": "Sisesta JMESPath päring",
+    "transformWizardLabel": "Nõustaja",
+    "transformWizardFilter": "Filter",
+    "transformWizardSortBy": "Sorteeri",
+    "transformWizardSelectFields": "Vali väljad",
+    "transformQueryLabel": "Päring",
+    "transformPreviewLabel": "Eelvaade",
+    "type": "Tüüp",
+    "typeTitle": "Muuda selle välja tüüpi",
+    "openUrl": "Ctrl+Klõps või Ctrl+Enter URL-i uues aknas avamiseks",
+    "undo": "Võta viimane tegevus tagasi (Ctrl+Z)",
+    "validationCannotMove": "Välja ei saa liigutada iseenda alamväljaks",
+    "autoType": "Välja tüüp \"auto\". Välja tüüp määratakse automaatselt väärtuse põhjal ja võib olla sõne, number, tõeväärtus või null.",
+    "objectType": "Välja tüüp \"objekt\". Objekt sisaldab järjestamata võti/väärtus paaride kogumit.",
+    "arrayType": "Välja tüüp \"massiiv\". Massiiv sisaldab järjestatud väärtuste kogumit.",
+    "stringType": "Välja tüüp \"sõne\". Välja tüüpi ei määrata väärtuse põhjal, vaid tagastatakse alati sõnena.",
+    "modeEditorTitle": "Vaheta redaktori režiimi",
+    "modeCodeText": "Kood",
+    "modeCodeTitle": "Lülitu koodi esiletõstule",
+    "modeFormText": "Vorm",
+    "modeFormTitle": "Lülitu vormi redaktorile",
+    "modeTextText": "Tekst",
+    "modeTextTitle": "Lülitu lihtteksti redaktorile",
+    "modeTreeText": "Puu",
+    "modeTreeTitle": "Lülitu puu redaktorile",
+    "modeViewText": "Vaade",
+    "modeViewTitle": "Lülitu puu vaatele",
+    "modePreviewText": "Eelvaade",
+    "modePreviewTitle": "Lülitu eelvaate režiimile",
+    "examples": "Näited",
+    "default": "Vaikimisi",
+    "containsInvalidProperties": "Sisaldab vigaseid omadusi",
+    "containsInvalidItems": "Sisaldab vigaseid elemente",
+    "editor": "Objektiredaktor"
   }
 }
diff --git a/GUI/src/pages/Integration/ConnectServiceToIntentModel.tsx b/GUI/src/pages/Integration/ConnectServiceToIntentModel.tsx
index 7addbc6f6..7369c0f06 100644
--- a/GUI/src/pages/Integration/ConnectServiceToIntentModel.tsx
+++ b/GUI/src/pages/Integration/ConnectServiceToIntentModel.tsx
@@ -10,7 +10,7 @@ import { Link } from "react-router-dom";
 
 type ConnectServiceToIntentModelProps = {
   onModalClose: () => void;
-  onConnect: (intent: Intent) => void;
+  onConnect: () => void;
   canCancel?: boolean;
   canSkip?: boolean;
   onSkip?: () => void;
@@ -27,6 +27,7 @@ const ConnectServiceToIntentModel: FC<ConnectServiceToIntentModelProps> = ({ onM
   const [intents, setIntents] = useState<Intent[] | undefined>(undefined);
   const [selectedIntent, setSelectedIntent] = useState<Intent>();
   const [showConfirmationModal, setShowConfirmationModal] = useState(false);
+  const [isConnecting, setIsConnecting] = useState(false);
 
   const loadAvailableIntents = (pagination: PaginationState, sorting: SortingState, search: string) => {
     useServiceStore
@@ -130,8 +131,29 @@ const ConnectServiceToIntentModel: FC<ConnectServiceToIntentModelProps> = ({ onM
               {t("global.no")}
             </Button>
             <Button
+              appearance={!isConnecting ? "primary" : "loading"}
               onClick={() => {
-                if (selectedIntent) onConnect(selectedIntent);
+                if (selectedIntent) {
+                  setIsConnecting(true);
+                  useServiceStore
+                    .getState()
+                    .requestServiceIntentConnection(
+                      () => setShowConfirmationModal(false),
+                      t("overview.service.toast.connectedToIntentSuccessfully"),
+                      t("overview.service.toast.failed.failedToConnectToIntent"),
+                      selectedIntent.intent,
+                      pagination,
+                      sorting
+                    )
+                    .then(() => {
+                      setIsConnecting(false);
+                      onConnect();
+                    })
+                    .catch((e) => {
+                      console.error("Error connecting to intent:", e);
+                      setIsConnecting(false);
+                    });
+                }
               }}
             >
               {t("global.yes")}
diff --git a/GUI/src/pages/ServiceFlowPage.tsx b/GUI/src/pages/ServiceFlowPage.tsx
index 8fb0da89c..ae24d9e0a 100644
--- a/GUI/src/pages/ServiceFlowPage.tsx
+++ b/GUI/src/pages/ServiceFlowPage.tsx
@@ -87,16 +87,8 @@ const ServiceFlowPage: FC = () => {
           }
         }}
         continueOnClick={() => {
-          useServiceStore
-            .getState()
-            .onContinueClick()
-            .then(() => {
-              navigate(ROUTES.OVERVIEW_ROUTE, { replace: true });
-              useServiceStore.getState().resetState();
-            })
-            .catch((error) => {
-              console.error(error);
-            });
+          navigate(ROUTES.OVERVIEW_ROUTE, { replace: true });
+          useServiceStore.getState().resetState();
         }}
         saveOnClick={async () => {
           setHasUnsavedChanges(false);
@@ -105,11 +97,10 @@ const ServiceFlowPage: FC = () => {
             const serviceResponse = await useServiceStore.getState().loadService(serviceId);
             if (serviceResponse) {
               useServiceListStore.getState().setSelectedService(serviceResponse?.data);
-              await useServiceListStore.getState().changeServiceStateToDraft(serviceResponse?.data);
               navigate(ROUTES.replaceWithId(ROUTES.EDITSERVICE_ROUTE, serviceId));
             } 
           } else {
-            await useServiceListStore.getState().changeServiceStateToDraft();
+            useServiceStore.getState().loadService(id);
           }
         }}
       />
diff --git a/GUI/src/services/service-builder.ts b/GUI/src/services/service-builder.ts
index 5780fa6d3..2cea2b51d 100644
--- a/GUI/src/services/service-builder.ts
+++ b/GUI/src/services/service-builder.ts
@@ -64,6 +64,7 @@ interface SaveFlowConfig {
   serviceId: string;
   isNewService: boolean;
   status: "draft" | "ready";
+  showError?: boolean;
 }
 
 const hasInvalidRules = (elements: any[]): boolean => {
@@ -129,9 +130,10 @@ export const saveFlow = async ({
   serviceId,
   isNewService,
   status = "ready",
+  showError = true,
 }: SaveFlowConfig) => {
   try {
-    let yamlContent = getYamlContent(nodes, edges, name, description);
+    let yamlContent = getYamlContent(nodes, edges, name, description, showError);
 
     const mcqNodes = nodes.filter(
       (node) => node.data?.stepType === StepType.MultiChoiceQuestion
@@ -142,7 +144,7 @@ export const saveFlow = async ({
         0,
         nodes.findIndex((node) => node.data?.stepType === StepType.MultiChoiceQuestion) + 1
       );
-      yamlContent = getYamlContent(nodesUpToFirstMcq, edges, name, description);
+      yamlContent = getYamlContent(nodesUpToFirstMcq, edges, name, description, showError);
     }
 
     await saveService(
@@ -170,7 +172,7 @@ export const saveFlow = async ({
         );
 
         await saveService(
-          getYamlContent(branchNodes, branchEdges, serviceName, description),
+          getYamlContent(branchNodes, branchEdges, serviceName, description, showError),
           { name: serviceName, serviceId, description, slot, isCommon, nodes, edges, isNewService } as SaveFlowConfig,
           false,
           status
@@ -179,10 +181,6 @@ export const saveFlow = async ({
     }
   } catch (e: any) {
     onError(e);
-    useToastStore.getState().error({
-      title: i18next.t("toast.cannot-save-flow"),
-      message: e?.message,
-    });
   }
 };
 
@@ -223,7 +221,7 @@ async function saveService(
     .catch(onError);
 }
 
-function getYamlContent(nodes: Node[], edges: Edge[], name: string, description: string): any {
+function getYamlContent(nodes: Node[], edges: Edge[], name: string, description: string, showError = true): any {
   const allRelations: any[] = [];
 
   nodes.forEach((node) => {
@@ -259,7 +257,7 @@ function getYamlContent(nodes: Node[], edges: Edge[], name: string, description:
           break;
       }
 
-      if (error) {
+      if (error && showError) {
         throw new Error(error);
       }
 
@@ -367,10 +365,9 @@ function getYamlContent(nodes: Node[], edges: Edge[], name: string, description:
       finishedFlow.set(parentStepName, template);
     });
   } catch (e: any) {
-    useToastStore.getState().error({
-      title: i18next.t("toast.cannot-save-flow"),
-      message: e?.message,
-    });
+    if (showError) {
+      throw new Error(i18next.t("toast.cannot-save-flow") ?? e?.message ?? "Error");
+    }
   }
 
   finishedFlow.set("format_messages", {
@@ -598,7 +595,7 @@ function handleDynamicChoices(
         service_name: parentNode.data.dynamicChoices?.serviceName ?? "",
         key: parentNode.data.dynamicChoices?.key ?? "",
         payload_prefix: "#service, /POST/",
-        payload_keys: parentNode.data.dynamicChoices?.payloadKeys.split(",") ?? [],
+        payload_keys: parentNode.data.dynamicChoices?.payloadKeys.split(",").filter((item) => item.trim()) ?? [],
       },
     },
     result: "dynamic_choices_res",
@@ -719,7 +716,7 @@ const getTemplateDataFromNode = (node: Node): { templateName: string; body?: any
   }
 };
 
-export const saveFlowClick = async (status: "draft" | "ready" = "ready") => {
+export const saveFlowClick = async (status: "draft" | "ready" = "ready", showError: boolean = true) => {
   const name = removeTrailingUnderscores(useServiceStore.getState().serviceNameDashed());
   const serviceId = useServiceStore.getState().serviceId;
   const description = useServiceStore.getState().description;
@@ -747,6 +744,7 @@ export const saveFlowClick = async (status: "draft" | "ready" = "ready") => {
         title: i18next.t("newService.toast.failed"),
         message: e.response?.status === 409 ? t("newService.toast.serviceNameAlreadyExists") : e?.message,
       });
+      throw new Error(e.response?.status === 409 ? t("newService.toast.serviceNameAlreadyExists").toString() : e?.message);
     },
     description,
     slot,
@@ -754,6 +752,7 @@ export const saveFlowClick = async (status: "draft" | "ready" = "ready") => {
     serviceId,
     isNewService,
     status,
+    showError,
   });
 };
 
diff --git a/GUI/src/store/new-services.store.ts b/GUI/src/store/new-services.store.ts
index e1e7af5ee..3ce1a211c 100644
--- a/GUI/src/store/new-services.store.ts
+++ b/GUI/src/store/new-services.store.ts
@@ -47,7 +47,7 @@ interface ServiceStoreState {
   edges: Edge[];
   nodes: Node[];
   isNewService: boolean;
-  serviceState: ServiceState;
+  serviceState?: ServiceState;
   assignElements: Assign[];
   rules: GroupOrRule[];
   isYesNoQuestion: boolean;
@@ -99,7 +99,7 @@ interface ServiceStoreState {
   resetState: () => void;
   resetAssign: () => void;
   resetRules: () => void;
-  onServiceSave: (status: "draft" | "ready") => Promise<void>;
+  onServiceSave: (status: "draft" | "ready", showError?: boolean) => Promise<void>;
   onContinueClick: () => Promise<void>;
   selectedNode: Node<NodeDataProps> | null;
   setSelectedNode: (node: Node<NodeDataProps> | null | undefined) => void;
@@ -139,7 +139,7 @@ const useServiceStore = create<ServiceStoreState>((set, get, store) => ({
   edges: initialEdges,
   nodes: initialNodes,
   isNewService: true,
-  serviceState: ServiceState.Draft,
+  serviceState: undefined,
   isTestButtonVisible: false,
   isTestButtonEnabled: true,
   assignElements: [],
@@ -395,7 +395,7 @@ const useServiceStore = create<ServiceStoreState>((set, get, store) => ({
       clickedNode: null,
       isTestButtonVisible: false,
       selectedNode: null,
-      serviceState: ServiceState.Draft,
+      serviceState: undefined,
     });
     useTestServiceStore.getState().reset();
   },
@@ -593,7 +593,7 @@ const useServiceStore = create<ServiceStoreState>((set, get, store) => ({
   updateEndpointData: (data: RequestVariablesTabsRowsData, endpoint?: EndpointData) => {
     if (!endpoint) return;
 
-    const defEndpoint = endpoint.definitions[0];  
+    const defEndpoint = endpoint.definitions[0];
 
     if (!defEndpoint) return;
 
@@ -627,8 +627,8 @@ const useServiceStore = create<ServiceStoreState>((set, get, store) => ({
   },
   reactFlowInstance: null,
   setReactFlowInstance: (reactFlowInstance) => set({ reactFlowInstance }),
-  onServiceSave: async (status: "draft" | "ready" = "ready") => {
-    await saveFlowClick(status);
+  onServiceSave: async (status: "draft" | "ready" = "ready", showError = true) => {
+    await saveFlowClick(status, showError);
   },
   onContinueClick: async () => {
     const vaildServiceInfo = get().vaildServiceInfo();
@@ -638,12 +638,16 @@ const useServiceStore = create<ServiceStoreState>((set, get, store) => ({
         title: i18next.t("newService.toast.missingFields"),
         message: i18next.t("newService.toast.serviceMissingFields"),
       });
-      return;
+      return Promise.reject(new Error(i18next.t("newService.toast.missingFields") ?? "Error"));
     }
 
     const { isNewService, onServiceSave } = get();
 
-    await onServiceSave(ServiceState.Ready);
+    try {
+      await onServiceSave(ServiceState.Ready);
+    } catch (e: any) {
+      return Promise.reject(new Error(i18next.t("toast.cannot-save-flow") ?? e?.message ?? "Error"));
+    }
 
     if (isNewService) {
       set({ isNewService: false });
diff --git a/GUI/src/store/services.store.ts b/GUI/src/store/services.store.ts
index 5d362524d..f32463ffe 100644
--- a/GUI/src/store/services.store.ts
+++ b/GUI/src/store/services.store.ts
@@ -26,7 +26,6 @@ interface ServiceStoreState {
   deleteService: (id: string) => Promise<void>;
   selectedService: Service | undefined;
   setSelectedService: (service: Service) => void;
-  changeServiceStateToDraft: (service?: Service) => Promise<void>;
   changeServiceState: (
     onEnd: () => void,
     successMessage: string,
@@ -158,15 +157,6 @@ const useServiceListStore = create<ServiceStoreState>((set, get, store) => ({
       selectedService: service,
     });
   },
-  changeServiceStateToDraft: async (service?: Service) => {
-    const selectedService = service ?? get().selectedService;
-    if (!selectedService) return;
-    await api.post(changeServiceStatus(), {
-      id: selectedService.serviceId,
-      state: ServiceState.Draft,
-      type: selectedService.type,
-    });
-  },
   changeServiceState: async (onEnd, successMessage, errorMessage, activate, draft, pagination, sorting) => {
     const selectedService = get().selectedService;
     if (!selectedService) return;
@@ -194,6 +184,7 @@ const useServiceListStore = create<ServiceStoreState>((set, get, store) => ({
     } catch (error) {
       console.error(error);
       useToastStore.getState().error({ title: errorMessage });
+      throw error;
     }
     set({
       selectedService: undefined,
@@ -228,11 +219,9 @@ const useServiceListStore = create<ServiceStoreState>((set, get, store) => ({
         type: selectedService?.type,
       });
       useToastStore.getState().success({ title: successMessage });
-      await useServiceListStore.getState().loadServicesList(pagination, sorting);
-      await useServiceListStore.getState().loadCommonServicesList(pagination, sorting);
     } catch (error) {
-      console.error(error);
       useToastStore.getState().error({ title: errorMessage });
+      throw error;
     }
     set({
       selectedService: undefined,
diff --git a/GUI/src/utils/object-util.ts b/GUI/src/utils/object-util.ts
index 0ad281ee0..fe7c34008 100644
--- a/GUI/src/utils/object-util.ts
+++ b/GUI/src/utils/object-util.ts
@@ -69,7 +69,7 @@ export const isArray = (x: unknown) => {
 };
 
 export const getTypeColor = (
-  value: unknown
+  value: unknown,
 ): { type: "null/undefined" | "string" | "number" | "date" | "array" | "object" | "unknown"; color: string } => {
   switch (true) {
     case value === null || value === undefined:
@@ -92,3 +92,79 @@ export const getTypeColor = (
 export const getKeyPathString = (keyPath: KeyPath) => {
   return keyPath.toReversed().join('"]["');
 };
+
+// Helper function to parse object path into parts
+const parsePath = (path: string): (string | number)[] => {
+  const pathParts: (string | number)[] = [];
+  let currentPath = path;
+
+  while (currentPath.length > 0) {
+    // First, check for array index at the beginning
+    const arrayMatch = /^\[(\d+)\]/.exec(currentPath);
+    if (arrayMatch) {
+      pathParts.push(parseInt(arrayMatch[1]));
+      currentPath = currentPath.substring(arrayMatch[0].length);
+      continue;
+    }
+
+    // Then check for property name followed by array index
+    const propertyArrayMatch = /^([^.\[\]]+)\[(\d+)\]/.exec(currentPath);
+    if (propertyArrayMatch) {
+      pathParts.push(propertyArrayMatch[1]); // property name
+      pathParts.push(parseInt(propertyArrayMatch[2])); // array index
+      currentPath = currentPath.substring(propertyArrayMatch[0].length);
+      continue;
+    }
+
+    // Check for dot notation
+    const dotIndex = currentPath.indexOf(".");
+    if (dotIndex === -1) {
+      // No more dots, add the remaining part if it's not empty
+      if (currentPath.length > 0) {
+        pathParts.push(currentPath);
+      }
+      break;
+    } else {
+      const part = currentPath.substring(0, dotIndex);
+      if (part.length > 0) {
+        pathParts.push(part);
+      }
+      currentPath = currentPath.substring(dotIndex + 1);
+    }
+  }
+
+  return pathParts;
+};
+
+// Helper function to update value at a specific object path
+export const updateValueAtPath = (
+  obj: Record<string, unknown> | unknown[],
+  path: string,
+  newValue: unknown,
+): Record<string, unknown> | unknown[] => {
+  const pathParts = parsePath(path);
+  const newObj = Array.isArray(obj) ? [...obj] : { ...obj };
+  let current: any = newObj;
+
+  // Navigate to the parent of the target
+  for (let i = 0; i < pathParts.length - 1; i++) {
+    const part = pathParts[i];
+    const nextPart = pathParts[i + 1];
+
+    if (current[part] === undefined) {
+      // Check if the next part is a number (array index) or string (object key)
+      if (typeof nextPart === "number") {
+        current[part] = [];
+      } else {
+        current[part] = {};
+      }
+    }
+    current = current[part];
+  }
+
+  // Update the value at the target path
+  const lastPart = pathParts[pathParts.length - 1];
+  current[lastPart] = newValue;
+
+  return newObj;
+};