diff --git a/dashboard/src/components/awaiting/index.tsx b/dashboard/src/components/awaiting/index.tsx
index 02edfe6..e6eb9c5 100644
--- a/dashboard/src/components/awaiting/index.tsx
+++ b/dashboard/src/components/awaiting/index.tsx
@@ -1,34 +1,38 @@
 import { type FC } from "react";
 
 interface AwaitingProps {
-    isFetching?: boolean;
-    isNotFound?: boolean;
-    NotFound?: JSX.Element;
-    Skeleton?: JSX.Element;
-    Component: JSX.Element;
+  isFetching?: boolean;
+  isNotFound?: boolean;
+  NotFound?: JSX.Element;
+  Skeleton?: JSX.Element;
+  Component: JSX.Element;
 }
 
 /**
  * @param isFetching - returned from react-query
  * which indicate the promise is still fetching.
- * @example 
+ * @example
  * const { data, isFetching} = useQuery();
  *
  * @param isNotFound - whether the data return is empty or not
  * @param NotFound - Not found component
  * @param Component - The actual component itself
- * @param Skeleton - Skeleton structure which will be presented 
+ * @param Skeleton - Skeleton structure which will be presented
  * when the data is still pending and fetching
  *
  */
 export const Awaiting: FC<AwaitingProps> = ({
-    isFetching, isNotFound, NotFound, Skeleton, Component
+  isFetching,
+  isNotFound,
+  NotFound,
+  Skeleton,
+  Component,
 }) => {
-    if (isFetching) {
-        return Skeleton
-    } else if (isNotFound) {
-        return NotFound
-    } else {
-        return Component
-    }
-}
+  if (isFetching) {
+    return Skeleton;
+  }
+  if (isNotFound) {
+    return NotFound;
+  }
+  return Component;
+};
diff --git a/dashboard/src/features/nodes/dialogs/settings/node-config-editor.tsx b/dashboard/src/features/nodes/dialogs/settings/node-config-editor.tsx
index f10260c..327def2 100644
--- a/dashboard/src/features/nodes/dialogs/settings/node-config-editor.tsx
+++ b/dashboard/src/features/nodes/dialogs/settings/node-config-editor.tsx
@@ -1,7 +1,7 @@
 import Editor from "@monaco-editor/react";
 import { useTheme } from "@marzneshin/features/theme-switch";
 import { useNodesSettings } from "./use-nodes-settings";
-import { Button } from "@marzneshin/components";
+import { Button, Awaiting } from "@marzneshin/components";
 import { useTranslation } from "react-i18next";
 import type { NodeType } from "../..";
 
@@ -15,6 +15,7 @@ export const NodeConfigEditor = ({
     payloadValidity,
     language,
     config,
+    isFetching,
     handleConfigSave,
     handleConfigChange,
     handleEditorValidation,
@@ -22,14 +23,19 @@ export const NodeConfigEditor = ({
 
   return (
     <>
-      <Editor
-        height="50vh"
-        className="rounded-sm border"
-        defaultLanguage={language}
-        theme={theme === "dark" ? "vs-dark" : "github"}
-        defaultValue={config}
-        onChange={handleConfigChange}
-        onValidate={handleEditorValidation}
+      <Awaiting
+        isFetching={isFetching}
+        Component={
+          <Editor
+            height="50vh"
+            className="rounded-sm border"
+            defaultLanguage={language}
+            theme={theme === "dark" ? "vs-dark" : "github"}
+            defaultValue={config}
+            onChange={handleConfigChange}
+            onValidate={handleEditorValidation}
+          />
+        }
       />
       <Button
         className="w-full"
diff --git a/dashboard/src/features/nodes/dialogs/settings/use-nodes-settings.ts b/dashboard/src/features/nodes/dialogs/settings/use-nodes-settings.ts
index 530a1dc..23fbd70 100644
--- a/dashboard/src/features/nodes/dialogs/settings/use-nodes-settings.ts
+++ b/dashboard/src/features/nodes/dialogs/settings/use-nodes-settings.ts
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import YAML from "yaml";
 import {
   type NodeType,
@@ -14,22 +14,29 @@ const parseConfig = (data: {
   return {
     [NodeBackendSettingConfigFormat.PLAIN]: () => data.config,
     [NodeBackendSettingConfigFormat.JSON]: () =>
-      JSON.stringify(JSON.parse(data.config), null, "\t"),
+      JSON.stringify(JSON.parse(data.config), null, "    "),
     [NodeBackendSettingConfigFormat.YAML]: () =>
-      YAML.stringify(YAML.parse(data.config), null, "\t"),
+      YAML.stringify(YAML.parse(data.config), null, "    "),
   }[data.format]();
 };
 
+const parseLanguage = (format: NodeBackendSettingConfigFormat) =>
+  ({
+    [NodeBackendSettingConfigFormat.PLAIN]: "text",
+    [NodeBackendSettingConfigFormat.JSON]: "json",
+    [NodeBackendSettingConfigFormat.YAML]: "yaml",
+  })[format];
+
 export const useNodesSettings = (entity: NodeType, backend: string) => {
-  const { data } = useNodesSettingsQuery(entity, backend);
+  const { data, isFetching } = useNodesSettingsQuery(entity, backend);
   const [config, setConfig] = useState<string>(data.config);
   const [payloadValidity, setPayloadValidity] = useState<boolean>(true);
   const mutate = useNodesSettingsMutation();
-  const language = {
-    [NodeBackendSettingConfigFormat.PLAIN]: "text",
-    [NodeBackendSettingConfigFormat.JSON]: "json",
-    [NodeBackendSettingConfigFormat.YAML]: "yaml",
-  }[data.format];
+  const language = parseLanguage(data.format);
+
+  useEffect(() => {
+    if (!isFetching) setConfig(parseConfig(data));
+  }, [isFetching, data]);
 
   const handleEditorValidation = (markers: any[]) => {
     setPayloadValidity(!markers.length);
@@ -53,6 +60,7 @@ export const useNodesSettings = (entity: NodeType, backend: string) => {
   return {
     payloadValidity,
     language,
+    isFetching,
     config: parseConfig(data),
     handleConfigSave,
     handleConfigChange,