diff --git a/frontend-react/public/locales/en/translation.json b/frontend-react/public/locales/en/translation.json
index 7850488dd..4fa64514d 100644
--- a/frontend-react/public/locales/en/translation.json
+++ b/frontend-react/public/locales/en/translation.json
@@ -1411,5 +1411,62 @@
     "Number of placements": "Number of placements",
     "Best placement / power": "Best placement / power",
     "noPlacementsPrompt": "If you have reached Top 500 in a <1>finished</1> X Rank season you can have it displayed here! Make sure your Twitter account is verified on Discord to get it showing on your sendou.ink profile and then contact Sendou#0043 on Discord with your in-game nick. Once set up new results are added automatically and no further action is needed unless you change your name on Twitter."
+  },
+  "freeagents": {
+    "loginPrompt": "Log in to make your own free agent post and start matching!",
+    "pleaseWaitPrompt": "You need to wait a week after deleting your old free agent post before making a new one",
+    "Hide filters": "Hide filters",
+    "Show filters": "Show filters",
+    "Playstyle": "Playstyle",
+    "Region": "Region",
+    "Any": "Any",
+    "Frontline/Slayer": "Frontline/Slayer",
+    "Midline/Support": "Midline/Support",
+    "Backline/Anchor": "Backline/Anchor",
+    "Europe": "Europe",
+    "The Americas": "The Americas",
+    "Oceania": "Oceania",
+    "Other": "Other",
+    "Weapon": "Weapon",
+    "Edit free agent post": "Edit free agent post",
+    "New free agent post": "New free agent post",
+    "MATCHES": "MATCHES",
+    "youHaveAMatch": "You have a match with <1>{{matchFullName}}</1>! Contact them to see if you can get a team going",
+    "getLiking": "This match is revealed when you like them back!",
+    "getLiking_plural": "These matches are revealed when you like them back!",
+    "No free agents found with the current filter": "No free agents found with the current filter",
+    "No more free agents to show": "No more free agents to show",
+    "Return to the top": "Return to the top",
+    "Can VC": "Can VC",
+    "Can VC usually": "Can VC usually",
+    "Can VC sometimes": "Can VC sometimes",
+    "Can't VC": "Can't VC",
+    "Show more information": "Show more information",
+    "Activity": "Activity",
+    "Looking for": "Looking for",
+    "Past experience": "Past experience",
+    "Description": "Description",
+    "Free agent post added": "Free agent post added",
+    "Free agent post edited": "Free agent post edited",
+    "Free agent post deleted": "Free agent post deleted",
+    "Adding a new free agent post": "Adding a new free agent post",
+    "Editing a free agent post": "Editing a free agent post",
+    "Delete free agent post": "Delete free agent post",
+    "deleteNotif": "Note that if you decide to delete your post you need to wait a week before posting a new one.",
+    "Confirm deletion": "Confirm deletion",
+    "theyAreSynced": "Profile picture, Discord name, Twitter user, weapon pool and Top 500 history are automatically synced up with your profile. Also please note that the post automatically sent to Discord can't be edited afterwards so you want to set these before making a post.",
+    "Playstyles": "Playstyles",
+    "Required field": "Required field",
+    "Value too long": "Value too long",
+    "Free agent has reached Top 500 in X Rank": "Free agent has reached Top 500 in X Rank",
+    "Can you voice chat?": "Can you voice chat?",
+    "Yes": "Yes",
+    "Usually": "Usually",
+    "Sometimes": "Sometimes",
+    "No": "No",
+    "Past competitive experience": "Past competitive experience",
+    "What is your activity like on a typical week?": "What is your activity like on a typical week?",
+    "What are you looking from a team?": "What are you looking from a team?",
+    "Free word": "Free word"
   }
 }
diff --git a/frontend-react/src/assets/questionMark.jpg b/frontend-react/src/assets/questionMark.jpg
new file mode 100644
index 000000000..816e8be72
Binary files /dev/null and b/frontend-react/src/assets/questionMark.jpg differ
diff --git a/frontend-react/src/components/elements/RadioGroup.tsx b/frontend-react/src/components/elements/RadioGroup.tsx
index bfe8d0bc1..0966dc9c1 100644
--- a/frontend-react/src/components/elements/RadioGroup.tsx
+++ b/frontend-react/src/components/elements/RadioGroup.tsx
@@ -3,7 +3,7 @@ import { RadioGroup as ChakraRadioGroup, Radio, Box } from "@chakra-ui/core"
 import MyThemeContext from "../../themeContext"
 
 interface RadioGroupProps {
-  options: string[]
+  options: { label: string; value: string }[]
   value: string
   label?: string
   setValue: (value: any) => void
@@ -29,14 +29,14 @@ const RadioGroup: React.FC<RadioGroupProps> = ({
         onChange={(e) => setValue(e.target.value)}
         value={value}
       >
-        {options.map((option) => (
+        {options.map(({ label, value }) => (
           <Radio
-            key={option}
+            key={value}
             variantColor={themeColor}
-            value={option}
-            isChecked={value === option}
+            value={value}
+            isChecked={value === value}
           >
-            {option}
+            {label}
           </Radio>
         ))}
       </ChakraRadioGroup>
diff --git a/frontend-react/src/components/elements/Select.tsx b/frontend-react/src/components/elements/Select.tsx
index ed1a1247e..e1b2913e3 100644
--- a/frontend-react/src/components/elements/Select.tsx
+++ b/frontend-react/src/components/elements/Select.tsx
@@ -115,7 +115,7 @@ const Select: React.FC<SelectProps> = ({
   }
 
   return (
-    <Box>
+    <Box zIndex={99999999}>
       {label && <Label required={required}>{label}</Label>}
       <ReactSelect
         className="basic-single"
@@ -180,6 +180,7 @@ const Select: React.FC<SelectProps> = ({
               color: getOptionColor(isFocused),
             }
           },
+          menu: (styles) => ({ ...styles, zIndex: 999 }),
         }}
       />
     </Box>
diff --git a/frontend-react/src/components/freeagents/FAPostModal.tsx b/frontend-react/src/components/freeagents/FAPostModal.tsx
index 1f0ba6e76..6219c990b 100644
--- a/frontend-react/src/components/freeagents/FAPostModal.tsx
+++ b/frontend-react/src/components/freeagents/FAPostModal.tsx
@@ -26,6 +26,7 @@ import { UPDATE_FREE_AGENT_POST } from "../../graphql/mutations/updateFreeAgentP
 import { HIDE_FREE_AGENT_POST } from "../../graphql/mutations/hideFreeAgentPost"
 import Alert from "../elements/Alert"
 import { FREE_AGENT_MATCHES } from "../../graphql/queries/freeAgentMatches"
+import { useTranslation } from "react-i18next"
 
 interface FAPostModalProps {
   closeModal: () => void
@@ -33,6 +34,7 @@ interface FAPostModalProps {
 }
 
 const FAPostModal: React.FC<FAPostModalProps> = ({ closeModal, post }) => {
+  const { t } = useTranslation()
   const [form, setForm] = useState<Partial<AddFreeAgentPostVars>>(
     post ? post : {}
   )
@@ -49,7 +51,7 @@ const FAPostModal: React.FC<FAPostModalProps> = ({ closeModal, post }) => {
     onCompleted: (data) => {
       closeModal()
       toast({
-        description: `Free agent post added`,
+        description: t("freeagents;Free agent post added"),
         position: "top-right",
         status: "success",
         duration: 10000,
@@ -57,7 +59,7 @@ const FAPostModal: React.FC<FAPostModalProps> = ({ closeModal, post }) => {
     },
     onError: (error) => {
       toast({
-        title: "An error occurred",
+        title: t("users;An error occurred"),
         description: error.message,
         position: "top-right",
         status: "error",
@@ -75,7 +77,7 @@ const FAPostModal: React.FC<FAPostModalProps> = ({ closeModal, post }) => {
     onCompleted: (data) => {
       closeModal()
       toast({
-        description: `Free agent post edited`,
+        description: t("freeagents;Free agent post edited"),
         position: "top-right",
         status: "success",
         duration: 10000,
@@ -83,7 +85,7 @@ const FAPostModal: React.FC<FAPostModalProps> = ({ closeModal, post }) => {
     },
     onError: (error) => {
       toast({
-        title: "An error occurred",
+        title: t("users;An error occurred"),
         description: error.message,
         position: "top-right",
         status: "error",
@@ -101,7 +103,7 @@ const FAPostModal: React.FC<FAPostModalProps> = ({ closeModal, post }) => {
     onCompleted: (data) => {
       closeModal()
       toast({
-        description: `Free agent post deleted`,
+        description: t("freeagents;Free agent post deleted"),
         position: "top-right",
         status: "success",
         duration: 10000,
@@ -109,7 +111,7 @@ const FAPostModal: React.FC<FAPostModalProps> = ({ closeModal, post }) => {
     },
     onError: (error) => {
       toast({
-        title: "An error occurred",
+        title: t("users;An error occurred"),
         description: error.message,
         position: "top-right",
         status: "error",
@@ -149,8 +151,8 @@ const FAPostModal: React.FC<FAPostModalProps> = ({ closeModal, post }) => {
     <Modal
       title={
         actionType === "NEW"
-          ? "Adding a new free agent post"
-          : "Editing a free agent post"
+          ? t("freeagents;Adding a new free agent post")
+          : t("freeagents;Editing a free agent post")
       }
       closeModal={closeModal}
     >
@@ -162,41 +164,33 @@ const FAPostModal: React.FC<FAPostModalProps> = ({ closeModal, post }) => {
           cursor="pointer"
           onClick={() => setDeleting(true)}
         >
-          Delete free agent post
+          {t("freeagents;Delete free agent post")}
         </Box>
       )}
       {deleting && (
         <>
-          <Box color={grayWithShade}>
-            Note that if you decide to delete your post you need to wait a week
-            before posting a new one.
-          </Box>
+          <Box color={grayWithShade}>{t("freeagents;deleteNotif")}</Box>
           <Flex flexWrap="wrap" mt="1em">
             <Box mr="1em">
               <Button onClick={() => hideFreeAgentPost()} loading={hideLoading}>
-                Confirm deletion
+                {t("freeagents;Confirm deletion")}
               </Button>
             </Box>
             <Button outlined onClick={() => setDeleting(false)}>
-              Cancel
+              {t("users;Cancel")}
             </Button>
           </Flex>
         </>
       )}
       {actionType === "NEW" && (
-        <Alert status="info">
-          Profile picture, Discord name, Twitter user, weapon pool and Top 500
-          history are automatically synced up with your profile. Also please
-          note that the post automatically sent to Discord can't be edited
-          afterwards so you want to set these before making a post.
-        </Alert>
+        <Alert status="info">{t("freeagents;theyAreSynced")}</Alert>
       )}
       <FormControl
         isRequired
         isInvalid={showErrors && form.playstyles?.length === 0}
         mt="1em"
       >
-        <FormLabel htmlFor="playstyles">Playstyles</FormLabel>
+        <FormLabel htmlFor="playstyles">{t("freeagents;Playstyles")}</FormLabel>
         <CheckboxGroup
           id="playstyles"
           variantColor={themeColor}
@@ -207,15 +201,21 @@ const FAPostModal: React.FC<FAPostModalProps> = ({ closeModal, post }) => {
             })
           }
         >
-          <Checkbox value="FRONTLINE">Frontline/Slayer</Checkbox>
-          <Checkbox value="MIDLINE">Midline/Support</Checkbox>
-          <Checkbox value="BACKLINE">Backline/Anchor</Checkbox>
+          <Checkbox value="FRONTLINE">
+            {t("freeagents;Frontline/Slayer")}
+          </Checkbox>
+          <Checkbox value="MIDLINE">{t("freeagents;Midline/Support")}</Checkbox>
+          <Checkbox value="BACKLINE">
+            {t("freeagents;Backline/Anchor")}
+          </Checkbox>
         </CheckboxGroup>
-        <FormErrorMessage>Required field</FormErrorMessage>
+        <FormErrorMessage>{t("freeagents;Required field")}</FormErrorMessage>
       </FormControl>
 
       <FormControl isRequired isInvalid={showErrors && !form.can_vc} mt="1em">
-        <FormLabel htmlFor="canVc">Can you voice chat?</FormLabel>
+        <FormLabel htmlFor="canVc">
+          {t("freeagents;Can you voice chat?")}
+        </FormLabel>
         <RadioGroup
           id="canVc"
           variantColor={themeColor}
@@ -226,12 +226,12 @@ const FAPostModal: React.FC<FAPostModalProps> = ({ closeModal, post }) => {
             })
           }
         >
-          <Radio value="YES">Yes</Radio>
-          <Radio value="USUALLY">Usually</Radio>
-          <Radio value="SOMETIMES">Sometimes</Radio>
-          <Radio value="NO">No</Radio>
+          <Radio value="YES">{t("freeagents;Yes")}</Radio>
+          <Radio value="USUALLY">{t("freeagents;Usually")}</Radio>
+          <Radio value="SOMETIMES">{t("freeagents;Sometimes")}</Radio>
+          <Radio value="NO">{t("freeagents;No")}</Radio>
         </RadioGroup>
-        <FormErrorMessage>Required field</FormErrorMessage>
+        <FormErrorMessage>{t("freeagents;Required field")}</FormErrorMessage>
       </FormControl>
 
       <FormControl
@@ -243,7 +243,7 @@ const FAPostModal: React.FC<FAPostModalProps> = ({ closeModal, post }) => {
         mt="1em"
       >
         <FormLabel htmlFor="pastExperience">
-          Past competitive experience
+          {t("freeagents;Past competitive experience")}
         </FormLabel>
         <TextArea
           id="pastExperience"
@@ -253,7 +253,7 @@ const FAPostModal: React.FC<FAPostModalProps> = ({ closeModal, post }) => {
           value={form.past_experience ?? ""}
           limit={100}
         />
-        <FormErrorMessage>Value too long</FormErrorMessage>
+        <FormErrorMessage>{t("freeagents;Value too long")}</FormErrorMessage>
       </FormControl>
 
       <FormControl
@@ -261,7 +261,7 @@ const FAPostModal: React.FC<FAPostModalProps> = ({ closeModal, post }) => {
         mt="1em"
       >
         <FormLabel htmlFor="activity">
-          What is your activity like on a typical week?
+          {t("freeagents;What is your activity like on a typical week?")}
         </FormLabel>
         <TextArea
           id="activity"
@@ -271,7 +271,7 @@ const FAPostModal: React.FC<FAPostModalProps> = ({ closeModal, post }) => {
           value={form.activity ?? ""}
           limit={100}
         />
-        <FormErrorMessage>Value too long</FormErrorMessage>
+        <FormErrorMessage>{t("freeagents;Value too long")}</FormErrorMessage>
       </FormControl>
 
       <FormControl
@@ -281,7 +281,7 @@ const FAPostModal: React.FC<FAPostModalProps> = ({ closeModal, post }) => {
         mt="1em"
       >
         <FormLabel htmlFor="lookingFor">
-          What are you looking from a team?
+          {t("freeagents;What are you looking from a team?")}
         </FormLabel>
         <TextArea
           id="lookingFor"
@@ -291,7 +291,7 @@ const FAPostModal: React.FC<FAPostModalProps> = ({ closeModal, post }) => {
           value={form.looking_for ?? ""}
           limit={100}
         />
-        <FormErrorMessage>Value too long</FormErrorMessage>
+        <FormErrorMessage>{t("freeagents;Value too long")}</FormErrorMessage>
       </FormControl>
 
       <FormControl
@@ -300,7 +300,7 @@ const FAPostModal: React.FC<FAPostModalProps> = ({ closeModal, post }) => {
         }
         mt="1em"
       >
-        <FormLabel htmlFor="lookingFor">Free word</FormLabel>
+        <FormLabel htmlFor="lookingFor">{t("freeagents;Free word")}</FormLabel>
         <TextArea
           id="lookingFor"
           setValue={(value: string) =>
@@ -310,7 +310,7 @@ const FAPostModal: React.FC<FAPostModalProps> = ({ closeModal, post }) => {
           height="150px"
           limit={1000}
         />
-        <FormErrorMessage>Value too long</FormErrorMessage>
+        <FormErrorMessage>{t("freeagents;Value too long")}</FormErrorMessage>
       </FormControl>
 
       <Flex flexWrap="wrap" mt="1em">
@@ -319,11 +319,11 @@ const FAPostModal: React.FC<FAPostModalProps> = ({ closeModal, post }) => {
             onClick={() => handleSubmit()}
             loading={loading || editLoading}
           >
-            Submit
+            {t("users;Submit")}
           </Button>
         </Box>
         <Button outlined onClick={() => closeModal()}>
-          Cancel
+          {t("users;Cancel")}
         </Button>
       </Flex>
     </Modal>
diff --git a/frontend-react/src/components/freeagents/FreeAgentCard.tsx b/frontend-react/src/components/freeagents/FreeAgentCard.tsx
index 9be379dbd..6e7347216 100644
--- a/frontend-react/src/components/freeagents/FreeAgentCard.tsx
+++ b/frontend-react/src/components/freeagents/FreeAgentCard.tsx
@@ -86,10 +86,10 @@ const FreeAgentCard: React.FC<FreeAgentCardProps> = ({
           {discord_user.top500 && (
             <Image
               src={top500}
-              alt="x rank top 500 logo"
+              alt={t("freeagents;Free agent has reached Top 500 in X Rank")}
               height="40px"
               width="auto"
-              title="Free agent has reached Top 500 in X Rank"
+              title={t("freeagents;Free agent has reached Top 500 in X Rank")}
             />
           )}
         </Box>
@@ -161,7 +161,7 @@ const FreeAgentCard: React.FC<FreeAgentCardProps> = ({
         {canBeExpanded && (
           <IconButton
             variant="ghost"
-            aria-label="More information"
+            aria-label={t("freeagents;Show more information")}
             isRound
             size="lg"
             icon={expanded ? FaMinus : FaPlus}
@@ -174,7 +174,7 @@ const FreeAgentCard: React.FC<FreeAgentCardProps> = ({
           {post.activity && (
             <Box>
               <Heading size="md" color={themeColorWithShade}>
-                Activity
+                {t("freeagents;Activity")}
               </Heading>
               {post.activity}
             </Box>
@@ -182,7 +182,7 @@ const FreeAgentCard: React.FC<FreeAgentCardProps> = ({
           {post.looking_for && (
             <Box mt={post.activity ? "1em" : undefined}>
               <Heading size="md" color={themeColorWithShade}>
-                Looking for
+                {t("freeagents;Looking for")}
               </Heading>
               {post.looking_for}
             </Box>
@@ -190,7 +190,7 @@ const FreeAgentCard: React.FC<FreeAgentCardProps> = ({
           {post.past_experience && (
             <Box mt={post.activity || post.looking_for ? "1em" : undefined}>
               <Heading size="md" color={themeColorWithShade}>
-                Past experience
+                {t("freeagents;Past experience")}
               </Heading>
               {post.past_experience}
             </Box>
@@ -204,7 +204,7 @@ const FreeAgentCard: React.FC<FreeAgentCardProps> = ({
               }
             >
               <Heading size="md" color={themeColorWithShade}>
-                Description
+                {t("freeagents;Description")}
               </Heading>
               {post.description}
             </Box>
diff --git a/frontend-react/src/components/freeagents/FreeAgentsPage.tsx b/frontend-react/src/components/freeagents/FreeAgentsPage.tsx
index 62fbc9b3a..231d4cecb 100644
--- a/frontend-react/src/components/freeagents/FreeAgentsPage.tsx
+++ b/frontend-react/src/components/freeagents/FreeAgentsPage.tsx
@@ -27,6 +27,7 @@ import {
 } from "../../graphql/queries/freeAgentMatches"
 import Matches from "./Matches"
 import Alert from "../elements/Alert"
+import { useTranslation, Trans } from "react-i18next"
 
 const playstyleToEnum = {
   "Frontline/Slayer": "FRONTLINE",
@@ -35,6 +36,7 @@ const playstyleToEnum = {
 } as const
 
 const FreeAgentsPage: React.FC<RouteComponentProps> = () => {
+  const { t } = useTranslation()
   const [weapon, setWeapon] = useState<Weapon | null>(null)
   const [showFilters, setShowFilters] = useState(false)
   const [showModal, setShowModal] = useState(false)
@@ -69,8 +71,8 @@ const FreeAgentsPage: React.FC<RouteComponentProps> = () => {
 
   const buttonText =
     ownFAPost && !ownFAPost.hidden
-      ? "Edit free agent post"
-      : "New free agent post"
+      ? t("freeagents;Edit free agent post")
+      : t("freeagents;New free agent post")
 
   const altWeaponMap = new Map([
     ["Splattershot", "Hero Shot Replica"],
@@ -140,7 +142,7 @@ const FreeAgentsPage: React.FC<RouteComponentProps> = () => {
       return (
         <Box maxW="300px">
           <Alert status="info" mt="0">
-            Log in to make your own free agent post and start matching!
+            {t("freeagents;loginPrompt")}
           </Alert>
         </Box>
       )
@@ -151,8 +153,7 @@ const FreeAgentsPage: React.FC<RouteComponentProps> = () => {
         return (
           <Box maxW="300px">
             <Alert status="info" mt="0">
-              You need to wait a week after deleting your old free agent post
-              before making a new one
+              {t("freeagents;pleaseWaitPrompt")}
             </Alert>
           </Box>
         )
@@ -166,12 +167,16 @@ const FreeAgentsPage: React.FC<RouteComponentProps> = () => {
     )
   }
 
+  const name = userData!.user!.username
+  const disc = userData!.user!.discord_id
+  const matchFullName = `${name}#${disc}`
+
   return (
     <>
       <Helmet>
-        <title>Free Agents | sendou.ink</title>
+        <title>{t("navigation;Free Agents")} | sendou.ink</title>
       </Helmet>
-      <PageHeader title="Free Agents" />
+      <PageHeader title={t("navigation;Free Agents")} />
       {showModal && (
         <FAPostModal
           closeModal={() => setShowModal(false)}
@@ -181,7 +186,9 @@ const FreeAgentsPage: React.FC<RouteComponentProps> = () => {
       <Flex justifyContent="space-between" flexWrap="wrap">
         <Box m="0.5em">
           <Button icon={FaFilter} onClick={() => setShowFilters(!showFilters)}>
-            {showFilters ? "Hide filters" : "Show filters"}
+            {showFilters
+              ? t("freeagents;Hide filters")
+              : t("freeagents;Show filters")}
           </Button>
         </Box>
         {getTopRightContent()}
@@ -191,26 +198,41 @@ const FreeAgentsPage: React.FC<RouteComponentProps> = () => {
           <RadioGroup
             value={playstyle}
             setValue={setPlaystyle}
-            label="Filter by playstyle"
+            label={t("freeagents;Playstyle")}
             options={[
-              "Any",
-              "Frontline/Slayer",
-              "Midline/Support",
-              "Backline/Anchor",
+              { value: "Any", label: t("freeagents;Any") },
+              {
+                value: "Frontline/Slayer",
+                label: t("freeagents;Frontline/Slayer"),
+              },
+              {
+                value: "Midline/Support",
+                label: t("freeagents;Midline/Support"),
+              },
+              {
+                value: "Backline/Anchor",
+                label: t("freeagents;Backline/Anchor"),
+              },
             ]}
-          />
+          ></RadioGroup>
         </Box>
         <Box maxW="600px" my="1em">
           <RadioGroup
             value={region}
             setValue={setRegion}
-            label="Filter by region"
-            options={["Any", "Europe", "The Americas", "Oceania", "Other"]}
+            label={t("freeagents;Region")}
+            options={[
+              { value: "Any", label: t("freeagents;Any") },
+              { value: "Europe", label: t("freeagents;Europe") },
+              { value: "The Americas", label: t("freeagents;The Americas") },
+              { value: "Oceania", label: t("freeagents;Oceania") },
+              { value: "Other", label: t("freeagents;Other") },
+            ]}
           />
         </Box>
         <Box maxW="600px" my="1em">
           <WeaponSelector
-            label="Filter by weapon"
+            label="Weapon"
             value={weapon}
             setValue={(weapon: string) => setWeapon(weapon as Weapon)}
             clearable
diff --git a/frontend-react/src/components/freeagents/Matches.tsx b/frontend-react/src/components/freeagents/Matches.tsx
index 284cb8a52..1ae8ba1d1 100644
--- a/frontend-react/src/components/freeagents/Matches.tsx
+++ b/frontend-react/src/components/freeagents/Matches.tsx
@@ -7,9 +7,13 @@ import {
   PopoverTrigger,
   PopoverContent,
   PopoverArrow,
+  AvatarGroup,
+  Avatar,
 } from "@chakra-ui/core"
 import UserAvatar from "../common/UserAvatar"
 import MyThemeContext from "../../themeContext"
+import { useTranslation, Trans } from "react-i18next"
+import questionMark from "../../assets/questionMark.jpg"
 
 interface MatchesProps {
   matches: {
@@ -21,88 +25,70 @@ interface MatchesProps {
 }
 
 const Matches: React.FC<MatchesProps> = ({ matches, likesReceived }) => {
-  const { grayWithShade, themeColorWithShade, darkerBgColor } = useContext(
-    MyThemeContext
-  )
+  const { t } = useTranslation()
+  const { grayWithShade, darkerBgColor } = useContext(MyThemeContext)
 
   if (matches.length === 0 && likesReceived === 0) return null
 
   const unrequitedLove = likesReceived - matches.length
 
-  const getText1 = () => {
-    if (unrequitedLove > 1 && matches.length > 0) return "Also there are "
-    if (unrequitedLove > 1 && matches.length === 0) return "There are "
-    if (unrequitedLove === 1 && matches.length > 0) return "Also there is "
-    return "There is "
-  }
-
-  const text1 = getText1()
-  const text2 =
-    unrequitedLove > 1 ? (
-      <>{unrequitedLove} free agents</>
-    ) : (
-      <>{unrequitedLove} free agent</>
-    )
-  const text3 =
-    unrequitedLove > 1 ? (
-      <>that liked you but you didn't like any of them back yet!</>
-    ) : (
-      <>that liked you but you didn't like them back yet!</>
-    )
-
   return (
     <Flex justifyContent="center">
-      <FieldsetWithLegend title="MATCHES" titleFontSize="xs">
-        {matches.length > 0 ? (
+      <FieldsetWithLegend
+        title={t("freeagents;MATCHES")}
+        titleFontSize="xs"
+        minW="250px"
+      >
+        {matches.length > 0 && (
           <>
             <Flex justifyContent="center" flexWrap="wrap">
-              {matches.map((match) => (
-                <Box key={`${match.username}${match.discriminator}`} p="0.5em">
-                  <Popover trigger="hover">
-                    <PopoverTrigger>
-                      <Box>
-                        <UserAvatar src={match.avatar} name={match.username} />
-                      </Box>
-                    </PopoverTrigger>
-                    <PopoverContent zIndex={4} p="0.5em" bg={darkerBgColor}>
-                      <PopoverArrow />
-                      <Box>
-                        You have a match with{" "}
-                        <b>
-                          {match.username}#{match.discriminator}
-                        </b>
-                        ! Contact them to see if you can get a team going
-                      </Box>
-                    </PopoverContent>
-                  </Popover>
-                </Box>
-              ))}
+              {matches.map((match) => {
+                const matchFullName = `${match.username}#${match.discriminator}`
+                return (
+                  <Box
+                    key={`${match.username}${match.discriminator}`}
+                    p="0.5em"
+                  >
+                    <Popover trigger="hover">
+                      <PopoverTrigger>
+                        <Box>
+                          <UserAvatar
+                            src={match.avatar}
+                            name={match.username}
+                          />
+                        </Box>
+                      </PopoverTrigger>
+                      <PopoverContent zIndex={4} p="0.5em" bg={darkerBgColor}>
+                        <PopoverArrow />
+                        <Box>
+                          <Trans i18nKey="freeagents;youHaveAMatch">
+                            You have a match with <b>{{ matchFullName }}</b>!
+                            Contact them to see if you can get a team going{" "}
+                          </Trans>
+                        </Box>
+                      </PopoverContent>
+                    </Popover>
+                  </Box>
+                )
+              })}
             </Flex>
-            {unrequitedLove > 0 && (
-              <Box
-                color={grayWithShade}
-                mt="1em"
-                fontWeight="bold"
-                textAlign="center"
-              >
-                {text1}
-                <Box as="span" color={themeColorWithShade}>
-                  {text2}
-                </Box>{" "}
-                {text3}
-              </Box>
-            )}
           </>
-        ) : (
-          unrequitedLove > 0 && (
-            <Box color={grayWithShade} fontWeight="bold" textAlign="center">
-              {text1}
-              <Box as="span" color={themeColorWithShade}>
-                {text2}
-              </Box>{" "}
-              {text3}
+        )}
+        {unrequitedLove > 0 && (
+          <>
+            <Flex justifyContent="center" mt="1em">
+              <AvatarGroup size="md" max={3}>
+                {Array(unrequitedLove)
+                  .fill(1)
+                  .map((_, i) => (
+                    <Avatar key={i} name="?a" />
+                  ))}
+              </AvatarGroup>
+            </Flex>
+            <Box color={grayWithShade} mt="0.5em" fontSize="15px">
+              {t("freeagents;getLiking", { count: unrequitedLove })}
             </Box>
-          )
+          </>
         )}
       </FieldsetWithLegend>
     </Flex>
diff --git a/frontend-react/src/components/freeagents/Posts.tsx b/frontend-react/src/components/freeagents/Posts.tsx
index 21e6d4a61..43eecd2bf 100644
--- a/frontend-react/src/components/freeagents/Posts.tsx
+++ b/frontend-react/src/components/freeagents/Posts.tsx
@@ -5,6 +5,7 @@ import Alert from "../elements/Alert"
 import FreeAgentCard from "./FreeAgentCard"
 import InfiniteScroll from "react-infinite-scroller"
 import Button from "../elements/Button"
+import { useTranslation } from "react-i18next"
 
 interface PostsAccordionProps {
   posts: FreeAgentPost[]
@@ -17,11 +18,14 @@ const Posts: React.FC<PostsAccordionProps> = ({
   canLike,
   likedUsersIds,
 }) => {
+  const { t } = useTranslation()
   const [agentsToShow, setAgentsToShow] = useState(5)
 
   if (posts.length === 0) {
     return (
-      <Alert status="info">No free agents found with the current filter</Alert>
+      <Alert status="info">
+        {t("freeagents;No free agents found with the current filter")}
+      </Alert>
     )
   }
   return (
@@ -29,12 +33,12 @@ const Posts: React.FC<PostsAccordionProps> = ({
       <Grid gridTemplateColumns="repeat(auto-fit, minmax(260px, 1fr))" mt="1em">
         <InfiniteScroll
           pageStart={1}
-          loadMore={page => setAgentsToShow(page * 10)}
+          loadMore={(page) => setAgentsToShow(page * 10)}
           hasMore={agentsToShow < posts.length}
         >
           {posts
-            .filter((post, index) => index < agentsToShow)
-            .map(post => (
+            .filter((_, index) => index < agentsToShow)
+            .map((post) => (
               <Box my="1em" key={post.id}>
                 <FreeAgentCard
                   post={post}
@@ -46,10 +50,12 @@ const Posts: React.FC<PostsAccordionProps> = ({
         </InfiniteScroll>
       </Grid>
       <Box w="50%" textAlign="center" mx="auto" mt="1em">
-        <Heading size="sm">No more free agents to show</Heading>
+        <Heading size="sm">
+          {t("freeagents;No more free agents to show")}
+        </Heading>
         <Box mt="1em">
           <Button outlined onClick={() => window.scrollTo(0, 0)}>
-            Return to the top
+            {t("freeagents;Return to the top")}
           </Button>
         </Box>
       </Box>
diff --git a/frontend-react/src/components/freeagents/RoleIcons.tsx b/frontend-react/src/components/freeagents/RoleIcons.tsx
index a10447bd5..7da86152e 100644
--- a/frontend-react/src/components/freeagents/RoleIcons.tsx
+++ b/frontend-react/src/components/freeagents/RoleIcons.tsx
@@ -1,12 +1,14 @@
 import React from "react"
 import { Flex, Box } from "@chakra-ui/core"
 import { FaCrosshairs, FaBriefcaseMedical, FaAnchor } from "react-icons/fa"
+import { useTranslation } from "react-i18next"
 
 interface RoleIconsProps {
   playstyles: ("FRONTLINE" | "MIDLINE" | "BACKLINE")[]
 }
 
 const RoleIcons: React.FC<RoleIconsProps> = ({ playstyles }) => {
+  const { t } = useTranslation()
   return (
     <Flex>
       <Box
@@ -14,7 +16,7 @@ const RoleIcons: React.FC<RoleIconsProps> = ({ playstyles }) => {
         w="30px"
         h="auto"
         color={playstyles.indexOf("FRONTLINE") === -1 ? "grey" : "green.500"}
-        title="Frontline/Slayer"
+        title={t("freeagents;Frontline/Slayer")}
         cursor="help"
       />
       <Box
@@ -22,7 +24,7 @@ const RoleIcons: React.FC<RoleIconsProps> = ({ playstyles }) => {
         w="30px"
         h="auto"
         color={playstyles.indexOf("MIDLINE") === -1 ? "grey" : "green.500"}
-        title="Midline/Support"
+        title={t("freeagents;Midline/Support")}
         mx="10px"
         cursor="help"
       />
@@ -31,7 +33,7 @@ const RoleIcons: React.FC<RoleIconsProps> = ({ playstyles }) => {
         w="30px"
         h="auto"
         color={playstyles.indexOf("BACKLINE") === -1 ? "grey" : "green.500"}
-        title="Backline/Anchor"
+        title={t("freeagents;Backline/Anchor")}
         cursor="help"
       />
     </Flex>
diff --git a/frontend-react/src/components/freeagents/VCIcon.tsx b/frontend-react/src/components/freeagents/VCIcon.tsx
index 1991d05e8..571fb728a 100644
--- a/frontend-react/src/components/freeagents/VCIcon.tsx
+++ b/frontend-react/src/components/freeagents/VCIcon.tsx
@@ -1,6 +1,7 @@
 import React from "react"
 import { Box } from "@chakra-ui/core"
 import { FaMicrophone } from "react-icons/fa"
+import { useTranslation } from "react-i18next"
 
 interface VCIconProps {
   canVC: "YES" | "USUALLY" | "SOMETIMES" | "NO"
@@ -20,15 +21,18 @@ const title = {
   NO: "Can't VC",
 }
 
-const VCIcon: React.FC<VCIconProps> = ({ canVC }) => (
-  <Box
-    as={FaMicrophone}
-    title={title[canVC]}
-    color={color[canVC]}
-    w="30px"
-    h="auto"
-    cursor="help"
-  />
-)
+const VCIcon: React.FC<VCIconProps> = ({ canVC }) => {
+  const { t } = useTranslation()
+  return (
+    <Box
+      as={FaMicrophone}
+      title={t(`freeagents;${title[canVC]}`)}
+      color={color[canVC]}
+      w="30px"
+      h="auto"
+      cursor="help"
+    />
+  )
+}
 
 export default VCIcon