diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/EditVaultModal.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/EditVaultModal.tsx
index ebdfaea1f..f1df6da79 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/EditVaultModal.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/EditVaultModal.tsx
@@ -225,9 +225,6 @@ const EditVaultModalContent: FunctionComponent<{
     setShouldShowIconPicker((shouldShow) => !shouldShow)
   }, [])
 
-  const canShowMembers =
-    members.length > 0 && !members.every((member) => application.vaultUsers.isVaultUserOwner(member))
-
   const advancedOptionsDisclosure = useDisclosureStore()
   const isShowingAdvancedOptions = advancedOptionsDisclosure.useState('open')
 
@@ -299,12 +296,12 @@ const EditVaultModalContent: FunctionComponent<{
             </div>
           ) : (
             <>
-              {canShowMembers && (
+              {members.length > 0 && (
                 <VaultModalMembers
                   vault={existingVault}
                   members={members}
                   onChange={reloadVaultInfo}
-                  isAdmin={isAdmin}
+                  isCurrentUserAdmin={isAdmin}
                 />
               )}
               {invites.length > 0 && (
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/VaultModalInvites.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/VaultModalInvites.tsx
index b7ebb937f..ba3481adc 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/VaultModalInvites.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/VaultModalInvites.tsx
@@ -24,33 +24,39 @@ export const VaultModalInvites = ({
   )
 
   return (
-    <div className="mb-3">
+    <div>
       <div className="mb-3 text-lg">Pending Invites</div>
-      <div className="flex flex-col gap-3">
+      <div className="space-y-3.5">
         {invites.map((invite) => {
           const contact = application.contacts.findContactForInvite(invite)
           return (
-            <div key={invite.uuid} className="flex gap-3.5 rounded-lg px-3.5 py-2.5 border border-border shadow">
-              <Icon type="user" size="custom" className="mt-2 h-5.5 w-5.5 flex-shrink-0" />
-              <div className="flex flex-col gap-2 py-1.5">
-                <div className="flex items-center gap-2 overflow-hidden text-ellipsis text-base font-bold">
-                  <span>{contact?.name || invite.user_uuid}</span>
-                  {contact ? (
-                    <div className="flex items-center bg-success text-success-contrast rounded gap-1 text-xs px-1 py-0.5">
-                      <Icon type="check-circle" size="small" />
-                      Trusted
-                    </div>
-                  ) : (
-                    <div className="flex items-center bg-danger text-danger-contrast rounded gap-1 text-xs px-1 pr-1.5 py-0.5">
-                      <Icon type="clear-circle-filled" size="small" />
-                      Untrusted
-                    </div>
-                  )}
-                </div>
-                {isAdmin && (
-                  <Button label="Cancel Invite" className="mt-1 mr-3 text-xs" onClick={() => deleteInvite(invite)} />
+            <div
+              key={invite.uuid}
+              className="grid grid-cols-[auto,1fr] text-base font-medium [column-gap:0.65rem] [row-gap:0.5rem] md:text-sm"
+            >
+              <Icon type="user" className="col-start-1 col-end-2 place-self-center" />
+              <div className="flex items-center gap-2 overflow-hidden text-ellipsis text-base font-bold">
+                <span>{contact?.name || invite.user_uuid}</span>
+                {contact ? (
+                  <div className="flex items-center gap-1 rounded bg-success px-1 py-0.5 text-xs text-success-contrast">
+                    <Icon type="check-circle" size="small" />
+                    Trusted
+                  </div>
+                ) : (
+                  <div className="flex items-center gap-1 rounded bg-danger px-1 py-0.5 pr-1.5 text-xs text-danger-contrast">
+                    <Icon type="clear-circle-filled" size="small" />
+                    Untrusted
+                  </div>
                 )}
               </div>
+              {isAdmin && (
+                <Button
+                  label="Cancel Invite"
+                  className="col-start-2 row-start-2"
+                  onClick={() => deleteInvite(invite)}
+                  small
+                />
+              )}
             </div>
           )
         })}
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/VaultModalMembers.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/VaultModalMembers.tsx
index a7b12aedc..728ebe63a 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/VaultModalMembers.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/VaultModalMembers.tsx
@@ -6,13 +6,13 @@ import Button from '@/Components/Button/Button'
 
 export const VaultModalMembers = ({
   members,
-  isAdmin,
+  isCurrentUserAdmin,
   vault,
   onChange,
 }: {
   members: SharedVaultUserServerHash[]
   vault: VaultListingInterface
-  isAdmin: boolean
+  isCurrentUserAdmin: boolean
   onChange: () => void
 }) => {
   const application = useApplication()
@@ -28,44 +28,44 @@ export const VaultModalMembers = ({
   )
 
   return (
-    <div className="mb-3">
+    <div>
       <div className="mb-3 text-lg">Vault Members</div>
-      {members.map((member) => {
-        if (application.vaultUsers.isVaultUserOwner(member)) {
-          return null
-        }
-
-        const contact = application.contacts.findContactForServerUser(member)
-        return (
-          <div
-            key={contact?.uuid || member.user_uuid}
-            className="bg-gray-100 flex flex-row gap-3.5 rounded-lg px-3.5 py-2.5 shadow-md"
-          >
-            <Icon type={'user'} size="custom" className="mt-2.5 h-5.5 w-5.5 flex-shrink-0" />
-            <div className="flex flex-col gap-2 py-1.5">
-              <span className="mr-auto overflow-hidden text-ellipsis text-base font-bold">
-                {contact?.name || member.user_uuid}
-              </span>
-              {contact && <span className="text-info">Trusted</span>}
-              {!contact && (
-                <div>
-                  <span className="text-base">Untrusted</span>
-                </div>
-              )}
-
-              {isAdmin && (
-                <div className="mt-2.5 flex flex-row">
-                  <Button
-                    label="Remove From Vault"
-                    className={'mr-3 text-xs'}
-                    onClick={() => removeMemberFromVault(member)}
-                  />
-                </div>
+      <div className="space-y-3.5">
+        {members.map((member) => {
+          const isMemberVaultOwner = application.vaultUsers.isVaultUserOwner(member)
+          const contact = application.contacts.findContactForServerUser(member)
+          return (
+            <div
+              key={contact?.uuid || member.user_uuid}
+              className="grid grid-cols-[auto,1fr] text-base font-medium [column-gap:0.65rem] [row-gap:0.5rem] md:text-sm"
+            >
+              <Icon type="user" className="col-start-1 col-end-2 place-self-center" />
+              <div className="flex items-center gap-2 overflow-hidden text-ellipsis text-base font-bold">
+                <span>{contact?.name || member.user_uuid}</span>
+                {contact ? (
+                  <div className="flex items-center gap-1 rounded bg-success px-1 py-0.5 text-xs text-success-contrast">
+                    <Icon type="check-circle" size="small" />
+                    Trusted
+                  </div>
+                ) : (
+                  <div className="flex items-center gap-1 rounded bg-danger px-1 py-0.5 pr-1.5 text-xs text-danger-contrast">
+                    <Icon type="clear-circle-filled" size="small" />
+                    Untrusted
+                  </div>
+                )}
+              </div>
+              {isCurrentUserAdmin && !isMemberVaultOwner && (
+                <Button
+                  className="col-start-2 row-start-2"
+                  label="Remove From Vault"
+                  onClick={() => removeMemberFromVault(member)}
+                  small
+                />
               )}
             </div>
-          </div>
-        )
-      })}
+          )
+        })}
+      </div>
     </div>
   )
 }