diff --git a/frontend/src/Editor/ConfigHandle.jsx b/frontend/src/Editor/ConfigHandle.jsx
index ad89125724..59a3eada5c 100644
--- a/frontend/src/Editor/ConfigHandle.jsx
+++ b/frontend/src/Editor/ConfigHandle.jsx
@@ -4,13 +4,36 @@ export const ConfigHandle = function ConfigHandle({
     id,
     component,
     configHandleClicked,
-    dragRef
+    dragRef,
+    removeComponent
 }) {
 
 return <div className="config-handle" ref={dragRef}>
-         <span  style={{cursor: 'move'}} onClick={(e) => { e.preventDefault(); configHandleClicked(id, component) }} className="badge badge bg-azure-lt" role="button">
-            <img style={{cursor: 'pointer'}} src="https://www.svgrepo.com/show/83981/menu.svg" width="8" height="8" style={{marginRight: '5px'}}/>
+         <span 
+          style={{cursor: 'move'}} 
+          onClick={(e) => { e.preventDefault(); configHandleClicked(id, component) }} 
+          className="badge badge bg-azure-lt" 
+          role="button"
+        >
+            <img 
+              style={{cursor: 'pointer'}} 
+              src="https://www.svgrepo.com/show/83981/menu.svg" 
+              width="8" 
+              height="8" 
+              style={{marginRight: '5px'}}
+            />
             {component.name}
+
          </span>
+         <img 
+          style={{cursor: 'pointer'}} 
+          src="https://www.svgrepo.com/show/244045/delete-trash.svg" 
+          width="12" 
+          role="button"
+          className="mx-2"
+          height="12" 
+          onClick={removeComponent}
+          style={{marginRight: '5px'}}
+        />
     </div>
 }
diff --git a/frontend/src/Editor/Container.jsx b/frontend/src/Editor/Container.jsx
index 175a182ec4..b9b7a7b4d2 100644
--- a/frontend/src/Editor/Container.jsx
+++ b/frontend/src/Editor/Container.jsx
@@ -29,7 +29,8 @@ export const Container = ({
   onComponentOptionsChanged,
   appLoading,
   configHandleClicked,
-  zoomLevel
+  zoomLevel,
+  removeComponent
 }) => {
   const components = appDefinition.components || [];
 
@@ -202,6 +203,7 @@ export const Container = ({
             inCanvas={true}
             zoomLevel={zoomLevel}
             configHandleClicked={configHandleClicked}
+            removeComponent={removeComponent}
             containerProps={{
               mode,
               snapToGrid,
@@ -214,7 +216,8 @@ export const Container = ({
               onComponentOptionsChanged,
               appLoading,
               zoomLevel,
-              configHandleClicked
+              configHandleClicked,
+              removeComponent
             }}
           />
         }
diff --git a/frontend/src/Editor/DraggableBox.jsx b/frontend/src/Editor/DraggableBox.jsx
index 1fa82a7d0c..76dd123cfa 100644
--- a/frontend/src/Editor/DraggableBox.jsx
+++ b/frontend/src/Editor/DraggableBox.jsx
@@ -64,7 +64,8 @@ export const DraggableBox = function DraggableBox({
   resizingStatusChanged,
   zoomLevel,
   containerProps,
-  configHandleClicked
+  configHandleClicked,
+  removeComponent
 }) {
   const [isResizing, setResizing] = useState(false);
   const [canDrag, setCanDrag] = useState(true);
@@ -132,6 +133,7 @@ export const DraggableBox = function DraggableBox({
             {mode === 'edit' && 
             <ConfigHandle 
               id={id} 
+              removeComponent={removeComponent}
               dragRef={refProps.ref}
               component={component}
               configHandleClicked={(id, component) => configHandleClicked(id, component)}