diff --git a/components/freeagents/FAModal.tsx b/components/freeagents/FAModal.tsx
new file mode 100644
index 000000000..2db907825
--- /dev/null
+++ b/components/freeagents/FAModal.tsx
@@ -0,0 +1,138 @@
+import {
+  Button,
+  Modal,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  useToast,
+} from "@chakra-ui/react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Trans } from "@lingui/macro";
+import { useLingui } from "@lingui/react";
+import { freeAgentPostSchema } from "lib/validators/fapost";
+import { GetUserByIdentifierData } from "prisma/queries/getUserByIdentifier";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+
+interface Props {
+  onClose: () => void;
+  user: NonNullable<GetUserByIdentifierData>;
+}
+
+type FormData = z.infer<typeof freeAgentPostSchema>;
+
+const FAModal: React.FC<Props> = ({ onClose, user }) => {
+  const [sending, setSending] = useState(false);
+  const { i18n } = useLingui();
+
+  const { handleSubmit, errors, register, watch, control } = useForm<FormData>({
+    resolver: zodResolver(freeAgentPostSchema),
+    // defaultValues: user?.profile
+    //   ? {
+    //       ...user.profile,
+    //       sensMotion: sensToString(user.profile.sensMotion),
+    //       sensStick: sensToString(user.profile.sensStick),
+    //     }
+    //   : {
+    //       sensStick: "",
+    //       sensMotion: "",
+    //     },
+  });
+
+  const watchBio = watch("bio", user.profile?.bio);
+
+  const toast = useToast();
+
+  // const onSubmit = async (formData: FormData) => {
+  //   setSending(true);
+  //   const mutationData = {
+  //     ...formData,
+  //     // sens is treated as string on the frontend side of things because
+  //     // html select uses strings
+  //     sensStick:
+  //       typeof formData.sensStick === "string"
+  //         ? parseFloat(formData.sensStick)
+  //         : null,
+  //     sensMotion:
+  //       typeof formData.sensMotion === "string"
+  //         ? parseFloat(formData.sensMotion)
+  //         : null,
+  //   };
+
+  //   for (const [key, value] of Object.entries(mutationData)) {
+  //     if (value === "" || value === undefined) {
+  //       const typedKey = key as keyof Omit<typeof mutationData, "weaponPool">;
+  //       mutationData[typedKey] = null;
+  //     }
+  //   }
+
+  //   const success = await sendData("PUT", "/api/me/profile", mutationData);
+  //   setSending(false);
+  //   if (!success) return;
+
+  //   mutate(`/api/users/${user.id}`);
+
+  //   toast(getToastOptions(i18n._(t`Profile updated`), "success"));
+  //   onClose();
+  // };
+
+  return (
+    <Modal isOpen onClose={onClose} size="xl" closeOnOverlayClick={false}>
+      <ModalOverlay>
+        <ModalContent>
+          <ModalHeader>
+            <Trans>Editing profile</Trans>
+          </ModalHeader>
+          <ModalCloseButton borderRadius="50%" />
+          {/* <form onSubmit={handleSubmit(onSubmit)}> */}
+          <form>
+            {/* <ModalBody pb={6}>
+              <FormControl isInvalid={!!errors.customUrlPath}>
+                <FormLabel htmlFor="customUrlPath">
+                  <Trans>Custom URL</Trans>
+                </FormLabel>
+                <InputGroup>
+                  <InputLeftAddon children="https://sendou.ink/u/" />
+                  <Input
+                    name="customUrlPath"
+                    ref={register}
+                    placeholder="sendou"
+                  />
+                </InputGroup>
+                <FormErrorMessage>
+                  {errors.customUrlPath?.message}
+                </FormErrorMessage>
+              </FormControl>
+
+              <MarkdownTextarea
+                fieldName="bio"
+                title={i18n._(t`Bio`)}
+                error={errors.bio}
+                register={register}
+                value={watchBio ?? ""}
+                maxLength={PROFILE_CHARACTER_LIMIT}
+                placeholder={i18n._(
+                  t`# I'm a header
+                  I'm **bolded**. Embedding weapon images is easy too: :luna_blaster:`
+                )}
+              />
+            </ModalBody> */}
+            <ModalFooter>
+              <Button mr={3} type="submit" isLoading={sending}>
+                <Trans>Save</Trans>
+              </Button>
+              <Button onClick={onClose} variant="outline">
+                <Trans>Cancel</Trans>
+              </Button>
+            </ModalFooter>
+          </form>
+        </ModalContent>
+      </ModalOverlay>
+    </Modal>
+  );
+};
+
+export default FAModal;
diff --git a/lib/validators/fapost.ts b/lib/validators/fapost.ts
new file mode 100644
index 000000000..73b1cadb8
--- /dev/null
+++ b/lib/validators/fapost.ts
@@ -0,0 +1,7 @@
+import * as z from "zod";
+
+export const freeAgentPostSchema = z.object({
+  playstyles: z.array(z.enum(["FRONTLINE", "MIDLINE", "BACKLINE"])),
+  canVC: z.enum(["YES", "NO", "MAYBE"]),
+  content: z.string().max(2000),
+});
diff --git a/pages/api/freeagents/index.ts b/pages/api/freeagents/index.ts
new file mode 100644
index 000000000..fd70f87f8
--- /dev/null
+++ b/pages/api/freeagents/index.ts
@@ -0,0 +1,15 @@
+import { NextApiRequest, NextApiResponse } from "next";
+
+const freeAgentsHandler = async (req: NextApiRequest, res: NextApiResponse) => {
+  switch (req.method) {
+    case "POST":
+      await postHandler(req, res);
+      break;
+    default:
+      res.status(405).end();
+  }
+};
+
+async function postHandler(req: NextApiRequest, res: NextApiResponse) {}
+
+export default freeAgentsHandler;
diff --git a/pages/freeagentsnew.tsx b/pages/freeagentsnew.tsx
new file mode 100644
index 000000000..f0e313357
--- /dev/null
+++ b/pages/freeagentsnew.tsx
@@ -0,0 +1,14 @@
+import { t } from "@lingui/macro";
+import Breadcrumbs from "components/common/Breadcrumbs";
+
+interface Props {}
+
+const FreeAgentsPage: React.FC<Props> = ({}) => {
+  return (
+    <>
+      <Breadcrumbs pages={[{ name: t`Free Agents` }]} />
+    </>
+  );
+};
+
+export default FreeAgentsPage;