diff --git a/app/scenes/CollectionPermissions/components/MemberListItem.tsx b/app/scenes/CollectionPermissions/components/MemberListItem.tsx
index 50d2add63..306448712 100644
--- a/app/scenes/CollectionPermissions/components/MemberListItem.tsx
+++ b/app/scenes/CollectionPermissions/components/MemberListItem.tsx
@@ -1,3 +1,4 @@
+import { observer } from "mobx-react";
 import * as React from "react";
 import { Trans, useTranslation } from "react-i18next";
 import styled from "styled-components";
@@ -103,4 +104,4 @@ const Select = styled(InputSelect)`
   }
 ` as React.ComponentType<SelectProps>;
 
-export default MemberListItem;
+export default observer(MemberListItem);
diff --git a/app/scenes/CollectionPermissions/components/UserListItem.tsx b/app/scenes/CollectionPermissions/components/UserListItem.tsx
index 32a346863..925fea75a 100644
--- a/app/scenes/CollectionPermissions/components/UserListItem.tsx
+++ b/app/scenes/CollectionPermissions/components/UserListItem.tsx
@@ -1,3 +1,4 @@
+import { observer } from "mobx-react";
 import { PlusIcon } from "outline-icons";
 import * as React from "react";
 import { Trans, useTranslation } from "react-i18next";
@@ -45,4 +46,4 @@ const UserListItem = ({ user, onAdd, canEdit }: Props) => {
   );
 };
 
-export default UserListItem;
+export default observer(UserListItem);
diff --git a/app/scenes/GroupMembers/components/GroupMemberListItem.tsx b/app/scenes/GroupMembers/components/GroupMemberListItem.tsx
index 41245f886..f47058593 100644
--- a/app/scenes/GroupMembers/components/GroupMemberListItem.tsx
+++ b/app/scenes/GroupMembers/components/GroupMemberListItem.tsx
@@ -1,4 +1,6 @@
+import { observer } from "mobx-react";
 import * as React from "react";
+import { Trans, useTranslation } from "react-i18next";
 import User from "~/models/User";
 import Avatar from "~/components/Avatar";
 import Badge from "~/components/Badge";
@@ -15,20 +17,22 @@ type Props = {
 };
 
 const GroupMemberListItem = ({ user, onRemove, onAdd }: Props) => {
+  const { t } = useTranslation();
+
   return (
     <ListItem
       title={user.name}
       subtitle={
         <>
           {user.lastActiveAt ? (
-            <>
+            <Trans>
               Active <Time dateTime={user.lastActiveAt} /> ago
-            </>
+            </Trans>
           ) : (
-            "Never signed in"
+            t("Never signed in")
           )}
-          {user.isInvited && <Badge>Invited</Badge>}
-          {user.isAdmin && <Badge primary={user.isAdmin}>Admin</Badge>}
+          {user.isInvited && <Badge>{t("Invited")}</Badge>}
+          {user.isAdmin && <Badge primary={user.isAdmin}>{t("Admin")}</Badge>}
         </>
       }
       image={<Avatar src={user.avatarUrl} size={32} />}
@@ -37,7 +41,7 @@ const GroupMemberListItem = ({ user, onRemove, onAdd }: Props) => {
           {onRemove && <GroupMemberMenu onRemove={onRemove} />}
           {onAdd && (
             <Button onClick={onAdd} neutral>
-              Add
+              {t("Add")}
             </Button>
           )}
         </Flex>
@@ -46,4 +50,4 @@ const GroupMemberListItem = ({ user, onRemove, onAdd }: Props) => {
   );
 };
 
-export default GroupMemberListItem;
+export default observer(GroupMemberListItem);
diff --git a/app/scenes/GroupMembers/components/UserListItem.tsx b/app/scenes/GroupMembers/components/UserListItem.tsx
index de988c900..925fea75a 100644
--- a/app/scenes/GroupMembers/components/UserListItem.tsx
+++ b/app/scenes/GroupMembers/components/UserListItem.tsx
@@ -1,5 +1,7 @@
+import { observer } from "mobx-react";
 import { PlusIcon } from "outline-icons";
 import * as React from "react";
+import { Trans, useTranslation } from "react-i18next";
 import User from "~/models/User";
 import Avatar from "~/components/Avatar";
 import Badge from "~/components/Badge";
@@ -14,6 +16,8 @@ type Props = {
 };
 
 const UserListItem = ({ user, onAdd, canEdit }: Props) => {
+  const { t } = useTranslation();
+
   return (
     <ListItem
       title={user.name}
@@ -21,20 +25,20 @@ const UserListItem = ({ user, onAdd, canEdit }: Props) => {
       subtitle={
         <>
           {user.lastActiveAt ? (
-            <>
+            <Trans>
               Active <Time dateTime={user.lastActiveAt} /> ago
-            </>
+            </Trans>
           ) : (
-            "Never signed in"
+            t("Never signed in")
           )}
-          {user.isInvited && <Badge>Invited</Badge>}
-          {user.isAdmin && <Badge primary={user.isAdmin}>Admin</Badge>}
+          {user.isInvited && <Badge>{t("Invited")}</Badge>}
+          {user.isAdmin && <Badge primary={user.isAdmin}>{t("Admin")}</Badge>}
         </>
       }
       actions={
         canEdit ? (
           <Button type="button" onClick={onAdd} icon={<PlusIcon />} neutral>
-            Add
+            {t("Add")}
           </Button>
         ) : undefined
       }
@@ -42,4 +46,4 @@ const UserListItem = ({ user, onAdd, canEdit }: Props) => {
   );
 };
 
-export default UserListItem;
+export default observer(UserListItem);
diff --git a/app/scenes/Settings/components/UserListItem.tsx b/app/scenes/Settings/components/UserListItem.tsx
index 2208d979e..a686b0f5b 100644
--- a/app/scenes/Settings/components/UserListItem.tsx
+++ b/app/scenes/Settings/components/UserListItem.tsx
@@ -1,5 +1,6 @@
 import { observer } from "mobx-react";
 import * as React from "react";
+import { Trans, useTranslation } from "react-i18next";
 import styled from "styled-components";
 import User from "~/models/User";
 import Avatar from "~/components/Avatar";
@@ -13,34 +14,31 @@ type Props = {
   showMenu: boolean;
 };
 
-@observer
-class UserListItem extends React.Component<Props> {
-  render() {
-    const { user, showMenu } = this.props;
+const UserListItem = ({ user, showMenu }: Props) => {
+  const { t } = useTranslation();
 
-    return (
-      <ListItem
-        title={<Title>{user.name}</Title>}
-        image={<Avatar src={user.avatarUrl} size={32} />}
-        subtitle={
-          <>
-            {user.email ? `${user.email} · ` : undefined}
-            {user.lastActiveAt ? (
-              <>
-                Active <Time dateTime={user.lastActiveAt} /> ago
-              </>
-            ) : (
-              "Invited"
-            )}
-            {user.isAdmin && <Badge primary={user.isAdmin}>Admin</Badge>}
-            {user.isSuspended && <Badge>Suspended</Badge>}
-          </>
-        }
-        actions={showMenu ? <UserMenu user={user} /> : undefined}
-      />
-    );
-  }
-}
+  return (
+    <ListItem
+      title={<Title>{user.name}</Title>}
+      image={<Avatar src={user.avatarUrl} size={32} />}
+      subtitle={
+        <>
+          {user.email ? `${user.email} · ` : undefined}
+          {user.lastActiveAt ? (
+            <Trans>
+              Active <Time dateTime={user.lastActiveAt} /> ago
+            </Trans>
+          ) : (
+            t("Invited")
+          )}
+          {user.isAdmin && <Badge primary={user.isAdmin}>{t("Admin")}</Badge>}
+          {user.isSuspended && <Badge>{t("Suspended")}</Badge>}
+        </>
+      }
+      actions={showMenu ? <UserMenu user={user} /> : undefined}
+    />
+  );
+};
 
 const Title = styled.span`
   &:hover {
@@ -49,4 +47,4 @@ const Title = styled.span`
   }
 `;
 
-export default UserListItem;
+export default observer(UserListItem);