diff --git a/frontend/src/app-components/inputs/MultipleInput.tsx b/frontend/src/app-components/inputs/MultipleInput.tsx
index 17c73a38..df2755b9 100644
--- a/frontend/src/app-components/inputs/MultipleInput.tsx
+++ b/frontend/src/app-components/inputs/MultipleInput.tsx
@@ -6,8 +6,8 @@
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
+import { RemoveCircleOutline } from "@mui/icons-material";
 import AddIcon from "@mui/icons-material/Add";
-import DeleteIcon from "@mui/icons-material/Delete";
 import {
   Box,
   Button,
@@ -130,12 +130,6 @@ const MultipleInput = forwardRef<HTMLDivElement, MultipleInputProps>(
               gap={1}
               mb={1}
             >
-              <IconButton
-                onClick={() => handleRemoveInput(input.id)}
-                disabled={inputs.length <= minInput}
-              >
-                <DeleteIcon />
-              </IconButton>
               <Input
                 {...(getInputProps ? getInputProps(idx) : null)}
                 {...rest}
@@ -146,6 +140,13 @@ const MultipleInput = forwardRef<HTMLDivElement, MultipleInputProps>(
                 }}
                 fullWidth
               />
+              <IconButton
+                color="error"
+                onClick={() => handleRemoveInput(input.id)}
+                disabled={inputs.length <= minInput}
+              >
+                <RemoveCircleOutline />
+              </IconButton>
             </Box>
           ))}
           <Box
diff --git a/frontend/src/components/visual-editor/form/inputs/message/ButtonsInput.tsx b/frontend/src/components/visual-editor/form/inputs/message/ButtonsInput.tsx
index 2a622afd..1b5e63a4 100644
--- a/frontend/src/components/visual-editor/form/inputs/message/ButtonsInput.tsx
+++ b/frontend/src/components/visual-editor/form/inputs/message/ButtonsInput.tsx
@@ -6,8 +6,8 @@
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
+import { RemoveCircleOutline } from "@mui/icons-material";
 import AddIcon from "@mui/icons-material/Add";
-import DeleteIcon from "@mui/icons-material/Delete";
 import { Box, Button, Grid, IconButton } from "@mui/material";
 import { FC, Fragment, useEffect, useState } from "react";
 import { FieldPath } from "react-hook-form";
@@ -75,9 +75,6 @@ const ButtonsInput: FC<ButtonsInput> = ({
   return (
     <Box>
       <Grid container spacing={2}>
-        <Grid item xs={1}>
-          &nbsp;
-        </Grid>
         <Grid item xs={2}>
           {t("label.type")}
         </Grid>
@@ -90,16 +87,11 @@ const ButtonsInput: FC<ButtonsInput> = ({
         <Grid item xs={2}>
           {t("label.webview")}
         </Grid>
+        <Grid item xs={1}>
+          &nbsp;
+        </Grid>
         {buttons.map(({ value, id }, idx) => (
           <Fragment key={id}>
-            <Grid item xs={1}>
-              <IconButton
-                onClick={() => removeInput(idx)}
-                disabled={buttons.length <= minInput}
-              >
-                <DeleteIcon />
-              </IconButton>
-            </Grid>
             <ButtonInput
               fieldPath={fieldPath}
               idx={idx}
@@ -107,6 +99,15 @@ const ButtonsInput: FC<ButtonsInput> = ({
               onChange={updateInput(idx)}
               disablePayload={disablePayload}
             />
+            <Grid item xs={1}>
+              <IconButton
+                color="error"
+                onClick={() => removeInput(idx)}
+                disabled={buttons.length <= minInput}
+              >
+                <RemoveCircleOutline />
+              </IconButton>
+            </Grid>
           </Fragment>
         ))}
       </Grid>
diff --git a/frontend/src/components/visual-editor/form/inputs/message/QuickRepliesInput.tsx b/frontend/src/components/visual-editor/form/inputs/message/QuickRepliesInput.tsx
index 8057ec96..c2b4ae60 100644
--- a/frontend/src/components/visual-editor/form/inputs/message/QuickRepliesInput.tsx
+++ b/frontend/src/components/visual-editor/form/inputs/message/QuickRepliesInput.tsx
@@ -6,8 +6,8 @@
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
+import { RemoveCircleOutline } from "@mui/icons-material";
 import AddIcon from "@mui/icons-material/Add";
-import DeleteIcon from "@mui/icons-material/Delete";
 import { Box, Button, Grid, IconButton } from "@mui/material";
 import { FC, Fragment, useEffect, useState } from "react";
 
@@ -71,9 +71,6 @@ const QuickRepliesInput: FC<QuickRepliesInput> = ({
   return (
     <Box>
       <Grid container spacing={2}>
-        <Grid item xs={1}>
-          &nbsp;
-        </Grid>
         <Grid item xs={2}>
           {t("label.type")}
         </Grid>
@@ -84,22 +81,26 @@ const QuickRepliesInput: FC<QuickRepliesInput> = ({
         <Grid item xs={4}>
           {t("label.payload")}
         </Grid>
+        <Grid item xs={1}>
+          &nbsp;
+        </Grid>
         {quickReplies.map(({ value, id }, idx) => (
           <Fragment key={id}>
-            <Grid item xs={1}>
-              <IconButton
-                size="medium"
-                onClick={() => removeInput(idx)}
-                disabled={quickReplies.length <= minInput}
-              >
-                <DeleteIcon />
-              </IconButton>
-            </Grid>
             <QuickReplyInput
               value={value}
               idx={idx}
               onChange={updateInput(idx)}
             />
+            <Grid item xs={1}>
+              <IconButton
+                color="error"
+                size="medium"
+                onClick={() => removeInput(idx)}
+                disabled={quickReplies.length <= minInput}
+              >
+                <RemoveCircleOutline />
+              </IconButton>
+            </Grid>
           </Fragment>
         ))}
       </Grid>