diff --git a/frontend/app/studio/[brainId]/BrainManagementTabs/components/PeopleTab/BrainUsers/components/UserToInvite/UserToInvite.module.scss b/frontend/app/studio/[brainId]/BrainManagementTabs/components/PeopleTab/BrainUsers/components/UserToInvite/UserToInvite.module.scss
index e52c47e576b..7f80b63f685 100644
--- a/frontend/app/studio/[brainId]/BrainManagementTabs/components/PeopleTab/BrainUsers/components/UserToInvite/UserToInvite.module.scss
+++ b/frontend/app/studio/[brainId]/BrainManagementTabs/components/PeopleTab/BrainUsers/components/UserToInvite/UserToInvite.module.scss
@@ -6,12 +6,16 @@
   align-items: center;
   justify-content: space-between;
   gap: Spacings.$spacing05;
+  max-width: 100%;
 
   .selector {
     width: 300px;
   }
 
   @media (max-width: ScreenSizes.$small) {
+    display: flex;
+    flex-direction: column;
+
     .selector {
       width: 100%;
     }
diff --git a/frontend/app/studio/[brainId]/BrainManagementTabs/components/PeopleTab/BrainUsers/components/UserToInvite/UserToInvite.tsx b/frontend/app/studio/[brainId]/BrainManagementTabs/components/PeopleTab/BrainUsers/components/UserToInvite/UserToInvite.tsx
index abfc5367342..c8a70768491 100644
--- a/frontend/app/studio/[brainId]/BrainManagementTabs/components/PeopleTab/BrainUsers/components/UserToInvite/UserToInvite.tsx
+++ b/frontend/app/studio/[brainId]/BrainManagementTabs/components/PeopleTab/BrainUsers/components/UserToInvite/UserToInvite.tsx
@@ -1,7 +1,5 @@
 import { useEffect, useState } from "react";
 
-import Icon from "@/lib/components/ui/Icon/Icon";
-
 import styles from "./UserToInvite.module.scss";
 
 import { SingleSelector } from "../../../../../../../../../lib/components/ui/SingleSelector/SingleSelector";
@@ -43,16 +41,21 @@ export const UserToInvite = ({
 
   return (
     <div className={styles.user_to_invite_wrapper}>
-      <Icon
-        color="dangerous"
-        name="delete"
-        handleHover={true}
-        size="normal"
-        onClick={removeCurrentInvitation}
+      <TextInput
+        label="Email"
+        inputValue={email}
+        setInputValue={setEmail}
+        onKeyDown={(event) => {
+          if (
+            event.key === "Backspace" &&
+            removeCurrentInvitation &&
+            !email.length
+          ) {
+            removeCurrentInvitation();
+          }
+        }}
       />
 
-      <TextInput label="Email" inputValue={email} setInputValue={setEmail} />
-
       <div className={styles.selector}>
         <SingleSelector
           selectedOption={{ label: selectedRole, value: selectedRole }}
diff --git a/frontend/lib/components/ui/TextInput/TextInput.tsx b/frontend/lib/components/ui/TextInput/TextInput.tsx
index eaf5bb2a60a..ecc704eb8a1 100644
--- a/frontend/lib/components/ui/TextInput/TextInput.tsx
+++ b/frontend/lib/components/ui/TextInput/TextInput.tsx
@@ -11,6 +11,7 @@ type TextInputProps = {
   onSubmit?: () => void;
   disabled?: boolean;
   crypted?: boolean;
+  onKeyDown?: (event: React.KeyboardEvent) => void;
 };
 
 export const TextInput = ({
@@ -22,6 +23,7 @@ export const TextInput = ({
   onSubmit,
   disabled,
   crypted,
+  onKeyDown,
 }: TextInputProps): JSX.Element => {
   return (
     <div
@@ -41,6 +43,7 @@ export const TextInput = ({
           if (e.key === "Enter" && onSubmit) {
             onSubmit();
           }
+          onKeyDown?.(e);
         }}
       />
       {!simple && iconName && (