diff --git a/app/src/components/SimulationDashboard/components/element/ElementEditor.tsx b/app/src/components/SimulationDashboard/components/element/ElementEditor.tsx
index 28991e3..141d35a 100644
--- a/app/src/components/SimulationDashboard/components/element/ElementEditor.tsx
+++ b/app/src/components/SimulationDashboard/components/element/ElementEditor.tsx
@@ -550,12 +550,12 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
                                     value={
                                         element.dataBinding?.dataSource
                                             ? {
-                                                  id: element.dataBinding.dataSource as string,
-                                                  label:
-                                                      getEventByModelUuid(selectedProduct.productUuid, element.dataBinding.dataSource as string)?.modelName ??
-                                                      (element.dataBinding.dataSource === "global" ? "Global" : ""),
-                                                  icon: <DeviceIcon />,
-                                              }
+                                                id: element.dataBinding.dataSource as string,
+                                                label:
+                                                    getEventByModelUuid(selectedProduct.productUuid, element.dataBinding.dataSource as string)?.modelName ??
+                                                    (element.dataBinding.dataSource === "global" ? "Global" : ""),
+                                                icon: <DeviceIcon />,
+                                            }
                                             : null
                                     }
                                     onChange={(value) => {
@@ -574,13 +574,13 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
                                     value={
                                         element.dataBinding?.dataValue
                                             ? {
-                                                  id: element.dataBinding.dataValue as string,
-                                                  label:
-                                                      getLableValueDropdownItems(element.dataBinding?.dataSource as string | undefined)
-                                                          .flatMap((section) => section.items)
-                                                          .find((item) => item.id === element.dataBinding?.dataValue)?.label ?? "",
-                                                  icon: <ParametersIcon />,
-                                              }
+                                                id: element.dataBinding.dataValue as string,
+                                                label:
+                                                    getLableValueDropdownItems(element.dataBinding?.dataSource as string | undefined)
+                                                        .flatMap((section) => section.items)
+                                                        .find((item) => item.id === element.dataBinding?.dataValue)?.label ?? "",
+                                                icon: <ParametersIcon />,
+                                            }
                                             : null
                                     }
                                     onChange={(value) => {
@@ -620,7 +620,7 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
                                             showEyeDropper={field.showEyeDropper}
                                         />
                                     ))}
-
+                                    {/* add delete */}
                                     {singleValueFields.map((field, index) => (
                                         <DataSourceSelector
                                             key={field.id}
@@ -636,6 +636,13 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
                                                 updateDataValue(selectedBlock, selectedElement, newDataValue);
                                             }}
                                             showEyeDropper={field.showEyeDropper}
+                                            showDeleteBtn={true}
+                                            onDelete={() => {
+                                                const current = Array.isArray(element.dataBinding?.dataValue) ? element.dataBinding!.dataValue : [];
+                                                const next = [...current];
+                                                next.splice(index, 1);
+                                                updateDataValue(selectedBlock, selectedElement, next);
+                                            }}
                                         />
                                     ))}
 
@@ -662,7 +669,7 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
                                             showEyeDropper={field.showEyeDropper}
                                         />
                                     ))}
-
+                                    {/* add delete */}
                                     {multipleSourceFields.map((field, index) => (
                                         <DataSourceSelector
                                             key={field.id}
@@ -678,6 +685,13 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
                                                 updateDataSource(selectedBlock, selectedElement, next);
                                             }}
                                             showEyeDropper={field.showEyeDropper}
+                                            showDeleteBtn={true}
+                                            onDelete={() => {
+                                                const current = Array.isArray(element.dataBinding?.dataSource) ? element.dataBinding!.dataSource : [];
+                                                const next = [...current];
+                                                next.splice(index, 1);
+                                                updateDataSource(selectedBlock, selectedElement, next);
+                                            }}
                                         />
                                     ))}
 
diff --git a/app/src/components/ui/inputs/DataSourceSelector.tsx b/app/src/components/ui/inputs/DataSourceSelector.tsx
index 11557d4..5201d74 100644
--- a/app/src/components/ui/inputs/DataSourceSelector.tsx
+++ b/app/src/components/ui/inputs/DataSourceSelector.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { EyeDroperIcon } from "../../icons/ExportCommonIcons";
 import RegularDropDownID from "./RegularDropDownID";
+import { DeleteIcon } from "../../icons/ContextMenuIcons";
 
 type DataSourceSelectorProps = {
     label?: string;
@@ -12,9 +13,11 @@ type DataSourceSelectorProps = {
     onSelect: (value: { id: string; label: string }) => void;
     eyeDropperActive?: boolean; // initial state
     showEyeDropper?: boolean;
+    showDeleteBtn?: boolean;
+    onDelete?: () => void;
 };
 
-const DataSourceSelector: React.FC<DataSourceSelectorProps> = ({ label = "Data Source", options, selected, onSelect, showEyeDropper = true }) => {
+const DataSourceSelector: React.FC<DataSourceSelectorProps> = ({ label = "Data Source", options, selected, onSelect, showEyeDropper = true, showDeleteBtn, onDelete }) => {
     // Local state to toggle EyeDropper
     const [isEyeActive, setIsEyeActive] = useState(false);
 
@@ -31,6 +34,12 @@ const DataSourceSelector: React.FC<DataSourceSelectorProps> = ({ label = "Data S
                         <EyeDroperIcon isActive={isEyeActive} />
                     </div>
                 )}
+
+                {showDeleteBtn && (
+                    <div className="delete" onClick={() => onDelete?.()} style={{ cursor: onDelete ? "pointer" : "default" }}>
+                        <DeleteIcon />
+                    </div>
+                )}
             </div>
         </div>
     );
diff --git a/app/src/styles/components/simulationDashboard/_simulationDashBoard.scss b/app/src/styles/components/simulationDashboard/_simulationDashBoard.scss
index af2a618..b60097e 100644
--- a/app/src/styles/components/simulationDashboard/_simulationDashBoard.scss
+++ b/app/src/styles/components/simulationDashboard/_simulationDashBoard.scss
@@ -287,6 +287,7 @@
             justify-content: center;
             align-items: center;
             z-index: 100;
+
             svg {
                 cursor: grab;
             }
@@ -651,6 +652,7 @@
                                 display: flex;
                                 padding: 3px;
                                 border-radius: 2px;
+                                cursor: pointer;
 
                                 &.active {
 
@@ -658,6 +660,10 @@
                                 }
                             }
 
+                            .delete {
+                                cursor: pointer;
+                            }
+
                             .regularDropdown-container {
                                 .icon {
                                     padding: 0;
@@ -696,6 +702,7 @@
             position: fixed;
             top: 80px;
             right: 40px;
+
             .appearance {
                 .design-datas-wrapper {