From 5a70e2d5195ca8c398e422dea9b2acc4955e35e9 Mon Sep 17 00:00:00 2001
From: Salman Najah <salmannajah123@gmail.com>
Date: Sat, 17 Jan 2026 23:50:45 +0530
Subject: [PATCH 1/7] Migrate settings pages to Tailwind

---
 .../components/Checkout/CreditCardInput.tsx   |   25 +-
 ...alanceForfeitOnPayoutMethodChangeModal.tsx |    8 +-
 app/javascript/components/CustomDomain.tsx    |   31 +-
 .../AdvancedPage/AccountDeletionSection.tsx   |    8 +-
 .../Settings/AdvancedPage/ApplicationForm.tsx |   77 +-
 .../AdvancedPage/ApplicationsSection.tsx      |   21 +-
 .../AdvancedPage/BlockEmailsSection.tsx       |   55 +-
 .../Settings/AdvancedPage/CreditCardForm.tsx  |   26 +-
 .../AdvancedPage/CustomDomainSection.tsx      |   22 +-
 .../NotificationEndpointSection.tsx           |   44 +-
 .../ProductLevelSupportEmailsForm.tsx         |   23 +-
 .../PaymentsPage/AccountDetailsSection.tsx    |  868 ++++++-------
 .../PaymentsPage/AusBackTaxesSection.tsx      |   90 +-
 .../PaymentsPage/BankAccountSection.tsx       | 1133 +++++++++--------
 .../PaymentsPage/PayPalConnectSection.tsx     |   40 +-
 .../PaymentsPage/PayPalEmailSection.tsx       |   17 +-
 .../PaymentsPage/StripeConnectSection.tsx     |   19 +-
 .../pages/Oauth/Applications/Edit.tsx         |    8 +-
 app/javascript/pages/Settings/Main/Show.tsx   |  252 ++--
 .../pages/Settings/Password/Show.tsx          |   34 +-
 .../pages/Settings/Payments/Show.tsx          |   93 +-
 .../pages/Settings/Profile/Show.tsx           |  156 +--
 app/javascript/pages/Settings/Team/Show.tsx   |   56 +-
 .../Settings/ThirdPartyAnalytics/Show.tsx     |  167 +--
 24 files changed, 1694 insertions(+), 1579 deletions(-)

diff --git a/app/javascript/components/Checkout/CreditCardInput.tsx b/app/javascript/components/Checkout/CreditCardInput.tsx
index 7f831b923e..4932ef4a14 100644
--- a/app/javascript/components/Checkout/CreditCardInput.tsx
+++ b/app/javascript/components/Checkout/CreditCardInput.tsx
@@ -1,6 +1,5 @@
 import { CardElement, Elements } from "@stripe/react-stripe-js";
 import { StripeCardElement, StripeElementStyleVariant, StripeCardElementChangeEvent } from "@stripe/stripe-js";
-import cx from "classnames";
 import * as React from "react";
 
 import { SavedCreditCard } from "$app/parsers/card";
@@ -9,6 +8,9 @@ import { getCssVariable } from "$app/utils/styles";
 
 import { useFont } from "$app/components/DesignSettings";
 import { Icon } from "$app/components/Icons";
+import { Fieldset, Legend } from "$app/components/ui/Fieldset";
+import { InputGroup } from "$app/components/ui/InputGroup";
+import { Label } from "$app/components/ui/Label";
 
 export const CreditCardInput = ({
   disabled,
@@ -32,25 +34,26 @@ export const CreditCardInput = ({
   const [baseStripeStyle, setBaseStripeStyle] = React.useState<null | StripeElementStyleVariant>(null);
 
   return (
-    <fieldset className={cx({ danger: invalid })}>
-      <legend>
-        <label>Card information</label>
+    <Fieldset state={invalid ? "danger" : undefined}>
+      <Legend>
+        <Label>Card information</Label>
         {savedCreditCard ? (
           <button className="font-normal underline" disabled={disabled} onClick={() => setUseSavedCard(!useSavedCard)}>
             {useSavedCard ? "Use a different card?" : "Use saved card"}
           </button>
         ) : null}
-      </legend>
+      </Legend>
       {savedCreditCard && useSavedCard ? (
-        <div className="input read-only" aria-label="Saved credit card">
+        <InputGroup readOnly aria-label="Saved credit card">
           <Icon name="outline-credit-card" />
           <span>{savedCreditCard.number}</span>
           <span style={{ marginLeft: "auto" }}>{savedCreditCard.expiration_date}</span>
-        </div>
+        </InputGroup>
       ) : (
-        <div className={cx("input", { disabled })} aria-label="Card information" aria-invalid={invalid}>
+        <InputGroup disabled={disabled} aria-label="Card information" aria-invalid={invalid}>
           {baseStripeStyle == null ? (
             <input
+              className="font-[inherit]"
               ref={(el) => {
                 if (el == null) return;
                 const inputStyle = window.getComputedStyle(el);
@@ -67,7 +70,7 @@ export const CreditCardInput = ({
           ) : null}
           <StripeElementsProvider>
             <CardElement
-              className="fake-input"
+              className="flex-1"
               options={{
                 style: { base: baseStripeStyle ?? {} },
                 hidePostalCode: true,
@@ -79,9 +82,9 @@ export const CreditCardInput = ({
               {...(onChange ? { onChange } : {})}
             />
           </StripeElementsProvider>
-        </div>
+        </InputGroup>
       )}
-    </fieldset>
+    </Fieldset>
   );
 };
 
diff --git a/app/javascript/components/ConfirmBalanceForfeitOnPayoutMethodChangeModal.tsx b/app/javascript/components/ConfirmBalanceForfeitOnPayoutMethodChangeModal.tsx
index f0d4c8bbbb..2b2ccd57b2 100644
--- a/app/javascript/components/ConfirmBalanceForfeitOnPayoutMethodChangeModal.tsx
+++ b/app/javascript/components/ConfirmBalanceForfeitOnPayoutMethodChangeModal.tsx
@@ -2,6 +2,8 @@ import * as React from "react";
 
 import { Button } from "$app/components/Button";
 import { Modal } from "$app/components/Modal";
+import { Input } from "$app/components/ui/Input";
+import { Label } from "$app/components/ui/Label";
 
 type Props = {
   balance: string | null;
@@ -38,10 +40,10 @@ export const ConfirmBalanceForfeitOnPayoutMethodChangeModal = ({ balance, open,
               Please confirm that you're okay forfeiting your balance by typing <b>"I understand"</b> below and clicking{" "}
               <b>Confirm</b>.
               <div className="mt-4">
-                <label htmlFor="confirmation-input" className="sr-only">
+                <Label htmlFor="confirmation-input" className="sr-only">
                   Type "I understand" to confirm
-                </label>
-                <input
+                </Label>
+                <Input
                   id="confirmation-input"
                   type="text"
                   value={confirmText}
diff --git a/app/javascript/components/CustomDomain.tsx b/app/javascript/components/CustomDomain.tsx
index 0c4884fefc..e66e85b03e 100644
--- a/app/javascript/components/CustomDomain.tsx
+++ b/app/javascript/components/CustomDomain.tsx
@@ -1,4 +1,3 @@
-import cx from "classnames";
 import * as React from "react";
 import { cast } from "ts-safe-cast";
 
@@ -6,6 +5,10 @@ import { asyncVoid } from "$app/utils/promise";
 import { assertResponseError, request, ResponseError } from "$app/utils/request";
 
 import { Button } from "$app/components/Button";
+import { Fieldset, Legend } from "$app/components/ui/Fieldset";
+import { Input } from "$app/components/ui/Input";
+import { InputGroup } from "$app/components/ui/InputGroup";
+import { Label } from "$app/components/ui/Label";
 import { Pill } from "$app/components/ui/Pill";
 
 type VerificationState = "initial" | "verifying" | "success" | "failure";
@@ -67,22 +70,22 @@ const CustomDomain = ({
   });
 
   return (
-    <fieldset
-      className={cx({
-        success: verificationInfo.state === "success",
-        danger: verificationInfo.state === "failure",
-      })}
+    <Fieldset
+      state={
+        verificationInfo.state === "success" ? "success" : verificationInfo.state === "failure" ? "danger" : undefined
+      }
     >
-      <legend>
-        <label htmlFor={uid}>{label}</label>
+      <Legend>
+        <Label htmlFor={uid}>{label}</Label>
         {includeLearnMoreLink ? (
           <a href="/help/article/153-setting-up-a-custom-domain" target="_blank" rel="noreferrer">
             Learn more
           </a>
         ) : null}
-      </legend>
-      <div className="input input-wrapper">
-        <input
+      </Legend>
+      <InputGroup>
+        <Input
+          asChild
           id={uid}
           placeholder="yourdomain.com"
           type="text"
@@ -112,9 +115,9 @@ const CustomDomain = ({
             </Button>
           </Pill>
         ) : null}
-      </div>
-      <small>{verificationInfo.message}</small>
-    </fieldset>
+      </InputGroup>
+      <small className="text-muted">{verificationInfo.message}</small>
+    </Fieldset>
   );
 };
 
diff --git a/app/javascript/components/Settings/AdvancedPage/AccountDeletionSection.tsx b/app/javascript/components/Settings/AdvancedPage/AccountDeletionSection.tsx
index 036357fb4b..7499edf4f0 100644
--- a/app/javascript/components/Settings/AdvancedPage/AccountDeletionSection.tsx
+++ b/app/javascript/components/Settings/AdvancedPage/AccountDeletionSection.tsx
@@ -6,6 +6,7 @@ import { assertResponseError, request, ResponseError } from "$app/utils/request"
 import { Button } from "$app/components/Button";
 import { Modal } from "$app/components/Modal";
 import { showAlert } from "$app/components/server-components/Alert";
+import { Section } from "$app/components/ui/Section";
 
 type Props = {
   formatted_balance_to_forfeit_on_account_deletion: string | null;
@@ -32,10 +33,7 @@ const AccountDeletionSection = (props: Props) => {
   };
 
   return (
-    <section className="p-4! md:p-8!">
-      <header>
-        <h2>Danger Zone</h2>
-      </header>
+    <Section className="p-4! md:p-8!" header={<h2>Danger Zone</h2>}>
       <p>
         <a href="/help/article/37-how-to-delete-your-gumroad-account" target="_blank" rel="noreferrer">
           Deleting your account
@@ -84,7 +82,7 @@ const AccountDeletionSection = (props: Props) => {
           .
         </p>
       </Modal>
-    </section>
+    </Section>
   );
 };
 
diff --git a/app/javascript/components/Settings/AdvancedPage/ApplicationForm.tsx b/app/javascript/components/Settings/AdvancedPage/ApplicationForm.tsx
index 134662d55e..d89e8b2987 100644
--- a/app/javascript/components/Settings/AdvancedPage/ApplicationForm.tsx
+++ b/app/javascript/components/Settings/AdvancedPage/ApplicationForm.tsx
@@ -1,6 +1,5 @@
 import { router } from "@inertiajs/react";
 import { DirectUpload } from "@rails/activestorage";
-import cx from "classnames";
 import placeholderAppIcon from "images/gumroad_app.png";
 import * as React from "react";
 import { cast } from "ts-safe-cast";
@@ -12,6 +11,9 @@ import { assertResponseError, request, ResponseError } from "$app/utils/request"
 
 import { Button } from "$app/components/Button";
 import { showAlert } from "$app/components/server-components/Alert";
+import { Fieldset, Legend } from "$app/components/ui/Fieldset";
+import { Input } from "$app/components/ui/Input";
+import { Label } from "$app/components/ui/Label";
 import { WithTooltip } from "$app/components/WithTooltip";
 
 export type Application = {
@@ -126,26 +128,27 @@ const ApplicationForm = ({ application }: { application?: Application }) => {
       <input
         ref={iconInputRef}
         type="file"
+        className="sr-only"
         accept={ALLOWED_ICON_EXTENSIONS.map((ext) => `.${ext}`).join(",")}
         tabIndex={-1}
         onChange={handleIconChange}
       />
-      <fieldset>
-        <legend>
-          <label>Application icon</label>
-        </legend>
+      <Fieldset>
+        <Legend>
+          <Label>Application icon</Label>
+        </Legend>
         <div style={{ display: "flex", gap: "var(--spacer-4)", alignItems: "flex-start" }}>
           <img className="application-icon" src={icon?.url || placeholderAppIcon} width={80} height={80} />
           <Button onClick={() => iconInputRef.current?.click()} disabled={isUploadingIcon || isSubmitting}>
             {isUploadingIcon ? "Uploading..." : "Upload icon"}
           </Button>
         </div>
-      </fieldset>
-      <fieldset className={cx({ danger: name.error })}>
-        <legend>
-          <label htmlFor={`${uid}-name`}>Application name</label>
-        </legend>
-        <input
+      </Fieldset>
+      <Fieldset state={name.error ? "danger" : undefined}>
+        <Legend>
+          <Label htmlFor={`${uid}-name`}>Application name</Label>
+        </Legend>
+        <Input
           id={`${uid}-name`}
           ref={nameRef}
           placeholder="Name"
@@ -153,12 +156,12 @@ const ApplicationForm = ({ application }: { application?: Application }) => {
           value={name.value}
           onChange={(e) => setName({ value: e.target.value })}
         />
-      </fieldset>
-      <fieldset className={cx({ danger: redirectUri.error })}>
-        <legend>
-          <label htmlFor={`${uid}-redirectUri`}>Redirect URI</label>
-        </legend>
-        <input
+      </Fieldset>
+      <Fieldset state={redirectUri.error ? "danger" : undefined}>
+        <Legend>
+          <Label htmlFor={`${uid}-redirectUri`}>Redirect URI</Label>
+        </Legend>
+        <Input
           id={`${uid}-redirectUri`}
           ref={redirectUriRef}
           placeholder="http://yourapp.com/callback"
@@ -167,35 +170,35 @@ const ApplicationForm = ({ application }: { application?: Application }) => {
           value={redirectUri.value}
           onChange={(e) => setRedirectUri({ value: e.target.value })}
         />
-      </fieldset>
+      </Fieldset>
 
       {application ? (
         <>
-          <fieldset>
-            <legend>
-              <label htmlFor={`${uid}-uid`}>Application ID</label>
-            </legend>
-            <input id={`${uid}-uid`} readOnly type="text" value={application.uid} />
-          </fieldset>
-          <fieldset>
-            <legend>
-              <label htmlFor={`${uid}-secret`}>Application Secret</label>
-            </legend>
-            <input id={`${uid}-secret`} readOnly type="text" value={application.secret} />
-          </fieldset>
+          <Fieldset>
+            <Legend>
+              <Label htmlFor={`${uid}-uid`}>Application ID</Label>
+            </Legend>
+            <Input id={`${uid}-uid`} readOnly type="text" value={application.uid} />
+          </Fieldset>
+          <Fieldset>
+            <Legend>
+              <Label htmlFor={`${uid}-secret`}>Application Secret</Label>
+            </Legend>
+            <Input id={`${uid}-secret`} readOnly type="text" value={application.secret} />
+          </Fieldset>
 
           {token ? (
-            <fieldset>
-              <legend>
-                <label htmlFor={`${uid}-accessToken`}>
+            <Fieldset>
+              <Legend>
+                <Label htmlFor={`${uid}-accessToken`}>
                   Access Token
                   <WithTooltip tip="This is a ready-to-use access token for our API.">
                     <span>(?)</span>
                   </WithTooltip>
-                </label>
-              </legend>
-              <input id={`${uid}-accessToken`} readOnly type="text" value={token} />
-            </fieldset>
+                </Label>
+              </Legend>
+              <Input id={`${uid}-accessToken`} readOnly type="text" value={token} />
+            </Fieldset>
           ) : null}
           <div className="flex gap-2">
             <Button color="accent" onClick={handleSubmit} disabled={isSubmitting || isUploadingIcon}>
diff --git a/app/javascript/components/Settings/AdvancedPage/ApplicationsSection.tsx b/app/javascript/components/Settings/AdvancedPage/ApplicationsSection.tsx
index a2acc4d20d..329673b30b 100644
--- a/app/javascript/components/Settings/AdvancedPage/ApplicationsSection.tsx
+++ b/app/javascript/components/Settings/AdvancedPage/ApplicationsSection.tsx
@@ -5,6 +5,7 @@ import * as React from "react";
 import { Button } from "$app/components/Button";
 import { showAlert } from "$app/components/server-components/Alert";
 import ApplicationForm from "$app/components/Settings/AdvancedPage/ApplicationForm";
+import { Section } from "$app/components/ui/Section";
 import { Row, RowActions, RowContent, Rows } from "$app/components/ui/Rows";
 
 export type Application = {
@@ -15,12 +16,6 @@ export type Application = {
 
 const CreateApplication = () => (
   <>
-    <header id="application-form">
-      <h2>Applications</h2>
-      <a href="/help/article/280-create-application-api" target="_blank" rel="noreferrer">
-        Learn more
-      </a>
-    </header>
     <h3>Create application</h3>
     <ApplicationForm />
   </>
@@ -83,9 +78,19 @@ const ApplicationRow = ({ application, onRemove }: { application: Application; o
 };
 
 const ApplicationsSection = (props: { applications: Application[] }) => (
-  <section className="p-4! md:p-8!">
+  <Section
+    className="p-4! md:p-8!"
+    header={
+      <>
+        <h2>Applications</h2>
+        <a href="/help/article/280-create-application-api" target="_blank" rel="noreferrer">
+          Learn more
+        </a>
+      </>
+    }
+  >
     <CreateApplication />
     <ApplicationList applications={props.applications} />
-  </section>
+  </Section>
 );
 export default ApplicationsSection;
diff --git a/app/javascript/components/Settings/AdvancedPage/BlockEmailsSection.tsx b/app/javascript/components/Settings/AdvancedPage/BlockEmailsSection.tsx
index 826b11cae1..91fdfe2e7b 100644
--- a/app/javascript/components/Settings/AdvancedPage/BlockEmailsSection.tsx
+++ b/app/javascript/components/Settings/AdvancedPage/BlockEmailsSection.tsx
@@ -2,6 +2,11 @@ import * as React from "react";
 
 import { isValidEmail } from "$app/utils/email";
 
+import { Fieldset, Legend } from "$app/components/ui/Fieldset";
+import { Label } from "$app/components/ui/Label";
+import { Section } from "$app/components/ui/Section";
+import { Textarea } from "$app/components/ui/Textarea";
+
 type Props = {
   blockedEmails: string;
   setBlockedEmails: (emails: string) => void;
@@ -39,30 +44,32 @@ const BlockEmailsSection = ({ blockedEmails, setBlockedEmails }: Props) => {
   };
 
   return (
-    <section className="p-4! md:p-8!">
-      <header>
-        <h2>Mass-block emails</h2>
-        <a href="/help/article/329-customer-moderation" target="_blank" rel="noreferrer">
-          Learn more
-        </a>
-      </header>
-      <fieldset>
-        <legend>
-          <label htmlFor={uid}>Block emails from purchasing</label>
-        </legend>
-        <div className="input input-wrapper">
-          <textarea
-            id={uid}
-            placeholder={["name@example.com", "name@example.net", "name@example.org"].join("\n")}
-            rows={4}
-            value={blockedEmails}
-            onChange={(e) => setBlockedEmails(e.target.value)}
-            onBlur={sanitizeBlockedEmails}
-          />
-        </div>
-        <small>Please enter each email address on a new line.</small>
-      </fieldset>
-    </section>
+    <Section
+      className="p-4! md:p-8!"
+      header={
+        <>
+          <h2>Mass-block emails</h2>
+          <a href="/help/article/329-customer-moderation" target="_blank" rel="noreferrer">
+            Learn more
+          </a>
+        </>
+      }
+    >
+      <Fieldset>
+        <Legend>
+          <Label htmlFor={uid}>Block emails from purchasing</Label>
+        </Legend>
+        <Textarea
+          id={uid}
+          placeholder={["name@example.com", "name@example.net", "name@example.org"].join("\n")}
+          rows={4}
+          value={blockedEmails}
+          onChange={(e) => setBlockedEmails(e.target.value)}
+          onBlur={sanitizeBlockedEmails}
+        />
+        <small className="text-muted">Please enter each email address on a new line.</small>
+      </Fieldset>
+    </Section>
   );
 };
 
diff --git a/app/javascript/components/Settings/AdvancedPage/CreditCardForm.tsx b/app/javascript/components/Settings/AdvancedPage/CreditCardForm.tsx
index 015b8d29fe..56b529f0aa 100644
--- a/app/javascript/components/Settings/AdvancedPage/CreditCardForm.tsx
+++ b/app/javascript/components/Settings/AdvancedPage/CreditCardForm.tsx
@@ -8,6 +8,8 @@ import { assertResponseError, request, ResponseError } from "$app/utils/request"
 import { Button } from "$app/components/Button";
 import { Icon } from "$app/components/Icons";
 import { showAlert } from "$app/components/server-components/Alert";
+import { InputGroup } from "$app/components/ui/InputGroup";
+import { Section } from "$app/components/ui/Section";
 import { WithTooltip } from "$app/components/WithTooltip";
 
 type Props = {
@@ -36,19 +38,23 @@ export const CreditCardForm = ({ card, can_remove, read_only }: Props) => {
   });
 
   return status === "removed" ? null : (
-    <section className="p-4! md:p-8!">
-      <header>
-        <h2>Saved credit card</h2>
-        <a href="/help/article/216-delete-credit-card-information" target="_blank" rel="noreferrer">
-          Learn more.
-        </a>
-      </header>
+    <Section
+      className="p-4! md:p-8!"
+      header={
+        <>
+          <h2>Saved credit card</h2>
+          <a href="/help/article/216-delete-credit-card-information" target="_blank" rel="noreferrer">
+            Learn more.
+          </a>
+        </>
+      }
+    >
       <div className="flex flex-col gap-4">
-        <div className="input read-only" aria-label="Saved credit card">
+        <InputGroup readOnly aria-label="Saved credit card">
           <Icon name="outline-credit-card" />
           <span>{card.number}</span>
           <span style={{ marginLeft: "auto" }}>{card.expiration_date}</span>
-        </div>
+        </InputGroup>
         {read_only ? null : (
           <WithTooltip
             tip={
@@ -64,7 +70,7 @@ export const CreditCardForm = ({ card, can_remove, read_only }: Props) => {
           </WithTooltip>
         )}
       </div>
-    </section>
+    </Section>
   );
 };
 
diff --git a/app/javascript/components/Settings/AdvancedPage/CustomDomainSection.tsx b/app/javascript/components/Settings/AdvancedPage/CustomDomainSection.tsx
index d83b12ae4f..4ecbbdfba0 100644
--- a/app/javascript/components/Settings/AdvancedPage/CustomDomainSection.tsx
+++ b/app/javascript/components/Settings/AdvancedPage/CustomDomainSection.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 
 import CustomDomain from "$app/components/CustomDomain";
+import { Section } from "$app/components/ui/Section";
 
 const CustomDomainSection = ({
   verificationStatus,
@@ -11,21 +12,24 @@ const CustomDomainSection = ({
   customDomain: string;
   setCustomDomain: (val: string) => void;
 }) => (
-  <section className="p-4! md:p-8!">
-    <header>
-      <h2>Custom domain</h2>
-      <a href="/help/article/153-setting-up-a-custom-domain" target="_blank" rel="noreferrer">
-        Learn more
-      </a>
-    </header>
-
+  <Section
+    className="p-4! md:p-8!"
+    header={
+      <>
+        <h2>Custom domain</h2>
+        <a href="/help/article/153-setting-up-a-custom-domain" target="_blank" rel="noreferrer">
+          Learn more
+        </a>
+      </>
+    }
+  >
     <CustomDomain
       verificationStatus={verificationStatus}
       customDomain={customDomain}
       setCustomDomain={setCustomDomain}
       label="Domain"
     />
-  </section>
+  </Section>
 );
 
 export default CustomDomainSection;
diff --git a/app/javascript/components/Settings/AdvancedPage/NotificationEndpointSection.tsx b/app/javascript/components/Settings/AdvancedPage/NotificationEndpointSection.tsx
index dfdc237ea7..3f87918b20 100644
--- a/app/javascript/components/Settings/AdvancedPage/NotificationEndpointSection.tsx
+++ b/app/javascript/components/Settings/AdvancedPage/NotificationEndpointSection.tsx
@@ -6,6 +6,11 @@ import { assertResponseError, request, ResponseError } from "$app/utils/request"
 
 import { Button } from "$app/components/Button";
 import { showAlert } from "$app/components/server-components/Alert";
+import { Fieldset, Legend } from "$app/components/ui/Fieldset";
+import { Input } from "$app/components/ui/Input";
+import { InputGroup } from "$app/components/ui/InputGroup";
+import { Label } from "$app/components/ui/Label";
+import { Section } from "$app/components/ui/Section";
 import { Pill } from "$app/components/ui/Pill";
 import { WithTooltip } from "$app/components/WithTooltip";
 
@@ -48,19 +53,24 @@ const NotificationEndpointSection = ({
   });
 
   return (
-    <section className="p-4! md:p-8!">
-      <header>
-        <h2>Ping</h2>
-        <a href={Routes.ping_path()} target="_blank" rel="noreferrer">
-          Learn more
-        </a>
-      </header>
-      <fieldset>
-        <legend>
-          <label htmlFor={uid}>Ping endpoint</label>
-        </legend>
-        <div className="input input-wrapper">
-          <input
+    <Section
+      className="p-4! md:p-8!"
+      header={
+        <>
+          <h2>Ping</h2>
+          <a href={Routes.ping_path()} target="_blank" rel="noreferrer">
+            Learn more
+          </a>
+        </>
+      }
+    >
+      <Fieldset>
+        <Legend>
+          <Label htmlFor={uid}>Ping endpoint</Label>
+        </Legend>
+        <InputGroup>
+          <Input
+            asChild
             placeholder="Ping endpoint"
             type="url"
             id={uid}
@@ -74,10 +84,10 @@ const NotificationEndpointSection = ({
               </Button>
             </Pill>
           </WithTooltip>
-        </div>
-        <small>For external services, your `seller_id` is {userId}</small>
-      </fieldset>
-    </section>
+        </InputGroup>
+        <small className="text-muted">For external services, your `seller_id` is {userId}</small>
+      </Fieldset>
+    </Section>
   );
 };
 
diff --git a/app/javascript/components/Settings/AdvancedPage/ProductLevelSupportEmailsForm.tsx b/app/javascript/components/Settings/AdvancedPage/ProductLevelSupportEmailsForm.tsx
index 3978bea6a5..91fa8bf8ea 100644
--- a/app/javascript/components/Settings/AdvancedPage/ProductLevelSupportEmailsForm.tsx
+++ b/app/javascript/components/Settings/AdvancedPage/ProductLevelSupportEmailsForm.tsx
@@ -3,6 +3,9 @@ import * as React from "react";
 import { Button } from "$app/components/Button";
 import { Icon } from "$app/components/Icons";
 import { TagInput } from "$app/components/TagInput";
+import { Fieldset, Legend } from "$app/components/ui/Fieldset";
+import { Input } from "$app/components/ui/Input";
+import { Label } from "$app/components/ui/Label";
 import { Placeholder } from "$app/components/ui/Placeholder";
 import { Row, RowActions, RowContent, RowDetails, Rows } from "$app/components/ui/Rows";
 
@@ -76,9 +79,9 @@ const ProductLevelSupportEmailRow = React.memo(
         </RowActions>
         {expanded ? (
           <RowDetails className="flex flex-col gap-4">
-            <fieldset>
-              <label htmlFor={`${uid}email`}>Email</label>
-              <input
+            <Fieldset>
+              <Label htmlFor={`${uid}email`}>Email</Label>
+              <Input
                 id={`${uid}email`}
                 type="email"
                 value={supportEmail.email}
@@ -86,12 +89,12 @@ const ProductLevelSupportEmailRow = React.memo(
                 required={supportEmail.product_ids.length > 0}
                 onChange={handleEmailChange}
               />
-              <small>This reply-to email will appear on receipts for selected products.</small>
-            </fieldset>
-            <fieldset>
-              <legend>
-                <label htmlFor={`${uid}-products`}>Products</label>
-              </legend>
+              <small className="text-muted">This reply-to email will appear on receipts for selected products.</small>
+            </Fieldset>
+            <Fieldset>
+              <Legend>
+                <Label htmlFor={`${uid}-products`}>Products</Label>
+              </Legend>
               <TagInput
                 inputId={`${uid}-products`}
                 tagIds={supportEmail.product_ids}
@@ -99,7 +102,7 @@ const ProductLevelSupportEmailRow = React.memo(
                 isDisabled={isDisabled}
                 onChangeTagIds={handleProductIdsChange}
               />
-            </fieldset>
+            </Fieldset>
           </RowDetails>
         ) : null}
       </Row>
diff --git a/app/javascript/components/Settings/PaymentsPage/AccountDetailsSection.tsx b/app/javascript/components/Settings/PaymentsPage/AccountDetailsSection.tsx
index 4091dd5347..de2d0ed88f 100644
--- a/app/javascript/components/Settings/PaymentsPage/AccountDetailsSection.tsx
+++ b/app/javascript/components/Settings/PaymentsPage/AccountDetailsSection.tsx
@@ -1,12 +1,17 @@
-import cx from "classnames";
 import parsePhoneNumberFromString, { CountryCode } from "libphonenumber-js";
 import * as React from "react";
 import { cast } from "ts-safe-cast";
 
 import type { ComplianceInfo, FormFieldName, User } from "$app/types/payments";
+import { classNames } from "$app/utils/classNames";
 
 import { Button } from "$app/components/Button";
 import { Icon } from "$app/components/Icons";
+import { Checkbox } from "$app/components/ui/Checkbox";
+import { Fieldset, Legend } from "$app/components/ui/Fieldset";
+import { Input } from "$app/components/ui/Input";
+import { Label } from "$app/components/ui/Label";
+import { Select } from "$app/components/ui/Select";
 
 const AccountDetailsSection = ({
   user,
@@ -52,19 +57,28 @@ const AccountDetailsSection = ({
     <section className="grid gap-8">
       {(complianceInfo.is_business ? complianceInfo.business_country !== "AE" : complianceInfo.country !== "AE") ? (
         <section>
-          <fieldset>
-            <legend>
-              <label>Account type</label>
+          <Fieldset>
+            <Legend>
+              <Label>Account type</Label>
               <a href="/help/article/260-your-payout-settings-page">What type of account should I choose?</a>
-            </legend>
-          </fieldset>
-          <div className="radio-buttons" role="radiogroup">
+            </Legend>
+          </Fieldset>
+          <div
+            className="grid gap-4"
+            style={{ gridTemplateColumns: "repeat(auto-fit, minmax(min(15rem, 100%), 1fr))" }}
+            role="radiogroup"
+          >
             <Button
               role="radio"
               key="individual"
               aria-checked={!complianceInfo.is_business}
               onClick={() => updateComplianceInfo({ is_business: false })}
               disabled={isFormDisabled}
+              className={classNames(
+                "items-start! justify-start! gap-3! text-left transition-transform!",
+                "hover:translate-x-0! hover:translate-y-0!",
+                !complianceInfo.is_business && "-translate-x-1! -translate-y-1! bg-background! shadow!",
+              )}
             >
               <Icon name="person" />
               <div>
@@ -83,6 +97,11 @@ const AccountDetailsSection = ({
                 })
               }
               disabled={isFormDisabled}
+              className={classNames(
+                "items-start! justify-start! gap-3! text-left transition-transform!",
+                "hover:translate-x-0! hover:translate-y-0!",
+                complianceInfo.is_business && "-translate-x-1! -translate-y-1! bg-background! shadow!",
+              )}
             >
               <Icon name="shop-window" />
               <div>
@@ -102,11 +121,11 @@ const AccountDetailsSection = ({
               gridTemplateColumns: "repeat(auto-fit, minmax(var(--dynamic-grid), 1fr))",
             }}
           >
-            <fieldset className={cx({ danger: errorFieldNames.has("business_name") })}>
-              <legend>
-                <label htmlFor={`${uid}-business-legal-name`}>Legal business name</label>
-              </legend>
-              <input
+            <Fieldset state={errorFieldNames.has("business_name") ? "danger" : undefined}>
+              <Legend>
+                <Label htmlFor={`${uid}-business-legal-name`}>Legal business name</Label>
+              </Legend>
+              <Input
                 id={`${uid}-business-legal-name`}
                 placeholder="Acme"
                 required={complianceInfo.is_business}
@@ -115,13 +134,13 @@ const AccountDetailsSection = ({
                 aria-invalid={errorFieldNames.has("business_name")}
                 onChange={(evt) => updateComplianceInfo({ business_name: evt.target.value })}
               />
-            </fieldset>
-            <fieldset className={cx({ danger: errorFieldNames.has("business_type") })}>
-              <legend>
-                <label htmlFor={`${uid}-business-type`}>Type</label>
-              </legend>
+            </Fieldset>
+            <Fieldset state={errorFieldNames.has("business_type") ? "danger" : undefined}>
+              <Legend>
+                <Label htmlFor={`${uid}-business-type`}>Type</Label>
+              </Legend>
               {complianceInfo.business_country === "AE" ? (
-                <select
+                <Select
                   id={`${uid}-business-type`}
                   required={complianceInfo.is_business}
                   disabled={isFormDisabled}
@@ -135,9 +154,9 @@ const AccountDetailsSection = ({
                       {businessType.name}
                     </option>
                   ))}
-                </select>
+                </Select>
               ) : complianceInfo.business_country === "IN" ? (
-                <select
+                <Select
                   id={`${uid}-business-type`}
                   required={complianceInfo.is_business}
                   disabled={isFormDisabled}
@@ -151,9 +170,9 @@ const AccountDetailsSection = ({
                       {businessType.name}
                     </option>
                   ))}
-                </select>
+                </Select>
               ) : complianceInfo.business_country === "CA" ? (
-                <select
+                <Select
                   id={`${uid}-business-type`}
                   required={complianceInfo.is_business}
                   disabled={isFormDisabled}
@@ -167,9 +186,9 @@ const AccountDetailsSection = ({
                       {businessType.name}
                     </option>
                   ))}
-                </select>
+                </Select>
               ) : (
-                <select
+                <Select
                   id={`${uid}-business-type`}
                   disabled={isFormDisabled}
                   value={complianceInfo.business_type || "Type"}
@@ -183,17 +202,17 @@ const AccountDetailsSection = ({
                   <option value="profit">Non Profit</option>
                   <option value="sole_proprietorship">Sole Proprietorship</option>
                   <option value="corporation">Corporation</option>
-                </select>
+                </Select>
               )}
-            </fieldset>
+            </Fieldset>
           </div>
           {complianceInfo.business_country === "JP" ? (
             <div style={{ display: "grid", gap: "var(--spacer-5)", gridAutoFlow: "column", gridAutoColumns: "1fr" }}>
-              <fieldset className={cx({ danger: errorFieldNames.has("business_name_kanji") })}>
-                <legend>
-                  <label htmlFor={`${uid}-business-name-kanji`}>Business Name (Kanji)</label>
-                </legend>
-                <input
+              <Fieldset state={errorFieldNames.has("business_name_kanji") ? "danger" : undefined}>
+                <Legend>
+                  <Label htmlFor={`${uid}-business-name-kanji`}>Business Name (Kanji)</Label>
+                </Legend>
+                <Input
                   id={`${uid}-business-name-kanji`}
                   type="text"
                   placeholder="Legal Business Name (Kanji)"
@@ -203,12 +222,12 @@ const AccountDetailsSection = ({
                   required
                   onChange={(evt) => updateComplianceInfo({ business_name_kanji: evt.target.value })}
                 />
-              </fieldset>
-              <fieldset className={cx({ danger: errorFieldNames.has("business_name_kana") })}>
-                <legend>
-                  <label htmlFor={`${uid}-business-name-kana`}>Legal Business Name (Kana)</label>
-                </legend>
-                <input
+              </Fieldset>
+              <Fieldset state={errorFieldNames.has("business_name_kana") ? "danger" : undefined}>
+                <Legend>
+                  <Label htmlFor={`${uid}-business-name-kana`}>Legal Business Name (Kana)</Label>
+                </Legend>
+                <Input
                   id={`${uid}-business-name-kana`}
                   type="text"
                   placeholder="Business Name (Kana)"
@@ -218,16 +237,16 @@ const AccountDetailsSection = ({
                   required
                   onChange={(evt) => updateComplianceInfo({ business_name_kana: evt.target.value })}
                 />
-              </fieldset>
+              </Fieldset>
             </div>
           ) : null}
           {complianceInfo.business_country === "JP" ? (
             <div style={{ display: "grid", gap: "var(--spacer-5)", gridAutoFlow: "column", gridAutoColumns: "1fr" }}>
-              <fieldset className={cx({ danger: errorFieldNames.has("business_building_number") })}>
-                <legend>
-                  <label htmlFor={`${uid}-business-building-number`}>Business Block / Building Number</label>
-                </legend>
-                <input
+              <Fieldset state={errorFieldNames.has("business_building_number") ? "danger" : undefined}>
+                <Legend>
+                  <Label htmlFor={`${uid}-business-building-number`}>Business Block / Building Number</Label>
+                </Legend>
+                <Input
                   id={`${uid}-business-building-number`}
                   type="text"
                   placeholder="1-1"
@@ -237,12 +256,12 @@ const AccountDetailsSection = ({
                   required
                   onChange={(evt) => updateComplianceInfo({ business_building_number: evt.target.value })}
                 />
-              </fieldset>
-              <fieldset className={cx({ danger: errorFieldNames.has("business_street_address_kanji") })}>
-                <legend>
-                  <label htmlFor={`${uid}-business-street-address-kanji`}>Business Street Address (Kanji)</label>
-                </legend>
-                <input
+              </Fieldset>
+              <Fieldset state={errorFieldNames.has("business_street_address_kanji") ? "danger" : undefined}>
+                <Legend>
+                  <Label htmlFor={`${uid}-business-street-address-kanji`}>Business Street Address (Kanji)</Label>
+                </Legend>
+                <Input
                   id={`${uid}-business-street-address-kanji`}
                   type="text"
                   placeholder="Business Street Address (Kanji)"
@@ -252,12 +271,12 @@ const AccountDetailsSection = ({
                   required
                   onChange={(evt) => updateComplianceInfo({ business_street_address_kanji: evt.target.value })}
                 />
-              </fieldset>
-              <fieldset className={cx({ danger: errorFieldNames.has("business_street_address_kana") })}>
-                <legend>
-                  <label htmlFor={`${uid}-business-street-address-kana`}>Business Street Address (Kana)</label>
-                </legend>
-                <input
+              </Fieldset>
+              <Fieldset state={errorFieldNames.has("business_street_address_kana") ? "danger" : undefined}>
+                <Legend>
+                  <Label htmlFor={`${uid}-business-street-address-kana`}>Business Street Address (Kana)</Label>
+                </Legend>
+                <Input
                   id={`${uid}-business-street-address-kana`}
                   type="text"
                   placeholder="Business Street Address (Kana)"
@@ -267,14 +286,14 @@ const AccountDetailsSection = ({
                   required
                   onChange={(evt) => updateComplianceInfo({ business_street_address_kana: evt.target.value })}
                 />
-              </fieldset>
+              </Fieldset>
             </div>
           ) : (
-            <fieldset className={cx({ danger: errorFieldNames.has("business_street_address") })}>
-              <legend>
-                <label htmlFor={`${uid}-business-street-address`}>Address</label>
-              </legend>
-              <input
+            <Fieldset state={errorFieldNames.has("business_street_address") ? "danger" : undefined}>
+              <Legend>
+                <Label htmlFor={`${uid}-business-street-address`}>Address</Label>
+              </Legend>
+              <Input
                 id={`${uid}-business-street-address`}
                 placeholder="123 smith street"
                 value={complianceInfo.business_street_address || ""}
@@ -282,7 +301,7 @@ const AccountDetailsSection = ({
                 aria-invalid={errorFieldNames.has("business_street_address")}
                 onChange={(evt) => updateComplianceInfo({ business_street_address: evt.target.value })}
               />
-            </fieldset>
+            </Fieldset>
           )}
           <div
             style={{
@@ -291,11 +310,11 @@ const AccountDetailsSection = ({
               gridTemplateColumns: "repeat(auto-fit, minmax(var(--dynamic-grid), 1fr))",
             }}
           >
-            <fieldset className={cx({ danger: errorFieldNames.has("business_city") })}>
-              <legend>
-                <label htmlFor={`${uid}-business-city`}>City</label>
-              </legend>
-              <input
+            <Fieldset state={errorFieldNames.has("business_city") ? "danger" : undefined}>
+              <Legend>
+                <Label htmlFor={`${uid}-business-city`}>City</Label>
+              </Legend>
+              <Input
                 id={`${uid}-business-city`}
                 placeholder="Springfield"
                 value={complianceInfo.business_city || ""}
@@ -303,13 +322,13 @@ const AccountDetailsSection = ({
                 aria-invalid={errorFieldNames.has("business_city")}
                 onChange={(evt) => updateComplianceInfo({ business_city: evt.target.value })}
               />
-            </fieldset>
+            </Fieldset>
             {complianceInfo.business_country === "US" ? (
-              <fieldset className={cx({ danger: errorFieldNames.has("business_state") })}>
-                <legend>
-                  <label htmlFor={`${uid}-business-state`}>State</label>
-                </legend>
-                <select
+              <Fieldset state={errorFieldNames.has("business_state") ? "danger" : undefined}>
+                <Legend>
+                  <Label htmlFor={`${uid}-business-state`}>State</Label>
+                </Legend>
+                <Select
                   id={`${uid}-business-state`}
                   required={complianceInfo.is_business}
                   disabled={isFormDisabled}
@@ -325,14 +344,14 @@ const AccountDetailsSection = ({
                       {state.name}
                     </option>
                   ))}
-                </select>
-              </fieldset>
+                </Select>
+              </Fieldset>
             ) : complianceInfo.business_country === "CA" ? (
-              <fieldset className={cx({ danger: errorFieldNames.has("business_state") })}>
-                <legend>
-                  <label htmlFor={`${uid}-business-province`}>Province</label>
-                </legend>
-                <select
+              <Fieldset state={errorFieldNames.has("business_state") ? "danger" : undefined}>
+                <Legend>
+                  <Label htmlFor={`${uid}-business-province`}>Province</Label>
+                </Legend>
+                <Select
                   id={`${uid}-business-province`}
                   required={complianceInfo.is_business}
                   disabled={isFormDisabled}
@@ -348,14 +367,14 @@ const AccountDetailsSection = ({
                       {state.name}
                     </option>
                   ))}
-                </select>
-              </fieldset>
+                </Select>
+              </Fieldset>
             ) : complianceInfo.business_country === "AU" ? (
-              <fieldset className={cx({ danger: errorFieldNames.has("business_state") })}>
-                <legend>
-                  <label htmlFor={`${uid}-business-state`}>State</label>
-                </legend>
-                <select
+              <Fieldset state={errorFieldNames.has("business_state") ? "danger" : undefined}>
+                <Legend>
+                  <Label htmlFor={`${uid}-business-state`}>State</Label>
+                </Legend>
+                <Select
                   id={`${uid}-business-state`}
                   required={complianceInfo.is_business}
                   disabled={isFormDisabled}
@@ -371,14 +390,14 @@ const AccountDetailsSection = ({
                       {state.name}
                     </option>
                   ))}
-                </select>
-              </fieldset>
+                </Select>
+              </Fieldset>
             ) : complianceInfo.business_country === "MX" ? (
-              <fieldset className={cx({ danger: errorFieldNames.has("business_state") })}>
-                <legend>
-                  <label htmlFor={`${uid}-business-state`}>State</label>
-                </legend>
-                <select
+              <Fieldset state={errorFieldNames.has("business_state") ? "danger" : undefined}>
+                <Legend>
+                  <Label htmlFor={`${uid}-business-state`}>State</Label>
+                </Legend>
+                <Select
                   id={`${uid}-business-state`}
                   required={complianceInfo.is_business}
                   disabled={isFormDisabled}
@@ -394,14 +413,14 @@ const AccountDetailsSection = ({
                       {state.name}
                     </option>
                   ))}
-                </select>
-              </fieldset>
+                </Select>
+              </Fieldset>
             ) : complianceInfo.business_country === "AE" ? (
-              <fieldset className={cx({ danger: errorFieldNames.has("business_state") })}>
-                <legend>
-                  <label htmlFor={`${uid}-business-state`}>Province</label>
-                </legend>
-                <select
+              <Fieldset state={errorFieldNames.has("business_state") ? "danger" : undefined}>
+                <Legend>
+                  <Label htmlFor={`${uid}-business-state`}>Province</Label>
+                </Legend>
+                <Select
                   id={`${uid}-business-state`}
                   required={complianceInfo.is_business}
                   disabled={isFormDisabled}
@@ -417,14 +436,14 @@ const AccountDetailsSection = ({
                       {state.name}
                     </option>
                   ))}
-                </select>
-              </fieldset>
+                </Select>
+              </Fieldset>
             ) : complianceInfo.business_country === "IE" ? (
-              <fieldset className={cx({ danger: errorFieldNames.has("business_state") })}>
-                <legend>
-                  <label htmlFor={`${uid}-business-county`}>County</label>
-                </legend>
-                <select
+              <Fieldset state={errorFieldNames.has("business_state") ? "danger" : undefined}>
+                <Legend>
+                  <Label htmlFor={`${uid}-business-county`}>County</Label>
+                </Legend>
+                <Select
                   id={`${uid}-business-county`}
                   required={complianceInfo.is_business}
                   disabled={isFormDisabled}
@@ -440,16 +459,16 @@ const AccountDetailsSection = ({
                       {state.name}
                     </option>
                   ))}
-                </select>
-              </fieldset>
+                </Select>
+              </Fieldset>
             ) : null}
-            <fieldset className={cx({ danger: errorFieldNames.has("business_zip_code") })}>
-              <legend>
-                <label htmlFor={`${uid}-business-zip-code`}>
+            <Fieldset state={errorFieldNames.has("business_zip_code") ? "danger" : undefined}>
+              <Legend>
+                <Label htmlFor={`${uid}-business-zip-code`}>
                   {complianceInfo.business_country === "US" ? "ZIP code" : "Postal code"}
-                </label>
-              </legend>
-              <input
+                </Label>
+              </Legend>
+              <Input
                 id={`${uid}-business-zip-code`}
                 placeholder="12345"
                 required={complianceInfo.is_business}
@@ -458,13 +477,13 @@ const AccountDetailsSection = ({
                 aria-invalid={errorFieldNames.has("business_zip_code")}
                 onChange={(evt) => updateComplianceInfo({ business_zip_code: evt.target.value })}
               />
-            </fieldset>
+            </Fieldset>
           </div>
-          <fieldset>
-            <legend>
-              <label htmlFor={`${uid}-business-country`}>Country</label>
-            </legend>
-            <select
+          <Fieldset>
+            <Legend>
+              <Label htmlFor={`${uid}-business-country`}>Country</Label>
+            </Legend>
+            <Select
               id={`${uid}-business-country`}
               value={complianceInfo.business_country || ""}
               disabled={isFormDisabled}
@@ -476,13 +495,13 @@ const AccountDetailsSection = ({
                   {name}
                 </option>
               ))}
-            </select>
-          </fieldset>
-          <fieldset className={cx({ danger: errorFieldNames.has("business_phone") })}>
-            <legend>
-              <label htmlFor={`${uid}-business-phone-number`}>Business phone number</label>
-            </legend>
-            <input
+            </Select>
+          </Fieldset>
+          <Fieldset state={errorFieldNames.has("business_phone") ? "danger" : undefined}>
+            <Legend>
+              <Label htmlFor={`${uid}-business-phone-number`}>Business phone number</Label>
+            </Legend>
+            <Input
               id={`${uid}-business-phone-number`}
               type="tel"
               placeholder="555-555-5555"
@@ -496,18 +515,18 @@ const AccountDetailsSection = ({
                 })
               }
             />
-          </fieldset>
+          </Fieldset>
           {user.country_supports_native_payouts || complianceInfo.business_country === "AE" ? (
-            <fieldset className={cx({ danger: errorFieldNames.has("business_tax_id") })}>
+            <Fieldset state={errorFieldNames.has("business_tax_id") ? "danger" : undefined}>
               {complianceInfo.business_country === "US" ? (
                 <>
-                  <legend>
-                    <label htmlFor={`${uid}-business-tax-id`}>Business Tax ID (EIN, or SSN for sole proprietors)</label>
+                  <Legend>
+                    <Label htmlFor={`${uid}-business-tax-id`}>Business Tax ID (EIN, or SSN for sole proprietors)</Label>
                     <div className="small">
                       <a href="/help/article/260-your-payout-settings-page">I'm not sure what my Tax ID is.</a>
                     </div>
-                  </legend>
-                  <input
+                  </Legend>
+                  <Input
                     id={`${uid}-business-tax-id`}
                     type="text"
                     placeholder={user.business_tax_id_entered ? "Hidden for security" : "12-3456789"}
@@ -519,10 +538,10 @@ const AccountDetailsSection = ({
                 </>
               ) : complianceInfo.business_country === "CA" ? (
                 <>
-                  <legend>
-                    <label htmlFor={`${uid}-business-tax-id`}>Business Number (BN)</label>
-                  </legend>
-                  <input
+                  <Legend>
+                    <Label htmlFor={`${uid}-business-tax-id`}>Business Number (BN)</Label>
+                  </Legend>
+                  <Input
                     id={`${uid}-business-tax-id`}
                     type="text"
                     placeholder={user.business_tax_id_entered ? "Hidden for security" : "123456789"}
@@ -534,10 +553,10 @@ const AccountDetailsSection = ({
                 </>
               ) : complianceInfo.business_country === "AU" ? (
                 <>
-                  <legend>
-                    <label htmlFor={`${uid}-business-tax-id`}>Australian Business Number (ABN)</label>
-                  </legend>
-                  <input
+                  <Legend>
+                    <Label htmlFor={`${uid}-business-tax-id`}>Australian Business Number (ABN)</Label>
+                  </Legend>
+                  <Input
                     id={`${uid}-business-tax-id`}
                     type="text"
                     placeholder={user.business_tax_id_entered ? "Hidden for security" : "12 123 456 789"}
@@ -549,10 +568,10 @@ const AccountDetailsSection = ({
                 </>
               ) : complianceInfo.business_country === "GB" ? (
                 <>
-                  <legend>
-                    <label htmlFor={`${uid}-business-tax-id`}>Company Number (CRN)</label>
-                  </legend>
-                  <input
+                  <Legend>
+                    <Label htmlFor={`${uid}-business-tax-id`}>Company Number (CRN)</Label>
+                  </Legend>
+                  <Input
                     id={`${uid}-business-tax-id`}
                     type="text"
                     placeholder={user.business_tax_id_entered ? "Hidden for security" : "12345678"}
@@ -564,10 +583,10 @@ const AccountDetailsSection = ({
                 </>
               ) : complianceInfo.business_country === "AE" ? (
                 <>
-                  <legend>
-                    <label htmlFor={`${uid}-business-tax-id`}>Company tax ID</label>
-                  </legend>
-                  <input
+                  <Legend>
+                    <Label htmlFor={`${uid}-business-tax-id`}>Company tax ID</Label>
+                  </Legend>
+                  <Input
                     id={`${uid}-business-tax-id`}
                     type="text"
                     placeholder={user.business_tax_id_entered ? "Hidden for security" : "12345678"}
@@ -579,10 +598,10 @@ const AccountDetailsSection = ({
                 </>
               ) : complianceInfo.business_country === "MX" ? (
                 <>
-                  <legend>
-                    <label htmlFor={`${uid}-business-tax-id`}>Business RFC</label>
-                  </legend>
-                  <input
+                  <Legend>
+                    <Label htmlFor={`${uid}-business-tax-id`}>Business RFC</Label>
+                  </Legend>
+                  <Input
                     id={`${uid}-business-tax-id`}
                     type="text"
                     placeholder={user.business_tax_id_entered ? "Hidden for security" : "12345678"}
@@ -594,10 +613,10 @@ const AccountDetailsSection = ({
                 </>
               ) : (
                 <>
-                  <legend>
-                    <label htmlFor={`${uid}-business-tax-id`}>Company tax ID</label>
-                  </legend>
-                  <input
+                  <Legend>
+                    <Label htmlFor={`${uid}-business-tax-id`}>Company tax ID</Label>
+                  </Legend>
+                  <Input
                     id={`${uid}-business-tax-id`}
                     type="text"
                     placeholder={user.business_tax_id_entered ? "Hidden for security" : "12345678"}
@@ -608,14 +627,13 @@ const AccountDetailsSection = ({
                   />
                 </>
               )}
-            </fieldset>
+            </Fieldset>
           ) : null}
-          <fieldset>
-            <legend>
-              <label htmlFor={`${uid}-personal-address-is-business-address`}>
-                <input
+          <Fieldset>
+            <Legend>
+              <Label htmlFor={`${uid}-personal-address-is-business-address`}>
+                <Checkbox
                   id={`${uid}-personal-address-is-business-address`}
-                  type="checkbox"
                   disabled={isFormDisabled}
                   onChange={(e) =>
                     e.target.checked &&
@@ -628,18 +646,18 @@ const AccountDetailsSection = ({
                   }
                 />
                 Same as business
-              </label>
-            </legend>
-          </fieldset>
+              </Label>
+            </Legend>
+          </Fieldset>
         </section>
       ) : null}
       <section className="grid gap-8">
         <div style={{ display: "grid", gap: "var(--spacer-5)", gridAutoFlow: "column", gridAutoColumns: "1fr" }}>
-          <fieldset className={cx({ danger: errorFieldNames.has("first_name") })}>
-            <legend>
-              <label htmlFor={`${uid}-creator-first-name`}>First name</label>
-            </legend>
-            <input
+          <Fieldset state={errorFieldNames.has("first_name") ? "danger" : undefined}>
+            <Legend>
+              <Label htmlFor={`${uid}-creator-first-name`}>First name</Label>
+            </Legend>
+            <Input
               id={`${uid}-creator-first-name`}
               type="text"
               placeholder="First name"
@@ -649,13 +667,13 @@ const AccountDetailsSection = ({
               required
               onChange={(evt) => updateComplianceInfo({ first_name: evt.target.value })}
             />
-            <small>Include your middle name if it appears on your ID.</small>
-          </fieldset>
-          <fieldset className={cx({ danger: errorFieldNames.has("last_name") })}>
-            <legend>
-              <label htmlFor={`${uid}-creator-last-name`}>Last name</label>
-            </legend>
-            <input
+            <small className="text-muted">Include your middle name if it appears on your ID.</small>
+          </Fieldset>
+          <Fieldset state={errorFieldNames.has("last_name") ? "danger" : undefined}>
+            <Legend>
+              <Label htmlFor={`${uid}-creator-last-name`}>Last name</Label>
+            </Legend>
+            <Input
               id={`${uid}-creator-last-name`}
               type="text"
               placeholder="Last name"
@@ -665,14 +683,14 @@ const AccountDetailsSection = ({
               required
               onChange={(evt) => updateComplianceInfo({ last_name: evt.target.value })}
             />
-          </fieldset>
+          </Fieldset>
         </div>
         {complianceInfo.is_business && complianceInfo.country === "CA" ? (
-          <fieldset className={cx({ danger: errorFieldNames.has("job_title") })}>
-            <legend>
-              <label htmlFor={`${uid}-creator-job-title`}>Job title</label>
-            </legend>
-            <input
+          <Fieldset state={errorFieldNames.has("job_title") ? "danger" : undefined}>
+            <Legend>
+              <Label htmlFor={`${uid}-creator-job-title`}>Job title</Label>
+            </Legend>
+            <Input
               id={`${uid}-creator-job-title`}
               type="text"
               placeholder="CEO"
@@ -682,16 +700,16 @@ const AccountDetailsSection = ({
               required
               onChange={(evt) => updateComplianceInfo({ job_title: evt.target.value })}
             />
-          </fieldset>
+          </Fieldset>
         ) : null}
         {complianceInfo.country === "JP" ? (
           <>
             <div style={{ display: "grid", gap: "var(--spacer-5)", gridAutoFlow: "column", gridAutoColumns: "1fr" }}>
-              <fieldset className={cx({ danger: errorFieldNames.has("first_name_kanji") })}>
-                <legend>
-                  <label htmlFor={`${uid}-creator-first-name-kanji`}>First name (Kanji)</label>
-                </legend>
-                <input
+              <Fieldset state={errorFieldNames.has("first_name_kanji") ? "danger" : undefined}>
+                <Legend>
+                  <Label htmlFor={`${uid}-creator-first-name-kanji`}>First name (Kanji)</Label>
+                </Legend>
+                <Input
                   id={`${uid}-creator-first-name-kanji`}
                   type="text"
                   placeholder="First name (Kanji)"
@@ -701,12 +719,12 @@ const AccountDetailsSection = ({
                   required
                   onChange={(evt) => updateComplianceInfo({ first_name_kanji: evt.target.value })}
                 />
-              </fieldset>
-              <fieldset className={cx({ danger: errorFieldNames.has("last_name_kanji") })}>
-                <legend>
-                  <label htmlFor={`${uid}-creator-last-name-kanji`}>Last name (Kanji)</label>
-                </legend>
-                <input
+              </Fieldset>
+              <Fieldset state={errorFieldNames.has("last_name_kanji") ? "danger" : undefined}>
+                <Legend>
+                  <Label htmlFor={`${uid}-creator-last-name-kanji`}>Last name (Kanji)</Label>
+                </Legend>
+                <Input
                   id={`${uid}-creator-last-name-kanji`}
                   type="text"
                   placeholder="Last name (Kanji)"
@@ -716,14 +734,14 @@ const AccountDetailsSection = ({
                   required
                   onChange={(evt) => updateComplianceInfo({ last_name_kanji: evt.target.value })}
                 />
-              </fieldset>
+              </Fieldset>
             </div>
             <div style={{ display: "grid", gap: "var(--spacer-5)", gridAutoFlow: "column", gridAutoColumns: "1fr" }}>
-              <fieldset className={cx({ danger: errorFieldNames.has("first_name_kana") })}>
-                <legend>
-                  <label htmlFor={`${uid}-creator-first-name-kana`}>First name (Kana)</label>
-                </legend>
-                <input
+              <Fieldset state={errorFieldNames.has("first_name_kana") ? "danger" : undefined}>
+                <Legend>
+                  <Label htmlFor={`${uid}-creator-first-name-kana`}>First name (Kana)</Label>
+                </Legend>
+                <Input
                   id={`${uid}-creator-first-name-kana`}
                   type="text"
                   placeholder="First name (Kana)"
@@ -733,12 +751,12 @@ const AccountDetailsSection = ({
                   required
                   onChange={(evt) => updateComplianceInfo({ first_name_kana: evt.target.value })}
                 />
-              </fieldset>
-              <fieldset className={cx({ danger: errorFieldNames.has("last_name_kana") })}>
-                <legend>
-                  <label htmlFor={`${uid}-creator-last-name-kana`}>Last name (Kana)</label>
-                </legend>
-                <input
+              </Fieldset>
+              <Fieldset state={errorFieldNames.has("last_name_kana") ? "danger" : undefined}>
+                <Legend>
+                  <Label htmlFor={`${uid}-creator-last-name-kana`}>Last name (Kana)</Label>
+                </Legend>
+                <Input
                   id={`${uid}-creator-last-name-kana`}
                   type="text"
                   placeholder="Last name (Kana)"
@@ -748,17 +766,17 @@ const AccountDetailsSection = ({
                   required
                   onChange={(evt) => updateComplianceInfo({ last_name_kana: evt.target.value })}
                 />
-              </fieldset>
+              </Fieldset>
             </div>
           </>
         ) : null}
         {complianceInfo.country === "JP" ? (
           <div style={{ display: "grid", gap: "var(--spacer-5)", gridAutoFlow: "column", gridAutoColumns: "1fr" }}>
-            <fieldset className={cx({ danger: errorFieldNames.has("building_number") })}>
-              <legend>
-                <label htmlFor={`${uid}-creator-building-number`}>Block / Building Number</label>
-              </legend>
-              <input
+            <Fieldset state={errorFieldNames.has("building_number") ? "danger" : undefined}>
+              <Legend>
+                <Label htmlFor={`${uid}-creator-building-number`}>Block / Building Number</Label>
+              </Legend>
+              <Input
                 id={`${uid}-creator-building-number`}
                 type="text"
                 placeholder="1-1"
@@ -768,12 +786,12 @@ const AccountDetailsSection = ({
                 required
                 onChange={(evt) => updateComplianceInfo({ building_number: evt.target.value })}
               />
-            </fieldset>
-            <fieldset className={cx({ danger: errorFieldNames.has("street_address_kanji") })}>
-              <legend>
-                <label htmlFor={`${uid}-creator-street-address-kanji`}>Street Address (Kanji)</label>
-              </legend>
-              <input
+            </Fieldset>
+            <Fieldset state={errorFieldNames.has("street_address_kanji") ? "danger" : undefined}>
+              <Legend>
+                <Label htmlFor={`${uid}-creator-street-address-kanji`}>Street Address (Kanji)</Label>
+              </Legend>
+              <Input
                 id={`${uid}-creator-street-address-kanji`}
                 type="text"
                 placeholder="Street Address (Kanji)"
@@ -783,12 +801,12 @@ const AccountDetailsSection = ({
                 required
                 onChange={(evt) => updateComplianceInfo({ street_address_kanji: evt.target.value })}
               />
-            </fieldset>
-            <fieldset className={cx({ danger: errorFieldNames.has("street_address_kana") })}>
-              <legend>
-                <label htmlFor={`${uid}-creator-street-address-kana`}>Street Address (Kana)</label>
-              </legend>
-              <input
+            </Fieldset>
+            <Fieldset state={errorFieldNames.has("street_address_kana") ? "danger" : undefined}>
+              <Legend>
+                <Label htmlFor={`${uid}-creator-street-address-kana`}>Street Address (Kana)</Label>
+              </Legend>
+              <Input
                 id={`${uid}-creator-street-address-kana`}
                 type="text"
                 placeholder="Street Address (Kana)"
@@ -798,14 +816,14 @@ const AccountDetailsSection = ({
                 required
                 onChange={(evt) => updateComplianceInfo({ street_address_kana: evt.target.value })}
               />
-            </fieldset>
+            </Fieldset>
           </div>
         ) : (
-          <fieldset className={cx({ danger: errorFieldNames.has("street_address") })}>
-            <legend>
-              <label htmlFor={`${uid}-creator-street-address`}>Address</label>
-            </legend>
-            <input
+          <Fieldset state={errorFieldNames.has("street_address") ? "danger" : undefined}>
+            <Legend>
+              <Label htmlFor={`${uid}-creator-street-address`}>Address</Label>
+            </Legend>
+            <Input
               id={`${uid}-creator-street-address`}
               type="text"
               placeholder="Street address"
@@ -815,15 +833,15 @@ const AccountDetailsSection = ({
               aria-invalid={errorFieldNames.has("street_address")}
               onChange={(evt) => updateComplianceInfo({ street_address: evt.target.value })}
             />
-          </fieldset>
+          </Fieldset>
         )}
       </section>
       <div style={{ display: "grid", gap: "var(--spacer-5)", gridAutoFlow: "column", gridAutoColumns: "1fr" }}>
-        <fieldset className={cx({ danger: errorFieldNames.has("city") })}>
-          <legend>
-            <label htmlFor={`${uid}-creator-city`}>City</label>
-          </legend>
-          <input
+        <Fieldset state={errorFieldNames.has("city") ? "danger" : undefined}>
+          <Legend>
+            <Label htmlFor={`${uid}-creator-city`}>City</Label>
+          </Legend>
+          <Input
             id={`${uid}-creator-city`}
             type="text"
             placeholder="City"
@@ -833,13 +851,13 @@ const AccountDetailsSection = ({
             required
             onChange={(evt) => updateComplianceInfo({ city: evt.target.value })}
           />
-        </fieldset>
+        </Fieldset>
         {complianceInfo.country === "US" ? (
-          <fieldset className={cx({ danger: errorFieldNames.has("state") })}>
-            <legend>
-              <label htmlFor={`${uid}-creator-state`}>State</label>
-            </legend>
-            <select
+          <Fieldset state={errorFieldNames.has("state") ? "danger" : undefined}>
+            <Legend>
+              <Label htmlFor={`${uid}-creator-state`}>State</Label>
+            </Legend>
+            <Select
               id={`${uid}-creator-state`}
               required
               disabled={isFormDisabled}
@@ -855,14 +873,14 @@ const AccountDetailsSection = ({
                   {state.name}
                 </option>
               ))}
-            </select>
-          </fieldset>
+            </Select>
+          </Fieldset>
         ) : complianceInfo.country === "CA" ? (
-          <fieldset className={cx({ danger: errorFieldNames.has("state") })}>
-            <legend>
-              <label htmlFor={`${uid}-creator-province`}>Province</label>
-            </legend>
-            <select
+          <Fieldset state={errorFieldNames.has("state") ? "danger" : undefined}>
+            <Legend>
+              <Label htmlFor={`${uid}-creator-province`}>Province</Label>
+            </Legend>
+            <Select
               id={`${uid}-creator-province`}
               required
               disabled={isFormDisabled}
@@ -878,14 +896,14 @@ const AccountDetailsSection = ({
                   {state.name}
                 </option>
               ))}
-            </select>
-          </fieldset>
+            </Select>
+          </Fieldset>
         ) : complianceInfo.country === "AU" ? (
-          <fieldset className={cx({ danger: errorFieldNames.has("state") })}>
-            <legend>
-              <label htmlFor={`${uid}-creator-state`}>State</label>
-            </legend>
-            <select
+          <Fieldset state={errorFieldNames.has("state") ? "danger" : undefined}>
+            <Legend>
+              <Label htmlFor={`${uid}-creator-state`}>State</Label>
+            </Legend>
+            <Select
               id={`${uid}-creator-state`}
               required
               disabled={isFormDisabled}
@@ -901,14 +919,14 @@ const AccountDetailsSection = ({
                   {state.name}
                 </option>
               ))}
-            </select>
-          </fieldset>
+            </Select>
+          </Fieldset>
         ) : complianceInfo.country === "MX" ? (
-          <fieldset className={cx({ danger: errorFieldNames.has("state") })}>
-            <legend>
-              <label htmlFor={`${uid}-creator-state`}>State</label>
-            </legend>
-            <select
+          <Fieldset state={errorFieldNames.has("state") ? "danger" : undefined}>
+            <Legend>
+              <Label htmlFor={`${uid}-creator-state`}>State</Label>
+            </Legend>
+            <Select
               id={`${uid}-creator-state`}
               required
               disabled={isFormDisabled}
@@ -924,14 +942,14 @@ const AccountDetailsSection = ({
                   {state.name}
                 </option>
               ))}
-            </select>
-          </fieldset>
+            </Select>
+          </Fieldset>
         ) : complianceInfo.country === "AE" ? (
-          <fieldset className={cx({ danger: errorFieldNames.has("state") })}>
-            <legend>
-              <label htmlFor={`${uid}-creator-province`}>Province</label>
-            </legend>
-            <select
+          <Fieldset state={errorFieldNames.has("state") ? "danger" : undefined}>
+            <Legend>
+              <Label htmlFor={`${uid}-creator-province`}>Province</Label>
+            </Legend>
+            <Select
               id={`${uid}-creator-province`}
               required
               disabled={isFormDisabled}
@@ -947,14 +965,14 @@ const AccountDetailsSection = ({
                   {state.name}
                 </option>
               ))}
-            </select>
-          </fieldset>
+            </Select>
+          </Fieldset>
         ) : complianceInfo.country === "IE" ? (
-          <fieldset className={cx({ danger: errorFieldNames.has("state") })}>
-            <legend>
-              <label htmlFor={`${uid}-creator-county`}>County</label>
-            </legend>
-            <select
+          <Fieldset state={errorFieldNames.has("state") ? "danger" : undefined}>
+            <Legend>
+              <Label htmlFor={`${uid}-creator-county`}>County</Label>
+            </Legend>
+            <Select
               id={`${uid}-creator-county`}
               required
               disabled={isFormDisabled}
@@ -970,14 +988,14 @@ const AccountDetailsSection = ({
                   {state.name}
                 </option>
               ))}
-            </select>
-          </fieldset>
+            </Select>
+          </Fieldset>
         ) : complianceInfo.country === "BR" ? (
-          <fieldset className={cx({ danger: errorFieldNames.has("state") })}>
-            <legend>
-              <label htmlFor={`${uid}-creator-state`}>State</label>
-            </legend>
-            <select
+          <Fieldset state={errorFieldNames.has("state") ? "danger" : undefined}>
+            <Legend>
+              <Label htmlFor={`${uid}-creator-state`}>State</Label>
+            </Legend>
+            <Select
               id={`${uid}-creator-state`}
               required
               disabled={isFormDisabled}
@@ -993,16 +1011,16 @@ const AccountDetailsSection = ({
                   {state.name}
                 </option>
               ))}
-            </select>
-          </fieldset>
+            </Select>
+          </Fieldset>
         ) : null}
-        <fieldset className={cx({ danger: errorFieldNames.has("zip_code") })}>
-          <legend>
-            <label htmlFor={`${uid}-creator-zip-code`}>
+        <Fieldset state={errorFieldNames.has("zip_code") ? "danger" : undefined}>
+          <Legend>
+            <Label htmlFor={`${uid}-creator-zip-code`}>
               {complianceInfo.country === "US" ? "ZIP code" : "Postal code"}
-            </label>
-          </legend>
-          <input
+            </Label>
+          </Legend>
+          <Input
             id={`${uid}-creator-zip-code`}
             type="text"
             placeholder={complianceInfo.country === "US" ? "ZIP code" : "Postal code"}
@@ -1012,13 +1030,13 @@ const AccountDetailsSection = ({
             required
             onChange={(evt) => updateComplianceInfo({ zip_code: evt.target.value })}
           />
-        </fieldset>
+        </Fieldset>
       </div>
-      <fieldset>
-        <legend>
-          <label htmlFor={`${uid}-creator-country`}>Country</label>
-        </legend>
-        <select
+      <Fieldset>
+        <Legend>
+          <Label htmlFor={`${uid}-creator-country`}>Country</Label>
+        </Legend>
+        <Select
           id={`${uid}-creator-country`}
           disabled={isFormDisabled}
           value={complianceInfo.country || ""}
@@ -1033,13 +1051,13 @@ const AccountDetailsSection = ({
               {name}
             </option>
           ))}
-        </select>
-      </fieldset>
-      <fieldset className={cx({ danger: errorFieldNames.has("phone") })}>
-        <legend>
-          <label htmlFor={`${uid}-creator-phone`}>Phone number</label>
-        </legend>
-        <input
+        </Select>
+      </Fieldset>
+      <Fieldset state={errorFieldNames.has("phone") ? "danger" : undefined}>
+        <Legend>
+          <Label htmlFor={`${uid}-creator-phone`}>Phone number</Label>
+        </Legend>
+        <Input
           id={`${uid}-creator-phone`}
           type="tel"
           placeholder="Phone number"
@@ -1051,15 +1069,15 @@ const AccountDetailsSection = ({
             updateComplianceInfo({ phone: formatPhoneNumber(evt.target.value, complianceInfo.country) })
           }
         />
-      </fieldset>
-      <fieldset>
-        <legend>
-          <label>Date of Birth</label>
+      </Fieldset>
+      <Fieldset>
+        <Legend>
+          <Label>Date of Birth</Label>
           <a href="/help/article/260-your-payout-settings-page">Why does Gumroad need this information?</a>
-        </legend>
+        </Legend>
         <div style={{ display: "grid", gap: "var(--spacer-5)", gridAutoFlow: "column", gridAutoColumns: "1fr" }}>
-          <fieldset className={cx({ danger: errorFieldNames.has("dob_month") })}>
-            <select
+          <Fieldset state={errorFieldNames.has("dob_month") ? "danger" : undefined}>
+            <Select
               id={`${uid}-creator-dob-month`}
               disabled={isFormDisabled}
               required
@@ -1074,13 +1092,13 @@ const AccountDetailsSection = ({
                   {new Date(2000, month - 1, 1).toLocaleString("en-US", { month: "long" })}
                 </option>
               ))}
-            </select>
-          </fieldset>
-          <fieldset
+            </Select>
+          </Fieldset>
+          <Fieldset
             style={complianceInfo.country !== "US" ? { gridRow: 1, gridColumn: 1 } : {}}
-            className={cx({ danger: errorFieldNames.has("dob_day") })}
+            state={errorFieldNames.has("dob_day") ? "danger" : undefined}
           >
-            <select
+            <Select
               id={`${uid}-creator-dob-day`}
               disabled={isFormDisabled}
               required
@@ -1095,10 +1113,10 @@ const AccountDetailsSection = ({
                   {day}
                 </option>
               ))}
-            </select>
-          </fieldset>
-          <fieldset className={cx({ danger: errorFieldNames.has("dob_year") })}>
-            <select
+            </Select>
+          </Fieldset>
+          <Fieldset state={errorFieldNames.has("dob_year") ? "danger" : undefined}>
+            <Select
               id={`${uid}-creator-dob-year`}
               disabled={isFormDisabled}
               required
@@ -1113,20 +1131,20 @@ const AccountDetailsSection = ({
                   {year}
                 </option>
               ))}
-            </select>
-          </fieldset>
+            </Select>
+          </Fieldset>
         </div>
-      </fieldset>
+      </Fieldset>
       {user.country_code === "AE" ||
       user.country_code === "SG" ||
       user.country_code === "PK" ||
       user.country_code === "BD" ? (
-        <fieldset className={cx({ danger: errorFieldNames.has("nationality") })}>
-          <legend>
-            <label htmlFor={`${uid}-nationality`}>Nationality</label>
-          </legend>
+        <Fieldset state={errorFieldNames.has("nationality") ? "danger" : undefined}>
+          <Legend>
+            <Label htmlFor={`${uid}-nationality`}>Nationality</Label>
+          </Legend>
           <div>
-            <select
+            <Select
               id={`${uid}-nationality`}
               disabled={isFormDisabled}
               aria-invalid={errorFieldNames.has("nationality")}
@@ -1139,22 +1157,22 @@ const AccountDetailsSection = ({
                   {name}
                 </option>
               ))}
-            </select>
+            </Select>
           </div>
-        </fieldset>
+        </Fieldset>
       ) : null}
       {(complianceInfo.is_business &&
         complianceInfo.business_country !== null &&
         user.individual_tax_id_needed_countries.includes(complianceInfo.business_country)) ||
       (complianceInfo.country !== null && user.individual_tax_id_needed_countries.includes(complianceInfo.country)) ? (
-        <fieldset className={cx({ danger: errorFieldNames.has("individual_tax_id") })}>
+        <Fieldset state={errorFieldNames.has("individual_tax_id") ? "danger" : undefined}>
           {complianceInfo.country === "US" ? (
             user.need_full_ssn ? (
               <div>
-                <legend>
-                  <label htmlFor={`${uid}-social-security-number-full`}>Social Security Number</label>
-                </legend>
-                <input
+                <Legend>
+                  <Label htmlFor={`${uid}-social-security-number-full`}>Social Security Number</Label>
+                </Legend>
+                <Input
                   id={`${uid}-social-security-number-full`}
                   type="text"
                   minLength={9}
@@ -1168,10 +1186,10 @@ const AccountDetailsSection = ({
               </div>
             ) : (
               <div>
-                <legend>
-                  <label htmlFor={`${uid}-social-security-number`}>Last 4 digits of SSN</label>
-                </legend>
-                <input
+                <Legend>
+                  <Label htmlFor={`${uid}-social-security-number`}>Last 4 digits of SSN</Label>
+                </Legend>
+                <Input
                   id={`${uid}-social-security-number`}
                   type="text"
                   minLength={4}
@@ -1186,10 +1204,10 @@ const AccountDetailsSection = ({
             )
           ) : complianceInfo.country === "CA" ? (
             <div>
-              <legend>
-                <label htmlFor={`${uid}-social-insurance-number`}>Social Insurance Number</label>
-              </legend>
-              <input
+              <Legend>
+                <Label htmlFor={`${uid}-social-insurance-number`}>Social Insurance Number</Label>
+              </Legend>
+              <Input
                 id={`${uid}-social-insurance-number`}
                 type="text"
                 minLength={9}
@@ -1203,10 +1221,10 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "CO" ? (
             <div>
-              <legend>
-                <label htmlFor={`${uid}-colombia-id-number`}>Cédula de Ciudadanía (CC)</label>
-              </legend>
-              <input
+              <Legend>
+                <Label htmlFor={`${uid}-colombia-id-number`}>Cédula de Ciudadanía (CC)</Label>
+              </Legend>
+              <Input
                 id={`${uid}-colombia-id-number`}
                 type="text"
                 minLength={13}
@@ -1220,10 +1238,10 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "UY" ? (
             <div>
-              <legend>
-                <label htmlFor={`${uid}-uruguay-id-number`}>Cédula de Identidad (CI)</label>
-              </legend>
-              <input
+              <Legend>
+                <Label htmlFor={`${uid}-uruguay-id-number`}>Cédula de Identidad (CI)</Label>
+              </Legend>
+              <Input
                 id={`${uid}-uruguay-id-number`}
                 type="text"
                 minLength={11}
@@ -1237,10 +1255,10 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "HK" ? (
             <div>
-              <legend>
-                <label htmlFor={`${uid}-hong-kong-id-number`}>Hong Kong ID Number</label>
-              </legend>
-              <input
+              <Legend>
+                <Label htmlFor={`${uid}-hong-kong-id-number`}>Hong Kong ID Number</Label>
+              </Legend>
+              <Input
                 id={`${uid}-hong-kong-id-number`}
                 type="text"
                 minLength={8}
@@ -1254,10 +1272,10 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "SG" ? (
             <div>
-              <legend>
-                <label htmlFor={`${uid}-singapore-id-number`}>NRIC number / FIN</label>
-              </legend>
-              <input
+              <Legend>
+                <Label htmlFor={`${uid}-singapore-id-number`}>NRIC number / FIN</Label>
+              </Legend>
+              <Input
                 id={`${uid}-singapore-id-number`}
                 type="text"
                 minLength={9}
@@ -1271,10 +1289,10 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "AE" ? (
             <div>
-              <legend>
-                <label htmlFor={`${uid}-uae-id-number`}>Emirates ID</label>
-              </legend>
-              <input
+              <Legend>
+                <Label htmlFor={`${uid}-uae-id-number`}>Emirates ID</Label>
+              </Legend>
+              <Input
                 id={`${uid}-uae-id-number`}
                 type="text"
                 minLength={15}
@@ -1288,10 +1306,10 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "MX" ? (
             <div>
-              <legend>
-                <label htmlFor={`${uid}-mexico-id-number`}>Personal RFC</label>
-              </legend>
-              <input
+              <Legend>
+                <Label htmlFor={`${uid}-mexico-id-number`}>Personal RFC</Label>
+              </Legend>
+              <Input
                 id={`${uid}-mexico-id-number`}
                 type="text"
                 minLength={13}
@@ -1305,10 +1323,10 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "KZ" ? (
             <div>
-              <legend>
-                <label htmlFor={`${uid}-kazakhstan-id-number`}>Individual identification number (IIN)</label>
-              </legend>
-              <input
+              <Legend>
+                <Label htmlFor={`${uid}-kazakhstan-id-number`}>Individual identification number (IIN)</Label>
+              </Legend>
+              <Input
                 id={`${uid}-kazakhstan-id-number`}
                 type="text"
                 minLength={9}
@@ -1322,10 +1340,10 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "AR" ? (
             <div>
-              <legend>
-                <label htmlFor={`${uid}-argentina-id-number`}>CUIL</label>
-              </legend>
-              <input
+              <Legend>
+                <Label htmlFor={`${uid}-argentina-id-number`}>CUIL</Label>
+              </Legend>
+              <Input
                 id={`${uid}-argentina-id-number`}
                 type="text"
                 minLength={13}
@@ -1339,10 +1357,10 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "PE" ? (
             <div>
-              <legend>
-                <label htmlFor={`${uid}-peru-id-number`}>DNI number</label>
-              </legend>
-              <input
+              <Legend>
+                <Label htmlFor={`${uid}-peru-id-number`}>DNI number</Label>
+              </Legend>
+              <Input
                 id={`${uid}-peru-id-number`}
                 type="text"
                 minLength={10}
@@ -1356,10 +1374,10 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "PK" ? (
             <div>
-              <legend>
-                <label htmlFor={`${uid}-snic`}>National Identity Card Number (SNIC or CNIC)</label>
-              </legend>
-              <input
+              <Legend>
+                <Label htmlFor={`${uid}-snic`}>National Identity Card Number (SNIC or CNIC)</Label>
+              </Legend>
+              <Input
                 id={`${uid}-snic`}
                 type="text"
                 minLength={13}
@@ -1373,10 +1391,10 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "CR" ? (
             <div>
-              <legend>
-                <label htmlFor={`${uid}-costa-rica-id-number`}>Tax Identification Number</label>
-              </legend>
-              <input
+              <Legend>
+                <Label htmlFor={`${uid}-costa-rica-id-number`}>Tax Identification Number</Label>
+              </Legend>
+              <Input
                 id={`${uid}-costa-rica-id-number`}
                 type="text"
                 minLength={9}
@@ -1390,10 +1408,10 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "CL" ? (
             <div>
-              <legend>
-                <label htmlFor={`${uid}-chile-id-number`}>Rol Único Tributario (RUT)</label>
-              </legend>
-              <input
+              <Legend>
+                <Label htmlFor={`${uid}-chile-id-number`}>Rol Único Tributario (RUT)</Label>
+              </Legend>
+              <Input
                 id={`${uid}-chile-id-number`}
                 type="text"
                 minLength={8}
@@ -1407,10 +1425,10 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "DO" ? (
             <div>
-              <legend>
-                <label htmlFor={`${uid}-dominican-republic-id-number`}>Cédula de identidad y electoral (CIE)</label>
-              </legend>
-              <input
+              <Legend>
+                <Label htmlFor={`${uid}-dominican-republic-id-number`}>Cédula de identidad y electoral (CIE)</Label>
+              </Legend>
+              <Input
                 id={`${uid}-dominican-republic-id-number`}
                 type="text"
                 minLength={13}
@@ -1424,10 +1442,10 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "BO" ? (
             <div>
-              <legend>
-                <label htmlFor={`${uid}-bolivia-id-number`}>Cédula de Identidad (CI)</label>
-              </legend>
-              <input
+              <Legend>
+                <Label htmlFor={`${uid}-bolivia-id-number`}>Cédula de Identidad (CI)</Label>
+              </Legend>
+              <Input
                 id={`${uid}-bolivia-id-number`}
                 type="text"
                 minLength={8}
@@ -1441,10 +1459,10 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "PY" ? (
             <div>
-              <legend>
-                <label htmlFor={`${uid}-paraguay-id-number`}>Cédula de Identidad (CI)</label>
-              </legend>
-              <input
+              <Legend>
+                <Label htmlFor={`${uid}-paraguay-id-number`}>Cédula de Identidad (CI)</Label>
+              </Legend>
+              <Input
                 id={`${uid}-paraguay-id-number`}
                 type="text"
                 minLength={7}
@@ -1458,10 +1476,10 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "BD" ? (
             <div>
-              <legend>
-                <label htmlFor={`${uid}-bangladesh-id-number`}>Personal ID number</label>
-              </legend>
-              <input
+              <Legend>
+                <Label htmlFor={`${uid}-bangladesh-id-number`}>Personal ID number</Label>
+              </Legend>
+              <Input
                 id={`${uid}-bangladesh-id-number`}
                 type="text"
                 minLength={1}
@@ -1475,10 +1493,10 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "MZ" ? (
             <div>
-              <legend>
-                <label htmlFor={`${uid}-mozambique-id-number`}>Mozambique Taxpayer Single ID Number (NUIT)</label>
-              </legend>
-              <input
+              <Legend>
+                <Label htmlFor={`${uid}-mozambique-id-number`}>Mozambique Taxpayer Single ID Number (NUIT)</Label>
+              </Legend>
+              <Input
                 id={`${uid}-mozambique-id-number`}
                 type="text"
                 minLength={9}
@@ -1492,10 +1510,10 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "GT" ? (
             <div>
-              <legend>
-                <label htmlFor={`${uid}-guatemala-id-number`}>Número de Identificación Tributaria (NIT)</label>
-              </legend>
-              <input
+              <Legend>
+                <Label htmlFor={`${uid}-guatemala-id-number`}>Número de Identificación Tributaria (NIT)</Label>
+              </Legend>
+              <Input
                 id={`${uid}-guatemala-id-number`}
                 type="text"
                 minLength={8}
@@ -1509,10 +1527,10 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "BR" ? (
             <div>
-              <legend>
-                <label htmlFor={`${uid}-brazil-id-number`}>Cadastro de Pessoas Físicas (CPF)</label>
-              </legend>
-              <input
+              <Legend>
+                <Label htmlFor={`${uid}-brazil-id-number`}>Cadastro de Pessoas Físicas (CPF)</Label>
+              </Legend>
+              <Input
                 id={`${uid}-brazil-id-number`}
                 type="text"
                 minLength={11}
@@ -1525,7 +1543,7 @@ const AccountDetailsSection = ({
               />
             </div>
           ) : null}
-        </fieldset>
+        </Fieldset>
       ) : null}
     </section>
   );
diff --git a/app/javascript/components/Settings/PaymentsPage/AusBackTaxesSection.tsx b/app/javascript/components/Settings/PaymentsPage/AusBackTaxesSection.tsx
index c0b73d69f2..bed7cbd357 100644
--- a/app/javascript/components/Settings/PaymentsPage/AusBackTaxesSection.tsx
+++ b/app/javascript/components/Settings/PaymentsPage/AusBackTaxesSection.tsx
@@ -2,6 +2,7 @@ import * as React from "react";
 
 import { TaxesCollectionModal } from "$app/components/server-components/TaxesCollectionModal";
 import { Alert } from "$app/components/ui/Alert";
+import { Section } from "$app/components/ui/Section";
 
 export type AusBacktaxDetails = {
   total_amount_to_au: string;
@@ -24,56 +25,51 @@ const AusBackTaxesSection = ({
   are_au_backtaxes_paid,
   au_backtaxes_paid_date,
 }: AusBacktaxDetails) => (
-  <section>
-    <header>
-      <h2>Backtaxes collection</h2>
-    </header>
-    <div>
-      {opted_in_to_au_backtax ? (
-        <div className="flex flex-col gap-4">
-          <Alert variant="success">You've opted in to backtaxes collection.</Alert>
+  <Section className="p-4! md:p-8!" header={<h2>Backtaxes collection</h2>}>
+    {opted_in_to_au_backtax ? (
+      <div className="flex flex-col gap-4">
+        <Alert variant="success">You've opted in to backtaxes collection.</Alert>
+        <p>
+          From 2018 to 2022, you made {total_amount_to_au} in sales to customers located in Australia. Taxes on these
+          sales were not collected at the time.{" "}
+          <b>
+            The Australian government is requiring that we go back to collect and remit these back taxes. Going forward,
+            we will collect and remit these taxes on your behalf.
+          </b>
+        </p>
+        {are_au_backtaxes_paid ? (
           <p>
-            From 2018 to 2022, you made {total_amount_to_au} in sales to customers located in Australia. Taxes on these
-            sales were not collected at the time.{" "}
-            <b>
-              The Australian government is requiring that we go back to collect and remit these back taxes. Going
-              forward, we will collect and remit these taxes on your behalf.
-            </b>
+            A negative credit in the amount of {au_backtax_amount} was applied to your account on{" "}
+            {au_backtaxes_paid_date || ""}. You opted in on {opt_in_date || ""}. <b>No further action is required.</b>
           </p>
-          {are_au_backtaxes_paid ? (
-            <p>
-              A negative credit in the amount of {au_backtax_amount} was applied to your account on{" "}
-              {au_backtaxes_paid_date || ""}. You opted in on {opt_in_date || ""}. <b>No further action is required.</b>
-            </p>
-          ) : (
-            <p>
-              A negative credit in the amount of {au_backtax_amount} will be applied to your account on{" "}
-              {credit_creation_date}. You opted in on {opt_in_date || ""}. <b>No further action is required.</b>
-            </p>
-          )}
-        </div>
-      ) : (
-        <div className="flex flex-col gap-4">
-          <Alert variant="warning">
-            The Australian government is claiming taxes for your sales between 2018 to 2022.
-          </Alert>
+        ) : (
           <p>
-            From 2018 to 2022, you made {total_amount_to_au} in sales to customers located in Australia. Taxes on these
-            sales were not collected at the time.{" "}
-            <b>
-              The Australian government is requiring that we go back to collect and remit these back taxes. Going
-              forward, we will collect and remit these taxes on your behalf.
-            </b>
+            A negative credit in the amount of {au_backtax_amount} will be applied to your account on{" "}
+            {credit_creation_date}. You opted in on {opt_in_date || ""}. <b>No further action is required.</b>
           </p>
-          <p>For your sales, the total amount of back taxes owed is {au_backtax_amount}.</p>
-          <TaxesCollectionModal
-            taxesOwed={au_backtax_amount}
-            creditCreationDate={credit_creation_date}
-            name={legal_entity_name}
-          />
-        </div>
-      )}
-    </div>
-  </section>
+        )}
+      </div>
+    ) : (
+      <div className="flex flex-col gap-4">
+        <Alert variant="warning">
+          The Australian government is claiming taxes for your sales between 2018 to 2022.
+        </Alert>
+        <p>
+          From 2018 to 2022, you made {total_amount_to_au} in sales to customers located in Australia. Taxes on these
+          sales were not collected at the time.{" "}
+          <b>
+            The Australian government is requiring that we go back to collect and remit these back taxes. Going forward,
+            we will collect and remit these taxes on your behalf.
+          </b>
+        </p>
+        <p>For your sales, the total amount of back taxes owed is {au_backtax_amount}.</p>
+        <TaxesCollectionModal
+          taxesOwed={au_backtax_amount}
+          creditCreationDate={credit_creation_date}
+          name={legal_entity_name}
+        />
+      </div>
+    )}
+  </Section>
 );
 export default AusBackTaxesSection;
diff --git a/app/javascript/components/Settings/PaymentsPage/BankAccountSection.tsx b/app/javascript/components/Settings/PaymentsPage/BankAccountSection.tsx
index f4cc21489b..110df4c41f 100644
--- a/app/javascript/components/Settings/PaymentsPage/BankAccountSection.tsx
+++ b/app/javascript/components/Settings/PaymentsPage/BankAccountSection.tsx
@@ -1,4 +1,3 @@
-import cx from "classnames";
 import * as React from "react";
 
 import { SavedCreditCard } from "$app/parsers/card";
@@ -6,6 +5,10 @@ import type { FormFieldName, User } from "$app/types/payments";
 
 import { Button } from "$app/components/Button";
 import { Alert } from "$app/components/ui/Alert";
+import { Fieldset, Legend } from "$app/components/ui/Fieldset";
+import { Input } from "$app/components/ui/Input";
+import { Label } from "$app/components/ui/Label";
+import { Select } from "$app/components/ui/Select";
 
 export type BankAccount =
   | {
@@ -933,11 +936,11 @@ const BankAccountSection = ({
     <>
       <div className="whitespace-pre-line">{feeInfoText}</div>
       <section className="grid gap-8">
-        <fieldset className={cx({ danger: errorFieldNames.has("account_holder_full_name") })}>
-          <legend>
-            <label htmlFor={`${uid}-account-holder-full-name`}>Pay to the order of</label>
-          </legend>
-          <input
+        <Fieldset state={errorFieldNames.has("account_holder_full_name") ? "danger" : undefined}>
+          <Legend>
+            <Label htmlFor={`${uid}-account-holder-full-name`}>Pay to the order of</Label>
+          </Legend>
+          <Input
             id={`${uid}-account-holder-full-name`}
             placeholder="Full name of account holder"
             value={bankAccount?.account_holder_full_name || ""}
@@ -945,18 +948,18 @@ const BankAccountSection = ({
             aria-invalid={errorFieldNames.has("account_holder_full_name")}
             onChange={(evt) => updateBankAccount({ account_holder_full_name: evt.target.value })}
           />
-          <small>Must exactly match the name on your bank account</small>
-        </fieldset>
+          <small className="text-muted">Must exactly match the name on your bank account</small>
+        </Fieldset>
         <div className="grid gap-2">
           {showNewBankAccount ? (
             <div className="grid gap-5 md:auto-cols-fr md:grid-flow-col">
               {user.country_code === "CA" ? (
                 <>
-                  <fieldset className={cx({ danger: errorFieldNames.has("transit_number") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-transit-number`}>Transit #</label>
-                    </legend>
-                    <input
+                  <Fieldset state={errorFieldNames.has("transit_number") ? "danger" : undefined}>
+                    <Legend>
+                      <Label htmlFor={`${uid}-transit-number`}>Transit #</Label>
+                    </Legend>
+                    <Input
                       type="text"
                       id={`${uid}-transit-number`}
                       placeholder="12345"
@@ -966,12 +969,12 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("transit_number")}
                       onChange={(evt) => updateBankAccount({ transit_number: evt.target.value })}
                     />
-                  </fieldset>
-                  <fieldset className={cx({ danger: errorFieldNames.has("institution_number") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-institution-number`}>Institution #</label>
-                    </legend>
-                    <input
+                  </Fieldset>
+                  <Fieldset state={errorFieldNames.has("institution_number") ? "danger" : undefined}>
+                    <Legend>
+                      <Label htmlFor={`${uid}-institution-number`}>Institution #</Label>
+                    </Legend>
+                    <Input
                       type="text"
                       id={`${uid}-institution-number`}
                       placeholder="000"
@@ -981,14 +984,14 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("institution_number")}
                       onChange={(evt) => updateBankAccount({ institution_number: evt.target.value })}
                     />
-                  </fieldset>
+                  </Fieldset>
                 </>
               ) : user.country_code === "AU" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bsb_number") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bsb-number`}>BSB</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bsb_number") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bsb-number`}>BSB</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bsb-number`}
                     placeholder="123456"
@@ -998,13 +1001,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bsb_number")}
                     onChange={(evt) => updateBankAccount({ bsb_number: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "GB" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("sort_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-sort-code`}>Sort code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("sort_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-sort-code`}>Sort code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-sort-code`}
                     placeholder="12-34-56"
@@ -1014,13 +1017,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("sort_code")}
                     onChange={(evt) => updateBankAccount({ sort_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "GI" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("sort_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-sort-code`}>Sort code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("sort_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-sort-code`}>Sort code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-sort-code`}
                     placeholder="12-34-56"
@@ -1030,13 +1033,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("sort_code")}
                     onChange={(evt) => updateBankAccount({ sort_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "IN" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("ifsc") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-ifsc`}>IFSC</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("ifsc") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-ifsc`}>IFSC</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-ifsc`}
                     placeholder="ICIC0123456"
@@ -1046,14 +1049,14 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("ifsc")}
                     onChange={(evt) => updateBankAccount({ ifsc: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "HK" ? (
                 <>
-                  <fieldset className={cx({ danger: errorFieldNames.has("clearing_code") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-clearing-code`}>Clearing Code</label>
-                    </legend>
-                    <input
+                  <Fieldset state={errorFieldNames.has("clearing_code") ? "danger" : undefined}>
+                    <Legend>
+                      <Label htmlFor={`${uid}-clearing-code`}>Clearing Code</Label>
+                    </Legend>
+                    <Input
                       type="text"
                       id={`${uid}-clearing-code`}
                       placeholder="123"
@@ -1063,12 +1066,12 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("clearing_code")}
                       onChange={(evt) => updateBankAccount({ clearing_code: evt.target.value })}
                     />
-                  </fieldset>
-                  <fieldset className={cx({ danger: errorFieldNames.has("branch_code") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-branch-code`}>Branch code</label>
-                    </legend>
-                    <input
+                  </Fieldset>
+                  <Fieldset state={errorFieldNames.has("branch_code") ? "danger" : undefined}>
+                    <Legend>
+                      <Label htmlFor={`${uid}-branch-code`}>Branch code</Label>
+                    </Legend>
+                    <Input
                       type="text"
                       id={`${uid}-branch-code`}
                       placeholder="456"
@@ -1078,15 +1081,15 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("branch_code")}
                       onChange={(evt) => updateBankAccount({ branch_code: evt.target.value })}
                     />
-                  </fieldset>
+                  </Fieldset>
                 </>
               ) : user.country_code === "SG" ? (
                 <>
-                  <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-bank-code`}>Bank code</label>
-                    </legend>
-                    <input
+                  <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                    <Legend>
+                      <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
+                    </Legend>
+                    <Input
                       type="text"
                       id={`${uid}-bank-code`}
                       placeholder="1234"
@@ -1096,12 +1099,12 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("bank_code")}
                       onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                     />
-                  </fieldset>
-                  <fieldset className={cx({ danger: errorFieldNames.has("branch_code") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-branch-code`}>Branch code</label>
-                    </legend>
-                    <input
+                  </Fieldset>
+                  <Fieldset state={errorFieldNames.has("branch_code") ? "danger" : undefined}>
+                    <Legend>
+                      <Label htmlFor={`${uid}-branch-code`}>Branch code</Label>
+                    </Legend>
+                    <Input
                       type="text"
                       id={`${uid}-branch-code`}
                       placeholder="567"
@@ -1111,15 +1114,15 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("branch_code")}
                       onChange={(evt) => updateBankAccount({ branch_code: evt.target.value })}
                     />
-                  </fieldset>
+                  </Fieldset>
                 </>
               ) : user.country_code === "JP" ? (
                 <>
-                  <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-bank-code`}>Bank code</label>
-                    </legend>
-                    <input
+                  <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                    <Legend>
+                      <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
+                    </Legend>
+                    <Input
                       type="text"
                       id={`${uid}-bank-code`}
                       placeholder="1234"
@@ -1129,12 +1132,12 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("bank_code")}
                       onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                     />
-                  </fieldset>
-                  <fieldset className={cx({ danger: errorFieldNames.has("branch_code") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-branch-code`}>Branch code</label>
-                    </legend>
-                    <input
+                  </Fieldset>
+                  <Fieldset state={errorFieldNames.has("branch_code") ? "danger" : undefined}>
+                    <Legend>
+                      <Label htmlFor={`${uid}-branch-code`}>Branch code</Label>
+                    </Legend>
+                    <Input
                       type="text"
                       id={`${uid}-branch-code`}
                       placeholder="567"
@@ -1144,14 +1147,14 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("branch_code")}
                       onChange={(evt) => updateBankAccount({ branch_code: evt.target.value })}
                     />
-                  </fieldset>
+                  </Fieldset>
                 </>
               ) : user.country_code === "TH" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>Bank code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="123"
@@ -1161,13 +1164,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "KR" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>Bank code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="ABCDKR00123"
@@ -1177,13 +1180,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "VN" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>Bank Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>Bank Code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="01101100"
@@ -1193,13 +1196,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "TW" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAATWTXXXX"
@@ -1209,13 +1212,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "ID" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>Bank code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="000"
@@ -1225,13 +1228,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "MA" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAAMAMAXXX"
@@ -1241,13 +1244,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "RS" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="BKCHRSBG"
@@ -1257,14 +1260,14 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "TT" ? (
                 <>
-                  <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-bank-code`}>Bank code</label>
-                    </legend>
-                    <input
+                  <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                    <Legend>
+                      <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
+                    </Legend>
+                    <Input
                       type="text"
                       id={`${uid}-bank-code`}
                       placeholder="123"
@@ -1274,12 +1277,12 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("bank_code")}
                       onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                     />
-                  </fieldset>
-                  <fieldset className={cx({ danger: errorFieldNames.has("branch_code") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-branch-code`}>Branch code</label>
-                    </legend>
-                    <input
+                  </Fieldset>
+                  <Fieldset state={errorFieldNames.has("branch_code") ? "danger" : undefined}>
+                    <Legend>
+                      <Label htmlFor={`${uid}-branch-code`}>Branch code</Label>
+                    </Legend>
+                    <Input
                       type="text"
                       id={`${uid}-branch-code`}
                       placeholder="45678"
@@ -1289,15 +1292,15 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("branch_code")}
                       onChange={(evt) => updateBankAccount({ branch_code: evt.target.value })}
                     />
-                  </fieldset>
+                  </Fieldset>
                 </>
               ) : user.country_code === "JM" ? (
                 <>
-                  <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-bank-code`}>Bank code</label>
-                    </legend>
-                    <input
+                  <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                    <Legend>
+                      <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
+                    </Legend>
+                    <Input
                       type="text"
                       id={`${uid}-bank-code`}
                       placeholder="111"
@@ -1307,12 +1310,12 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("bank_code")}
                       onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                     />
-                  </fieldset>
-                  <fieldset className={cx({ danger: errorFieldNames.has("branch_code") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-branch-code`}>Branch code</label>
-                    </legend>
-                    <input
+                  </Fieldset>
+                  <Fieldset state={errorFieldNames.has("branch_code") ? "danger" : undefined}>
+                    <Legend>
+                      <Label htmlFor={`${uid}-branch-code`}>Branch code</Label>
+                    </Legend>
+                    <Input
                       type="text"
                       id={`${uid}-branch-code`}
                       placeholder="00000"
@@ -1322,14 +1325,14 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("branch_code")}
                       onChange={(evt) => updateBankAccount({ branch_code: evt.target.value })}
                     />
-                  </fieldset>
+                  </Fieldset>
                 </>
               ) : user.country_code === "UY" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>Bank code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="091"
@@ -1339,13 +1342,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "AG" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAAAGAGXYZ"
@@ -1355,13 +1358,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "LC" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAALCLCXYZ"
@@ -1371,13 +1374,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "TZ" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAATZTXXXX"
@@ -1387,13 +1390,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "NA" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAANANXXYZ"
@@ -1403,13 +1406,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "PH" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>Bank Identifier Code (BIC)</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>Bank Identifier Code (BIC)</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="12345678901"
@@ -1419,13 +1422,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "ZA" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="FIRNZAJJ"
@@ -1435,13 +1438,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "KE" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="BARCKENXMDR"
@@ -1451,13 +1454,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "MY" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="HBMBMYKL"
@@ -1467,14 +1470,14 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "CL" ? (
                 <>
-                  <fieldset className={cx({ danger: errorFieldNames.has("account_type") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-bank-account-type`}>Bank account type</label>
-                    </legend>
-                    <select
+                  <Fieldset state={errorFieldNames.has("account_type") ? "danger" : undefined}>
+                    <Legend>
+                      <Label htmlFor={`${uid}-bank-account-type`}>Bank account type</Label>
+                    </Legend>
+                    <Select
                       id={`${uid}-bank-account-type`}
                       required
                       disabled={isFormDisabled}
@@ -1489,13 +1492,13 @@ const BankAccountSection = ({
                       <option key="savings" value="savings">
                         Savings
                       </option>
-                    </select>
-                  </fieldset>
-                  <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-bank-code`}>Bank code</label>
-                    </legend>
-                    <input
+                    </Select>
+                  </Fieldset>
+                  <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                    <Legend>
+                      <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
+                    </Legend>
+                    <Input
                       type="text"
                       id={`${uid}-bank-code`}
                       placeholder="123"
@@ -1505,15 +1508,15 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("bank_code")}
                       onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                     />
-                  </fieldset>
+                  </Fieldset>
                 </>
               ) : user.country_code === "CO" ? (
                 <>
-                  <fieldset className={cx({ danger: errorFieldNames.has("account_type") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-account-type`}>Account Type</label>
-                    </legend>
-                    <select
+                  <Fieldset state={errorFieldNames.has("account_type") ? "danger" : undefined}>
+                    <Legend>
+                      <Label htmlFor={`${uid}-account-type`}>Account Type</Label>
+                    </Legend>
+                    <Select
                       id={`${uid}-account-type`}
                       required
                       disabled={isFormDisabled}
@@ -1528,13 +1531,13 @@ const BankAccountSection = ({
                       <option key="checking" value="checking">
                         Checking
                       </option>
-                    </select>
-                  </fieldset>
-                  <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-bank-code`}>Bank Code</label>
-                    </legend>
-                    <input
+                    </Select>
+                  </Fieldset>
+                  <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                    <Legend>
+                      <Label htmlFor={`${uid}-bank-code`}>Bank Code</Label>
+                    </Legend>
+                    <Input
                       type="text"
                       id={`${uid}-bank-code`}
                       placeholder="060"
@@ -1544,14 +1547,14 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("bank_code")}
                       onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                     />
-                  </fieldset>
+                  </Fieldset>
                 </>
               ) : user.country_code === "RW" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAARWRWXXX"
@@ -1561,13 +1564,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "EC" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAAECE1XXX"
@@ -1577,13 +1580,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "BW" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAABWBWXXX"
@@ -1593,13 +1596,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "OM" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAAOMOMXXX"
@@ -1609,13 +1612,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "PY" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>Bank code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="27"
@@ -1625,13 +1628,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "MG" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAAMGMGXXX"
@@ -1641,13 +1644,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "GH" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>Bank code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="022112"
@@ -1657,13 +1660,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "US" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("routing_number") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-routing-number`}>Routing number</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("routing_number") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-routing-number`}>Routing number</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-routing-number`}
                     placeholder="121000497"
@@ -1673,13 +1676,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("routing_number")}
                     onChange={(evt) => updateBankAccount({ routing_number: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "MD" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAAMDMDXXX"
@@ -1689,13 +1692,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "PA" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAAPAPAXXX"
@@ -1705,14 +1708,14 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "DO" ? (
                 <>
-                  <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-bank-code`}>Bank code</label>
-                    </legend>
-                    <input
+                  <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                    <Legend>
+                      <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
+                    </Legend>
+                    <Input
                       type="text"
                       id={`${uid}-bank-code`}
                       placeholder="021"
@@ -1722,12 +1725,12 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("bank_code")}
                       onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                     />
-                  </fieldset>
-                  <fieldset className={cx({ danger: errorFieldNames.has("branch_code") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-branch-code`}>Branch code (optional)</label>
-                    </legend>
-                    <input
+                  </Fieldset>
+                  <Fieldset state={errorFieldNames.has("branch_code") ? "danger" : undefined}>
+                    <Legend>
+                      <Label htmlFor={`${uid}-branch-code`}>Branch code (optional)</Label>
+                    </Legend>
+                    <Input
                       type="text"
                       id={`${uid}-branch-code`}
                       placeholder="4232"
@@ -1735,15 +1738,15 @@ const BankAccountSection = ({
                       disabled={isFormDisabled}
                       onChange={(evt) => updateBankAccount({ branch_code: evt.target.value })}
                     />
-                  </fieldset>
+                  </Fieldset>
                 </>
               ) : user.country_code === "UZ" ? (
                 <>
-                  <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-bank-code`}>Bank code</label>
-                    </legend>
-                    <input
+                  <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                    <Legend>
+                      <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
+                    </Legend>
+                    <Input
                       type="text"
                       id={`${uid}-bank-code`}
                       placeholder="AAAAUZUZXXX"
@@ -1753,12 +1756,12 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("bank_code")}
                       onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                     />
-                  </fieldset>
-                  <fieldset className={cx({ danger: errorFieldNames.has("branch_code") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-branch-code`}>Branch code</label>
-                    </legend>
-                    <input
+                  </Fieldset>
+                  <Fieldset state={errorFieldNames.has("branch_code") ? "danger" : undefined}>
+                    <Legend>
+                      <Label htmlFor={`${uid}-branch-code`}>Branch code</Label>
+                    </Legend>
+                    <Input
                       type="text"
                       id={`${uid}-branch-code`}
                       placeholder="00000"
@@ -1768,14 +1771,14 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("branch_code")}
                       onChange={(evt) => updateBankAccount({ branch_code: evt.target.value })}
                     />
-                  </fieldset>
+                  </Fieldset>
                 </>
               ) : user.country_code === "BO" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>Bank code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="060"
@@ -1785,13 +1788,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "NG" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAANGLAXXX"
@@ -1801,13 +1804,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "AM" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAAAMNNXXX"
@@ -1817,14 +1820,14 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "LK" ? (
                 <>
-                  <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-bank-code`}>Bank code</label>
-                    </legend>
-                    <input
+                  <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                    <Legend>
+                      <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
+                    </Legend>
+                    <Input
                       type="text"
                       id={`${uid}-bank-code`}
                       placeholder="AAAALKLXXXX"
@@ -1834,12 +1837,12 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("bank_code")}
                       onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                     />
-                  </fieldset>
-                  <fieldset className={cx({ danger: errorFieldNames.has("branch_code") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-branch-code`}>Branch code</label>
-                    </legend>
-                    <input
+                  </Fieldset>
+                  <Fieldset state={errorFieldNames.has("branch_code") ? "danger" : undefined}>
+                    <Legend>
+                      <Label htmlFor={`${uid}-branch-code`}>Branch code</Label>
+                    </Legend>
+                    <Input
                       type="text"
                       id={`${uid}-branch-code`}
                       placeholder="7010999"
@@ -1849,14 +1852,14 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("branch_code")}
                       onChange={(evt) => updateBankAccount({ branch_code: evt.target.value })}
                     />
-                  </fieldset>
+                  </Fieldset>
                 </>
               ) : user.country_code === "ET" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAAETETXXX"
@@ -1866,13 +1869,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "BN" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAABNBBXXX"
@@ -1882,13 +1885,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "GY" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAAGYGGXYZ"
@@ -1898,13 +1901,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "MK" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAAMK2XXXX"
@@ -1914,13 +1917,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "BD" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>Bank Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>Bank Code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="110000000"
@@ -1930,13 +1933,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "BT" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAABTBTXXX"
@@ -1946,13 +1949,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "LA" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAALALAXXX"
@@ -1962,13 +1965,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "MZ" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAAMZMXXXX"
@@ -1978,13 +1981,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "QA" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="QNBAQAQAXXX"
@@ -1994,13 +1997,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "GA" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAAGAGAXXX"
@@ -2010,13 +2013,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "BS" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAABSNSXXX"
@@ -2026,13 +2029,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "KH" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAAKHPPXXX"
@@ -2042,13 +2045,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "MN" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAAMNUBXXX"
@@ -2058,13 +2061,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "DZ" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAADZDZXXX"
@@ -2074,13 +2077,13 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : user.country_code === "MO" ? (
-                <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                  <legend>
-                    <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                  </legend>
-                  <input
+                <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                  <Legend>
+                    <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                  </Legend>
+                  <Input
                     type="text"
                     id={`${uid}-bank-code`}
                     placeholder="AAAAMOMXXXX"
@@ -2090,16 +2093,16 @@ const BankAccountSection = ({
                     aria-invalid={errorFieldNames.has("bank_code")}
                     onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                   />
-                </fieldset>
+                </Fieldset>
               ) : null}
               {user.country_supports_iban ? (
                 <>
                   {user.country_code === "PK" || user.country_code === "TR" ? (
-                    <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                      <legend>
-                        <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                      </legend>
-                      <input
+                    <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                      <Legend>
+                        <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                      </Legend>
+                      <Input
                         type="text"
                         id={`${uid}-bank-code`}
                         placeholder="AAAAPKKAXXX"
@@ -2109,13 +2112,13 @@ const BankAccountSection = ({
                         aria-invalid={errorFieldNames.has("bank_code")}
                         onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                       />
-                    </fieldset>
+                    </Fieldset>
                   ) : user.country_code === "GT" ? (
-                    <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                      <legend>
-                        <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                      </legend>
-                      <input
+                    <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                      <Legend>
+                        <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                      </Legend>
+                      <Input
                         type="text"
                         id={`${uid}-bank-code`}
                         placeholder="AAAAGTGCXYZ"
@@ -2125,13 +2128,13 @@ const BankAccountSection = ({
                         aria-invalid={errorFieldNames.has("bank_code")}
                         onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                       />
-                    </fieldset>
+                    </Fieldset>
                   ) : user.country_code === "BA" ? (
-                    <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                      <legend>
-                        <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                      </legend>
-                      <input
+                    <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                      <Legend>
+                        <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                      </Legend>
+                      <Input
                         type="text"
                         id={`${uid}-bank-code`}
                         placeholder="BIHBAHBOS"
@@ -2141,13 +2144,13 @@ const BankAccountSection = ({
                         aria-invalid={errorFieldNames.has("bank_code")}
                         onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                       />
-                    </fieldset>
+                    </Fieldset>
                   ) : user.country_code === "EG" ? (
-                    <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                      <legend>
-                        <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                      </legend>
-                      <input
+                    <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                      <Legend>
+                        <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                      </Legend>
+                      <Input
                         type="text"
                         id={`${uid}-bank-code`}
                         placeholder="NBEGEGCX331"
@@ -2157,13 +2160,13 @@ const BankAccountSection = ({
                         aria-invalid={errorFieldNames.has("bank_code")}
                         onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                       />
-                    </fieldset>
+                    </Fieldset>
                   ) : user.country_code === "SA" ? (
-                    <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                      <legend>
-                        <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                      </legend>
-                      <input
+                    <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                      <Legend>
+                        <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                      </Legend>
+                      <Input
                         type="text"
                         id={`${uid}-bank-code`}
                         placeholder="NCBKSAJE101"
@@ -2173,13 +2176,13 @@ const BankAccountSection = ({
                         aria-invalid={errorFieldNames.has("bank_code")}
                         onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                       />
-                    </fieldset>
+                    </Fieldset>
                   ) : user.country_code === "MU" ? (
-                    <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                      <legend>
-                        <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                      </legend>
-                      <input
+                    <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                      <Legend>
+                        <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                      </Legend>
+                      <Input
                         type="text"
                         id={`${uid}-bank-code`}
                         placeholder="AAAAMUMUXYZ"
@@ -2189,13 +2192,13 @@ const BankAccountSection = ({
                         aria-invalid={errorFieldNames.has("bank_code")}
                         onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                       />
-                    </fieldset>
+                    </Fieldset>
                   ) : user.country_code === "KZ" ? (
-                    <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                      <legend>
-                        <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                      </legend>
-                      <input
+                    <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                      <Legend>
+                        <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                      </Legend>
+                      <Input
                         type="text"
                         id={`${uid}-bank-code`}
                         placeholder="AAAAKZKZXXX"
@@ -2205,13 +2208,13 @@ const BankAccountSection = ({
                         aria-invalid={errorFieldNames.has("bank_code")}
                         onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                       />
-                    </fieldset>
+                    </Fieldset>
                   ) : user.country_code === "SV" ? (
-                    <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                      <legend>
-                        <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                      </legend>
-                      <input
+                    <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                      <Legend>
+                        <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                      </Legend>
+                      <Input
                         type="text"
                         id={`${uid}-bank-code`}
                         placeholder="AAAASVS1XXX"
@@ -2221,13 +2224,13 @@ const BankAccountSection = ({
                         aria-invalid={errorFieldNames.has("bank_code")}
                         onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                       />
-                    </fieldset>
+                    </Fieldset>
                   ) : user.country_code === "AL" ? (
-                    <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                      <legend>
-                        <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                      </legend>
-                      <input
+                    <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                      <Legend>
+                        <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                      </Legend>
+                      <Input
                         type="text"
                         id={`${uid}-bank-code`}
                         placeholder="AAAAALTXXXX"
@@ -2237,13 +2240,13 @@ const BankAccountSection = ({
                         aria-invalid={errorFieldNames.has("bank_code")}
                         onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                       />
-                    </fieldset>
+                    </Fieldset>
                   ) : user.country_code === "BH" ? (
-                    <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                      <legend>
-                        <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                      </legend>
-                      <input
+                    <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                      <Legend>
+                        <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                      </Legend>
+                      <Input
                         type="text"
                         id={`${uid}-bank-code`}
                         placeholder="AAAABHBMXYZ"
@@ -2253,13 +2256,13 @@ const BankAccountSection = ({
                         aria-invalid={errorFieldNames.has("bank_code")}
                         onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                       />
-                    </fieldset>
+                    </Fieldset>
                   ) : user.country_code === "JO" ? (
-                    <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                      <legend>
-                        <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                      </legend>
-                      <input
+                    <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                      <Legend>
+                        <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                      </Legend>
+                      <Input
                         type="text"
                         id={`${uid}-bank-code`}
                         placeholder="AAAAJOJOXXX"
@@ -2269,14 +2272,14 @@ const BankAccountSection = ({
                         aria-invalid={errorFieldNames.has("bank_code")}
                         onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                       />
-                    </fieldset>
+                    </Fieldset>
                   ) : user.country_code === "AZ" ? (
                     <>
-                      <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                        <legend>
-                          <label htmlFor={`${uid}-bank-code`}>Bank code</label>
-                        </legend>
-                        <input
+                      <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                        <Legend>
+                          <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
+                        </Legend>
+                        <Input
                           type="text"
                           id={`${uid}-bank-code`}
                           placeholder="123456"
@@ -2286,12 +2289,12 @@ const BankAccountSection = ({
                           aria-invalid={errorFieldNames.has("bank_code")}
                           onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                         />
-                      </fieldset>
-                      <fieldset className={cx({ danger: errorFieldNames.has("branch_code") })}>
-                        <legend>
-                          <label htmlFor={`${uid}-branch-code`}>Branch code</label>
-                        </legend>
-                        <input
+                      </Fieldset>
+                      <Fieldset state={errorFieldNames.has("branch_code") ? "danger" : undefined}>
+                        <Legend>
+                          <Label htmlFor={`${uid}-branch-code`}>Branch code</Label>
+                        </Legend>
+                        <Input
                           type="text"
                           id={`${uid}-branch-code`}
                           placeholder="123456"
@@ -2301,14 +2304,14 @@ const BankAccountSection = ({
                           aria-invalid={errorFieldNames.has("branch_code")}
                           onChange={(evt) => updateBankAccount({ branch_code: evt.target.value })}
                         />
-                      </fieldset>
+                      </Fieldset>
                     </>
                   ) : user.country_code === "AO" ? (
-                    <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                      <legend>
-                        <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                      </legend>
-                      <input
+                    <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                      <Legend>
+                        <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                      </Legend>
+                      <Input
                         type="text"
                         id={`${uid}-bank-code`}
                         placeholder="AAAAAOAOXXX"
@@ -2318,13 +2321,13 @@ const BankAccountSection = ({
                         aria-invalid={errorFieldNames.has("bank_code")}
                         onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                       />
-                    </fieldset>
+                    </Fieldset>
                   ) : user.country_code === "SM" ? (
-                    <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                      <legend>
-                        <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                      </legend>
-                      <input
+                    <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                      <Legend>
+                        <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                      </Legend>
+                      <Input
                         type="text"
                         id={`${uid}-bank-code`}
                         placeholder="AAAASMSMXXX"
@@ -2334,13 +2337,13 @@ const BankAccountSection = ({
                         aria-invalid={errorFieldNames.has("bank_code")}
                         onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                       />
-                    </fieldset>
+                    </Fieldset>
                   ) : user.country_code === "KW" ? (
-                    <fieldset className={cx({ danger: errorFieldNames.has("bank_code") })}>
-                      <legend>
-                        <label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</label>
-                      </legend>
-                      <input
+                    <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
+                      <Legend>
+                        <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
+                      </Legend>
+                      <Input
                         type="text"
                         id={`${uid}-bank-code`}
                         placeholder="AAAAKWKWXYZ"
@@ -2350,13 +2353,13 @@ const BankAccountSection = ({
                         aria-invalid={errorFieldNames.has("bank_code")}
                         onChange={(evt) => updateBankAccount({ bank_code: evt.target.value })}
                       />
-                    </fieldset>
+                    </Fieldset>
                   ) : null}
-                  <fieldset className={cx({ danger: errorFieldNames.has("account_number") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-account-number`}>IBAN</label>
-                    </legend>
-                    <input
+                  <Fieldset state={errorFieldNames.has("account_number") ? "danger" : undefined}>
+                    <Legend>
+                      <Label htmlFor={`${uid}-account-number`}>IBAN</Label>
+                    </Legend>
+                    <Input
                       type="text"
                       id={`${uid}-account-number`}
                       placeholder={`${user.country_code || ""}1234567890`}
@@ -2365,12 +2368,12 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("account_number")}
                       onChange={(evt) => updateBankAccount({ account_number: evt.target.value })}
                     />
-                  </fieldset>
-                  <fieldset className={cx({ danger: errorFieldNames.has("account_number_confirmation") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-confirm-account-number`}>Confirm IBAN</label>
-                    </legend>
-                    <input
+                  </Fieldset>
+                  <Fieldset state={errorFieldNames.has("account_number_confirmation") ? "danger" : undefined}>
+                    <Legend>
+                      <Label htmlFor={`${uid}-confirm-account-number`}>Confirm IBAN</Label>
+                    </Legend>
+                    <Input
                       type="text"
                       id={`${uid}-confirm-account-number`}
                       placeholder={`${user.country_code || ""}1234567890`}
@@ -2379,19 +2382,19 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("account_number_confirmation")}
                       onChange={(evt) => updateBankAccount({ account_number_confirmation: evt.target.value })}
                     />
-                  </fieldset>
+                  </Fieldset>
                 </>
               ) : (
                 <>
-                  <fieldset className={cx({ danger: errorFieldNames.has("account_number") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-account-number`}>
+                  <Fieldset state={errorFieldNames.has("account_number") ? "danger" : undefined}>
+                    <Legend>
+                      <Label htmlFor={`${uid}-account-number`}>
                         {user.country_code && ["US", "MX", "AR", "PE"].includes(user.country_code)
                           ? "Account number"
                           : "Account #"}
-                      </label>
-                    </legend>
-                    <input
+                      </Label>
+                    </Legend>
+                    <Input
                       type="text"
                       id={`${uid}-account-number`}
                       {...nonIbanAccountNumberInputProps}
@@ -2400,16 +2403,16 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("account_number")}
                       onChange={(evt) => updateBankAccount({ account_number: evt.target.value })}
                     />
-                  </fieldset>
-                  <fieldset className={cx({ danger: errorFieldNames.has("account_number_confirmation") })}>
-                    <legend>
-                      <label htmlFor={`${uid}-confirm-account-number`}>
+                  </Fieldset>
+                  <Fieldset state={errorFieldNames.has("account_number_confirmation") ? "danger" : undefined}>
+                    <Legend>
+                      <Label htmlFor={`${uid}-confirm-account-number`}>
                         {user.country_code && ["US", "MX", "AR", "PE"].includes(user.country_code)
                           ? "Confirm account number"
                           : "Confirm account #"}
-                      </label>
-                    </legend>
-                    <input
+                      </Label>
+                    </Legend>
+                    <Input
                       type="text"
                       id={`${uid}-confirm-account-number`}
                       {...nonIbanAccountNumberInputProps}
@@ -2418,7 +2421,7 @@ const BankAccountSection = ({
                       aria-invalid={errorFieldNames.has("account_number_confirmation")}
                       onChange={(evt) => updateBankAccount({ account_number_confirmation: evt.target.value })}
                     />
-                  </fieldset>
+                  </Fieldset>
                 </>
               )}
             </div>
@@ -2428,29 +2431,29 @@ const BankAccountSection = ({
                 style={{ display: "grid", gap: "var(--spacer-5)", gridAutoFlow: "column", gridAutoColumns: "1fr" }}
               >
                 {bankAccountDetails.routing_number !== null && (
-                  <fieldset>
-                    <legend>
-                      <label htmlFor={`${uid}-saved-routing-number`}>
+                  <Fieldset>
+                    <Legend>
+                      <Label htmlFor={`${uid}-saved-routing-number`}>
                         {getRoutingNumberLabel(user.country_code || "")}
-                      </label>
-                    </legend>
-                    <input
+                      </Label>
+                    </Legend>
+                    <Input
                       id={`${uid}-saved-routing-number`}
                       disabled
                       value={bankAccountDetails.routing_number || ""}
                     />
-                  </fieldset>
+                  </Fieldset>
                 )}
-                <fieldset>
-                  <legend>
-                    <label htmlFor={`${uid}-saved-account-number`}>Account number</label>
-                  </legend>
-                  <input
+                <Fieldset>
+                  <Legend>
+                    <Label htmlFor={`${uid}-saved-account-number`}>Account number</Label>
+                  </Legend>
+                  <Input
                     id={`${uid}-saved-account-number`}
                     disabled
                     value={bankAccountDetails.account_number_visual || ""}
                   />
-                </fieldset>
+                </Fieldset>
               </section>
               <div>
                 <Button disabled={isFormDisabled} onClick={() => setShowNewBankAccount(true)}>
diff --git a/app/javascript/components/Settings/PaymentsPage/PayPalConnectSection.tsx b/app/javascript/components/Settings/PaymentsPage/PayPalConnectSection.tsx
index d8d9b6ab7a..3fd9634396 100644
--- a/app/javascript/components/Settings/PaymentsPage/PayPalConnectSection.tsx
+++ b/app/javascript/components/Settings/PaymentsPage/PayPalConnectSection.tsx
@@ -8,6 +8,10 @@ import { Button } from "$app/components/Button";
 import { Icon } from "$app/components/Icons";
 import { showAlert } from "$app/components/server-components/Alert";
 import { Alert } from "$app/components/ui/Alert";
+import { Fieldset, Legend } from "$app/components/ui/Fieldset";
+import { InputGroup } from "$app/components/ui/InputGroup";
+import { Label } from "$app/components/ui/Label";
+import { Section } from "$app/components/ui/Section";
 
 export type PayPalConnect = {
   email: string | null;
@@ -46,13 +50,17 @@ const PayPalConnectSection = ({
   });
 
   return (
-    <section className="p-4! md:p-8!">
-      <header>
-        <h2>PayPal</h2>
-        <a href="/help/article/275-paypal-connect" target="_blank" rel="noreferrer">
-          Learn more
-        </a>
-      </header>
+    <Section
+      className="p-4! md:p-8!"
+      header={
+        <>
+          <h2>PayPal</h2>
+          <a href="/help/article/275-paypal-connect" target="_blank" rel="noreferrer">
+            Learn more
+          </a>
+        </>
+      }
+    >
       <div className="flex flex-col gap-4">
         {!paypalConnect.charge_processor_merchant_id ? (
           <>
@@ -92,15 +100,15 @@ const PayPalConnectSection = ({
           <>
             <p>{connectAccountFeeInfoText}</p>
             <div className="grid gap-8">
-              <fieldset>
-                <legend>
-                  <label>PayPal account</label>
-                </legend>
-                <div className="input input-wrapper">
-                  <div className="fake-input">{paypalConnect.charge_processor_merchant_id}</div>
+              <Fieldset>
+                <Legend>
+                  <Label>PayPal account</Label>
+                </Legend>
+                <InputGroup readOnly>
+                  <span className="flex-1">{paypalConnect.charge_processor_merchant_id}</span>
                   <Icon name="solid-check-circle" className="text-success" />
-                </div>
-              </fieldset>
+                </InputGroup>
+              </Fieldset>
               {paypalConnect.show_paypal_connect ? (
                 <>
                   <p>
@@ -159,7 +167,7 @@ const PayPalConnectSection = ({
           </>
         )}
       </div>
-    </section>
+    </Section>
   );
 };
 export default PayPalConnectSection;
diff --git a/app/javascript/components/Settings/PaymentsPage/PayPalEmailSection.tsx b/app/javascript/components/Settings/PaymentsPage/PayPalEmailSection.tsx
index edc5385771..db5e8f5636 100644
--- a/app/javascript/components/Settings/PaymentsPage/PayPalEmailSection.tsx
+++ b/app/javascript/components/Settings/PaymentsPage/PayPalEmailSection.tsx
@@ -1,9 +1,11 @@
-import cx from "classnames";
 import * as React from "react";
 
 import type { FormFieldName, PayoutMethod } from "$app/types/payments";
 
 import { Alert } from "$app/components/ui/Alert";
+import { Fieldset, Legend } from "$app/components/ui/Fieldset";
+import { Input } from "$app/components/ui/Input";
+import { Label } from "$app/components/ui/Label";
 
 const PayPalEmailSection = ({
   countrySupportsNativePayouts,
@@ -43,11 +45,11 @@ const PayPalEmailSection = ({
             Switch to direct deposit
           </button>
         ) : null}
-        <fieldset className={cx({ danger: errorFieldNames.has("paypal_email_address") })}>
-          <legend>
-            <label htmlFor={`${uid}-paypal-email`}>PayPal Email</label>
-          </legend>
-          <input
+        <Fieldset state={errorFieldNames.has("paypal_email_address") ? "danger" : undefined}>
+          <Legend>
+            <Label htmlFor={`${uid}-paypal-email`}>PayPal Email</Label>
+          </Legend>
+          <Input
             type="email"
             id={`${uid}-paypal-email`}
             placeholder="PayPal Email"
@@ -56,7 +58,7 @@ const PayPalEmailSection = ({
             aria-invalid={errorFieldNames.has("paypal_email_address")}
             onChange={(evt) => setPaypalEmailAddress(evt.target.value)}
           />
-        </fieldset>
+        </Fieldset>
         {hasConnectedStripe ? (
           <Alert variant="warning">
             You cannot change your payout method to PayPal because you have a stripe account connected.
@@ -73,4 +75,5 @@ const PayPalEmailSection = ({
     </section>
   );
 };
+
 export default PayPalEmailSection;
diff --git a/app/javascript/components/Settings/PaymentsPage/StripeConnectSection.tsx b/app/javascript/components/Settings/PaymentsPage/StripeConnectSection.tsx
index 45a2ef9203..15a2978c3e 100644
--- a/app/javascript/components/Settings/PaymentsPage/StripeConnectSection.tsx
+++ b/app/javascript/components/Settings/PaymentsPage/StripeConnectSection.tsx
@@ -9,6 +9,9 @@ import { Icon } from "$app/components/Icons";
 import { showAlert } from "$app/components/server-components/Alert";
 import { SocialAuthButton } from "$app/components/SocialAuthButton";
 import { Alert } from "$app/components/ui/Alert";
+import { Fieldset, Legend } from "$app/components/ui/Fieldset";
+import { InputGroup } from "$app/components/ui/InputGroup";
+import { Label } from "$app/components/ui/Label";
 
 export type StripeConnect = {
   has_connected_stripe: boolean;
@@ -65,15 +68,15 @@ const StripeConnectSection = ({
         </div>
         {stripeConnect.has_connected_stripe ? (
           <div className="grid gap-8">
-            <fieldset>
-              <legend>
-                <label>Stripe account</label>
-              </legend>
-              <div className="input input-wrapper">
-                <div className="fake-input">{stripeConnect.stripe_connect_account_id}</div>
+            <Fieldset>
+              <Legend>
+                <Label>Stripe account</Label>
+              </Legend>
+              <InputGroup readOnly>
+                <span className="flex-1">{stripeConnect.stripe_connect_account_id}</span>
                 <Icon name="solid-check-circle" className="text-success" />
-              </div>
-            </fieldset>
+              </InputGroup>
+            </Fieldset>
             <p>
               <Button
                 color="danger"
diff --git a/app/javascript/pages/Oauth/Applications/Edit.tsx b/app/javascript/pages/Oauth/Applications/Edit.tsx
index 2c5b92610b..414adea015 100644
--- a/app/javascript/pages/Oauth/Applications/Edit.tsx
+++ b/app/javascript/pages/Oauth/Applications/Edit.tsx
@@ -6,6 +6,7 @@ import { SettingPage } from "$app/parsers/settings";
 
 import ApplicationForm from "$app/components/Settings/AdvancedPage/ApplicationForm";
 import { Layout } from "$app/components/Settings/Layout";
+import { Section } from "$app/components/ui/Section";
 
 type Application = {
   id: string;
@@ -27,12 +28,9 @@ export default function EditApplicationPage() {
   return (
     <Layout currentPage="advanced" pages={props.settings_pages}>
       <form>
-        <section className="p-4! md:p-8!">
-          <header>
-            <h2>Edit application</h2>
-          </header>
+        <Section className="p-4! md:p-8!" header={<h2>Edit application</h2>}>
           <ApplicationForm application={props.application} />
-        </section>
+        </Section>
       </form>
     </Layout>
   );
diff --git a/app/javascript/pages/Settings/Main/Show.tsx b/app/javascript/pages/Settings/Main/Show.tsx
index 2ebbe99679..5be291f287 100644
--- a/app/javascript/pages/Settings/Main/Show.tsx
+++ b/app/javascript/pages/Settings/Main/Show.tsx
@@ -1,5 +1,4 @@
 import { useForm, usePage } from "@inertiajs/react";
-import cx from "classnames";
 import * as React from "react";
 import { cast } from "ts-safe-cast";
 
@@ -16,6 +15,14 @@ import { ProductLevelSupportEmailsForm } from "$app/components/Settings/Advanced
 import { Layout } from "$app/components/Settings/Layout";
 import { TagInput } from "$app/components/TagInput";
 import { Toggle } from "$app/components/Toggle";
+import { Checkbox } from "$app/components/ui/Checkbox";
+import { Fieldset, Legend } from "$app/components/ui/Fieldset";
+import { Input } from "$app/components/ui/Input";
+import { InputGroup } from "$app/components/ui/InputGroup";
+import { Label } from "$app/components/ui/Label";
+import { Section } from "$app/components/ui/Section";
+import { Select } from "$app/components/ui/Select";
+import { Textarea } from "$app/components/ui/Textarea";
 import { Pill } from "$app/components/ui/Pill";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "$app/components/ui/Table";
 
@@ -114,15 +121,12 @@ export default function MainPage() {
   return (
     <Layout currentPage="main" pages={props.settings_pages} onSave={onSave} canUpdate={!isFormDisabled}>
       <form ref={formRef}>
-        <section className="p-4! md:p-8!">
-          <header>
-            <h2>User details</h2>
-          </header>
-          <fieldset>
-            <legend>
-              <label htmlFor={`${uid}-email`}>Email</label>
-            </legend>
-            <input
+        <Section className="p-4! md:p-8!" header={<h2>User details</h2>}>
+          <Fieldset>
+            <Legend>
+              <Label htmlFor={`${uid}-email`}>Email</Label>
+            </Legend>
+            <Input
               type="email"
               id={`${uid}-email`}
               value={form.data.user.email}
@@ -131,7 +135,7 @@ export default function MainPage() {
               onChange={(e) => updateUserSettings({ email: e.target.value })}
             />
             {props.user.has_unconfirmed_email && !props.is_form_disabled ? (
-              <small>
+              <small className="text-muted">
                 This email address has not been confirmed yet.{" "}
                 {resentConfirmationEmail ? null : (
                   <button
@@ -146,25 +150,29 @@ export default function MainPage() {
                 )}
               </small>
             ) : null}
-          </fieldset>
-        </section>
-        <section className="p-4! md:p-8!">
-          <header>
-            <h2>Notifications</h2>
-            <div>
-              Depending on your preferences, you can choose whether to receive mobile notifications or email
-              notifications. If you want to get notifications on a mobile device, install the Gumroad app over on the{" "}
-              <a href={props.ios_app_store_url} target="_blank" rel="noopener noreferrer">
-                App Store
-              </a>{" "}
-              or{" "}
-              <a href={props.android_app_store_url} target="_blank" rel="noopener noreferrer">
-                Play Store
-              </a>
-              .
-            </div>
-          </header>
-          <fieldset>
+          </Fieldset>
+        </Section>
+        <Section
+          className="p-4! md:p-8!"
+          header={
+            <>
+              <h2>Notifications</h2>
+              <div>
+                Depending on your preferences, you can choose whether to receive mobile notifications or email
+                notifications. If you want to get notifications on a mobile device, install the Gumroad app over on the{" "}
+                <a href={props.ios_app_store_url} target="_blank" rel="noopener noreferrer">
+                  App Store
+                </a>{" "}
+                or{" "}
+                <a href={props.android_app_store_url} target="_blank" rel="noopener noreferrer">
+                  Play Store
+                </a>
+                .
+              </div>
+            </>
+          }
+        >
+          <Fieldset>
             <Table>
               <TableHeader>
                 <TableRow>
@@ -265,17 +273,14 @@ export default function MainPage() {
                 </TableRow>
               </TableBody>
             </Table>
-          </fieldset>
-        </section>
-        <section className="p-4! md:p-8!">
-          <header>
-            <h2>Support</h2>
-          </header>
-          <fieldset>
-            <legend>
-              <label htmlFor={`${uid}-support-email`}>Email</label>
-            </legend>
-            <input
+          </Fieldset>
+        </Section>
+        <Section className="p-4! md:p-8!" header={<h2>Support</h2>}>
+          <Fieldset>
+            <Legend>
+              <Label htmlFor={`${uid}-support-email`}>Email</Label>
+            </Legend>
+            <Input
               type="email"
               id={`${uid}-support-email`}
               value={form.data.user.support_email}
@@ -283,8 +288,8 @@ export default function MainPage() {
               disabled={isFormDisabled}
               onChange={(e) => updateUserSettings({ support_email: e.target.value })}
             />
-            <small>This email is listed on the receipt of every sale.</small>
-          </fieldset>
+            <small className="text-muted">This email is listed on the receipt of every sale.</small>
+          </Fieldset>
           {props.user.product_level_support_emails !== null && (
             <ProductLevelSupportEmailsForm
               productLevelSupportEmails={form.data.user.product_level_support_emails}
@@ -293,18 +298,22 @@ export default function MainPage() {
               onChange={handleProductLevelSupportEmailsChange}
             />
           )}
-        </section>
+        </Section>
         {props.user.seller_refund_policy.enabled ? (
-          <section className="p-4! md:p-8!">
-            <header>
-              <h2>Refund policy</h2>
-              <div>Choose how refunds will be handled for your products.</div>
-            </header>
-            <fieldset>
-              <legend>
-                <label htmlFor="max-refund-period-in-days">Refund period</label>
-              </legend>
-              <select
+          <Section
+            className="p-4! md:p-8!"
+            header={
+              <>
+                <h2>Refund policy</h2>
+                <div>Choose how refunds will be handled for your products.</div>
+              </>
+            }
+          >
+            <Fieldset>
+              <Legend>
+                <Label htmlFor="max-refund-period-in-days">Refund period</Label>
+              </Legend>
+              <Select
                 id="max-refund-period-in-days"
                 value={form.data.user.seller_refund_policy.max_refund_period_in_days}
                 disabled={isFormDisabled}
@@ -322,9 +331,9 @@ export default function MainPage() {
                     {value}
                   </option>
                 ))}
-              </select>
-            </fieldset>
-            <fieldset>
+              </Select>
+            </Fieldset>
+            <Fieldset>
               <ToggleSettingRow
                 value={
                   form.data.user.seller_refund_policy.fine_print_enabled
@@ -342,11 +351,11 @@ export default function MainPage() {
                 disabled={isFormDisabled || form.data.user.seller_refund_policy.max_refund_period_in_days === 0}
                 label="Add a fine print to your refund policy"
                 dropdown={
-                  <fieldset>
-                    <legend>
-                      <label htmlFor="seller-refund-policy-fine-print">Fine print</label>
-                    </legend>
-                    <textarea
+                  <Fieldset>
+                    <Legend>
+                      <Label htmlFor="seller-refund-policy-fine-print">Fine print</Label>
+                    </Legend>
+                    <Textarea
                       id="seller-refund-policy-fine-print"
                       maxLength={3000}
                       rows={10}
@@ -362,21 +371,18 @@ export default function MainPage() {
                         })
                       }
                     />
-                  </fieldset>
+                  </Fieldset>
                 }
               />
-            </fieldset>
-          </section>
+            </Fieldset>
+          </Section>
         ) : null}
-        <section className="p-4! md:p-8!">
-          <header>
-            <h2>Local</h2>
-          </header>
-          <fieldset>
-            <legend>
-              <label htmlFor={`${uid}-timezone`}>Time zone</label>
-            </legend>
-            <select
+        <Section className="p-4! md:p-8!" header={<h2>Local</h2>}>
+          <Fieldset>
+            <Legend>
+              <Label htmlFor={`${uid}-timezone`}>Time zone</Label>
+            </Legend>
+            <Select
               id={`${uid}-timezone`}
               disabled={isFormDisabled}
               value={form.data.user.timezone}
@@ -387,13 +393,13 @@ export default function MainPage() {
                   {`${tz.offset} | ${tz.name}`}
                 </option>
               ))}
-            </select>
-          </fieldset>
-          <fieldset>
-            <legend>
-              <label htmlFor={`${uid}-local-currency`}>Sell in...</label>
-            </legend>
-            <select
+            </Select>
+          </Fieldset>
+          <Fieldset>
+            <Legend>
+              <Label htmlFor={`${uid}-local-currency`}>Sell in...</Label>
+            </Legend>
+            <Select
               id={`${uid}-local-currency`}
               disabled={isFormDisabled}
               value={form.data.user.currency_type}
@@ -404,14 +410,14 @@ export default function MainPage() {
                   {currency.name}
                 </option>
               ))}
-            </select>
-            <small>Applies only to new products.</small>
-            <small>
+            </Select>
+            <small className="text-muted">Applies only to new products.</small>
+            <small className="text-muted">
               Charges will happen in USD, using an up-to-date exchange rate. Customers may incur an additional foreign
               transaction fee according to their cardmember agreement.
             </small>
-          </fieldset>
-          <fieldset>
+          </Fieldset>
+          <Fieldset>
             <ToggleSettingRow
               value={form.data.user.purchasing_power_parity_enabled}
               onChange={(value) => updateUserSettings({ purchasing_power_parity_enabled: value })}
@@ -419,11 +425,11 @@ export default function MainPage() {
               label="Enable purchasing power parity"
               dropdown={
                 <div className="flex flex-col gap-4">
-                  <fieldset>
-                    <legend>
-                      <label htmlFor={`${uid}-ppp-discount-percentage`}>Maximum PPP discount</label>
-                    </legend>
-                    <div className={cx("input", { disabled: props.is_form_disabled })}>
+                  <Fieldset>
+                    <Legend>
+                      <Label htmlFor={`${uid}-ppp-discount-percentage`}>Maximum PPP discount</Label>
+                    </Legend>
+                    <InputGroup disabled={props.is_form_disabled}>
                       <NumberInput
                         value={form.data.user.purchasing_power_parity_limit}
                         onChange={(value) => {
@@ -433,7 +439,8 @@ export default function MainPage() {
                         }}
                       >
                         {(inputProps) => (
-                          <input
+                          <Input
+                            asChild
                             id={`${uid}-ppp-discount-percentage`}
                             type="text"
                             placeholder="60"
@@ -444,8 +451,8 @@ export default function MainPage() {
                         )}
                       </NumberInput>
                       <Pill className="-mr-2 shrink-0">%</Pill>
-                    </div>
-                  </fieldset>
+                    </InputGroup>
+                  </Fieldset>
                   <Toggle
                     value={!form.data.user.purchasing_power_parity_payment_verification_disabled}
                     disabled={isFormDisabled}
@@ -455,10 +462,10 @@ export default function MainPage() {
                   >
                     Apply only if the customer is currently located in the country of their payment method
                   </Toggle>
-                  <fieldset>
-                    <legend>
-                      <label htmlFor={`${uid}-ppp-exclude-products`}>Products to exclude</label>
-                    </legend>
+                  <Fieldset>
+                    <Legend>
+                      <Label htmlFor={`${uid}-ppp-exclude-products`}>Products to exclude</Label>
+                    </Legend>
 
                     <TagInput
                       inputId={`${uid}-ppp-exclude-products`}
@@ -470,9 +477,8 @@ export default function MainPage() {
                       }
                     />
 
-                    <label>
-                      <input
-                        type="checkbox"
+                    <Label>
+                      <Checkbox
                         disabled={isFormDisabled}
                         checked={
                           form.data.user.purchasing_power_parity_excluded_product_ids.length ===
@@ -487,46 +493,42 @@ export default function MainPage() {
                         }
                       />
                       All products
-                    </label>
-                  </fieldset>
+                    </Label>
+                  </Fieldset>
                 </div>
               }
             />
-            <small>
+            <small className="text-muted">
               Charge customers different amounts depending on the cost of living in their country.{" "}
               <a href="/help/article/327-purchasing-power-parity" target="_blank" rel="noreferrer">
                 Learn more
               </a>
             </small>
-          </fieldset>
-        </section>
-        <section className="p-4! md:p-8!">
-          <header>
-            <h2>Adult content</h2>
-          </header>
-          <fieldset>
+          </Fieldset>
+        </Section>
+        <Section className="p-4! md:p-8!" header={<h2>Adult content</h2>}>
+          <Fieldset>
             <ToggleSettingRow
               value={form.data.user.show_nsfw_products}
               onChange={(value) => updateUserSettings({ show_nsfw_products: value })}
               disabled={isFormDisabled}
               label="Show adult content in recommendations and search results"
             />
-          </fieldset>
-        </section>
-        <section className="p-4! md:p-8!">
-          <header>
-            <h2>Affiliates</h2>
-          </header>
-          <fieldset>
+          </Fieldset>
+        </Section>
+        <Section className="p-4! md:p-8!" header={<h2>Affiliates</h2>}>
+          <Fieldset>
             <ToggleSettingRow
               value={form.data.user.disable_affiliate_requests}
               onChange={(value) => updateUserSettings({ disable_affiliate_requests: value })}
               disabled={isFormDisabled}
               label="Prevent others from adding me as an affiliate"
             />
-            <small>When enabled, other users cannot add you as an affiliate or request to become your affiliate.</small>
-          </fieldset>
-        </section>
+            <small className="text-muted">
+              When enabled, other users cannot add you as an affiliate or request to become your affiliate.
+            </small>
+          </Fieldset>
+        </Section>
         {props.invalidate_active_sessions ? <InvalidateActiveSessionsSection /> : null}
       </form>
     </Layout>
@@ -554,13 +556,13 @@ const InvalidateActiveSessionsSection = () => {
   });
 
   return (
-    <section className="p-4! md:p-8!">
-      <fieldset>
+    <Section className="p-4! md:p-8!">
+      <Fieldset>
         <button className="underline" type="button" onClick={() => setIsConfirmationDialogOpen(true)}>
           Sign out from all active sessions
         </button>
         <small>You will be signed out from all your active sessions including this session.</small>
-      </fieldset>
+      </Fieldset>
       {isConfirmationDialogOpen ? (
         <Modal
           open
@@ -581,6 +583,6 @@ const InvalidateActiveSessionsSection = () => {
           session as well.
         </Modal>
       ) : null}
-    </section>
+    </Section>
   );
 };
diff --git a/app/javascript/pages/Settings/Password/Show.tsx b/app/javascript/pages/Settings/Password/Show.tsx
index 0b78d7a5af..beed1768e4 100644
--- a/app/javascript/pages/Settings/Password/Show.tsx
+++ b/app/javascript/pages/Settings/Password/Show.tsx
@@ -8,6 +8,9 @@ import { Button } from "$app/components/Button";
 import { PasswordInput } from "$app/components/PasswordInput";
 import { showAlert } from "$app/components/server-components/Alert";
 import { Layout as SettingsLayout } from "$app/components/Settings/Layout";
+import { Fieldset, Legend } from "$app/components/ui/Fieldset";
+import { Label } from "$app/components/ui/Label";
+import { Section } from "$app/components/ui/Section";
 
 const MIN_PASSWORD_LENGTH = 4;
 const MAX_PASSWORD_LENGTH = 128;
@@ -54,15 +57,12 @@ export default function PasswordPage() {
   return (
     <SettingsLayout currentPage="password" pages={props.settings_pages}>
       <form onSubmit={handleSubmit}>
-        <section className="p-4! md:p-8!">
-          <header>
-            <h2>Change password</h2>
-          </header>
+        <Section className="p-4! md:p-8!" header={<h2>Change password</h2>}>
           {requireOldPassword ? (
-            <fieldset>
-              <legend>
-                <label htmlFor={`${uid}-old-password`}>Old password</label>
-              </legend>
+            <Fieldset>
+              <Legend>
+                <Label htmlFor={`${uid}-old-password`}>Old password</Label>
+              </Legend>
               <PasswordInput
                 id={`${uid}-old-password`}
                 value={form.data.user.password}
@@ -70,12 +70,12 @@ export default function PasswordPage() {
                 required
                 disabled={form.processing}
               />
-            </fieldset>
+            </Fieldset>
           ) : null}
-          <fieldset>
-            <legend>
-              <label htmlFor={`${uid}-new-password`}>{requireOldPassword ? "New password" : "Add password"}</label>
-            </legend>
+          <Fieldset>
+            <Legend>
+              <Label htmlFor={`${uid}-new-password`}>{requireOldPassword ? "New password" : "Add password"}</Label>
+            </Legend>
             <PasswordInput
               id={`${uid}-new-password`}
               value={form.data.user.new_password}
@@ -83,15 +83,15 @@ export default function PasswordPage() {
               required
               disabled={form.processing}
             />
-          </fieldset>
-          <fieldset>
+          </Fieldset>
+          <Fieldset>
             <div>
               <Button type="submit" color="accent" disabled={form.processing}>
                 {form.processing ? "Changing..." : "Change password"}
               </Button>
             </div>
-          </fieldset>
-        </section>
+          </Fieldset>
+        </Section>
       </form>
     </SettingsLayout>
   );
diff --git a/app/javascript/pages/Settings/Payments/Show.tsx b/app/javascript/pages/Settings/Payments/Show.tsx
index 2fb7ef4152..b984c30555 100644
--- a/app/javascript/pages/Settings/Payments/Show.tsx
+++ b/app/javascript/pages/Settings/Payments/Show.tsx
@@ -1,5 +1,4 @@
 import { useForm, usePage } from "@inertiajs/react";
-import cx from "classnames";
 import parsePhoneNumberFromString, { CountryCode } from "libphonenumber-js";
 import * as React from "react";
 import { cast } from "ts-safe-cast";
@@ -8,6 +7,7 @@ import { CardPayoutError, prepareCardTokenForPayouts, type CardPayoutToken } fro
 import { SavedCreditCard } from "$app/parsers/card";
 import { SettingPage } from "$app/parsers/settings";
 import type { ComplianceInfo, PayoutMethod, FormFieldName, User, PayoutDebitCardData } from "$app/types/payments";
+import { classNames } from "$app/utils/classNames";
 import { formatPriceCentsWithCurrencySymbol, formatPriceCentsWithoutCurrencySymbol } from "$app/utils/currency";
 import { asyncVoid } from "$app/utils/promise";
 
@@ -32,6 +32,9 @@ import StripeConnectSection, { StripeConnect } from "$app/components/Settings/Pa
 import { Toggle } from "$app/components/Toggle";
 import { TypeSafeOptionSelect } from "$app/components/TypeSafeOptionSelect";
 import { Alert } from "$app/components/ui/Alert";
+import { Fieldset } from "$app/components/ui/Fieldset";
+import { Label } from "$app/components/ui/Label";
+import { Section } from "$app/components/ui/Section";
 import { UpdateCountryConfirmationModal } from "$app/components/UpdateCountryConfirmationModal";
 import { useUserAgentInfo } from "$app/components/UserAgent";
 import { WithTooltip } from "$app/components/WithTooltip";
@@ -723,7 +726,7 @@ export default function PaymentsPage() {
   const payoutThresholdError = form.data.payout_threshold_cents < props.minimum_payout_threshold_cents;
 
   const payoutsPausedToggle = (
-    <fieldset>
+    <Fieldset>
       <Toggle
         value={form.data.payouts_paused_by_user || props.payouts_paused_internally}
         onChange={(value) => form.setData("payouts_paused_by_user", value)}
@@ -732,11 +735,11 @@ export default function PaymentsPage() {
       >
         Pause payouts
       </Toggle>
-      <small>
+      <small className="text-muted">
         By pausing payouts, they won't be processed until you decide to resume them, and your balance will remain in
         your account until then.
       </small>
-    </fieldset>
+    </Fieldset>
   );
 
   return (
@@ -790,10 +793,7 @@ export default function PaymentsPage() {
           </Alert>
         ) : null}
 
-        <section className="p-4! md:p-8!">
-          <header>
-            <h2>Verification</h2>
-          </header>
+        <Section className="p-4! md:p-8!" header={<h2>Verification</h2>}>
           {props.show_verification_section ? (
             <StripeConnectEmbeddedNotificationBanner />
           ) : (
@@ -814,7 +814,7 @@ export default function PaymentsPage() {
               </div>
             </div>
           )}
-        </section>
+        </Section>
 
         {props.aus_backtax_details.show_au_backtax_prompt ? (
           <AusBackTaxesSection
@@ -844,13 +844,10 @@ export default function PaymentsPage() {
             </Alert>
           </div>
         ) : null}
-        <section className="p-4! md:p-8!">
-          <header>
-            <h2>Payout schedule</h2>
-          </header>
+        <Section className="p-4! md:p-8!" header={<h2>Payout schedule</h2>}>
           <section className="flex flex-col gap-4">
-            <fieldset>
-              <label htmlFor="payout_frequency">Schedule</label>
+            <Fieldset>
+              <Label htmlFor="payout_frequency">Schedule</Label>
               <TypeSafeOptionSelect
                 id="payout_frequency"
                 name="Schedule"
@@ -862,11 +859,11 @@ export default function PaymentsPage() {
                   disabled: frequency === "daily" && !props.payout_frequency_daily_supported,
                 }))}
               />
-              <small>
+              <small className="text-muted">
                 Daily payouts are only available for US users with eligible bank accounts and more than 4 previous
                 payouts.
               </small>
-            </fieldset>
+            </Fieldset>
             {form.data.payout_frequency === "daily" && props.payout_frequency_daily_supported ? (
               <Alert role="status" className="info">
                 <div>
@@ -880,8 +877,8 @@ export default function PaymentsPage() {
                 <div>Your account is no longer eligible for daily payouts. Please update your schedule.</div>
               </Alert>
             )}
-            <fieldset className={cx({ danger: payoutThresholdError })}>
-              <label htmlFor="payout_threshold_cents">Minimum payout threshold</label>
+            <Fieldset state={payoutThresholdError ? "danger" : undefined}>
+              <Label htmlFor="payout_threshold_cents">Minimum payout threshold</Label>
               <PriceInput
                 id="payout_threshold_cents"
                 currencyCode="usd"
@@ -895,7 +892,7 @@ export default function PaymentsPage() {
                 hasError={!!payoutThresholdError}
               />
               {payoutThresholdError ? (
-                <small>
+                <small className="text-muted">
                   Your payout threshold must be at least{" "}
                   {formatPriceCentsWithCurrencySymbol("usd", props.minimum_payout_threshold_cents, {
                     symbolFormat: "long",
@@ -903,9 +900,9 @@ export default function PaymentsPage() {
                   .
                 </small>
               ) : (
-                <small>Payouts will only be issued once your balance reaches this amount.</small>
+                <small className="text-muted">Payouts will only be issued once your balance reaches this amount.</small>
               )}
-            </fieldset>
+            </Fieldset>
             {props.payouts_paused_internally ? (
               <WithTooltip
                 tip={
@@ -924,19 +921,27 @@ export default function PaymentsPage() {
               payoutsPausedToggle
             )}
           </section>
-        </section>
+        </Section>
 
-        <section className="p-4! md:p-8!">
-          <header>
-            <h2>Payout method</h2>
-            <div>
-              <a href="/help/article/260-your-payout-settings-page" target="_blank" rel="noreferrer">
-                Any questions about these payout settings?
-              </a>
-            </div>
-          </header>
+        <Section
+          className="p-4! md:p-8!"
+          header={
+            <>
+              <h2>Payout method</h2>
+              <div>
+                <a href="/help/article/260-your-payout-settings-page" target="_blank" rel="noreferrer">
+                  Any questions about these payout settings?
+                </a>
+              </div>
+            </>
+          }
+        >
           <section className="grid gap-8">
-            <div className="radio-buttons" role="radiogroup">
+            <div
+              className="grid gap-4"
+              style={{ gridTemplateColumns: "repeat(auto-fit, minmax(min(15rem, 100%), 1fr))" }}
+              role="radiogroup"
+            >
               {props.bank_account_details.show_bank_account ? (
                 <>
                   <Button
@@ -945,6 +950,11 @@ export default function PaymentsPage() {
                     aria-checked={selectedPayoutMethod === "bank"}
                     onClick={() => updatePayoutMethod("bank")}
                     disabled={props.is_form_disabled}
+                    className={classNames(
+                      "items-start! justify-start! gap-3! text-left transition-transform!",
+                      "hover:translate-x-0! hover:translate-y-0!",
+                      selectedPayoutMethod === "bank" && "-translate-x-1! -translate-y-1! bg-background! shadow!",
+                    )}
                   >
                     <Icon name="bank" />
                     <div>
@@ -958,6 +968,11 @@ export default function PaymentsPage() {
                       aria-checked={selectedPayoutMethod === "card"}
                       onClick={() => updatePayoutMethod("card")}
                       disabled={props.is_form_disabled}
+                      className={classNames(
+                        "items-start! justify-start! gap-3! text-left transition-transform!",
+                        "hover:translate-x-0! hover:translate-y-0!",
+                        selectedPayoutMethod === "card" && "-translate-x-1! -translate-y-1! bg-background! shadow!",
+                      )}
                     >
                       <Icon name="card" />
                       <div>
@@ -974,6 +989,11 @@ export default function PaymentsPage() {
                   aria-checked={selectedPayoutMethod === "paypal"}
                   onClick={() => updatePayoutMethod("paypal")}
                   disabled={props.is_form_disabled}
+                  className={classNames(
+                    "items-start! justify-start! gap-3! text-left transition-transform!",
+                    "hover:translate-x-0! hover:translate-y-0!",
+                    selectedPayoutMethod === "paypal" && "-translate-x-1! -translate-y-1! bg-background! shadow!",
+                  )}
                 >
                   <Icon name="shop-window" />
                   <div>
@@ -990,6 +1010,11 @@ export default function PaymentsPage() {
                   aria-checked={selectedPayoutMethod === "stripe"}
                   onClick={() => updatePayoutMethod("stripe")}
                   disabled={props.is_form_disabled}
+                  className={classNames(
+                    "items-start! justify-start! gap-3! text-left transition-transform!",
+                    "hover:translate-x-0! hover:translate-y-0!",
+                    selectedPayoutMethod === "stripe" && "-translate-x-1! -translate-y-1! bg-background! shadow!",
+                  )}
                 >
                   <Icon name="stripe" />
                   <div>
@@ -1055,7 +1080,7 @@ export default function PaymentsPage() {
               />
             )}
           </section>
-        </section>
+        </Section>
         {props.paypal_connect.show_paypal_connect ? (
           <PayPalConnectSection
             paypalConnect={props.paypal_connect}
diff --git a/app/javascript/pages/Settings/Profile/Show.tsx b/app/javascript/pages/Settings/Profile/Show.tsx
index 05e78dc859..b9a225d3f6 100644
--- a/app/javascript/pages/Settings/Profile/Show.tsx
+++ b/app/javascript/pages/Settings/Profile/Show.tsx
@@ -5,6 +5,7 @@ import { cast } from "ts-safe-cast";
 import { unlinkTwitter } from "$app/data/profile_settings";
 import { CreatorProfile, ProfileSettings } from "$app/parsers/profile";
 import { SettingPage } from "$app/parsers/settings";
+import { classNames } from "$app/utils/classNames";
 import { getContrastColor } from "$app/utils/color";
 import { asyncVoid } from "$app/utils/promise";
 import { assertResponseError } from "$app/utils/request";
@@ -20,6 +21,11 @@ import { showAlert } from "$app/components/server-components/Alert";
 import { Profile, Props as ProfileProps } from "$app/components/server-components/Profile";
 import { Layout as SettingsLayout } from "$app/components/Settings/Layout";
 import { SocialAuthButton } from "$app/components/SocialAuthButton";
+import { Fieldset, Legend } from "$app/components/ui/Fieldset";
+import { Label } from "$app/components/ui/Label";
+import { Input } from "$app/components/ui/Input";
+import { Textarea } from "$app/components/ui/Textarea";
+import { ColorPicker } from "$app/components/ui/ColorPicker";
 
 type ProfilePageProps = {
   profile_settings: ProfileSettings;
@@ -101,15 +107,15 @@ export default function SettingsPage() {
       </Head>
       <WithPreviewSidebar>
         <form>
-          <section className="p-4! md:p-8!">
-            <header>
+          <section className="grid gap-8 p-4 md:p-8">
+            <header className="grid content-start gap-3">
               <h2>Profile</h2>
             </header>
-            <fieldset>
-              <legend>
-                <label htmlFor={`${uid}-username`}>Username</label>
-              </legend>
-              <input
+            <Fieldset>
+              <Legend>
+                <Label htmlFor={`${uid}-username`}>Username</Label>
+              </Legend>
+              <Input
                 id={`${uid}-username`}
                 type="text"
                 disabled={!loggedInUser?.policies.settings_profile.update_username}
@@ -118,15 +124,15 @@ export default function SettingsPage() {
                   updateProfileSettings({ username: evt.target.value.replace(/[^a-z0-9]/giu, "").toLowerCase() })
                 }
               />
-              <small>
+              <small className="text-muted">
                 View your profile at: <a href={`${scheme}://${subdomain}`}>{subdomain}</a>
               </small>
-            </fieldset>
-            <fieldset>
-              <legend>
-                <label htmlFor={`${uid}-name`}>Name</label>
-              </legend>
-              <input
+            </Fieldset>
+            <Fieldset>
+              <Legend>
+                <Label htmlFor={`${uid}-name`}>Name</Label>
+              </Legend>
+              <Input
                 id={`${uid}-name`}
                 type="text"
                 value={profileSettings.name ?? ""}
@@ -136,17 +142,17 @@ export default function SettingsPage() {
                   updateProfileSettings({ name: evt.target.value });
                 }}
               />
-            </fieldset>
-            <fieldset>
-              <legend>
-                <label htmlFor={`${uid}-bio`}>Bio</label>
-              </legend>
-              <textarea
+            </Fieldset>
+            <Fieldset>
+              <Legend>
+                <Label htmlFor={`${uid}-bio`}>Bio</Label>
+              </Legend>
+              <Textarea
                 id={`${uid}-bio`}
                 value={profileSettings.bio ?? ""}
                 onChange={(e) => updateProfileSettings({ bio: e.target.value })}
               />
-            </fieldset>
+            </Fieldset>
             <LogoInput
               logoUrl={creatorProfile.avatar_url}
               onChange={(blob) => {
@@ -160,8 +166,8 @@ export default function SettingsPage() {
               disabled={!canUpdate}
             />
             {loggedInUser?.policies.settings_profile.manage_social_connections ? (
-              <fieldset>
-                <legend>Social links</legend>
+              <Fieldset>
+                <Legend>Social links</Legend>
                 {creatorProfile.twitter_handle ? (
                   <button type="button" className="button button-twitter" onClick={handleUnlinkTwitter}>
                     Disconnect {creatorProfile.twitter_handle} from X
@@ -177,63 +183,65 @@ export default function SettingsPage() {
                     Connect to X
                   </SocialAuthButton>
                 )}
-              </fieldset>
+              </Fieldset>
             ) : null}
           </section>
-          <section className="p-4! md:p-8!">
-            <header>
+          <section className="grid gap-8 border-t border-border p-4 md:p-8">
+            <header className="grid content-start gap-3">
               <h2>Design</h2>
             </header>
-            <fieldset>
-              <legend>Font</legend>
-              <div className="radio-buttons grid-cols-1! sm:grid-cols-2! md:grid-cols-3!" role="radiogroup">
-                {FONT_CHOICES.map((font) => (
-                  <Button
-                    role="radio"
-                    key={font}
-                    aria-checked={font === profileSettings.font}
-                    onClick={() => updateProfileSettings({ font })}
-                    style={{ fontFamily: font === "ABC Favorit" ? undefined : font }}
-                    disabled={!canUpdate}
-                  >
-                    <Icon name="file-earmark-font" />
-                    <div>
-                      <h4>{font}</h4>
-                      {FONT_DESCRIPTIONS[font]}
-                    </div>
-                  </Button>
-                ))}
+            <Fieldset>
+              <Legend>Font</Legend>
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3" role="radiogroup">
+                {FONT_CHOICES.map((font) => {
+                  const isSelected = font === profileSettings.font;
+                  return (
+                    <Button
+                      role="radio"
+                      key={font}
+                      aria-checked={isSelected}
+                      onClick={() => updateProfileSettings({ font })}
+                      style={{ fontFamily: font === "ABC Favorit" ? undefined : font }}
+                      disabled={!canUpdate}
+                      className={classNames(
+                        "items-start! justify-start! gap-3! text-left transition-transform!",
+                        "hover:translate-x-0! hover:translate-y-0!",
+                        isSelected && "-translate-x-1! -translate-y-1! bg-background! shadow!",
+                      )}
+                    >
+                      <Icon name="file-earmark-font" className="shrink-0" />
+                      <div>
+                        <h4 className="font-bold">{font}</h4>
+                        {FONT_DESCRIPTIONS[font]}
+                      </div>
+                    </Button>
+                  );
+                })}
               </div>
-            </fieldset>
+            </Fieldset>
             <div className="flex gap-4">
-              <fieldset>
-                <legend>
-                  <label htmlFor={`${uid}-backgroundColor`}>Background color</label>
-                </legend>
-                <div className="color-picker">
-                  <input
-                    id={`${uid}-backgroundColor`}
-                    value={profileSettings.background_color}
-                    type="color"
-                    onChange={(evt) => updateProfileSettings({ background_color: evt.target.value })}
-                    disabled={!canUpdate}
-                  />
-                </div>
-              </fieldset>
-              <fieldset>
-                <legend>
-                  <label htmlFor={`${uid}-highlightColor`}>Highlight color</label>
-                </legend>
-                <div className="color-picker">
-                  <input
-                    id={`${uid}-highlightColor`}
-                    value={profileSettings.highlight_color}
-                    type="color"
-                    onChange={(evt) => updateProfileSettings({ highlight_color: evt.target.value })}
-                    disabled={!canUpdate}
-                  />
-                </div>
-              </fieldset>
+              <Fieldset>
+                <Legend>
+                  <Label htmlFor={`${uid}-backgroundColor`}>Background color</Label>
+                </Legend>
+                <ColorPicker
+                  id={`${uid}-backgroundColor`}
+                  value={profileSettings.background_color}
+                  onChange={(evt) => updateProfileSettings({ background_color: evt.target.value })}
+                  disabled={!canUpdate}
+                />
+              </Fieldset>
+              <Fieldset>
+                <Legend>
+                  <Label htmlFor={`${uid}-highlightColor`}>Highlight color</Label>
+                </Legend>
+                <ColorPicker
+                  id={`${uid}-highlightColor`}
+                  value={profileSettings.highlight_color}
+                  onChange={(evt) => updateProfileSettings({ highlight_color: evt.target.value })}
+                  disabled={!canUpdate}
+                />
+              </Fieldset>
             </div>
           </section>
         </form>
diff --git a/app/javascript/pages/Settings/Team/Show.tsx b/app/javascript/pages/Settings/Team/Show.tsx
index 2883e384c4..11bc13ff9f 100644
--- a/app/javascript/pages/Settings/Team/Show.tsx
+++ b/app/javascript/pages/Settings/Team/Show.tsx
@@ -1,5 +1,4 @@
 import { usePage, router } from "@inertiajs/react";
-import { cx } from "class-variance-authority";
 import * as React from "react";
 import { GroupBase, SelectInstance } from "react-select";
 import { cast } from "ts-safe-cast";
@@ -31,6 +30,10 @@ import { Layout as SettingsLayout } from "$app/components/Settings/Layout";
 import { Alert } from "$app/components/ui/Alert";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "$app/components/ui/Table";
 import { WithTooltip } from "$app/components/WithTooltip";
+import { Section } from "$app/components/ui/Section";
+import { Fieldset, Legend } from "$app/components/ui/Fieldset";
+import { Label } from "$app/components/ui/Label";
+import { Input } from "$app/components/ui/Input";
 
 const ROLE_TITLES: Record<Role, string> = {
   owner: "Owner",
@@ -129,14 +132,18 @@ const AddTeamMembersSection = ({
   });
 
   return (
-    <section className="p-4! md:p-8!">
-      <header>
-        <h2>Add team members</h2>
-        <div>Invite as many team members as you need to help run this account.</div>
-        <a href="/help/article/326-teams-and-roles" target="_blank" rel="noreferrer">
-          Learn more
-        </a>
-      </header>
+    <Section
+      className="p-4! md:p-8!"
+      header={
+        <>
+          <h2>Add team members</h2>
+          <div>Invite as many team members as you need to help run this account.</div>
+          <a href="/help/article/326-teams-and-roles" target="_blank" rel="noreferrer">
+            Learn more
+          </a>
+        </>
+      }
+    >
       <div
         style={{
           display: "grid",
@@ -144,11 +151,11 @@ const AddTeamMembersSection = ({
           gridTemplateColumns: "repeat(auto-fit, max(var(--dynamic-grid), 50% - var(--spacer-3) / 2))",
         }}
       >
-        <fieldset className={cx({ danger: errors.has("email") })}>
-          <legend>
-            <label htmlFor={emailUID}>Email</label>
-          </legend>
-          <input
+        <Fieldset state={errors.has("email") ? "danger" : undefined}>
+          <Legend>
+            <Label htmlFor={emailUID}>Email</Label>
+          </Legend>
+          <Input
             id={emailUID}
             type="text"
             ref={emailFieldRef}
@@ -160,11 +167,11 @@ const AddTeamMembersSection = ({
               clearError("email");
             }}
           />
-        </fieldset>
-        <fieldset className={cx({ danger: errors.has("role") })}>
-          <legend>
-            <label htmlFor={roleUID}>Role</label>
-          </legend>
+        </Fieldset>
+        <Fieldset state={errors.has("role") ? "danger" : undefined}>
+          <Legend>
+            <Label htmlFor={roleUID}>Role</Label>
+          </Legend>
           <Select
             ref={roleFieldRef}
             inputId={roleUID}
@@ -181,7 +188,7 @@ const AddTeamMembersSection = ({
               }
             }}
           />
-        </fieldset>
+        </Fieldset>
       </div>
       <Button color="primary" className="w-fit" disabled={loading} onClick={onSubmit}>
         {loading ? (
@@ -192,7 +199,7 @@ const AddTeamMembersSection = ({
           "Send invitation"
         )}
       </Button>
-    </section>
+    </Section>
   );
 };
 
@@ -259,10 +266,7 @@ const TeamMembersSection = ({
   };
 
   return (
-    <section className="p-4! md:p-8!">
-      <header>
-        <h2 ref={ref}>Team members</h2>
-      </header>
+    <Section className="p-4! md:p-8!" header={<h2 ref={ref}>Team members</h2>}>
       {deletedMember ? (
         <Alert variant="success">
           <div className="flex flex-col justify-between sm:flex-row">
@@ -389,6 +393,6 @@ const TeamMembersSection = ({
           have access.
         </Modal>
       ) : null}
-    </section>
+    </Section>
   );
 };
diff --git a/app/javascript/pages/Settings/ThirdPartyAnalytics/Show.tsx b/app/javascript/pages/Settings/ThirdPartyAnalytics/Show.tsx
index b8053ad210..5d2d8cc1fc 100644
--- a/app/javascript/pages/Settings/ThirdPartyAnalytics/Show.tsx
+++ b/app/javascript/pages/Settings/ThirdPartyAnalytics/Show.tsx
@@ -13,6 +13,13 @@ import { Layout as SettingsLayout } from "$app/components/Settings/Layout";
 import { TypeSafeOptionSelect } from "$app/components/TypeSafeOptionSelect";
 import { Placeholder } from "$app/components/ui/Placeholder";
 import { Row, RowActions, RowContent, RowDetails, Rows } from "$app/components/ui/Rows";
+import { Section } from "$app/components/ui/Section";
+import { Switch } from "$app/components/ui/Switch";
+import { Fieldset, Legend } from "$app/components/ui/Fieldset";
+import { Label } from "$app/components/ui/Label";
+import { Input } from "$app/components/ui/Input";
+import { Checkbox } from "$app/components/ui/Checkbox";
+import { Textarea } from "$app/components/ui/Textarea";
 
 type Products = { permalink: string; name: string }[];
 
@@ -79,121 +86,117 @@ export default function ThirdPartyAnalyticsPage() {
       canUpdate={Boolean(loggedInUser?.policies.settings_third_party_analytics_user.update) && !form.processing}
     >
       <form>
-        <section className="p-4! md:p-8!">
-          <header>
-            <h2>Third-party analytics</h2>
-            <a href="/help/article/174-third-party-analytics" target="_blank" rel="noreferrer">
-              Learn more
-            </a>
-            <div>
-              You can add a Facebook tracking pixel and link your Google Analytics properties to track your visitors.
-            </div>
-          </header>
+        <Section
+          className="p-4! md:p-8!"
+          header={
+            <>
+              <h2>Third-party analytics</h2>
+              <a href="/help/article/174-third-party-analytics" target="_blank" rel="noreferrer">
+                Learn more
+              </a>
+              <div>
+                You can add a Facebook tracking pixel and link your Google Analytics properties to track your visitors.
+              </div>
+            </>
+          }
+        >
           <Details
             className="toggle"
             open={!thirdPartyAnalytics.disable_third_party_analytics}
             summary={
-              <label>
-                <input
-                  type="checkbox"
-                  role="switch"
-                  checked={!thirdPartyAnalytics.disable_third_party_analytics}
-                  onChange={(evt) => updateThirdPartyAnalytics({ disable_third_party_analytics: !evt.target.checked })}
-                />
-                Enable third-party analytics services
-              </label>
+              <Switch
+                checked={!thirdPartyAnalytics.disable_third_party_analytics}
+                onChange={(evt) => updateThirdPartyAnalytics({ disable_third_party_analytics: !evt.target.checked })}
+                label="Enable third-party analytics services"
+              />
             }
           >
             <div className="dropdown flex flex-col gap-4">
-              <fieldset>
-                <legend>
-                  <label htmlFor={`${uid}googleAnalyticsId`}>Google Analytics Property ID</label>
+              <Fieldset>
+                <Legend>
+                  <Label htmlFor={`${uid}googleAnalyticsId`}>Google Analytics Property ID</Label>
                   <a href="/help/article/174-third-party-analytics" target="_blank" rel="noreferrer">
                     Learn more
                   </a>
-                </legend>
-                <input
+                </Legend>
+                <Input
                   id={`${uid}googleAnalyticsId`}
                   type="text"
                   placeholder="G-ABCD232DSE"
                   value={thirdPartyAnalytics.google_analytics_id}
                   onChange={(evt) => updateThirdPartyAnalytics({ google_analytics_id: evt.target.value })}
                 />
-              </fieldset>
-              <fieldset>
-                <legend>
-                  <label htmlFor={`${uid}facebookPixel`}>Facebook Pixel</label>
+              </Fieldset>
+              <Fieldset>
+                <Legend>
+                  <Label htmlFor={`${uid}facebookPixel`}>Facebook Pixel</Label>
                   <a href="/help/article/174-third-party-analytics" target="_blank" rel="noreferrer">
                     Learn more
                   </a>
-                </legend>
-                <input
+                </Legend>
+                <Input
                   id={`${uid}facebookPixel`}
                   type="text"
                   placeholder="9127380912836192"
                   value={thirdPartyAnalytics.facebook_pixel_id}
                   onChange={(evt) => updateThirdPartyAnalytics({ facebook_pixel_id: evt.target.value })}
                 />
-              </fieldset>
-              <label>
-                <input
-                  type="checkbox"
+              </Fieldset>
+              <Label>
+                <Checkbox
                   checked={!thirdPartyAnalytics.skip_free_sale_analytics}
                   onChange={(evt) => updateThirdPartyAnalytics({ skip_free_sale_analytics: !evt.target.checked })}
                 />
                 Send 'Purchase' events for free ($0) sales
-              </label>
+              </Label>
             </div>
           </Details>
-        </section>
-        <section className="p-4! md:p-8!">
-          <header>
-            <h2>Domain verification</h2>
-          </header>
+        </Section>
+        <Section className="p-4! md:p-8!" header={<h2>Domain verification</h2>}>
           <Details
             className="toggle"
             open={thirdPartyAnalytics.enable_verify_domain_third_party_services}
             summary={
-              <label>
-                <input
-                  type="checkbox"
-                  role="switch"
-                  checked={thirdPartyAnalytics.enable_verify_domain_third_party_services}
-                  onChange={(evt) =>
-                    updateThirdPartyAnalytics({ enable_verify_domain_third_party_services: evt.target.checked })
-                  }
-                />
-                Verify domain in third-party services
-              </label>
+              <Switch
+                checked={thirdPartyAnalytics.enable_verify_domain_third_party_services}
+                onChange={(evt) =>
+                  updateThirdPartyAnalytics({ enable_verify_domain_third_party_services: evt.target.checked })
+                }
+                label="Verify domain in third-party services"
+              />
             }
           >
             <div className="dropdown flex flex-col gap-4">
-              <fieldset>
-                <legend>
-                  <label htmlFor={`${uid}facebookMetaTag`}>Facebook Business</label>
+              <Fieldset>
+                <Legend>
+                  <Label htmlFor={`${uid}facebookMetaTag`}>Facebook Business</Label>
                   <a href="/help/article/290-facebook-domain-verification" target="_blank" rel="noreferrer">
                     Learn more
                   </a>
-                </legend>
-                <textarea
+                </Legend>
+                <Textarea
                   id={`${uid}facebookMetaTag`}
                   placeholder='<meta name="facebook-domain-verification" content="me2vv6lgwoh" />'
                   value={thirdPartyAnalytics.facebook_meta_tag}
                   onChange={(evt) => updateThirdPartyAnalytics({ facebook_meta_tag: evt.target.value })}
                 />
-                <small>Enter meta tag containing the Facebook domain verification code.</small>
-              </fieldset>
+                <small className="text-muted">Enter meta tag containing the Facebook domain verification code.</small>
+              </Fieldset>
             </div>
           </Details>
-        </section>
-        <section className="p-4! md:p-8!">
-          <header>
-            <h2>Snippets</h2>
-            <div>Add custom JavaScript to pages in the checkout flow.</div>
-            <a href="/help/article/174-third-party-analytics" target="_blank" rel="noreferrer">
-              Learn more
-            </a>
-          </header>
+        </Section>
+        <Section
+          className="p-4! md:p-8!"
+          header={
+            <>
+              <h2>Snippets</h2>
+              <div>Add custom JavaScript to pages in the checkout flow.</div>
+              <a href="/help/article/174-third-party-analytics" target="_blank" rel="noreferrer">
+                Learn more
+              </a>
+            </>
+          }
+        >
           {thirdPartyAnalytics.snippets.length > 0 ? (
             <>
               <Rows role="list">
@@ -212,7 +215,7 @@ export default function ThirdPartyAnalyticsPage() {
           ) : (
             <Placeholder>{addSnippetButton}</Placeholder>
           )}
-        </section>
+        </Section>
       </form>
     </SettingsLayout>
   );
@@ -281,17 +284,17 @@ const SnippetRow = ({
       </RowActions>
       {expanded ? (
         <RowDetails className="flex flex-col gap-4">
-          <fieldset>
-            <label htmlFor={`${uid}name`}>Name</label>
-            <input
+          <Fieldset>
+            <Label htmlFor={`${uid}name`}>Name</Label>
+            <Input
               id={`${uid}name`}
               type="text"
               value={snippet.name}
               onChange={(evt) => updateSnippet({ name: evt.target.value })}
             />
-          </fieldset>
-          <fieldset>
-            <label htmlFor={`${uid}location`}>Location</label>
+          </Fieldset>
+          <Fieldset>
+            <Label htmlFor={`${uid}location`}>Location</Label>
             <TypeSafeOptionSelect
               id={`${uid}location`}
               value={snippet.location}
@@ -301,9 +304,9 @@ const SnippetRow = ({
                 label: LOCATION_TITLES[location] ?? "Receipt",
               }))}
             />
-          </fieldset>
-          <fieldset>
-            <label htmlFor={`${uid}product`}>Products</label>
+          </Fieldset>
+          <Fieldset>
+            <Label htmlFor={`${uid}product`}>Products</Label>
             <TypeSafeOptionSelect
               id={`${uid}product`}
               value={snippet.product ?? ""}
@@ -316,16 +319,16 @@ const SnippetRow = ({
                 })),
               ]}
             />
-          </fieldset>
-          <fieldset>
-            <label htmlFor={`${uid}code`}>Code</label>
-            <textarea
+          </Fieldset>
+          <Fieldset>
+            <Label htmlFor={`${uid}code`}>Code</Label>
+            <Textarea
               id={`${uid}code`}
               placeholder="Enter your analytics code"
               value={snippet.code}
               onChange={(evt) => updateSnippet({ code: evt.target.value })}
             />
-          </fieldset>
+          </Fieldset>
         </RowDetails>
       ) : null}
     </Row>

From 4248456a07686763bcc0d731c39266eff01a3c69 Mon Sep 17 00:00:00 2001
From: Salman Najah <salmannajah123@gmail.com>
Date: Sun, 1 Feb 2026 10:36:01 +0530
Subject: [PATCH 2/7] eslint

---
 app/javascript/pages/Settings/Main/Show.tsx            |  6 +++---
 app/javascript/pages/Settings/Payments/Show.tsx        |  2 +-
 .../pages/Settings/ThirdPartyAnalytics/Show.tsx        | 10 +++++-----
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/app/javascript/pages/Settings/Main/Show.tsx b/app/javascript/pages/Settings/Main/Show.tsx
index 9f84f866f4..fedcf621fe 100644
--- a/app/javascript/pages/Settings/Main/Show.tsx
+++ b/app/javascript/pages/Settings/Main/Show.tsx
@@ -16,15 +16,15 @@ import { Layout } from "$app/components/Settings/Layout";
 import { TagInput } from "$app/components/TagInput";
 import { Checkbox } from "$app/components/ui/Checkbox";
 import { Fieldset, FieldsetTitle } from "$app/components/ui/Fieldset";
+import { FormSection } from "$app/components/ui/FormSection";
 import { Input } from "$app/components/ui/Input";
 import { InputGroup } from "$app/components/ui/InputGroup";
 import { Label } from "$app/components/ui/Label";
-import { Select } from "$app/components/ui/Select";
-import { Textarea } from "$app/components/ui/Textarea";
 import { Pill } from "$app/components/ui/Pill";
-import { FormSection } from "$app/components/ui/FormSection";
+import { Select } from "$app/components/ui/Select";
 import { Switch } from "$app/components/ui/Switch";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "$app/components/ui/Table";
+import { Textarea } from "$app/components/ui/Textarea";
 
 type ProductLevelSupportEmail = {
   email: string;
diff --git a/app/javascript/pages/Settings/Payments/Show.tsx b/app/javascript/pages/Settings/Payments/Show.tsx
index 8de6db078a..87999078f4 100644
--- a/app/javascript/pages/Settings/Payments/Show.tsx
+++ b/app/javascript/pages/Settings/Payments/Show.tsx
@@ -32,8 +32,8 @@ import StripeConnectSection, { StripeConnect } from "$app/components/Settings/Pa
 import { TypeSafeOptionSelect } from "$app/components/TypeSafeOptionSelect";
 import { Alert } from "$app/components/ui/Alert";
 import { Fieldset } from "$app/components/ui/Fieldset";
-import { Label } from "$app/components/ui/Label";
 import { FormSection } from "$app/components/ui/FormSection";
+import { Label } from "$app/components/ui/Label";
 import { Switch } from "$app/components/ui/Switch";
 import { UpdateCountryConfirmationModal } from "$app/components/UpdateCountryConfirmationModal";
 import { useUserAgentInfo } from "$app/components/UserAgent";
diff --git a/app/javascript/pages/Settings/ThirdPartyAnalytics/Show.tsx b/app/javascript/pages/Settings/ThirdPartyAnalytics/Show.tsx
index 0d30879245..df6fce2ac1 100644
--- a/app/javascript/pages/Settings/ThirdPartyAnalytics/Show.tsx
+++ b/app/javascript/pages/Settings/ThirdPartyAnalytics/Show.tsx
@@ -12,14 +12,14 @@ import { Icon } from "$app/components/Icons";
 import { useLoggedInUser } from "$app/components/LoggedInUser";
 import { Layout as SettingsLayout } from "$app/components/Settings/Layout";
 import { TypeSafeOptionSelect } from "$app/components/TypeSafeOptionSelect";
+import { Checkbox } from "$app/components/ui/Checkbox";
+import { Fieldset, FieldsetTitle } from "$app/components/ui/Fieldset";
+import { FormSection } from "$app/components/ui/FormSection";
+import { Input } from "$app/components/ui/Input";
+import { Label } from "$app/components/ui/Label";
 import { Placeholder } from "$app/components/ui/Placeholder";
 import { Row, RowActions, RowContent, RowDetails, Rows } from "$app/components/ui/Rows";
-import { FormSection } from "$app/components/ui/FormSection";
 import { Switch } from "$app/components/ui/Switch";
-import { Fieldset, FieldsetTitle } from "$app/components/ui/Fieldset";
-import { Label } from "$app/components/ui/Label";
-import { Input } from "$app/components/ui/Input";
-import { Checkbox } from "$app/components/ui/Checkbox";
 import { Textarea } from "$app/components/ui/Textarea";
 
 type Products = { permalink: string; name: string }[];

From 0f4a06c4ef8816b4a928710e1cbf10431ac29f20 Mon Sep 17 00:00:00 2001
From: Salman Najah <salmannajah123@gmail.com>
Date: Sun, 1 Feb 2026 11:07:47 +0530
Subject: [PATCH 3/7] fix

---
 .../components/Checkout/CreditCardInput.tsx   |   6 +-
 app/javascript/components/CustomDomain.tsx    |   7 +-
 .../AdvancedPage/AccountDeletionSection.tsx   |   6 +-
 .../Settings/AdvancedPage/ApplicationForm.tsx |  26 +-
 .../AdvancedPage/ApplicationsSection.tsx      |   6 +-
 .../AdvancedPage/BlockEmailsSection.tsx       |  12 +-
 .../Settings/AdvancedPage/CreditCardForm.tsx  |   6 +-
 .../AdvancedPage/CustomDomainSection.tsx      |   6 +-
 .../NotificationEndpointSection.tsx           |  13 +-
 .../ProductLevelSupportEmailsForm.tsx         |   6 +-
 .../PaymentsPage/AccountDetailsSection.tsx    | 294 +++++++-------
 .../PaymentsPage/AusBackTaxesSection.tsx      |   6 +-
 .../PaymentsPage/BankAccountSection.tsx       | 374 +++++++++---------
 .../PaymentsPage/PayPalConnectSection.tsx     |  12 +-
 .../PaymentsPage/PayPalEmailSection.tsx       |   6 +-
 .../PaymentsPage/StripeConnectSection.tsx     |   6 +-
 .../pages/Oauth/Applications/Edit.tsx         |   6 +-
 .../pages/Settings/Password/Show.tsx          |  16 +-
 .../pages/Settings/Profile/Show.tsx           |  30 +-
 app/javascript/pages/Settings/Team/Show.tsx   |  24 +-
 20 files changed, 433 insertions(+), 435 deletions(-)

diff --git a/app/javascript/components/Checkout/CreditCardInput.tsx b/app/javascript/components/Checkout/CreditCardInput.tsx
index d370e03a10..41b4d2014d 100644
--- a/app/javascript/components/Checkout/CreditCardInput.tsx
+++ b/app/javascript/components/Checkout/CreditCardInput.tsx
@@ -8,7 +8,7 @@ import { getCssVariable } from "$app/utils/styles";
 
 import { useFont } from "$app/components/DesignSettings";
 import { Icon } from "$app/components/Icons";
-import { Fieldset, Legend } from "$app/components/ui/Fieldset";
+import { Fieldset, FieldsetTitle } from "$app/components/ui/Fieldset";
 import { InputGroup } from "$app/components/ui/InputGroup";
 import { Label } from "$app/components/ui/Label";
 
@@ -35,7 +35,7 @@ export const CreditCardInput = ({
 
   return (
     <Fieldset state={invalid ? "danger" : undefined}>
-      <Legend>
+      <FieldsetTitle>
         <Label>Card information</Label>
         {savedCreditCard ? (
           <button
@@ -46,7 +46,7 @@ export const CreditCardInput = ({
             {useSavedCard ? "Use a different card?" : "Use saved card"}
           </button>
         ) : null}
-      </Legend>
+      </FieldsetTitle>
       {savedCreditCard && useSavedCard ? (
         <InputGroup readOnly aria-label="Saved credit card">
           <Icon name="outline-credit-card" />
diff --git a/app/javascript/components/CustomDomain.tsx b/app/javascript/components/CustomDomain.tsx
index e66e85b03e..bb6be18261 100644
--- a/app/javascript/components/CustomDomain.tsx
+++ b/app/javascript/components/CustomDomain.tsx
@@ -5,7 +5,7 @@ import { asyncVoid } from "$app/utils/promise";
 import { assertResponseError, request, ResponseError } from "$app/utils/request";
 
 import { Button } from "$app/components/Button";
-import { Fieldset, Legend } from "$app/components/ui/Fieldset";
+import { Fieldset, FieldsetTitle } from "$app/components/ui/Fieldset";
 import { Input } from "$app/components/ui/Input";
 import { InputGroup } from "$app/components/ui/InputGroup";
 import { Label } from "$app/components/ui/Label";
@@ -75,17 +75,16 @@ const CustomDomain = ({
         verificationInfo.state === "success" ? "success" : verificationInfo.state === "failure" ? "danger" : undefined
       }
     >
-      <Legend>
+      <FieldsetTitle>
         <Label htmlFor={uid}>{label}</Label>
         {includeLearnMoreLink ? (
           <a href="/help/article/153-setting-up-a-custom-domain" target="_blank" rel="noreferrer">
             Learn more
           </a>
         ) : null}
-      </Legend>
+      </FieldsetTitle>
       <InputGroup>
         <Input
-          asChild
           id={uid}
           placeholder="yourdomain.com"
           type="text"
diff --git a/app/javascript/components/Settings/AdvancedPage/AccountDeletionSection.tsx b/app/javascript/components/Settings/AdvancedPage/AccountDeletionSection.tsx
index 7499edf4f0..9636f6cd7d 100644
--- a/app/javascript/components/Settings/AdvancedPage/AccountDeletionSection.tsx
+++ b/app/javascript/components/Settings/AdvancedPage/AccountDeletionSection.tsx
@@ -6,7 +6,7 @@ import { assertResponseError, request, ResponseError } from "$app/utils/request"
 import { Button } from "$app/components/Button";
 import { Modal } from "$app/components/Modal";
 import { showAlert } from "$app/components/server-components/Alert";
-import { Section } from "$app/components/ui/Section";
+import { FormSection } from "$app/components/ui/FormSection";
 
 type Props = {
   formatted_balance_to_forfeit_on_account_deletion: string | null;
@@ -33,7 +33,7 @@ const AccountDeletionSection = (props: Props) => {
   };
 
   return (
-    <Section className="p-4! md:p-8!" header={<h2>Danger Zone</h2>}>
+    <FormSection className="p-4! md:p-8!" header={<h2>Danger Zone</h2>}>
       <p>
         <a href="/help/article/37-how-to-delete-your-gumroad-account" target="_blank" rel="noreferrer">
           Deleting your account
@@ -82,7 +82,7 @@ const AccountDeletionSection = (props: Props) => {
           .
         </p>
       </Modal>
-    </Section>
+    </FormSection>
   );
 };
 
diff --git a/app/javascript/components/Settings/AdvancedPage/ApplicationForm.tsx b/app/javascript/components/Settings/AdvancedPage/ApplicationForm.tsx
index d89e8b2987..36eb91269e 100644
--- a/app/javascript/components/Settings/AdvancedPage/ApplicationForm.tsx
+++ b/app/javascript/components/Settings/AdvancedPage/ApplicationForm.tsx
@@ -11,7 +11,7 @@ import { assertResponseError, request, ResponseError } from "$app/utils/request"
 
 import { Button } from "$app/components/Button";
 import { showAlert } from "$app/components/server-components/Alert";
-import { Fieldset, Legend } from "$app/components/ui/Fieldset";
+import { Fieldset, FieldsetTitle } from "$app/components/ui/Fieldset";
 import { Input } from "$app/components/ui/Input";
 import { Label } from "$app/components/ui/Label";
 import { WithTooltip } from "$app/components/WithTooltip";
@@ -134,9 +134,9 @@ const ApplicationForm = ({ application }: { application?: Application }) => {
         onChange={handleIconChange}
       />
       <Fieldset>
-        <Legend>
+        <FieldsetTitle>
           <Label>Application icon</Label>
-        </Legend>
+        </FieldsetTitle>
         <div style={{ display: "flex", gap: "var(--spacer-4)", alignItems: "flex-start" }}>
           <img className="application-icon" src={icon?.url || placeholderAppIcon} width={80} height={80} />
           <Button onClick={() => iconInputRef.current?.click()} disabled={isUploadingIcon || isSubmitting}>
@@ -145,9 +145,9 @@ const ApplicationForm = ({ application }: { application?: Application }) => {
         </div>
       </Fieldset>
       <Fieldset state={name.error ? "danger" : undefined}>
-        <Legend>
+        <FieldsetTitle>
           <Label htmlFor={`${uid}-name`}>Application name</Label>
-        </Legend>
+        </FieldsetTitle>
         <Input
           id={`${uid}-name`}
           ref={nameRef}
@@ -158,9 +158,9 @@ const ApplicationForm = ({ application }: { application?: Application }) => {
         />
       </Fieldset>
       <Fieldset state={redirectUri.error ? "danger" : undefined}>
-        <Legend>
+        <FieldsetTitle>
           <Label htmlFor={`${uid}-redirectUri`}>Redirect URI</Label>
-        </Legend>
+        </FieldsetTitle>
         <Input
           id={`${uid}-redirectUri`}
           ref={redirectUriRef}
@@ -175,28 +175,28 @@ const ApplicationForm = ({ application }: { application?: Application }) => {
       {application ? (
         <>
           <Fieldset>
-            <Legend>
+            <FieldsetTitle>
               <Label htmlFor={`${uid}-uid`}>Application ID</Label>
-            </Legend>
+            </FieldsetTitle>
             <Input id={`${uid}-uid`} readOnly type="text" value={application.uid} />
           </Fieldset>
           <Fieldset>
-            <Legend>
+            <FieldsetTitle>
               <Label htmlFor={`${uid}-secret`}>Application Secret</Label>
-            </Legend>
+            </FieldsetTitle>
             <Input id={`${uid}-secret`} readOnly type="text" value={application.secret} />
           </Fieldset>
 
           {token ? (
             <Fieldset>
-              <Legend>
+              <FieldsetTitle>
                 <Label htmlFor={`${uid}-accessToken`}>
                   Access Token
                   <WithTooltip tip="This is a ready-to-use access token for our API.">
                     <span>(?)</span>
                   </WithTooltip>
                 </Label>
-              </Legend>
+              </FieldsetTitle>
               <Input id={`${uid}-accessToken`} readOnly type="text" value={token} />
             </Fieldset>
           ) : null}
diff --git a/app/javascript/components/Settings/AdvancedPage/ApplicationsSection.tsx b/app/javascript/components/Settings/AdvancedPage/ApplicationsSection.tsx
index 329673b30b..aead12c518 100644
--- a/app/javascript/components/Settings/AdvancedPage/ApplicationsSection.tsx
+++ b/app/javascript/components/Settings/AdvancedPage/ApplicationsSection.tsx
@@ -5,7 +5,7 @@ import * as React from "react";
 import { Button } from "$app/components/Button";
 import { showAlert } from "$app/components/server-components/Alert";
 import ApplicationForm from "$app/components/Settings/AdvancedPage/ApplicationForm";
-import { Section } from "$app/components/ui/Section";
+import { FormSection } from "$app/components/ui/FormSection";
 import { Row, RowActions, RowContent, Rows } from "$app/components/ui/Rows";
 
 export type Application = {
@@ -78,7 +78,7 @@ const ApplicationRow = ({ application, onRemove }: { application: Application; o
 };
 
 const ApplicationsSection = (props: { applications: Application[] }) => (
-  <Section
+  <FormSection
     className="p-4! md:p-8!"
     header={
       <>
@@ -91,6 +91,6 @@ const ApplicationsSection = (props: { applications: Application[] }) => (
   >
     <CreateApplication />
     <ApplicationList applications={props.applications} />
-  </Section>
+  </FormSection>
 );
 export default ApplicationsSection;
diff --git a/app/javascript/components/Settings/AdvancedPage/BlockEmailsSection.tsx b/app/javascript/components/Settings/AdvancedPage/BlockEmailsSection.tsx
index 91fdfe2e7b..0efab7369a 100644
--- a/app/javascript/components/Settings/AdvancedPage/BlockEmailsSection.tsx
+++ b/app/javascript/components/Settings/AdvancedPage/BlockEmailsSection.tsx
@@ -2,9 +2,9 @@ import * as React from "react";
 
 import { isValidEmail } from "$app/utils/email";
 
-import { Fieldset, Legend } from "$app/components/ui/Fieldset";
+import { Fieldset, FieldsetTitle } from "$app/components/ui/Fieldset";
+import { FormSection } from "$app/components/ui/FormSection";
 import { Label } from "$app/components/ui/Label";
-import { Section } from "$app/components/ui/Section";
 import { Textarea } from "$app/components/ui/Textarea";
 
 type Props = {
@@ -44,7 +44,7 @@ const BlockEmailsSection = ({ blockedEmails, setBlockedEmails }: Props) => {
   };
 
   return (
-    <Section
+    <FormSection
       className="p-4! md:p-8!"
       header={
         <>
@@ -56,9 +56,9 @@ const BlockEmailsSection = ({ blockedEmails, setBlockedEmails }: Props) => {
       }
     >
       <Fieldset>
-        <Legend>
+        <FieldsetTitle>
           <Label htmlFor={uid}>Block emails from purchasing</Label>
-        </Legend>
+        </FieldsetTitle>
         <Textarea
           id={uid}
           placeholder={["name@example.com", "name@example.net", "name@example.org"].join("\n")}
@@ -69,7 +69,7 @@ const BlockEmailsSection = ({ blockedEmails, setBlockedEmails }: Props) => {
         />
         <small className="text-muted">Please enter each email address on a new line.</small>
       </Fieldset>
-    </Section>
+    </FormSection>
   );
 };
 
diff --git a/app/javascript/components/Settings/AdvancedPage/CreditCardForm.tsx b/app/javascript/components/Settings/AdvancedPage/CreditCardForm.tsx
index 56b529f0aa..3b10feb405 100644
--- a/app/javascript/components/Settings/AdvancedPage/CreditCardForm.tsx
+++ b/app/javascript/components/Settings/AdvancedPage/CreditCardForm.tsx
@@ -8,8 +8,8 @@ import { assertResponseError, request, ResponseError } from "$app/utils/request"
 import { Button } from "$app/components/Button";
 import { Icon } from "$app/components/Icons";
 import { showAlert } from "$app/components/server-components/Alert";
+import { FormSection } from "$app/components/ui/FormSection";
 import { InputGroup } from "$app/components/ui/InputGroup";
-import { Section } from "$app/components/ui/Section";
 import { WithTooltip } from "$app/components/WithTooltip";
 
 type Props = {
@@ -38,7 +38,7 @@ export const CreditCardForm = ({ card, can_remove, read_only }: Props) => {
   });
 
   return status === "removed" ? null : (
-    <Section
+    <FormSection
       className="p-4! md:p-8!"
       header={
         <>
@@ -70,7 +70,7 @@ export const CreditCardForm = ({ card, can_remove, read_only }: Props) => {
           </WithTooltip>
         )}
       </div>
-    </Section>
+    </FormSection>
   );
 };
 
diff --git a/app/javascript/components/Settings/AdvancedPage/CustomDomainSection.tsx b/app/javascript/components/Settings/AdvancedPage/CustomDomainSection.tsx
index 4ecbbdfba0..7d3b82cfec 100644
--- a/app/javascript/components/Settings/AdvancedPage/CustomDomainSection.tsx
+++ b/app/javascript/components/Settings/AdvancedPage/CustomDomainSection.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 
 import CustomDomain from "$app/components/CustomDomain";
-import { Section } from "$app/components/ui/Section";
+import { FormSection } from "$app/components/ui/FormSection";
 
 const CustomDomainSection = ({
   verificationStatus,
@@ -12,7 +12,7 @@ const CustomDomainSection = ({
   customDomain: string;
   setCustomDomain: (val: string) => void;
 }) => (
-  <Section
+  <FormSection
     className="p-4! md:p-8!"
     header={
       <>
@@ -29,7 +29,7 @@ const CustomDomainSection = ({
       setCustomDomain={setCustomDomain}
       label="Domain"
     />
-  </Section>
+  </FormSection>
 );
 
 export default CustomDomainSection;
diff --git a/app/javascript/components/Settings/AdvancedPage/NotificationEndpointSection.tsx b/app/javascript/components/Settings/AdvancedPage/NotificationEndpointSection.tsx
index 3f87918b20..580a36fd81 100644
--- a/app/javascript/components/Settings/AdvancedPage/NotificationEndpointSection.tsx
+++ b/app/javascript/components/Settings/AdvancedPage/NotificationEndpointSection.tsx
@@ -6,11 +6,11 @@ import { assertResponseError, request, ResponseError } from "$app/utils/request"
 
 import { Button } from "$app/components/Button";
 import { showAlert } from "$app/components/server-components/Alert";
-import { Fieldset, Legend } from "$app/components/ui/Fieldset";
+import { Fieldset, FieldsetTitle } from "$app/components/ui/Fieldset";
+import { FormSection } from "$app/components/ui/FormSection";
 import { Input } from "$app/components/ui/Input";
 import { InputGroup } from "$app/components/ui/InputGroup";
 import { Label } from "$app/components/ui/Label";
-import { Section } from "$app/components/ui/Section";
 import { Pill } from "$app/components/ui/Pill";
 import { WithTooltip } from "$app/components/WithTooltip";
 
@@ -53,7 +53,7 @@ const NotificationEndpointSection = ({
   });
 
   return (
-    <Section
+    <FormSection
       className="p-4! md:p-8!"
       header={
         <>
@@ -65,12 +65,11 @@ const NotificationEndpointSection = ({
       }
     >
       <Fieldset>
-        <Legend>
+        <FieldsetTitle>
           <Label htmlFor={uid}>Ping endpoint</Label>
-        </Legend>
+        </FieldsetTitle>
         <InputGroup>
           <Input
-            asChild
             placeholder="Ping endpoint"
             type="url"
             id={uid}
@@ -87,7 +86,7 @@ const NotificationEndpointSection = ({
         </InputGroup>
         <small className="text-muted">For external services, your `seller_id` is {userId}</small>
       </Fieldset>
-    </Section>
+    </FormSection>
   );
 };
 
diff --git a/app/javascript/components/Settings/AdvancedPage/ProductLevelSupportEmailsForm.tsx b/app/javascript/components/Settings/AdvancedPage/ProductLevelSupportEmailsForm.tsx
index 91fa8bf8ea..e0a4a8f21e 100644
--- a/app/javascript/components/Settings/AdvancedPage/ProductLevelSupportEmailsForm.tsx
+++ b/app/javascript/components/Settings/AdvancedPage/ProductLevelSupportEmailsForm.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 import { Button } from "$app/components/Button";
 import { Icon } from "$app/components/Icons";
 import { TagInput } from "$app/components/TagInput";
-import { Fieldset, Legend } from "$app/components/ui/Fieldset";
+import { Fieldset, FieldsetTitle } from "$app/components/ui/Fieldset";
 import { Input } from "$app/components/ui/Input";
 import { Label } from "$app/components/ui/Label";
 import { Placeholder } from "$app/components/ui/Placeholder";
@@ -92,9 +92,9 @@ const ProductLevelSupportEmailRow = React.memo(
               <small className="text-muted">This reply-to email will appear on receipts for selected products.</small>
             </Fieldset>
             <Fieldset>
-              <Legend>
+              <FieldsetTitle>
                 <Label htmlFor={`${uid}-products`}>Products</Label>
-              </Legend>
+              </FieldsetTitle>
               <TagInput
                 inputId={`${uid}-products`}
                 tagIds={supportEmail.product_ids}
diff --git a/app/javascript/components/Settings/PaymentsPage/AccountDetailsSection.tsx b/app/javascript/components/Settings/PaymentsPage/AccountDetailsSection.tsx
index de2d0ed88f..b5f7bac8fb 100644
--- a/app/javascript/components/Settings/PaymentsPage/AccountDetailsSection.tsx
+++ b/app/javascript/components/Settings/PaymentsPage/AccountDetailsSection.tsx
@@ -8,7 +8,7 @@ import { classNames } from "$app/utils/classNames";
 import { Button } from "$app/components/Button";
 import { Icon } from "$app/components/Icons";
 import { Checkbox } from "$app/components/ui/Checkbox";
-import { Fieldset, Legend } from "$app/components/ui/Fieldset";
+import { Fieldset, FieldsetTitle } from "$app/components/ui/Fieldset";
 import { Input } from "$app/components/ui/Input";
 import { Label } from "$app/components/ui/Label";
 import { Select } from "$app/components/ui/Select";
@@ -58,10 +58,10 @@ const AccountDetailsSection = ({
       {(complianceInfo.is_business ? complianceInfo.business_country !== "AE" : complianceInfo.country !== "AE") ? (
         <section>
           <Fieldset>
-            <Legend>
+            <FieldsetTitle>
               <Label>Account type</Label>
               <a href="/help/article/260-your-payout-settings-page">What type of account should I choose?</a>
-            </Legend>
+            </FieldsetTitle>
           </Fieldset>
           <div
             className="grid gap-4"
@@ -122,9 +122,9 @@ const AccountDetailsSection = ({
             }}
           >
             <Fieldset state={errorFieldNames.has("business_name") ? "danger" : undefined}>
-              <Legend>
+              <FieldsetTitle>
                 <Label htmlFor={`${uid}-business-legal-name`}>Legal business name</Label>
-              </Legend>
+              </FieldsetTitle>
               <Input
                 id={`${uid}-business-legal-name`}
                 placeholder="Acme"
@@ -136,9 +136,9 @@ const AccountDetailsSection = ({
               />
             </Fieldset>
             <Fieldset state={errorFieldNames.has("business_type") ? "danger" : undefined}>
-              <Legend>
+              <FieldsetTitle>
                 <Label htmlFor={`${uid}-business-type`}>Type</Label>
-              </Legend>
+              </FieldsetTitle>
               {complianceInfo.business_country === "AE" ? (
                 <Select
                   id={`${uid}-business-type`}
@@ -209,9 +209,9 @@ const AccountDetailsSection = ({
           {complianceInfo.business_country === "JP" ? (
             <div style={{ display: "grid", gap: "var(--spacer-5)", gridAutoFlow: "column", gridAutoColumns: "1fr" }}>
               <Fieldset state={errorFieldNames.has("business_name_kanji") ? "danger" : undefined}>
-                <Legend>
+                <FieldsetTitle>
                   <Label htmlFor={`${uid}-business-name-kanji`}>Business Name (Kanji)</Label>
-                </Legend>
+                </FieldsetTitle>
                 <Input
                   id={`${uid}-business-name-kanji`}
                   type="text"
@@ -224,9 +224,9 @@ const AccountDetailsSection = ({
                 />
               </Fieldset>
               <Fieldset state={errorFieldNames.has("business_name_kana") ? "danger" : undefined}>
-                <Legend>
+                <FieldsetTitle>
                   <Label htmlFor={`${uid}-business-name-kana`}>Legal Business Name (Kana)</Label>
-                </Legend>
+                </FieldsetTitle>
                 <Input
                   id={`${uid}-business-name-kana`}
                   type="text"
@@ -243,9 +243,9 @@ const AccountDetailsSection = ({
           {complianceInfo.business_country === "JP" ? (
             <div style={{ display: "grid", gap: "var(--spacer-5)", gridAutoFlow: "column", gridAutoColumns: "1fr" }}>
               <Fieldset state={errorFieldNames.has("business_building_number") ? "danger" : undefined}>
-                <Legend>
+                <FieldsetTitle>
                   <Label htmlFor={`${uid}-business-building-number`}>Business Block / Building Number</Label>
-                </Legend>
+                </FieldsetTitle>
                 <Input
                   id={`${uid}-business-building-number`}
                   type="text"
@@ -258,9 +258,9 @@ const AccountDetailsSection = ({
                 />
               </Fieldset>
               <Fieldset state={errorFieldNames.has("business_street_address_kanji") ? "danger" : undefined}>
-                <Legend>
+                <FieldsetTitle>
                   <Label htmlFor={`${uid}-business-street-address-kanji`}>Business Street Address (Kanji)</Label>
-                </Legend>
+                </FieldsetTitle>
                 <Input
                   id={`${uid}-business-street-address-kanji`}
                   type="text"
@@ -273,9 +273,9 @@ const AccountDetailsSection = ({
                 />
               </Fieldset>
               <Fieldset state={errorFieldNames.has("business_street_address_kana") ? "danger" : undefined}>
-                <Legend>
+                <FieldsetTitle>
                   <Label htmlFor={`${uid}-business-street-address-kana`}>Business Street Address (Kana)</Label>
-                </Legend>
+                </FieldsetTitle>
                 <Input
                   id={`${uid}-business-street-address-kana`}
                   type="text"
@@ -290,9 +290,9 @@ const AccountDetailsSection = ({
             </div>
           ) : (
             <Fieldset state={errorFieldNames.has("business_street_address") ? "danger" : undefined}>
-              <Legend>
+              <FieldsetTitle>
                 <Label htmlFor={`${uid}-business-street-address`}>Address</Label>
-              </Legend>
+              </FieldsetTitle>
               <Input
                 id={`${uid}-business-street-address`}
                 placeholder="123 smith street"
@@ -311,9 +311,9 @@ const AccountDetailsSection = ({
             }}
           >
             <Fieldset state={errorFieldNames.has("business_city") ? "danger" : undefined}>
-              <Legend>
+              <FieldsetTitle>
                 <Label htmlFor={`${uid}-business-city`}>City</Label>
-              </Legend>
+              </FieldsetTitle>
               <Input
                 id={`${uid}-business-city`}
                 placeholder="Springfield"
@@ -325,9 +325,9 @@ const AccountDetailsSection = ({
             </Fieldset>
             {complianceInfo.business_country === "US" ? (
               <Fieldset state={errorFieldNames.has("business_state") ? "danger" : undefined}>
-                <Legend>
+                <FieldsetTitle>
                   <Label htmlFor={`${uid}-business-state`}>State</Label>
-                </Legend>
+                </FieldsetTitle>
                 <Select
                   id={`${uid}-business-state`}
                   required={complianceInfo.is_business}
@@ -348,9 +348,9 @@ const AccountDetailsSection = ({
               </Fieldset>
             ) : complianceInfo.business_country === "CA" ? (
               <Fieldset state={errorFieldNames.has("business_state") ? "danger" : undefined}>
-                <Legend>
+                <FieldsetTitle>
                   <Label htmlFor={`${uid}-business-province`}>Province</Label>
-                </Legend>
+                </FieldsetTitle>
                 <Select
                   id={`${uid}-business-province`}
                   required={complianceInfo.is_business}
@@ -371,9 +371,9 @@ const AccountDetailsSection = ({
               </Fieldset>
             ) : complianceInfo.business_country === "AU" ? (
               <Fieldset state={errorFieldNames.has("business_state") ? "danger" : undefined}>
-                <Legend>
+                <FieldsetTitle>
                   <Label htmlFor={`${uid}-business-state`}>State</Label>
-                </Legend>
+                </FieldsetTitle>
                 <Select
                   id={`${uid}-business-state`}
                   required={complianceInfo.is_business}
@@ -394,9 +394,9 @@ const AccountDetailsSection = ({
               </Fieldset>
             ) : complianceInfo.business_country === "MX" ? (
               <Fieldset state={errorFieldNames.has("business_state") ? "danger" : undefined}>
-                <Legend>
+                <FieldsetTitle>
                   <Label htmlFor={`${uid}-business-state`}>State</Label>
-                </Legend>
+                </FieldsetTitle>
                 <Select
                   id={`${uid}-business-state`}
                   required={complianceInfo.is_business}
@@ -417,9 +417,9 @@ const AccountDetailsSection = ({
               </Fieldset>
             ) : complianceInfo.business_country === "AE" ? (
               <Fieldset state={errorFieldNames.has("business_state") ? "danger" : undefined}>
-                <Legend>
+                <FieldsetTitle>
                   <Label htmlFor={`${uid}-business-state`}>Province</Label>
-                </Legend>
+                </FieldsetTitle>
                 <Select
                   id={`${uid}-business-state`}
                   required={complianceInfo.is_business}
@@ -440,9 +440,9 @@ const AccountDetailsSection = ({
               </Fieldset>
             ) : complianceInfo.business_country === "IE" ? (
               <Fieldset state={errorFieldNames.has("business_state") ? "danger" : undefined}>
-                <Legend>
+                <FieldsetTitle>
                   <Label htmlFor={`${uid}-business-county`}>County</Label>
-                </Legend>
+                </FieldsetTitle>
                 <Select
                   id={`${uid}-business-county`}
                   required={complianceInfo.is_business}
@@ -463,11 +463,11 @@ const AccountDetailsSection = ({
               </Fieldset>
             ) : null}
             <Fieldset state={errorFieldNames.has("business_zip_code") ? "danger" : undefined}>
-              <Legend>
+              <FieldsetTitle>
                 <Label htmlFor={`${uid}-business-zip-code`}>
                   {complianceInfo.business_country === "US" ? "ZIP code" : "Postal code"}
                 </Label>
-              </Legend>
+              </FieldsetTitle>
               <Input
                 id={`${uid}-business-zip-code`}
                 placeholder="12345"
@@ -480,9 +480,9 @@ const AccountDetailsSection = ({
             </Fieldset>
           </div>
           <Fieldset>
-            <Legend>
+            <FieldsetTitle>
               <Label htmlFor={`${uid}-business-country`}>Country</Label>
-            </Legend>
+            </FieldsetTitle>
             <Select
               id={`${uid}-business-country`}
               value={complianceInfo.business_country || ""}
@@ -498,9 +498,9 @@ const AccountDetailsSection = ({
             </Select>
           </Fieldset>
           <Fieldset state={errorFieldNames.has("business_phone") ? "danger" : undefined}>
-            <Legend>
+            <FieldsetTitle>
               <Label htmlFor={`${uid}-business-phone-number`}>Business phone number</Label>
-            </Legend>
+            </FieldsetTitle>
             <Input
               id={`${uid}-business-phone-number`}
               type="tel"
@@ -520,12 +520,12 @@ const AccountDetailsSection = ({
             <Fieldset state={errorFieldNames.has("business_tax_id") ? "danger" : undefined}>
               {complianceInfo.business_country === "US" ? (
                 <>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-business-tax-id`}>Business Tax ID (EIN, or SSN for sole proprietors)</Label>
                     <div className="small">
                       <a href="/help/article/260-your-payout-settings-page">I'm not sure what my Tax ID is.</a>
                     </div>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     id={`${uid}-business-tax-id`}
                     type="text"
@@ -538,9 +538,9 @@ const AccountDetailsSection = ({
                 </>
               ) : complianceInfo.business_country === "CA" ? (
                 <>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-business-tax-id`}>Business Number (BN)</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     id={`${uid}-business-tax-id`}
                     type="text"
@@ -553,9 +553,9 @@ const AccountDetailsSection = ({
                 </>
               ) : complianceInfo.business_country === "AU" ? (
                 <>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-business-tax-id`}>Australian Business Number (ABN)</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     id={`${uid}-business-tax-id`}
                     type="text"
@@ -568,9 +568,9 @@ const AccountDetailsSection = ({
                 </>
               ) : complianceInfo.business_country === "GB" ? (
                 <>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-business-tax-id`}>Company Number (CRN)</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     id={`${uid}-business-tax-id`}
                     type="text"
@@ -583,9 +583,9 @@ const AccountDetailsSection = ({
                 </>
               ) : complianceInfo.business_country === "AE" ? (
                 <>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-business-tax-id`}>Company tax ID</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     id={`${uid}-business-tax-id`}
                     type="text"
@@ -598,9 +598,9 @@ const AccountDetailsSection = ({
                 </>
               ) : complianceInfo.business_country === "MX" ? (
                 <>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-business-tax-id`}>Business RFC</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     id={`${uid}-business-tax-id`}
                     type="text"
@@ -613,9 +613,9 @@ const AccountDetailsSection = ({
                 </>
               ) : (
                 <>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-business-tax-id`}>Company tax ID</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     id={`${uid}-business-tax-id`}
                     type="text"
@@ -630,7 +630,7 @@ const AccountDetailsSection = ({
             </Fieldset>
           ) : null}
           <Fieldset>
-            <Legend>
+            <FieldsetTitle>
               <Label htmlFor={`${uid}-personal-address-is-business-address`}>
                 <Checkbox
                   id={`${uid}-personal-address-is-business-address`}
@@ -647,16 +647,16 @@ const AccountDetailsSection = ({
                 />
                 Same as business
               </Label>
-            </Legend>
+            </FieldsetTitle>
           </Fieldset>
         </section>
       ) : null}
       <section className="grid gap-8">
         <div style={{ display: "grid", gap: "var(--spacer-5)", gridAutoFlow: "column", gridAutoColumns: "1fr" }}>
           <Fieldset state={errorFieldNames.has("first_name") ? "danger" : undefined}>
-            <Legend>
+            <FieldsetTitle>
               <Label htmlFor={`${uid}-creator-first-name`}>First name</Label>
-            </Legend>
+            </FieldsetTitle>
             <Input
               id={`${uid}-creator-first-name`}
               type="text"
@@ -670,9 +670,9 @@ const AccountDetailsSection = ({
             <small className="text-muted">Include your middle name if it appears on your ID.</small>
           </Fieldset>
           <Fieldset state={errorFieldNames.has("last_name") ? "danger" : undefined}>
-            <Legend>
+            <FieldsetTitle>
               <Label htmlFor={`${uid}-creator-last-name`}>Last name</Label>
-            </Legend>
+            </FieldsetTitle>
             <Input
               id={`${uid}-creator-last-name`}
               type="text"
@@ -687,9 +687,9 @@ const AccountDetailsSection = ({
         </div>
         {complianceInfo.is_business && complianceInfo.country === "CA" ? (
           <Fieldset state={errorFieldNames.has("job_title") ? "danger" : undefined}>
-            <Legend>
+            <FieldsetTitle>
               <Label htmlFor={`${uid}-creator-job-title`}>Job title</Label>
-            </Legend>
+            </FieldsetTitle>
             <Input
               id={`${uid}-creator-job-title`}
               type="text"
@@ -706,9 +706,9 @@ const AccountDetailsSection = ({
           <>
             <div style={{ display: "grid", gap: "var(--spacer-5)", gridAutoFlow: "column", gridAutoColumns: "1fr" }}>
               <Fieldset state={errorFieldNames.has("first_name_kanji") ? "danger" : undefined}>
-                <Legend>
+                <FieldsetTitle>
                   <Label htmlFor={`${uid}-creator-first-name-kanji`}>First name (Kanji)</Label>
-                </Legend>
+                </FieldsetTitle>
                 <Input
                   id={`${uid}-creator-first-name-kanji`}
                   type="text"
@@ -721,9 +721,9 @@ const AccountDetailsSection = ({
                 />
               </Fieldset>
               <Fieldset state={errorFieldNames.has("last_name_kanji") ? "danger" : undefined}>
-                <Legend>
+                <FieldsetTitle>
                   <Label htmlFor={`${uid}-creator-last-name-kanji`}>Last name (Kanji)</Label>
-                </Legend>
+                </FieldsetTitle>
                 <Input
                   id={`${uid}-creator-last-name-kanji`}
                   type="text"
@@ -738,9 +738,9 @@ const AccountDetailsSection = ({
             </div>
             <div style={{ display: "grid", gap: "var(--spacer-5)", gridAutoFlow: "column", gridAutoColumns: "1fr" }}>
               <Fieldset state={errorFieldNames.has("first_name_kana") ? "danger" : undefined}>
-                <Legend>
+                <FieldsetTitle>
                   <Label htmlFor={`${uid}-creator-first-name-kana`}>First name (Kana)</Label>
-                </Legend>
+                </FieldsetTitle>
                 <Input
                   id={`${uid}-creator-first-name-kana`}
                   type="text"
@@ -753,9 +753,9 @@ const AccountDetailsSection = ({
                 />
               </Fieldset>
               <Fieldset state={errorFieldNames.has("last_name_kana") ? "danger" : undefined}>
-                <Legend>
+                <FieldsetTitle>
                   <Label htmlFor={`${uid}-creator-last-name-kana`}>Last name (Kana)</Label>
-                </Legend>
+                </FieldsetTitle>
                 <Input
                   id={`${uid}-creator-last-name-kana`}
                   type="text"
@@ -773,9 +773,9 @@ const AccountDetailsSection = ({
         {complianceInfo.country === "JP" ? (
           <div style={{ display: "grid", gap: "var(--spacer-5)", gridAutoFlow: "column", gridAutoColumns: "1fr" }}>
             <Fieldset state={errorFieldNames.has("building_number") ? "danger" : undefined}>
-              <Legend>
+              <FieldsetTitle>
                 <Label htmlFor={`${uid}-creator-building-number`}>Block / Building Number</Label>
-              </Legend>
+              </FieldsetTitle>
               <Input
                 id={`${uid}-creator-building-number`}
                 type="text"
@@ -788,9 +788,9 @@ const AccountDetailsSection = ({
               />
             </Fieldset>
             <Fieldset state={errorFieldNames.has("street_address_kanji") ? "danger" : undefined}>
-              <Legend>
+              <FieldsetTitle>
                 <Label htmlFor={`${uid}-creator-street-address-kanji`}>Street Address (Kanji)</Label>
-              </Legend>
+              </FieldsetTitle>
               <Input
                 id={`${uid}-creator-street-address-kanji`}
                 type="text"
@@ -803,9 +803,9 @@ const AccountDetailsSection = ({
               />
             </Fieldset>
             <Fieldset state={errorFieldNames.has("street_address_kana") ? "danger" : undefined}>
-              <Legend>
+              <FieldsetTitle>
                 <Label htmlFor={`${uid}-creator-street-address-kana`}>Street Address (Kana)</Label>
-              </Legend>
+              </FieldsetTitle>
               <Input
                 id={`${uid}-creator-street-address-kana`}
                 type="text"
@@ -820,9 +820,9 @@ const AccountDetailsSection = ({
           </div>
         ) : (
           <Fieldset state={errorFieldNames.has("street_address") ? "danger" : undefined}>
-            <Legend>
+            <FieldsetTitle>
               <Label htmlFor={`${uid}-creator-street-address`}>Address</Label>
-            </Legend>
+            </FieldsetTitle>
             <Input
               id={`${uid}-creator-street-address`}
               type="text"
@@ -838,9 +838,9 @@ const AccountDetailsSection = ({
       </section>
       <div style={{ display: "grid", gap: "var(--spacer-5)", gridAutoFlow: "column", gridAutoColumns: "1fr" }}>
         <Fieldset state={errorFieldNames.has("city") ? "danger" : undefined}>
-          <Legend>
+          <FieldsetTitle>
             <Label htmlFor={`${uid}-creator-city`}>City</Label>
-          </Legend>
+          </FieldsetTitle>
           <Input
             id={`${uid}-creator-city`}
             type="text"
@@ -854,9 +854,9 @@ const AccountDetailsSection = ({
         </Fieldset>
         {complianceInfo.country === "US" ? (
           <Fieldset state={errorFieldNames.has("state") ? "danger" : undefined}>
-            <Legend>
+            <FieldsetTitle>
               <Label htmlFor={`${uid}-creator-state`}>State</Label>
-            </Legend>
+            </FieldsetTitle>
             <Select
               id={`${uid}-creator-state`}
               required
@@ -877,9 +877,9 @@ const AccountDetailsSection = ({
           </Fieldset>
         ) : complianceInfo.country === "CA" ? (
           <Fieldset state={errorFieldNames.has("state") ? "danger" : undefined}>
-            <Legend>
+            <FieldsetTitle>
               <Label htmlFor={`${uid}-creator-province`}>Province</Label>
-            </Legend>
+            </FieldsetTitle>
             <Select
               id={`${uid}-creator-province`}
               required
@@ -900,9 +900,9 @@ const AccountDetailsSection = ({
           </Fieldset>
         ) : complianceInfo.country === "AU" ? (
           <Fieldset state={errorFieldNames.has("state") ? "danger" : undefined}>
-            <Legend>
+            <FieldsetTitle>
               <Label htmlFor={`${uid}-creator-state`}>State</Label>
-            </Legend>
+            </FieldsetTitle>
             <Select
               id={`${uid}-creator-state`}
               required
@@ -923,9 +923,9 @@ const AccountDetailsSection = ({
           </Fieldset>
         ) : complianceInfo.country === "MX" ? (
           <Fieldset state={errorFieldNames.has("state") ? "danger" : undefined}>
-            <Legend>
+            <FieldsetTitle>
               <Label htmlFor={`${uid}-creator-state`}>State</Label>
-            </Legend>
+            </FieldsetTitle>
             <Select
               id={`${uid}-creator-state`}
               required
@@ -946,9 +946,9 @@ const AccountDetailsSection = ({
           </Fieldset>
         ) : complianceInfo.country === "AE" ? (
           <Fieldset state={errorFieldNames.has("state") ? "danger" : undefined}>
-            <Legend>
+            <FieldsetTitle>
               <Label htmlFor={`${uid}-creator-province`}>Province</Label>
-            </Legend>
+            </FieldsetTitle>
             <Select
               id={`${uid}-creator-province`}
               required
@@ -969,9 +969,9 @@ const AccountDetailsSection = ({
           </Fieldset>
         ) : complianceInfo.country === "IE" ? (
           <Fieldset state={errorFieldNames.has("state") ? "danger" : undefined}>
-            <Legend>
+            <FieldsetTitle>
               <Label htmlFor={`${uid}-creator-county`}>County</Label>
-            </Legend>
+            </FieldsetTitle>
             <Select
               id={`${uid}-creator-county`}
               required
@@ -992,9 +992,9 @@ const AccountDetailsSection = ({
           </Fieldset>
         ) : complianceInfo.country === "BR" ? (
           <Fieldset state={errorFieldNames.has("state") ? "danger" : undefined}>
-            <Legend>
+            <FieldsetTitle>
               <Label htmlFor={`${uid}-creator-state`}>State</Label>
-            </Legend>
+            </FieldsetTitle>
             <Select
               id={`${uid}-creator-state`}
               required
@@ -1015,11 +1015,11 @@ const AccountDetailsSection = ({
           </Fieldset>
         ) : null}
         <Fieldset state={errorFieldNames.has("zip_code") ? "danger" : undefined}>
-          <Legend>
+          <FieldsetTitle>
             <Label htmlFor={`${uid}-creator-zip-code`}>
               {complianceInfo.country === "US" ? "ZIP code" : "Postal code"}
             </Label>
-          </Legend>
+          </FieldsetTitle>
           <Input
             id={`${uid}-creator-zip-code`}
             type="text"
@@ -1033,9 +1033,9 @@ const AccountDetailsSection = ({
         </Fieldset>
       </div>
       <Fieldset>
-        <Legend>
+        <FieldsetTitle>
           <Label htmlFor={`${uid}-creator-country`}>Country</Label>
-        </Legend>
+        </FieldsetTitle>
         <Select
           id={`${uid}-creator-country`}
           disabled={isFormDisabled}
@@ -1054,9 +1054,9 @@ const AccountDetailsSection = ({
         </Select>
       </Fieldset>
       <Fieldset state={errorFieldNames.has("phone") ? "danger" : undefined}>
-        <Legend>
+        <FieldsetTitle>
           <Label htmlFor={`${uid}-creator-phone`}>Phone number</Label>
-        </Legend>
+        </FieldsetTitle>
         <Input
           id={`${uid}-creator-phone`}
           type="tel"
@@ -1071,10 +1071,10 @@ const AccountDetailsSection = ({
         />
       </Fieldset>
       <Fieldset>
-        <Legend>
+        <FieldsetTitle>
           <Label>Date of Birth</Label>
           <a href="/help/article/260-your-payout-settings-page">Why does Gumroad need this information?</a>
-        </Legend>
+        </FieldsetTitle>
         <div style={{ display: "grid", gap: "var(--spacer-5)", gridAutoFlow: "column", gridAutoColumns: "1fr" }}>
           <Fieldset state={errorFieldNames.has("dob_month") ? "danger" : undefined}>
             <Select
@@ -1140,9 +1140,9 @@ const AccountDetailsSection = ({
       user.country_code === "PK" ||
       user.country_code === "BD" ? (
         <Fieldset state={errorFieldNames.has("nationality") ? "danger" : undefined}>
-          <Legend>
+          <FieldsetTitle>
             <Label htmlFor={`${uid}-nationality`}>Nationality</Label>
-          </Legend>
+          </FieldsetTitle>
           <div>
             <Select
               id={`${uid}-nationality`}
@@ -1169,9 +1169,9 @@ const AccountDetailsSection = ({
           {complianceInfo.country === "US" ? (
             user.need_full_ssn ? (
               <div>
-                <Legend>
+                <FieldsetTitle>
                   <Label htmlFor={`${uid}-social-security-number-full`}>Social Security Number</Label>
-                </Legend>
+                </FieldsetTitle>
                 <Input
                   id={`${uid}-social-security-number-full`}
                   type="text"
@@ -1186,9 +1186,9 @@ const AccountDetailsSection = ({
               </div>
             ) : (
               <div>
-                <Legend>
+                <FieldsetTitle>
                   <Label htmlFor={`${uid}-social-security-number`}>Last 4 digits of SSN</Label>
-                </Legend>
+                </FieldsetTitle>
                 <Input
                   id={`${uid}-social-security-number`}
                   type="text"
@@ -1204,9 +1204,9 @@ const AccountDetailsSection = ({
             )
           ) : complianceInfo.country === "CA" ? (
             <div>
-              <Legend>
+              <FieldsetTitle>
                 <Label htmlFor={`${uid}-social-insurance-number`}>Social Insurance Number</Label>
-              </Legend>
+              </FieldsetTitle>
               <Input
                 id={`${uid}-social-insurance-number`}
                 type="text"
@@ -1221,9 +1221,9 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "CO" ? (
             <div>
-              <Legend>
+              <FieldsetTitle>
                 <Label htmlFor={`${uid}-colombia-id-number`}>Cédula de Ciudadanía (CC)</Label>
-              </Legend>
+              </FieldsetTitle>
               <Input
                 id={`${uid}-colombia-id-number`}
                 type="text"
@@ -1238,9 +1238,9 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "UY" ? (
             <div>
-              <Legend>
+              <FieldsetTitle>
                 <Label htmlFor={`${uid}-uruguay-id-number`}>Cédula de Identidad (CI)</Label>
-              </Legend>
+              </FieldsetTitle>
               <Input
                 id={`${uid}-uruguay-id-number`}
                 type="text"
@@ -1255,9 +1255,9 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "HK" ? (
             <div>
-              <Legend>
+              <FieldsetTitle>
                 <Label htmlFor={`${uid}-hong-kong-id-number`}>Hong Kong ID Number</Label>
-              </Legend>
+              </FieldsetTitle>
               <Input
                 id={`${uid}-hong-kong-id-number`}
                 type="text"
@@ -1272,9 +1272,9 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "SG" ? (
             <div>
-              <Legend>
+              <FieldsetTitle>
                 <Label htmlFor={`${uid}-singapore-id-number`}>NRIC number / FIN</Label>
-              </Legend>
+              </FieldsetTitle>
               <Input
                 id={`${uid}-singapore-id-number`}
                 type="text"
@@ -1289,9 +1289,9 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "AE" ? (
             <div>
-              <Legend>
+              <FieldsetTitle>
                 <Label htmlFor={`${uid}-uae-id-number`}>Emirates ID</Label>
-              </Legend>
+              </FieldsetTitle>
               <Input
                 id={`${uid}-uae-id-number`}
                 type="text"
@@ -1306,9 +1306,9 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "MX" ? (
             <div>
-              <Legend>
+              <FieldsetTitle>
                 <Label htmlFor={`${uid}-mexico-id-number`}>Personal RFC</Label>
-              </Legend>
+              </FieldsetTitle>
               <Input
                 id={`${uid}-mexico-id-number`}
                 type="text"
@@ -1323,9 +1323,9 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "KZ" ? (
             <div>
-              <Legend>
+              <FieldsetTitle>
                 <Label htmlFor={`${uid}-kazakhstan-id-number`}>Individual identification number (IIN)</Label>
-              </Legend>
+              </FieldsetTitle>
               <Input
                 id={`${uid}-kazakhstan-id-number`}
                 type="text"
@@ -1340,9 +1340,9 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "AR" ? (
             <div>
-              <Legend>
+              <FieldsetTitle>
                 <Label htmlFor={`${uid}-argentina-id-number`}>CUIL</Label>
-              </Legend>
+              </FieldsetTitle>
               <Input
                 id={`${uid}-argentina-id-number`}
                 type="text"
@@ -1357,9 +1357,9 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "PE" ? (
             <div>
-              <Legend>
+              <FieldsetTitle>
                 <Label htmlFor={`${uid}-peru-id-number`}>DNI number</Label>
-              </Legend>
+              </FieldsetTitle>
               <Input
                 id={`${uid}-peru-id-number`}
                 type="text"
@@ -1374,9 +1374,9 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "PK" ? (
             <div>
-              <Legend>
+              <FieldsetTitle>
                 <Label htmlFor={`${uid}-snic`}>National Identity Card Number (SNIC or CNIC)</Label>
-              </Legend>
+              </FieldsetTitle>
               <Input
                 id={`${uid}-snic`}
                 type="text"
@@ -1391,9 +1391,9 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "CR" ? (
             <div>
-              <Legend>
+              <FieldsetTitle>
                 <Label htmlFor={`${uid}-costa-rica-id-number`}>Tax Identification Number</Label>
-              </Legend>
+              </FieldsetTitle>
               <Input
                 id={`${uid}-costa-rica-id-number`}
                 type="text"
@@ -1408,9 +1408,9 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "CL" ? (
             <div>
-              <Legend>
+              <FieldsetTitle>
                 <Label htmlFor={`${uid}-chile-id-number`}>Rol Único Tributario (RUT)</Label>
-              </Legend>
+              </FieldsetTitle>
               <Input
                 id={`${uid}-chile-id-number`}
                 type="text"
@@ -1425,9 +1425,9 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "DO" ? (
             <div>
-              <Legend>
+              <FieldsetTitle>
                 <Label htmlFor={`${uid}-dominican-republic-id-number`}>Cédula de identidad y electoral (CIE)</Label>
-              </Legend>
+              </FieldsetTitle>
               <Input
                 id={`${uid}-dominican-republic-id-number`}
                 type="text"
@@ -1442,9 +1442,9 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "BO" ? (
             <div>
-              <Legend>
+              <FieldsetTitle>
                 <Label htmlFor={`${uid}-bolivia-id-number`}>Cédula de Identidad (CI)</Label>
-              </Legend>
+              </FieldsetTitle>
               <Input
                 id={`${uid}-bolivia-id-number`}
                 type="text"
@@ -1459,9 +1459,9 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "PY" ? (
             <div>
-              <Legend>
+              <FieldsetTitle>
                 <Label htmlFor={`${uid}-paraguay-id-number`}>Cédula de Identidad (CI)</Label>
-              </Legend>
+              </FieldsetTitle>
               <Input
                 id={`${uid}-paraguay-id-number`}
                 type="text"
@@ -1476,9 +1476,9 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "BD" ? (
             <div>
-              <Legend>
+              <FieldsetTitle>
                 <Label htmlFor={`${uid}-bangladesh-id-number`}>Personal ID number</Label>
-              </Legend>
+              </FieldsetTitle>
               <Input
                 id={`${uid}-bangladesh-id-number`}
                 type="text"
@@ -1493,9 +1493,9 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "MZ" ? (
             <div>
-              <Legend>
+              <FieldsetTitle>
                 <Label htmlFor={`${uid}-mozambique-id-number`}>Mozambique Taxpayer Single ID Number (NUIT)</Label>
-              </Legend>
+              </FieldsetTitle>
               <Input
                 id={`${uid}-mozambique-id-number`}
                 type="text"
@@ -1510,9 +1510,9 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "GT" ? (
             <div>
-              <Legend>
+              <FieldsetTitle>
                 <Label htmlFor={`${uid}-guatemala-id-number`}>Número de Identificación Tributaria (NIT)</Label>
-              </Legend>
+              </FieldsetTitle>
               <Input
                 id={`${uid}-guatemala-id-number`}
                 type="text"
@@ -1527,9 +1527,9 @@ const AccountDetailsSection = ({
             </div>
           ) : complianceInfo.country === "BR" ? (
             <div>
-              <Legend>
+              <FieldsetTitle>
                 <Label htmlFor={`${uid}-brazil-id-number`}>Cadastro de Pessoas Físicas (CPF)</Label>
-              </Legend>
+              </FieldsetTitle>
               <Input
                 id={`${uid}-brazil-id-number`}
                 type="text"
diff --git a/app/javascript/components/Settings/PaymentsPage/AusBackTaxesSection.tsx b/app/javascript/components/Settings/PaymentsPage/AusBackTaxesSection.tsx
index bed7cbd357..c811dfd972 100644
--- a/app/javascript/components/Settings/PaymentsPage/AusBackTaxesSection.tsx
+++ b/app/javascript/components/Settings/PaymentsPage/AusBackTaxesSection.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 
 import { TaxesCollectionModal } from "$app/components/server-components/TaxesCollectionModal";
 import { Alert } from "$app/components/ui/Alert";
-import { Section } from "$app/components/ui/Section";
+import { FormSection } from "$app/components/ui/FormSection";
 
 export type AusBacktaxDetails = {
   total_amount_to_au: string;
@@ -25,7 +25,7 @@ const AusBackTaxesSection = ({
   are_au_backtaxes_paid,
   au_backtaxes_paid_date,
 }: AusBacktaxDetails) => (
-  <Section className="p-4! md:p-8!" header={<h2>Backtaxes collection</h2>}>
+  <FormSection className="p-4! md:p-8!" header={<h2>Backtaxes collection</h2>}>
     {opted_in_to_au_backtax ? (
       <div className="flex flex-col gap-4">
         <Alert variant="success">You've opted in to backtaxes collection.</Alert>
@@ -70,6 +70,6 @@ const AusBackTaxesSection = ({
         />
       </div>
     )}
-  </Section>
+  </FormSection>
 );
 export default AusBackTaxesSection;
diff --git a/app/javascript/components/Settings/PaymentsPage/BankAccountSection.tsx b/app/javascript/components/Settings/PaymentsPage/BankAccountSection.tsx
index 110df4c41f..a14297d890 100644
--- a/app/javascript/components/Settings/PaymentsPage/BankAccountSection.tsx
+++ b/app/javascript/components/Settings/PaymentsPage/BankAccountSection.tsx
@@ -5,7 +5,7 @@ import type { FormFieldName, User } from "$app/types/payments";
 
 import { Button } from "$app/components/Button";
 import { Alert } from "$app/components/ui/Alert";
-import { Fieldset, Legend } from "$app/components/ui/Fieldset";
+import { Fieldset, FieldsetTitle } from "$app/components/ui/Fieldset";
 import { Input } from "$app/components/ui/Input";
 import { Label } from "$app/components/ui/Label";
 import { Select } from "$app/components/ui/Select";
@@ -937,9 +937,9 @@ const BankAccountSection = ({
       <div className="whitespace-pre-line">{feeInfoText}</div>
       <section className="grid gap-8">
         <Fieldset state={errorFieldNames.has("account_holder_full_name") ? "danger" : undefined}>
-          <Legend>
+          <FieldsetTitle>
             <Label htmlFor={`${uid}-account-holder-full-name`}>Pay to the order of</Label>
-          </Legend>
+          </FieldsetTitle>
           <Input
             id={`${uid}-account-holder-full-name`}
             placeholder="Full name of account holder"
@@ -956,9 +956,9 @@ const BankAccountSection = ({
               {user.country_code === "CA" ? (
                 <>
                   <Fieldset state={errorFieldNames.has("transit_number") ? "danger" : undefined}>
-                    <Legend>
+                    <FieldsetTitle>
                       <Label htmlFor={`${uid}-transit-number`}>Transit #</Label>
-                    </Legend>
+                    </FieldsetTitle>
                     <Input
                       type="text"
                       id={`${uid}-transit-number`}
@@ -971,9 +971,9 @@ const BankAccountSection = ({
                     />
                   </Fieldset>
                   <Fieldset state={errorFieldNames.has("institution_number") ? "danger" : undefined}>
-                    <Legend>
+                    <FieldsetTitle>
                       <Label htmlFor={`${uid}-institution-number`}>Institution #</Label>
-                    </Legend>
+                    </FieldsetTitle>
                     <Input
                       type="text"
                       id={`${uid}-institution-number`}
@@ -988,9 +988,9 @@ const BankAccountSection = ({
                 </>
               ) : user.country_code === "AU" ? (
                 <Fieldset state={errorFieldNames.has("bsb_number") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bsb-number`}>BSB</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bsb-number`}
@@ -1004,9 +1004,9 @@ const BankAccountSection = ({
                 </Fieldset>
               ) : user.country_code === "GB" ? (
                 <Fieldset state={errorFieldNames.has("sort_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-sort-code`}>Sort code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-sort-code`}
@@ -1020,9 +1020,9 @@ const BankAccountSection = ({
                 </Fieldset>
               ) : user.country_code === "GI" ? (
                 <Fieldset state={errorFieldNames.has("sort_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-sort-code`}>Sort code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-sort-code`}
@@ -1036,9 +1036,9 @@ const BankAccountSection = ({
                 </Fieldset>
               ) : user.country_code === "IN" ? (
                 <Fieldset state={errorFieldNames.has("ifsc") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-ifsc`}>IFSC</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-ifsc`}
@@ -1053,9 +1053,9 @@ const BankAccountSection = ({
               ) : user.country_code === "HK" ? (
                 <>
                   <Fieldset state={errorFieldNames.has("clearing_code") ? "danger" : undefined}>
-                    <Legend>
+                    <FieldsetTitle>
                       <Label htmlFor={`${uid}-clearing-code`}>Clearing Code</Label>
-                    </Legend>
+                    </FieldsetTitle>
                     <Input
                       type="text"
                       id={`${uid}-clearing-code`}
@@ -1068,9 +1068,9 @@ const BankAccountSection = ({
                     />
                   </Fieldset>
                   <Fieldset state={errorFieldNames.has("branch_code") ? "danger" : undefined}>
-                    <Legend>
+                    <FieldsetTitle>
                       <Label htmlFor={`${uid}-branch-code`}>Branch code</Label>
-                    </Legend>
+                    </FieldsetTitle>
                     <Input
                       type="text"
                       id={`${uid}-branch-code`}
@@ -1086,9 +1086,9 @@ const BankAccountSection = ({
               ) : user.country_code === "SG" ? (
                 <>
                   <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                    <Legend>
+                    <FieldsetTitle>
                       <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
-                    </Legend>
+                    </FieldsetTitle>
                     <Input
                       type="text"
                       id={`${uid}-bank-code`}
@@ -1101,9 +1101,9 @@ const BankAccountSection = ({
                     />
                   </Fieldset>
                   <Fieldset state={errorFieldNames.has("branch_code") ? "danger" : undefined}>
-                    <Legend>
+                    <FieldsetTitle>
                       <Label htmlFor={`${uid}-branch-code`}>Branch code</Label>
-                    </Legend>
+                    </FieldsetTitle>
                     <Input
                       type="text"
                       id={`${uid}-branch-code`}
@@ -1119,9 +1119,9 @@ const BankAccountSection = ({
               ) : user.country_code === "JP" ? (
                 <>
                   <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                    <Legend>
+                    <FieldsetTitle>
                       <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
-                    </Legend>
+                    </FieldsetTitle>
                     <Input
                       type="text"
                       id={`${uid}-bank-code`}
@@ -1134,9 +1134,9 @@ const BankAccountSection = ({
                     />
                   </Fieldset>
                   <Fieldset state={errorFieldNames.has("branch_code") ? "danger" : undefined}>
-                    <Legend>
+                    <FieldsetTitle>
                       <Label htmlFor={`${uid}-branch-code`}>Branch code</Label>
-                    </Legend>
+                    </FieldsetTitle>
                     <Input
                       type="text"
                       id={`${uid}-branch-code`}
@@ -1151,9 +1151,9 @@ const BankAccountSection = ({
                 </>
               ) : user.country_code === "TH" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -1167,9 +1167,9 @@ const BankAccountSection = ({
                 </Fieldset>
               ) : user.country_code === "KR" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -1183,9 +1183,9 @@ const BankAccountSection = ({
                 </Fieldset>
               ) : user.country_code === "VN" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>Bank Code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -1199,9 +1199,9 @@ const BankAccountSection = ({
                 </Fieldset>
               ) : user.country_code === "TW" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -1215,9 +1215,9 @@ const BankAccountSection = ({
                 </Fieldset>
               ) : user.country_code === "ID" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -1231,9 +1231,9 @@ const BankAccountSection = ({
                 </Fieldset>
               ) : user.country_code === "MA" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -1247,9 +1247,9 @@ const BankAccountSection = ({
                 </Fieldset>
               ) : user.country_code === "RS" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -1264,9 +1264,9 @@ const BankAccountSection = ({
               ) : user.country_code === "TT" ? (
                 <>
                   <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                    <Legend>
+                    <FieldsetTitle>
                       <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
-                    </Legend>
+                    </FieldsetTitle>
                     <Input
                       type="text"
                       id={`${uid}-bank-code`}
@@ -1279,9 +1279,9 @@ const BankAccountSection = ({
                     />
                   </Fieldset>
                   <Fieldset state={errorFieldNames.has("branch_code") ? "danger" : undefined}>
-                    <Legend>
+                    <FieldsetTitle>
                       <Label htmlFor={`${uid}-branch-code`}>Branch code</Label>
-                    </Legend>
+                    </FieldsetTitle>
                     <Input
                       type="text"
                       id={`${uid}-branch-code`}
@@ -1297,9 +1297,9 @@ const BankAccountSection = ({
               ) : user.country_code === "JM" ? (
                 <>
                   <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                    <Legend>
+                    <FieldsetTitle>
                       <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
-                    </Legend>
+                    </FieldsetTitle>
                     <Input
                       type="text"
                       id={`${uid}-bank-code`}
@@ -1312,9 +1312,9 @@ const BankAccountSection = ({
                     />
                   </Fieldset>
                   <Fieldset state={errorFieldNames.has("branch_code") ? "danger" : undefined}>
-                    <Legend>
+                    <FieldsetTitle>
                       <Label htmlFor={`${uid}-branch-code`}>Branch code</Label>
-                    </Legend>
+                    </FieldsetTitle>
                     <Input
                       type="text"
                       id={`${uid}-branch-code`}
@@ -1329,9 +1329,9 @@ const BankAccountSection = ({
                 </>
               ) : user.country_code === "UY" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -1345,9 +1345,9 @@ const BankAccountSection = ({
                 </Fieldset>
               ) : user.country_code === "AG" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -1361,9 +1361,9 @@ const BankAccountSection = ({
                 </Fieldset>
               ) : user.country_code === "LC" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -1377,9 +1377,9 @@ const BankAccountSection = ({
                 </Fieldset>
               ) : user.country_code === "TZ" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -1393,9 +1393,9 @@ const BankAccountSection = ({
                 </Fieldset>
               ) : user.country_code === "NA" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -1409,9 +1409,9 @@ const BankAccountSection = ({
                 </Fieldset>
               ) : user.country_code === "PH" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>Bank Identifier Code (BIC)</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -1425,9 +1425,9 @@ const BankAccountSection = ({
                 </Fieldset>
               ) : user.country_code === "ZA" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -1441,9 +1441,9 @@ const BankAccountSection = ({
                 </Fieldset>
               ) : user.country_code === "KE" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -1457,9 +1457,9 @@ const BankAccountSection = ({
                 </Fieldset>
               ) : user.country_code === "MY" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -1474,9 +1474,9 @@ const BankAccountSection = ({
               ) : user.country_code === "CL" ? (
                 <>
                   <Fieldset state={errorFieldNames.has("account_type") ? "danger" : undefined}>
-                    <Legend>
+                    <FieldsetTitle>
                       <Label htmlFor={`${uid}-bank-account-type`}>Bank account type</Label>
-                    </Legend>
+                    </FieldsetTitle>
                     <Select
                       id={`${uid}-bank-account-type`}
                       required
@@ -1495,9 +1495,9 @@ const BankAccountSection = ({
                     </Select>
                   </Fieldset>
                   <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                    <Legend>
+                    <FieldsetTitle>
                       <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
-                    </Legend>
+                    </FieldsetTitle>
                     <Input
                       type="text"
                       id={`${uid}-bank-code`}
@@ -1513,9 +1513,9 @@ const BankAccountSection = ({
               ) : user.country_code === "CO" ? (
                 <>
                   <Fieldset state={errorFieldNames.has("account_type") ? "danger" : undefined}>
-                    <Legend>
+                    <FieldsetTitle>
                       <Label htmlFor={`${uid}-account-type`}>Account Type</Label>
-                    </Legend>
+                    </FieldsetTitle>
                     <Select
                       id={`${uid}-account-type`}
                       required
@@ -1534,9 +1534,9 @@ const BankAccountSection = ({
                     </Select>
                   </Fieldset>
                   <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                    <Legend>
+                    <FieldsetTitle>
                       <Label htmlFor={`${uid}-bank-code`}>Bank Code</Label>
-                    </Legend>
+                    </FieldsetTitle>
                     <Input
                       type="text"
                       id={`${uid}-bank-code`}
@@ -1551,9 +1551,9 @@ const BankAccountSection = ({
                 </>
               ) : user.country_code === "RW" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -1567,9 +1567,9 @@ const BankAccountSection = ({
                 </Fieldset>
               ) : user.country_code === "EC" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -1583,9 +1583,9 @@ const BankAccountSection = ({
                 </Fieldset>
               ) : user.country_code === "BW" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -1599,9 +1599,9 @@ const BankAccountSection = ({
                 </Fieldset>
               ) : user.country_code === "OM" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -1615,9 +1615,9 @@ const BankAccountSection = ({
                 </Fieldset>
               ) : user.country_code === "PY" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -1631,9 +1631,9 @@ const BankAccountSection = ({
                 </Fieldset>
               ) : user.country_code === "MG" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -1647,9 +1647,9 @@ const BankAccountSection = ({
                 </Fieldset>
               ) : user.country_code === "GH" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -1663,9 +1663,9 @@ const BankAccountSection = ({
                 </Fieldset>
               ) : user.country_code === "US" ? (
                 <Fieldset state={errorFieldNames.has("routing_number") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-routing-number`}>Routing number</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-routing-number`}
@@ -1679,9 +1679,9 @@ const BankAccountSection = ({
                 </Fieldset>
               ) : user.country_code === "MD" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -1695,9 +1695,9 @@ const BankAccountSection = ({
                 </Fieldset>
               ) : user.country_code === "PA" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -1712,9 +1712,9 @@ const BankAccountSection = ({
               ) : user.country_code === "DO" ? (
                 <>
                   <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                    <Legend>
+                    <FieldsetTitle>
                       <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
-                    </Legend>
+                    </FieldsetTitle>
                     <Input
                       type="text"
                       id={`${uid}-bank-code`}
@@ -1727,9 +1727,9 @@ const BankAccountSection = ({
                     />
                   </Fieldset>
                   <Fieldset state={errorFieldNames.has("branch_code") ? "danger" : undefined}>
-                    <Legend>
+                    <FieldsetTitle>
                       <Label htmlFor={`${uid}-branch-code`}>Branch code (optional)</Label>
-                    </Legend>
+                    </FieldsetTitle>
                     <Input
                       type="text"
                       id={`${uid}-branch-code`}
@@ -1743,9 +1743,9 @@ const BankAccountSection = ({
               ) : user.country_code === "UZ" ? (
                 <>
                   <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                    <Legend>
+                    <FieldsetTitle>
                       <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
-                    </Legend>
+                    </FieldsetTitle>
                     <Input
                       type="text"
                       id={`${uid}-bank-code`}
@@ -1758,9 +1758,9 @@ const BankAccountSection = ({
                     />
                   </Fieldset>
                   <Fieldset state={errorFieldNames.has("branch_code") ? "danger" : undefined}>
-                    <Legend>
+                    <FieldsetTitle>
                       <Label htmlFor={`${uid}-branch-code`}>Branch code</Label>
-                    </Legend>
+                    </FieldsetTitle>
                     <Input
                       type="text"
                       id={`${uid}-branch-code`}
@@ -1775,9 +1775,9 @@ const BankAccountSection = ({
                 </>
               ) : user.country_code === "BO" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -1791,9 +1791,9 @@ const BankAccountSection = ({
                 </Fieldset>
               ) : user.country_code === "NG" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -1807,9 +1807,9 @@ const BankAccountSection = ({
                 </Fieldset>
               ) : user.country_code === "AM" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -1824,9 +1824,9 @@ const BankAccountSection = ({
               ) : user.country_code === "LK" ? (
                 <>
                   <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                    <Legend>
+                    <FieldsetTitle>
                       <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
-                    </Legend>
+                    </FieldsetTitle>
                     <Input
                       type="text"
                       id={`${uid}-bank-code`}
@@ -1839,9 +1839,9 @@ const BankAccountSection = ({
                     />
                   </Fieldset>
                   <Fieldset state={errorFieldNames.has("branch_code") ? "danger" : undefined}>
-                    <Legend>
+                    <FieldsetTitle>
                       <Label htmlFor={`${uid}-branch-code`}>Branch code</Label>
-                    </Legend>
+                    </FieldsetTitle>
                     <Input
                       type="text"
                       id={`${uid}-branch-code`}
@@ -1856,9 +1856,9 @@ const BankAccountSection = ({
                 </>
               ) : user.country_code === "ET" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -1872,9 +1872,9 @@ const BankAccountSection = ({
                 </Fieldset>
               ) : user.country_code === "BN" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -1888,9 +1888,9 @@ const BankAccountSection = ({
                 </Fieldset>
               ) : user.country_code === "GY" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -1904,9 +1904,9 @@ const BankAccountSection = ({
                 </Fieldset>
               ) : user.country_code === "MK" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -1920,9 +1920,9 @@ const BankAccountSection = ({
                 </Fieldset>
               ) : user.country_code === "BD" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>Bank Code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -1936,9 +1936,9 @@ const BankAccountSection = ({
                 </Fieldset>
               ) : user.country_code === "BT" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -1952,9 +1952,9 @@ const BankAccountSection = ({
                 </Fieldset>
               ) : user.country_code === "LA" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -1968,9 +1968,9 @@ const BankAccountSection = ({
                 </Fieldset>
               ) : user.country_code === "MZ" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -1984,9 +1984,9 @@ const BankAccountSection = ({
                 </Fieldset>
               ) : user.country_code === "QA" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -2000,9 +2000,9 @@ const BankAccountSection = ({
                 </Fieldset>
               ) : user.country_code === "GA" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -2016,9 +2016,9 @@ const BankAccountSection = ({
                 </Fieldset>
               ) : user.country_code === "BS" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -2032,9 +2032,9 @@ const BankAccountSection = ({
                 </Fieldset>
               ) : user.country_code === "KH" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -2048,9 +2048,9 @@ const BankAccountSection = ({
                 </Fieldset>
               ) : user.country_code === "MN" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -2064,9 +2064,9 @@ const BankAccountSection = ({
                 </Fieldset>
               ) : user.country_code === "DZ" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -2080,9 +2080,9 @@ const BankAccountSection = ({
                 </Fieldset>
               ) : user.country_code === "MO" ? (
                 <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     type="text"
                     id={`${uid}-bank-code`}
@@ -2099,9 +2099,9 @@ const BankAccountSection = ({
                 <>
                   {user.country_code === "PK" || user.country_code === "TR" ? (
                     <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                      <Legend>
+                      <FieldsetTitle>
                         <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                      </Legend>
+                      </FieldsetTitle>
                       <Input
                         type="text"
                         id={`${uid}-bank-code`}
@@ -2115,9 +2115,9 @@ const BankAccountSection = ({
                     </Fieldset>
                   ) : user.country_code === "GT" ? (
                     <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                      <Legend>
+                      <FieldsetTitle>
                         <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                      </Legend>
+                      </FieldsetTitle>
                       <Input
                         type="text"
                         id={`${uid}-bank-code`}
@@ -2131,9 +2131,9 @@ const BankAccountSection = ({
                     </Fieldset>
                   ) : user.country_code === "BA" ? (
                     <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                      <Legend>
+                      <FieldsetTitle>
                         <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                      </Legend>
+                      </FieldsetTitle>
                       <Input
                         type="text"
                         id={`${uid}-bank-code`}
@@ -2147,9 +2147,9 @@ const BankAccountSection = ({
                     </Fieldset>
                   ) : user.country_code === "EG" ? (
                     <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                      <Legend>
+                      <FieldsetTitle>
                         <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                      </Legend>
+                      </FieldsetTitle>
                       <Input
                         type="text"
                         id={`${uid}-bank-code`}
@@ -2163,9 +2163,9 @@ const BankAccountSection = ({
                     </Fieldset>
                   ) : user.country_code === "SA" ? (
                     <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                      <Legend>
+                      <FieldsetTitle>
                         <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                      </Legend>
+                      </FieldsetTitle>
                       <Input
                         type="text"
                         id={`${uid}-bank-code`}
@@ -2179,9 +2179,9 @@ const BankAccountSection = ({
                     </Fieldset>
                   ) : user.country_code === "MU" ? (
                     <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                      <Legend>
+                      <FieldsetTitle>
                         <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                      </Legend>
+                      </FieldsetTitle>
                       <Input
                         type="text"
                         id={`${uid}-bank-code`}
@@ -2195,9 +2195,9 @@ const BankAccountSection = ({
                     </Fieldset>
                   ) : user.country_code === "KZ" ? (
                     <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                      <Legend>
+                      <FieldsetTitle>
                         <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                      </Legend>
+                      </FieldsetTitle>
                       <Input
                         type="text"
                         id={`${uid}-bank-code`}
@@ -2211,9 +2211,9 @@ const BankAccountSection = ({
                     </Fieldset>
                   ) : user.country_code === "SV" ? (
                     <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                      <Legend>
+                      <FieldsetTitle>
                         <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                      </Legend>
+                      </FieldsetTitle>
                       <Input
                         type="text"
                         id={`${uid}-bank-code`}
@@ -2227,9 +2227,9 @@ const BankAccountSection = ({
                     </Fieldset>
                   ) : user.country_code === "AL" ? (
                     <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                      <Legend>
+                      <FieldsetTitle>
                         <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                      </Legend>
+                      </FieldsetTitle>
                       <Input
                         type="text"
                         id={`${uid}-bank-code`}
@@ -2243,9 +2243,9 @@ const BankAccountSection = ({
                     </Fieldset>
                   ) : user.country_code === "BH" ? (
                     <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                      <Legend>
+                      <FieldsetTitle>
                         <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                      </Legend>
+                      </FieldsetTitle>
                       <Input
                         type="text"
                         id={`${uid}-bank-code`}
@@ -2259,9 +2259,9 @@ const BankAccountSection = ({
                     </Fieldset>
                   ) : user.country_code === "JO" ? (
                     <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                      <Legend>
+                      <FieldsetTitle>
                         <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                      </Legend>
+                      </FieldsetTitle>
                       <Input
                         type="text"
                         id={`${uid}-bank-code`}
@@ -2276,9 +2276,9 @@ const BankAccountSection = ({
                   ) : user.country_code === "AZ" ? (
                     <>
                       <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                        <Legend>
+                        <FieldsetTitle>
                           <Label htmlFor={`${uid}-bank-code`}>Bank code</Label>
-                        </Legend>
+                        </FieldsetTitle>
                         <Input
                           type="text"
                           id={`${uid}-bank-code`}
@@ -2291,9 +2291,9 @@ const BankAccountSection = ({
                         />
                       </Fieldset>
                       <Fieldset state={errorFieldNames.has("branch_code") ? "danger" : undefined}>
-                        <Legend>
+                        <FieldsetTitle>
                           <Label htmlFor={`${uid}-branch-code`}>Branch code</Label>
-                        </Legend>
+                        </FieldsetTitle>
                         <Input
                           type="text"
                           id={`${uid}-branch-code`}
@@ -2308,9 +2308,9 @@ const BankAccountSection = ({
                     </>
                   ) : user.country_code === "AO" ? (
                     <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                      <Legend>
+                      <FieldsetTitle>
                         <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                      </Legend>
+                      </FieldsetTitle>
                       <Input
                         type="text"
                         id={`${uid}-bank-code`}
@@ -2324,9 +2324,9 @@ const BankAccountSection = ({
                     </Fieldset>
                   ) : user.country_code === "SM" ? (
                     <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                      <Legend>
+                      <FieldsetTitle>
                         <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                      </Legend>
+                      </FieldsetTitle>
                       <Input
                         type="text"
                         id={`${uid}-bank-code`}
@@ -2340,9 +2340,9 @@ const BankAccountSection = ({
                     </Fieldset>
                   ) : user.country_code === "KW" ? (
                     <Fieldset state={errorFieldNames.has("bank_code") ? "danger" : undefined}>
-                      <Legend>
+                      <FieldsetTitle>
                         <Label htmlFor={`${uid}-bank-code`}>SWIFT / BIC Code</Label>
-                      </Legend>
+                      </FieldsetTitle>
                       <Input
                         type="text"
                         id={`${uid}-bank-code`}
@@ -2356,9 +2356,9 @@ const BankAccountSection = ({
                     </Fieldset>
                   ) : null}
                   <Fieldset state={errorFieldNames.has("account_number") ? "danger" : undefined}>
-                    <Legend>
+                    <FieldsetTitle>
                       <Label htmlFor={`${uid}-account-number`}>IBAN</Label>
-                    </Legend>
+                    </FieldsetTitle>
                     <Input
                       type="text"
                       id={`${uid}-account-number`}
@@ -2370,9 +2370,9 @@ const BankAccountSection = ({
                     />
                   </Fieldset>
                   <Fieldset state={errorFieldNames.has("account_number_confirmation") ? "danger" : undefined}>
-                    <Legend>
+                    <FieldsetTitle>
                       <Label htmlFor={`${uid}-confirm-account-number`}>Confirm IBAN</Label>
-                    </Legend>
+                    </FieldsetTitle>
                     <Input
                       type="text"
                       id={`${uid}-confirm-account-number`}
@@ -2387,13 +2387,13 @@ const BankAccountSection = ({
               ) : (
                 <>
                   <Fieldset state={errorFieldNames.has("account_number") ? "danger" : undefined}>
-                    <Legend>
+                    <FieldsetTitle>
                       <Label htmlFor={`${uid}-account-number`}>
                         {user.country_code && ["US", "MX", "AR", "PE"].includes(user.country_code)
                           ? "Account number"
                           : "Account #"}
                       </Label>
-                    </Legend>
+                    </FieldsetTitle>
                     <Input
                       type="text"
                       id={`${uid}-account-number`}
@@ -2405,13 +2405,13 @@ const BankAccountSection = ({
                     />
                   </Fieldset>
                   <Fieldset state={errorFieldNames.has("account_number_confirmation") ? "danger" : undefined}>
-                    <Legend>
+                    <FieldsetTitle>
                       <Label htmlFor={`${uid}-confirm-account-number`}>
                         {user.country_code && ["US", "MX", "AR", "PE"].includes(user.country_code)
                           ? "Confirm account number"
                           : "Confirm account #"}
                       </Label>
-                    </Legend>
+                    </FieldsetTitle>
                     <Input
                       type="text"
                       id={`${uid}-confirm-account-number`}
@@ -2432,11 +2432,11 @@ const BankAccountSection = ({
               >
                 {bankAccountDetails.routing_number !== null && (
                   <Fieldset>
-                    <Legend>
+                    <FieldsetTitle>
                       <Label htmlFor={`${uid}-saved-routing-number`}>
                         {getRoutingNumberLabel(user.country_code || "")}
                       </Label>
-                    </Legend>
+                    </FieldsetTitle>
                     <Input
                       id={`${uid}-saved-routing-number`}
                       disabled
@@ -2445,9 +2445,9 @@ const BankAccountSection = ({
                   </Fieldset>
                 )}
                 <Fieldset>
-                  <Legend>
+                  <FieldsetTitle>
                     <Label htmlFor={`${uid}-saved-account-number`}>Account number</Label>
-                  </Legend>
+                  </FieldsetTitle>
                   <Input
                     id={`${uid}-saved-account-number`}
                     disabled
diff --git a/app/javascript/components/Settings/PaymentsPage/PayPalConnectSection.tsx b/app/javascript/components/Settings/PaymentsPage/PayPalConnectSection.tsx
index 71b4e9211b..e2b38c799b 100644
--- a/app/javascript/components/Settings/PaymentsPage/PayPalConnectSection.tsx
+++ b/app/javascript/components/Settings/PaymentsPage/PayPalConnectSection.tsx
@@ -8,10 +8,10 @@ import { Button } from "$app/components/Button";
 import { Icon } from "$app/components/Icons";
 import { showAlert } from "$app/components/server-components/Alert";
 import { Alert } from "$app/components/ui/Alert";
-import { Fieldset, Legend } from "$app/components/ui/Fieldset";
+import { Fieldset, FieldsetTitle } from "$app/components/ui/Fieldset";
+import { FormSection } from "$app/components/ui/FormSection";
 import { InputGroup } from "$app/components/ui/InputGroup";
 import { Label } from "$app/components/ui/Label";
-import { Section } from "$app/components/ui/Section";
 
 export type PayPalConnect = {
   email: string | null;
@@ -50,7 +50,7 @@ const PayPalConnectSection = ({
   });
 
   return (
-    <Section
+    <FormSection
       className="p-4! md:p-8!"
       header={
         <>
@@ -103,9 +103,9 @@ const PayPalConnectSection = ({
             <p>{connectAccountFeeInfoText}</p>
             <div className="grid gap-8">
               <Fieldset>
-                <Legend>
+                <FieldsetTitle>
                   <Label>PayPal account</Label>
-                </Legend>
+                </FieldsetTitle>
                 <InputGroup readOnly>
                   <span className="flex-1">{paypalConnect.charge_processor_merchant_id}</span>
                   <Icon name="solid-check-circle" className="text-success" />
@@ -170,7 +170,7 @@ const PayPalConnectSection = ({
           </>
         )}
       </div>
-    </Section>
+    </FormSection>
   );
 };
 export default PayPalConnectSection;
diff --git a/app/javascript/components/Settings/PaymentsPage/PayPalEmailSection.tsx b/app/javascript/components/Settings/PaymentsPage/PayPalEmailSection.tsx
index c2b9dd6e3d..5e2a7a11b8 100644
--- a/app/javascript/components/Settings/PaymentsPage/PayPalEmailSection.tsx
+++ b/app/javascript/components/Settings/PaymentsPage/PayPalEmailSection.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 import type { FormFieldName, PayoutMethod } from "$app/types/payments";
 
 import { Alert } from "$app/components/ui/Alert";
-import { Fieldset, Legend } from "$app/components/ui/Fieldset";
+import { Fieldset, FieldsetTitle } from "$app/components/ui/Fieldset";
 import { Input } from "$app/components/ui/Input";
 import { Label } from "$app/components/ui/Label";
 
@@ -46,9 +46,9 @@ const PayPalEmailSection = ({
           </button>
         ) : null}
         <Fieldset state={errorFieldNames.has("paypal_email_address") ? "danger" : undefined}>
-          <Legend>
+          <FieldsetTitle>
             <Label htmlFor={`${uid}-paypal-email`}>PayPal Email</Label>
-          </Legend>
+          </FieldsetTitle>
           <Input
             type="email"
             id={`${uid}-paypal-email`}
diff --git a/app/javascript/components/Settings/PaymentsPage/StripeConnectSection.tsx b/app/javascript/components/Settings/PaymentsPage/StripeConnectSection.tsx
index b9c06091b0..f636982b1b 100644
--- a/app/javascript/components/Settings/PaymentsPage/StripeConnectSection.tsx
+++ b/app/javascript/components/Settings/PaymentsPage/StripeConnectSection.tsx
@@ -9,7 +9,7 @@ import { Icon } from "$app/components/Icons";
 import { showAlert } from "$app/components/server-components/Alert";
 import { SocialAuthButton } from "$app/components/SocialAuthButton";
 import { Alert } from "$app/components/ui/Alert";
-import { Fieldset, Legend } from "$app/components/ui/Fieldset";
+import { Fieldset, FieldsetTitle } from "$app/components/ui/Fieldset";
 import { InputGroup } from "$app/components/ui/InputGroup";
 import { Label } from "$app/components/ui/Label";
 
@@ -69,9 +69,9 @@ const StripeConnectSection = ({
         {stripeConnect.has_connected_stripe ? (
           <div className="grid gap-8">
             <Fieldset>
-              <Legend>
+              <FieldsetTitle>
                 <Label>Stripe account</Label>
-              </Legend>
+              </FieldsetTitle>
               <InputGroup readOnly>
                 <span className="flex-1">{stripeConnect.stripe_connect_account_id}</span>
                 <Icon name="solid-check-circle" className="text-success" />
diff --git a/app/javascript/pages/Oauth/Applications/Edit.tsx b/app/javascript/pages/Oauth/Applications/Edit.tsx
index 414adea015..ea3b057413 100644
--- a/app/javascript/pages/Oauth/Applications/Edit.tsx
+++ b/app/javascript/pages/Oauth/Applications/Edit.tsx
@@ -6,7 +6,7 @@ import { SettingPage } from "$app/parsers/settings";
 
 import ApplicationForm from "$app/components/Settings/AdvancedPage/ApplicationForm";
 import { Layout } from "$app/components/Settings/Layout";
-import { Section } from "$app/components/ui/Section";
+import { FormSection } from "$app/components/ui/FormSection";
 
 type Application = {
   id: string;
@@ -28,9 +28,9 @@ export default function EditApplicationPage() {
   return (
     <Layout currentPage="advanced" pages={props.settings_pages}>
       <form>
-        <Section className="p-4! md:p-8!" header={<h2>Edit application</h2>}>
+        <FormSection className="p-4! md:p-8!" header={<h2>Edit application</h2>}>
           <ApplicationForm application={props.application} />
-        </Section>
+        </FormSection>
       </form>
     </Layout>
   );
diff --git a/app/javascript/pages/Settings/Password/Show.tsx b/app/javascript/pages/Settings/Password/Show.tsx
index beed1768e4..28008ae0cb 100644
--- a/app/javascript/pages/Settings/Password/Show.tsx
+++ b/app/javascript/pages/Settings/Password/Show.tsx
@@ -8,9 +8,9 @@ import { Button } from "$app/components/Button";
 import { PasswordInput } from "$app/components/PasswordInput";
 import { showAlert } from "$app/components/server-components/Alert";
 import { Layout as SettingsLayout } from "$app/components/Settings/Layout";
-import { Fieldset, Legend } from "$app/components/ui/Fieldset";
+import { Fieldset, FieldsetTitle } from "$app/components/ui/Fieldset";
+import { FormSection } from "$app/components/ui/FormSection";
 import { Label } from "$app/components/ui/Label";
-import { Section } from "$app/components/ui/Section";
 
 const MIN_PASSWORD_LENGTH = 4;
 const MAX_PASSWORD_LENGTH = 128;
@@ -57,12 +57,12 @@ export default function PasswordPage() {
   return (
     <SettingsLayout currentPage="password" pages={props.settings_pages}>
       <form onSubmit={handleSubmit}>
-        <Section className="p-4! md:p-8!" header={<h2>Change password</h2>}>
+        <FormSection className="p-4! md:p-8!" header={<h2>Change password</h2>}>
           {requireOldPassword ? (
             <Fieldset>
-              <Legend>
+              <FieldsetTitle>
                 <Label htmlFor={`${uid}-old-password`}>Old password</Label>
-              </Legend>
+              </FieldsetTitle>
               <PasswordInput
                 id={`${uid}-old-password`}
                 value={form.data.user.password}
@@ -73,9 +73,9 @@ export default function PasswordPage() {
             </Fieldset>
           ) : null}
           <Fieldset>
-            <Legend>
+            <FieldsetTitle>
               <Label htmlFor={`${uid}-new-password`}>{requireOldPassword ? "New password" : "Add password"}</Label>
-            </Legend>
+            </FieldsetTitle>
             <PasswordInput
               id={`${uid}-new-password`}
               value={form.data.user.new_password}
@@ -91,7 +91,7 @@ export default function PasswordPage() {
               </Button>
             </div>
           </Fieldset>
-        </Section>
+        </FormSection>
       </form>
     </SettingsLayout>
   );
diff --git a/app/javascript/pages/Settings/Profile/Show.tsx b/app/javascript/pages/Settings/Profile/Show.tsx
index cd73e0fe0e..8757ec1310 100644
--- a/app/javascript/pages/Settings/Profile/Show.tsx
+++ b/app/javascript/pages/Settings/Profile/Show.tsx
@@ -21,11 +21,11 @@ import { showAlert } from "$app/components/server-components/Alert";
 import { Profile, Props as ProfileProps } from "$app/components/server-components/Profile";
 import { Layout as SettingsLayout } from "$app/components/Settings/Layout";
 import { SocialAuthButton } from "$app/components/SocialAuthButton";
-import { Fieldset, Legend } from "$app/components/ui/Fieldset";
-import { Label } from "$app/components/ui/Label";
+import { ColorPicker } from "$app/components/ui/ColorPicker";
+import { Fieldset, FieldsetTitle } from "$app/components/ui/Fieldset";
 import { Input } from "$app/components/ui/Input";
+import { Label } from "$app/components/ui/Label";
 import { Textarea } from "$app/components/ui/Textarea";
-import { ColorPicker } from "$app/components/ui/ColorPicker";
 
 type ProfilePageProps = {
   profile_settings: ProfileSettings;
@@ -112,9 +112,9 @@ export default function SettingsPage() {
               <h2>Profile</h2>
             </header>
             <Fieldset>
-              <Legend>
+              <FieldsetTitle>
                 <Label htmlFor={`${uid}-username`}>Username</Label>
-              </Legend>
+              </FieldsetTitle>
               <Input
                 id={`${uid}-username`}
                 type="text"
@@ -129,9 +129,9 @@ export default function SettingsPage() {
               </small>
             </Fieldset>
             <Fieldset>
-              <Legend>
+              <FieldsetTitle>
                 <Label htmlFor={`${uid}-name`}>Name</Label>
-              </Legend>
+              </FieldsetTitle>
               <Input
                 id={`${uid}-name`}
                 type="text"
@@ -144,9 +144,9 @@ export default function SettingsPage() {
               />
             </Fieldset>
             <Fieldset>
-              <Legend>
+              <FieldsetTitle>
                 <Label htmlFor={`${uid}-bio`}>Bio</Label>
-              </Legend>
+              </FieldsetTitle>
               <Textarea
                 id={`${uid}-bio`}
                 value={profileSettings.bio ?? ""}
@@ -167,7 +167,7 @@ export default function SettingsPage() {
             />
             {loggedInUser?.policies.settings_profile.manage_social_connections ? (
               <Fieldset>
-                <Legend>Social links</Legend>
+                <FieldsetTitle>Social links</FieldsetTitle>
                 {creatorProfile.twitter_handle ? (
                   <Button type="button" color="twitter" onClick={handleUnlinkTwitter}>
                     <span className="brand-icon brand-icon-twitter" />
@@ -192,7 +192,7 @@ export default function SettingsPage() {
               <h2>Design</h2>
             </header>
             <Fieldset>
-              <Legend>Font</Legend>
+              <FieldsetTitle>Font</FieldsetTitle>
               <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3" role="radiogroup">
                 {FONT_CHOICES.map((font) => {
                   const isSelected = font === profileSettings.font;
@@ -222,9 +222,9 @@ export default function SettingsPage() {
             </Fieldset>
             <div className="flex gap-4">
               <Fieldset>
-                <Legend>
+                <FieldsetTitle>
                   <Label htmlFor={`${uid}-backgroundColor`}>Background color</Label>
-                </Legend>
+                </FieldsetTitle>
                 <ColorPicker
                   id={`${uid}-backgroundColor`}
                   value={profileSettings.background_color}
@@ -233,9 +233,9 @@ export default function SettingsPage() {
                 />
               </Fieldset>
               <Fieldset>
-                <Legend>
+                <FieldsetTitle>
                   <Label htmlFor={`${uid}-highlightColor`}>Highlight color</Label>
-                </Legend>
+                </FieldsetTitle>
                 <ColorPicker
                   id={`${uid}-highlightColor`}
                   value={profileSettings.highlight_color}
diff --git a/app/javascript/pages/Settings/Team/Show.tsx b/app/javascript/pages/Settings/Team/Show.tsx
index 5b05991283..ebee523678 100644
--- a/app/javascript/pages/Settings/Team/Show.tsx
+++ b/app/javascript/pages/Settings/Team/Show.tsx
@@ -28,12 +28,12 @@ import { Option, Select } from "$app/components/Select";
 import { showAlert } from "$app/components/server-components/Alert";
 import { Layout as SettingsLayout } from "$app/components/Settings/Layout";
 import { Alert } from "$app/components/ui/Alert";
+import { Fieldset, FieldsetTitle } from "$app/components/ui/Fieldset";
+import { FormSection } from "$app/components/ui/FormSection";
+import { Input } from "$app/components/ui/Input";
+import { Label } from "$app/components/ui/Label";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "$app/components/ui/Table";
 import { WithTooltip } from "$app/components/WithTooltip";
-import { Section } from "$app/components/ui/Section";
-import { Fieldset, Legend } from "$app/components/ui/Fieldset";
-import { Label } from "$app/components/ui/Label";
-import { Input } from "$app/components/ui/Input";
 
 const ROLE_TITLES: Record<Role, string> = {
   owner: "Owner",
@@ -132,7 +132,7 @@ const AddTeamMembersSection = ({
   });
 
   return (
-    <Section
+    <FormSection
       className="p-4! md:p-8!"
       header={
         <>
@@ -152,9 +152,9 @@ const AddTeamMembersSection = ({
         }}
       >
         <Fieldset state={errors.has("email") ? "danger" : undefined}>
-          <Legend>
+          <FieldsetTitle>
             <Label htmlFor={emailUID}>Email</Label>
-          </Legend>
+          </FieldsetTitle>
           <Input
             id={emailUID}
             type="text"
@@ -169,9 +169,9 @@ const AddTeamMembersSection = ({
           />
         </Fieldset>
         <Fieldset state={errors.has("role") ? "danger" : undefined}>
-          <Legend>
+          <FieldsetTitle>
             <Label htmlFor={roleUID}>Role</Label>
-          </Legend>
+          </FieldsetTitle>
           <Select
             ref={roleFieldRef}
             inputId={roleUID}
@@ -199,7 +199,7 @@ const AddTeamMembersSection = ({
           "Send invitation"
         )}
       </Button>
-    </Section>
+    </FormSection>
   );
 };
 
@@ -266,7 +266,7 @@ const TeamMembersSection = ({
   };
 
   return (
-    <Section className="p-4! md:p-8!" header={<h2 ref={ref}>Team members</h2>}>
+    <FormSection className="p-4! md:p-8!" header={<h2 ref={ref}>Team members</h2>}>
       {deletedMember ? (
         <Alert variant="success">
           <div className="flex flex-col justify-between sm:flex-row">
@@ -393,6 +393,6 @@ const TeamMembersSection = ({
           have access.
         </Modal>
       ) : null}
-    </Section>
+    </FormSection>
   );
 };

From 4977a2742804c46244d99195214785b5104ea9a9 Mon Sep 17 00:00:00 2001
From: Salman Najah <salmannajah123@gmail.com>
Date: Sun, 1 Feb 2026 22:51:45 +0530
Subject: [PATCH 4/7] fix

---
 app/javascript/components/CustomDomain.tsx    |  4 ++--
 .../AdvancedPage/BlockEmailsSection.tsx       |  4 ++--
 .../NotificationEndpointSection.tsx           |  4 ++--
 .../ProductLevelSupportEmailsForm.tsx         |  6 +++--
 .../PaymentsPage/AccountDetailsSection.tsx    |  4 ++--
 .../PaymentsPage/BankAccountSection.tsx       |  4 ++--
 app/javascript/components/ui/FormSection.tsx  |  2 +-
 app/javascript/pages/Settings/Main/Show.tsx   | 22 +++++++++----------
 .../pages/Settings/Payments/Show.tsx          | 18 ++++++++-------
 .../pages/Settings/Profile/Show.tsx           |  8 +++----
 .../Settings/ThirdPartyAnalytics/Show.tsx     |  6 +++--
 app/javascript/stylesheets/_forms.scss        | 20 -----------------
 12 files changed, 44 insertions(+), 58 deletions(-)

diff --git a/app/javascript/components/CustomDomain.tsx b/app/javascript/components/CustomDomain.tsx
index bb6be18261..0a3089ef8f 100644
--- a/app/javascript/components/CustomDomain.tsx
+++ b/app/javascript/components/CustomDomain.tsx
@@ -5,7 +5,7 @@ import { asyncVoid } from "$app/utils/promise";
 import { assertResponseError, request, ResponseError } from "$app/utils/request";
 
 import { Button } from "$app/components/Button";
-import { Fieldset, FieldsetTitle } from "$app/components/ui/Fieldset";
+import { Fieldset, FieldsetDescription, FieldsetTitle } from "$app/components/ui/Fieldset";
 import { Input } from "$app/components/ui/Input";
 import { InputGroup } from "$app/components/ui/InputGroup";
 import { Label } from "$app/components/ui/Label";
@@ -115,7 +115,7 @@ const CustomDomain = ({
           </Pill>
         ) : null}
       </InputGroup>
-      <small className="text-muted">{verificationInfo.message}</small>
+      <FieldsetDescription>{verificationInfo.message}</FieldsetDescription>
     </Fieldset>
   );
 };
diff --git a/app/javascript/components/Settings/AdvancedPage/BlockEmailsSection.tsx b/app/javascript/components/Settings/AdvancedPage/BlockEmailsSection.tsx
index 0efab7369a..6326e7f05b 100644
--- a/app/javascript/components/Settings/AdvancedPage/BlockEmailsSection.tsx
+++ b/app/javascript/components/Settings/AdvancedPage/BlockEmailsSection.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 
 import { isValidEmail } from "$app/utils/email";
 
-import { Fieldset, FieldsetTitle } from "$app/components/ui/Fieldset";
+import { Fieldset, FieldsetDescription, FieldsetTitle } from "$app/components/ui/Fieldset";
 import { FormSection } from "$app/components/ui/FormSection";
 import { Label } from "$app/components/ui/Label";
 import { Textarea } from "$app/components/ui/Textarea";
@@ -67,7 +67,7 @@ const BlockEmailsSection = ({ blockedEmails, setBlockedEmails }: Props) => {
           onChange={(e) => setBlockedEmails(e.target.value)}
           onBlur={sanitizeBlockedEmails}
         />
-        <small className="text-muted">Please enter each email address on a new line.</small>
+        <FieldsetDescription>Please enter each email address on a new line.</FieldsetDescription>
       </Fieldset>
     </FormSection>
   );
diff --git a/app/javascript/components/Settings/AdvancedPage/NotificationEndpointSection.tsx b/app/javascript/components/Settings/AdvancedPage/NotificationEndpointSection.tsx
index 580a36fd81..83008d2a25 100644
--- a/app/javascript/components/Settings/AdvancedPage/NotificationEndpointSection.tsx
+++ b/app/javascript/components/Settings/AdvancedPage/NotificationEndpointSection.tsx
@@ -6,7 +6,7 @@ import { assertResponseError, request, ResponseError } from "$app/utils/request"
 
 import { Button } from "$app/components/Button";
 import { showAlert } from "$app/components/server-components/Alert";
-import { Fieldset, FieldsetTitle } from "$app/components/ui/Fieldset";
+import { Fieldset, FieldsetDescription, FieldsetTitle } from "$app/components/ui/Fieldset";
 import { FormSection } from "$app/components/ui/FormSection";
 import { Input } from "$app/components/ui/Input";
 import { InputGroup } from "$app/components/ui/InputGroup";
@@ -84,7 +84,7 @@ const NotificationEndpointSection = ({
             </Pill>
           </WithTooltip>
         </InputGroup>
-        <small className="text-muted">For external services, your `seller_id` is {userId}</small>
+        <FieldsetDescription>For external services, your `seller_id` is {userId}</FieldsetDescription>
       </Fieldset>
     </FormSection>
   );
diff --git a/app/javascript/components/Settings/AdvancedPage/ProductLevelSupportEmailsForm.tsx b/app/javascript/components/Settings/AdvancedPage/ProductLevelSupportEmailsForm.tsx
index e0a4a8f21e..2b9e47a2e6 100644
--- a/app/javascript/components/Settings/AdvancedPage/ProductLevelSupportEmailsForm.tsx
+++ b/app/javascript/components/Settings/AdvancedPage/ProductLevelSupportEmailsForm.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 import { Button } from "$app/components/Button";
 import { Icon } from "$app/components/Icons";
 import { TagInput } from "$app/components/TagInput";
-import { Fieldset, FieldsetTitle } from "$app/components/ui/Fieldset";
+import { Fieldset, FieldsetDescription, FieldsetTitle } from "$app/components/ui/Fieldset";
 import { Input } from "$app/components/ui/Input";
 import { Label } from "$app/components/ui/Label";
 import { Placeholder } from "$app/components/ui/Placeholder";
@@ -89,7 +89,9 @@ const ProductLevelSupportEmailRow = React.memo(
                 required={supportEmail.product_ids.length > 0}
                 onChange={handleEmailChange}
               />
-              <small className="text-muted">This reply-to email will appear on receipts for selected products.</small>
+              <FieldsetDescription>
+                This reply-to email will appear on receipts for selected products.
+              </FieldsetDescription>
             </Fieldset>
             <Fieldset>
               <FieldsetTitle>
diff --git a/app/javascript/components/Settings/PaymentsPage/AccountDetailsSection.tsx b/app/javascript/components/Settings/PaymentsPage/AccountDetailsSection.tsx
index b5f7bac8fb..0597bbe7a8 100644
--- a/app/javascript/components/Settings/PaymentsPage/AccountDetailsSection.tsx
+++ b/app/javascript/components/Settings/PaymentsPage/AccountDetailsSection.tsx
@@ -8,7 +8,7 @@ import { classNames } from "$app/utils/classNames";
 import { Button } from "$app/components/Button";
 import { Icon } from "$app/components/Icons";
 import { Checkbox } from "$app/components/ui/Checkbox";
-import { Fieldset, FieldsetTitle } from "$app/components/ui/Fieldset";
+import { Fieldset, FieldsetDescription, FieldsetTitle } from "$app/components/ui/Fieldset";
 import { Input } from "$app/components/ui/Input";
 import { Label } from "$app/components/ui/Label";
 import { Select } from "$app/components/ui/Select";
@@ -667,7 +667,7 @@ const AccountDetailsSection = ({
               required
               onChange={(evt) => updateComplianceInfo({ first_name: evt.target.value })}
             />
-            <small className="text-muted">Include your middle name if it appears on your ID.</small>
+            <FieldsetDescription>Include your middle name if it appears on your ID.</FieldsetDescription>
           </Fieldset>
           <Fieldset state={errorFieldNames.has("last_name") ? "danger" : undefined}>
             <FieldsetTitle>
diff --git a/app/javascript/components/Settings/PaymentsPage/BankAccountSection.tsx b/app/javascript/components/Settings/PaymentsPage/BankAccountSection.tsx
index a14297d890..27c82b9992 100644
--- a/app/javascript/components/Settings/PaymentsPage/BankAccountSection.tsx
+++ b/app/javascript/components/Settings/PaymentsPage/BankAccountSection.tsx
@@ -5,7 +5,7 @@ import type { FormFieldName, User } from "$app/types/payments";
 
 import { Button } from "$app/components/Button";
 import { Alert } from "$app/components/ui/Alert";
-import { Fieldset, FieldsetTitle } from "$app/components/ui/Fieldset";
+import { Fieldset, FieldsetDescription, FieldsetTitle } from "$app/components/ui/Fieldset";
 import { Input } from "$app/components/ui/Input";
 import { Label } from "$app/components/ui/Label";
 import { Select } from "$app/components/ui/Select";
@@ -948,7 +948,7 @@ const BankAccountSection = ({
             aria-invalid={errorFieldNames.has("account_holder_full_name")}
             onChange={(evt) => updateBankAccount({ account_holder_full_name: evt.target.value })}
           />
-          <small className="text-muted">Must exactly match the name on your bank account</small>
+          <FieldsetDescription>Must exactly match the name on your bank account</FieldsetDescription>
         </Fieldset>
         <div className="grid gap-2">
           {showNewBankAccount ? (
diff --git a/app/javascript/components/ui/FormSection.tsx b/app/javascript/components/ui/FormSection.tsx
index a88dee4ae4..01ad33f6e1 100644
--- a/app/javascript/components/ui/FormSection.tsx
+++ b/app/javascript/components/ui/FormSection.tsx
@@ -18,6 +18,6 @@ export const FormSection = ({
     )}
   >
     {header ? <header className="grid content-start gap-3 lg:col-span-1">{header}</header> : null}
-    <div className="grid gap-8 lg:col-start-2 lg:gap-0 [&>*]:lg:mb-8">{children}</div>
+    <div className="grid gap-8 lg:col-start-2 lg:mb-8">{children}</div>
   </section>
 );
diff --git a/app/javascript/pages/Settings/Main/Show.tsx b/app/javascript/pages/Settings/Main/Show.tsx
index fedcf621fe..f45ed5272e 100644
--- a/app/javascript/pages/Settings/Main/Show.tsx
+++ b/app/javascript/pages/Settings/Main/Show.tsx
@@ -15,7 +15,7 @@ import { ProductLevelSupportEmailsForm } from "$app/components/Settings/Advanced
 import { Layout } from "$app/components/Settings/Layout";
 import { TagInput } from "$app/components/TagInput";
 import { Checkbox } from "$app/components/ui/Checkbox";
-import { Fieldset, FieldsetTitle } from "$app/components/ui/Fieldset";
+import { Fieldset, FieldsetDescription, FieldsetTitle } from "$app/components/ui/Fieldset";
 import { FormSection } from "$app/components/ui/FormSection";
 import { Input } from "$app/components/ui/Input";
 import { InputGroup } from "$app/components/ui/InputGroup";
@@ -135,7 +135,7 @@ export default function MainPage() {
               onChange={(e) => updateUserSettings({ email: e.target.value })}
             />
             {props.user.has_unconfirmed_email && !props.is_form_disabled ? (
-              <small className="text-muted">
+              <FieldsetDescription>
                 This email address has not been confirmed yet.{" "}
                 {resentConfirmationEmail ? null : (
                   <button
@@ -148,7 +148,7 @@ export default function MainPage() {
                     {resendConfirmationEmailForm.processing ? "Resending..." : "Resend confirmation?"}
                   </button>
                 )}
-              </small>
+              </FieldsetDescription>
             ) : null}
           </Fieldset>
         </FormSection>
@@ -292,7 +292,7 @@ export default function MainPage() {
               disabled={isFormDisabled}
               onChange={(e) => updateUserSettings({ support_email: e.target.value })}
             />
-            <small className="text-muted">This email is listed on the receipt of every sale.</small>
+            <FieldsetDescription>This email is listed on the receipt of every sale.</FieldsetDescription>
           </Fieldset>
           {props.user.product_level_support_emails !== null && (
             <ProductLevelSupportEmailsForm
@@ -415,11 +415,11 @@ export default function MainPage() {
                 </option>
               ))}
             </Select>
-            <small className="text-muted">Applies only to new products.</small>
-            <small className="text-muted">
+            <FieldsetDescription>Applies only to new products.</FieldsetDescription>
+            <FieldsetDescription>
               Charges will happen in USD, using an up-to-date exchange rate. Customers may incur an additional foreign
               transaction fee according to their cardmember agreement.
-            </small>
+            </FieldsetDescription>
           </Fieldset>
           <Fieldset>
             <ToggleSettingRow
@@ -500,12 +500,12 @@ export default function MainPage() {
                 </div>
               }
             />
-            <small className="text-muted">
+            <FieldsetDescription>
               Charge customers different amounts depending on the cost of living in their country.{" "}
               <a href="/help/article/327-purchasing-power-parity" target="_blank" rel="noreferrer">
                 Learn more
               </a>
-            </small>
+            </FieldsetDescription>
           </Fieldset>
         </FormSection>
         <FormSection className="p-4! md:p-8!" header={<h2>Adult content</h2>}>
@@ -526,9 +526,9 @@ export default function MainPage() {
               disabled={isFormDisabled}
               label="Prevent others from adding me as an affiliate"
             />
-            <small className="text-muted">
+            <FieldsetDescription>
               When enabled, other users cannot add you as an affiliate or request to become your affiliate.
-            </small>
+            </FieldsetDescription>
           </Fieldset>
         </FormSection>
         {props.invalidate_active_sessions ? <InvalidateActiveSessionsSection /> : null}
diff --git a/app/javascript/pages/Settings/Payments/Show.tsx b/app/javascript/pages/Settings/Payments/Show.tsx
index 87999078f4..53dfcec406 100644
--- a/app/javascript/pages/Settings/Payments/Show.tsx
+++ b/app/javascript/pages/Settings/Payments/Show.tsx
@@ -31,7 +31,7 @@ import PayPalEmailSection from "$app/components/Settings/PaymentsPage/PayPalEmai
 import StripeConnectSection, { StripeConnect } from "$app/components/Settings/PaymentsPage/StripeConnectSection";
 import { TypeSafeOptionSelect } from "$app/components/TypeSafeOptionSelect";
 import { Alert } from "$app/components/ui/Alert";
-import { Fieldset } from "$app/components/ui/Fieldset";
+import { Fieldset, FieldsetDescription } from "$app/components/ui/Fieldset";
 import { FormSection } from "$app/components/ui/FormSection";
 import { Label } from "$app/components/ui/Label";
 import { Switch } from "$app/components/ui/Switch";
@@ -739,10 +739,10 @@ export default function PaymentsPage() {
         disabled={props.is_form_disabled || props.payouts_paused_internally}
         label="Pause payouts"
       />
-      <small className="text-muted">
+      <FieldsetDescription>
         By pausing payouts, they won't be processed until you decide to resume them, and your balance will remain in
         your account until then.
-      </small>
+      </FieldsetDescription>
     </Fieldset>
   );
 
@@ -863,10 +863,10 @@ export default function PaymentsPage() {
                   disabled: frequency === "daily" && !props.payout_frequency_daily_supported,
                 }))}
               />
-              <small className="text-muted">
+              <FieldsetDescription>
                 Daily payouts are only available for US users with eligible bank accounts and more than 4 previous
                 payouts.
-              </small>
+              </FieldsetDescription>
             </Fieldset>
             {form.data.payout_frequency === "daily" && props.payout_frequency_daily_supported ? (
               <Alert variant="info" role="status">
@@ -896,15 +896,17 @@ export default function PaymentsPage() {
                 hasError={!!payoutThresholdError}
               />
               {payoutThresholdError ? (
-                <small className="text-muted">
+                <FieldsetDescription>
                   Your payout threshold must be at least{" "}
                   {formatPriceCentsWithCurrencySymbol("usd", props.minimum_payout_threshold_cents, {
                     symbolFormat: "long",
                   })}
                   .
-                </small>
+                </FieldsetDescription>
               ) : (
-                <small className="text-muted">Payouts will only be issued once your balance reaches this amount.</small>
+                <FieldsetDescription>
+                  Payouts will only be issued once your balance reaches this amount.
+                </FieldsetDescription>
               )}
             </Fieldset>
             {props.payouts_paused_internally ? (
diff --git a/app/javascript/pages/Settings/Profile/Show.tsx b/app/javascript/pages/Settings/Profile/Show.tsx
index 8757ec1310..09b58cd3e3 100644
--- a/app/javascript/pages/Settings/Profile/Show.tsx
+++ b/app/javascript/pages/Settings/Profile/Show.tsx
@@ -22,7 +22,7 @@ import { Profile, Props as ProfileProps } from "$app/components/server-component
 import { Layout as SettingsLayout } from "$app/components/Settings/Layout";
 import { SocialAuthButton } from "$app/components/SocialAuthButton";
 import { ColorPicker } from "$app/components/ui/ColorPicker";
-import { Fieldset, FieldsetTitle } from "$app/components/ui/Fieldset";
+import { Fieldset, FieldsetDescription, FieldsetTitle } from "$app/components/ui/Fieldset";
 import { Input } from "$app/components/ui/Input";
 import { Label } from "$app/components/ui/Label";
 import { Textarea } from "$app/components/ui/Textarea";
@@ -107,7 +107,7 @@ export default function SettingsPage() {
       </Head>
       <WithPreviewSidebar>
         <form>
-          <section className="grid gap-8 p-4 md:p-8">
+          <section className="grid gap-8 p-4! md:p-8!">
             <header className="grid content-start gap-3">
               <h2>Profile</h2>
             </header>
@@ -124,9 +124,9 @@ export default function SettingsPage() {
                   updateProfileSettings({ username: evt.target.value.replace(/[^a-z0-9]/giu, "").toLowerCase() })
                 }
               />
-              <small className="text-muted">
+              <FieldsetDescription>
                 View your profile at: <a href={`${scheme}://${subdomain}`}>{subdomain}</a>
-              </small>
+              </FieldsetDescription>
             </Fieldset>
             <Fieldset>
               <FieldsetTitle>
diff --git a/app/javascript/pages/Settings/ThirdPartyAnalytics/Show.tsx b/app/javascript/pages/Settings/ThirdPartyAnalytics/Show.tsx
index df6fce2ac1..52d551c89c 100644
--- a/app/javascript/pages/Settings/ThirdPartyAnalytics/Show.tsx
+++ b/app/javascript/pages/Settings/ThirdPartyAnalytics/Show.tsx
@@ -13,7 +13,7 @@ import { useLoggedInUser } from "$app/components/LoggedInUser";
 import { Layout as SettingsLayout } from "$app/components/Settings/Layout";
 import { TypeSafeOptionSelect } from "$app/components/TypeSafeOptionSelect";
 import { Checkbox } from "$app/components/ui/Checkbox";
-import { Fieldset, FieldsetTitle } from "$app/components/ui/Fieldset";
+import { Fieldset, FieldsetDescription, FieldsetTitle } from "$app/components/ui/Fieldset";
 import { FormSection } from "$app/components/ui/FormSection";
 import { Input } from "$app/components/ui/Input";
 import { Label } from "$app/components/ui/Label";
@@ -181,7 +181,9 @@ export default function ThirdPartyAnalyticsPage() {
                   value={thirdPartyAnalytics.facebook_meta_tag}
                   onChange={(evt) => updateThirdPartyAnalytics({ facebook_meta_tag: evt.target.value })}
                 />
-                <small className="text-muted">Enter meta tag containing the Facebook domain verification code.</small>
+                <FieldsetDescription>
+                  Enter meta tag containing the Facebook domain verification code.
+                </FieldsetDescription>
               </Fieldset>
             </Dropdown>
           </Details>
diff --git a/app/javascript/stylesheets/_forms.scss b/app/javascript/stylesheets/_forms.scss
index 029c4140c6..8dd77da1e8 100644
--- a/app/javascript/stylesheets/_forms.scss
+++ b/app/javascript/stylesheets/_forms.scss
@@ -386,26 +386,6 @@ textarea {
   resize: vertical;
 }
 
-.color-picker {
-  position: relative;
-  overflow: hidden;
-  padding: spacer(4);
-  border: $border;
-  border-radius: border-radius(3);
-  max-width: fit-content;
-
-  > input[type="color"] {
-    position: absolute;
-    width: 200%;
-    height: 200%;
-    max-width: unset;
-    left: -50%;
-    top: -50%;
-    border: none;
-    cursor: pointer;
-  }
-}
-
 [role="radio"],
 [role="checkbox"] {
   cursor: pointer;

From 10fc88ddc2cf1e083bf4fe993edeeab771ce97f7 Mon Sep 17 00:00:00 2001
From: Salman Najah <salmannajah123@gmail.com>
Date: Sun, 1 Feb 2026 23:16:07 +0530
Subject: [PATCH 5/7] Remove .combobox and option SCSS

---
 .../ProductEdit/ContentTab/index.tsx          | 28 +++++---
 app/javascript/stylesheets/_forms.scss        | 67 -------------------
 2 files changed, 17 insertions(+), 78 deletions(-)

diff --git a/app/javascript/components/ProductEdit/ContentTab/index.tsx b/app/javascript/components/ProductEdit/ContentTab/index.tsx
index 1ad02e390b..983963fa78 100644
--- a/app/javascript/components/ProductEdit/ContentTab/index.tsx
+++ b/app/javascript/components/ProductEdit/ContentTab/index.tsx
@@ -58,6 +58,8 @@ import { Posts, PostsProvider } from "$app/components/TiptapExtensions/Posts";
 import { ShortAnswer } from "$app/components/TiptapExtensions/ShortAnswer";
 import { UpsellCard } from "$app/components/TiptapExtensions/UpsellCard";
 import { Card, CardContent } from "$app/components/ui/Card";
+import { Checkbox } from "$app/components/ui/Checkbox";
+import { Label } from "$app/components/ui/Label";
 import { Row, RowContent, Rows } from "$app/components/ui/Rows";
 import { Tab, Tabs } from "$app/components/ui/Tabs";
 import { Product, ProductOption, UpsellSelectModal } from "$app/components/UpsellSelectModal";
@@ -1064,16 +1066,18 @@ export const ContentTab = () => {
                   <>
                     <hr className="relative left-1/2 my-2 w-screen max-w-none -translate-x-1/2 border-border lg:hidden" />
                     <ComboBox<Variant>
-                      // TODO: Currently needed to get the icon on the selected option even though this is not multiple select. We should fix this in the design system
-                      multiple
                       input={(props) => (
-                        <div {...props} className="input h-full min-h-auto" aria-label="Select a version">
-                          <span className="fake-input text-singleline">
+                        <div
+                          {...props}
+                          className="inline-flex h-full min-h-auto cursor-pointer items-center gap-2 rounded border border-border bg-background px-4 py-3"
+                          aria-label="Select a version"
+                        >
+                          <span className="text-singleline flex-1">
                             {selectedVariant && !product.has_same_rich_content_for_all_variants
                               ? `Editing: ${selectedVariant.name || "Untitled"}`
                               : "Editing: All versions"}
                           </span>
-                          <Icon name="outline-cheveron-down" />
+                          <Icon name="outline-cheveron-down" className="text-muted" />
                         </div>
                       )}
                       options={product.variants}
@@ -1088,7 +1092,7 @@ export const ContentTab = () => {
                             aria-selected={item.id === selectedVariantId}
                             inert={product.has_same_rich_content_for_all_variants}
                           >
-                            <div>
+                            <div className="flex-1">
                               <h4>{item.name || "Untitled"}</h4>
                               {item.id === selectedVariant?.id ? (
                                 <small>Editing</small>
@@ -1109,12 +1113,14 @@ export const ContentTab = () => {
                                 <small className="text-muted">No content yet</small>
                               )}
                             </div>
+                            {item.id === selectedVariant?.id && (
+                              <Icon name="solid-check-circle" className="ml-auto text-success" />
+                            )}
                           </div>
                           {index === product.variants.length - 1 ? (
-                            <div className="option">
-                              <label style={{ alignItems: "center" }}>
-                                <input
-                                  type="checkbox"
+                            <div className="flex cursor-pointer items-center px-4 py-2">
+                              <Label className="items-center">
+                                <Checkbox
                                   checked={product.has_same_rich_content_for_all_variants}
                                   onChange={() => {
                                     if (!product.has_same_rich_content_for_all_variants && product.variants.length > 1)
@@ -1123,7 +1129,7 @@ export const ContentTab = () => {
                                   }}
                                 />
                                 <small>Use the same content for all versions</small>
-                              </label>
+                              </Label>
                             </div>
                           ) : null}
                         </>
diff --git a/app/javascript/stylesheets/_forms.scss b/app/javascript/stylesheets/_forms.scss
index 8dd77da1e8..390eca43c0 100644
--- a/app/javascript/stylesheets/_forms.scss
+++ b/app/javascript/stylesheets/_forms.scss
@@ -311,73 +311,6 @@ form {
   }
 }
 
-.combobox {
-  position: relative;
-
-  input[aria-expanded="true"],
-  .input:has(input[aria-expanded="true"]) {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  datalist {
-    display: block;
-    @include bg-color(filled);
-    border: $border;
-    width: 100%;
-    overflow: auto;
-    position: absolute;
-    top: 100%;
-    left: 0;
-    border-radius: 0 0 border-radius(1) border-radius(1);
-    box-shadow: box-shadow(1);
-    z-index: z-index(modal);
-    padding: spacer(2) 0;
-
-    option,
-    [role="option"],
-    .option {
-      padding: spacer(2) spacer(4);
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      &.focused,
-      &:focus {
-        @include bg-color(primary);
-      }
-
-      img {
-        border-radius: border-radius(1);
-        border: $border;
-        height: size(3);
-        flex: 0 0 size(3);
-        object-fit: cover;
-      }
-    }
-
-    &[aria-multiselectable="true"] {
-      option,
-      [role="option"] {
-        &[aria-selected="true"]:after {
-          @extend %icon, .icon-solid-check-circle;
-          color: full-color(success);
-          margin-left: auto;
-        }
-      }
-    }
-
-    h3 {
-      padding: spacer(2) spacer(4);
-
-      &:not(:first-child) {
-        border-top: $border;
-        padding-top: spacer(4);
-        margin-top: spacer(2);
-      }
-    }
-  }
-}
-
 [role="combobox"] {
   cursor: pointer;
 }

From a37e4a4760e20397c333aac114d1210b74c96e7b Mon Sep 17 00:00:00 2001
From: Salman Najah <salmannajah123@gmail.com>
Date: Mon, 2 Feb 2026 22:44:09 +0530
Subject: [PATCH 6/7] fix

---
 app/javascript/components/Checkout/CreditCardInput.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/javascript/components/Checkout/CreditCardInput.tsx b/app/javascript/components/Checkout/CreditCardInput.tsx
index 41b4d2014d..8f74ef0039 100644
--- a/app/javascript/components/Checkout/CreditCardInput.tsx
+++ b/app/javascript/components/Checkout/CreditCardInput.tsx
@@ -57,7 +57,6 @@ export const CreditCardInput = ({
         <InputGroup disabled={disabled} aria-label="Card information" aria-invalid={invalid}>
           {baseStripeStyle == null ? (
             <input
-              className="font-[inherit]"
               ref={(el) => {
                 if (el == null) return;
                 const inputStyle = window.getComputedStyle(el);

From 883b132107f2a7d3ca95ece178cf7fdf23244b4d Mon Sep 17 00:00:00 2001
From: Salman Najah <salmannajah123@gmail.com>
Date: Mon, 2 Feb 2026 23:19:34 +0530
Subject: [PATCH 7/7] fix

---
 .../Settings/PaymentsPage/AccountDetailsSection.tsx         | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/app/javascript/components/Settings/PaymentsPage/AccountDetailsSection.tsx b/app/javascript/components/Settings/PaymentsPage/AccountDetailsSection.tsx
index 0597bbe7a8..0b6e6fad4c 100644
--- a/app/javascript/components/Settings/PaymentsPage/AccountDetailsSection.tsx
+++ b/app/javascript/components/Settings/PaymentsPage/AccountDetailsSection.tsx
@@ -63,11 +63,7 @@ const AccountDetailsSection = ({
               <a href="/help/article/260-your-payout-settings-page">What type of account should I choose?</a>
             </FieldsetTitle>
           </Fieldset>
-          <div
-            className="grid gap-4"
-            style={{ gridTemplateColumns: "repeat(auto-fit, minmax(min(15rem, 100%), 1fr))" }}
-            role="radiogroup"
-          >
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2" role="radiogroup">
             <Button
               role="radio"
               key="individual"