diff --git a/web/components/project/send-project-invitation-modal.tsx b/web/components/project/send-project-invitation-modal.tsx
index 09643dc8b..753a184b4 100644
--- a/web/components/project/send-project-invitation-modal.tsx
+++ b/web/components/project/send-project-invitation-modal.tsx
@@ -142,8 +142,9 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
       if (!memberDetails?.member) return;
       return {
         value: `${memberDetails?.member.id}`,
-        query: `${memberDetails?.member.first_name} ${memberDetails?.member
-          .last_name} ${memberDetails?.member.display_name.toLowerCase()}`,
+        query: `${memberDetails?.member.first_name} ${
+          memberDetails?.member.last_name
+        } ${memberDetails?.member.display_name.toLowerCase()}`,
         content: (
           <div className="flex w-full items-center gap-2">
             <div className="flex-shrink-0 pt-0.5">
@@ -203,8 +204,11 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
 
                     <div className="mb-3 space-y-4">
                       {fields.map((field, index) => (
-                        <div key={field.id} className="group mb-1 grid grid-cols-12 items-start gap-x-4 text-sm">
-                          <div className="col-span-7 flex flex-col gap-1">
+                        <div
+                          key={field.id}
+                          className="group mb-1 grid grid-cols-6  sm:grid-cols-12 items-start gap-x-4 text-sm"
+                        >
+                          <div className="col-span-4 sm:col-span-10 flex flex-col gap-1">
                             <Controller
                               control={control}
                               name={`members.${index}.member_id`}
@@ -246,7 +250,7 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
                             )}
                           </div>
 
-                          <div className="col-span-5 flex items-center justify-between gap-2">
+                          <div className="col-span-2 sm:col-span-2 flex items-center justify-between gap-2">
                             <div className="flex w-full flex-col gap-1">
                               <Controller
                                 name={`members.${index}.role`}
@@ -284,8 +288,9 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
                                 </span>
                               )}
                             </div>
-                            <div className="flex-item flex w-6">
-                              {fields.length > 1 && (
+
+                            {fields.length > 1 && (
+                              <div className="flex-item flex w-6">
                                 <button
                                   type="button"
                                   className="place-items-center self-center rounded"
@@ -293,8 +298,8 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
                                 >
                                   <X className="h-4 w-4 text-custom-text-200" />
                                 </button>
-                              )}
-                            </div>
+                              </div>
+                            )}
                           </div>
                         </div>
                       ))}
diff --git a/web/components/workspace/send-workspace-invitation-modal.tsx b/web/components/workspace/send-workspace-invitation-modal.tsx
index fdcdbc66e..2d1969db2 100644
--- a/web/components/workspace/send-workspace-invitation-modal.tsx
+++ b/web/components/workspace/send-workspace-invitation-modal.tsx
@@ -121,8 +121,8 @@ export const SendWorkspaceInvitationModal: React.FC<Props> = observer((props) =>
 
                     <div className="mb-3 space-y-4">
                       {fields.map((field, index) => (
-                        <div key={field.id} className="group relative grid grid-cols-11 items-start gap-4">
-                          <div className="col-span-7">
+                        <div key={field.id} className="group relative grid grid-cols-12 items-start gap-4">
+                          <div className="col-span-9">
                             <Controller
                               control={control}
                               name={`emails.${index}.email`}