diff --git a/frontend/components/ContactButton.tsx b/frontend/components/ContactButton.tsx
new file mode 100644
index 00000000..3038dc75
--- /dev/null
+++ b/frontend/components/ContactButton.tsx
@@ -0,0 +1,14 @@
+import { FC } from "react";
+import Button from "./Button";
+import { CONTACT_MODAL_KEY } from "./ContactModal";
+import { useURLQueryModal } from "./Modal";
+
+const ContactButton: FC = () => {
+  const modal = useURLQueryModal(CONTACT_MODAL_KEY);
+
+  return (
+    <Button variant="secondary" label="Contact" onClick={() => modal.open()} />
+  );
+};
+
+export { ContactButton };
diff --git a/frontend/components/ContactModal.tsx b/frontend/components/ContactModal.tsx
new file mode 100644
index 00000000..5d11b9f4
--- /dev/null
+++ b/frontend/components/ContactModal.tsx
@@ -0,0 +1,134 @@
+import { FC, FormEvent } from "react";
+import { useForm } from "utils/useForm";
+import { z } from "zod";
+import { Article } from "./Article";
+import Button from "./Button";
+import { Modal, useURLQueryModal } from "./Modal";
+import { useNotify } from "./Notifications";
+import TextArea from "./TextArea";
+import TextInput from "./TextInput";
+
+const CONTACT_MODAL_KEY = "contact";
+
+const Contact = z.object({
+  name: z.string().min(1, "Required"),
+  institution: z.string().optional(),
+  address: z.string().min(1, "Required"),
+  subject: z.string().min(1, "Required"),
+  message: z.string().min(1, "Required"),
+});
+
+type Contact = z.infer<typeof Contact>;
+
+const SENDER_INTRODUCTION = `Please share your contact details to enable us to address your query promptly. Your full name and email address are essential for us to send you a response. If you're associated with an institution and you think it's relevant to your message, feel free to include that information as well, though it's completely optional. We assure you that your details will be kept confidential and used solely for communication purposes related to your inquiry.`;
+const MESSAGE_INTRODUCTION = `Kindly provide a concise description of your purpose for reaching out. Whether you're interested in collaborating with our research, offering feedback on our data, or sharing insights about our web application, we invite you to outline your thoughts succinctly. This initial communication is an important step in establishing a productive dialogue. We're committed to understanding your perspective and exploring how we can effectively respond or engage in further discussions.`;
+
+const ContactForm: FC = () => {
+  const { close } = useURLQueryModal(CONTACT_MODAL_KEY);
+  const notify = useNotify();
+
+  const [contact, setContact, errors] = useForm(Contact);
+
+  const {
+    name = "",
+    institution = "",
+    subject = "",
+    address = "",
+    message = "",
+  } = contact;
+
+  async function handleSubmit(event: FormEvent) {
+    event.preventDefault();
+
+    const { success } = Contact.safeParse(contact);
+
+    if (!success) {
+      setContact({
+        name,
+        institution,
+        subject,
+        address,
+        message,
+      });
+      return;
+    }
+
+    notify({
+      level: "success",
+      message: "Your message has been sent!",
+    });
+
+    close();
+  }
+
+  function handleChange(key: keyof Contact) {
+    return (value: string) => {
+      setContact({ ...contact, [key]: value });
+    };
+  }
+
+  return (
+    <form
+      className="py-4 space-y-5 text-sm sm:text-base"
+      onSubmit={handleSubmit}
+    >
+      <section className="space-y-6">
+        <p>{SENDER_INTRODUCTION}</p>
+        <fieldset className="space-y-6">
+          <TextInput
+            label="Name"
+            value={name}
+            onChange={handleChange("name")}
+            error={errors.name}
+          />
+          <TextInput
+            label="Email"
+            value={address}
+            onChange={handleChange("address")}
+            error={errors.address}
+          />
+          <TextInput
+            label="Institution"
+            value={institution}
+            onChange={handleChange("institution")}
+            error={errors.institution}
+          />
+        </fieldset>
+      </section>
+
+      <section className="space-y-6">
+        <p>{MESSAGE_INTRODUCTION}</p>
+        <fieldset className="space-y-6">
+          <TextInput
+            label="Subject"
+            value={subject}
+            onChange={handleChange("subject")}
+            error={errors.subject}
+          />
+          <TextArea
+            label="Write your message here..."
+            value={message}
+            onChange={handleChange("message")}
+            error={errors.message}
+          />
+        </fieldset>
+      </section>
+
+      <footer className="flex justify-end gap-2">
+        <Button label="Cancel" variant="outline" onClick={close} />
+        <Button type="submit" label="Send" />
+      </footer>
+    </form>
+  );
+};
+
+const ContactModal: FC = () => {
+  const { isOpen, close } = useURLQueryModal(CONTACT_MODAL_KEY);
+  return (
+    <Modal isOpen={isOpen} onClose={close}>
+      <Article heading={<div>Contact Us</div>} content={<ContactForm />} />
+    </Modal>
+  );
+};
+
+export { CONTACT_MODAL_KEY, ContactModal };
diff --git a/frontend/components/Notifications.tsx b/frontend/components/Notifications.tsx
index 9baf0e5f..d23ee06e 100644
--- a/frontend/components/Notifications.tsx
+++ b/frontend/components/Notifications.tsx
@@ -1,5 +1,6 @@
+import { FloatingPortal } from "@floating-ui/react";
 import classNames from "classnames";
-import { motion, AnimatePresence } from "framer-motion";
+import { AnimatePresence, motion } from "framer-motion";
 import { useRouter } from "next/router";
 import { FC, useEffect } from "react";
 import {
@@ -47,7 +48,7 @@ const Notifications: FC = () => {
     }
   }, [notifications, setNotifications]);
 
-  useEffect(() => resetNotifications, [router, resetNotifications]);
+  useEffect(() => resetNotifications, [router.pathname, resetNotifications]);
 
   const shownNotificationsCount =
     notifications.length === MAX_SNACKBARS
@@ -67,38 +68,41 @@ const Notifications: FC = () => {
     });
 
   return (
-    <section className="fixed z-50 flex flex-col items-center space-y-2 -translate-x-1/2 left-1/2 top-10">
-      <AnimatePresence>
-        {snackbars.map(
-          ({ key, message, level }) =>
-            (key !== "notification-stack" || stackedNotificationsCount > 0) && (
-              <motion.div
-                layout
-                key={key}
-                className="flex py-2 pl-1 pr-3 space-x-3 bg-white rounded shadow-md w-96"
-                initial={{ scale: 0.9, opacity: 0 }}
-                animate={{ scale: 1, opacity: 1 }}
-                exit={{ scale: 0.9, opacity: 0 }}
-                transition={{ duration: 0.1 }}
-                aria-modal="true"
-                aria-describedby="snackbar-message"
-                aria-label="Notification"
-              >
-                <div
-                  role="presentation"
-                  className={classNames(
-                    "flex items-center justify-center w-7 h-6",
-                    { "text-indigo-700 text-xl": level === "info" },
-                  )}
+    <FloatingPortal>
+      <section className="fixed z-[60] flex flex-col items-center space-y-2 -translate-x-1/2 left-1/2 top-10">
+        <AnimatePresence>
+          {snackbars.map(
+            ({ key, message, level }) =>
+              (key !== "notification-stack" ||
+                stackedNotificationsCount > 0) && (
+                <motion.div
+                  layout
+                  key={key}
+                  className="flex py-2 pl-1 pr-3 space-x-3 bg-white rounded shadow-md w-96"
+                  initial={{ scale: 0.9, opacity: 0 }}
+                  animate={{ scale: 1, opacity: 1 }}
+                  exit={{ scale: 0.9, opacity: 0 }}
+                  transition={{ duration: 0.1 }}
+                  aria-modal="true"
+                  aria-describedby="snackbar-message"
+                  aria-label="Notification"
                 >
-                  {NOTIFICATION_ICONS[level]}
-                </div>
-                <label id={`snackbar-message-${key}`}>{message}</label>
-              </motion.div>
-            ),
-        )}
-      </AnimatePresence>
-    </section>
+                  <div
+                    role="presentation"
+                    className={classNames(
+                      "flex items-center justify-center w-7 h-6",
+                      { "text-indigo-700 text-xl": level === "info" },
+                    )}
+                  >
+                    {NOTIFICATION_ICONS[level]}
+                  </div>
+                  <label id={`snackbar-message-${key}`}>{message}</label>
+                </motion.div>
+              ),
+          )}
+        </AnimatePresence>
+      </section>
+    </FloatingPortal>
   );
 };
 
@@ -121,4 +125,4 @@ function useNotify(): Notifier {
 }
 
 export default Notifications;
-export { useNotify, NOTIFICATIONS as _NOTIFICATIONS, _notify };
+export { NOTIFICATIONS as _NOTIFICATIONS, _notify, useNotify };
diff --git a/frontend/components/TextArea.tsx b/frontend/components/TextArea.tsx
new file mode 100644
index 00000000..75eccd49
--- /dev/null
+++ b/frontend/components/TextArea.tsx
@@ -0,0 +1,77 @@
+import c from "classnames";
+import {
+  ChangeEvent,
+  forwardRef,
+  HTMLProps,
+  ReactNode,
+  Ref,
+  useId,
+} from "react";
+
+type Props = Omit<
+  HTMLProps<HTMLTextAreaElement>,
+  "value" | "onChange" | "className" | "label"
+> & {
+  value: string;
+  error?: string;
+  onChange?: (value: string) => void;
+  left?: ReactNode;
+  right?: ReactNode;
+  inputRef?: Ref<HTMLTextAreaElement>;
+  label?: string;
+};
+
+export default forwardRef<HTMLDivElement, Props>(function TextArea(
+  { value, error, left, right, inputRef, onChange, label, ...props },
+  ref,
+) {
+  const labelId = useId();
+  const errorId = useId();
+
+  function handleChange(event: ChangeEvent<HTMLTextAreaElement>) {
+    onChange?.(event.target.value);
+  }
+
+  return (
+    <div
+      ref={ref}
+      className={c(
+        "relative group",
+        "w-full gap-1 inline-flex items-center rounded h-full scrollbar scrollbar-none",
+        "error-within:shadow-sm focus-within:error-within:bg-red-400/80, error-within:bg-red-300/40",
+        label
+          ? "mt-2 px-2 py-2 bg-gray-active shadow-sm focus-within:bg-indigo-500/10"
+          : "text-xs p-1 overflow-x-scroll focus-within:bg-gray-active focus-within:shadow-sm",
+      )}
+    >
+      {left}
+      <textarea
+        {...props}
+        ref={inputRef}
+        value={value}
+        className="w-full px-1 bg-transparent outline-none min-h-40 peer shrink grow placeholder:text-xs error:focus:text-white error:placeholder-white"
+        onChange={handleChange}
+        data-error={Boolean(error)}
+        placeholder={label ? "" : props.placeholder}
+        aria-labelledby={labelId}
+        aria-errormessage={errorId}
+        aria-invalid={Boolean(error)}
+      />
+      {label && (
+        <label
+          id={labelId}
+          className={c(
+            "absolute transition-all pointer-events-none",
+            "peer-placeholder-shown:text-gray-600 peer-placeholder-shown:text-sm text-xs peer-focus:text-xs text-indigo-600 peer-focus:text-indigo-600",
+            "peer-placeholder-shown:left-2 left-0 peer-focus:left-0 ",
+            "peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-4 -translate-y-full peer-focus:-translate-y-full top-0 peer-focus:top-0",
+            "peer-error:text-red-600 peer-error:-translate-y-full peer-error:top-0 peer-error:left-0 peer-error:text-xs",
+          )}
+        >
+          {label} {error && <span id={errorId}>({error})</span>}
+        </label>
+      )}
+      {right}
+    </div>
+  );
+});
diff --git a/frontend/components/TextInput.tsx b/frontend/components/TextInput.tsx
index 07bbd538..231c8481 100644
--- a/frontend/components/TextInput.tsx
+++ b/frontend/components/TextInput.tsx
@@ -1,42 +1,33 @@
+import c from "classnames";
 import {
   ChangeEvent,
-  FocusEvent,
   forwardRef,
   HTMLProps,
   ReactNode,
   Ref,
-  useState,
+  useId,
 } from "react";
-import c from "classnames";
 
 type Props = Omit<
   HTMLProps<HTMLInputElement>,
-  "value" | "onChange" | "className"
+  "value" | "onChange" | "className" | "label"
 > & {
   value: string;
   error?: string;
   onChange?: (value: string) => void;
   left?: ReactNode;
   right?: ReactNode;
-
   inputRef?: Ref<HTMLInputElement>;
+  label?: string;
 };
 
 export default forwardRef<HTMLDivElement, Props>(function TextInput(
-  { value, error, left, right, inputRef, onChange, onBlur, onFocus, ...props },
+  { value, error, left, right, inputRef, onChange, label, ...props },
   ref,
 ) {
-  const [focused, setFocused] = useState(false);
+  const labelId = useId();
+  const errorId = useId();
 
-  function handleFocus(event: FocusEvent<HTMLInputElement>) {
-    setFocused(true);
-    onFocus?.(event);
-  }
-
-  function handleBlur(event: FocusEvent<HTMLInputElement>) {
-    setFocused(false);
-    onBlur?.(event);
-  }
   function handleChange(event: ChangeEvent<HTMLInputElement>) {
     onChange?.(event.target.value);
   }
@@ -45,27 +36,41 @@ export default forwardRef<HTMLDivElement, Props>(function TextInput(
     <div
       ref={ref}
       className={c(
-        "w-full overflow-x-scroll gap-1 inline-flex items-center text-xs rounded h-full scrollbar scrollbar-none",
-        "p-1",
-        "error:shadow-sm",
-        {
-          "bg-gray-active shadow-sm error:bg-red-400/80": focused,
-          "error:bg-red-300/40": !focused,
-        },
+        "relative group",
+        "w-full gap-1 inline-flex items-center rounded h-full scrollbar scrollbar-none",
+        "error-within:shadow-sm focus-within:error-within:bg-red-400/80, error-within:bg-red-300/40",
+        label
+          ? "mt-2 px-2 py-2 bg-gray-active shadow-sm focus-within:bg-indigo-500/10"
+          : "text-xs p-1 overflow-x-scroll focus-within:bg-gray-active focus-within:shadow-sm",
       )}
-      data-error={Boolean(error)}
     >
       {left}
       <input
         {...props}
         ref={inputRef}
         value={value}
-        className="w-full px-1 bg-transparent outline-none shrink grow placeholder:text-xs error:focus:text-white error:placeholder-white"
-        onFocus={handleFocus}
-        onBlur={handleBlur}
+        className="w-full px-1 bg-transparent outline-none peer shrink grow placeholder:text-xs error:focus:text-white error:placeholder-white"
         onChange={handleChange}
         data-error={Boolean(error)}
+        placeholder={label ? "" : props.placeholder}
+        aria-labelledby={labelId}
+        aria-errormessage={errorId}
+        aria-invalid={Boolean(error)}
       />
+      {label && (
+        <label
+          id={labelId}
+          className={c(
+            "absolute transition-all pointer-events-none",
+            "peer-placeholder-shown:text-gray-600 peer-placeholder-shown:text-sm text-xs peer-focus:text-xs text-indigo-600 peer-focus:text-indigo-600",
+            "peer-placeholder-shown:left-2 left-0 peer-focus:left-0 ",
+            "peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 -translate-y-full peer-focus:-translate-y-full top-0 peer-focus:top-0",
+            "peer-error:text-red-600 peer-error:-translate-y-full peer-error:top-0 peer-error:left-0 peer-error:text-xs",
+          )}
+        >
+          {label} {error && <span id={errorId}>({error})</span>}
+        </label>
+      )}
       {right}
     </div>
   );
diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx
index 0d666008..f3b040f0 100644
--- a/frontend/pages/index.tsx
+++ b/frontend/pages/index.tsx
@@ -1,5 +1,7 @@
 import AddIcon from "assets/add.svg";
 import Button from "components/Button";
+import { ContactButton } from "components/ContactButton";
+import { ContactModal } from "components/ContactModal";
 import { IndexCounter } from "components/IndexCounter";
 import Layout from "components/Layout";
 import { LearnMoreButton } from "components/LearnMoreButton";
@@ -73,7 +75,7 @@ const Home: NextPage = () => {
         </div>
       }
       footer={
-        <div className="flex justify-center gap-2 sm:justify-start">
+        <div className="flex flex-col justify-center gap-2 sm:justify-start sm:flex-row sm:items-start">
           <IndexCounter count={count} />
           {isAuthenticated ? (
             <div className="flex gap-2">
@@ -94,9 +96,13 @@ const Home: NextPage = () => {
               <SignInButton />
             </div>
           )}
-          <div className="hidden ml-auto sm:block">
+
+          <div className="flex gap-2 sm:ml-auto">
             <LearnMoreButton />
+            <ContactButton />
           </div>
+
+          <ContactModal />
           <LearnMoreModal />
         </div>
       }
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 60b9cec2..99eb2a2c 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -27,9 +27,13 @@ module.exports = {
   },
   plugins: [
     plugin(function ({ addVariant }) {
-      addVariant("error", '&[data-error="true"]');
+      const error = `[data-error="true"]`;
       addVariant("selected", '&[data-selected="true"]');
       addVariant("focused", '&[data-focused="true"]');
+
+      addVariant("error", `&${error}`);
+      addVariant("error-within", `&:has(${error})`);
+      addVariant("peer-error", `:merge(.peer):is(${error}) ~ &`);
     }),
     scrollbar({ preferredStrategy: "pseudoelements" }),
   ],
diff --git a/frontend/utils/useForm.ts b/frontend/utils/useForm.ts
new file mode 100644
index 00000000..3aae8a4e
--- /dev/null
+++ b/frontend/utils/useForm.ts
@@ -0,0 +1,66 @@
+import { Dispatch, SetStateAction, useState } from "react";
+import { ZodDefault, ZodObject, ZodRawShape, ZodSchema, z } from "zod";
+
+function stripDefaults<T extends ZodObject<ZodRawShape>>(
+  schema: T,
+): [z.infer<T>, T] {
+  const [defaults, s] = Object.entries(schema.shape).reduce(
+    ([d, s], [key, field]) => {
+      if (field instanceof ZodDefault) {
+        return [
+          { ...d, [key]: field.parse(undefined) },
+          { ...s, [key]: field.removeDefault() },
+        ];
+      }
+      return [d, { ...s, [key]: field }];
+    },
+    [{}, {}] as [Record<string, unknown>, Record<string, ZodSchema>],
+  );
+
+  return [defaults, z.object(s) as T] as const;
+}
+
+function validate<T extends ZodObject<ZodRawShape>>(
+  schema: T,
+  input: Partial<z.infer<T>>,
+): [Partial<z.infer<T>>, Partial<Record<keyof z.infer<T>, string>>] {
+  const parsed: Record<string, string> = {};
+  const errors: Record<string, string> = {};
+
+  for (const [key, field] of Object.entries(schema.shape)) {
+    if (!(key in input)) {
+      continue;
+    }
+
+    const result = field.safeParse(input[key]);
+
+    if (result.success) {
+      parsed[key] = result.data;
+    } else {
+      parsed[key] = input[key]!;
+      errors[key] = result.error.errors[0].message;
+    }
+  }
+
+  return [
+    parsed as Partial<z.infer<T>>,
+    errors as Partial<Record<keyof z.infer<T>, string>>,
+  ];
+}
+
+export function useForm<T extends ZodObject<ZodRawShape>>(
+  schema: T,
+): [
+  z.infer<T>,
+  Dispatch<SetStateAction<Partial<z.TypeOf<T>>>>,
+  Partial<Record<keyof z.infer<T>, string>>,
+] {
+  const [defaults, strict] = stripDefaults(schema);
+  const [values, setValues] = useState<Partial<z.infer<T>>>({});
+
+  const input = { ...defaults, ...values };
+
+  const [parsed, errors] = validate(strict, input);
+
+  return [parsed, setValues, errors];
+}