diff --git a/frontend/.oxlintrc.json b/frontend/.oxlintrc.json
index 68491cab5df3..6ae3e1f8e911 100644
--- a/frontend/.oxlintrc.json
+++ b/frontend/.oxlintrc.json
@@ -21,7 +21,8 @@
       "rules": {
         "explicit-function-return-type": "off",
         "no-explicit-any": "off",
-        "no-unsafe-assignment": "off"
+        "no-unsafe-assignment": "off",
+        "no-empty-function": "off"
       }
     },
     {
diff --git a/frontend/__tests__/components/ui/ValidatedInput.spec.tsx b/frontend/__tests__/components/ui/ValidatedInput.spec.tsx
deleted file mode 100644
index 90f48a74ac67..000000000000
--- a/frontend/__tests__/components/ui/ValidatedInput.spec.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import { render, waitFor } from "@solidjs/testing-library";
-import userEvent from "@testing-library/user-event";
-import { createSignal } from "solid-js";
-import { describe, expect, it, vi } from "vitest";
-import { z } from "zod";
-
-import { ValidatedInput } from "../../../src/ts/components/ui/ValidatedInput";
-
-vi.mock("../../../src/ts/config", () => ({}));
-
-describe("ValidatedInput", () => {
-  it("renders with valid initial value", async () => {
-    const schema = z.string().min(4);
-    const { container } = render(() => (
-      <ValidatedInput class="test" value="Kevin" schema={schema} />
-    ));
-
-    await waitFor(() => container.querySelector(".inputAndIndicator") !== null);
-
-    const wrapper = container.querySelector(".inputAndIndicator");
-    const input = container.querySelector("input");
-    console.log(container?.innerHTML);
-    expect(wrapper).toHaveClass("inputAndIndicator");
-    expect(wrapper).toHaveAttribute("data-indicator-status", "success");
-    expect(input).toHaveValue("Kevin");
-
-    const indicator = wrapper?.querySelector("div.indicator:not(.hidden)");
-    expect(indicator).toBeInTheDocument();
-    expect(indicator).toHaveAttribute("data-option-id", "success");
-    expect(indicator?.querySelector("i")).toHaveClass("fa-check");
-  });
-
-  it("renders with invalid initial value", async () => {
-    const schema = z.string().min(4);
-    const { container } = render(() => (
-      <ValidatedInput class="test" value="Bob" schema={schema} />
-    ));
-
-    await waitFor(() => container.querySelector(".inputAndIndicator") !== null);
-
-    const wrapper = container.querySelector(".inputAndIndicator");
-    const input = container.querySelector("input");
-    console.log(container?.innerHTML);
-    expect(wrapper).toHaveClass("inputAndIndicator");
-    expect(wrapper).toHaveAttribute("data-indicator-status", "failed");
-    expect(input).toHaveValue("Bob");
-
-    const indicator = wrapper?.querySelector("div.indicator:not(.hidden)");
-    expect(indicator).toBeInTheDocument();
-    expect(indicator).toHaveAttribute("data-option-id", "failed");
-    expect(indicator?.querySelector("i")).toHaveClass("fa-times");
-  });
-
-  it("updates callback", async () => {
-    const [value, setValue] = createSignal("Bob");
-    const schema = z.string().min(4);
-    const { container } = render(() => (
-      <ValidatedInput
-        class="test"
-        value={value()}
-        onInput={setValue}
-        schema={schema}
-      />
-    ));
-
-    await waitFor(() => container.querySelector(".inputAndIndicator") !== null);
-    console.log(container.innerHTML);
-    const input = container.querySelector("input") as HTMLInputElement;
-    expect(container.querySelector(".inputAndIndicator")).toHaveAttribute(
-      "data-indicator-status",
-      "failed",
-    );
-
-    await userEvent.type(input, "ington");
-
-    expect(value()).toEqual("Bobington");
-    expect(container.querySelector(".inputAndIndicator")).toHaveAttribute(
-      "data-indicator-status",
-      "success",
-    );
-  });
-});
diff --git a/frontend/__tests__/components/ui/form/Checkbox.spec.tsx b/frontend/__tests__/components/ui/form/Checkbox.spec.tsx
new file mode 100644
index 000000000000..71936a160875
--- /dev/null
+++ b/frontend/__tests__/components/ui/form/Checkbox.spec.tsx
@@ -0,0 +1,91 @@
+import { render, screen, fireEvent } from "@solidjs/testing-library";
+import { describe, it, expect, vi } from "vitest";
+
+import { Checkbox } from "../../../../src/ts/components/ui/form/Checkbox";
+
+function makeField(name: string, checked = false) {
+  return {
+    name,
+    state: { value: checked },
+    handleBlur: vi.fn(),
+    handleChange: vi.fn(),
+  } as any;
+}
+
+describe("Checkbox", () => {
+  it("renders with label text", () => {
+    const field = makeField("agree");
+    render(() => <Checkbox field={() => field} label="I agree" />);
+
+    expect(screen.getByText("I agree")).toBeInTheDocument();
+  });
+
+  it("renders checkbox with field name", () => {
+    const field = makeField("terms");
+    render(() => <Checkbox field={() => field} />);
+
+    const input = screen.getByRole("checkbox", { hidden: true });
+    expect(input).toHaveAttribute("id", "terms");
+    expect(input).toHaveAttribute("name", "terms");
+  });
+
+  it("reflects checked state", () => {
+    const field = makeField("opt", true);
+    render(() => <Checkbox field={() => field} />);
+
+    const input = screen.getByRole("checkbox", { hidden: true });
+    expect(input).toBeChecked();
+  });
+
+  it("reflects unchecked state", () => {
+    const field = makeField("opt", false);
+    render(() => <Checkbox field={() => field} />);
+
+    const input = screen.getByRole("checkbox", { hidden: true });
+    expect(input).not.toBeChecked();
+  });
+
+  it("calls handleChange on change", async () => {
+    const field = makeField("opt");
+    render(() => <Checkbox field={() => field} />);
+
+    const input = screen.getByRole("checkbox", { hidden: true });
+    await fireEvent.change(input, { target: { checked: true } });
+    expect(field.handleChange).toHaveBeenCalledWith(true);
+  });
+
+  it("calls handleBlur on blur", async () => {
+    const field = makeField("opt");
+    render(() => <Checkbox field={() => field} />);
+
+    const input = screen.getByRole("checkbox", { hidden: true });
+    await fireEvent.blur(input);
+    expect(field.handleBlur).toHaveBeenCalled();
+  });
+
+  it("renders disabled checkbox", () => {
+    const field = makeField("opt");
+    render(() => <Checkbox field={() => field} disabled />);
+
+    const input = screen.getByRole("checkbox", { hidden: true });
+    expect(input).toBeDisabled();
+  });
+
+  it("shows check icon styling when checked", () => {
+    const field = makeField("opt", true);
+    const { container } = render(() => <Checkbox field={() => field} />);
+
+    const icon = container.querySelector(".fa-check");
+    expect(icon).toBeInTheDocument();
+    expect(icon).toHaveClass("text-main");
+  });
+
+  it("shows transparent icon styling when unchecked", () => {
+    const field = makeField("opt", false);
+    const { container } = render(() => <Checkbox field={() => field} />);
+
+    const icon = container.querySelector(".fa-check");
+    expect(icon).toBeInTheDocument();
+    expect(icon).toHaveClass("text-transparent");
+  });
+});
diff --git a/frontend/__tests__/components/ui/form/FieldIndicator.spec.tsx b/frontend/__tests__/components/ui/form/FieldIndicator.spec.tsx
new file mode 100644
index 000000000000..5a96d645125c
--- /dev/null
+++ b/frontend/__tests__/components/ui/form/FieldIndicator.spec.tsx
@@ -0,0 +1,88 @@
+import { render } from "@solidjs/testing-library";
+import { describe, it, expect } from "vitest";
+
+import { FieldIndicator } from "../../../../src/ts/components/ui/form/FieldIndicator";
+
+function makeField(overrides: {
+  isValidating?: boolean;
+  isTouched?: boolean;
+  isValid?: boolean;
+  isDefaultValue?: boolean;
+  errors?: string[];
+  hasWarning?: boolean;
+  warnings?: string[];
+}) {
+  return {
+    state: {
+      meta: {
+        isValidating: overrides.isValidating ?? false,
+        isTouched: overrides.isTouched ?? false,
+        isValid: overrides.isValid ?? true,
+        isDefaultValue: overrides.isDefaultValue ?? true,
+        errors: overrides.errors ?? [],
+      },
+    },
+    getMeta: () => ({
+      hasWarning: overrides.hasWarning ?? false,
+      warnings: overrides.warnings ?? [],
+    }),
+  } as any;
+}
+
+describe("FieldIndicator", () => {
+  it("shows loading spinner when validating", () => {
+    const { container } = render(() => (
+      <FieldIndicator field={makeField({ isValidating: true })} />
+    ));
+    expect(container.querySelector(".fa-circle-notch")).toBeInTheDocument();
+  });
+
+  it("shows error icon when touched and invalid", () => {
+    const { container } = render(() => (
+      <FieldIndicator
+        field={makeField({
+          isTouched: true,
+          isValid: false,
+          errors: ["bad value"],
+        })}
+      />
+    ));
+    expect(container.querySelector(".fa-times")).toBeInTheDocument();
+  });
+
+  it("shows warning icon when has warning", () => {
+    const { container } = render(() => (
+      <FieldIndicator
+        field={makeField({
+          hasWarning: true,
+          warnings: ["weak"],
+        })}
+      />
+    ));
+    expect(
+      container.querySelector(".fa-exclamation-triangle"),
+    ).toBeInTheDocument();
+  });
+
+  it("shows success check when touched, valid, and not default", () => {
+    const { container } = render(() => (
+      <FieldIndicator
+        field={makeField({
+          isTouched: true,
+          isValid: true,
+          isDefaultValue: false,
+        })}
+      />
+    ));
+    expect(container.querySelector(".fa-check")).toBeInTheDocument();
+  });
+
+  it("shows nothing when untouched and not validating", () => {
+    const { container } = render(() => (
+      <FieldIndicator field={makeField({})} />
+    ));
+    expect(container.querySelector(".fa-times")).not.toBeInTheDocument();
+    expect(container.querySelector(".fa-check")).not.toBeInTheDocument();
+    expect(container.querySelector(".fa-circle-notch")).not.toBeInTheDocument();
+  });
+});
diff --git a/frontend/__tests__/components/ui/form/InputField.spec.tsx b/frontend/__tests__/components/ui/form/InputField.spec.tsx
new file mode 100644
index 000000000000..7b5659ad14f1
--- /dev/null
+++ b/frontend/__tests__/components/ui/form/InputField.spec.tsx
@@ -0,0 +1,118 @@
+import { render, screen, fireEvent } from "@solidjs/testing-library";
+import { describe, it, expect, vi } from "vitest";
+
+import { InputField } from "../../../../src/ts/components/ui/form/InputField";
+
+function makeField(name: string, value = "") {
+  return {
+    name,
+    state: {
+      value,
+      meta: {
+        isValidating: false,
+        isTouched: false,
+        isValid: true,
+        isDefaultValue: true,
+        errors: [],
+      },
+    },
+    handleBlur: vi.fn(),
+    handleChange: vi.fn(),
+    getMeta: () => ({ hasWarning: false, warnings: [] }),
+  } as any;
+}
+
+describe("InputField", () => {
+  it("renders input with field name as id", () => {
+    const field = makeField("email");
+    render(() => <InputField field={() => field} />);
+
+    const input = screen.getByRole("textbox");
+    expect(input).toHaveAttribute("id", "email");
+    expect(input).toHaveAttribute("name", "email");
+  });
+
+  it("uses field name as default placeholder", () => {
+    const field = makeField("username");
+    render(() => <InputField field={() => field} />);
+
+    expect(screen.getByPlaceholderText("username")).toBeInTheDocument();
+  });
+
+  it("uses custom placeholder when provided", () => {
+    const field = makeField("email");
+    render(() => <InputField field={() => field} placeholder="Enter email" />);
+
+    expect(screen.getByPlaceholderText("Enter email")).toBeInTheDocument();
+  });
+
+  it("defaults to text type", () => {
+    const field = makeField("name");
+    render(() => <InputField field={() => field} />);
+
+    expect(screen.getByRole("textbox")).toHaveAttribute("type", "text");
+  });
+
+  it("uses custom type", () => {
+    const field = makeField("password");
+    const { container } = render(() => (
+      <InputField field={() => field} type="password" />
+    ));
+
+    expect(container.querySelector("input")).toHaveAttribute(
+      "type",
+      "password",
+    );
+  });
+
+  it("calls handleChange on input", async () => {
+    const field = makeField("name");
+    render(() => <InputField field={() => field} />);
+
+    await fireEvent.input(screen.getByRole("textbox"), {
+      target: { value: "test" },
+    });
+    expect(field.handleChange).toHaveBeenCalledWith("test");
+  });
+
+  it("calls handleBlur on blur", async () => {
+    const field = makeField("name");
+    render(() => <InputField field={() => field} />);
+
+    await fireEvent.blur(screen.getByRole("textbox"));
+    expect(field.handleBlur).toHaveBeenCalled();
+  });
+
+  it("calls onFocus callback", async () => {
+    const field = makeField("name");
+    const onFocus = vi.fn();
+    render(() => <InputField field={() => field} onFocus={onFocus} />);
+
+    await fireEvent.focus(screen.getByRole("textbox"));
+    expect(onFocus).toHaveBeenCalled();
+  });
+
+  it("renders disabled input", () => {
+    const field = makeField("name");
+    render(() => <InputField field={() => field} disabled />);
+
+    expect(screen.getByRole("textbox")).toBeDisabled();
+  });
+
+  it("shows FieldIndicator when showIndicator is true", () => {
+    const field = makeField("name");
+    field.state.meta.isValidating = true;
+    const { container } = render(() => (
+      <InputField field={() => field} showIndicator />
+    ));
+
+    expect(container.querySelector(".fa-circle-notch")).toBeInTheDocument();
+  });
+
+  it("hides FieldIndicator by default", () => {
+    const field = makeField("name");
+    const { container } = render(() => <InputField field={() => field} />);
+
+    expect(container.querySelector(".fa-circle-notch")).not.toBeInTheDocument();
+  });
+});
diff --git a/frontend/__tests__/components/ui/form/SubmitButton.spec.tsx b/frontend/__tests__/components/ui/form/SubmitButton.spec.tsx
new file mode 100644
index 000000000000..d98a197e4697
--- /dev/null
+++ b/frontend/__tests__/components/ui/form/SubmitButton.spec.tsx
@@ -0,0 +1,74 @@
+import { render, screen } from "@solidjs/testing-library";
+import { JSXElement } from "solid-js";
+import { describe, it, expect } from "vitest";
+
+import { SubmitButton } from "../../../../src/ts/components/ui/form/SubmitButton";
+
+type FormState = {
+  canSubmit: boolean;
+  isSubmitting: boolean;
+  isValid: boolean;
+  isDirty: boolean;
+};
+
+function makeForm(state: Partial<FormState> = {}) {
+  const fullState: FormState = {
+    canSubmit: true,
+    isSubmitting: false,
+    isValid: true,
+    isDirty: true,
+    ...state,
+  };
+
+  return {
+    Subscribe: (props: {
+      selector: (state: FormState) => FormState;
+      children: (state: () => FormState) => JSXElement;
+    }) => props.children(() => props.selector(fullState)),
+  };
+}
+
+describe("SubmitButton", () => {
+  it("renders enabled when form is dirty, valid, and can submit", () => {
+    render(() => <SubmitButton form={makeForm()} text="Save" />);
+    expect(screen.getByRole("button", { name: "Save" })).not.toBeDisabled();
+  });
+
+  it("renders as submit type", () => {
+    render(() => <SubmitButton form={makeForm()} text="Save" />);
+    expect(screen.getByRole("button")).toHaveAttribute("type", "submit");
+  });
+
+  it("disables when form is not dirty", () => {
+    render(() => (
+      <SubmitButton form={makeForm({ isDirty: false })} text="Save" />
+    ));
+    expect(screen.getByRole("button")).toBeDisabled();
+  });
+
+  it("disables when form cannot submit", () => {
+    render(() => (
+      <SubmitButton form={makeForm({ canSubmit: false })} text="Save" />
+    ));
+    expect(screen.getByRole("button")).toBeDisabled();
+  });
+
+  it("disables when form is submitting", () => {
+    render(() => (
+      <SubmitButton form={makeForm({ isSubmitting: true })} text="Save" />
+    ));
+    expect(screen.getByRole("button")).toBeDisabled();
+  });
+
+  it("disables when form is not valid", () => {
+    render(() => (
+      <SubmitButton form={makeForm({ isValid: false })} text="Save" />
+    ));
+    expect(screen.getByRole("button")).toBeDisabled();
+  });
+
+  it("disables when disabled prop is true even if form is ready", () => {
+    render(() => <SubmitButton form={makeForm()} text="Save" disabled />);
+    expect(screen.getByRole("button")).toBeDisabled();
+  });
+});
diff --git a/frontend/__tests__/components/ui/form/utils.spec.ts b/frontend/__tests__/components/ui/form/utils.spec.ts
new file mode 100644
index 000000000000..1b1447ca31ef
--- /dev/null
+++ b/frontend/__tests__/components/ui/form/utils.spec.ts
@@ -0,0 +1,133 @@
+import { describe, it, expect, vi } from "vitest";
+import { z } from "zod";
+
+import {
+  fromSchema,
+  handleResult,
+  allFieldsMandatory,
+  fieldMandatory,
+  type ValidationResult,
+} from "../../../../src/ts/components/ui/form/utils";
+
+describe("fromSchema", () => {
+  const schema = z.string().min(3, "too short").max(10, "too long");
+  const validate = fromSchema(schema);
+
+  it("returns undefined for valid value", () => {
+    expect(validate({ value: "hello" })).toBeUndefined();
+  });
+
+  it("returns error messages for invalid value", () => {
+    expect(validate({ value: "ab" })).toEqual(["too short"]);
+  });
+
+  it("returns multiple error messages", () => {
+    const numSchema = z.number().min(5, "too small").max(3, "too big");
+    const v = fromSchema(numSchema);
+    const result = v({ value: 4 });
+    // 4 fails min(5) but passes max(3)? Actually 4 > 3, so both fail
+    // number 4: min(5) fails, max(3) fails
+    expect(result).toEqual(["too small", "too big"]);
+  });
+});
+
+describe("handleResult", () => {
+  const mockSetMeta = vi.fn();
+
+  function makeField() {
+    mockSetMeta.mockClear();
+    return { setMeta: mockSetMeta } as any;
+  }
+
+  it("returns undefined for undefined results", () => {
+    expect(handleResult(makeField(), undefined)).toBeUndefined();
+  });
+
+  it("returns undefined for empty results", () => {
+    expect(handleResult(makeField(), [])).toBeUndefined();
+  });
+
+  it("returns error messages and ignores warnings", () => {
+    const results: ValidationResult[] = [
+      { type: "error", message: "bad email" },
+      { type: "error", message: "too short" },
+    ];
+    expect(handleResult(makeField(), results)).toEqual([
+      "bad email",
+      "too short",
+    ]);
+  });
+
+  it("sets warning meta on field", () => {
+    const results: ValidationResult[] = [
+      { type: "warning", message: "weak password" },
+    ];
+    const field = makeField();
+    const result = handleResult(field, results);
+
+    expect(result).toBeUndefined();
+    expect(mockSetMeta).toHaveBeenCalledOnce();
+
+    const updater = mockSetMeta.mock.calls[0]![0];
+    const newMeta = updater({ existing: true });
+    expect(newMeta).toEqual({
+      existing: true,
+      hasWarning: true,
+      warnings: ["weak password"],
+    });
+  });
+
+  it("handles both errors and warnings", () => {
+    const results: ValidationResult[] = [
+      { type: "warning", message: "not recommended" },
+      { type: "error", message: "invalid" },
+    ];
+    const field = makeField();
+    const result = handleResult(field, results);
+
+    expect(mockSetMeta).toHaveBeenCalledOnce();
+    expect(result).toEqual(["invalid"]);
+  });
+});
+
+describe("allFieldsMandatory", () => {
+  const validate = allFieldsMandatory<{ a: string; b: string }>();
+
+  it("returns undefined when all fields have values", () => {
+    expect(validate({ value: { a: "x", b: "y" } })).toBeUndefined();
+  });
+
+  it("returns error when a field is empty string", () => {
+    expect(validate({ value: { a: "x", b: "" } })).toBe(
+      "all fields are mandatory",
+    );
+  });
+
+  it("returns error when a field is undefined", () => {
+    expect(validate({ value: { a: "x", b: undefined } as any })).toBe(
+      "all fields are mandatory",
+    );
+  });
+});
+
+describe("fieldMandatory", () => {
+  it("returns undefined for non-empty value", () => {
+    const validate = fieldMandatory();
+    expect(validate({ value: "hello" })).toBeUndefined();
+  });
+
+  it("returns default message for empty string", () => {
+    const validate = fieldMandatory();
+    expect(validate({ value: "" })).toBe("mandatory");
+  });
+
+  it("returns default message for undefined", () => {
+    const validate = fieldMandatory();
+    expect(validate({ value: undefined })).toBe("mandatory");
+  });
+
+  it("returns custom message", () => {
+    const validate = fieldMandatory("required field");
+    expect(validate({ value: "" })).toBe("required field");
+  });
+});
diff --git a/frontend/package.json b/frontend/package.json
index 438af31ec477..a0703ffdb6cd 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@date-fns/utc": "1.2.0",
-    "@leonabcd123/modern-caps-lock": "2.2.2",
+    "@leonabcd123/modern-caps-lock": "3.0.4",
     "@monkeytype/contracts": "workspace:*",
     "@monkeytype/funbox": "workspace:*",
     "@monkeytype/schemas": "workspace:*",
@@ -39,6 +39,7 @@
     "@tanstack/pacer-lite": "0.2.1",
     "@tanstack/query-db-collection": "1.0.27",
     "@tanstack/solid-db": "0.2.10",
+    "@tanstack/solid-form": "1.28.4",
     "@tanstack/solid-query": "5.90.23",
     "@tanstack/solid-query-devtools": "5.91.3",
     "@tanstack/solid-table": "8.21.3",
diff --git a/frontend/src/html/pages/login.html b/frontend/src/html/pages/login.html
deleted file mode 100644
index f5321e360b8a..000000000000
--- a/frontend/src/html/pages/login.html
+++ /dev/null
@@ -1,100 +0,0 @@
-<div class="page pageLogin hidden" id="pageLogin">
-  <div class="preloader hidden">
-    <i class="fas fa-fw fa-spin fa-circle-notch"></i>
-  </div>
-  <div class="disabledNotification hidden">
-    <p>Login/Signup is disabled or the server is down/under maintenance.</p>
-  </div>
-  <div class="register side">
-    <div class="title">
-      <i class="fas fa-user-plus"></i>
-      register
-    </div>
-    <form action="" autocomplete="nope">
-      <input
-        type="text"
-        class="usernameInput"
-        placeholder="username"
-        autocomplete="new-username"
-      />
-      <input
-        type="email"
-        class="emailInput"
-        placeholder="email"
-        autocomplete="new-email"
-      />
-      <input
-        type="email"
-        class="verifyEmailInput"
-        placeholder="verify email"
-        autocomplete="verify-email"
-      />
-      <input
-        type="password"
-        class="passwordInput"
-        placeholder="password"
-        autocomplete="new-password"
-        name="new-password"
-      />
-      <input
-        type="password"
-        class="verifyPasswordInput"
-        placeholder="verify password"
-        autocomplete="verify-password"
-        name="verify-password"
-      />
-      <button type="submit" disabled>
-        <i class="fas fa-user-plus"></i>
-        sign up
-      </button>
-    </form>
-  </div>
-  <div class="login side">
-    <div class="title">
-      <i class="fas fa-sign-in-alt"></i>
-      login
-    </div>
-    <div class="providers">
-      <button class="signInWithGoogle">
-        <i class="fab fa-google"></i>
-        <!-- google sign In -->
-        <!-- google -->
-      </button>
-      <button class="signInWithGitHub">
-        <i class="fab fa-github"></i>
-        <!-- github sign In -->
-        <!-- github -->
-      </button>
-    </div>
-    <form action="">
-      <div class="orWithLine">
-        <div class="line"></div>
-        <div class="text">or</div>
-        <div class="line"></div>
-      </div>
-      <input
-        name="current-email"
-        type="email"
-        placeholder="email"
-        autocomplete="current-email"
-      />
-      <input
-        name="current-password"
-        type="password"
-        placeholder="password"
-        autocomplete="current-password"
-      />
-      <div>
-        <label id="rememberMe" class="checkbox">
-          <input type="checkbox" checked />
-          <div>remember me</div>
-        </label>
-      </div>
-      <button type="submit" class="signIn">
-        <i class="fas fa-sign-in-alt"></i>
-        sign in
-      </button>
-    </form>
-    <button class="text" id="forgotPasswordButton">forgot password?</button>
-  </div>
-</div>
diff --git a/frontend/src/index.html b/frontend/src/index.html
index c4ea32a36413..26f1c442e032 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -37,7 +37,9 @@
           <mount data-component="aboutpage"></mount>
         </div>
         <load src="html/pages/settings.html" />
-        <load src="html/pages/login.html" />
+        <div class="page pageLogin hidden" id="pageLogin">
+          <mount data-component="loginpage"></mount>
+        </div>
         <load src="html/pages/account.html" />
 
         <div class="page pageProfile hidden" id="pageProfile">
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index b74444aebaae..7e047a112b5c 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -17,9 +17,9 @@
 
 @layer custom-styles {
   @import "buttons", "404", "ads", "account", "animations", "caret",
-    "commandline", "core", "fonts", "inputs", "keymap", "login", "monkey",
-    "popups", "scroll", "settings", "account-settings", "test", "loading",
-    "friends", "media-queries";
+    "commandline", "core", "fonts", "inputs", "keymap", "monkey", "popups",
+    "scroll", "settings", "account-settings", "test", "loading", "friends",
+    "media-queries";
 
   .chartCanvas {
     width: 100% !important;
diff --git a/frontend/src/styles/login.scss b/frontend/src/styles/login.scss
deleted file mode 100644
index 6395672c210f..000000000000
--- a/frontend/src/styles/login.scss
+++ /dev/null
@@ -1,79 +0,0 @@
-.pageLogin {
-  display: flex;
-  grid-auto-flow: column;
-  gap: 1rem;
-  justify-content: space-around;
-  align-items: center;
-  height: 100%;
-
-  .side {
-    display: grid;
-    gap: 0.5rem;
-    justify-content: center;
-    grid-template-columns: 1fr;
-
-    input[type="email"],
-    input[type="password"],
-    input[type="text"] {
-      width: 17rem;
-    }
-
-    .title {
-      display: inline-flex;
-      align-items: baseline;
-      color: var(--sub-color);
-      i {
-        margin-right: 0.5em;
-      }
-    }
-
-    &.login {
-      #forgotPasswordButton {
-        // height: 0;
-        font-size: 0.75rem;
-        // margin-left: -0.5em;
-        justify-content: right;
-      }
-
-      .providers {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 1rem;
-      }
-
-      .orWithLine {
-        // height: 2.25rem;
-        display: grid;
-        grid-template-columns: 1fr auto 1fr;
-        align-items: center;
-        gap: 1rem;
-        .line {
-          background: var(--sub-alt-color);
-          width: 100%;
-          height: 0.25em;
-          border-radius: var(--roundness);
-        }
-      }
-      .checkbox {
-        height: 1.5rem;
-        align-items: center;
-      }
-    }
-  }
-
-  form {
-    display: grid;
-    gap: 0.5rem;
-    width: 100%;
-  }
-
-  .preloader {
-    position: fixed;
-    left: 50%;
-    top: 50%;
-    font-size: 2rem;
-    transform: translate(-50%, -50%);
-    color: var(--main-color);
-    transition: 0.25s;
-  }
-}
diff --git a/frontend/src/styles/tailwind.css b/frontend/src/styles/tailwind.css
index 42a8040255cd..68ae21a5ea8d 100644
--- a/frontend/src/styles/tailwind.css
+++ b/frontend/src/styles/tailwind.css
@@ -91,3 +91,14 @@
     padding: 0;
   }
 }
+
+@layer utilities {
+  .autofill-fix:-webkit-autofill,
+  .autofill-fix:-webkit-autofill:hover,
+  .autofill-fix:-webkit-autofill:focus {
+    @apply border-none  font-(--font) caret-(--text-color) font-[inherit];
+    outline: 0.15em solid var(--main-color);
+    -webkit-text-fill-color: var(--text-color);
+    -webkit-box-shadow: 0 0 0 1000000px var(--sub-alt-color) inset;
+  }
+}
diff --git a/frontend/src/ts/auth.tsx b/frontend/src/ts/auth.tsx
index e0dcd87ee26f..5cabc32d4adf 100644
--- a/frontend/src/ts/auth.tsx
+++ b/frontend/src/ts/auth.tsx
@@ -34,6 +34,15 @@ import {
 } from "./stores/notifications";
 import { createErrorMessage } from "./utils/error";
 
+export type AuthResult =
+  | {
+      success: true;
+    }
+  | {
+      success: false;
+      message: string;
+    };
+
 export const gmailProvider = new GoogleAuthProvider();
 export const githubProvider = new GithubAuthProvider();
 
@@ -156,15 +165,7 @@ export async function signIn(
   email: string,
   password: string,
   rememberMe: boolean,
-): Promise<
-  | {
-      success: true;
-    }
-  | {
-      success: false;
-      message: string;
-    }
-> {
+): Promise<AuthResult> {
   if (!isAuthAvailable()) {
     return { success: false, message: "Authentication uninitialized" };
   }
@@ -182,15 +183,7 @@ export async function signIn(
 async function signInWithProvider(
   provider: AuthProvider,
   rememberMe: boolean,
-): Promise<
-  | {
-      success: true;
-    }
-  | {
-      success: false;
-      message: string;
-    }
-> {
+): Promise<AuthResult> {
   if (!isAuthAvailable()) {
     return { success: false, message: "Authentication uninitialized" };
   }
@@ -198,35 +191,20 @@ async function signInWithProvider(
   const { error } = await tryCatch(signInWithPopup(provider, rememberMe));
 
   if (error !== null) {
-    if (error.message !== "") {
-      showErrorNotification(error.message);
-    }
     return { success: false, message: error.message };
   }
   return { success: true };
 }
 
-export async function signInWithGoogle(rememberMe: boolean): Promise<
-  | {
-      success: true;
-    }
-  | {
-      success: false;
-      message: string;
-    }
-> {
+export async function signInWithGoogle(
+  rememberMe: boolean,
+): Promise<AuthResult> {
   return signInWithProvider(gmailProvider, rememberMe);
 }
 
-export async function signInWithGitHub(rememberMe: boolean): Promise<
-  | {
-      success: true;
-    }
-  | {
-      success: false;
-      message: string;
-    }
-> {
+export async function signInWithGitHub(
+  rememberMe: boolean,
+): Promise<AuthResult> {
   return signInWithProvider(githubProvider, rememberMe);
 }
 
@@ -275,15 +253,7 @@ export async function signUp(
   name: string,
   email: string,
   password: string,
-): Promise<
-  | {
-      success: true;
-    }
-  | {
-      success: false;
-      message: string;
-    }
-> {
+): Promise<AuthResult> {
   if (!isAuthAvailable()) {
     return { success: false, message: "Authentication uninitialized" };
   }
diff --git a/frontend/src/ts/components/common/Balloon.tsx b/frontend/src/ts/components/common/Balloon.tsx
index 50d65efec039..8c122238950b 100644
--- a/frontend/src/ts/components/common/Balloon.tsx
+++ b/frontend/src/ts/components/common/Balloon.tsx
@@ -18,21 +18,20 @@ type Props = ParentProps<BalloonProps> &
   };
 
 export function buildBalloonHtmlProperties(
-  props: BalloonProps | undefined,
+  options: BalloonProps | undefined,
 ): Record<string, string> {
-  // oxlint-disable-next-line solid/reactivity just a util - consumer is responsible for reactivity
-  if (props === undefined || props.text === undefined || props.text === "") {
+  if (
+    options === undefined ||
+    options.text === undefined ||
+    options.text === ""
+  ) {
     return {};
   }
   return {
-    // oxlint-disable-next-line solid/reactivity just a util - consumer is responsible for reactivity
-    "aria-label": props.text,
-    // oxlint-disable-next-line solid/reactivity
-    "data-balloon-pos": props.position ?? "up",
-    // oxlint-disable-next-line solid/reactivity
-    ...(props.break ? { "data-balloon-break": "" } : {}),
-    // oxlint-disable-next-line solid/reactivity
-    ...(props.length ? { "data-balloon-length": props.length } : {}),
+    "aria-label": options.text,
+    "data-balloon-pos": options.position ?? "up",
+    ...(options.break ? { "data-balloon-break": "" } : {}),
+    ...(options.length ? { "data-balloon-length": options.length } : {}),
   };
 }
 
diff --git a/frontend/src/ts/components/common/Button.tsx b/frontend/src/ts/components/common/Button.tsx
index 03c7aebb0725..545a4209a990 100644
--- a/frontend/src/ts/components/common/Button.tsx
+++ b/frontend/src/ts/components/common/Button.tsx
@@ -14,13 +14,15 @@ type BaseProps = {
   balloon?: BalloonProps;
   "router-link"?: true;
   onClick?: () => void;
+  type?: HTMLButtonElement["type"];
   onMouseEnter?: () => void;
   onMouseLeave?: () => void;
   dataset?: Record<string, string>;
   active?: boolean;
 };
 
-type ButtonProps = BaseProps & {
+export type ButtonProps = BaseProps & {
+  type?: "button" | "submit" | "reset";
   href?: never;
   sameTarget?: true;
   disabled?: boolean;
@@ -30,6 +32,7 @@ type AnchorProps = BaseProps & {
   href: string;
   // onClick?: never;
   disabled?: never;
+  type?: never;
 };
 
 export function Button(props: ButtonProps | AnchorProps): JSXElement {
@@ -107,7 +110,8 @@ export function Button(props: ButtonProps | AnchorProps): JSXElement {
       }
       else={
         <button
-          type="button"
+          // oxlint-disable-next-line button-has-type
+          type={(props as ButtonProps).type ?? "button"}
           class={getClasses()}
           onClick={() => props.onClick?.()}
           onMouseEnter={() => props.onMouseEnter?.()}
diff --git a/frontend/src/ts/components/common/Separator.tsx b/frontend/src/ts/components/common/Separator.tsx
index 524161ece98f..4e0594b83c9e 100644
--- a/frontend/src/ts/components/common/Separator.tsx
+++ b/frontend/src/ts/components/common/Separator.tsx
@@ -1,18 +1,48 @@
 import { JSXElement } from "solid-js";
 
 import { cn } from "../../utils/cn";
+import { Conditional } from "./Conditional";
 
 export function Separator(props: {
   class?: string;
   vertical?: true;
+  text?: string;
 }): JSXElement {
   return (
-    <div
-      class={cn(
-        props.vertical ? "h-full w-1" : "h-1 w-full",
-        `rounded bg-sub-alt`,
-        props.class,
-      )}
-    ></div>
+    <Conditional
+      if={props.text !== undefined}
+      then={
+        <div
+          class={cn(
+            "flex place-items-center gap-4",
+            props.vertical ? "flex-col" : "flex-row",
+            props.class,
+          )}
+        >
+          <div
+            class={cn(
+              props.vertical ? "h-full w-1" : "h-1 w-full",
+              `rounded bg-sub-alt`,
+            )}
+          ></div>
+          <div>{props.text}</div>
+          <div
+            class={cn(
+              props.vertical ? "h-full w-1" : "h-1 w-full",
+              `rounded bg-sub-alt`,
+            )}
+          ></div>
+        </div>
+      }
+      else={
+        <div
+          class={cn(
+            props.vertical ? "h-full w-1" : "h-1 w-full",
+            `rounded bg-sub-alt`,
+            props.class,
+          )}
+        ></div>
+      }
+    />
   );
 }
diff --git a/frontend/src/ts/components/mount.tsx b/frontend/src/ts/components/mount.tsx
index 57da6b278ec3..7e96184bfe23 100644
--- a/frontend/src/ts/components/mount.tsx
+++ b/frontend/src/ts/components/mount.tsx
@@ -13,6 +13,7 @@ import { Modals } from "./modals/Modals";
 import { AboutPage } from "./pages/AboutPage";
 import { MyProfile } from "./pages/account/MyProfile";
 import { LeaderboardPage } from "./pages/leaderboard/LeaderboardPage";
+import { LoginPage } from "./pages/login/LoginPage";
 import { ProfilePage } from "./pages/profile/ProfilePage";
 import { ProfileSearchPage } from "./pages/profile/ProfileSearchPage";
 import { Popups } from "./popups/Popups";
@@ -20,6 +21,7 @@ import { Popups } from "./popups/Popups";
 const components: Record<string, () => JSXElement> = {
   footer: () => <Footer />,
   aboutpage: () => <AboutPage />,
+  loginpage: () => <LoginPage />,
   leaderboardpage: () => <LeaderboardPage />,
   profilepage: () => <ProfilePage />,
   profilesearchpage: () => <ProfileSearchPage />,
diff --git a/frontend/src/ts/components/pages/login/Login.tsx b/frontend/src/ts/components/pages/login/Login.tsx
new file mode 100644
index 000000000000..358362fcaa27
--- /dev/null
+++ b/frontend/src/ts/components/pages/login/Login.tsx
@@ -0,0 +1,153 @@
+import { createForm } from "@tanstack/solid-form";
+import { JSXElement } from "solid-js";
+
+import {
+  AuthResult,
+  signIn,
+  signInWithGitHub,
+  signInWithGoogle,
+} from "../../../auth";
+import * as ForgotPasswordModal from "../../../modals/forgot-password";
+import {
+  disableLoginPageInputs,
+  enableLoginPageInputs,
+  getLoginPageInputsEnabled,
+} from "../../../stores/login";
+import {
+  showErrorNotification,
+  showNoticeNotification,
+} from "../../../stores/notifications";
+import { Button } from "../../common/Button";
+import { H3 } from "../../common/Headers";
+import { Separator } from "../../common/Separator";
+import { Checkbox } from "../../ui/form/Checkbox";
+import { InputField } from "../../ui/form/InputField";
+import { SubmitButton } from "../../ui/form/SubmitButton";
+import { allFieldsMandatory } from "../../ui/form/utils";
+
+export function Login(): JSXElement {
+  const trySignIn = async (
+    auth: () => Promise<AuthResult>,
+    label?: string,
+  ): Promise<void> => {
+    disableLoginPageInputs();
+    try {
+      const data = await auth();
+      if (!data.success) {
+        showErrorNotification(
+          `Failed to sign in${label !== undefined ? ` with ${label}` : ""}: ${data.message}`,
+        );
+      }
+    } finally {
+      enableLoginPageInputs();
+    }
+  };
+
+  const form = createForm(() => ({
+    defaultValues: {
+      email: "",
+      password: "",
+      rememberMe: true,
+    },
+    onSubmit: async ({ value }) =>
+      await trySignIn(async () =>
+        signIn(value.email, value.password, value.rememberMe),
+      ),
+    onSubmitInvalid: () => {
+      showNoticeNotification("Please fill in all fields");
+    },
+    validators: {
+      onChange: allFieldsMandatory(),
+    },
+  }));
+
+  return (
+    <div class="grid w-full grid-cols-1 justify-center gap-2 sm:w-80">
+      <H3
+        text="login"
+        fa={{
+          icon: "fa-sign-in-alt",
+        }}
+        class="p-0"
+      />
+      <div class="grid grid-cols-2 gap-4">
+        <Button
+          fa={{ icon: "fa-google", variant: "brand" }}
+          onClick={() =>
+            void trySignIn(
+              async () => signInWithGoogle(form.getFieldValue("rememberMe")),
+              "Google",
+            )
+          }
+          disabled={!getLoginPageInputsEnabled()}
+        />
+        <Button
+          fa={{ icon: "fa-github", variant: "brand" }}
+          onClick={() =>
+            void trySignIn(
+              async () => signInWithGitHub(form.getFieldValue("rememberMe")),
+              "GitHub",
+            )
+          }
+          disabled={!getLoginPageInputsEnabled()}
+        />
+      </div>
+      <form
+        class="grid w-full gap-2"
+        onSubmit={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          void form.handleSubmit();
+        }}
+      >
+        <Separator text="or" />
+        <form.Field
+          name="email"
+          children={(field) => (
+            <InputField
+              field={field}
+              autocomplete="current-email"
+              disabled={!getLoginPageInputsEnabled()}
+            />
+          )}
+        />
+        <form.Field
+          name="password"
+          children={(field) => (
+            <InputField
+              field={field}
+              type="password"
+              autocomplete="current-password"
+              disabled={!getLoginPageInputsEnabled()}
+            />
+          )}
+        />
+        <form.Field
+          name="rememberMe"
+          children={(field) => (
+            <Checkbox
+              field={field}
+              disabled={!getLoginPageInputsEnabled()}
+              label="remember me"
+            />
+          )}
+        />
+
+        <SubmitButton
+          form={form}
+          fa={{ icon: "fa-sign-in-alt" }}
+          text="sign in"
+          disabled={!getLoginPageInputsEnabled()}
+        />
+      </form>
+
+      <Button
+        text="forgot password?"
+        variant="text"
+        class="text justify-end text-xs"
+        onClick={() => ForgotPasswordModal.show()}
+        disabled={!getLoginPageInputsEnabled()}
+      />
+    </div>
+  );
+}
diff --git a/frontend/src/ts/components/pages/login/LoginPage.tsx b/frontend/src/ts/components/pages/login/LoginPage.tsx
new file mode 100644
index 000000000000..754582ae7cfd
--- /dev/null
+++ b/frontend/src/ts/components/pages/login/LoginPage.tsx
@@ -0,0 +1,43 @@
+import { useQuery } from "@tanstack/solid-query";
+import { JSXElement, Show } from "solid-js";
+
+import { getServerConfigurationQueryOptions } from "../../../queries/server-configuration";
+import { getActivePage } from "../../../signals/core";
+import { getLoginPageInputsEnabled } from "../../../stores/login";
+import { Conditional } from "../../common/Conditional";
+import { Login } from "./Login";
+import { Register } from "./Register";
+
+export function LoginPage(): JSXElement {
+  const isOpen = () => getActivePage() === "login";
+
+  const serverConfig = useQuery(() => getServerConfigurationQueryOptions());
+  const isSignUpDisabled = (): boolean =>
+    !(serverConfig.data?.users.signUp ?? true);
+
+  return (
+    <Show when={isOpen()}>
+      <Show when={!getLoginPageInputsEnabled()}>
+        <div class="fixed top-1/2 left-1/2 z-1 -translate-x-1/2 -translate-y-1/2 text-3xl text-main transition-opacity duration-250">
+          <i class="fas fa-fw fa-spin fa-circle-notch"></i>
+        </div>
+      </Show>
+      <Conditional
+        if={isSignUpDisabled()}
+        then={
+          <div class="grid h-full place-items-center">
+            <p>
+              Login/Signup is disabled or the server is down/under maintenance.
+            </p>
+          </div>
+        }
+        else={
+          <div class="flex h-full flex-col items-center justify-around gap-4 md:flex-row">
+            <Register />
+            <Login />
+          </div>
+        }
+      />
+    </Show>
+  );
+}
diff --git a/frontend/src/ts/components/pages/login/Register.tsx b/frontend/src/ts/components/pages/login/Register.tsx
new file mode 100644
index 000000000000..747784576af5
--- /dev/null
+++ b/frontend/src/ts/components/pages/login/Register.tsx
@@ -0,0 +1,261 @@
+import {
+  PasswordSchema,
+  UserEmailSchema,
+  UserNameSchema,
+} from "@monkeytype/schemas/users";
+import { createForm } from "@tanstack/solid-form";
+import { JSXElement } from "solid-js";
+import { z } from "zod";
+
+import Ape from "../../../ape";
+import { signUp } from "../../../auth";
+import TypoList from "../../../constants/typo-list";
+import {
+  disableLoginPageInputs,
+  enableLoginPageInputs,
+  getLoginPageInputsEnabled,
+} from "../../../stores/login";
+import {
+  showErrorNotification,
+  showNoticeNotification,
+} from "../../../stores/notifications";
+import { isDevEnvironment } from "../../../utils/env";
+import { remoteValidationForm } from "../../../utils/remote-validation";
+import { H3 } from "../../common/Headers";
+import { InputField } from "../../ui/form/InputField";
+import { SubmitButton } from "../../ui/form/SubmitButton";
+import {
+  allFieldsMandatory,
+  fromSchema,
+  handleResult,
+  ValidationResult,
+} from "../../ui/form/utils";
+let disposableEmailModule: typeof import("disposable-email-domains-js") | null =
+  null;
+let moduleLoadAttempted = false;
+
+export function Register(): JSXElement {
+  const emailIsValid = async (
+    email: string,
+  ): Promise<undefined | ValidationResult[]> => {
+    const messages: ValidationResult[] = [];
+
+    const educationRegex =
+      /@.*(student|education|school|\.edu$|\.edu\.|\.ac\.|\.sch\.)/i;
+    if (educationRegex.test(email)) {
+      messages.push({
+        type: "warning",
+        message:
+          "Some education emails will fail to receive our messages, or disable the account as soon as you graduate. Consider using a personal email address.",
+      });
+    }
+
+    const emailHasTypo = TypoList.some((typo) => email.endsWith(typo));
+    if (emailHasTypo) {
+      messages.push({
+        type: "warning",
+        message: "Please check your email address, it may contain a typo.",
+      });
+    }
+
+    if (
+      disposableEmailModule &&
+      disposableEmailModule.isDisposableEmail !== undefined
+    ) {
+      try {
+        if (disposableEmailModule.isDisposableEmail(email)) {
+          messages.push({
+            type: "warning",
+            message:
+              "Using a temporary email may cause issues with logging in, password resets and support. Consider using a permanent email address. Don't worry, we don't send spam.",
+          });
+        }
+      } catch {
+        // Silent failure
+      }
+    }
+
+    return messages.length > 0 ? messages : undefined;
+  };
+
+  const form = createForm(() => ({
+    defaultValues: {
+      username: "",
+      email: "",
+      emailVerify: "",
+      password: "",
+      passwordVerify: "",
+    },
+    onSubmit: async ({ value }) => {
+      disableLoginPageInputs();
+      try {
+        const data = await signUp(value.username, value.email, value.password);
+        if (!data.success) {
+          showErrorNotification(data.message);
+        }
+      } finally {
+        enableLoginPageInputs();
+      }
+    },
+    onSubmitInvalid: () => {
+      showNoticeNotification("Please fill in all fields");
+    },
+    validators: {
+      onChange: allFieldsMandatory(),
+    },
+  }));
+
+  return (
+    <div class="grid w-full grid-cols-1 justify-center gap-2 sm:w-80">
+      <H3
+        text="register"
+        fa={{
+          icon: "fa-user-plus",
+        }}
+        class="p-0"
+      />
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          if (!form.state.canSubmit || !form.state.isValid) {
+            form.options.onSubmitInvalid?.({
+              value: form.state.values,
+              formApi: form,
+              meta: undefined,
+            });
+            return;
+          }
+          // we are calling onSubmit manually to bypass an unnecessary extra validation
+          // that runs when running handleSubmit, since we block the submit button when the form is invalid
+          void form.options.onSubmit?.({
+            value: form.state.values,
+            formApi: form,
+            meta: undefined,
+          });
+        }}
+        action=""
+        // oxlint-disable-next-line react/no-unknown-property
+        autocomplete="off"
+        class="grid w-full gap-2"
+      >
+        <form.Field
+          name="username"
+          validators={{
+            onChange: fromSchema(UserNameSchema),
+            onChangeAsyncDebounceMs: 1000,
+            onChangeAsync: remoteValidationForm(
+              async (name: string) =>
+                Ape.users.getNameAvailability({ params: { name } }),
+              { check: (data) => data.available || "Name not available" },
+            ),
+          }}
+          children={(field) => (
+            <InputField
+              field={field}
+              showIndicator
+              autocomplete="new-username"
+              disabled={!getLoginPageInputsEnabled()}
+            />
+          )}
+        />
+        <form.Field
+          name="email"
+          validators={{
+            onChange: (field) => {
+              void field.fieldApi.form.validateField("emailVerify", "change");
+              return fromSchema(UserEmailSchema)(field);
+            },
+            onChangeAsyncDebounceMs: 0,
+            onChangeAsync: async (field) =>
+              handleResult(field.fieldApi, await emailIsValid(field.value)),
+          }}
+          children={(field) => (
+            <InputField
+              field={field}
+              showIndicator
+              autocomplete="new-email"
+              disabled={!getLoginPageInputsEnabled()}
+              onFocus={() => {
+                if (!moduleLoadAttempted) {
+                  moduleLoadAttempted = true;
+                  void import("disposable-email-domains-js")
+                    .then((it) => (disposableEmailModule = it))
+                    .catch(() => {
+                      // Silent failure
+                    });
+                }
+              }}
+            />
+          )}
+        />
+        <form.Field
+          name="emailVerify"
+          validators={{
+            onChange: (field) =>
+              field.value === field.fieldApi.form.getFieldValue("email")
+                ? undefined
+                : "verify email not matching email",
+          }}
+          children={(field) => (
+            <InputField
+              field={field}
+              showIndicator
+              autocomplete="verify-email"
+              placeholder="verify email"
+              disabled={!getLoginPageInputsEnabled()}
+            />
+          )}
+        />
+        <form.Field
+          name="password"
+          validators={{
+            onChange: (field) => {
+              void field.fieldApi.form.validateField(
+                "passwordVerify",
+                "change",
+              );
+              return fromSchema(
+                isDevEnvironment() ? z.string().min(6) : PasswordSchema,
+              )(field);
+            },
+          }}
+          children={(field) => (
+            <InputField
+              field={field}
+              showIndicator
+              autocomplete="new-password"
+              type="password"
+              disabled={!getLoginPageInputsEnabled()}
+            />
+          )}
+        />
+        <form.Field
+          name="passwordVerify"
+          validators={{
+            onChange: (field) =>
+              field.value === field.fieldApi.form.getFieldValue("password")
+                ? undefined
+                : "verify password not matching password",
+          }}
+          children={(field) => (
+            <InputField
+              field={field}
+              showIndicator
+              placeholder="verify password"
+              autocomplete="verify-password"
+              type="password"
+              disabled={!getLoginPageInputsEnabled()}
+            />
+          )}
+        />
+        <SubmitButton
+          form={form}
+          fa={{ icon: "fa-user-plus" }}
+          text="sign up"
+          disabled={!getLoginPageInputsEnabled()}
+        />
+      </form>
+    </div>
+  );
+}
diff --git a/frontend/src/ts/components/pages/profile/ProfileSearchPage.tsx b/frontend/src/ts/components/pages/profile/ProfileSearchPage.tsx
index 0e444db2b50e..953e6f2e5029 100644
--- a/frontend/src/ts/components/pages/profile/ProfileSearchPage.tsx
+++ b/frontend/src/ts/components/pages/profile/ProfileSearchPage.tsx
@@ -1,39 +1,51 @@
 import { UserNameSchema } from "@monkeytype/schemas/users";
+import { createForm } from "@tanstack/solid-form";
 import { createEffect, createSignal, JSXElement, Show } from "solid-js";
 
 import { useRefWithUtils } from "../../../hooks/useRefWithUtils";
 import * as NavigationEvent from "../../../observables/navigation-event";
 import { queryClient } from "../../../queries";
 import { getUserProfile } from "../../../queries/profile";
-import {
-  getActivePage,
-  getSelectedProfileName,
-  setSelectedProfileName,
-} from "../../../signals/core";
-import { Button } from "../../common/Button";
+import { getActivePage } from "../../../signals/core";
+import { showNoticeNotification } from "../../../stores/notifications";
 import { H2 } from "../../common/Headers";
-import { ValidatedInput } from "../../ui/ValidatedInput";
+import { InputField } from "../../ui/form/InputField";
+import { SubmitButton } from "../../ui/form/SubmitButton";
+import { fromSchema } from "../../ui/form/utils";
 
 export function ProfileSearchPage(): JSXElement {
-  const [isValid, setValid] = createSignal(false);
+  const [isEditable, setEditable] = createSignal(true);
   const isOpen = () => getActivePage() === "profileSearch";
 
   // Refs are assigned by SolidJS via the ref attribute
   const [inputRef, inputEl] = useRefWithUtils<HTMLElement>();
 
-  const goToPage = () => {
-    if (isValid()) {
-      NavigationEvent.dispatch(`/profile/${getSelectedProfileName()}`, {});
-    }
-  };
+  const form = createForm(() => ({
+    defaultValues: {
+      username: "",
+    },
+    onSubmit: async ({ value }) => {
+      setEditable(false);
+      try {
+        NavigationEvent.dispatch(`/profile/${value.username}`, {});
+      } finally {
+        setEditable(true);
+      }
+    },
+    onSubmitInvalid: () => {
+      showNoticeNotification("Please fill in all fields");
+    },
+  }));
 
   createEffect(() => {
     if (isOpen()) {
+      form.reset();
       requestAnimationFrame(() => {
         inputEl()?.qs("input")?.focus({ preventScroll: true });
       });
     }
   });
+
   return (
     <Show when={isOpen()}>
       <div class="grid min-h-full place-items-center">
@@ -41,7 +53,8 @@ export function ProfileSearchPage(): JSXElement {
           class="inline-grid w-96 gap-2"
           onSubmit={(e) => {
             e.preventDefault();
-            goToPage();
+            e.stopPropagation();
+            void form.handleSubmit();
           }}
         >
           <div class="text-center">
@@ -50,31 +63,38 @@ export function ProfileSearchPage(): JSXElement {
 
           <div class="flex w-full gap-2 text-xl">
             <div class="flex-1 text-center" ref={inputRef}>
-              <ValidatedInput
-                placeholder="username"
-                schema={UserNameSchema}
-                callback={(result) => setValid(result.success)}
-                // fine unless we read a reactive state after the await
-                // eslint-disable-next-line solid/reactivity
-                isValid={async (name: string) => {
-                  try {
-                    const result = await queryClient.fetchQuery(
-                      getUserProfile(name),
-                    );
-                    setSelectedProfileName(name);
-                    return result !== null || "Unknown user";
-                  } catch (e) {
-                    return "Unknown user or error fetching.";
-                  }
+              <form.Field
+                name="username"
+                validators={{
+                  onChange: fromSchema(UserNameSchema),
+                  onChangeAsyncDebounceMs: 1000,
+                  onChangeAsync: async (field) => {
+                    try {
+                      const result = await queryClient.fetchQuery(
+                        getUserProfile(field.value),
+                      );
+                      return result !== null ? undefined : "Unknown user";
+                    } catch (e) {
+                      return "Unknown user";
+                    }
+                  },
                 }}
+                children={(field) => (
+                  <InputField
+                    field={field}
+                    showIndicator
+                    autocomplete="new-username"
+                    disabled={!isEditable()}
+                  />
+                )}
               />
             </div>
             <div class="text-center">
-              <Button
+              <SubmitButton
+                form={form}
                 class="shrink"
-                fa={{ icon: "fa-chevron-right", fixedWidth: true }}
-                disabled={!isValid()}
-                onClick={() => goToPage()}
+                fa={{ icon: "fa-chevron-right" }}
+                disabled={!isEditable()}
               />
             </div>
           </div>
diff --git a/frontend/src/ts/components/ui/ValidatedInput.tsx b/frontend/src/ts/components/ui/ValidatedInput.tsx
deleted file mode 100644
index 0e75561fc93b..000000000000
--- a/frontend/src/ts/components/ui/ValidatedInput.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import {
-  splitProps,
-  createEffect,
-  JSXElement,
-  onCleanup,
-  onMount,
-} from "solid-js";
-
-import {
-  ValidatedHtmlInputElement,
-  ValidationOptions,
-} from "../../elements/input-validation";
-import { useRefWithUtils } from "../../hooks/useRefWithUtils";
-
-export function ValidatedInput<T = string>(
-  props: ValidationOptions<T> & {
-    value?: string;
-    placeholder?: string;
-    class?: string;
-    onInput?: (value: T) => void;
-  },
-): JSXElement {
-  // Refs are assigned by SolidJS via the ref attribute
-  const [inputRef, inputEl] = useRefWithUtils<HTMLInputElement>();
-
-  let validatedInput: ValidatedHtmlInputElement | undefined;
-
-  createEffect(() => {
-    validatedInput?.setValue(props.value ?? null);
-  });
-
-  onMount(() => {
-    const element = inputEl();
-    if (element === undefined) return;
-
-    const [_, others] = splitProps(props, ["value", "class", "placeholder"]);
-    validatedInput = new ValidatedHtmlInputElement(
-      element,
-      others as ValidationOptions<T>,
-    );
-    validatedInput.setValue(props.value ?? null);
-  });
-
-  onCleanup(() => validatedInput?.remove());
-  return (
-    <input
-      ref={inputRef}
-      type="text"
-      class={props.class}
-      placeholder={props.placeholder}
-      value={props.value ?? ""}
-      onInput={(e) => props.onInput?.(e.target.value as T)}
-    />
-  );
-}
diff --git a/frontend/src/ts/components/ui/form/Checkbox.tsx b/frontend/src/ts/components/ui/form/Checkbox.tsx
new file mode 100644
index 000000000000..c7c89a1f329a
--- /dev/null
+++ b/frontend/src/ts/components/ui/form/Checkbox.tsx
@@ -0,0 +1,54 @@
+import { AnyFieldApi } from "@tanstack/solid-form";
+import { Accessor, JSXElement } from "solid-js";
+
+import { cn } from "../../../utils/cn";
+import { Fa } from "../../common/Fa";
+
+export function Checkbox(props: {
+  field: Accessor<AnyFieldApi>;
+  label?: string;
+  class?: string;
+  disabled?: boolean;
+}): JSXElement {
+  const checked = () => props.field().state.value as boolean;
+
+  return (
+    <div>
+      <label
+        class={cn(
+          "group flex cursor-pointer items-center gap-[0.5em] select-none",
+          props.disabled && "pointer-events-none text-text/33",
+          props.class,
+        )}
+      >
+        <input
+          id={props.field().name as string}
+          name={props.field().name as string}
+          onBlur={() => props.field().handleBlur()}
+          onChange={(e) => props.field().handleChange(e.target.checked)}
+          type="checkbox"
+          checked={checked()}
+          disabled={props.disabled}
+          class="hidden"
+        />
+        <div
+          class={cn(
+            "duration-half relative grid h-[1.25em] w-[1.25em] shrink-0 place-items-center rounded-half bg-sub-alt transition-[background]",
+            props.disabled && "opacity-[0.33]",
+          )}
+        >
+          <Fa
+            icon="fa-check"
+            class={cn(
+              "text-em-xs transition-[color] duration-125",
+              checked()
+                ? "text-main group-hover:text-text"
+                : "text-transparent group-hover:text-bg",
+            )}
+          />
+        </div>
+        <div>{props.label}</div>
+      </label>
+    </div>
+  );
+}
diff --git a/frontend/src/ts/components/ui/form/FieldIndicator.tsx b/frontend/src/ts/components/ui/form/FieldIndicator.tsx
new file mode 100644
index 000000000000..0ec357983036
--- /dev/null
+++ b/frontend/src/ts/components/ui/form/FieldIndicator.tsx
@@ -0,0 +1,58 @@
+import type { AnyFieldApi } from "@tanstack/solid-form";
+
+import { Match, Switch } from "solid-js";
+
+import { Balloon } from "../../common/Balloon";
+import { Fa } from "../../common/Fa";
+import { LoadingCircle } from "../../common/LoadingCircle";
+
+export type FieldIndicatorProps = {
+  field: AnyFieldApi;
+};
+
+export function FieldIndicator(props: FieldIndicatorProps) {
+  //@ts-expect-error custom meta attributes
+  const hasWarning = () => props.field.getMeta().hasWarning as boolean;
+  //@ts-expect-error custom meta attributes
+  const getWarnings = () => props.field.getMeta().warnings as string[];
+  return (
+    <div class="col-start-1 row-start-1 self-center justify-self-end pr-[0.40em]">
+      <Switch>
+        <Match when={props.field.state.meta.isValidating}>
+          <LoadingCircle />
+        </Match>
+        <Match
+          when={
+            props.field.state.meta.isTouched && !props.field.state.meta.isValid
+          }
+        >
+          <Balloon
+            position="left"
+            length="large"
+            text={props.field.state.meta.errors.join(", ")}
+          >
+            <Fa icon="fa-times" class="text-error" fixedWidth />
+          </Balloon>
+        </Match>
+        <Match when={hasWarning()}>
+          <Balloon
+            position="left"
+            length="large"
+            text={getWarnings().join(", ")}
+          >
+            <Fa icon="fa-exclamation-triangle" class="text-main" />
+          </Balloon>
+        </Match>
+        <Match
+          when={
+            props.field.state.meta.isTouched &&
+            props.field.state.meta.isValid &&
+            !props.field.state.meta.isDefaultValue
+          }
+        >
+          <Fa icon="fa-check" class="text-main" fixedWidth />
+        </Match>
+      </Switch>
+    </div>
+  );
+}
diff --git a/frontend/src/ts/components/ui/form/InputField.tsx b/frontend/src/ts/components/ui/form/InputField.tsx
new file mode 100644
index 000000000000..c3c9a3f2fb1e
--- /dev/null
+++ b/frontend/src/ts/components/ui/form/InputField.tsx
@@ -0,0 +1,45 @@
+import { AnyFieldApi } from "@tanstack/solid-form";
+import { Accessor, JSXElement, Show } from "solid-js";
+
+import { cn } from "../../../utils/cn";
+import { FieldIndicator } from "./FieldIndicator";
+
+export function InputField(props: {
+  field: Accessor<AnyFieldApi>;
+  placeholder?: string;
+  showIndicator?: boolean;
+  autocomplete?: string;
+  type?: string;
+  disabled?: boolean;
+  class?: string;
+  onFocus?: () => void;
+}): JSXElement {
+  return (
+    <div class="grid w-full">
+      <input
+        class={cn(
+          "col-start-1 row-start-1 w-full",
+          "rounded border-none bg-sub-alt p-[0.5em] text-em-base leading-[1.25em] caret-main outline-none",
+          "focus-visible:shadow-[0_0_0_0.1rem_var(--bg-color),0_0_0_0.2rem_var(--text-color)]",
+          "autofill-fix",
+          props.showIndicator === true ? "pr-[1.85em]" : "",
+          props.class,
+        )}
+        id={props.field().name as string}
+        type={props.type ?? "text"}
+        placeholder={props.placeholder ?? (props.field().name as string)}
+        // oxlint-disable-next-line react/no-unknown-property
+        autocomplete={props.autocomplete}
+        name={props.field().name as string}
+        value={props.field().state.value as string}
+        onBlur={() => props.field().handleBlur()}
+        onInput={(e) => props.field().handleChange(e.target.value)}
+        disabled={props.disabled}
+        onFocus={() => props.onFocus?.()}
+      />
+      <Show when={props.showIndicator}>
+        <FieldIndicator field={props.field()} />
+      </Show>
+    </div>
+  );
+}
diff --git a/frontend/src/ts/components/ui/form/SubmitButton.tsx b/frontend/src/ts/components/ui/form/SubmitButton.tsx
new file mode 100644
index 000000000000..bca2f98f2817
--- /dev/null
+++ b/frontend/src/ts/components/ui/form/SubmitButton.tsx
@@ -0,0 +1,53 @@
+import { JSXElement, splitProps } from "solid-js";
+
+import { Button, ButtonProps } from "../../common/Button";
+
+type FormStateSlice = {
+  canSubmit: boolean;
+  isSubmitting: boolean;
+  isValid: boolean;
+  isDirty: boolean;
+};
+
+type SubscribableForm = {
+  Subscribe: (props: {
+    selector: (state: {
+      canSubmit: boolean;
+      isSubmitting: boolean;
+      isValid: boolean;
+      isDirty: boolean;
+    }) => FormStateSlice;
+    children: (state: () => FormStateSlice) => JSXElement;
+  }) => JSXElement;
+};
+
+export function SubmitButton(
+  props: {
+    form: SubscribableForm;
+  } & Omit<ButtonProps, "type">,
+): JSXElement {
+  const [local, others] = splitProps(props, ["disabled"]);
+  return (
+    <props.form.Subscribe
+      selector={(state) => ({
+        canSubmit: state.canSubmit,
+        isSubmitting: state.isSubmitting,
+        isValid: state.isValid,
+        isDirty: state.isDirty,
+      })}
+      children={(state) => (
+        <Button
+          type="submit"
+          {...others}
+          disabled={
+            (local.disabled ?? false) ||
+            !state().isDirty ||
+            !state().canSubmit ||
+            state().isSubmitting ||
+            !state().isValid
+          }
+        />
+      )}
+    />
+  );
+}
diff --git a/frontend/src/ts/components/ui/form/utils.ts b/frontend/src/ts/components/ui/form/utils.ts
new file mode 100644
index 000000000000..5f7cb828f2ae
--- /dev/null
+++ b/frontend/src/ts/components/ui/form/utils.ts
@@ -0,0 +1,55 @@
+import { AnyFieldApi } from "@tanstack/solid-form";
+import { ZodSchema } from "zod";
+
+export type ValidationResult = { type: "error" | "warning"; message: string };
+export function fromSchema<T>(
+  schema: ZodSchema<T>,
+): (args: { value: T }) => undefined | string[] {
+  return ({ value }) => {
+    const result = schema.safeParse(value);
+    return result.success
+      ? undefined
+      : result.error.issues.map((it) => it.message);
+  };
+}
+
+export function handleResult(
+  field: AnyFieldApi,
+  results: ValidationResult[] | undefined,
+): undefined | string[] {
+  if (results === undefined || results.length === 0) return undefined;
+
+  const byType = Object.groupBy(results, (it) => it.type);
+
+  if ((byType.warning?.length ?? 0) > 0) {
+    field.setMeta((meta) => ({
+      ...meta,
+      hasWarning: true,
+      warnings: byType.warning?.map((it) => it.message),
+    }));
+  }
+  if ((byType.error?.length ?? 0) > 0) {
+    return byType.error?.map((it) => it.message);
+  }
+  return undefined;
+}
+
+type ValidatorCallback<T> = (args: { value: T }) => string | undefined;
+
+export function allFieldsMandatory<T extends object>(): ValidatorCallback<T> {
+  return ({ value }: { value: T }): string | undefined => {
+    const hasInvalid = Object.values(value).some(
+      (v) => v === undefined || v === "",
+    );
+
+    return hasInvalid ? "all fields are mandatory" : undefined;
+  };
+}
+
+export function fieldMandatory<T>(message?: string): ValidatorCallback<T> {
+  return ({ value }) => {
+    return value !== undefined && value !== ""
+      ? undefined
+      : (message ?? "mandatory");
+  };
+}
diff --git a/frontend/src/ts/constants/typo-list.ts b/frontend/src/ts/constants/typo-list.ts
index 897e45cc60f8..01d0578e254b 100644
--- a/frontend/src/ts/constants/typo-list.ts
+++ b/frontend/src/ts/constants/typo-list.ts
@@ -132,6 +132,7 @@ export default [
   "icloud.ocm",
   "icloud.om",
   "icloud.cm",
+  "example.edu",
 ];
 // source(from line 1 - 48): Generated using ChatGPT
 // source(from line 48 - 127): https://github.com/gruns/typo
diff --git a/frontend/src/ts/controllers/page-controller.ts b/frontend/src/ts/controllers/page-controller.ts
index ee3711c702ef..31428fbc0985 100644
--- a/frontend/src/ts/controllers/page-controller.ts
+++ b/frontend/src/ts/controllers/page-controller.ts
@@ -8,7 +8,6 @@ import {
 import * as Settings from "../pages/settings";
 import * as Account from "../pages/account";
 import * as PageTest from "../pages/test";
-import * as PageLogin from "../pages/login";
 import * as PageLoading from "../pages/loading";
 import * as Friends from "../pages/friends";
 import * as Page404 from "../pages/404";
@@ -45,7 +44,7 @@ const pages = {
   settings: Settings.page,
   about: solidPage("about"),
   account: Account.page,
-  login: PageLogin.page,
+  login: solidPage("login"),
   profile: solidPage("profile", {
     beforeShow: async (options) => {
       setSelectedProfileName(options.params?.["uidOrName"]);
diff --git a/frontend/src/ts/elements/input-indicator.ts b/frontend/src/ts/elements/input-indicator.ts
index 56b65fc3e6a1..fb5d396bd91e 100644
--- a/frontend/src/ts/elements/input-indicator.ts
+++ b/frontend/src/ts/elements/input-indicator.ts
@@ -18,10 +18,17 @@ export class InputIndicator {
     options: Record<string, InputIndicatorOption>,
   ) {
     this.inputElement = inputElement;
-    const wrapper = this.inputElement.wrapWith(
-      `<div class="inputAndIndicator"></div>`,
-    );
-    this.parentElement = wrapper;
+    const existingWrapper = inputElement.native.closest(".inputAndIndicator");
+    if (existingWrapper) {
+      existingWrapper.querySelector(".statusIndicator")?.remove();
+      this.parentElement = new ElementWithUtils(
+        existingWrapper as HTMLInputElement,
+      );
+    } else {
+      this.parentElement = this.inputElement.wrapWith(
+        `<div class="inputAndIndicator"></div>`,
+      );
+    }
     this.options = options;
     this.currentStatus = null;
 
diff --git a/frontend/src/ts/elements/input-validation.ts b/frontend/src/ts/elements/input-validation.ts
index 04d72391037a..60e2ab92ee4d 100644
--- a/frontend/src/ts/elements/input-validation.ts
+++ b/frontend/src/ts/elements/input-validation.ts
@@ -202,6 +202,11 @@ export class ValidatedHtmlInputElement<
   triggerValidation(): void {
     this.dispatch("input");
   }
+
+  destroy(): void {
+    this.indicator.hide();
+    this.remove();
+  }
 }
 
 export type ConfigInputOptions<K extends ConfigKey, T = ConfigType[K]> = {
diff --git a/frontend/src/ts/event-handlers/login.ts b/frontend/src/ts/event-handlers/login.ts
deleted file mode 100644
index 9931a92b41a0..000000000000
--- a/frontend/src/ts/event-handlers/login.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import * as ForgotPasswordModal from "../modals/forgot-password";
-import { qs } from "../utils/dom";
-
-const loginPage = qs("#pageLogin");
-
-loginPage?.onChild("click", "#forgotPasswordButton", () => {
-  ForgotPasswordModal.show();
-});
diff --git a/frontend/src/ts/firebase.ts b/frontend/src/ts/firebase.ts
index 535837f55014..0297c0884f63 100644
--- a/frontend/src/ts/firebase.ts
+++ b/frontend/src/ts/firebase.ts
@@ -220,19 +220,17 @@ function translateFirebaseError(
       message =
         "Email/password is incorrect or your account does not have password authentication enabled.";
     } else if (error.code === "auth/popup-closed-by-user") {
-      message = "";
-      // message = "Popup closed by user";
-      // return;
+      message = "Popup closed by user";
     } else if (error.code === "auth/popup-blocked") {
       message =
         "Sign in popup was blocked by the browser. Check the address bar for a blocked popup icon, or update your browser settings to allow popups.";
     } else if (error.code === "auth/user-cancelled") {
-      message = "";
-      // message = "User refused to sign in";
-      // return;
+      message = "Cancelled by user";
     } else if (error.code === "auth/account-exists-with-different-credential") {
       message =
         "Account already exists, but its using a different authentication method. Try signing in with a different method";
+    } else {
+      message = "Firebase error: " + error.code;
     }
   }
 
diff --git a/frontend/src/ts/index.ts b/frontend/src/ts/index.ts
index dbf659b09532..139fc21de432 100644
--- a/frontend/src/ts/index.ts
+++ b/frontend/src/ts/index.ts
@@ -6,8 +6,6 @@ import "./event-handlers/keymap";
 import "./event-handlers/test";
 import "./event-handlers/settings";
 import "./event-handlers/account";
-import "./event-handlers/login";
-
 import "./modals/google-sign-up";
 
 import { init } from "./firebase";
diff --git a/frontend/src/ts/modals/google-sign-up.ts b/frontend/src/ts/modals/google-sign-up.ts
index 25f9ffcc7833..95b2558ee7e2 100644
--- a/frontend/src/ts/modals/google-sign-up.ts
+++ b/frontend/src/ts/modals/google-sign-up.ts
@@ -11,7 +11,6 @@ import {
   getAdditionalUserInfo,
 } from "firebase/auth";
 import Ape from "../ape";
-import * as LoginPage from "../pages/login";
 import * as AccountController from "../auth";
 import * as CaptchaController from "../controllers/captcha-controller";
 
@@ -62,8 +61,6 @@ async function hide(): Promise<void> {
         showNoticeNotification("Sign up process cancelled", {
           durationMs: 5000,
         });
-        LoginPage.hidePreloader();
-        LoginPage.enableInputs();
         if (getAdditionalUserInfo(signedInUser)?.isNewUser) {
           await Ape.users.delete();
           await signedInUser?.user.delete().catch(() => {
@@ -110,8 +107,6 @@ async function apply(): Promise<void> {
       await updateProfile(signedInUser.user, { displayName: name });
       await sendEmailVerification(signedInUser.user);
       showSuccessNotification("Account created");
-      LoginPage.enableInputs();
-      LoginPage.hidePreloader();
       await AccountController.loadUser(signedInUser.user);
 
       signedInUser = undefined;
@@ -121,9 +116,6 @@ async function apply(): Promise<void> {
   } catch (e) {
     console.log(e);
     showErrorNotification("Failed to sign in with Google", { error: e });
-    LoginPage.hidePreloader();
-    LoginPage.enableInputs();
-    LoginPage.enableSignUpButton();
     if (signedInUser && getAdditionalUserInfo(signedInUser)?.isNewUser) {
       await Ape.users.delete();
       await signedInUser?.user.delete().catch(() => {
diff --git a/frontend/src/ts/pages/login.ts b/frontend/src/ts/pages/login.ts
deleted file mode 100644
index 299bba8ddb5f..000000000000
--- a/frontend/src/ts/pages/login.ts
+++ /dev/null
@@ -1,350 +0,0 @@
-import Ape from "../ape";
-import Page from "./page";
-import * as Skeleton from "../utils/skeleton";
-import TypoList from "../constants/typo-list";
-import {
-  PasswordSchema,
-  UserEmailSchema,
-  UserNameSchema,
-} from "@monkeytype/schemas/users";
-import { ValidatedHtmlInputElement } from "../elements/input-validation";
-import { isDevEnvironment } from "../utils/env";
-import { z } from "zod";
-import { remoteValidation } from "../utils/remote-validation";
-import { qs, qsa, qsr, onDOMReady } from "../utils/dom";
-import { signIn, signInWithGitHub, signInWithGoogle, signUp } from "../auth";
-import {
-  showNoticeNotification,
-  showErrorNotification,
-} from "../stores/notifications";
-import * as ConnectionState from "../states/connection";
-
-let registerForm: {
-  name?: string;
-  email?: string;
-  password?: string;
-} = {};
-
-export function enableSignUpButton(): void {
-  qs(".page.pageLogin .register.side button")?.enable();
-}
-
-export function disableSignUpButton(): void {
-  qs(".page.pageLogin .register.side button")?.disable();
-}
-
-export function enableInputs(): void {
-  qsa(".pageLogin input")?.enable();
-  qsa(".pageLogin button")?.enable();
-}
-
-export function disableInputs(): void {
-  qsa(".pageLogin input")?.disable();
-  qsa(".pageLogin button")?.disable();
-}
-
-export function showPreloader(): void {
-  qs(".pageLogin .preloader")?.show();
-}
-
-export function hidePreloader(): void {
-  qs(".pageLogin .preloader")?.hide();
-}
-
-function isFormComplete(): boolean {
-  return (
-    registerForm.name !== undefined &&
-    registerForm.email !== undefined &&
-    registerForm.password !== undefined
-  );
-}
-
-export const updateSignupButton = (): void => {
-  if (isFormComplete()) {
-    enableSignUpButton();
-  } else {
-    disableSignUpButton();
-  }
-};
-
-type SignupData = {
-  name: string;
-  email: string;
-  password: string;
-};
-export function getSignupData(): SignupData | false {
-  return isFormComplete() ? (registerForm as SignupData) : false;
-}
-
-const nameInputEl = qsr<HTMLInputElement>(
-  ".page.pageLogin .register.side input.usernameInput",
-);
-new ValidatedHtmlInputElement(nameInputEl, {
-  schema: UserNameSchema,
-  isValid: remoteValidation(
-    async (name) => Ape.users.getNameAvailability({ params: { name } }),
-    { check: (data) => data.available || "Name not available" },
-  ),
-  debounceDelay: 1000,
-  callback: (result) => {
-    registerForm.name =
-      result.status === "success" ? nameInputEl?.getValue() : undefined;
-    updateSignupButton();
-  },
-});
-
-let disposableEmailModule: typeof import("disposable-email-domains-js") | null =
-  null;
-let moduleLoadAttempted = false;
-
-const emailInputEl = new ValidatedHtmlInputElement(
-  qsr(".page.pageLogin .register.side input.emailInput"),
-  {
-    schema: UserEmailSchema,
-    isValid: async (email: string) => {
-      const educationRegex =
-        /@.*(student|education|school|\.edu$|\.edu\.|\.ac\.|\.sch\.)/i;
-      if (educationRegex.test(email)) {
-        return {
-          warning:
-            "Some education emails will fail to receive our messages, or disable the account as soon as you graduate. Consider using a personal email address.",
-        };
-      }
-
-      const emailHasTypo = TypoList.some((typo) => {
-        return email.endsWith(typo);
-      });
-      if (emailHasTypo) {
-        return {
-          warning: "Please check your email address, it may contain a typo.",
-        };
-      }
-
-      if (
-        disposableEmailModule &&
-        disposableEmailModule.isDisposableEmail !== undefined
-      ) {
-        try {
-          if (disposableEmailModule.isDisposableEmail(email)) {
-            return {
-              warning:
-                "Using a temporary email may cause issues with logging in, password resets and support. Consider using a permanent email address. Don't worry, we don't send spam.",
-            };
-          }
-        } catch (e) {
-          // Silent failure
-        }
-      }
-
-      return true;
-    },
-    debounceDelay: 0,
-    callback: (result) => {
-      if (result.status === "success") {
-        //re-validate the verify email
-        emailVerifyInputEl?.dispatch("input");
-      }
-    },
-  },
-);
-
-emailInputEl.on("focus", async () => {
-  if (!moduleLoadAttempted) {
-    moduleLoadAttempted = true;
-    try {
-      disposableEmailModule = await import("disposable-email-domains-js");
-    } catch (e) {
-      // Silent failure
-    }
-  }
-});
-
-const emailVerifyInputEl = qsr<HTMLInputElement>(
-  ".page.pageLogin .register.side input.verifyEmailInput",
-);
-new ValidatedHtmlInputElement(emailVerifyInputEl, {
-  isValid: async (emailVerify: string) => {
-    return emailInputEl.getValue() === emailVerify
-      ? true
-      : "verify email not matching email";
-  },
-  debounceDelay: 0,
-  callback: (result) => {
-    registerForm.email =
-      emailInputEl.getValidationResult().status === "success" &&
-      result.status === "success"
-        ? emailInputEl.getValue()
-        : undefined;
-    updateSignupButton();
-  },
-});
-
-const passwordInputEl = new ValidatedHtmlInputElement(
-  qsr(".page.pageLogin .register.side .passwordInput"),
-  {
-    schema: isDevEnvironment() ? z.string().min(6) : PasswordSchema,
-    callback: (result) => {
-      if (result.status === "success") {
-        //re-validate the verify password
-        passwordVerifyInputEl?.dispatch("input");
-      }
-    },
-  },
-);
-
-const passwordVerifyInputEl = qsr<HTMLInputElement>(
-  ".page.pageLogin .register.side .verifyPasswordInput",
-);
-new ValidatedHtmlInputElement(passwordVerifyInputEl, {
-  isValid: async (passwordVerify: string) => {
-    return passwordInputEl.getValue() === passwordVerify
-      ? true
-      : "verify password not matching password";
-  },
-  debounceDelay: 0,
-  callback: (result) => {
-    registerForm.password =
-      passwordInputEl.getValidationResult().status === "success" &&
-      result.status === "success"
-        ? passwordInputEl.getValue()
-        : undefined;
-    updateSignupButton();
-  },
-});
-
-qs(".pageLogin .login button.signInWithGoogle")?.on("click", async () => {
-  if (!ConnectionState.get()) {
-    showNoticeNotification("You are offline");
-    return;
-  }
-
-  const rememberMe =
-    qs<HTMLInputElement>(".pageLogin .login #rememberMe input")?.isChecked() ??
-    false;
-
-  showPreloader();
-  disableInputs();
-  disableSignUpButton();
-  const data = await signInWithGoogle(rememberMe);
-  hidePreloader();
-
-  if (!data.success) {
-    showErrorNotification(data.message);
-    enableInputs();
-    enableSignUpButton();
-  }
-});
-
-qs(".pageLogin .login form")?.on("submit", async (e) => {
-  e.preventDefault();
-
-  if (!ConnectionState.get()) {
-    showNoticeNotification("You are offline");
-    return;
-  }
-
-  const email =
-    qsa<HTMLInputElement>(".pageLogin .login input")?.[0]?.getValue() ?? "";
-  const password =
-    qsa<HTMLInputElement>(".pageLogin .login input")?.[1]?.getValue() ?? "";
-  const rememberMe =
-    qs<HTMLInputElement>(".pageLogin .login #rememberMe input")?.isChecked() ??
-    false;
-
-  if (email === "" || password === "") {
-    showNoticeNotification("Please fill in all fields");
-    return;
-  }
-
-  showPreloader();
-  disableInputs();
-  disableSignUpButton();
-  const data = await signIn(email, password, rememberMe);
-  hidePreloader();
-
-  if (!data.success) {
-    showErrorNotification(data.message);
-    enableInputs();
-    enableSignUpButton();
-  }
-});
-
-qs(".pageLogin .login button.signInWithGitHub")?.on("click", async () => {
-  if (!ConnectionState.get()) {
-    showNoticeNotification("You are offline");
-    return;
-  }
-
-  const rememberMe =
-    qs<HTMLInputElement>(".pageLogin .login #rememberMe input")?.isChecked() ??
-    false;
-
-  showPreloader();
-  disableInputs();
-  disableSignUpButton();
-  const data = await signInWithGitHub(rememberMe);
-  hidePreloader();
-
-  if (!data.success) {
-    showErrorNotification(data.message);
-    enableInputs();
-    enableSignUpButton();
-  }
-});
-
-qs(".pageLogin .register form")?.on("submit", async (e) => {
-  e.preventDefault();
-
-  if (!ConnectionState.get()) {
-    showNoticeNotification("You are offline");
-    return;
-  }
-
-  const signupData = getSignupData();
-  if (signupData === false) {
-    showNoticeNotification("Please fill in all fields");
-    return;
-  }
-
-  showPreloader();
-  disableInputs();
-  disableSignUpButton();
-
-  const data = await signUp(
-    signupData.name,
-    signupData.email,
-    signupData.password,
-  );
-
-  hidePreloader();
-  if (!data.success) {
-    showErrorNotification(data.message);
-    enableInputs();
-    enableSignUpButton();
-  }
-});
-
-export const page = new Page({
-  id: "login",
-  element: qsr(".page.pageLogin"),
-  path: "/login",
-  afterHide: async (): Promise<void> => {
-    hidePreloader();
-    Skeleton.remove("pageLogin");
-  },
-  beforeShow: async (): Promise<void> => {
-    Skeleton.append("pageLogin", "main");
-    registerForm = {};
-    const inputs = qsa<HTMLInputElement>(".pageLogin input");
-    inputs.forEach((input) => {
-      input.setValue("");
-    });
-    qsa(".pageLogin .register .indicator")?.hide();
-    enableInputs();
-    disableSignUpButton();
-  },
-});
-
-onDOMReady(() => {
-  Skeleton.save("pageLogin");
-});
diff --git a/frontend/src/ts/ready.ts b/frontend/src/ts/ready.ts
index 117a81051a75..2d0ef5a46493 100644
--- a/frontend/src/ts/ready.ts
+++ b/frontend/src/ts/ready.ts
@@ -28,13 +28,7 @@ onDOMReady(async () => {
     duration: Misc.applyReducedMotion(250),
   });
 
-  void ServerConfiguration.sync().then(() => {
-    if (!ServerConfiguration.get()?.users.signUp) {
-      qs(".register")?.hide();
-      qs(".login")?.hide();
-      qs(".disabledNotification")?.show();
-    }
-  });
+  void ServerConfiguration.sync();
 
   MonkeyPower.init();
 
diff --git a/frontend/src/ts/stores/login.ts b/frontend/src/ts/stores/login.ts
new file mode 100644
index 000000000000..1073132fc9f0
--- /dev/null
+++ b/frontend/src/ts/stores/login.ts
@@ -0,0 +1,9 @@
+import { createSignalWithSetters } from "../hooks/createSignalWithSetters";
+
+export const [
+  getLoginPageInputsEnabled,
+  { enableLoginPageInputs, disableLoginPageInputs },
+] = createSignalWithSetters(true)({
+  enableLoginPageInputs: (set) => set(true),
+  disableLoginPageInputs: (set) => set(false),
+});
diff --git a/frontend/src/ts/utils/remote-validation.ts b/frontend/src/ts/utils/remote-validation.ts
index ce34428401ed..240aefb3dc6f 100644
--- a/frontend/src/ts/utils/remote-validation.ts
+++ b/frontend/src/ts/utils/remote-validation.ts
@@ -1,6 +1,8 @@
 import { IsValidResponse } from "../types/validation";
+import { AnyFieldApi } from "@tanstack/solid-form";
+import { handleResult } from "../components/ui/form/utils";
 
-type IsValidResonseOrFunction =
+type IsValidResponseOrFunction =
   | ((message: string) => IsValidResponse)
   | IsValidResponse;
 export function remoteValidation<V, T>(
@@ -9,8 +11,8 @@ export function remoteValidation<V, T>(
   ) => Promise<{ status: number; body: { data?: T; message: string } }>,
   options?: {
     check?: (data: T) => IsValidResponse;
-    on4xx?: IsValidResonseOrFunction;
-    on5xx?: IsValidResonseOrFunction;
+    on4xx?: IsValidResponseOrFunction;
+    on5xx?: IsValidResponseOrFunction;
   },
 ): (val: V) => Promise<IsValidResponse> {
   return async (val) => {
@@ -19,7 +21,7 @@ export function remoteValidation<V, T>(
       return options?.check?.(result.body.data as T) ?? true;
     }
 
-    let handler: IsValidResonseOrFunction | undefined;
+    let handler: IsValidResponseOrFunction | undefined;
     if (result.status <= 499) {
       handler = options?.on4xx ?? ((message) => message);
     } else {
@@ -30,3 +32,49 @@ export function remoteValidation<V, T>(
     return handler;
   };
 }
+
+export function remoteValidationForm<V, T>(
+  call: (
+    val: V,
+  ) => Promise<{ status: number; body: { data?: T; message: string } }>,
+  options?: {
+    check?: (data: T) => IsValidResponse;
+    on4xx?: IsValidResponseOrFunction;
+    on5xx?: IsValidResponseOrFunction;
+  },
+): (val: {
+  value: V;
+  fieldApi: AnyFieldApi;
+}) => Promise<undefined | string | string[]> {
+  return async (val: { value: V; fieldApi: AnyFieldApi }) => {
+    let validationResult;
+
+    const result = await call(val.value);
+    if (result.status <= 299) {
+      validationResult = options?.check?.(result.body.data as T) ?? undefined;
+    } else {
+      let handler: IsValidResponseOrFunction | undefined;
+      if (result.status <= 499) {
+        handler = options?.on4xx ?? ((message) => message);
+      } else {
+        handler =
+          options?.on5xx ?? "Server unavailable. Please try again later.";
+      }
+
+      if (typeof handler === "function") {
+        validationResult = handler(result.body.message);
+      } else {
+        validationResult = handler;
+      }
+    }
+
+    if (validationResult === true || validationResult === undefined) {
+      return undefined;
+    }
+    if (typeof validationResult === "string") return validationResult;
+
+    return handleResult(val.fieldApi, [
+      { type: "warning", message: validationResult.warning },
+    ]);
+  };
+}
diff --git a/frontend/storybook/stories/Checkbox.stories.tsx b/frontend/storybook/stories/Checkbox.stories.tsx
new file mode 100644
index 000000000000..8b3603700ab4
--- /dev/null
+++ b/frontend/storybook/stories/Checkbox.stories.tsx
@@ -0,0 +1,64 @@
+import preview from "#.storybook/preview";
+import { AnyFieldApi } from "@tanstack/solid-form";
+import { Accessor, Component, createSignal } from "solid-js";
+
+import { Checkbox } from "../../src/ts/components/ui/form/Checkbox";
+
+function createFieldMock(options: { name?: string; value?: boolean }) {
+  const [value, setValue] = createSignal(options.value ?? false);
+  return {
+    name: options.name ?? "test",
+    get state() {
+      return { value: value() };
+    },
+    handleChange(v: boolean) {
+      setValue(v);
+    },
+    handleBlur() {},
+  } as unknown as AnyFieldApi;
+}
+
+const meta = preview.meta({
+  title: "UI/Form/Checkbox",
+  component: Checkbox as Component<{
+    field: Accessor<AnyFieldApi>;
+    label?: string;
+    disabled?: boolean;
+  }>,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    label: { control: "text" },
+    disabled: { control: "boolean" },
+  },
+});
+
+export const Default = meta.story({
+  render: () => {
+    const unchecked = createFieldMock({});
+    const checked = createFieldMock({ value: true });
+    const checked2xl = createFieldMock({ value: true });
+    const disabledUnchecked = createFieldMock({});
+    const disabledChecked = createFieldMock({ value: true });
+    const withLabel = createFieldMock({ value: true });
+
+    return (
+      <div class="grid grid-cols-[auto_auto] items-center gap-x-4 gap-y-3 text-text">
+        <div class="text-xs text-sub">Unchecked</div>
+        <Checkbox field={() => unchecked} />
+        <div class="text-xs text-sub">Checked</div>
+        <Checkbox field={() => checked} />
+        <div class="text-xs text-sub">Checked 2xl</div>
+        <Checkbox class="text-2xl" field={() => checked2xl} />
+        <div class="text-xs text-sub">Disabled</div>
+        <Checkbox field={() => disabledUnchecked} disabled={true} />
+        <div class="text-xs text-sub">Disabled Checked</div>
+        <Checkbox field={() => disabledChecked} disabled={true} />
+        <div class="text-xs text-sub">With Label</div>
+        <Checkbox field={() => withLabel} label="checkbox" />
+      </div>
+    );
+  },
+});
diff --git a/frontend/storybook/stories/FieldIndicator.stories.tsx b/frontend/storybook/stories/FieldIndicator.stories.tsx
new file mode 100644
index 000000000000..a85cc2ce8f12
--- /dev/null
+++ b/frontend/storybook/stories/FieldIndicator.stories.tsx
@@ -0,0 +1,90 @@
+import preview from "#.storybook/preview";
+import { AnyFieldApi } from "@tanstack/solid-form";
+import { Component } from "solid-js";
+
+import { FieldIndicator } from "../../src/ts/components/ui/form/FieldIndicator";
+
+type MetaState = {
+  isTouched?: boolean;
+  isValid?: boolean;
+  isValidating?: boolean;
+  errors?: string[];
+  hasWarning?: boolean;
+  warnings?: string[];
+};
+
+function createFieldMock(meta: MetaState) {
+  const stateMeta = {
+    isTouched: true,
+    isValid: true,
+    isValidating: false,
+    errors: [],
+    ...meta,
+  };
+
+  return {
+    get state() {
+      return {
+        meta: stateMeta,
+      };
+    },
+
+    getMeta() {
+      return {
+        hasWarning: meta.hasWarning ?? false,
+        warnings: meta.warnings ?? [],
+      };
+    },
+  } as unknown as AnyFieldApi;
+}
+
+const meta = preview.meta({
+  title: "UI/Form/FieldIndicator",
+  component: FieldIndicator as Component<{
+    field?: AnyFieldApi;
+  }>,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+});
+
+export const Validating = meta.story({
+  args: {
+    field: createFieldMock({
+      isValidating: true,
+    }),
+  },
+});
+
+export const Warning = meta.story({
+  args: {
+    field: createFieldMock({
+      isValid: true,
+      hasWarning: true,
+      warnings: ["are you sure?", "are you really sure?"],
+    }),
+  },
+});
+
+export const Valid = meta.story({
+  args: {
+    field: createFieldMock({
+      isValid: true,
+    }),
+  },
+});
+
+export const Error = meta.story({
+  args: {
+    field: createFieldMock({
+      isValid: false,
+      errors: [
+        "Failed validation",
+        "Extra error",
+        "very very very very very very very very very long error",
+      ],
+    }),
+  },
+});
diff --git a/frontend/storybook/stories/Form.stories.tsx b/frontend/storybook/stories/Form.stories.tsx
new file mode 100644
index 000000000000..54296e4f806e
--- /dev/null
+++ b/frontend/storybook/stories/Form.stories.tsx
@@ -0,0 +1,108 @@
+import preview from "#.storybook/preview";
+import { createForm } from "@tanstack/solid-form";
+import { createSignal } from "solid-js";
+import { z } from "zod";
+
+import { Checkbox } from "../../src/ts/components/ui/form/Checkbox";
+import { InputField } from "../../src/ts/components/ui/form/InputField";
+import { SubmitButton } from "../../src/ts/components/ui/form/SubmitButton";
+import {
+  fieldMandatory,
+  fromSchema,
+} from "../../src/ts/components/ui/form/utils";
+import { showNoticeNotification } from "../../src/ts/stores/notifications";
+import { sleep } from "../../src/ts/utils/misc";
+
+const meta = preview.meta({
+  title: "UI/Form",
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+});
+
+export const withValidation = meta.story({
+  render: () => {
+    const form = createForm(() => ({
+      defaultValues: {
+        username: "",
+        password: "",
+        rememberMe: true,
+      },
+      onSubmit: async () => {
+        setEditable(false);
+        await sleep(1000);
+        setEditable(true);
+      },
+      onSubmitInvalid: () => {
+        showNoticeNotification("Please fill in all fields");
+      },
+    }));
+
+    const [isEditable, setEditable] = createSignal(true);
+
+    return (
+      <form
+        class="grid w-full gap-2"
+        onSubmit={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          void form.handleSubmit();
+        }}
+      >
+        <form.Field
+          name="username"
+          validators={{
+            onChange: fromSchema(z.string().min(3).max(5)),
+            onChangeAsyncDebounceMs: 250,
+            onChangeAsync: async ({ value }) => {
+              await sleep(500);
+              return value === "kevin" ? undefined : "you must be kevin";
+            },
+          }}
+          children={(field) => (
+            <InputField
+              field={field}
+              showIndicator
+              autocomplete="current-user"
+              disabled={!isEditable()}
+            />
+          )}
+        />
+        <form.Field
+          name="password"
+          validators={{
+            onChange: fieldMandatory(),
+          }}
+          children={(field) => (
+            <InputField
+              field={field}
+              type="password"
+              showIndicator
+              autocomplete="current-password"
+              disabled={!isEditable()}
+            />
+          )}
+        />
+        <form.Field
+          name="rememberMe"
+          children={(field) => (
+            <Checkbox
+              field={field}
+              disabled={!isEditable()}
+              label="remember me"
+            />
+          )}
+        />
+
+        <SubmitButton
+          form={form}
+          fa={{ icon: "fa-sign-in-alt" }}
+          text="sign in"
+          disabled={!isEditable()}
+        />
+      </form>
+    );
+  },
+});
diff --git a/frontend/storybook/stories/InputField.stories.tsx b/frontend/storybook/stories/InputField.stories.tsx
new file mode 100644
index 000000000000..2118782f5aa6
--- /dev/null
+++ b/frontend/storybook/stories/InputField.stories.tsx
@@ -0,0 +1,109 @@
+import preview from "#.storybook/preview";
+import { AnyFieldApi } from "@tanstack/solid-form";
+import { Component, Accessor } from "solid-js";
+
+import { InputField } from "../../src/ts/components/ui/form/InputField";
+
+type MetaState = {
+  isTouched?: boolean;
+  isValid?: boolean;
+  isValidating?: boolean;
+  errors?: string[];
+  hasWarning?: boolean;
+  warnings?: string[];
+};
+
+function createFieldMock(options: {
+  name?: string;
+  value?: string;
+  meta?: MetaState;
+}) {
+  const stateMeta = {
+    isTouched: true,
+    isValid: true,
+    isValidating: false,
+    errors: [],
+    ...(options.meta ?? {}),
+  };
+  return {
+    name: options.name ?? "test",
+    get state() {
+      return {
+        value: options.value ?? "",
+        meta: stateMeta,
+      };
+    },
+    getMeta() {
+      return {
+        hasWarning: options.meta?.hasWarning ?? false,
+        warnings: options.meta?.warnings ?? [],
+      };
+    },
+  } as unknown as AnyFieldApi;
+}
+
+const meta = preview.meta({
+  title: "UI/Form/InputField",
+  component: InputField as Component<{
+    field: Accessor<AnyFieldApi>;
+    placeholder?: string;
+    showIndicator?: true;
+    autocomplete?: string;
+    type?: string;
+    disabled?: boolean;
+    onFocus?: () => void;
+  }>,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    placeholder: { control: "text" },
+    showIndicator: { control: "boolean" },
+    autocomplete: { control: "text" },
+    type: { control: "text" },
+    disabled: { control: "boolean" },
+  },
+});
+
+export const Default = meta.story({
+  args: {
+    field: () => createFieldMock({}),
+  },
+});
+
+export const withIndicator = meta.story({
+  args: {
+    showIndicator: true,
+    field: () => createFieldMock({}),
+  },
+});
+
+export const withPlaceholder = meta.story({
+  args: {
+    placeholder: "placeholder",
+    field: () => createFieldMock({}),
+  },
+});
+
+export const withAutocomplete = meta.story({
+  args: {
+    autocomplete: "autocomplete",
+    field: () => createFieldMock({}),
+  },
+});
+
+export const withTypePassword = meta.story({
+  args: {
+    type: "password",
+    placeholder: "password",
+    field: () => createFieldMock({ value: "test" }),
+  },
+});
+
+export const disabled = meta.story({
+  args: {
+    disabled: true,
+    field: () => createFieldMock({ value: "test", meta: { isValid: true } }),
+  },
+});
diff --git a/frontend/storybook/stories/ValidatedInput.stories.tsx b/frontend/storybook/stories/ValidatedInput.stories.tsx
deleted file mode 100644
index ab59122aeee4..000000000000
--- a/frontend/storybook/stories/ValidatedInput.stories.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import preview from "#.storybook/preview";
-import { Component } from "solid-js";
-import { z } from "zod";
-
-import { ValidatedInput } from "../../src/ts/components/ui/ValidatedInput";
-
-const meta = preview.meta({
-  title: "UI/ValidatedInput",
-  component: ValidatedInput as Component<{
-    value?: string;
-    placeholder?: string;
-    class?: string;
-  }>,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    value: { control: "text" },
-    placeholder: { control: "text" },
-    class: { control: "text" },
-  },
-});
-
-export const Default = meta.story({
-  args: {
-    placeholder: "Type something...",
-  },
-});
-
-export const WithValue = meta.story({
-  args: {
-    placeholder: "Enter a value",
-    value: "hello",
-  },
-});
-
-export const WithSchemaValidation = meta.story({
-  render: () => (
-    <ValidatedInput
-      placeholder="Enter 3-20 characters..."
-      schema={z.string().min(3, "Too short").max(20, "Too long")}
-    />
-  ),
-});
-
-export const AllVariants = meta.story({
-  render: () => (
-    <div style={{ display: "flex", "flex-direction": "column", gap: "16px" }}>
-      <div>
-        <div
-          style={{
-            "font-size": "12px",
-            color: "var(--sub-color)",
-            "margin-bottom": "4px",
-          }}
-        >
-          Empty
-        </div>
-        <ValidatedInput placeholder="Type something..." />
-      </div>
-      <div>
-        <div
-          style={{
-            "font-size": "12px",
-            color: "var(--sub-color)",
-            "margin-bottom": "4px",
-          }}
-        >
-          With value
-        </div>
-        <ValidatedInput placeholder="Enter a value" value="hello" />
-      </div>
-      <div>
-        <div
-          style={{
-            "font-size": "12px",
-            color: "var(--sub-color)",
-            "margin-bottom": "4px",
-          }}
-        >
-          With schema (3-20 chars)
-        </div>
-        <ValidatedInput
-          placeholder="Enter 3-20 characters..."
-          schema={z.string().min(3, "Too short").max(20, "Too long")}
-        />
-      </div>
-    </div>
-  ),
-});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f9fa42fe155b..19371906c90e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -271,8 +271,8 @@ importers:
         specifier: 1.2.0
         version: 1.2.0
       '@leonabcd123/modern-caps-lock':
-        specifier: 2.2.2
-        version: 2.2.2
+        specifier: 3.0.4
+        version: 3.0.4
       '@monkeytype/contracts':
         specifier: workspace:*
         version: link:../packages/contracts
@@ -312,6 +312,9 @@ importers:
       '@tanstack/solid-db':
         specifier: 0.2.10
         version: 0.2.10(solid-js@1.9.10)(typescript@6.0.0-beta)
+      '@tanstack/solid-form':
+        specifier: 1.28.4
+        version: 1.28.4(solid-js@1.9.10)
       '@tanstack/solid-query':
         specifier: 5.90.23
         version: 5.90.23(solid-js@1.9.10)
@@ -2366,8 +2369,8 @@ packages:
   '@kwsites/promise-deferred@1.1.1':
     resolution: {integrity: sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==}
 
-  '@leonabcd123/modern-caps-lock@2.2.2':
-    resolution: {integrity: sha512-0e8onO4ovdeVj9d/1Ddl1q7nq/p+PNsLscp1yOXQLOiyANUCLq41/H8qh5RDZAOs6j9yNzyxlP5h4o8u2HCwFA==}
+  '@leonabcd123/modern-caps-lock@3.0.4':
+    resolution: {integrity: sha512-GUUlmHBu3r6H9KaE9sCxqr0iTSLMev7vdzoovrotyaTSS+AtOrJNdptlWf2DnYAHG8U4EJ++mjyUJdNDjaYI9Q==}
 
   '@mapbox/node-pre-gyp@1.0.11':
     resolution: {integrity: sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==}
@@ -3648,6 +3651,10 @@ packages:
     peerDependencies:
       typescript: '>=4.7'
 
+  '@tanstack/devtools-event-client@0.4.1':
+    resolution: {integrity: sha512-GRxmPw4OHZ2oZeIEUkEwt/NDvuEqzEYRAjzUVMs+I0pd4C7k1ySOiuJK2CqF+K/yEAR3YZNkW3ExrpDarh9Vwg==}
+    engines: {node: '>=18'}
+
   '@tanstack/eslint-plugin-query@5.91.4':
     resolution: {integrity: sha512-8a+GAeR7oxJ5laNyYBQ6miPK09Hi18o5Oie/jx8zioXODv/AUFLZQecKabPdpQSLmuDXEBPKFh+W5DKbWlahjQ==}
     peerDependencies:
@@ -3657,6 +3664,13 @@ packages:
       typescript:
         optional: true
 
+  '@tanstack/form-core@1.28.4':
+    resolution: {integrity: sha512-2eox5ePrJ6kvA1DXD5QHk/GeGr3VFZ0uYR63UgQOe7bUg6h1JfXaIMqTjZK9sdGyE4oRNqFpoW54H0pZM7nObQ==}
+
+  '@tanstack/pacer-lite@0.1.1':
+    resolution: {integrity: sha512-y/xtNPNt/YeyoVxE/JCx+T7yjEzpezmbb+toK8DDD1P4m7Kzs5YR956+7OKexG3f8aXgC3rLZl7b1V+yNUSy5w==}
+    engines: {node: '>=18'}
+
   '@tanstack/pacer-lite@0.2.1':
     resolution: {integrity: sha512-3PouiFjR4B6x1c969/Pl4ZIJleof1M0n6fNX8NRiC9Sqv1g06CVDlEaXUR4212ycGFyfq4q+t8Gi37Xy+z34iQ==}
     engines: {node: '>=18'}
@@ -3678,6 +3692,11 @@ packages:
     peerDependencies:
       solid-js: '>=1.9.0'
 
+  '@tanstack/solid-form@1.28.4':
+    resolution: {integrity: sha512-ZhA/oQQJzfY0Un5XFiHbfCwuWyShATHIajdx6xjcm34g0xpwoioGyxAPm7pXLpnUAzln0liCkKX+L77rKj3/6A==}
+    peerDependencies:
+      solid-js: '>=1.9.9'
+
   '@tanstack/solid-query-devtools@5.91.3':
     resolution: {integrity: sha512-xzVwIIxQPbiublZP3RkGp8KVjt8zenv5y1YTSRarP32mLUHJgfdofvjsDvMEhhL/lomz90qa0jCIGsSxoSTyYQ==}
     peerDependencies:
@@ -3689,12 +3708,20 @@ packages:
     peerDependencies:
       solid-js: ^1.6.0
 
+  '@tanstack/solid-store@0.9.2':
+    resolution: {integrity: sha512-W6D6WnIL0Fch2zcLd7qCFf3eLD6AqwZiPoQnoRFKhe8DFXdxM4GRvfLpsAIQQHsun97EcttbwbfVq14SZfT7jg==}
+    peerDependencies:
+      solid-js: ^1.6.0
+
   '@tanstack/solid-table@8.21.3':
     resolution: {integrity: sha512-PmhfSLBxVKiFs01LtYOYrCRhCyTUjxmb4KlxRQiqcALtip8+DOJeeezQM4RSX/GUS0SMVHyH/dNboCpcO++k2A==}
     engines: {node: '>=12'}
     peerDependencies:
       solid-js: '>=1.3'
 
+  '@tanstack/store@0.9.2':
+    resolution: {integrity: sha512-K013lUJEFJK2ofFQ/hZKJUmCnpcV00ebLyOyFOWQvyQHUOZp/iYO84BM6aOGiV81JzwbX0APTVmW8YI7yiG5oA==}
+
   '@tanstack/table-core@8.21.3':
     resolution: {integrity: sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==}
     engines: {node: '>=12'}
@@ -12458,7 +12485,7 @@ snapshots:
 
   '@kwsites/promise-deferred@1.1.1': {}
 
-  '@leonabcd123/modern-caps-lock@2.2.2': {}
+  '@leonabcd123/modern-caps-lock@3.0.4': {}
 
   '@mapbox/node-pre-gyp@1.0.11(encoding@0.1.13)':
     dependencies:
@@ -13649,6 +13676,8 @@ snapshots:
       '@tanstack/pacer-lite': 0.2.1
       typescript: 6.0.0-beta
 
+  '@tanstack/devtools-event-client@0.4.1': {}
+
   '@tanstack/eslint-plugin-query@5.91.4(eslint@9.39.1(jiti@2.6.1))(typescript@6.0.0-beta)':
     dependencies:
       '@typescript-eslint/utils': 8.52.0(eslint@9.39.1(jiti@2.6.1))(typescript@6.0.0-beta)
@@ -13658,6 +13687,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@tanstack/form-core@1.28.4':
+    dependencies:
+      '@tanstack/devtools-event-client': 0.4.1
+      '@tanstack/pacer-lite': 0.1.1
+      '@tanstack/store': 0.9.2
+
+  '@tanstack/pacer-lite@0.1.1': {}
+
   '@tanstack/pacer-lite@0.2.1': {}
 
   '@tanstack/query-core@5.90.20': {}
@@ -13679,6 +13716,12 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
+  '@tanstack/solid-form@1.28.4(solid-js@1.9.10)':
+    dependencies:
+      '@tanstack/form-core': 1.28.4
+      '@tanstack/solid-store': 0.9.2(solid-js@1.9.10)
+      solid-js: 1.9.10
+
   '@tanstack/solid-query-devtools@5.91.3(@tanstack/solid-query@5.90.23(solid-js@1.9.10))(solid-js@1.9.10)':
     dependencies:
       '@tanstack/query-devtools': 5.93.0
@@ -13690,11 +13733,18 @@ snapshots:
       '@tanstack/query-core': 5.90.20
       solid-js: 1.9.10
 
+  '@tanstack/solid-store@0.9.2(solid-js@1.9.10)':
+    dependencies:
+      '@tanstack/store': 0.9.2
+      solid-js: 1.9.10
+
   '@tanstack/solid-table@8.21.3(solid-js@1.9.10)':
     dependencies:
       '@tanstack/table-core': 8.21.3
       solid-js: 1.9.10
 
+  '@tanstack/store@0.9.2': {}
+
   '@tanstack/table-core@8.21.3': {}
 
   '@testing-library/dom@10.4.1':