diff --git a/frontend2/.prettierrc.json b/frontend2/.prettierrc.json
index 0967ef424..b4bfed357 100644
--- a/frontend2/.prettierrc.json
+++ b/frontend2/.prettierrc.json
@@ -1 +1,3 @@
-{}
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}
diff --git a/frontend2/package-lock.json b/frontend2/package-lock.json
index 2c1fb3793..b55e978c2 100644
--- a/frontend2/package-lock.json
+++ b/frontend2/package-lock.json
@@ -38,7 +38,8 @@
         "eslint-plugin-promise": "^6.1.1",
         "eslint-plugin-react": "^7.32.2",
         "js-cookie": "^3.0.5",
-        "prettier": "2.8.8",
+        "prettier": "3.0.2",
+        "prettier-plugin-tailwindcss": "^0.5.3",
         "react-scripts": "5.0.1",
         "tailwindcss": "^3.3.2",
         "typescript": "^4.9.5"
@@ -15569,20 +15570,92 @@
       }
     },
     "node_modules/prettier": {
-      "version": "2.8.8",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
-      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.2.tgz",
+      "integrity": "sha512-o2YR9qtniXvwEZlOKbveKfDQVyqxbEIWn48Z8m3ZJjBjcCmUy3xZGIv+7AkaeuaTr6yPXJjwv07ZWlsWbEy1rQ==",
       "dev": true,
       "bin": {
-        "prettier": "bin-prettier.js"
+        "prettier": "bin/prettier.cjs"
       },
       "engines": {
-        "node": ">=10.13.0"
+        "node": ">=14"
       },
       "funding": {
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.3.tgz",
+      "integrity": "sha512-M5K80V21yM+CTm/FEFYRv9/9LyInYbCSXpIoPAKMm8zy89IOwdiA2e4JVbcO7tvRtAQWz32zdj7/WKcsmFyAVg==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.21.3"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@shufo/prettier-plugin-blade": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "prettier": "^3.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-import-sort": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-style-order": "*",
+        "prettier-plugin-svelte": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@shufo/prettier-plugin-blade": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-import-sort": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-marko": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-style-order": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        },
+        "prettier-plugin-twig-melody": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
diff --git a/frontend2/package.json b/frontend2/package.json
index 0862dd98a..e76e3d562 100644
--- a/frontend2/package.json
+++ b/frontend2/package.json
@@ -61,7 +61,8 @@
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.32.2",
     "js-cookie": "^3.0.5",
-    "prettier": "2.8.8",
+    "prettier": "3.0.2",
+    "prettier-plugin-tailwindcss": "^0.5.3",
     "react-scripts": "5.0.1",
     "tailwindcss": "^3.3.2",
     "typescript": "^4.9.5"
diff --git a/frontend2/src/components/elements/Button.tsx b/frontend2/src/components/elements/Button.tsx
index 21c6b51c3..85f910cb8 100644
--- a/frontend2/src/components/elements/Button.tsx
+++ b/frontend2/src/components/elements/Button.tsx
@@ -5,6 +5,8 @@ interface ButtonProps extends React.ComponentPropsWithoutRef<"button"> {
   variant?: string;
   label?: string;
   iconName?: IconName;
+  fullWidth?: boolean;
+  className?: string;
 }
 
 const variants: Record<string, string> = {
@@ -13,21 +15,24 @@ const variants: Record<string, string> = {
 };
 
 const Button: React.FC<ButtonProps> = ({
-  variant,
+  variant = "",
   label,
   iconName,
+  fullWidth = false,
+  className = "",
   ...rest
 }) => {
-  variant = variant ?? "";
-  const variantStyle = variants[variant];
+  const variantStyle = `${variants[variant]}  ${
+    fullWidth ? "w-full" : ""
+  } ${className}`;
   return (
     <button
       // default button type
       type="button"
-      className={`flex flex-row gap-1.5 items-center justify-center rounded h-9 px-2.5 py-1.5 font-medium shadow-sm ${variantStyle}`}
+      className={`flex h-9 flex-row items-center justify-center gap-1.5 rounded px-2.5 py-1.5 font-medium shadow-sm ${variantStyle}`}
       {...rest}
     >
-      {iconName !== undefined && <Icon name={iconName} size="sm"/>}
+      {iconName !== undefined && <Icon name={iconName} size="sm" />}
       {label}
     </button>
   );
diff --git a/frontend2/src/components/elements/FormError.tsx b/frontend2/src/components/elements/FormError.tsx
new file mode 100644
index 000000000..f8c817415
--- /dev/null
+++ b/frontend2/src/components/elements/FormError.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+
+const FormError: React.FC<{ message?: string; className?: string }> = ({
+  message,
+  className,
+}) => {
+  return (
+    <span
+      role="alert"
+      className={`absolute mt-0.5 text-xs text-red-700 ${className ?? ""}`}
+    >
+      {message ?? "This field is invalid."}
+    </span>
+  );
+};
+
+export default FormError;
diff --git a/frontend2/src/components/elements/FormLabel.tsx b/frontend2/src/components/elements/FormLabel.tsx
new file mode 100644
index 000000000..875fdbea2
--- /dev/null
+++ b/frontend2/src/components/elements/FormLabel.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+const FormLabel: React.FC<{
+  label?: string;
+  required?: boolean;
+  className?: string;
+}> = ({ label, required = false, className }) => {
+  return (
+    <span
+      className={`text-sm font-medium leading-6 text-gray-700 ${
+        className ?? ""
+      }`}
+    >
+      {label}
+      {required && <span className="text-red-700"> *</span>}
+    </span>
+  );
+};
+
+export default FormLabel;
diff --git a/frontend2/src/components/elements/Input.tsx b/frontend2/src/components/elements/Input.tsx
index 34b3e4710..0489d7544 100644
--- a/frontend2/src/components/elements/Input.tsx
+++ b/frontend2/src/components/elements/Input.tsx
@@ -1,35 +1,36 @@
 import React, { forwardRef } from "react";
+import FormError from "./FormError";
+import FormLabel from "./FormLabel";
 
 interface InputProps extends React.ComponentPropsWithoutRef<"input"> {
   label?: string;
   required?: boolean;
+  className?: string;
+  errorMessage?: string;
 }
 
 const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
-  { label, required = false, ...rest },
-  ref
+  { label, required = false, className = "", errorMessage, ...rest },
+  ref,
 ) {
+  const invalid = errorMessage !== undefined;
   return (
-    <div className="w-full">
-      {label !== undefined && (
-        <label
-          htmlFor={label}
-          className="flex flex-col w-full gap-1 text-sm font-medium leading-6 text-gray-900"
-        >
-          <span>
-            {label}
-            {required && <span className="text-red-700"> *</span>}
-          </span>
-        </label>
-      )}
-      <div className="relative rounded-md shadow-sm">
-        <input
-          id={label}
-          ref={ref}
-          className="block focus:outline-none w-full rounded-md border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-cyan-600 sm:text-sm sm:leading-6"
-          {...rest}
-        />
-      </div>
+    <div className={`relative ${invalid ? "mb-1" : ""} ${className}`}>
+      <label>
+        <FormLabel label={label} required={required} />
+        <div className="relative rounded-md shadow-sm">
+          <input
+            ref={ref}
+            aria-invalid={errorMessage !== undefined ? "true" : "false"}
+            className={`block w-full rounded-md border-0 px-2 py-1.5 text-gray-900 ring-1 ring-inset
+            ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-inset
+            focus:ring-cyan-600 sm:text-sm sm:leading-6
+            ${invalid ? "ring-red-500" : ""}`}
+            {...rest}
+          />
+        </div>
+        {invalid && <FormError message={errorMessage} />}
+      </label>
     </div>
   );
 });
diff --git a/frontend2/src/components/elements/SelectMenu.tsx b/frontend2/src/components/elements/SelectMenu.tsx
index 304885cd6..8ba46b926 100644
--- a/frontend2/src/components/elements/SelectMenu.tsx
+++ b/frontend2/src/components/elements/SelectMenu.tsx
@@ -1,6 +1,8 @@
-import React, { useMemo, useState } from "react";
-import { Listbox } from "@headlessui/react";
-import Icon, { type IconName } from "./Icon";
+import React, { Fragment, useMemo, useState } from "react";
+import { Listbox, Transition } from "@headlessui/react";
+import Icon from "./Icon";
+import FormError from "./FormError";
+import FormLabel from "./FormLabel";
 
 interface SelectMenuProps<T extends React.Key | null | undefined> {
   options: Array<{ value: T; label: string }>;
@@ -8,6 +10,8 @@ interface SelectMenuProps<T extends React.Key | null | undefined> {
   required?: boolean;
   value?: T;
   placeholder?: string;
+  className?: string;
+  errorMessage?: string;
   onChange?: (value: T) => void;
 }
 
@@ -17,46 +21,68 @@ function SelectMenu<T extends React.Key | null | undefined>({
   options,
   value,
   placeholder,
+  className = "",
+  errorMessage,
   onChange,
 }: SelectMenuProps<T>): JSX.Element {
   const valueToLabel = useMemo(
     () => new Map(options.map((option) => [option.value, option.label])),
-    [options]
+    [options],
   );
+  const invalid = errorMessage !== undefined;
   return (
-    <div className="flex flex-col gap-1">
+    <div className={`relative ${invalid ? "mb-2" : ""} ${className}`}>
       <Listbox value={value} onChange={onChange}>
-        {label !== undefined && (
-          <Listbox.Label className="flex flex-col gap-1 text-sm font-medium leading-6 text-gray-900">
-            <span>
-              {label}
-              {required && <span className="text-red-700"> *</span>}
+        <div className="relative">
+          {label !== undefined && (
+            <Listbox.Label>
+              <FormLabel label={label} required={required} />
+            </Listbox.Label>
+          )}
+          <Listbox.Button
+            className={`relative h-9 w-full truncate rounded-md bg-white py-1.5
+            pl-3 pr-10 text-left text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300
+            focus:outline-none focus:ring-1 focus:ring-cyan-600 ui-open:ring-cyan-600
+            sm:text-sm sm:leading-6 ${invalid ? "ring-red-500" : ""}`}
+          >
+            <span className={`${value === undefined ? "text-gray-400" : ""}`}>
+              {value === undefined ? placeholder : valueToLabel.get(value)}
             </span>
-          </Listbox.Label>
-        )}
-        <Listbox.Button className="h-9 relative w-full rounded-md truncate bg-white py-1.5 pl-3 pr-10 text-left text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:outline-none focus:ring-1 focus:ring-cyan-600 ui-open:ring-cyan-600 sm:text-sm sm:leading-6">
-          <span className={`${value === undefined ? "text-gray-400" : ""}`}>
-            {value === undefined ? placeholder : valueToLabel.get(value)}
-          </span>
-          <div className="transition transform duration-300 ui-open:rotate-180 absolute inset-y-0 right-0 flex items-center mr-2">
-            <Icon name="chevron_down" size="sm" />
-          </div>
-        </Listbox.Button>
-        <Listbox.Options className="mt-0 max-h-56 w-full rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
-          {options.map((option) => (
-            <Listbox.Option
-              className="px-4 relative py-1.5 cursor-default truncate ui-active:bg-cyan-100"
-              key={option.value}
-              value={option.value}
+            <div
+              className="absolute inset-y-0 right-0 mr-2 flex transform items-center
+              transition duration-300 ui-open:rotate-180"
             >
-              {option.label}
-              <span className="hidden ui-selected:flex text-cyan-900 absolute inset-y-0 right-0 items-center pr-2">
-                <Icon name="check" size="sm" />
-              </span>
-            </Listbox.Option>
-          ))}
-        </Listbox.Options>
+              <Icon name="chevron_down" size="sm" />
+            </div>
+          </Listbox.Button>
+          <Transition
+            as={Fragment}
+            leave="transition ease-in duration-100"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <Listbox.Options
+              className="absolute z-10 mt-1 max-h-48 w-full overflow-auto rounded-md
+              bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none
+              sm:max-h-60 sm:text-sm"
+            >
+              {options.map((option) => (
+                <Listbox.Option
+                  className="flex cursor-default flex-row justify-between py-1.5 pl-4 pr-2 ui-active:bg-cyan-100"
+                  key={option.value}
+                  value={option.value}
+                >
+                  <div className="overflow-x-auto pr-2">{option.label}</div>
+                  <span className=" hidden items-center text-cyan-900 ui-selected:flex">
+                    <Icon name="check" size="sm" />
+                  </span>
+                </Listbox.Option>
+              ))}
+            </Listbox.Options>
+          </Transition>
+        </div>
       </Listbox>
+      {invalid && <FormError message={errorMessage} />}
     </div>
   );
 }
diff --git a/frontend2/src/components/sidebar/index.tsx b/frontend2/src/components/sidebar/index.tsx
index ae25e3862..b6fbc28b0 100644
--- a/frontend2/src/components/sidebar/index.tsx
+++ b/frontend2/src/components/sidebar/index.tsx
@@ -1,17 +1,6 @@
 import React, { useContext } from "react";
 import SidebarSection from "./SidebarSection";
 import SidebarItem from "./SidebarItem";
-import {
-  ClipboardDocumentIcon,
-  HomeIcon,
-  MapIcon,
-  TrophyIcon,
-  ChartBarIcon,
-  ClockIcon,
-  UserGroupIcon,
-  ArrowUpTrayIcon,
-  PlayCircleIcon,
-} from "@heroicons/react/24/outline";
 import { EpisodeContext } from "../../contexts/EpisodeContext";
 
 interface SidebarProps {
@@ -26,52 +15,48 @@ const Sidebar: React.FC<SidebarProps> = ({ collapsed }) => {
   return collapsed ? null : (
     <div className="flex flex-col gap-8 py-4 h-full bg-gray-50 shadow-gray-200 shadow-sm">
       <SidebarSection title="">
+        <SidebarItem iconName="home" text="Home" linkTo={`${linkBase}home`} />
         <SidebarItem
-          icon={<HomeIcon className="h-6 w-6" />}
-          text="Home"
-          linkTo={`${linkBase}home`}
-        />
-        <SidebarItem
-          icon={<MapIcon className="h-6 w-6" />}
+          iconName="map"
           text="Quick Start"
           linkTo={`${linkBase}quickstart`}
         />
         <SidebarItem
-          icon={<ClipboardDocumentIcon className="h-6 w-6" />}
+          iconName="clipboard_document"
           text="Resources"
           linkTo={`${linkBase}resources`}
         />
       </SidebarSection>
       <SidebarSection title="compete">
         <SidebarItem
-          icon={<TrophyIcon className="h-6 w-6" />}
+          iconName="trophy"
           text="Tournaments"
           linkTo={`${linkBase}tournaments`}
         />
         <SidebarItem
-          icon={<ChartBarIcon className="h-6 w-6" />}
+          iconName="chart_bar"
           text="Rankings"
           linkTo={`${linkBase}rankings`}
         />
         <SidebarItem
-          icon={<ClockIcon className="h-6 w-6" />}
+          iconName="clock"
           text="Queue"
           linkTo={`${linkBase}queue`}
         />
       </SidebarSection>
       <SidebarSection title="team management">
         <SidebarItem
-          icon={<UserGroupIcon className="h-6 w-6" />}
+          iconName="user_group"
           text="My Team"
           linkTo={`${linkBase}team`}
         />
         <SidebarItem
-          icon={<ArrowUpTrayIcon className="h-6 w-6" />}
+          iconName="arrow_up_tray"
           text="Submissions"
           linkTo={`${linkBase}submission`}
         />
         <SidebarItem
-          icon={<PlayCircleIcon className="h-6 w-6" />}
+          iconName="play_circle"
           text="Scrimmaging"
           linkTo={`${linkBase}scrimmaging`}
         />
diff --git a/frontend2/src/index.css b/frontend2/src/index.css
index 95142225c..601d99fd1 100644
--- a/frontend2/src/index.css
+++ b/frontend2/src/index.css
@@ -1,4 +1,4 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter&family=Josefin+Sans&display=swap");
diff --git a/frontend2/src/utils/apiTypes.ts b/frontend2/src/utils/apiTypes.ts
index 6667bd6aa..322e9f8cf 100644
--- a/frontend2/src/utils/apiTypes.ts
+++ b/frontend2/src/utils/apiTypes.ts
@@ -8,259 +8,260 @@ export enum GenderEnum {
 
 export type Gender = `${GenderEnum}`;
 
-const countries = [
-  "AF",
-  "AX",
-  "AL",
-  "DZ",
-  "AS",
-  "AD",
-  "AO",
-  "AI",
-  "AQ",
-  "AG",
-  "AR",
-  "AM",
-  "AW",
-  "AU",
-  "AT",
-  "AZ",
-  "BS",
-  "BH",
-  "BD",
-  "BB",
-  "BY",
-  "BE",
-  "BZ",
-  "BJ",
-  "BM",
-  "BT",
-  "BO",
-  "BQ",
-  "BA",
-  "BW",
-  "BV",
-  "BR",
-  "IO",
-  "BN",
-  "BG",
-  "BF",
-  "BI",
-  "CV",
-  "KH",
-  "CM",
-  "CA",
-  "KY",
-  "CF",
-  "TD",
-  "CL",
-  "CN",
-  "CX",
-  "CC",
-  "CO",
-  "KM",
-  "CG",
-  "CD",
-  "CK",
-  "CR",
-  "CI",
-  "HR",
-  "CU",
-  "CW",
-  "CY",
-  "CZ",
-  "DK",
-  "DJ",
-  "DM",
-  "DO",
-  "EC",
-  "EG",
-  "SV",
-  "GQ",
-  "ER",
-  "EE",
-  "SZ",
-  "ET",
-  "FK",
-  "FO",
-  "FJ",
-  "FI",
-  "FR",
-  "GF",
-  "PF",
-  "TF",
-  "GA",
-  "GM",
-  "GE",
-  "DE",
-  "GH",
-  "GI",
-  "GR",
-  "GL",
-  "GD",
-  "GP",
-  "GU",
-  "GT",
-  "GG",
-  "GN",
-  "GW",
-  "GY",
-  "HT",
-  "HM",
-  "VA",
-  "HN",
-  "HK",
-  "HU",
-  "IS",
-  "IN",
-  "ID",
-  "IR",
-  "IQ",
-  "IE",
-  "IM",
-  "IL",
-  "IT",
-  "JM",
-  "JP",
-  "JE",
-  "JO",
-  "KZ",
-  "KE",
-  "KI",
-  "KW",
-  "KG",
-  "LA",
-  "LV",
-  "LB",
-  "LS",
-  "LR",
-  "LY",
-  "LI",
-  "LT",
-  "LU",
-  "MO",
-  "MG",
-  "MW",
-  "MY",
-  "MV",
-  "ML",
-  "MT",
-  "MH",
-  "MQ",
-  "MR",
-  "MU",
-  "YT",
-  "MX",
-  "FM",
-  "MD",
-  "MC",
-  "MN",
-  "ME",
-  "MS",
-  "MA",
-  "MZ",
-  "MM",
-  "NA",
-  "NR",
-  "NP",
-  "NL",
-  "NC",
-  "NZ",
-  "NI",
-  "NE",
-  "NG",
-  "NU",
-  "NF",
-  "KP",
-  "MK",
-  "MP",
-  "NO",
-  "OM",
-  "PK",
-  "PW",
-  "PS",
-  "PA",
-  "PG",
-  "PY",
-  "PE",
-  "PH",
-  "PN",
-  "PL",
-  "PT",
-  "PR",
-  "QA",
-  "RE",
-  "RO",
-  "RU",
-  "RW",
-  "BL",
-  "SH",
-  "KN",
-  "LC",
-  "MF",
-  "PM",
-  "VC",
-  "WS",
-  "SM",
-  "ST",
-  "SA",
-  "SN",
-  "RS",
-  "SC",
-  "SL",
-  "SG",
-  "SX",
-  "SK",
-  "SI",
-  "SB",
-  "SO",
-  "ZA",
-  "GS",
-  "KR",
-  "SS",
-  "ES",
-  "LK",
-  "SD",
-  "SR",
-  "SJ",
-  "SE",
-  "CH",
-  "SY",
-  "TW",
-  "TJ",
-  "TZ",
-  "TH",
-  "TL",
-  "TG",
-  "TK",
-  "TO",
-  "TT",
-  "TN",
-  "TR",
-  "TM",
-  "TC",
-  "TV",
-  "UG",
-  "UA",
-  "AE",
-  "GB",
-  "UM",
-  "US",
-  "UY",
-  "UZ",
-  "VU",
-  "VE",
-  "VN",
-  "VG",
-  "VI",
-  "WF",
-  "EH",
-  "YE",
-  "ZM",
-  "ZW",
-];
+export const COUNTRIES = {
+  US: "United States of America",
+  CA: "Canada",
+  AU: "Australia",
+  GB: "United Kingdom",
+  NL: "Netherlands",
+  KR: "South Korea",
+  FR: "France",
+  AF: "Afghanistan",
+  AX: "Åland Islands",
+  AL: "Albania",
+  DZ: "Algeria",
+  AS: "American Samoa",
+  AD: "Andorra",
+  AO: "Angola",
+  AI: "Anguilla",
+  AQ: "Antarctica",
+  AG: "Antigua and Barbuda",
+  AR: "Argentina",
+  AM: "Armenia",
+  AW: "Aruba",
+  AT: "Austria",
+  AZ: "Azerbaijan",
+  BS: "Bahamas",
+  BH: "Bahrain",
+  BD: "Bangladesh",
+  BB: "Barbados",
+  BY: "Belarus",
+  BE: "Belgium",
+  BZ: "Belize",
+  BJ: "Benin",
+  BM: "Bermuda",
+  BT: "Bhutan",
+  BO: "Bolivia",
+  BQ: "Bonaire, Sint Eustatius and Saba",
+  BA: "Bosnia and Herzegovina",
+  BW: "Botswana",
+  BV: "Bouvet Island",
+  BR: "Brazil",
+  IO: "British Indian Ocean Territory",
+  BN: "Brunei",
+  BG: "Bulgaria",
+  BF: "Burkina Faso",
+  BI: "Burundi",
+  CV: "Cabo Verde",
+  KH: "Cambodia",
+  CM: "Cameroon",
+  KY: "Cayman Islands",
+  CF: "Central African Republic",
+  TD: "Chad",
+  CL: "Chile",
+  CN: "China",
+  CX: "Christmas Island",
+  CC: "Cocos (Keeling) Islands",
+  CO: "Colombia",
+  KM: "Comoros",
+  CG: "Congo",
+  CD: "Congo (the Democratic Republic of the)",
+  CK: "Cook Islands",
+  CR: "Costa Rica",
+  CI: "Côte d'Ivoire",
+  HR: "Croatia",
+  CU: "Cuba",
+  CW: "Curaçao",
+  CY: "Cyprus",
+  CZ: "Czechia",
+  DK: "Denmark",
+  DJ: "Djibouti",
+  DM: "Dominica",
+  DO: "Dominican Republic",
+  EC: "Ecuador",
+  EG: "Egypt",
+  SV: "El Salvador",
+  GQ: "Equatorial Guinea",
+  ER: "Eritrea",
+  EE: "Estonia",
+  SZ: "Eswatini",
+  ET: "Ethiopia",
+  FK: "Falkland Islands (Malvinas)",
+  FO: "Faroe Islands",
+  FJ: "Fiji",
+  FI: "Finland",
+  GF: "French Guiana",
+  PF: "French Polynesia",
+  TF: "French Southern Territories",
+  GA: "Gabon",
+  GM: "Gambia",
+  GE: "Georgia",
+  DE: "Germany",
+  GH: "Ghana",
+  GI: "Gibraltar",
+  GR: "Greece",
+  GL: "Greenland",
+  GD: "Grenada",
+  GP: "Guadeloupe",
+  GU: "Guam",
+  GT: "Guatemala",
+  GG: "Guernsey",
+  GN: "Guinea",
+  GW: "Guinea-Bissau",
+  GY: "Guyana",
+  HT: "Haiti",
+  HM: "Heard Island and McDonald Islands",
+  VA: "Holy See",
+  HN: "Honduras",
+  HK: "Hong Kong",
+  HU: "Hungary",
+  IS: "Iceland",
+  IN: "India",
+  ID: "Indonesia",
+  IR: "Iran",
+  IQ: "Iraq",
+  IE: "Ireland",
+  IM: "Isle of Man",
+  IL: "Israel",
+  IT: "Italy",
+  JM: "Jamaica",
+  JP: "Japan",
+  JE: "Jersey",
+  JO: "Jordan",
+  KZ: "Kazakhstan",
+  KE: "Kenya",
+  KI: "Kiribati",
+  KW: "Kuwait",
+  KG: "Kyrgyzstan",
+  LA: "Laos",
+  LV: "Latvia",
+  LB: "Lebanon",
+  LS: "Lesotho",
+  LR: "Liberia",
+  LY: "Libya",
+  LI: "Liechtenstein",
+  LT: "Lithuania",
+  LU: "Luxembourg",
+  MO: "Macao",
+  MG: "Madagascar",
+  MW: "Malawi",
+  MY: "Malaysia",
+  MV: "Maldives",
+  ML: "Mali",
+  MT: "Malta",
+  MH: "Marshall Islands",
+  MQ: "Martinique",
+  MR: "Mauritania",
+  MU: "Mauritius",
+  YT: "Mayotte",
+  MX: "Mexico",
+  FM: "Micronesia (Federated States of)",
+  MD: "Moldova",
+  MC: "Monaco",
+  MN: "Mongolia",
+  ME: "Montenegro",
+  MS: "Montserrat",
+  MA: "Morocco",
+  MZ: "Mozambique",
+  MM: "Myanmar",
+  NA: "Namibia",
+  NR: "Nauru",
+  NP: "Nepal",
+  NC: "New Caledonia",
+  NZ: "New Zealand",
+  NI: "Nicaragua",
+  NE: "Niger",
+  NG: "Nigeria",
+  NU: "Niue",
+  NF: "Norfolk Island",
+  KP: "North Korea",
+  MK: "North Macedonia",
+  MP: "Northern Mariana Islands",
+  NO: "Norway",
+  OM: "Oman",
+  PK: "Pakistan",
+  PW: "Palau",
+  PS: "Palestine, State of",
+  PA: "Panama",
+  PG: "Papua New Guinea",
+  PY: "Paraguay",
+  PE: "Peru",
+  PH: "Philippines",
+  PN: "Pitcairn",
+  PL: "Poland",
+  PT: "Portugal",
+  PR: "Puerto Rico",
+  QA: "Qatar",
+  RE: "Réunion",
+  RO: "Romania",
+  RU: "Russia",
+  RW: "Rwanda",
+  BL: "Saint Barthélemy",
+  SH: "Saint Helena, Ascension and Tristan da Cunha",
+  KN: "Saint Kitts and Nevis",
+  LC: "Saint Lucia",
+  MF: "Saint Martin (French part)",
+  PM: "Saint Pierre and Miquelon",
+  VC: "Saint Vincent and the Grenadines",
+  WS: "Samoa",
+  SM: "San Marino",
+  ST: "Sao Tome and Principe",
+  SA: "Saudi Arabia",
+  SN: "Senegal",
+  RS: "Serbia",
+  SC: "Seychelles",
+  SL: "Sierra Leone",
+  SG: "Singapore",
+  SX: "Sint Maarten (Dutch part)",
+  SK: "Slovakia",
+  SI: "Slovenia",
+  SB: "Solomon Islands",
+  SO: "Somalia",
+  ZA: "South Africa",
+  GS: "South Georgia and the South Sandwich Islands",
+  SS: "South Sudan",
+  ES: "Spain",
+  LK: "Sri Lanka",
+  SD: "Sudan",
+  SR: "Suriname",
+  SJ: "Svalbard and Jan Mayen",
+  SE: "Sweden",
+  CH: "Switzerland",
+  SY: "Syria",
+  TW: "Taiwan",
+  TJ: "Tajikistan",
+  TZ: "Tanzania",
+  TH: "Thailand",
+  TL: "Timor-Leste",
+  TG: "Togo",
+  TK: "Tokelau",
+  TO: "Tonga",
+  TT: "Trinidad and Tobago",
+  TN: "Tunisia",
+  TR: "Turkey",
+  TM: "Turkmenistan",
+  TC: "Turks and Caicos Islands",
+  TV: "Tuvalu",
+  UG: "Uganda",
+  UA: "Ukraine",
+  AE: "United Arab Emirates",
+  UM: "United States Minor Outlying Islands",
+  UY: "Uruguay",
+  UZ: "Uzbekistan",
+  VU: "Vanuatu",
+  VE: "Venezuela",
+  VN: "Vietnam",
+  VG: "Virgin Islands (British)",
+  VI: "Virgin Islands (U.S.)",
+  WF: "Wallis and Futuna",
+  EH: "Western Sahara",
+  YE: "Yemen",
+  ZM: "Zambia",
+  ZW: "Zimbabwe",
+} as const;
+
+export type Country = keyof typeof COUNTRIES;
 
-export type Country = (typeof countries)[number];
 export interface CreateUserInput {
   profile: {
     gender: Gender;
diff --git a/frontend2/src/utils/utilTypes.ts b/frontend2/src/utils/utilTypes.ts
new file mode 100644
index 000000000..d798e4f97
--- /dev/null
+++ b/frontend2/src/utils/utilTypes.ts
@@ -0,0 +1 @@
+export type Maybe<T> = T | undefined;
diff --git a/frontend2/src/views/Register.tsx b/frontend2/src/views/Register.tsx
index e1a2ba2ac..2308ac506 100644
--- a/frontend2/src/views/Register.tsx
+++ b/frontend2/src/views/Register.tsx
@@ -1,71 +1,161 @@
 import React, { useState } from "react";
-import { Auth } from "../utils/api";
+import * as Auth from "../utils/auth";
 import Input from "../components/elements/Input";
 import Button from "../components/elements/Button";
-import { type SubmitHandler, useForm, Controller } from "react-hook-form";
+import { type SubmitHandler, useForm } from "react-hook-form";
 import { useCurrentUser } from "../contexts/CurrentUserContext";
 import {
-  type Gender,
   GenderEnum,
+  type Country,
   type CreateUserInput,
+  COUNTRIES,
 } from "../utils/apiTypes";
-import Dropdown from "../components/elements/Dropdown";
+import SelectMenu from "../components/elements/SelectMenu";
+import { type Maybe } from "../utils/utilTypes";
+
+const REQUIRED_ERROR_MSG = "This field is required.";
 
 const Register: React.FC = () => {
-  const { setUser } = useCurrentUser();
-  const { register, handleSubmit, setValue } = useForm<CreateUserInput>();
-  const [gender, setGender] = useState<Gender | undefined>(undefined);
+  const { login } = useCurrentUser();
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    setError,
+    clearErrors,
+    formState: { errors },
+  } = useForm<CreateUserInput>();
+  const [gender, setGender] = useState<Maybe<GenderEnum>>();
+  const [country, setCountry] = useState<Maybe<Country>>();
 
   const onSubmit: SubmitHandler<CreateUserInput> = async (data) => {
-    // https://stackoverflow.com/a/72815057
-    console.log("submitted", data);
+    if (gender === undefined || country === undefined) {
+      return;
+    }
     try {
       const newUser = await Auth.register(data);
-      setUser(newUser);
+      login(newUser);
       console.log("logged in successfully");
     } catch (error) {
       console.log("failure to register", error);
     }
   };
   return (
-    <div className="h-screen flex flex-col items-center bg-gray-50">
-      <span className="text-center">BATTLECODE</span>
+    <div className="flex h-screen flex-col items-center justify-center bg-gradient-to-tr from-cyan-200 to-cyan-700 p-2">
+      <h2 className="flex flex-1 items-end text-center font-display text-5xl tracking-wide text-white sm:text-6xl">
+        BATTLECODE
+      </h2>
       {/* https://github.com/orgs/react-hook-form/discussions/8622 */}
       <form
         /* eslint-disable-next-line @typescript-eslint/no-misused-promises */
-        onSubmit={handleSubmit(onSubmit)}
-        className="flex flex-col w-96 h- gap-3 p-4 bg-gray-100"
+        onSubmit={async (event) => {
+          // validate gender and country
+          await handleSubmit(onSubmit)(event);
+          if (gender === undefined) {
+            setError("profile.gender", { message: REQUIRED_ERROR_MSG });
+          }
+          if (country === undefined) {
+            setError("profile.country", { message: REQUIRED_ERROR_MSG });
+          }
+        }}
+        className="m-6 w-11/12 sm:w-[550px] flex flex-col gap-5 rounded-lg bg-gray-100 p-6 shadow-md"
       >
-        <Input label="Username" {...register("username")} />
-        <Input label="Password" {...register("password")} type="password" />
-        <Input label="Email" {...register("email")} />
-        <Input label="First name" {...register("firstName")} />
-        <Input label="Last name" {...register("lastName")} />
+        <Input
+          required
+          placeholder="battlecode_player_6.9610"
+          label="Username"
+          errorMessage={errors.username?.message}
+          {...register("username", { required: REQUIRED_ERROR_MSG })}
+        />
+        <Input
+          required
+          placeholder="************"
+          label="Password"
+          type="password"
+          errorMessage={errors.password?.message}
+          {...register("password", { required: REQUIRED_ERROR_MSG })}
+        />
+        <Input
+          required
+          placeholder="player@example.com"
+          label="Email"
+          type="email"
+          errorMessage={errors.email?.message}
+          {...register("email", { required: REQUIRED_ERROR_MSG })}
+        />
+        <div className="grid grid-cols-2 gap-5">
+          <Input
+            className="flex-grow basis-0"
+            required
+            placeholder="Tim"
+            label="First name"
+            errorMessage={errors.firstName?.message}
+            {...register("firstName", { required: REQUIRED_ERROR_MSG })}
+          />
+          <Input
+            className="flex-grow basis-0"
+            required
+            placeholder="Beaver"
+            label="Last name"
+            errorMessage={errors.lastName?.message}
+            {...register("lastName", { required: REQUIRED_ERROR_MSG })}
+          />
+        </div>
         {/* begin profile fields */}
-        <Input label="School" {...register("profile.school")} />
-        <Dropdown
-          onChange={(gender: string) => {
-            setGender(gender as Gender);
-            setValue("profile.gender", gender as Gender);
+        <div className="grid grid-cols-2 gap-5">
+          <SelectMenu<GenderEnum>
+            required
+            onChange={(newGender) => {
+              setGender(newGender);
+              setValue("profile.gender", newGender);
+              clearErrors("profile.gender");
+            }}
+            errorMessage={errors.profile?.gender?.message}
+            value={gender}
+            label="Gender identity"
+            placeholder="Select gender"
+            options={[
+              { value: GenderEnum.FEMALE, label: "Female" },
+              { value: GenderEnum.MALE, label: "Male" },
+              { value: GenderEnum.NONBINARY, label: "Non-binary" },
+              {
+                value: GenderEnum.SELF_DESCRIBED,
+                label: "Prefer to self describe",
+              },
+              { value: GenderEnum.RATHER_NOT_SAY, label: "Rather not say" },
+            ]}
+          />
+          <Input
+            placeholder="MIT"
+            label="School"
+            {...register("profile.school")}
+          />
+        </div>
+        <SelectMenu<Country>
+          required
+          onChange={(newCountry) => {
+            setCountry(newCountry);
+            setValue("profile.country", newCountry);
+            clearErrors("profile.country");
           }}
-          value={gender}
-          label="Gender"
-          placeholder="select"
-          options={[
-            { value: GenderEnum.FEMALE, label: "Female" },
-            { value: GenderEnum.MALE, label: "Male" },
-            { value: GenderEnum.NONBINARY, label: "Non-binary" },
-            {
-              value: GenderEnum.SELF_DESCRIBED,
-              label: "Prefer to self describe",
-            },
-            { value: GenderEnum.RATHER_NOT_SAY, label: "Rather not say" },
-          ]}
+          errorMessage={errors.profile?.country?.message}
+          value={country}
+          label="Country"
+          placeholder="Select country"
+          options={Object.entries(COUNTRIES).map(([code, name]) => ({
+            value: code as Country,
+            label: name,
+          }))}
+        />
+        <Button
+          className="mt-1"
+          fullWidth
+          label="Register"
+          type="submit"
+          variant="dark"
         />
-
-        <Input label="Country" {...register("profile.country")} />
-        <Button label="Submit" type="submit" variant="dark" />
       </form>
+      <div className="flex-1" />
     </div>
   );
 };
diff --git a/frontend2/tailwind.config.js b/frontend2/tailwind.config.js
index 97a2ee852..bda8b5385 100644
--- a/frontend2/tailwind.config.js
+++ b/frontend2/tailwind.config.js
@@ -11,6 +11,7 @@ module.exports = {
       },
       fontFamily: {
         sans: ["Inter", ...defaultTheme.fontFamily.sans],
+        display: ['"Josefin Sans"', "sans-serif"],
       },
     },
   },