diff --git a/app/.env b/app/.env
index c50d174..8a98bdc 100644
--- a/app/.env
+++ b/app/.env
@@ -2,6 +2,7 @@
 PORT=8200 
 
 # Base URL for the server socket API, used for real-time communication (e.g., WebSockets).
+# REACT_APP_SERVER_SOCKET_API_BASE_URL=192.168.0.110:8000
 REACT_APP_SERVER_SOCKET_API_BASE_URL=185.100.212.76:8000
 
 # Base URL for the server REST API, used for HTTP requests to the backend server.
diff --git a/app/src/modules/visualization/charts/BarGraphComponent.tsx b/app/src/modules/visualization/charts/BarGraphComponent.tsx
deleted file mode 100644
index 9a07473..0000000
--- a/app/src/modules/visualization/charts/BarGraphComponent.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import {  useMemo } from "react";
-
-import { Bar } from "react-chartjs-2";
-
-interface ChartComponentProps {
-  type: any;
-  title: string;
-  fontFamily?: string;
-  fontSize?: string;
-  fontWeight?: "Light" | "Regular" | "Bold";
-  data: any;
-}
-
-const LineGraphComponent = ({
-  title,
-  fontFamily,
-  fontSize,
-  fontWeight = "Regular",
-}: ChartComponentProps) => {
-  // Memoize Font Weight Mapping
-  const chartFontWeightMap = useMemo(
-    () => ({
-      Light: "lighter" as const,
-      Regular: "normal" as const,
-      Bold: "bold" as const,
-    }),
-    []
-  );
-
-  // Parse and Memoize Font Size
-  const fontSizeValue = useMemo(
-    () => (fontSize ? parseInt(fontSize) : 12),
-    [fontSize]
-  );
-
-  // Determine and Memoize Font Weight
-  const fontWeightValue = useMemo(
-    () => chartFontWeightMap[fontWeight],
-    [fontWeight, chartFontWeightMap]
-  );
-
-  // Memoize Chart Font Style
-  const chartFontStyle = useMemo(
-    () => ({
-      family: fontFamily || "Arial",
-      size: fontSizeValue,
-      weight: fontWeightValue,
-    }),
-    [fontFamily, fontSizeValue, fontWeightValue]
-  );
-
-  const options = useMemo(
-    () => ({
-      responsive: true,
-      maintainAspectRatio: false,
-      plugins: {
-        title: {
-          display: true,
-          text: title,
-          font: chartFontStyle,
-        },
-        legend: {
-          display: false,
-        },
-      },
-      scales: {
-        x: {
-          ticks: {
-            display: false, // This hides the x-axis labels
-          },
-        },
-      },
-    }),
-    [title, chartFontStyle]
-  );
-
-  const chartData = {
-    labels: ["January", "February", "March", "April", "May", "June", "July"],
-    datasets: [
-      {
-        label: "My First Dataset",
-        data: [65, 59, 80, 81, 56, 55, 40],
-        backgroundColor: "#6f42c1",
-        borderColor: "#ffffff",
-        borderWidth: 2,
-        fill: false,
-      },
-    ],
-  };
-
-  return <Bar data={chartData} options={options} />;
-};
-
-export default LineGraphComponent;
diff --git a/app/src/modules/visualization/charts/LineGraphComponent.tsx b/app/src/modules/visualization/charts/LineGraphComponent.tsx
deleted file mode 100644
index cf1a47f..0000000
--- a/app/src/modules/visualization/charts/LineGraphComponent.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import { useMemo } from "react";
-import { Line } from "react-chartjs-2";
-
-interface ChartComponentProps {
-  type: any;
-  title: string;
-  fontFamily?: string;
-  fontSize?: string;
-  fontWeight?: "Light" | "Regular" | "Bold";
-  data: any;
-}
-
-const LineGraphComponent = ({
-  title,
-  fontFamily,
-  fontSize,
-  fontWeight = "Regular",
-}: ChartComponentProps) => {
-  // Memoize Font Weight Mapping
-  const chartFontWeightMap = useMemo(
-    () => ({
-      Light: "lighter" as const,
-      Regular: "normal" as const,
-      Bold: "bold" as const,
-    }),
-    []
-  );
-
-  // Parse and Memoize Font Size
-  const fontSizeValue = useMemo(
-    () => (fontSize ? parseInt(fontSize) : 12),
-    [fontSize]
-  );
-
-  // Determine and Memoize Font Weight
-  const fontWeightValue = useMemo(
-    () => chartFontWeightMap[fontWeight],
-    [fontWeight, chartFontWeightMap]
-  );
-
-  // Memoize Chart Font Style
-  const chartFontStyle = useMemo(
-    () => ({
-      family: fontFamily || "Arial",
-      size: fontSizeValue,
-      weight: fontWeightValue,
-    }),
-    [fontFamily, fontSizeValue, fontWeightValue]
-  );
-
-  const options = useMemo(
-    () => ({
-      responsive: true,
-      maintainAspectRatio: false,
-      plugins: {
-        title: {
-          display: true,
-          text: title,
-          font: chartFontStyle,
-        },
-        legend: {
-          display: false,
-        },
-      },
-      scales: {
-        x: {
-          ticks: {
-            display: false, // This hides the x-axis labels
-          },
-        },
-      },
-    }),
-    [title, chartFontStyle]
-  );
-
-  const chartData = {
-    labels: ["January", "February", "March", "April", "May", "June", "July"],
-    datasets: [
-      {
-        label: "My First Dataset",
-        data: [65, 59, 80, 81, 56, 55, 40],
-        backgroundColor: "#6f42c1", // Updated to #6f42c1 (Purple)
-        borderColor: "#ffffff", // Keeping border color white
-        borderWidth: 2,
-        fill: false,
-      },
-    ],
-  };
-
-  return <Line data={chartData} options={options} />;
-};
-
-export default LineGraphComponent;
diff --git a/app/src/modules/visualization/charts/PieGraphComponent.tsx b/app/src/modules/visualization/charts/PieGraphComponent.tsx
deleted file mode 100644
index 912cbc3..0000000
--- a/app/src/modules/visualization/charts/PieGraphComponent.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import { useMemo } from "react";
-import { Pie } from "react-chartjs-2";
-
-interface ChartComponentProps {
-  type: any;
-  title: string;
-  fontFamily?: string;
-  fontSize?: string;
-  fontWeight?: "Light" | "Regular" | "Bold";
-  data: any;
-}
-
-const PieChartComponent = ({
-  title,
-  fontFamily,
-  fontSize,
-  fontWeight = "Regular",
-}: ChartComponentProps) => {
-  // Memoize Font Weight Mapping
-  const chartFontWeightMap = useMemo(
-    () => ({
-      Light: "lighter" as const,
-      Regular: "normal" as const,
-      Bold: "bold" as const,
-    }),
-    []
-  );
-
-  // Parse and Memoize Font Size
-  const fontSizeValue = useMemo(
-    () => (fontSize ? parseInt(fontSize) : 12),
-    [fontSize]
-  );
-
-  // Determine and Memoize Font Weight
-  const fontWeightValue = useMemo(
-    () => chartFontWeightMap[fontWeight],
-    [fontWeight, chartFontWeightMap]
-  );
-
-  // Memoize Chart Font Style
-  const chartFontStyle = useMemo(
-    () => ({
-      family: fontFamily || "Arial",
-      size: fontSizeValue,
-      weight: fontWeightValue,
-    }),
-    [fontFamily, fontSizeValue, fontWeightValue]
-  );
-
-  // Access the CSS variable for the primary accent color
-  const accentColor = getComputedStyle(document.documentElement)
-    .getPropertyValue("--accent-color")
-    .trim();
-
-  const options = useMemo(
-    () => ({
-      responsive: true,
-      maintainAspectRatio: false,
-      plugins: {
-        title: {
-          display: true,
-          text: title,
-          font: chartFontStyle,
-        },
-        legend: {
-          display: false,
-        },
-      },
-    }),
-    [title, chartFontStyle]
-  );
-
-  const chartData = {
-    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
-    datasets: [
-      {
-        label: "Dataset",
-        data: [12, 19, 3, 5, 2, 3],
-        backgroundColor: ["#6f42c1"],
-        borderColor: "#ffffff",
-        borderWidth: 2,
-      },
-    ],
-  };
-
-  return <Pie data={chartData} options={options} />;
-};
-
-export default PieChartComponent;
diff --git a/app/src/modules/visualization/widgets/2d/charts/BarGraphComponent.tsx b/app/src/modules/visualization/widgets/2d/charts/BarGraphComponent.tsx
index dc96083..56c2e4f 100644
--- a/app/src/modules/visualization/widgets/2d/charts/BarGraphComponent.tsx
+++ b/app/src/modules/visualization/widgets/2d/charts/BarGraphComponent.tsx
@@ -1,187 +1,4 @@
-// import React, { useEffect, useRef, useMemo, useState } from "react";
-// import { Chart } from "chart.js/auto";
-// import { useThemeStore } from "../../../../store/useThemeStore";
-// import io from "socket.io-client";
-// import { Bar } from 'react-chartjs-2';
-// import useChartStore from "../../../../store/useChartStore";
 
-// // WebSocket Connection
-// // const socket = io("http://localhost:5000"); // Adjust to your backend URL
-
-// interface ChartComponentProps {
-//   type: any;
-//   title: string;
-//   fontFamily?: string;
-//   fontSize?: string;
-//   fontWeight?: "Light" | "Regular" | "Bold";
-//   data: any;
-// }
-
-// const LineGraphComponent = ({
-//   type,
-//   title,
-//   fontFamily,
-//   fontSize,
-//   fontWeight = "Regular",
-//   data,
-// }: ChartComponentProps) => {
-//   const canvasRef = useRef<HTMLCanvasElement>(null);
-//   const { themeColor } = useThemeStore();
-//   const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({
-//     labels: [],
-//     datasets: [],
-//   });
-
-//   const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
-
-//   const defaultData = {
-//     labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
-//     datasets: [
-//       {
-//         label: "Dataset",
-//         data: [12, 19, 3, 5, 2, 3],
-//         backgroundColor: ["#6f42c1"],
-//         borderColor: "#ffffff",
-//         borderWidth: 2,
-//       },
-//     ],
-//   };
-
-//   // Memoize Theme Colors to Prevent Unnecessary Recalculations
-//     const buttonActionColor = useMemo(
-//       () => themeColor[0] || "#5c87df",
-//       [themeColor]
-//     );
-//     const buttonAbortColor = useMemo(
-//       () => themeColor[1] || "#ffffff",
-//       [themeColor]
-//     );
-
-//     // Memoize Font Weight Mapping
-//     const chartFontWeightMap = useMemo(
-//       () => ({
-//         Light: "lighter" as const,
-//         Regular: "normal" as const,
-//         Bold: "bold" as const,
-//       }),
-//       []
-//     );
-
-//     // Parse and Memoize Font Size
-//     const fontSizeValue = useMemo(
-//       () => (fontSize ? parseInt(fontSize) : 12),
-//       [fontSize]
-//     );
-
-//     // Determine and Memoize Font Weight
-//     const fontWeightValue = useMemo(
-//       () => chartFontWeightMap[fontWeight],
-//       [fontWeight, chartFontWeightMap]
-//     );
-
-//     // Memoize Chart Font Style
-//     const chartFontStyle = useMemo(
-//       () => ({
-//         family: fontFamily || "Arial",
-//         size: fontSizeValue,
-//         weight: fontWeightValue,
-//       }),
-//       [fontFamily, fontSizeValue, fontWeightValue]
-//     );
-
-//     // Memoize Chart Data
-//     // const data = useMemo(() => propsData, [propsData]);
-
-//     // Memoize Chart Options
-//     const options = useMemo(
-//       () => ({
-//         responsive: true,
-//         maintainAspectRatio: false,
-//         plugins: {
-//           title: {
-//             display: true,
-//             text: title,
-//             font: chartFontStyle,
-//           },
-//           legend: {
-//             display: false,
-//           },
-//         },
-//         scales: {
-//           x: {
-//             ticks: {
-//               display: true, // This hides the x-axis labels
-//             },
-//           },
-//         },
-//       }),
-//       [title, chartFontStyle]
-//     );
-
-//     const { measurements, setMeasurements, updateDuration, duration } = useChartStore();
-
-//   useEffect(() => {
-
-//     const socket = io(`http://${iotApiUrl}`);
-
-//     if ( measurements.length > 0 ) {
-//       var inputes = {
-//         measurements: measurements,
-//         duration: duration,
-//         interval: 1000,
-//       }
-
-//     // Start stream
-//     const startStream = () => {
-//       socket.emit("lineInput", inputes);
-//     }
-
-//     socket.on('connect', startStream);
-
-//     socket.on("lineOutput", (response) => {
-//       const responceData = response.data;
-//       console.log("Received data:", responceData);
-
-//       // Extract timestamps and values
-//       const labels = responceData.time;
-//       const datasets = measurements.map((measurement: any) => {
-//         const key = `${measurement.name}.${measurement.fields}`;
-//         return {
-//           label: key,
-//           data: responceData[key]?.values ?? [], // Ensure it exists
-//           backgroundColor: "#6f42c1",
-//           borderColor: "#ffffff",
-//         };
-//       });
-
-//       setChartData({ labels, datasets });
-//     });
-//     }
-
-//     return () => {
-//       socket.off("lineOutput");
-//       socket.emit("stop_stream"); // Stop streaming when component unmounts
-//     };
-//   }, [measurements, duration]);
-
-//   // useEffect(() => {
-//   //   if (!canvasRef.current) return;
-//   //   const ctx = canvasRef.current.getContext("2d");
-//   //   if (!ctx) return;
-
-//   //   const chart = new Chart(ctx, {
-//   //     type,
-//   //     data: chartData,
-//   //     options: options,
-//   //   });
-
-//   //   return () => chart.destroy();
-//   // }, [chartData, type, title]);
-
-//   return <Bar data={measurements && measurements.length > 0 ? chartData : defaultData} options={options} />;
-// };
-
-// export default LineGraphComponent;
 
 import React, { useEffect, useMemo, useState } from "react";
 import { Bar } from "react-chartjs-2";
@@ -243,7 +60,7 @@ const BarGraphComponent = ({
     ],
   };
 
-  useEffect(() => {}, []);
+  useEffect(() => { }, []);
 
   // Memoize Theme Colors
   const buttonActionColor = useMemo(
diff --git a/app/src/modules/visualization/widgets/2d/charts/PieGraphComponent.tsx b/app/src/modules/visualization/widgets/2d/charts/PieGraphComponent.tsx
index e331593..fdea15e 100644
--- a/app/src/modules/visualization/widgets/2d/charts/PieGraphComponent.tsx
+++ b/app/src/modules/visualization/widgets/2d/charts/PieGraphComponent.tsx
@@ -1,188 +1,3 @@
-// import React, { useEffect, useRef, useMemo, useState } from "react";
-// import { Chart } from "chart.js/auto";
-// import { useThemeStore } from "../../../../store/useThemeStore";
-// import io from "socket.io-client";
-// import { Pie } from 'react-chartjs-2';
-// import useChartStore from "../../../../store/useChartStore";
-
-// // WebSocket Connection
-// // const socket = io("http://localhost:5000"); // Adjust to your backend URL
-
-// interface ChartComponentProps {
-//   type: any;
-//   title: string;
-//   fontFamily?: string;
-//   fontSize?: string;
-//   fontWeight?: "Light" | "Regular" | "Bold";
-//   data: any;
-// }
-
-// const PieChartComponent = ({
-//   type,
-//   title,
-//   fontFamily,
-//   fontSize,
-//   fontWeight = "Regular",
-//   data,
-// }: ChartComponentProps) => {
-//   const canvasRef = useRef<HTMLCanvasElement>(null);
-//   const { themeColor } = useThemeStore();
-//   const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({
-//     labels: [],
-//     datasets: [],
-//   });
-
-//   const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
-
-//   const defaultData = {
-//     labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
-//     datasets: [
-//       {
-//         label: "Dataset",
-//         data: [12, 19, 3, 5, 2, 3],
-//         backgroundColor: ["#6f42c1"],
-//         borderColor: "#ffffff",
-//         borderWidth: 2,
-//       },
-//     ],
-//   };
-
-//   // Memoize Theme Colors to Prevent Unnecessary Recalculations
-//     const buttonActionColor = useMemo(
-//       () => themeColor[0] || "#6f42c1",
-//       [themeColor]
-//     );
-//     const buttonAbortColor = useMemo(
-//       () => themeColor[1] || "#ffffff",
-//       [themeColor]
-//     );
-
-//     // Memoize Font Weight Mapping
-//     const chartFontWeightMap = useMemo(
-//       () => ({
-//         Light: "lighter" as const,
-//         Regular: "normal" as const,
-//         Bold: "bold" as const,
-//       }),
-//       []
-//     );
-
-//     // Parse and Memoize Font Size
-//     const fontSizeValue = useMemo(
-//       () => (fontSize ? parseInt(fontSize) : 12),
-//       [fontSize]
-//     );
-
-//     // Determine and Memoize Font Weight
-//     const fontWeightValue = useMemo(
-//       () => chartFontWeightMap[fontWeight],
-//       [fontWeight, chartFontWeightMap]
-//     );
-
-//     // Memoize Chart Font Style
-//     const chartFontStyle = useMemo(
-//       () => ({
-//         family: fontFamily || "Arial",
-//         size: fontSizeValue,
-//         weight: fontWeightValue,
-//       }),
-//       [fontFamily, fontSizeValue, fontWeightValue]
-//     );
-
-//     // Memoize Chart Data
-//     // const data = useMemo(() => propsData, [propsData]);
-
-//     // Memoize Chart Options
-//     const options = useMemo(
-//       () => ({
-//         responsive: true,
-//         maintainAspectRatio: false,
-//         plugins: {
-//           title: {
-//             display: true,
-//             text: title,
-//             font: chartFontStyle,
-//           },
-//           legend: {
-//             display: false,
-//           },
-//         },
-//         scales: {
-//           // x: {
-//           //   ticks: {
-//           //     display: true, // This hides the x-axis labels
-//           //   },
-//           // },
-//         },
-//       }),
-//       [title, chartFontStyle]
-//     );
-
-//     const { measurements, setMeasurements, updateDuration, duration } = useChartStore();
-
-//   useEffect(() => {
-
-//     const socket = io(`http://${iotApiUrl}`);
-
-//     if ( measurements.length > 0 ) {
-//       var inputes = {
-//         measurements: measurements,
-//         duration: duration,
-//         interval: 1000,
-//       }
-
-//     // Start stream
-//     const startStream = () => {
-//       socket.emit("lineInput", inputes);
-//     }
-
-//     socket.on('connect', startStream);
-
-//     socket.on("lineOutput", (response) => {
-//       const responceData = response.data;
-//       console.log("Received data:", responceData);
-
-//       // Extract timestamps and values
-//       const labels = responceData.time;
-//       const datasets = measurements.map((measurement: any) => {
-//         const key = `${measurement.name}.${measurement.fields}`;
-//         return {
-//           label: key,
-//           data: responceData[key]?.values ?? [], // Ensure it exists
-//           backgroundColor: "#6f42c1",
-//           borderColor: "#ffffff",
-//         };
-//       });
-
-//       setChartData({ labels, datasets });
-//     });
-//     }
-
-//     return () => {
-//       socket.off("lineOutput");
-//       socket.emit("stop_stream"); // Stop streaming when component unmounts
-//     };
-//   }, [measurements, duration]);
-
-//   // useEffect(() => {
-//   //   if (!canvasRef.current) return;
-//   //   const ctx = canvasRef.current.getContext("2d");
-//   //   if (!ctx) return;
-
-//   //   const chart = new Chart(ctx, {
-//   //     type,
-//   //     data: chartData,
-//   //     options: options,
-//   //   });
-
-//   //   return () => chart.destroy();
-//   // }, [chartData, type, title]);
-
-//   return <Pie data={measurements && measurements.length > 0 ? chartData : defaultData} options={options} />;
-// };
-
-// export default PieChartComponent;
-
 import React, { useEffect, useMemo, useState } from "react";
 import { Pie } from "react-chartjs-2";
 import io from "socket.io-client";
diff --git a/app/src/store/builder/store.ts b/app/src/store/builder/store.ts
index 023716e..60e0d4f 100644
--- a/app/src/store/builder/store.ts
+++ b/app/src/store/builder/store.ts
@@ -28,6 +28,7 @@ export const useSocketStore = create<any>((set: any, get: any) => ({
         );
 
         set({ socket, visualizationSocket });
+        console.log('visualizationSocket: ', visualizationSocket);
     },
     disconnectSocket: () => {
         set((state: any) => {