diff --git a/services/frontend/src/components/Canvas/ServiceNode.tsx b/services/frontend/src/components/Canvas/ServiceNode.tsx
index 48e4a0b..2bedfbe 100644
--- a/services/frontend/src/components/Canvas/ServiceNode.tsx
+++ b/services/frontend/src/components/Canvas/ServiceNode.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { truncateStr } from "../../utils";
 import { IServiceNodeItem, CallbackFunction } from "../../types";
 import eventBus from "../../events/eventBus";
 import { Popover } from "./Popover";
@@ -54,12 +55,17 @@ export default function ServiceNode(props: INodeProps) {
       )}
       <div className="node-label w-full py-2 px-4">
         <>
-          <div className="text-sm font-semibold overflow-x-hidden">
-            {node.canvasConfig.service_name}
-          </div>
-          <div className="text-xs text-gray-500 overflow-x-hidden">
-            {node.serviceConfig.container_name}
-          </div>
+          {node.canvasConfig.service_name && (
+            <div className="text-sm font-semibold overflow-x-hidden">
+              {truncateStr(node.canvasConfig.service_name, 10)}
+            </div>
+          )}
+
+          {node.serviceConfig.container_name && (
+            <div className="text-xs text-gray-500 overflow-x-hidden">
+              {truncateStr(node.serviceConfig.container_name, 10)}
+            </div>
+          )}
         </>
       </div>
     </div>
diff --git a/services/frontend/src/components/Canvas/VolumeNode.tsx b/services/frontend/src/components/Canvas/VolumeNode.tsx
index b067d74..6551be2 100644
--- a/services/frontend/src/components/Canvas/VolumeNode.tsx
+++ b/services/frontend/src/components/Canvas/VolumeNode.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { truncateStr } from "../../utils";
 import { IVolumeNodeItem, CallbackFunction } from "../../types";
 import eventBus from "../../events/eventBus";
 import { Popover } from "./Popover";
@@ -54,9 +55,11 @@ export default function VolumeNode(props: INodeProps) {
       )}
       <div className="node-label w-full py-2 px-4">
         <>
-          <div className="text-xs text-gray-500 overflow-x-hidden">
-            {node.volumeConfig.name}
-          </div>
+          {node.volumeConfig.name && (
+            <div className="text-sm font-semibold overflow-x-hidden">
+              {truncateStr(node.volumeConfig.name, 10)}
+            </div>
+          )}
         </>
       </div>
     </div>
diff --git a/services/frontend/src/components/Modal/Network/index.tsx b/services/frontend/src/components/Modal/Network/index.tsx
index 7aa3694..de0e46a 100644
--- a/services/frontend/src/components/Modal/Network/index.tsx
+++ b/services/frontend/src/components/Modal/Network/index.tsx
@@ -71,9 +71,7 @@ const ModalNetwork = (props: IModalNetworkProps) => {
 
             <Formik
               initialValues={{
-                initialValues: {
-                  ...topLevelNetworkConfigInitialValues()
-                },
+                ...topLevelNetworkConfigInitialValues(),
                 key: "volume",
                 type: "VOLUME",
                 inputs: [],
diff --git a/services/frontend/src/components/Project/index.tsx b/services/frontend/src/components/Project/index.tsx
index ec7b9a2..19ffb9f 100644
--- a/services/frontend/src/components/Project/index.tsx
+++ b/services/frontend/src/components/Project/index.tsx
@@ -245,9 +245,9 @@ export default function Project() {
 
     if (existingIndex !== -1) {
       _connections.splice(existingIndex, 1);
+      setConnections(_connections);
+      stateConnectionsRef.current = _connections;
     }
-
-    setConnections(_connections);
   };
 
   const onConnectionAttached = (data: any) => {