diff --git a/client/src/components/EmailInput.tsx b/client/src/components/EmailInput.tsx
index a02cbcc4..2bffec46 100644
--- a/client/src/components/EmailInput.tsx
+++ b/client/src/components/EmailInput.tsx
@@ -16,17 +16,17 @@ interface EmailInputProps extends React.ComponentPropsWithoutRef<"input"> {
   showError: boolean;
   onChange: (e: ChangeEvent<HTMLInputElement>) => void;
   i18nHash?: string;
+  labelText?: string;
 }
 
 const EmailInputWithoutI18n = forwardRef<HTMLInputElement, EmailInputProps>(
-  ({ i18n, i18nHash, email, error, setError, showError, onChange, ...props }, ref) => {
+  ({ i18n, i18nHash, email, error, setError, showError, onChange, labelText, ...props }, ref) => {
     const isBadEmailFormat = (value: string) => {
       /* valid email regex rules 
       alpha numeric characters are ok, upper/lower case agnostic 
       username: leading \_ ok, chars \_\.\-\+ ok in all other positions
       domain name: chars \.\- ok as long as not leading. must end in a \. and at least two alphabet chars */
-      const pattern =
-        "^([a-zA-Z0-9_]+[a-zA-Z0-9+_.-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-zA-Z]{2,})$";
+      const pattern = /^([a-zA-Z0-9_]+[a-zA-Z0-9+_.-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+\.[a-zA-Z]{2,})$/;
 
       // HTML input element has loose email validation requirements, so we check the input against a custom regex
       const passStrictRegex = value.match(pattern);
@@ -43,9 +43,11 @@ const EmailInputWithoutI18n = forwardRef<HTMLInputElement, EmailInputProps>(
 
     return (
       <div className="email-input-field">
-        <div className="email-input-label">
-          <label htmlFor="email-input">{i18n._(t`Email address`)}</label>
-        </div>
+        {!!labelText && (
+          <div className="email-input-label">
+            <label htmlFor="email-input">{labelText}</label>
+          </div>
+        )}
         {showError && error && (
           <div className="email-input-errors">
             <span id="input-field-error">
diff --git a/client/src/components/Icons.tsx b/client/src/components/Icons.tsx
index c2ae0863..c98b1c63 100644
--- a/client/src/components/Icons.tsx
+++ b/client/src/components/Icons.tsx
@@ -1,5 +1,18 @@
 import React, { SVGProps } from "react";
 
+export const DotIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="20"
+    height="21"
+    viewBox="0 0 20 21"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <circle cx="9.5" cy="10.1751" r="1.5" fill="currentcolor" />
+  </svg>
+);
+
 export const CloseIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg
     fill="none"
@@ -134,21 +147,21 @@ export const AlertIconOutline = (props: SVGProps<SVGSVGElement>) => (
     width="20"
     height="20"
     viewBox="0 0 20 20"
-    fill="none"
+    fill="currentColor"
     xmlns="http://www.w3.org/2000/svg"
     {...props}
   >
     <path
       d="M10 18C5.58857 18 2 14.4113 2 10C2 5.58865 5.58865 2 10 2C14.4113 2 18 5.58865 18 10C18 14.3886 14.4113 18 10 18ZM10 3.34857C6.34278 3.34857 3.37143 6.32004 3.37143 9.97714C3.37143 13.6344 6.3429 16.6057 10 16.6057C13.6572 16.6057 16.6286 13.6342 16.6286 9.97714C16.6286 6.32004 13.6573 3.34857 10 3.34857Z"
-      fill="#242323"
+      fill="#FAF8F4"
     />
     <path
-      d="M10.0002 11.1655C9.61166 11.1655 9.31445 10.8683 9.31445 10.4798V6.98263C9.31445 6.59408 9.61164 6.29688 10.0002 6.29688C10.3888 6.29688 10.686 6.59407 10.686 6.98263V10.4798C10.686 10.8685 10.3888 11.1655 10.0002 11.1655Z"
-      fill="#242323"
+      d="M9.99996 11.1657C9.61141 11.1657 9.31421 10.8685 9.31421 10.48V6.98281C9.31421 6.59426 9.6114 6.29706 9.99996 6.29706C10.3885 6.29706 10.6857 6.59425 10.6857 6.98281V10.48C10.6857 10.8687 10.3885 11.1657 9.99996 11.1657Z"
+      fill="#FAF8F4"
     />
     <path
-      d="M10.0002 13.6799C9.81733 13.6799 9.63446 13.6114 9.52013 13.4743C9.38301 13.3371 9.31445 13.1771 9.31445 12.9942C9.31445 12.9484 9.31445 12.9028 9.33725 12.8571C9.33725 12.8113 9.36005 12.7657 9.38301 12.7199C9.40581 12.6742 9.42877 12.6514 9.45157 12.6056C9.47437 12.5599 9.49733 12.5371 9.54293 12.4913C9.79437 12.2399 10.2515 12.2399 10.5029 12.4913C10.5257 12.5141 10.5715 12.5599 10.5943 12.6056C10.6171 12.6514 10.64 12.6742 10.6628 12.7199C10.6856 12.7657 10.6856 12.8113 10.7086 12.8571C10.7086 12.9028 10.7314 12.9484 10.7314 12.9942C10.7314 13.1771 10.6628 13.3599 10.5257 13.4743C10.366 13.6114 10.1831 13.6799 10.0002 13.6799H10.0002Z"
-      fill="#242323"
+      d="M9.99997 13.68C9.81709 13.68 9.63422 13.6114 9.51989 13.4743C9.38277 13.3372 9.31421 13.1771 9.31421 12.9942C9.31421 12.9485 9.31421 12.9029 9.33701 12.8571C9.33701 12.8114 9.35981 12.7658 9.38277 12.72C9.40557 12.6743 9.42853 12.6514 9.45133 12.6057C9.47413 12.5599 9.49709 12.5371 9.54269 12.4914C9.79412 12.2399 10.2512 12.2399 10.5027 12.4914C10.5255 12.5142 10.5712 12.5599 10.594 12.6057C10.6168 12.6514 10.6398 12.6743 10.6626 12.72C10.6854 12.7658 10.6854 12.8114 10.7084 12.8571C10.7084 12.9029 10.7312 12.9485 10.7312 12.9942C10.7312 13.1771 10.6626 13.36 10.5255 13.4743C10.3657 13.6114 10.1829 13.68 9.99998 13.68H9.99997Z"
+      fill="#FAF8F4"
     />
   </svg>
 );
diff --git a/client/src/components/Login.tsx b/client/src/components/Login.tsx
index 4db9bd5e..720ef9b9 100644
--- a/client/src/components/Login.tsx
+++ b/client/src/components/Login.tsx
@@ -409,6 +409,7 @@ const LoginWithoutI18n = (props: LoginProps) => {
                 setError={setEmailError}
                 showError={showEmailError}
                 autoFocus={showRegisterModal && !email}
+                labelText={i18n._(t`Email address`)}
               />
             )}
             {(isLoginStep || isRegisterAccountStep) && (
diff --git a/client/src/components/PasswordInput.tsx b/client/src/components/PasswordInput.tsx
index 7c9fa026..33a85f68 100644
--- a/client/src/components/PasswordInput.tsx
+++ b/client/src/components/PasswordInput.tsx
@@ -9,7 +9,7 @@ import { LocaleLink } from "i18n";
 import { createWhoOwnsWhatRoutePaths } from "routes";
 import { I18n } from "@lingui/core";
 import { t } from "@lingui/macro";
-import { HideIcon, ShowIcon } from "./Icons";
+import { AlertIcon, CheckIcon, DotIcon, HideIcon, ShowIcon } from "./Icons";
 import classNames from "classnames";
 
 type PasswordRule = {
@@ -82,25 +82,42 @@ const PasswordInputWithoutI18n = forwardRef<HTMLInputElement, PasswordInputProps
             <LocaleLink
               to={`${account.forgotPassword}?email=${encodeURIComponent(username || "")}`}
             >
-              Forgot your password?
+              {i18n._(t`Forgot your password?`)}
             </LocaleLink>
           )}
         </div>
-        {showPasswordRules && (
+        {showPasswordRules ? (
           <div className="password-input-rules">
             {passwordRules.map((rule, i) => {
-              const ruleClass = !!password
-                ? password.match(rule.regex)
-                  ? "valid"
-                  : "invalid"
-                : "";
+              let ruleClass = "";
+              let RuleIcon = <DotIcon />;
+              if (!!password || showError) {
+                if (password.match(rule.regex)) {
+                  ruleClass = "valid";
+                  RuleIcon = <CheckIcon />;
+                } else {
+                  ruleClass = "invalid";
+                  RuleIcon = <AlertIcon />;
+                }
+              }
               return (
                 <span className={`password-input-rule ${ruleClass}`} key={`rule-${i}`}>
+                  {RuleIcon}
                   {rule.label}
                 </span>
               );
             })}
           </div>
+        ) : (
+          showError &&
+          error && (
+            <div className="password-input-errors">
+              <span id="input-field-error">
+                <AlertIcon />
+                {i18n._(t`Please enter password.`)}
+              </span>
+            </div>
+          )
         )}
         <div className="password-input">
           <input
diff --git a/client/src/components/UserContext.tsx b/client/src/components/UserContext.tsx
index ebef8438..3455daff 100644
--- a/client/src/components/UserContext.tsx
+++ b/client/src/components/UserContext.tsx
@@ -185,7 +185,7 @@ export const UserContextProvider = ({ children }: { children: React.ReactNode })
       if (user) {
         const asyncUpdateEmail = async () => {
           const response = await AuthClient.updateEmail(email);
-          setUser({ ...user, email: response.email });
+          setUser({ ...user, email: response.email, verified: false });
         };
         asyncUpdateEmail();
       }
diff --git a/client/src/components/UserSettingField.tsx b/client/src/components/UserSettingField.tsx
index bd29cd0a..8b1330d6 100644
--- a/client/src/components/UserSettingField.tsx
+++ b/client/src/components/UserSettingField.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
 
 import { withI18n, withI18nProps } from "@lingui/react";
 import { t, Trans } from "@lingui/macro";
@@ -6,6 +6,12 @@ import { t, Trans } from "@lingui/macro";
 import "styles/EmailAlertSignup.css";
 import PasswordInput from "./PasswordInput";
 import { useInput } from "util/helpers";
+import { UserContext } from "./UserContext";
+import { JustfixUser } from "state-machine";
+import EmailInput from "./EmailInput";
+import AuthClient from "./AuthClient";
+import { Alert } from "./Alert";
+import { AlertIconOutline } from "./Icons";
 
 type PasswordSettingFieldProps = withI18nProps & {
   onSubmit: (currentPassword: string, newPassword: string) => void;
@@ -13,11 +19,14 @@ type PasswordSettingFieldProps = withI18nProps & {
 
 const PasswordSettingFieldWithoutI18n = (props: PasswordSettingFieldProps) => {
   const { i18n, onSubmit } = props;
+  const userContext = useContext(UserContext);
+  const { email } = userContext.user as JustfixUser;
   const {
     value: currentPassword,
     error: currentPasswordError,
     showError: showCurrentPasswordError,
     setError: setCurrentPasswordError,
+    setShowError: setShowCurrentPasswordError,
     onChange: onChangeCurrentPassword,
   } = useInput("");
   const {
@@ -25,16 +34,56 @@ const PasswordSettingFieldWithoutI18n = (props: PasswordSettingFieldProps) => {
     error: newPasswordError,
     showError: showNewPasswordError,
     setError: setNewPasswordError,
+    setShowError: setShowNewPasswordError,
     onChange: onChangeNewPassword,
   } = useInput("");
-  // const [showCurrentPassword, setShowCurrentPassword] = useState(false);
+  const [invalidAuthError, setInvalidAuthError] = useState(false);
+
+  const handleSubmit = async () => {
+    setInvalidAuthError(false);
+    setShowCurrentPasswordError(false);
+    setShowNewPasswordError(false);
+
+    if (!currentPassword) {
+      setCurrentPasswordError(true);
+      setShowCurrentPasswordError(true);
+      throw new Error("Current password missing");
+    }
+
+    if (!newPassword || newPasswordError) {
+      setNewPasswordError(true);
+      setShowNewPasswordError(true);
+      throw new Error("New password format error");
+    }
+
+    // context doesn't update immediately so need to reurn user to check verified status
+    const resp = await userContext.login(email, currentPassword);
+
+    if (!!resp?.error) {
+      setInvalidAuthError(true);
+      throw new Error("Incorrect current password");
+    }
 
-  const handleSubmit = () => {
     onSubmit(currentPassword, newPassword);
   };
 
   return (
     <UserSettingField title={i18n._(t`Password`)} preview="**********" onSubmit={handleSubmit}>
+      {invalidAuthError && (
+        <Alert
+          className={`page-level-alert`}
+          variant="primary"
+          closeType="none"
+          role="status"
+          type="error"
+        >
+          <AlertIconOutline />
+          {i18n._(t`The old password you entered is incorrect`)}
+        </Alert>
+      )}
+      <Trans render="label" className="user-setting-label">
+        Password
+      </Trans>
       <PasswordInput
         labelText={i18n._(t`Enter your old password`)}
         password={currentPassword}
@@ -67,30 +116,87 @@ type EmailSettingFieldProps = withI18nProps & {
 
 const EmailSettingFieldWithoutI18n = (props: EmailSettingFieldProps) => {
   const { i18n, currentValue, onSubmit } = props;
-  const [value, setValue] = useState(currentValue);
+  const userContext = useContext(UserContext);
+  const { email: oldEmail, verified } = userContext.user as JustfixUser;
+  const [existingUserError, setExistingUserError] = useState(false);
+  const {
+    value: email,
+    error: emailError,
+    showError: showEmailError,
+    setError: setEmailError,
+    setShowError: setShowEmailError,
+    onChange: onChangeEmail,
+  } = useInput(oldEmail);
 
-  const handleValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(e.target.value);
-  };
+  const handleSubmit = async () => {
+    setExistingUserError(false);
+    setShowEmailError(false);
+
+    if (email === oldEmail) {
+      return;
+    }
+
+    if (!email || emailError) {
+      setEmailError(true);
+      setShowEmailError(true);
+      throw new Error("Email format error");
+    }
 
-  const handleSubmit = () => {
-    onSubmit(value);
+    if (!!email && !emailError) {
+      const existingUser = await AuthClient.isEmailAlreadyUsed(email);
+      if (existingUser) {
+        setExistingUserError(true);
+        throw new Error("Existing user error");
+      }
+    }
+
+    onSubmit(email);
   };
 
+  const verifyCallout = !verified ? (
+    <div className="jf-callout">
+      <Trans>
+        Email address not verified. Click the link we sent to {email} start receiving emails.
+      </Trans>
+      <br />
+      <br />
+      <button className="button is-text" onClick={() => AuthClient.resendVerifyEmail()}>
+        <Trans>Resend email</Trans>
+      </button>
+    </div>
+  ) : undefined;
+
   return (
     <UserSettingField
       title={i18n._(t`Email address`)}
       preview={currentValue}
       onSubmit={handleSubmit}
+      verifyCallout={verifyCallout}
     >
-      <Trans render="label">Email address</Trans>
-      <Trans render="p">This is used for logging in and for receiving weekly data updates.</Trans>
-      <input
-        type="email"
-        className="input"
+      {existingUserError && (
+        <Alert
+          className={`page-level-alert`}
+          variant="primary"
+          closeType="none"
+          role="status"
+          type="error"
+        >
+          <AlertIconOutline />
+          {i18n._(t`That email is already used.`)}
+        </Alert>
+      )}
+      <Trans render="label" className="user-setting-label">
+        Email address
+      </Trans>
+      <Trans render="p">We send data updates to this email.</Trans>
+      <EmailInput
+        email={email}
+        error={emailError}
+        showError={showEmailError}
+        setError={setEmailError}
+        onChange={onChangeEmail}
+        autoFocus
         placeholder={i18n._(t`Enter new email address`)}
-        onChange={handleValueChange}
-        value={value}
       />
     </UserSettingField>
   );
@@ -101,39 +207,52 @@ export const EmailSettingField = withI18n()(EmailSettingFieldWithoutI18n);
 type UserSettingFieldProps = withI18nProps & {
   title: string;
   preview: string;
-  onSubmit: () => void;
+  onSubmit: () => Promise<void>;
   children: React.ReactNode;
+  verifyCallout?: React.ReactNode;
 };
 
 const UserSettingFieldWithoutI18n = (props: UserSettingFieldProps) => {
-  const { title, preview, onSubmit, children } = props;
+  const { title, preview, onSubmit, children, verifyCallout } = props;
   const [editing, setEditing] = useState(false);
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    onSubmit().then(
+      (response) => setEditing(false),
+      (error) => {}
+    );
+  };
+
   return (
     <div className={`UserSetting`}>
-      <form onSubmit={onSubmit} className="input-group">
+      <form onSubmit={handleSubmit} className="input-group">
         {editing ? (
           <>
             {children}
             <div className="user-setting-actions">
               <input type="submit" className="button is-primary" value={`Save`} />
-              <button
-                type="button"
-                className="button is-secondary"
-                onClick={() => setEditing(false)}
-              >
+              <button type="button" className="button is-text" onClick={() => setEditing(false)}>
                 <Trans>Cancel</Trans>
               </button>
             </div>
           </>
         ) : (
           <>
-            <Trans render="label">{title}</Trans>
+            <Trans render="label" className="user-setting-label">
+              {title}
+            </Trans>
             <div>
               <span>{preview}</span>
-              <button type="button" className="button is-text" onClick={() => setEditing(true)}>
+              <button
+                type="button"
+                className="button is-text edit-button"
+                onClick={() => setEditing(true)}
+              >
                 <Trans>Edit</Trans>
               </button>
             </div>
+            {!!verifyCallout && verifyCallout}
           </>
         )}
       </form>
diff --git a/client/src/styles/AccountSettingsPage.scss b/client/src/styles/AccountSettingsPage.scss
index 84631c7c..f3c54ae8 100644
--- a/client/src/styles/AccountSettingsPage.scss
+++ b/client/src/styles/AccountSettingsPage.scss
@@ -1,5 +1,6 @@
 @import "_vars.scss";
 @import "_typography.scss";
+@import "_callout.scss";
 
 .AccountSettingsPage {
   h4 {
@@ -42,16 +43,47 @@
   form {
     display: flex;
     flex-direction: column;
-    margin: 3.2rem 1.6rem;
-    gap: 2.4rem;
+    margin: 1.625rem 1rem;
+
+    .page-level-alert {
+      margin-bottom: 1.625rem;
+      svg {
+        margin-right: 0.5rem;
+        vertical-align: bottom;
+      }
+    }
+
+    .user-setting-label {
+      @include desktop-eyebrow();
+      // vars marked !important bc typography mixin is not available for inconsolata
+      font-weight: 600 !important;
+      font-family: $wow-font !important;
+      font-size: 0.875rem !important;
+      text-transform: none !important;
+      text-align: left;
+      margin-bottom: 0.5rem;
+    }
 
+    p {
+      margin-bottom: 0.375rem;
+    }
+
+    .email-input-field,
     .password-input-field {
       display: flex;
       flex-direction: column;
+      &:has(#new-password-input) {
+        margin-top: 1.25rem;
+      }
     }
 
-    p {
-      margin: -0.63rem 0 0.37rem 0;
+    .jf-callout {
+      margin-top: 1rem;
+      display: flex;
+      flex-direction: column;
+      .button.is-text {
+        width: fit-content;
+      }
     }
   }
 
@@ -61,38 +93,31 @@
     span {
       flex: 1;
     }
+    span,
+    .edit-button {
+      font-size: 1rem;
+    }
   }
 
   .user-setting-actions {
     display: flex;
-    justify-content: right;
+    justify-content: left;
+    align-items: center;
+    margin-top: 1rem;
 
     @include for-phone-only() {
       justify-content: center;
     }
 
     input[type="submit"] {
-      margin: 0 1rem 0 0 !important;
+      margin: 0 3rem 0 0 !important;
     }
-  }
-
-  label {
-    @include desktop-eyebrow();
-    // vars marked !important bc typography mixin is not available for inconsolata
-    font-weight: 600 !important;
-    font-family: $wow-font !important;
-    font-size: 0.81rem !important;
-
-    text-align: left;
-    margin-bottom: 1rem;
-  }
-
-  .password-input-rules {
-    display: flex;
-    flex-direction: column;
 
-    span:last-child {
-      margin-bottom: 0.37rem !important;
+    .button.is-text {
+      @include body-standard;
+      font-size: 1.125rem;
+      font-weight: 500;
+      text-decoration: none;
     }
   }
 }
diff --git a/client/src/styles/Login.scss b/client/src/styles/Login.scss
index 58b8ba3a..bc3811cd 100644
--- a/client/src/styles/Login.scss
+++ b/client/src/styles/Login.scss
@@ -27,7 +27,7 @@
   }
 
   .page-title {
-    margin-top: 0.59rem;
+    margin-top: 0.9375rem;
   }
 
   .building-page-footer {
@@ -80,10 +80,6 @@
     font-size: 0.63rem;
   }
 
-  .password-input {
-    margin-top: 0.3125rem;
-  }
-
   .verify-email-container {
     color: $justfix-black;
     display: flex;
diff --git a/client/src/styles/Password.scss b/client/src/styles/Password.scss
index 8f68fa5b..fb806cf8 100644
--- a/client/src/styles/Password.scss
+++ b/client/src/styles/Password.scss
@@ -17,7 +17,7 @@
       color: $justfix-black;
 
       text-align: left;
-      margin-bottom: 0.31rem;
+      margin-bottom: 0.3125rem;
     }
 
     a {
@@ -60,6 +60,7 @@
   .password-input-rules {
     display: flex;
     flex-direction: column;
+    margin-bottom: 0.375rem;
   }
 
   .password-input-rule {
@@ -67,24 +68,11 @@
 
     font-family: $wow-font !important;
     font-size: 0.8125rem !important;
-    // font-weight: 500 !important;
     line-height: 120%;
     text-transform: none !important;
     color: $justfix-black;
     text-align: left;
 
-    &::before {
-      content: "•";
-      display: inline-block;
-      margin-right: 0.31rem;
-      vertical-align: top;
-    }
-
-    // encoded SVG from https://yoksel.github.io/url-encoder/
-    &.invalid:before {
-      content: url("data:image/svg+xml, %3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 14C3.14 14 0 10.8599 0 7C0 3.14007 3.14007 0 7 0C10.8599 0 14 3.14007 14 7C14 10.84 10.8599 14 7 14Z' fill='%23FF813A' /%3E%3Cpath d='M7 8.75C6.50422 8.75 6.125 8.37612 6.125 7.88729V3.48771C6.125 2.9989 6.50421 2.625 7 2.625C7.49579 2.625 7.875 2.99888 7.875 3.48771V7.88729C7.875 8.3763 7.49579 8.75 7 8.75Z' fill='%23FAF8F4' /%3E%3Cpath d='M6.97194 11.375C6.74608 11.375 6.52022 11.2879 6.37902 11.1136C6.20967 10.9394 6.125 10.736 6.125 10.5036C6.125 10.4455 6.125 10.3875 6.15316 10.3294C6.15316 10.2712 6.18132 10.2133 6.20967 10.1551C6.23783 10.097 6.26619 10.068 6.29435 10.0099C6.3225 9.95174 6.35086 9.92277 6.40718 9.86462C6.71771 9.54513 7.28225 9.54513 7.59282 9.86462C7.62098 9.89359 7.6775 9.95174 7.70565 10.0099C7.73381 10.068 7.76217 10.097 7.79033 10.1551C7.81849 10.2133 7.81849 10.2712 7.84684 10.3294C7.84684 10.3875 7.875 10.4455 7.875 10.5036C7.875 10.736 7.79033 10.9684 7.62098 11.1136C7.42367 11.2879 7.19781 11.375 6.97195 11.375H6.97194Z' fill='%23FAF8F4' /%3E%3C/svg%3E%0A");
-    }
-
     &.invalid {
       color: #ba4300;
     }
@@ -93,8 +81,28 @@
       color: $justfix-green;
     }
 
-    &.valid::before {
-      content: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.16666 7.97664L5.83332 12.6433L15.8333 2.64331' stroke='%231AA551' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E ");
+    svg {
+      width: 0.875rem;
+      height: 0.875rem;
+      margin-right: 0.3125rem;
+      vertical-align: text-bottom;
+    }
+  }
+
+  .password-input-errors {
+    display: flex;
+    flex-direction: column;
+
+    span {
+      display: flex;
+      align-items: center;
+      font-size: 0.8125rem;
+      color: #ba4300;
+      margin-bottom: 0.3125rem;
+
+      svg {
+        margin-right: 0.46875rem;
+      }
     }
   }
 }
diff --git a/client/src/styles/UserTypeInput.scss b/client/src/styles/UserTypeInput.scss
index 29f033b4..4a5da865 100644
--- a/client/src/styles/UserTypeInput.scss
+++ b/client/src/styles/UserTypeInput.scss
@@ -70,7 +70,7 @@
     align-items: center;
     font-size: 0.8125rem;
     color: #ba4300;
-    margin-bottom: 0.31rem;
+    margin-bottom: 0.3125rem;
 
     svg {
       margin-right: 0.47rem;
diff --git a/client/src/styles/_callout.scss b/client/src/styles/_callout.scss
new file mode 100644
index 00000000..6cb75ce1
--- /dev/null
+++ b/client/src/styles/_callout.scss
@@ -0,0 +1,8 @@
+@import "_vars.scss";
+@import "_typography.scss";
+
+.jf-callout {
+  @include desktop-text-small;
+  background-color: $justfix-white-200;
+  padding: 0.75rem;
+}
diff --git a/client/src/styles/_typography.scss b/client/src/styles/_typography.scss
index 34020826..9103aa09 100644
--- a/client/src/styles/_typography.scss
+++ b/client/src/styles/_typography.scss
@@ -49,7 +49,7 @@ $eyebrow-font: "Suisse Int'l Mono", "Courier New", Courier, monospace;
 
 @mixin desktop-text-small {
   @include body-standard();
-  font-size: 0.55rem;
+  font-size: 0.875rem;
 }
 
 @mixin desktop-text-small-bold {
diff --git a/jfauthprovider/views.py b/jfauthprovider/views.py
index ddf5f084..a9324701 100644
--- a/jfauthprovider/views.py
+++ b/jfauthprovider/views.py
@@ -60,7 +60,10 @@ def logout(request):
 @api
 def update(request):
     try:
-        post_data = {"new_email": request.POST.get("new_email")}
+        post_data = {
+            "new_email": request.POST.get("new_email"),
+            "origin": request.headers["Origin"],
+        }
 
         return authenticated_request(
             "user/",