diff --git a/package.json b/package.json
index dd1ccea..b392c05 100644
--- a/package.json
+++ b/package.json
@@ -62,6 +62,7 @@
     "lint": "eslint .",
     "pretest": "npm run lint",
     "test": "node ./test/runTest.js",
+    "dev": "webpack --watch",
     "webpack": "webpack"
   },
   "devDependencies": {
diff --git a/src/webview/Flow.jsx b/src/webview/Flow.jsx
index 065a130..96be6ec 100644
--- a/src/webview/Flow.jsx
+++ b/src/webview/Flow.jsx
@@ -73,9 +73,9 @@ const OverviewFlow = () => {
         nodeBorderRadius={2}
       />
       <Panel position="top-left">
-        <div className="border-1 border-gray-500">
+        <div className="text-black">
           <div className="flex justify-end place-items-end shadow-lg bg-slate-50 w-20 h-15">
-            <p className="pl-2 pr-2 py-2">Client: <span className="border-1 border-gray-500 bg-orange-300 text-transparent rounded-full">00</span></p>
+            <p className="pl-2 pr-2 py-2">Client: <span className="bg-orange-300 text-transparent rounded-full">00</span></p>
           </div>
           <div className="flex justify-end place-items-end shadow-lg bg-slate-50 w-20 h-15">
             <p className="pl-2 pr-2 pb-2">Server: <span className="bg-blue-300 text-transparent  rounded-full">00</span></p>
diff --git a/src/webview/flowBuilder.js b/src/webview/flowBuilder.js
index a96906a..62fd030 100644
--- a/src/webview/flowBuilder.js
+++ b/src/webview/flowBuilder.js
@@ -17,26 +17,27 @@ class FlowBuilder {
   buildNodesArray(parsedData, x = this.x, y = this.y) {
     if (!parsedData) return;
 
+
     parsedData.forEach((item) => {
       const node = {
         id: (++this.id).toString(),
         data: {
           label: (
-            <div className={`-mx-2.5 -my-2.5 py-2 px-9 shadow-lg rounded-md border-2 border-gray-500 ${(item.isClientComponent) ? 'bg-orange-300' : 'bg-blue-300'}`}>
-              <div className="flex justify-center place-items-center" key={this.id}>
-                <div className="text-sm font-medium">{item.fileName}</div>
-              </div>
-            </div>
+            <div className="text-sm font-medium text-ellipsis overflow-hidden ..." key={this.id}>{item.fileName}</div>
           )
         },
         // type: item.depth === 0 ? 'input' : '',
-        // type: item.isClientComponent ? 'input' : 'output',
         type: 'default',
         position: { x: x += 40, y: y += 30 },
         style: {
-          border: 'none',
-          borderRadius: "6px"
-        }
+          borderRadius: '6px',
+          borderWidth: '2px',
+          borderColor: '#6b7280',
+          display: 'flex',
+          justifyContent: 'center',
+          placeItems: 'center',
+          backgroundColor: `${(item.isClientComponent) ? '#fdba74' : '#93C5FD'}`,
+        },
       };
       this.initialNodes.push(node);
       if (item.children) {